feat(conversational-ai): deliver complete 2nd-gen conversational AI pattern with accessibility, docs, and test coverage#6170
Conversation
…eb-components into conversation-ai-pattern
🦋 Changeset detectedLatest commit: d4405a9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 84 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📚 Branch Preview Links🔍 First Generation Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
TarunAdobe
force-pushed
the
ttomar/conversation-ai
branch
from
efa98e1 to
38ba0ce
Compare
nikkimk
left a comment
nikkimk
left a comment
There was a problem hiding this comment.
Let's chat about status and conversation turn accessibility.
There was a problem hiding this comment.
also need minrows/maxrows???
…of github.com:adobe/spectrum-web-components into ttomar/conversation-ai
nikkimk
left a comment
nikkimk
left a comment
There was a problem hiding this comment.
Getting better and better. I found a few more a11y issues to resolve, and I have a question out to the a11y team about the conversation thread rti. I'll update you when I hear back.
There was a problem hiding this comment.
I wonder if it might be better if we do not use an RTI in the conversation because the sections themselves have interactive components.
The reasoning is similar to the accordion recommendations here: https://adobedesign.slack.com/archives/CB2S6SRK4/p1776959570558769?thread_ts=1776954369.555639&cid=CB2S6SRK4
I'll check with the accessibility team to confirm whether my instincts are correct here and let you know when I hear back.
| @@ -0,0 +1,242 @@ | |||
| /** | |||
There was a problem hiding this comment.
Could we have an story in the behaviors section where selecting positive/negative feedback changes the feedback? It would be good to show our consumers how to do this and also good for manual screenreader testing.
| @@ -0,0 +1,258 @@ | |||
| /** | |||
There was a problem hiding this comment.
Could we have an story in the behaviors section where the status changes programmatically? It would be good to show our consumers how to do this and also good for manual screenreader testing.
| <div class="swc-SuggestionGroup"> | ||
| ${hasHeading | ||
| ? html` | ||
| <h3 |
There was a problem hiding this comment.
This could be any heading level from h2 to h6, depending on the page hierarchy it is used on. I recommend using a heading-level attribute and rendering the heading based on that attribute.
See the following for more information:
| private focusgroupNavigationController = new FocusgroupNavigationController( | ||
| this, | ||
| { | ||
| direction: 'horizontal', |
There was a problem hiding this comment.
we could probably allow both directions here. See https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio-rating/
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| p { | ||
| margin: 0; | ||
| } |
There was a problem hiding this comment.
These selectors are globally scoped and would apply to any h2, h3, p etc. where we use this stylesheet (ie anywhere in Storybook) if there's not a more specific style to override it (usually there is).
I don't think there's any example of an .swc-conversationalAi-systemProse h1 in this repo either, that's not a big deal, but just noting we never see that selector in action in Storybook.
|
|
||
| .swc-conversationalAi-systemProse ul, | ||
| .swc-conversationalAi-systemProse ol { | ||
| padding-inline-start: 20px; |
There was a problem hiding this comment.
Is there a token that would work here?
| .swc-ConversationThread { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--swc-conversation-thread-gap, 16px); |
There was a problem hiding this comment.
Could this be a token? For instance
| gap: var(--swc-conversation-thread-gap, 16px); | |
| gap: var(--swc-conversation-thread-gap, token("spacing-300")); |
| h3 { | ||
| font-size: token("font-size-300"); | ||
| } |
There was a problem hiding this comment.
Is there a specific reason the font-size needs to be under this selector and not .swc-SuggestionGroup-title?
I'm not all that familiar with the markup, but from what I see in Storybook, the h3 child of .swc-SuggestionGroup is .swc-SuggestionGroup-title.
It looks like .swc-SuggestionGroup-title can have different levels other than h3 though. In those other heading levels, would we not want to set the font-size? (For instance if you set it to h4 or lower it gets quite a bit smaller.)
| inline-size: var(--swc-message-feedback-button-inline-size, 32px); | ||
| block-size: var(--swc-message-feedback-button-block-size, 32px); |
There was a problem hiding this comment.
Do we want tokens for these? spacing-500?
There was a problem hiding this comment.
This component will need some forced-colors adjustments so users can tell if an option is selected, right now the Status story looks like this in WHCM:
Vs. in regular dark mode:
| padding: 0; | ||
| color: token("gray-800"); | ||
| background: token("gray-200"); | ||
| border: none; |
There was a problem hiding this comment.
This also needs a transparent border for WHCM 🙂
| gap: token("spacing-300"); | ||
| align-items: center; | ||
| min-block-size: var(--swc-upload-artifact-card-min-block-size, 68px); | ||
| padding: token("spacing-300"); |
There was a problem hiding this comment.
We can add a transparent border here too, I think
| inline-size: var(--swc-upload-artifact-card-thumbnail-inline-size, 32px); | ||
| block-size: var(--swc-upload-artifact-card-thumbnail-block-size, 32px); | ||
| background: linear-gradient(135deg, #a78bfa, #f472b6); | ||
| border-radius: token("corner-radius-75"); |
There was a problem hiding this comment.
And also transparent border here, but before border-radius
|
|
||
| :host([type="media"]) .swc-UploadArtifact-surface { | ||
| flex-direction: column; | ||
| gap: token("spacing-100"); |
There was a problem hiding this comment.
And I think a transparent border here, possibly also the thumbnail slotted img.
TarunAdobe
force-pushed
the
ttomar/conversation-ai
branch
2 times, most recently
from
76d8415 to
fa10bb0
Compare
TarunAdobe
force-pushed
the
ttomar/conversation-ai
branch
from
fa10bb0 to
cb208ea
Compare
rubencarvalho
dismissed stale reviews from nikkimk, Rajdeepc, and rise-erpelding
Merging initial phase for more atomic PRs
rubencarvalho
left a comment
rubencarvalho
left a comment
There was a problem hiding this comment.
Merging initial phase for addressing feedback in smaller, follow-up PRs.
blunteshwar
left a comment
blunteshwar
left a comment
There was a problem hiding this comment.
Merging this for now so feedback can be tracked and addressed through smaller, modular follow-up PRs.
8 participants
Description
This PR introduces and iterates on the entire Conversational AI pattern in
2nd-gen/packages/swc/patterns/conversational-ai, including component primitives, pattern wrappers, docs, tests, and accessibility support.Motivation and context
Conversational AI experiences are emerging across Adobe products. These experiences share a common set of UI patterns (chat interfaces, message threads, composer inputs, agent status indicators, streaming text, and more) that don't yet exist in the Spectrum component library.
This work covers the definition and delivery of those UI patterns for Spectrum Web Components. The goal is to ship a set of well-specified, production-ready components that any Adobe product team building conversational AI features can use—solving the problem once in Spectrum rather than having every team invent their own solutions independently.
Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
[ ] Conversational AI end-to-end component validation
Device review
Accessibility testing checklist