rift-ds 1.8.0 → 1.10.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 } from "react";
+import { useRef, useEffect, useSyncExternalStore, useState, useId, useMemo } from "react";
 import { AttachmentDropZone } from "../components/Attachment/AttachmentDropZone.js";
 import { AttachmentGroup } from "../components/Attachment/AttachmentGroup.js";
 import { useAttachments } from "../components/Attachment/useAttachments.js";
@@ -16,15 +16,19 @@ import { ModelPicker } from "../components/ModelPicker/ModelPicker.js";
 import { PromptSuggestions } from "../components/PromptSuggestions/PromptSuggestions.js";
 import { MOTION_SUGGESTIONS_THINK_MS, MOTION_SCROLL_SETTLE_MS } from "../tokens/motion.js";
 import { AssistantTurn } from "./AssistantTurn.js";
+import { cardArtifact } from "./artifacts.js";
 import { ChatAgentPane } from "./ChatAgentPane.js";
+import { ChatArtifactPane } from "./ChatArtifactPane.js";
 import { ChatTabs } from "./ChatTabs.js";
 import { ChatThreads } from "./ChatThreads.js";
-import { useChatWidget } from "./context.js";
+import { useChatWidget, ArtifactSeatContext } from "./context.js";
 import { subscribeClock, readGreeting, serverGreeting } from "./greeting.js";
 import { CHAT_PLACEMENTS, chatPlacement } from "./placement.js";
-import { THREADS_RAIL_MIN_WIDTH, ASIDE_RAIL_MIN_WIDTH } from "./queries.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 "./ChatWidget.css";
 const DEFAULT_MAX_ATTACHMENTS = 10;
 const DEFAULT_MAX_ATTACHMENT_BYTES = 50 * 1024 * 1024;
@@ -38,7 +42,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?",
@@ -57,6 +63,7 @@ function ChatWidget({
   tabs,
   aside,
   agent,
+  artifacts = false,
   contextLabel,
   widgets,
   widgetsLayout = "fit",
@@ -83,8 +90,19 @@ function ChatWidget({
     setDraft,
     starterSeed,
     starterRevealKey,
-    setStarterRevealKey
+    setStarterRevealKey,
+    artifact,
+    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;
@@ -132,17 +150,21 @@ function ChatWidget({
     {
       profile: withAgentMark(agent.profile ?? { name: title, status: "Connected" }, title),
       tabs: agent.tabs,
-      overlay: ctx.overlay
+      overlay: ctx.overlay,
+      onClose: ctx.close
     }
   ) : void 0);
   const tabsNode = tabs === true ? /* @__PURE__ */ jsx(ChatTabs, {}) : tabs || null;
-  const hasRails = Boolean(renderThreads || renderAside);
+  const hasRails = Boolean(renderThreads || renderAside || artifacts);
   const [threadsOpen, setThreadsOpen] = useState(false);
   const [asideOpen, setAsideOpen] = useState(Boolean(agent?.defaultOpen));
   const railsHostRef = useRef(null);
   const [threadsWide, setThreadsWide] = useState(false);
   const [asideWide, setAsideWide] = useState(false);
-  const wasAsideWideRef = useRef(false);
+  const [asideRoomy, setAsideRoomy] = useState(false);
+  const [artifactEmptyOpen, setArtifactEmptyOpen] = useState(false);
+  const [artifactExpandedWanted, setArtifactExpanded] = useState(false);
+  const wasAsideWideRef = useRef(true);
   useEffect(() => {
     if (!hasRails) return;
     const host = railsHostRef.current;
@@ -153,20 +175,119 @@ function ChatWidget({
       const asideRoom = width >= ASIDE_RAIL_MIN_WIDTH;
       setThreadsWide(wide);
       setAsideWide(asideRoom);
+      setAsideRoomy(width >= ASIDE_WITH_THREADS_MIN_WIDTH);
       if (wide) setThreadsOpen(false);
-      if (wasAsideWideRef.current && !asideRoom) setAsideOpen(false);
+      if (wasAsideWideRef.current && !asideRoom) {
+        setAsideOpen(false);
+        setArtifactEmptyOpen(false);
+        setArtifactExpanded(false);
+        closeArtifact();
+      }
       wasAsideWideRef.current = asideRoom;
     };
     measure();
     const observer = new ResizeObserver(measure);
     observer.observe(host);
     return () => observer.disconnect();
-  }, [hasRails]);
+  }, [hasRails, closeArtifact]);
   const closeThreads = () => setThreadsOpen(false);
+  const artifactId = useId();
+  const artifactShown = artifacts && (artifact !== null || artifactEmptyOpen);
+  const [heldArtifact, setHeldArtifact] = useState(artifact);
+  if (artifactShown && artifact !== heldArtifact) setHeldArtifact(artifact);
+  const artifactInline = artifactShown && asideWide;
+  const artifactExpanded = artifactInline && artifactExpandedWanted;
+  const closeArtifactPanel = () => {
+    setArtifactExpanded(false);
+    setArtifactEmptyOpen(false);
+    closeArtifact();
+  };
+  const [artifactWidth, setArtifactWidth] = useState(null);
+  const [artifactResizing, setArtifactResizing] = useState(false);
+  const artifactRailRef = useRef(null);
+  const artifactDragRef = useRef(null);
+  const beginArtifactResize = (e) => {
+    if (e.pointerType === "mouse" && e.button !== 0 || artifactDragRef.current) return;
+    const rail = artifactRailRef.current;
+    const column = railsHostRef.current?.querySelector(":scope > .ds-chat-widget");
+    if (!rail || !column) return;
+    const width = rail.getBoundingClientRect().width;
+    const spare = column.getBoundingClientRect().width - ARTIFACT_MIN_COLUMN_WIDTH;
+    artifactDragRef.current = { startX: e.clientX, width, max: width + Math.max(0, spare), next: width };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setArtifactResizing(true);
+  };
+  const moveArtifactResize = (e) => {
+    const drag = artifactDragRef.current;
+    if (!drag) return;
+    const grown = drag.width - (e.clientX - drag.startX);
+    drag.next = Math.round(Math.min(drag.max, Math.max(ARTIFACT_MIN_COLUMN_WIDTH, grown)));
+    railsHostRef.current?.style.setProperty("--ds-chat-artifact-width", `${drag.next}px`);
+  };
+  const endArtifactResize = () => {
+    const drag = artifactDragRef.current;
+    if (!drag) return;
+    artifactDragRef.current = null;
+    setArtifactWidth(drag.next);
+    setArtifactResizing(false);
+  };
+  const latestArtifact = useMemo(() => {
+    for (let index = turns.length - 1; index >= 0; index -= 1) {
+      const found = cardArtifact(turns[index].card);
+      if (found) return found;
+    }
+    return null;
+  }, [turns]);
+  const seenArtifactTurns = useRef(null);
+  const asideWideRef = useRef(asideWide);
+  useEffect(() => {
+    asideWideRef.current = asideWide;
+  }, [asideWide]);
+  useEffect(() => {
+    if (!artifacts) return;
+    const carrying = turns.filter((turn) => cardArtifact(turn.card));
+    if (seenArtifactTurns.current === null) {
+      seenArtifactTurns.current = new Set(carrying.map((turn) => turn.id));
+      return;
+    }
+    for (const turn of carrying) {
+      if (seenArtifactTurns.current.has(turn.id)) continue;
+      seenArtifactTurns.current.add(turn.id);
+      const arrived = cardArtifact(turn.card);
+      if (arrived && asideWideRef.current) openArtifact(arrived);
+    }
+  }, [artifacts, turns, openArtifact]);
+  const trailingUp = artifactInline || Boolean(renderAside) && asideOpen && asideWide;
+  const threadsInline = threadsWide && !(trailingUp && (!asideRoomy || artifactExpanded));
+  const asideRailRef = useRef(null);
+  const asideMounted = Boolean(renderAside) && asideWide;
+  useEffect(() => {
+    if (!asideMounted) return;
+    const rail = asideRailRef.current;
+    const card = rail?.firstElementChild;
+    const pane = card?.firstElementChild;
+    if (!rail || !card || !pane) return;
+    const measure = () => {
+      const width = pane.offsetWidth + (card.offsetWidth - card.clientWidth);
+      if (pane.offsetWidth > 0) rail.style.setProperty("--ds-chat-aside-width", `${width}px`);
+      else rail.style.removeProperty("--ds-chat-aside-width");
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(pane);
+    return () => observer.disconnect();
+  }, [asideMounted]);
   const asideId = useId();
-  const asideShown = Boolean(renderAside) && asideOpen;
+  const asideShown = Boolean(renderAside) && asideOpen && !artifactShown;
   const closeAside = () => setAsideOpen(false);
-  const toggleAside = () => setAsideOpen((current) => !current);
+  const toggleAside = () => {
+    if (artifactShown) {
+      closeArtifactPanel();
+      setAsideOpen(true);
+      return;
+    }
+    setAsideOpen((current) => !current);
+  };
   const startersNode = isEmpty && showStarters && starters.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__starters", children: /* @__PURE__ */ jsx(
     PromptSuggestions,
     {
@@ -182,8 +303,12 @@ function ChatWidget({
     }
   ) });
   const widgetsNode = isEmpty && widgets && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__widgets", children: widgets });
+  const trailingInline = asideShown && asideWide || artifactInline;
+  const actionsFloat = (Boolean(renderAside) || artifacts) && asideWide;
+  const showNewChat = !(renderThreads && threadsWide);
+  const actionCount = Number(showNewChat) + Number(Boolean(renderAside)) + Number(artifacts) + Number(placementEnabled) + Number(fullscreenEnabled) + Number(closeEnabled);
   const headerActions = /* @__PURE__ */ jsxs(Fragment, { children: [
-    !(renderThreads && threadsWide) && /* @__PURE__ */ jsx(
+    showNewChat && /* @__PURE__ */ jsx(
       CircularButton,
       {
         icon: "edit_square",
@@ -210,6 +335,23 @@ function ChatWidget({
         onClick: toggleAside
       }
     ),
+    artifacts && /* @__PURE__ */ jsx(
+      CircularButton,
+      {
+        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",
+        tooltipPosition: "bottom",
+        "aria-expanded": artifactShown,
+        "aria-controls": artifactShown ? artifactId : void 0,
+        onClick: () => {
+          if (artifactShown) closeArtifactPanel();
+          else if (latestArtifact) openArtifact(latestArtifact);
+          else setArtifactEmptyOpen(true);
+        }
+      }
+    ),
     placementEnabled && /* @__PURE__ */ jsx(
       "span",
       {
@@ -292,11 +434,12 @@ function ChatWidget({
       "data-widgets-wide": widgetsNode && widgetsWidth === "wide" ? "" : void 0,
       "data-scrolling": widgetsNode && widgetsLayout === "scroll" && rootScrolling || void 0,
       onScroll: handleRootScroll,
-      "data-lifted-actions": asideShown && asideWide || void 0,
+      "data-lifted-actions": trailingInline || void 0,
       onKeyDown: (e) => {
-        if (e.key === "Escape" && (threadsOpen || asideShown && !asideWide)) {
+        if (e.key === "Escape" && (threadsOpen || asideShown && !asideWide || artifactShown && !asideWide)) {
           e.stopPropagation();
           if (threadsOpen) closeThreads();
+          else if (artifactShown) closeArtifactPanel();
           else closeAside();
           return;
         }
@@ -318,7 +461,7 @@ function ChatWidget({
             ChatHeader,
             {
               title: /* @__PURE__ */ jsxs("span", { className: "ds-chat-widget__brand", children: [
-                renderThreads && !threadsWide && /* @__PURE__ */ jsx(
+                renderThreads && !threadsInline && /* @__PURE__ */ jsx(
                   CircularButton,
                   {
                     icon: "menu",
@@ -334,13 +477,20 @@ function ChatWidget({
               actions: (
                 /* With the agent rail seated inline the cluster moves to the
                    widget's own right edge (see headerActions). */
-                asideShown && asideWide ? void 0 : headerActions
+                !actionsFloat ? headerActions : trailingInline ? void 0 : /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ds-chat-widget__actions-spacer",
+                    style: { "--ds-chat-action-count": actionCount },
+                    "aria-hidden": "true"
+                  }
+                )
               )
             }
           ),
           tabsNode && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__tabs-row", children: tabsNode }),
           /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__body", children: [
-            /* @__PURE__ */ jsx(ChatThread, { className: "ds-chat-widget__thread", children: [
+            /* @__PURE__ */ jsx(ArtifactSeatContext.Provider, { value: artifacts, children: /* @__PURE__ */ jsx(ChatThread, { className: "ds-chat-widget__thread", flow, children: [
               ...turns.map(
                 (turn) => turn.bare ? (
                   /* Conversation furniture (a day marker): the injected
@@ -357,14 +507,14 @@ function ChatWidget({
                         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 }) : mentions && turn.text ? /* @__PURE__ */ jsx(MentionText, { text: turn.text, sources: mentions }) : turn.text
                     },
                     turn.id
                   )
                 ) : /* @__PURE__ */ jsx(AssistantTurn, { turn }, turn.id)
               ),
               ...live ? [/* @__PURE__ */ jsx(AssistantTurn, { live }, 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 })
@@ -377,7 +527,8 @@ function ChatWidget({
           Composer,
           {
             ref: composerRef,
-            placeholder,
+            placeholder: questionsOpen ? questionsPlaceholder : placeholder,
+            disabled: questionsOpen,
             sendLabel: "Send",
             aiGlow: true,
             value: draft,
@@ -434,61 +585,137 @@ function ChatWidget({
     }
   );
   if (!hasRails) return chatColumn;
-  return /* @__PURE__ */ jsxs("div", { ref: railsHostRef, className: "ds-chat-widget__rails", children: [
-    renderThreads && threadsWide && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__threads-rail", children: renderThreads({ overlay: false, close: closeThreads }) }),
-    chatColumn,
-    asideShown && asideWide && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__rail-actions", children: headerActions }),
-    renderAside && asideWide && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `ds-chat-widget__aside-rail ${asideOpen ? "ds-chat-widget__aside-rail--open" : ""}`,
-        id: asideId,
-        inert: !asideOpen || void 0,
-        children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-rail-inner", children: renderAside({ overlay: false, close: closeAside }) })
-      }
-    ),
-    renderThreads && !threadsWide && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `ds-chat-widget__threads-overlay ${threadsOpen ? "ds-chat-widget__threads-overlay--open" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "ds-chat-widget__rail-scrim",
-              "aria-label": "Close the chat history",
-              tabIndex: threadsOpen ? 0 : -1,
-              onClick: closeThreads
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__threads-sheet", children: renderThreads({ overlay: true, close: closeThreads }) })
-        ]
-      }
-    ),
-    renderAside && !asideWide && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `ds-chat-widget__aside-overlay ${asideOpen ? "ds-chat-widget__aside-overlay--open" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: "ds-chat-widget__rail-scrim",
-              "aria-label": "Close the agent panel",
-              tabIndex: asideOpen ? 0 : -1,
-              onClick: closeAside
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__aside-sheet", id: asideId, children: [
-            /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__aside-grabber", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-sheet-body", children: renderAside({ overlay: true, close: closeAside }) })
-          ] })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: railsHostRef,
+      className: "ds-chat-widget__rails",
+      "data-artifact-expanded": artifactExpanded || void 0,
+      "data-artifact-sized": artifactWidth !== null || artifactResizing || void 0,
+      "data-artifact-resizing": artifactResizing || void 0,
+      style: artifactWidth !== null ? { "--ds-chat-artifact-width": `${artifactWidth}px` } : void 0,
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && artifactExpanded) {
+          event.stopPropagation();
+          setArtifactExpanded(false);
+        }
+      },
+      children: [
+        renderThreads && threadsInline && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__threads-rail", children: renderThreads({ overlay: false, close: closeThreads }) }),
+        chatColumn,
+        actionsFloat && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__rail-actions", children: headerActions }),
+        renderAside && asideWide && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: asideRailRef,
+            className: `ds-chat-widget__aside-rail ${asideShown ? "ds-chat-widget__aside-rail--open" : ""}`,
+            id: asideId,
+            inert: !asideShown || void 0,
+            children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-rail-inner", children: renderAside({ overlay: false, close: closeAside }) })
+          }
+        ),
+        artifactInline && !artifactExpanded && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `ds-chat-widget__artifact-grip ${artifactResizing ? "ds-chat-widget__artifact-grip--resizing" : ""}`,
+            "aria-hidden": "true",
+            onPointerDown: beginArtifactResize,
+            onPointerMove: moveArtifactResize,
+            onPointerUp: endArtifactResize,
+            onPointerCancel: endArtifactResize
+          }
+        ),
+        artifacts && asideWide && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: artifactRailRef,
+            className: `ds-chat-widget__artifact-rail ${artifactShown ? "ds-chat-widget__artifact-rail--open" : ""}`,
+            id: artifactId,
+            inert: !artifactShown || void 0,
+            children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__artifact-rail-inner", children: /* @__PURE__ */ jsx(
+              ChatArtifactPane,
+              {
+                artifact: heldArtifact,
+                expanded: artifactExpanded,
+                onExpandedChange: setArtifactExpanded,
+                onClose: closeArtifactPanel
+              }
+            ) })
+          }
+        ),
+        artifacts && !asideWide && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `ds-chat-widget__aside-overlay ${artifactShown ? "ds-chat-widget__aside-overlay--open" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ds-chat-widget__rail-scrim",
+                  "aria-label": "Close the artifact panel",
+                  tabIndex: artifactShown ? 0 : -1,
+                  onClick: closeArtifactPanel
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "ds-chat-widget__aside-sheet ds-chat-widget__aside-sheet--artifact",
+                  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 }) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        renderThreads && !threadsInline && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `ds-chat-widget__threads-overlay ${threadsOpen ? "ds-chat-widget__threads-overlay--open" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ds-chat-widget__rail-scrim",
+                  "aria-label": "Close the chat history",
+                  tabIndex: threadsOpen ? 0 : -1,
+                  onClick: closeThreads
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__threads-sheet", children: renderThreads({ overlay: true, close: closeThreads }) })
+            ]
+          }
+        ),
+        renderAside && !asideWide && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `ds-chat-widget__aside-overlay ${asideShown ? "ds-chat-widget__aside-overlay--open" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ds-chat-widget__rail-scrim",
+                  "aria-label": "Close the agent panel",
+                  tabIndex: asideShown ? 0 : -1,
+                  onClick: closeAside
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__aside-sheet", id: asideId, children: [
+                /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__aside-grabber", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-sheet-body", children: renderAside({ overlay: true, close: closeAside }) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   ChatWidget

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

@@ -4,15 +4,16 @@
  * 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, }: {
     /** The turn these belong to; makes each suggestion's id unique in the thread. */
     turnId: string;
     suggestions: string[];
@@ -20,4 +21,6 @@ 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;
 }): import("react").JSX.Element;

package/chat/FollowupSuggestions.js

@@ -6,9 +6,10 @@ function FollowupSuggestions({
   turnId,
   suggestions,
   pending = false,
-  entrance = true
+  entrance = true,
+  chosen
 }) {
-  const { send } = useChatWidget();
+  const { chooseFollowup } = useChatWidget();
   const items = suggestions.map((label, index) => ({
     id: `${turnId}-followup-${index}`,
     label
@@ -22,9 +23,10 @@ function FollowupSuggestions({
       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);
       }
     }
   );

package/chat/TurnContent.d.ts

@@ -2,7 +2,9 @@ import { ChatCard } from './types';
 /**
  * A turn's `card`, drawn through the provider's renderers. A kind with no
  * renderer draws nothing: a card is an enrichment of an answer that already
- * stands in text, so an unknown kind degrades to the words alone.
+ * stands in text, so an unknown kind degrades to the words alone. The one
+ * built-in kind is the artifact, drawn as its tile unless the host has
+ * taken the kind over with a renderer of its own.
  */
 export declare function TurnCard({ card }: {
     card: ChatCard;

package/chat/TurnContent.js

@@ -1,10 +1,17 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
-import { useChatWidget } from "./context.js";
+import { useContext } from "react";
+import { cardArtifact } from "./artifacts.js";
+import { ChatArtifactCard } from "./ChatArtifactCard.js";
+import { useChatWidget, ArtifactSeatContext } from "./context.js";
 function TurnCard({ card }) {
   const { renderers } = useChatWidget();
+  const artifactSeat = useContext(ArtifactSeatContext);
   const render = renderers[card.kind];
-  if (!render) return null;
+  if (!render) {
+    const artifact = artifactSeat ? cardArtifact(card) : null;
+    return artifact ? /* @__PURE__ */ jsx(ChatArtifactCard, { artifact }) : null;
+  }
   return /* @__PURE__ */ jsx(Fragment, { children: render(card.data) });
 }
 export {