Skip to content

feat(AiCard): add new component aicard#1544

Merged
atabel merged 9 commits intoTelefonica:masterfrom
AngeloOBonfante:feat/ai-card
May 8, 2026
Merged

feat(AiCard): add new component aicard#1544
atabel merged 9 commits intoTelefonica:masterfrom
AngeloOBonfante:feat/ai-card

Conversation

@AngeloOBonfante
Copy link
Copy Markdown
Contributor

Adds new component AiCard.

The AI ​​Card component (initially proposed as "Dynamic Callout") is a component proposed by the Evolution team and serves as an entry point for interaction with AI. It should be treated as an independent card (not as a variant of the Callout) and functions as a clickable element that takes the user to another AI screen/flow, simulating a "typing start" to encourage interaction.

task: Telefonica/mistica-design#2632

@vinrosa vinrosa requested a review from yceballost May 5, 2026 12:43
@yceballost yceballost requested a review from Marcosld May 5, 2026 12:54
@ieduardogf ieduardogf requested a review from atabel May 5, 2026 13:33
@atabel
Copy link
Copy Markdown
Contributor

atabel commented May 5, 2026

If this is a mistica-community component, it should be in this folder https://github.com/Telefonica/mistica-web/tree/master/src/community and exported like these other community components: https://github.com/Telefonica/mistica-web/blob/master/src/index.tsx#L272-L286

@AngeloOBonfante
Copy link
Copy Markdown
Contributor Author

If this is a mistica-community component, it should be in this folder https://github.com/Telefonica/mistica-web/tree/master/src/community and exported like these other community components: https://github.com/Telefonica/mistica-web/blob/master/src/index.tsx#L272-L286

moved the files to the correct folder 👍

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new Community component, AiCard, intended to act as an AI entry-point card that displays a “typing start” animation and behaves as a clickable navigation element.

Changes:

  • Introduces src/community/AiCard component with typing/deleting animation behavior and accessibility labeling.
  • Adds vanilla-extract styles, Storybook story, Playroom snippet, and a Jest/RTL test suite for the new component.
  • Exposes the component through community exports and a temporary root-level CommunityAiCard export.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/index.tsx Exports CommunityAiCard from the root entrypoint (temporary Community export pattern).
src/community/index.tsx Adds AiCard to the community barrel exports.
src/community/ai-card.tsx Implements the AiCard component, animation hook, and touchable behavior.
src/community/ai-card.css.ts Adds styling for layout, gradient border/background, and caret blink animation.
src/community/__stories__/ai-card-story.tsx Adds Storybook story to showcase and tweak AiCard props.
src/__tests__/ai-card-test.tsx Adds unit/integration tests for rendering, accessibility roles, interaction, and reduced motion behavior.
playroom/snippets.tsx Adds a Playroom snippet for AiCard.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/community/ai-card.tsx Outdated
@ieduardogf ieduardogf self-assigned this May 6, 2026
Comment thread src/community/ai-card.tsx
Comment thread src/community/ai-card.tsx Outdated
Comment thread src/community/ai-card.tsx Outdated
Comment thread src/community/ai-card.tsx
Comment thread src/community/ai-card.tsx
Comment thread src/community/ai-card.tsx Outdated
Comment thread src/community/ai-card.css.ts Outdated
Comment thread src/community/ai-card.tsx Outdated
Comment thread src/community/ai-card.tsx Outdated
Comment thread src/community/__stories__/ai-card-story.tsx
Comment thread src/community/ai-card.tsx
Comment thread src/community/ai-card.tsx
@AngeloOBonfante
Copy link
Copy Markdown
Contributor Author

  • New borderColor prop added. the border is now by default skinVars.colors.border and also supports different colors and linear gradients passed to it.
  • Asset prop added, it controls the previous hardcoded icon, it displays a reactElement.
  • Added jsdocs explaining the props.
  • Fixed the text alignment when a long word is used.
  • Removed calls to undefined vars.
  • Renamed deleteUntil to deleteChars.
  • Text is now a required prop.
  • Updated snippet and story to use the gradient and demonstrate usage.

@atabel atabel added the safe-to-deploy Allow preview deploys in external PRs label May 7, 2026
Comment thread src/__tests__/ai-card-test.tsx Outdated
Comment thread src/community/ai-card.tsx Outdated
@AngeloOBonfante
Copy link
Copy Markdown
Contributor Author

  • Asset is no longer required

@dzayas dzayas requested a review from yceballost May 7, 2026 15:45
@ieduardogf ieduardogf removed the request for review from Marcosld May 7, 2026 16:27
Comment thread src/community/ai-card.tsx Outdated
Comment thread src/community/ai-card.tsx Outdated
@atabel atabel added this pull request to the merge queue May 8, 2026
Merged via the queue into Telefonica:master with commit 96959e9 May 8, 2026
9 of 11 checks passed
@tuentisre
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 16.62.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

MurilloLeoni pushed a commit to MurilloLeoni/mistica-web that referenced this pull request May 8, 2026
# [16.62.0](Telefonica/mistica-web@v16.61.0...v16.62.0) (2026-05-08)

### Features

* **AiCard:** add new component aicard ([Telefonica#1544](Telefonica#1544)) ([96959e9](Telefonica@96959e9))
* allow PR workflows from forks ([Telefonica#1547](Telefonica#1547)) ([2270adc](Telefonica@2270adc)), closes [/github.com/Telefonica/tf-github-cdo-repos/blob/main/novum/repositories/mistica-web/terraform.tfvars#L23-L32](https://github.com//github.com/Telefonica/tf-github-cdo-repos/blob/main/novum/repositories/mistica-web/terraform.tfvars/issues/L23-L32)
* **Icons:** update artificial intelligence icons in vivo ([Telefonica#1545](Telefonica#1545)) ([f732114](Telefonica@f732114))
* **MenuItem:** Added description to MenuItem ([Telefonica#1543](Telefonica#1543)) ([a1f2e7d](Telefonica@a1f2e7d))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

released safe-to-deploy Allow preview deploys in external PRs

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants