Standardize W&B ARIA chat example snippet

AGENTS.md

@@ -85,6 +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 `<CodeGroup>` or across `<Tab title="...">` blocks — label every tab with the same canonical name everywhere: `Python`, `TypeScript` (never `Typescript`), `Bash`. In a `<CodeGroup>`, 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.
+- **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 { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx';
+
+  <AriaChatBubbles
+    prompt="Your user prompt here"
+    response="A concise example ARIA response"
+  />
+  ```
+
+  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
 

models/app/features/custom-charts.mdx

@@ -4,6 +4,9 @@ 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 } 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.
 
 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 +249,29 @@ 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 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:
+
+<div className="not-prose my-6 grid gap-6 lg:grid-cols-2">
+  <div>
+    <p className="mb-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+      Code blocks
+    </p>
+    <AriaChatComparisonCodeColumn
+      prompt="Create a scatter plot of validation accuracy vs. training loss for the visible runs, with points colored by learning rate."
+      response="I'll add a custom chart panel that plots validation accuracy on the x-axis and training loss on the y-axis, with points colored by each run's learning rate from config."
+    />
+  </div>
+  <div>
+    <p className="mb-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+      Ask Assistant style (prototype)
+    </p>
+    <AriaChatBubbles
+      prompt="Create a scatter plot of validation accuracy vs. training loss for the visible runs, with points colored by learning rate."
+      response="I'll add a custom chart panel that plots validation accuracy on the x-axis and training loss on the y-axis, with points colored by each run's learning rate from config."
+    />
+  </div>
+</div>
+
 ### 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.
@@ -320,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
+* Creating a unique visualization not yet available in W&B and sharing it with others

models/app/features/panels.mdx

@@ -5,6 +5,9 @@ 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 } 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. 
 
 ## Workspace modes
@@ -101,6 +104,29 @@ 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 ARIA to add panels for you. The following compares the current code-block style with a chat-bubble prototype:
+
+<div className="not-prose my-6 grid gap-6 lg:grid-cols-2">
+  <div>
+    <p className="mb-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+      Code blocks
+    </p>
+    <AriaChatComparisonCodeColumn
+      prompt="Add line plot panels for every metric under the train/ prefix."
+      response="I'll add line plot panels for each train/ metric logged in the visible runs and organize them in your workspace."
+    />
+  </div>
+  <div>
+    <p className="mb-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+      Ask Assistant style (prototype)
+    </p>
+    <AriaChatBubbles
+      prompt="Add line plot panels for every metric under the train/ prefix."
+      response="I'll add line plot panels for each train/ metric logged in the visible runs and organize them in your workspace."
+    />
+  </div>
+</div>
+
 <Note>
 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.
 </Note>

models/track/workspaces.mdx

@@ -3,6 +3,9 @@ description: A playground for exploring run data with interactive visualizations
 title: View experiments results
 ---
 
+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*: 
 
 * **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 +35,29 @@ Improve team collaboration with tailored workspace views. Create Saved Views to
 2. Make edits to the workspace.
 3. Click the **action (<Icon icon="ellipsis" iconType="solid"/>)** menu at the top right corner of your workspace. Click **Save as a new view**.
 
+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:
+
+<div className="not-prose my-6 grid gap-6 lg:grid-cols-2">
+  <div>
+    <p className="mb-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+      Code blocks
+    </p>
+    <AriaChatComparisonCodeColumn
+      prompt="Save this workspace as a new view called LR comparison so my team can review learning-rate experiments."
+      response="I'll save your current workspace layout, including the visible runs and panel arrangement, as a new saved view named LR comparison."
+    />
+  </div>
+  <div>
+    <p className="mb-3 text-sm font-medium text-zinc-700 dark:text-zinc-300">
+      Ask Assistant style (prototype)
+    </p>
+    <AriaChatBubbles
+      prompt="Save this workspace as a new view called LR comparison so my team can review learning-rate experiments."
+      response="I'll save your current workspace layout, including the visible runs and panel arrangement, as a new saved view named LR comparison."
+    />
+  </div>
+</div>
+
 New saved views appear in the workspace navigation menu.
 
 <Frame>

snippets/AriaChatBubbles.jsx

@@ -0,0 +1,123 @@
+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';
+
+  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 ? (
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        className="size-4 sm:size-3.5 text-primary dark:text-primary-light"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    ) : (
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        className="size-4 sm:size-3.5"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+      </svg>
+    );
+
+  const bubbleRow = ({
+    align,
+    bubbleClassName,
+    text,
+    copied,
+    setCopied,
+    copyLabel,
+  }) => (
+    <div
+      className={`flex w-full ${align === 'end' ? 'justify-end' : 'justify-start'}`}
+    >
+      <div
+        className={`flex w-fit max-w-[min(100%,36rem)] items-start gap-1 rounded-2xl py-2 pl-3 pr-1.5 ${bubbleClassName}`}
+      >
+        <div className={`min-w-0 flex-1 ${bubbleTextClassName}`}>{text}</div>
+        <button
+          type="button"
+          className={`mt-0.5 shrink-0 ${copyButtonClassName}`}
+          onClick={() => copyText(text, setCopied)}
+          aria-label={copyLabel}
+        >
+          {copyIcon(copied)}
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div
+      aria-label="ARIA chat example"
+      className="not-prose flex flex-col gap-3"
+      role="group"
+    >
+      {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',
+      })}
+    </div>
+  );
+};
+
+export default AriaChatBubbles;

snippets/_includes/aria-chat-comparison.mdx

@@ -0,0 +1,10 @@
+export const AriaChatComparisonCodeColumn = ({ prompt, response }) => (
+  <>
+    <CodeBlock language="text" filename="User prompt">
+      {prompt}
+    </CodeBlock>
+    <CodeBlock language="text" filename="ARIA response">
+      {response}
+    </CodeBlock>
+  </>
+);