From a8d439fc033d6ddbb9b17858338b007c84c58da0 Mon Sep 17 00:00:00 2001 From: Matt Linville Date: Tue, 30 Jun 2026 13:10:37 -0700 Subject: [PATCH 1/4] docs(DOCS-2631): standardize W&B ARIA chat example snippet - Add a reusable Mintlify snippet for compact user-prompt and W&B ARIA response examples. Includes code-block and chat variants so we can decide on the best styling - Document usage in AGENTS.md - Apply the pattern on custom charts, workspaces, and panels pages as proof of concept. --- AGENTS.md | 14 ++++++++ models/app/features/custom-charts.mdx | 23 ++++++++++++ models/app/features/panels.mdx | 23 ++++++++++++ models/track/workspaces.mdx | 23 ++++++++++++ .../_includes/aria-chat-comparison-layout.mdx | 16 +++++++++ snippets/_includes/aria-chat-example.mdx | 35 +++++++++++++++++++ 6 files changed, 134 insertions(+) create mode 100644 snippets/_includes/aria-chat-comparison-layout.mdx create mode 100644 snippets/_includes/aria-chat-example.mdx diff --git a/AGENTS.md b/AGENTS.md index b5ad59f37f..8311a90fd7 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -85,6 +85,20 @@ To check or apply style, read the relevant pass file(s) and use them as guidance - **Python SDK functions**: Module-level functions in the Python SDK are listed in the [Global Functions overview](/models/ref/python/functions). - **`.editorconfig`**: An `.editorconfig` file in the repository root enforces indentation and whitespace automatically. Most editors apply it with no configuration. If yours doesn't support it natively, install the EditorConfig plugin (https://editorconfig.org/#download). - **Consistent language tab labels**: When an example offers multiple languages — in a `` or across `` blocks — label every tab with the same canonical name everywhere: `Python`, `TypeScript` (never `Typescript`), `Bash`. In a ``, give each fence a lowercase lexer **and** that canonical title (e.g. a `python` fence titled `Python`); never leave a language fence untitled. The reader's **Python/TypeScript** choice carries from page to page via `code-group-language-persist.js` (repo root), which matches those two labels case-insensitively — so inconsistent casing of them silently resets it. Other labels like `Bash` are only for in-page consistency and are intentionally not persisted across pages. Don't add a competing per-page persistence script. +- **W&B ARIA chat examples**: Use the reusable snippet at `/snippets/_includes/aria-chat-example.mdx` when a task can be delegated to W&B ARIA end-to-end in the W&B app. This is a third content modality alongside code examples and UI click sequences. Import and invoke with `prompt` and `response` props: + + ```mdx + import { AriaChatCodeBlocks } from '/snippets/_includes/aria-chat-example.mdx'; + + + ``` + + Use **W&B ARIA** as the public-facing product name in prose and in the response fence title (the snippet sets this automatically). The default format is compact: a user prompt and a concise W&B ARIA response. Don't include reasoning or thinking steps unless the page specifically needs them for clarity; longer walkthroughs belong on [ARIA overview](/aria/overview). Place chat examples in the first section where the ARIA-delegable task appears, not at the top of the page unless the whole page is about chatting with ARIA. + + For reviewer comparison during the DOCS-2631 prototype, import `AriaChatCodeBlocks`, `AriaChatBubbles`, and `AriaChatComparisonLayout` in the parent page and pass `codeColumn` and `chatColumn` props. Mintlify does not resolve component references across snippet files, so the parent page must import each piece. ## Working with the repository diff --git a/models/app/features/custom-charts.mdx b/models/app/features/custom-charts.mdx index 729930065b..8d8dbd8e85 100644 --- a/models/app/features/custom-charts.mdx +++ b/models/app/features/custom-charts.mdx @@ -4,6 +4,12 @@ description: Create custom charts in W&B projects with Vega visualizations keywords: ["Vega", "wandb.plot_table", "precision-recall curve", "ROC curve", "GraphQL query"] --- +import { + AriaChatBubbles, + AriaChatCodeBlocks, +} from '/snippets/_includes/aria-chat-example.mdx'; +import { AriaChatComparisonLayout } from '/snippets/_includes/aria-chat-comparison-layout.mdx'; + Custom charts let you visualize logged data exactly how you want, beyond the defaults W&B provides. Use them when you need to plot relationships, distributions, or model evaluation metrics that the built-in panels don't cover, such as precision-recall curves, custom histograms, or overlays of multiple experiments. Create custom charts in your W&B project. Log arbitrary tables of data and visualize them exactly how you want. Control details of fonts, colors, and tooltips with [Vega](https://vega.github.io/vega/). @@ -246,6 +252,23 @@ with wandb.init() as run: After you log data, build a chart in the W&B app by choosing which logged values to pull in and how to render them. Add a new custom chart to get started, then edit the query to select data from your visible runs. The query uses [GraphQL](https://graphql.org) to fetch data from the config, summary, and history fields in your runs. +You can also ask W&B ARIA to create a custom chart from a description. Open ARIA from your project workspace and describe the chart you want. The following compares the current code-block style with a chat-bubble prototype: + + + } + chatColumn={ + + } +/> + ### Build the GraphQL query The custom chart editor runs a GraphQL query over the runs you selected in the project workspace or report. In the query editor, add the fields you need. You can pick from `config`, `summary`, `history`, `summaryTable`, and `historyTable` so you don't need to write the query from scratch for most cases. diff --git a/models/app/features/panels.mdx b/models/app/features/panels.mdx index 1fdc24b1b7..eb5b5c4dc4 100644 --- a/models/app/features/panels.mdx +++ b/models/app/features/panels.mdx @@ -5,6 +5,12 @@ description: Use and customize workspace panels to visualize your logged data keywords: ["workspace panels", "quick add", "full-screen mode", "panel sections", "embed panel"] --- +import { + AriaChatBubbles, + AriaChatCodeBlocks, +} from '/snippets/_includes/aria-chat-example.mdx'; +import { AriaChatComparisonLayout } from '/snippets/_includes/aria-chat-comparison-layout.mdx'; + Use workspace panel visualizations to explore your [logged data](/models/ref/python/experiments/run.md/#method-runlog) by key, visualize the relationships between hyperparameters and output metrics, and more. This page describes how to choose a workspace mode, add and configure panels, organize them into sections, and share them with collaborators. ## Workspace modes @@ -101,6 +107,23 @@ Add panels to your workspace one at a time, either globally or at the section le Use **Quick add** to add a panel automatically for each key you select, either globally or at the section level. +You can also ask W&B ARIA to add panels for you. The following compares the current code-block style with a chat-bubble prototype: + + + } + chatColumn={ + + } +/> + For an automated workspace with no deleted panels, the **Quick add** option isn't visible because the workspace already includes panels for all logged keys. You can use **Quick add** to re-add a panel that you deleted. diff --git a/models/track/workspaces.mdx b/models/track/workspaces.mdx index cf291b840f..a00903a748 100644 --- a/models/track/workspaces.mdx +++ b/models/track/workspaces.mdx @@ -3,6 +3,12 @@ description: A playground for exploring run data with interactive visualizations title: View experiments results --- +import { + AriaChatBubbles, + AriaChatCodeBlocks, +} from '/snippets/_includes/aria-chat-example.mdx'; +import { AriaChatComparisonLayout } from '/snippets/_includes/aria-chat-comparison-layout.mdx'; + W&B workspace is your personal sandbox to customize charts and explore model results. A W&B workspace consists of *Tables* and *Panel sections*: * **Tables**: All runs logged to your project are listed in the project's table. Turn on and off runs, change colors, and expand the table to see notes, config, and summary metrics for each run. @@ -32,6 +38,23 @@ Improve team collaboration with tailored workspace views. Create Saved Views to 2. Make edits to the workspace. 3. Click the **action ()** menu at the top right corner of your workspace. Click **Save as a new view**. +You can also ask W&B ARIA to save your current workspace layout as a new view. The following compares the current code-block style with a chat-bubble prototype: + + + } + chatColumn={ + + } +/> + New saved views appear in the workspace navigation menu. diff --git a/snippets/_includes/aria-chat-comparison-layout.mdx b/snippets/_includes/aria-chat-comparison-layout.mdx new file mode 100644 index 0000000000..661c23f289 --- /dev/null +++ b/snippets/_includes/aria-chat-comparison-layout.mdx @@ -0,0 +1,16 @@ +export const AriaChatComparisonLayout = ({ codeColumn, chatColumn }) => ( +
+
+

+ Code blocks +

+ {codeColumn} +
+
+

+ Chat bubbles (prototype) +

+ {chatColumn} +
+
+); diff --git a/snippets/_includes/aria-chat-example.mdx b/snippets/_includes/aria-chat-example.mdx new file mode 100644 index 0000000000..da5f8777c6 --- /dev/null +++ b/snippets/_includes/aria-chat-example.mdx @@ -0,0 +1,35 @@ +export const AriaChatBubbles = ({ prompt, response }) => ( +
+
+ + You + +
+ {prompt} +
+
+
+ + W&B ARIA + +
+ {response} +
+
+
+); + +export const AriaChatCodeBlocks = ({ prompt, response }) => ( + <> + + {prompt} + + + {response} + + +); From 6dc1179edc27f943881bf07c731475c2487e81ad Mon Sep 17 00:00:00 2001 From: Matt Linville Date: Wed, 1 Jul 2026 11:47:51 -0700 Subject: [PATCH 2/4] Noah's feedback --- AGENTS.md | 28 +++- models/app/features/custom-charts.mdx | 31 ++-- models/app/features/panels.mdx | 29 ++-- models/track/workspaces.mdx | 29 ++-- snippets/AriaChatBubbles.jsx | 132 ++++++++++++++++++ .../_includes/aria-chat-comparison-layout.mdx | 16 --- snippets/_includes/aria-chat-comparison.mdx | 10 ++ snippets/_includes/aria-chat-example.mdx | 35 ----- 8 files changed, 212 insertions(+), 98 deletions(-) create mode 100644 snippets/AriaChatBubbles.jsx delete mode 100644 snippets/_includes/aria-chat-comparison-layout.mdx create mode 100644 snippets/_includes/aria-chat-comparison.mdx delete mode 100644 snippets/_includes/aria-chat-example.mdx diff --git a/AGENTS.md b/AGENTS.md index 8311a90fd7..2228bea209 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -85,20 +85,34 @@ To check or apply style, read the relevant pass file(s) and use them as guidance - **Python SDK functions**: Module-level functions in the Python SDK are listed in the [Global Functions overview](/models/ref/python/functions). - **`.editorconfig`**: An `.editorconfig` file in the repository root enforces indentation and whitespace automatically. Most editors apply it with no configuration. If yours doesn't support it natively, install the EditorConfig plugin (https://editorconfig.org/#download). - **Consistent language tab labels**: When an example offers multiple languages — in a `` or across `` blocks — label every tab with the same canonical name everywhere: `Python`, `TypeScript` (never `Typescript`), `Bash`. In a ``, give each fence a lowercase lexer **and** that canonical title (e.g. a `python` fence titled `Python`); never leave a language fence untitled. The reader's **Python/TypeScript** choice carries from page to page via `code-group-language-persist.js` (repo root), which matches those two labels case-insensitively — so inconsistent casing of them silently resets it. Other labels like `Bash` are only for in-page consistency and are intentionally not persisted across pages. Don't add a competing per-page persistence script. -- **W&B ARIA chat examples**: Use the reusable snippet at `/snippets/_includes/aria-chat-example.mdx` when a task can be delegated to W&B ARIA end-to-end in the W&B app. This is a third content modality alongside code examples and UI click sequences. Import and invoke with `prompt` and `response` props: +- **ARIA chat examples**: When a task can be delegated to ARIA end-to-end in the W&B app, add a compact chat example as a third content modality alongside code examples and UI click sequences. Use **ARIA** as the public-facing product name in prose and in fence titles. + + Default format: a user prompt and a concise ARIA response. Don't include reasoning or thinking steps unless the page specifically needs them for clarity; longer walkthroughs belong on [ARIA overview](/aria/overview). Place chat examples in the first section where the ARIA-delegable task appears, not at the top of the page unless the whole page is about chatting with ARIA. + + **Code blocks (default):** Use native Mintlify fences, matching [ARIA overview](/aria/overview): + + ````mdx + ```text title="User prompt" + Your user prompt here + ``` + + ```text title="ARIA response" + A concise example ARIA response + ``` + ```` + + **Ask Assistant style (optional):** Import `/snippets/AriaChatBubbles.jsx` when a chat-panel layout better fits the page. The component mirrors Mintlify's Ask Assistant sheet chrome and includes copy buttons for the prompt and response: ```mdx - import { AriaChatCodeBlocks } from '/snippets/_includes/aria-chat-example.mdx'; + import { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx'; - ``` - Use **W&B ARIA** as the public-facing product name in prose and in the response fence title (the snippet sets this automatically). The default format is compact: a user prompt and a concise W&B ARIA response. Don't include reasoning or thinking steps unless the page specifically needs them for clarity; longer walkthroughs belong on [ARIA overview](/aria/overview). Place chat examples in the first section where the ARIA-delegable task appears, not at the top of the page unless the whole page is about chatting with ARIA. - - For reviewer comparison during the DOCS-2631 prototype, import `AriaChatCodeBlocks`, `AriaChatBubbles`, and `AriaChatComparisonLayout` in the parent page and pass `codeColumn` and `chatColumn` props. Mintlify does not resolve component references across snippet files, so the parent page must import each piece. + For reviewer comparison during the DOCS-2631 prototype, import `AriaChatComparisonCodeColumn` and `AriaChatBubbles` in the parent page and render them in a two-column grid. Mintlify does not render JSX components imported into MDX snippets, and it does not render children passed as props across snippet boundaries. ## Working with the repository diff --git a/models/app/features/custom-charts.mdx b/models/app/features/custom-charts.mdx index 8d8dbd8e85..6c2876616b 100644 --- a/models/app/features/custom-charts.mdx +++ b/models/app/features/custom-charts.mdx @@ -4,11 +4,8 @@ description: Create custom charts in W&B projects with Vega visualizations keywords: ["Vega", "wandb.plot_table", "precision-recall curve", "ROC curve", "GraphQL query"] --- -import { - AriaChatBubbles, - AriaChatCodeBlocks, -} from '/snippets/_includes/aria-chat-example.mdx'; -import { AriaChatComparisonLayout } from '/snippets/_includes/aria-chat-comparison-layout.mdx'; +import { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx'; +import { AriaChatComparisonCodeColumn } from '/snippets/_includes/aria-chat-comparison.mdx'; Custom charts let you visualize logged data exactly how you want, beyond the defaults W&B provides. Use them when you need to plot relationships, distributions, or model evaluation metrics that the built-in panels don't cover, such as precision-recall curves, custom histograms, or overlays of multiple experiments. @@ -252,22 +249,28 @@ with wandb.init() as run: After you log data, build a chart in the W&B app by choosing which logged values to pull in and how to render them. Add a new custom chart to get started, then edit the query to select data from your visible runs. The query uses [GraphQL](https://graphql.org) to fetch data from the config, summary, and history fields in your runs. -You can also ask W&B ARIA to create a custom chart from a description. Open ARIA from your project workspace and describe the chart you want. The following compares the current code-block style with a chat-bubble prototype: +You can also ask ARIA to create a custom chart from a description. Open ARIA from your project workspace and describe the chart you want. The following compares the current code-block style with a chat-bubble prototype: - +
+

+ Code blocks +

+ - } - chatColumn={ +
+
+

+ Ask Assistant style (prototype) +

- } -/> +
+ ### Build the GraphQL query @@ -343,4 +346,4 @@ Custom charts are useful when the default panels can't represent what you need t * Showing model validation metrics that require custom x-y coordinates (like precision-recall curves) * Overlaying data distributions from two different models or experiments as histograms * Showing changes in a metric through snapshots at multiple points during training -* Creating a unique visualization not yet available in W&B and sharing it with others \ No newline at end of file +* Creating a unique visualization not yet available in W&B and sharing it with others diff --git a/models/app/features/panels.mdx b/models/app/features/panels.mdx index eb5b5c4dc4..ec55809d0a 100644 --- a/models/app/features/panels.mdx +++ b/models/app/features/panels.mdx @@ -5,11 +5,8 @@ description: Use and customize workspace panels to visualize your logged data keywords: ["workspace panels", "quick add", "full-screen mode", "panel sections", "embed panel"] --- -import { - AriaChatBubbles, - AriaChatCodeBlocks, -} from '/snippets/_includes/aria-chat-example.mdx'; -import { AriaChatComparisonLayout } from '/snippets/_includes/aria-chat-comparison-layout.mdx'; +import { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx'; +import { AriaChatComparisonCodeColumn } from '/snippets/_includes/aria-chat-comparison.mdx'; Use workspace panel visualizations to explore your [logged data](/models/ref/python/experiments/run.md/#method-runlog) by key, visualize the relationships between hyperparameters and output metrics, and more. This page describes how to choose a workspace mode, add and configure panels, organize them into sections, and share them with collaborators. @@ -107,22 +104,28 @@ Add panels to your workspace one at a time, either globally or at the section le Use **Quick add** to add a panel automatically for each key you select, either globally or at the section level. -You can also ask W&B ARIA to add panels for you. The following compares the current code-block style with a chat-bubble prototype: +You can also ask ARIA to add panels for you. The following compares the current code-block style with a chat-bubble prototype: - +
+

+ Code blocks +

+ - } - chatColumn={ +
+
+

+ Ask Assistant style (prototype) +

- } -/> +
+ For an automated workspace with no deleted panels, the **Quick add** option isn't visible because the workspace already includes panels for all logged keys. You can use **Quick add** to re-add a panel that you deleted. diff --git a/models/track/workspaces.mdx b/models/track/workspaces.mdx index a00903a748..88feb26e84 100644 --- a/models/track/workspaces.mdx +++ b/models/track/workspaces.mdx @@ -3,11 +3,8 @@ description: A playground for exploring run data with interactive visualizations title: View experiments results --- -import { - AriaChatBubbles, - AriaChatCodeBlocks, -} from '/snippets/_includes/aria-chat-example.mdx'; -import { AriaChatComparisonLayout } from '/snippets/_includes/aria-chat-comparison-layout.mdx'; +import { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx'; +import { AriaChatComparisonCodeColumn } from '/snippets/_includes/aria-chat-comparison.mdx'; W&B workspace is your personal sandbox to customize charts and explore model results. A W&B workspace consists of *Tables* and *Panel sections*: @@ -38,22 +35,28 @@ Improve team collaboration with tailored workspace views. Create Saved Views to 2. Make edits to the workspace. 3. Click the **action ()** menu at the top right corner of your workspace. Click **Save as a new view**. -You can also ask W&B ARIA to save your current workspace layout as a new view. The following compares the current code-block style with a chat-bubble prototype: +You can also ask ARIA to save your current workspace layout as a new view. The following compares the current code-block style with a chat-bubble prototype: - +
+

+ Code blocks +

+ - } - chatColumn={ +
+
+

+ Ask Assistant style (prototype) +

- } -/> +
+ New saved views appear in the workspace navigation menu. diff --git a/snippets/AriaChatBubbles.jsx b/snippets/AriaChatBubbles.jsx new file mode 100644 index 0000000000..fca4a35428 --- /dev/null +++ b/snippets/AriaChatBubbles.jsx @@ -0,0 +1,132 @@ +export const AriaChatBubbles = ({ prompt, response }) => { + const [promptCopied, setPromptCopied] = useState(false); + const [responseCopied, setResponseCopied] = useState(false); + + useEffect(() => { + if (!promptCopied) { + return undefined; + } + + const timeout = setTimeout(() => setPromptCopied(false), 2000); + return () => clearTimeout(timeout); + }, [promptCopied]); + + useEffect(() => { + if (!responseCopied) { + return undefined; + } + + const timeout = setTimeout(() => setResponseCopied(false), 2000); + return () => clearTimeout(timeout); + }, [responseCopied]); + + const copyText = (text, setCopied) => { + navigator.clipboard + .writeText(text) + .then(() => setCopied(true)) + .catch(console.error); + }; + + const copyButtonClassName = + 'rounded-lg p-1.5 hover:bg-gray-100 dark:hover:bg-white/10 cursor-pointer text-gray-500'; + + return ( +
+
+
+
+ {prompt} +
+
+ +
+ +
+
+
+ {response} +
+
+ +
+
+ ); +}; + +export default AriaChatBubbles; diff --git a/snippets/_includes/aria-chat-comparison-layout.mdx b/snippets/_includes/aria-chat-comparison-layout.mdx deleted file mode 100644 index 661c23f289..0000000000 --- a/snippets/_includes/aria-chat-comparison-layout.mdx +++ /dev/null @@ -1,16 +0,0 @@ -export const AriaChatComparisonLayout = ({ codeColumn, chatColumn }) => ( -
-
-

- Code blocks -

- {codeColumn} -
-
-

- Chat bubbles (prototype) -

- {chatColumn} -
-
-); diff --git a/snippets/_includes/aria-chat-comparison.mdx b/snippets/_includes/aria-chat-comparison.mdx new file mode 100644 index 0000000000..39d6977fc2 --- /dev/null +++ b/snippets/_includes/aria-chat-comparison.mdx @@ -0,0 +1,10 @@ +export const AriaChatComparisonCodeColumn = ({ prompt, response }) => ( + <> + + {prompt} + + + {response} + + +); diff --git a/snippets/_includes/aria-chat-example.mdx b/snippets/_includes/aria-chat-example.mdx deleted file mode 100644 index da5f8777c6..0000000000 --- a/snippets/_includes/aria-chat-example.mdx +++ /dev/null @@ -1,35 +0,0 @@ -export const AriaChatBubbles = ({ prompt, response }) => ( -
-
- - You - -
- {prompt} -
-
-
- - W&B ARIA - -
- {response} -
-
-
-); - -export const AriaChatCodeBlocks = ({ prompt, response }) => ( - <> - - {prompt} - - - {response} - - -); From d2ca9f5173d1d1662d22abe268189a6da308fd43 Mon Sep 17 00:00:00 2001 From: Matt Linville Date: Wed, 1 Jul 2026 15:15:11 -0700 Subject: [PATCH 3/4] Adjust CSS for copy button positioning and contrast --- snippets/AriaChatBubbles.jsx | 173 +++++++++++++++++------------------ 1 file changed, 84 insertions(+), 89 deletions(-) diff --git a/snippets/AriaChatBubbles.jsx b/snippets/AriaChatBubbles.jsx index fca4a35428..03e720d7bb 100644 --- a/snippets/AriaChatBubbles.jsx +++ b/snippets/AriaChatBubbles.jsx @@ -30,101 +30,96 @@ export const AriaChatBubbles = ({ prompt, response }) => { const copyButtonClassName = 'rounded-lg p-1.5 hover:bg-gray-100 dark:hover:bg-white/10 cursor-pointer text-gray-500'; + const bubbleTextClassName = + 'hyphens-auto whitespace-pre-wrap text-base text-gray-800 [overflow-wrap:anywhere] lg:text-sm dark:text-gray-200'; + + const copyIcon = (copied) => + copied ? ( + + ) : ( + + ); + + const bubbleRow = ({ + align, + bubbleClassName, + text, + copied, + setCopied, + copyLabel, + }) => ( +
+
+
+
{text}
+
+
+ +
+
+
+ ); + return (
-
-
-
- {prompt} -
-
- -
- -
-
-
- {response} -
-
- -
+ {bubbleRow({ + align: 'end', + bubbleClassName: + 'rounded-br-none bg-gray-100 dark:bg-white/5', + text: prompt, + copied: promptCopied, + setCopied: setPromptCopied, + copyLabel: 'Copy user prompt', + })} + {bubbleRow({ + align: 'start', + bubbleClassName: + 'rounded-bl-none bg-primary/10 dark:bg-primary-light/10', + text: response, + copied: responseCopied, + setCopied: setResponseCopied, + copyLabel: 'Copy chat response', + })}
); }; From 1afbf9282e704648ccebb2027ab247bfb54843b0 Mon Sep 17 00:00:00 2001 From: Matt Linville Date: Wed, 1 Jul 2026 15:32:47 -0700 Subject: [PATCH 4/4] Move the copy widget within the bubble --- snippets/AriaChatBubbles.jsx | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/snippets/AriaChatBubbles.jsx b/snippets/AriaChatBubbles.jsx index 03e720d7bb..50b4f37feb 100644 --- a/snippets/AriaChatBubbles.jsx +++ b/snippets/AriaChatBubbles.jsx @@ -76,22 +76,18 @@ export const AriaChatBubbles = ({ prompt, response }) => {
-
-
+
{text}
+
-
- -
+ {copyIcon(copied)} +
);