feat(conversational-ai): deliver complete 2nd-gen conversational AI pattern with accessibility, docs, and test coverage #6170
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@adobe/spectrum-wc': minor | ||
| --- | ||
|
|
||
| Add the new Conversational AI pattern and component set to @adobe/spectrum-wc with docs, stories, and test coverage. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Contributor
There was a problem hiding this comment. Are we sure we need this? Is there a more Storybook idiomatic / automatic way of doing it: I'd start by trying this: https://storybook.js.org/docs/api/doc-blocks/doc-block-source#type (maybe try "dynamic"?). If it does not work then let's keep the transform, like you did.
Contributor
Author
There was a problem hiding this comment. The transform is still needed for the Conversational AI pattern stories because many snippets come through as CSF/render wrapper code (or helper wrappers) rather than clean markup, and we want docs to show the <swc-...> HTML directly. So we’re effectively already trying the Storybook-idiomatic path first (auto/dynamic), and only applying the transform as a fallback cleanup for those specific stories. Also, we do have alternative if we want to avoid this transform for specific stories which is to show custom source instead of auto-generated sourceUse parameters.docs.source.code on the story (we already do this in some places with threadExampleSource). This lets us show curated code in docs regardless of how the story renders.. but I don't know which one to prefer |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| /** | ||
| * Copyright 2026 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| import type { StoryContext } from '@storybook/web-components'; | ||
|
|
||
| const PATTERN_TITLE_PREFIX = 'Patterns/Conversational AI/'; | ||
|
|
||
| /** | ||
| * Format source snippets for Storybook code panel. | ||
| * For conversational AI pattern stories, this removes CSF wrapper noise and | ||
| * keeps only the `html\`...\`` content when possible. | ||
| */ | ||
| export async function transformDocsSource( | ||
| source: string, | ||
| storyContext?: StoryContext | ||
| ): Promise<string> { | ||
| const normalizedSource = shouldNormalizePatternSource(storyContext) | ||
| ? extractHtmlTemplate(source) | ||
| : source; | ||
|
|
||
| return formatHtml(normalizedSource); | ||
| } | ||
|
|
||
| function shouldNormalizePatternSource(storyContext?: StoryContext): boolean { | ||
| return storyContext?.title?.startsWith(PATTERN_TITLE_PREFIX) ?? false; | ||
| } | ||
|
|
||
| function extractHtmlTemplate(source: string): string { | ||
| const primaryMatch = source.match( | ||
| /\brender\s*:\s*\([^)]*\)\s*=>\s*html`([\s\S]*?)`\s*[},]/m | ||
| ); | ||
| if (primaryMatch?.[1]) { | ||
| return primaryMatch[1].trim(); | ||
| } | ||
|
|
||
| const fallbackMatch = source.match(/\bhtml`([\s\S]*?)`/m); | ||
|
Contributor
There was a problem hiding this comment. This fallback
Contributor
Author
There was a problem hiding this comment. let me think about this. |
||
| if (fallbackMatch?.[1]) { | ||
| return fallbackMatch[1].trim(); | ||
| } | ||
|
|
||
| return source; | ||
| } | ||
|
|
||
| async function formatHtml(source: string): Promise<string> { | ||
| try { | ||
| const prettier = await import('prettier/standalone'); | ||
| const prettierPluginHtml = await import('prettier/plugins/html'); | ||
| const prettierPluginBabel = await import('prettier/plugins/babel'); | ||
| const prettierPluginEstree = await import('prettier/plugins/estree'); | ||
|
|
||
| return prettier.format(source, { | ||
| parser: 'html', | ||
| plugins: [ | ||
| prettierPluginHtml.default, | ||
| prettierPluginBabel.default, | ||
| prettierPluginEstree.default, | ||
| ], | ||
| tabWidth: 2, | ||
| useTabs: false, | ||
| singleQuote: true, | ||
| printWidth: 80, | ||
| }); | ||
| } catch { | ||
| return source; | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { Meta, Canvas } from '@storybook/addon-docs/blocks'; | ||
| import * as ConversationThreadStories from './conversation-thread/stories/conversation-thread.stories'; | ||
|
|
||
| <Meta title="Conversational AI/README" /> | ||
|
|
||
| # Conversational AI | ||
|
|
||
| A complete set of building blocks for composing AI chat interfaces in 2nd-gen Spectrum Web Components. The pattern covers the full response lifecycle — from user input through AI generation, output, feedback, source attribution, and follow-up suggestions. | ||
|
|
||
| --- | ||
|
|
||
| ## Full example | ||
|
|
||
| <Canvas of={ConversationThreadStories.FullPattern} sourceState="none" /> | ||
|
|
||
| --- | ||
|
|
||
| ## Components | ||
|
|
||
| | Element | Description | | ||
| | ------------------------- | ----------------------------------------------------------------------------------------------------- | | ||
| | `swc-prompt-field` | Text input surface for entering or refining a prompt | | ||
| | `swc-upload-artifact` | Shared upload artifact primitive with `card` and `media` types, used in prompt-field surfaces | | ||
| | `swc-conversation-thread` | Thread wrapper that stacks turns and enables ArrowUp/ArrowDown keyboard navigation between messages | | ||
| | `swc-conversation-turn` | Column alignment for one participant turn; stack consecutive messages in one turn for grouped spacing | | ||
| | `swc-user-message` | User message bubble with explicit `type="copy\|card\|media"` rendering | | ||
| | `swc-system-message` | System reply stack; **default slot** guidance is after the API table on the System message docs page | | ||
| | `swc-response-status` | Loading / generation-complete status indicator | | ||
| | `swc-message-feedback` | Positive / negative feedback control | | ||
| | `swc-message-sources` | Collapsible numbered list of response sources | | ||
| | `swc-suggestion-group` | Follow-up suggestion group with optional title and slotted suggestion items | | ||
| | `swc-suggestion-item` | Interactive chip action used inside `swc-suggestion-group`; emits bubbled selection event | | ||
|
|
||
| --- | ||
|
|
||
| ## Tokens | ||
|
|
||
| All components resolve styles through `token()` calls that map to `var(--swc-*)` custom properties. No hard-coded colours or sizes — set the standard Spectrum token layer to theme the pattern globally. |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.