rift-ds 1.9.0 → 1.11.0

package/chat/ChatWidget.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useSyncExternalStore, useRef, useEffect, useState, useId, useMemo } from "react";
+import { useMemo, useRef, useEffect, useSyncExternalStore, useState, useId } from "react";
 import { AttachmentDropZone } from "../components/Attachment/AttachmentDropZone.js";
 import { AttachmentGroup } from "../components/Attachment/AttachmentGroup.js";
 import { useAttachments } from "../components/Attachment/useAttachments.js";
@@ -22,16 +22,22 @@ import { ChatArtifactPane } from "./ChatArtifactPane.js";
 import { ChatTabs } from "./ChatTabs.js";
 import { ChatThreads } from "./ChatThreads.js";
 import { useChatWidget, ArtifactSeatContext } from "./context.js";
-import { subscribeClock, readGreeting, serverGreeting } from "./greeting.js";
+import { DEFAULT_GREETING_COPY, subscribeClock, greetingFor, serverGreeting } from "./greeting.js";
 import { CHAT_PLACEMENTS, chatPlacement } from "./placement.js";
 import { ASIDE_WITH_THREADS_MIN_WIDTH, ARTIFACT_MIN_COLUMN_WIDTH, THREADS_RAIL_MIN_WIDTH, ASIDE_RAIL_MIN_WIDTH } from "./queries.js";
 import { fitsChip } from "./suggestions.js";
 import { TurnCard } from "./TurnContent.js";
+import { isBlockingQuestion } from "./questions.js";
+import { ReplyBody } from "./TurnQuestion.js";
+import { ResponseActionsLabelsContext } from "./ResponseActions.js";
+import { FollowupSuggestionsLabelContext } from "./FollowupSuggestions.js";
 import "./ChatWidget.css";
 const DEFAULT_MAX_ATTACHMENTS = 10;
 const DEFAULT_MAX_ATTACHMENT_BYTES = 50 * 1024 * 1024;
 const LONG_PASTE_CHARS = 1200;
 const formatBytes = (bytes) => bytes >= 1024 * 1024 * 1024 ? `${Math.round(bytes / (1024 * 1024 * 1024))} GB` : `${Math.round(bytes / (1024 * 1024))} MB`;
+const defaultAttachHint = (maxSize, maxFiles) => `Up to ${maxSize} each · ${maxFiles} files max`;
+const defaultContextNote = (title) => `Looking at “${title}”`;
 const withAgentMark = (profile, title) => profile.avatar || profile.avatarSrc ? profile : { ...profile, avatar: /* @__PURE__ */ jsx(PixelAvatar, { name: title, size: "lg", label: title }) };
 function ChatWidget({
   fullscreenEnabled = true,
@@ -40,7 +46,9 @@ function ChatWidget({
   compact = false,
   phone = false,
   title = "Assistant",
+  flow = "top-down",
   placeholder = "Ask anything",
+  questionsPlaceholder = "Answer the questions above, or skip them",
   showStarters = true,
   logo = null,
   tagline = "How can I help you today?",
@@ -61,11 +69,74 @@ function ChatWidget({
   agent,
   artifacts = false,
   contextLabel,
+  contextNote = defaultContextNote,
+  attachHint: attachHintText = defaultAttachHint,
+  greetings,
+  placementLabels,
+  agentStatus = "Connected",
+  artifactPanelTitle = "Artifacts",
+  artifactEmptyTitle = "Nothing here yet",
+  artifactEmptyDescription = "What the chat makes for you, like a dashboard or a page, opens in this panel.",
   widgets,
   widgetsLayout = "fit",
   widgetsWidth = "column",
-  disclaimer = "Answers may be wrong."
+  disclaimer = "Answers may be wrong.",
+  startersLabel = "Conversation starters",
+  newChatLabel = "New chat",
+  showAgentLabel = "Show the agent panel",
+  hideAgentLabel = "Hide the agent panel",
+  closeAgentLabel = "Close the agent panel",
+  showArtifactLabel = "Show the artifact panel",
+  hideArtifactLabel = "Hide the artifact panel",
+  closeArtifactLabel = "Close the artifact panel",
+  placementLabel = "Chat position",
+  enterFullscreenLabel = "Enter full screen",
+  exitFullscreenLabel = "Exit full screen",
+  closeLabel = "Close chat",
+  openThreadsLabel = "Open the chat history",
+  closeThreadsLabel = "Close the chat history",
+  modelPickerLabel = "Choose a model",
+  sendLabel = "Send",
+  copyResponseLabel = "Copy response",
+  copiedResponseLabel = "Copied",
+  copiedAnnouncementLabel = "Copied to clipboard",
+  goodResponseLabel = "Good response",
+  badResponseLabel = "Bad response",
+  followupsLabel = "Follow-up questions",
+  pastedTextLabel,
+  reasoningLabel,
+  tabsProps,
+  composerLabels,
+  attachmentDropZoneLabels,
+  attachmentGroupLabels,
+  chatThreadLabels,
+  modelPickerLabels,
+  artifactPanelLabels,
+  agentRailLabels,
+  questionCardLabels,
+  questionSummaryLabels,
+  codeBlockLabels,
+  promptSuggestionsLabels
 }) {
+  const responseActionsLabels = useMemo(
+    () => ({
+      copy: copyResponseLabel,
+      copied: copiedResponseLabel,
+      copiedAnnouncement: copiedAnnouncementLabel,
+      good: goodResponseLabel,
+      bad: badResponseLabel
+    }),
+    [copyResponseLabel, copiedResponseLabel, copiedAnnouncementLabel, goodResponseLabel, badResponseLabel]
+  );
+  const turnLabels = useMemo(
+    () => ({
+      codeBlock: codeBlockLabels,
+      reasoning: reasoningLabel,
+      questionCard: questionCardLabels,
+      promptSuggestions: promptSuggestionsLabels
+    }),
+    [codeBlockLabels, reasoningLabel, questionCardLabels, promptSuggestionsLabels]
+  );
   const {
     turns,
     live,
@@ -91,6 +162,14 @@ function ChatWidget({
     openArtifact,
     closeArtifact
   } = useChatWidget();
+  const questionsOpen = isBlockingQuestion(turns[turns.length - 1], live !== null);
+  const questionsWereOpen = useRef(questionsOpen);
+  useEffect(() => {
+    if (questionsWereOpen.current && !questionsOpen) {
+      composerRef.current?.focus({ preventScroll: true });
+    }
+    questionsWereOpen.current = questionsOpen;
+  }, [questionsOpen]);
   const lockedValues = modelPolicy?.locked ?? [];
   const pick = chosenModel && !lockedValues.includes(chosenModel) ? chosenModel : null;
   const pickerValue = pick ?? modelPolicy?.default ?? defaultModel ?? models?.[0]?.value;
@@ -100,7 +179,12 @@ function ChatWidget({
     description: lockedValues.includes(option.value) ? lockedModelDescription : option.description,
     disabled: lockedValues.includes(option.value)
   }));
-  const greeting = useSyncExternalStore(subscribeClock, readGreeting, serverGreeting);
+  const greetingCopy = { ...DEFAULT_GREETING_COPY, ...greetings };
+  const greeting = useSyncExternalStore(
+    subscribeClock,
+    () => greetingFor((/* @__PURE__ */ new Date()).getHours(), greetingCopy),
+    serverGreeting
+  );
   const starters = (startersInput ?? []).filter((starter) => fitsChip(starter.label));
   const composerRef = useRef(null);
   const focusComposer = () => composerRef.current?.focus({ preventScroll: true });
@@ -108,7 +192,7 @@ function ChatWidget({
     if (open) focusComposer();
   }, [open]);
   const queue = useAttachments({ maxCount: maxAttachments, maxSize: maxAttachmentBytes });
-  const attachHint = `Up to ${formatBytes(maxAttachmentBytes)} each · ${maxAttachments} files max`;
+  const attachHint = attachHintText(formatBytes(maxAttachmentBytes), maxAttachments, maxAttachmentBytes);
   const handleSubmit = (value) => {
     if (fileAttachments && queue.items.length > 0) {
       const ready = queue.items.filter((item) => item.status === "ready");
@@ -136,13 +220,15 @@ function ChatWidget({
   const renderAside = aside ?? (agent ? (ctx) => /* @__PURE__ */ jsx(
     ChatAgentPane,
     {
-      profile: withAgentMark(agent.profile ?? { name: title, status: "Connected" }, title),
+      profile: withAgentMark(agent.profile ?? { name: title, status: agentStatus }, title),
       tabs: agent.tabs,
+      closeLabel: closeAgentLabel,
+      agentRailLabels,
       overlay: ctx.overlay,
       onClose: ctx.close
     }
   ) : void 0);
-  const tabsNode = tabs === true ? /* @__PURE__ */ jsx(ChatTabs, {}) : tabs || null;
+  const tabsNode = tabs === true ? /* @__PURE__ */ jsx(ChatTabs, { ...tabsProps }) : tabs || null;
   const hasRails = Boolean(renderThreads || renderAside || artifacts);
   const [threadsOpen, setThreadsOpen] = useState(false);
   const [asideOpen, setAsideOpen] = useState(Boolean(agent?.defaultOpen));
@@ -280,7 +366,7 @@ function ChatWidget({
     PromptSuggestions,
     {
       layout: "stack",
-      ariaLabel: "Conversation starters",
+      ariaLabel: startersLabel,
       pending: startersThinking,
       entrance: startersEntrance,
       suggestions: starters,
@@ -301,7 +387,7 @@ function ChatWidget({
       {
         icon: "edit_square",
         variant: "tertiary",
-        ariaLabel: "New chat",
+        ariaLabel: newChatLabel,
         tooltipPosition: "bottom",
         onClick: () => {
           reset();
@@ -316,7 +402,7 @@ function ChatWidget({
         icon: /* @__PURE__ */ jsx(PixelAvatar, { name: title, size: "sm" }),
         variant: "tertiary",
         className: asideShown ? "ds-chat-widget__agent-toggle--on" : void 0,
-        ariaLabel: asideShown ? "Hide the agent panel" : "Show the agent panel",
+        ariaLabel: asideShown ? hideAgentLabel : showAgentLabel,
         tooltipPosition: "bottom",
         "aria-expanded": asideShown,
         "aria-controls": asideShown ? asideId : void 0,
@@ -329,7 +415,7 @@ function ChatWidget({
         icon: artifactShown ? "right_panel_close" : "right_panel_open",
         variant: "tertiary",
         className: artifactShown ? "ds-chat-widget__agent-toggle--on" : void 0,
-        ariaLabel: artifactShown ? "Hide the artifact panel" : "Show the artifact panel",
+        ariaLabel: artifactShown ? hideArtifactLabel : showArtifactLabel,
         tooltipPosition: "bottom",
         "aria-expanded": artifactShown,
         "aria-controls": artifactShown ? artifactId : void 0,
@@ -340,51 +426,40 @@ function ChatWidget({
         }
       }
     ),
-    placementEnabled && /* @__PURE__ */ jsx(
-      "span",
+    placementEnabled && /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__placement-menu", children: /* @__PURE__ */ jsx(
+      DropdownMenu,
       {
-        className: "ds-chat-widget__placement-menu",
-        onKeyDown: (event) => {
-          if (event.key === "Escape" && event.currentTarget.querySelector('[aria-expanded="true"]')) {
-            event.stopPropagation();
+        align: "end",
+        trigger: /* @__PURE__ */ jsx(
+          CircularButton,
+          {
+            icon: chatPlacement(placement).icon,
+            variant: "tertiary",
+            ariaLabel: placementLabel,
+            tooltipPosition: "bottom",
+            disabled: isFull
           }
-        },
-        children: /* @__PURE__ */ jsx(
-          DropdownMenu,
+        ),
+        items: [
           {
-            align: "end",
-            trigger: /* @__PURE__ */ jsx(
-              CircularButton,
-              {
-                icon: chatPlacement(placement).icon,
-                variant: "tertiary",
-                ariaLabel: "Chat position",
-                tooltipPosition: "bottom",
-                disabled: isFull
-              }
-            ),
-            items: [
-              {
-                type: "group",
-                label: "Chat position",
-                items: CHAT_PLACEMENTS.map(({ id, label, icon }) => ({
-                  label,
-                  icon,
-                  selected: placement === id,
-                  onClick: () => setPlacement(id)
-                }))
-              }
-            ]
+            type: "group",
+            label: placementLabel,
+            items: CHAT_PLACEMENTS.map(({ id, label, icon }) => ({
+              label: placementLabels?.[id] ?? label,
+              icon,
+              selected: placement === id,
+              onClick: () => setPlacement(id)
+            }))
           }
-        )
+        ]
       }
-    ),
+    ) }),
     fullscreenEnabled && /* @__PURE__ */ jsx(
       CircularButton,
       {
         icon: isFull ? "close_fullscreen" : "open_in_full",
         variant: "tertiary",
-        ariaLabel: isFull ? "Exit full screen" : "Enter full screen",
+        ariaLabel: isFull ? exitFullscreenLabel : enterFullscreenLabel,
         tooltipPosition: "bottom",
         onClick: () => setView(isFull ? "panel" : "full")
       }
@@ -394,14 +469,14 @@ function ChatWidget({
       {
         icon: "close",
         variant: "tertiary",
-        ariaLabel: "Close chat",
+        ariaLabel: closeLabel,
         tooltipPosition: "bottom",
         onClick: () => setOpen(false)
       }
     )
   ] });
   const ChatRoot = fileAttachments ? AttachmentDropZone : "div";
-  const dropProps = fileAttachments ? { onFilesSelected: queue.add, hint: attachHint } : {};
+  const dropProps = fileAttachments ? { ...attachmentDropZoneLabels, onFilesSelected: queue.add, hint: attachHint } : {};
   const [rootScrolling, setRootScrolling] = useState(false);
   const rootSettleTimer = useRef(void 0);
   const handleRootScroll = () => {
@@ -424,6 +499,7 @@ function ChatWidget({
       onScroll: handleRootScroll,
       "data-lifted-actions": trailingInline || void 0,
       onKeyDown: (e) => {
+        if (e.key === "Escape" && e.defaultPrevented) return;
         if (e.key === "Escape" && (threadsOpen || asideShown && !asideWide || artifactShown && !asideWide)) {
           e.stopPropagation();
           if (threadsOpen) closeThreads();
@@ -454,7 +530,7 @@ function ChatWidget({
                   {
                     icon: "menu",
                     variant: "tertiary",
-                    ariaLabel: "Open the chat history",
+                    ariaLabel: openThreadsLabel,
                     tooltipPosition: "bottom",
                     onClick: () => setThreadsOpen(true)
                   }
@@ -478,7 +554,7 @@ function ChatWidget({
           ),
           tabsNode && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__tabs-row", children: tabsNode }),
           /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__body", children: [
-            /* @__PURE__ */ jsx(ArtifactSeatContext.Provider, { value: artifacts, children: /* @__PURE__ */ jsx(ChatThread, { className: "ds-chat-widget__thread", children: [
+            /* @__PURE__ */ jsx(ArtifactSeatContext.Provider, { value: artifacts, children: /* @__PURE__ */ jsx(ResponseActionsLabelsContext.Provider, { value: responseActionsLabels, children: /* @__PURE__ */ jsx(FollowupSuggestionsLabelContext.Provider, { value: followupsLabel, children: /* @__PURE__ */ jsx(ChatThread, { ...chatThreadLabels, className: "ds-chat-widget__thread", flow, children: [
               ...turns.map(
                 (turn) => turn.bare ? (
                   /* Conversation furniture (a day marker): the injected
@@ -491,18 +567,18 @@ function ChatWidget({
                     ChatMessage,
                     {
                       role: "user",
-                      attachments: turn.attachments ? /* @__PURE__ */ jsx(AttachmentGroup, { align: "end", items: turn.attachments }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      attachments: turn.attachments ? /* @__PURE__ */ jsx(AttachmentGroup, { ...attachmentGroupLabels, align: "end", items: turn.attachments }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                         turn.content,
                         turn.card && /* @__PURE__ */ jsx(TurnCard, { card: turn.card })
                       ] }),
-                      children: mentions && turn.text ? /* @__PURE__ */ jsx(MentionText, { text: turn.text, sources: mentions }) : turn.text
+                      children: turn.reply ? /* @__PURE__ */ jsx(ReplyBody, { reply: turn.reply, text: turn.text, missingLabel: questionSummaryLabels?.missingLabel }) : mentions && turn.text ? /* @__PURE__ */ jsx(MentionText, { text: turn.text, sources: mentions }) : turn.text
                     },
                     turn.id
                   )
-                ) : /* @__PURE__ */ jsx(AssistantTurn, { turn }, turn.id)
+                ) : /* @__PURE__ */ jsx(AssistantTurn, { turn, labels: turnLabels }, turn.id)
               ),
-              ...live ? [/* @__PURE__ */ jsx(AssistantTurn, { live }, live.id)] : []
-            ] }) }),
+              ...live ? [/* @__PURE__ */ jsx(AssistantTurn, { live, labels: turnLabels }, live.id)] : []
+            ] }) }) }) }),
             isEmpty && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__welcome", children: /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__greeting", children: [
               /* @__PURE__ */ jsx("p", { className: "ds-chat-widget__hello", children: greeting }),
               /* @__PURE__ */ jsx("p", { className: "ds-chat-widget__ask", children: tagline })
@@ -514,20 +590,18 @@ function ChatWidget({
         /* @__PURE__ */ jsx("footer", { className: "ds-chat-widget__footer", children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__composer", children: /* @__PURE__ */ jsx(
           Composer,
           {
+            ...composerLabels,
             ref: composerRef,
-            placeholder,
-            sendLabel: "Send",
+            placeholder: questionsOpen ? questionsPlaceholder : placeholder,
+            disabled: questionsOpen,
+            sendLabel,
             aiGlow: true,
             value: draft,
             onValueChange: setDraft,
             onSubmit: handleSubmit,
             streaming,
             onStop: stop,
-            context: contextLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              "Looking at “",
-              contextLabel,
-              "”"
-            ] }) : void 0,
+            context: contextLabel ? contextNote(contextLabel) : void 0,
             contextIcon: "description",
             contextPlacement: "above",
             mentions,
@@ -536,7 +610,7 @@ function ChatWidget({
               onFilesSelected: queue.add,
               onFileRemove: queue.remove,
               pasteThreshold: LONG_PASTE_CHARS,
-              onPasteAsAttachment: (text) => queue.addText(text)
+              onPasteAsAttachment: (text) => queue.addText(text, pastedTextLabel)
             } : {},
             actions: (
               /* A host can slot its own leading actions. The default is the
@@ -547,11 +621,12 @@ function ChatWidget({
               composerActions ?? (pickerModels.length > 0 ? /* @__PURE__ */ jsx(
                 ModelPicker,
                 {
+                  ...modelPickerLabels,
                   models: pickerModels,
                   value: pickerValue,
                   onValueChange: setChosenModel,
                   placement: "top",
-                  "aria-label": "Choose a model"
+                  "aria-label": modelPickerLabel
                 }
               ) : void 0)
             )
@@ -582,7 +657,7 @@ function ChatWidget({
       "data-artifact-resizing": artifactResizing || void 0,
       style: artifactWidth !== null ? { "--ds-chat-artifact-width": `${artifactWidth}px` } : void 0,
       onKeyDown: (event) => {
-        if (event.key === "Escape" && artifactExpanded) {
+        if (event.key === "Escape" && artifactExpanded && !event.defaultPrevented) {
           event.stopPropagation();
           setArtifactExpanded(false);
         }
@@ -625,7 +700,11 @@ function ChatWidget({
                 artifact: heldArtifact,
                 expanded: artifactExpanded,
                 onExpandedChange: setArtifactExpanded,
-                onClose: closeArtifactPanel
+                onClose: closeArtifactPanel,
+                artifactPanelLabels,
+                emptyPanelTitle: artifactPanelTitle,
+                emptyTitle: artifactEmptyTitle,
+                emptyDescription: artifactEmptyDescription
               }
             ) })
           }
@@ -640,7 +719,7 @@ function ChatWidget({
                 {
                   type: "button",
                   className: "ds-chat-widget__rail-scrim",
-                  "aria-label": "Close the artifact panel",
+                  "aria-label": closeArtifactLabel,
                   tabIndex: artifactShown ? 0 : -1,
                   onClick: closeArtifactPanel
                 }
@@ -652,7 +731,17 @@ function ChatWidget({
                   id: artifactId,
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__aside-grabber", "aria-hidden": "true" }),
-                    /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-sheet-body", children: /* @__PURE__ */ jsx(ChatArtifactPane, { artifact: heldArtifact, onClose: closeArtifactPanel }) })
+                    /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-sheet-body", children: /* @__PURE__ */ jsx(
+                      ChatArtifactPane,
+                      {
+                        artifact: heldArtifact,
+                        onClose: closeArtifactPanel,
+                        artifactPanelLabels,
+                        emptyPanelTitle: artifactPanelTitle,
+                        emptyTitle: artifactEmptyTitle,
+                        emptyDescription: artifactEmptyDescription
+                      }
+                    ) })
                   ]
                 }
               )
@@ -669,7 +758,7 @@ function ChatWidget({
                 {
                   type: "button",
                   className: "ds-chat-widget__rail-scrim",
-                  "aria-label": "Close the chat history",
+                  "aria-label": closeThreadsLabel,
                   tabIndex: threadsOpen ? 0 : -1,
                   onClick: closeThreads
                 }
@@ -688,7 +777,7 @@ function ChatWidget({
                 {
                   type: "button",
                   className: "ds-chat-widget__rail-scrim",
-                  "aria-label": "Close the agent panel",
+                  "aria-label": closeAgentLabel,
                   tabIndex: asideShown ? 0 : -1,
                   onClick: closeAside
                 }

package/chat/DemoWelcome.js

@@ -61,7 +61,7 @@ function DemoBoard({ onAsk }) {
       /* @__PURE__ */ jsx(WidgetRow, { title: "How is the trial going?", meta: "Ask", onClick: () => onAsk("How is the trial going?") })
     ] }),
     /* @__PURE__ */ jsx(Widget, { title: "Projects", count: BOARD_PROJECTS.length, children: BOARD_PROJECTS.map(([name, state, when]) => /* @__PURE__ */ jsx(WidgetRow, { leading: /* @__PURE__ */ jsx(PixelAvatar, { name }), title: name, description: state, meta: when }, name)) }),
-    /* @__PURE__ */ jsxs(Widget, { title: "To do", count: 4, children: [
+    /* @__PURE__ */ jsxs(Widget, { title: "To do", count: 5, children: [
       /* @__PURE__ */ jsxs(WidgetGroup, { label: "Waiting on you", children: [
         /* @__PURE__ */ jsx(
           WidgetRow,
@@ -70,7 +70,7 @@ function DemoBoard({ onAsk }) {
             title: "Invite the other three",
             description: "2 of 5 seats filled",
             meta: "Today",
-            onClick: () => onAsk("Go ahead and invite the other three")
+            onClick: () => onAsk("Invite my team to a workspace")
           }
         ),
         /* @__PURE__ */ jsx(
@@ -80,7 +80,17 @@ function DemoBoard({ onAsk }) {
             title: "Choose a plan",
             description: "Trial ends in 9 days",
             meta: "Oct 19",
-            onClick: () => onAsk("Which plan fits a team of five?")
+            onClick: () => onAsk("Help me pick a plan")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          WidgetRow,
+          {
+            leading: /* @__PURE__ */ jsx(StatusDot, { variant: "info", size: "sm", "aria-hidden": "true" }),
+            title: "Plan the launch kickoff",
+            description: "A date, who comes, and how",
+            meta: "Oct 21",
+            onClick: () => onAsk("Plan our launch kickoff")
           }
         )
       ] }),
@@ -91,7 +101,8 @@ function DemoBoard({ onAsk }) {
             leading: /* @__PURE__ */ jsx(StatusDot, { variant: "positive", size: "sm", "aria-hidden": "true" }),
             title: "Shared calendar",
             description: "Synced an hour ago",
-            meta: "On"
+            meta: "On",
+            onClick: () => onAsk("Find a time we can all meet")
           }
         ),
         /* @__PURE__ */ jsx(
@@ -100,7 +111,8 @@ function DemoBoard({ onAsk }) {
             leading: /* @__PURE__ */ jsx(StatusDot, { variant: "neutral", size: "sm", "aria-hidden": "true" }),
             title: "Mention notifications",
             description: "Quiet hours, 6pm to 8am",
-            meta: "Paused"
+            meta: "Paused",
+            onClick: () => onAsk("Set up notifications for me")
           }
         )
       ] })

package/chat/FollowupSuggestions.d.ts

@@ -1,18 +1,20 @@
+export declare const FollowupSuggestionsLabelContext: import('react').Context<string>;
 /**
  * The follow-up questions under a finished answer. Deliberately the same
  * component, layout and scale as the welcome screen's conversation starters:
  * one pattern for "here is something you could ask", whether the conversation
  * has started or not. The only difference is where the questions come from.
  *
- * Tapping one sends it as the next message. A tap while a response is already
- * streaming is ignored by `send`, the same as pressing enter in the composer
- * would be.
+ * Tapping one sends it as the next message and keeps the row as the record
+ * of that choice: the chip checked, the rest dimmed and inert. A tap while a
+ * response is already streaming is ignored by `send`, the same as pressing
+ * enter in the composer would be, and leaves the row as it was.
  *
  * While the questions are still being generated, `pending` shows the row's
  * shimmer placeholders in their place: a real loading state, unlike the
  * welcome starters' staged one.
  */
-export declare function FollowupSuggestions({ turnId, suggestions, pending, entrance, }: {
+export declare function FollowupSuggestions({ turnId, suggestions, pending, entrance, chosen, chosenLabel, }: {
     /** The turn these belong to; makes each suggestion's id unique in the thread. */
     turnId: string;
     suggestions: string[];
@@ -20,4 +22,8 @@ export declare function FollowupSuggestions({ turnId, suggestions, pending, entr
     pending?: boolean;
     /** Play the chips' staggered pop-in. Off for rows remounted by a reopen, whose suggestions already arrived once. */
     entrance?: boolean;
+    /** The label already sent from this row, which keeps the row as a record. */
+    chosen?: string;
+    /** Visually hidden text read after the sent suggestion. Defaults to PromptSuggestions' "(chosen)". */
+    chosenLabel?: string;
 }): import("react").JSX.Element;

package/chat/FollowupSuggestions.js

@@ -1,14 +1,19 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 import { PromptSuggestions } from "../components/PromptSuggestions/PromptSuggestions.js";
 import { useChatWidget } from "./context.js";
+const FollowupSuggestionsLabelContext = createContext("Follow-up questions");
 function FollowupSuggestions({
   turnId,
   suggestions,
   pending = false,
-  entrance = true
+  entrance = true,
+  chosen,
+  chosenLabel
 }) {
-  const { send } = useChatWidget();
+  const { chooseFollowup } = useChatWidget();
+  const rowLabel = useContext(FollowupSuggestionsLabelContext);
   const items = suggestions.map((label, index) => ({
     id: `${turnId}-followup-${index}`,
     label
@@ -18,17 +23,20 @@ function FollowupSuggestions({
     {
       className: "ds-chat-widget__followups",
       layout: "stack",
-      ariaLabel: "Follow-up questions",
+      ariaLabel: rowLabel,
+      chosenLabel,
       pending,
       entrance,
       suggestions: items,
+      value: chosen !== void 0 ? items.find((item) => item.label === chosen)?.id : void 0,
       onValueChange: (id) => {
         const item = items.find((candidate) => candidate.id === id);
-        if (item) send(item.label);
+        if (item) chooseFollowup(turnId, item.label);
       }
     }
   );
 }
 export {
-  FollowupSuggestions
+  FollowupSuggestions,
+  FollowupSuggestionsLabelContext
 };

package/chat/ResponseActions.d.ts

@@ -1,4 +1,18 @@
 import { ChatTurn } from './types';
+/** The row's accessible names and its copy announcement, set from ChatWidget's label props. */
+export interface ResponseActionsLabels {
+    /** The copy button's name. */
+    copy: string;
+    /** The copy button's name once the copy has landed. */
+    copied: string;
+    /** What the polite live region says once the copy has landed. */
+    copiedAnnouncement: string;
+    /** The thumbs-up button's name. */
+    good: string;
+    /** The thumbs-down button's name. */
+    bad: string;
+}
+export declare const ResponseActionsLabelsContext: import('react').Context<ResponseActionsLabels>;
 /**
  * The row under a committed assistant turn: copy, and, when the server
  * logged the exchange and the provider has somewhere to send a verdict,