rift-ds 1.8.0 → 1.9.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 { useSyncExternalStore, useRef, useEffect, 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,13 +16,15 @@ 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 "./ChatWidget.css";
@@ -57,6 +59,7 @@ function ChatWidget({
   tabs,
   aside,
   agent,
+  artifacts = false,
   contextLabel,
   widgets,
   widgetsLayout = "fit",
@@ -83,7 +86,10 @@ function ChatWidget({
     setDraft,
     starterSeed,
     starterRevealKey,
-    setStarterRevealKey
+    setStarterRevealKey,
+    artifact,
+    openArtifact,
+    closeArtifact
   } = useChatWidget();
   const lockedValues = modelPolicy?.locked ?? [];
   const pick = chosenModel && !lockedValues.includes(chosenModel) ? chosenModel : null;
@@ -132,17 +138,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 +163,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 +291,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 +323,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 +422,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 +449,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 +465,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", children: [
               ...turns.map(
                 (turn) => turn.bare ? (
                   /* Conversation furniture (a day marker): the injected
@@ -364,7 +502,7 @@ function ChatWidget({
                 ) : /* @__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 })
@@ -434,61 +572,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/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 {

package/chat/artifacts.d.ts

@@ -0,0 +1,5 @@
+import { ChatArtifact, ChatCard } from './types';
+/** The artifact a card carries, or null when it is some other kind of card. */
+export declare const cardArtifact: (card: ChatCard | undefined) => ChatArtifact | null;
+/** Wraps an artifact as the card a transport sends. */
+export declare const artifactCard: (artifact: ChatArtifact) => ChatCard;

package/chat/artifacts.js

@@ -0,0 +1,14 @@
+import { ARTIFACT_CARD_KIND } from "./types.js";
+const isArtifact = (data) => {
+  const candidate = data;
+  return typeof candidate === "object" && candidate !== null && typeof candidate.id === "string" && typeof candidate.title === "string" && typeof candidate.kind === "string";
+};
+const cardArtifact = (card) => card?.kind === ARTIFACT_CARD_KIND && isArtifact(card.data) ? card.data : null;
+const artifactCard = (artifact) => ({
+  kind: ARTIFACT_CARD_KIND,
+  data: artifact
+});
+export {
+  artifactCard,
+  cardArtifact
+};

package/chat/context.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ChatPlacement, ChatSide } from './placement';
 import { ThreadsState } from './threads';
-import { ChatFeedbackVerdict } from './types';
+import { ChatArtifact, ChatFeedbackVerdict } from './types';
 import { ChatState } from './useChat';
 /** Panel is the docked rail; full is the viewport takeover. */
 export type ChatView = 'panel' | 'full';
@@ -10,6 +10,17 @@ export type ChatView = 'panel' | 'full';
  * a kind with no renderer draws nothing.
  */
 export type ChatCardRenderers = Record<string, (data: unknown) => ReactNode>;
+/**
+ * Draws an artifact's preview as a React node, keyed by the artifact's
+ * `kind`. A kind with no renderer falls back to the built-in frames.
+ */
+export type ChatArtifactRenderers = Record<string, (artifact: ChatArtifact) => ReactNode>;
+/**
+ * Whether the widget rendering this subtree seats the artifact panel (its
+ * `artifacts` prop). With no seat an artifact has nowhere to open, so the
+ * thread draws no tile for it: the feature is whole or it is absent.
+ */
+export declare const ArtifactSeatContext: import('react').Context<boolean>;
 /** How the widget renders a link the model wrote. */
 export type ChatLinkRenderer = (props: {
     href: string;
@@ -52,6 +63,12 @@ export interface ChatWidgetContextValue extends ChatState {
     /** The thread lifecycle behind the built-in threads and tabs. */
     threads: ThreadsState;
     renderers: ChatCardRenderers;
+    /** The artifact on stage in the artifact panel, or null while it is closed. */
+    artifact: ChatArtifact | null;
+    /** Puts an artifact on stage. The widget seats the panel; this only says which. */
+    openArtifact: (artifact: ChatArtifact) => void;
+    closeArtifact: () => void;
+    artifactRenderers: ChatArtifactRenderers;
     renderLink: ChatLinkRenderer;
     isInternalHref: (href: string) => boolean;
     /** Record and send a thumbs verdict; null when feedback is off. */

package/chat/context.js

@@ -1,5 +1,6 @@
 "use client";
 import { useContext, createContext } from "react";
+const ArtifactSeatContext = createContext(false);
 const ChatWidgetContext = createContext(null);
 function useChatWidget() {
   const context = useContext(ChatWidgetContext);
@@ -20,6 +21,7 @@ function createFeedbackPoster(endpoint = "/api/chat/feedback") {
   };
 }
 export {
+  ArtifactSeatContext,
   ChatWidgetContext,
   createFeedbackPoster,
   isInternalPath,

package/chat/demo-artifacts.d.ts

@@ -0,0 +1,6 @@
+import { ChatArtifactRenderers } from './context';
+import { ChatArtifact } from './types';
+/** Draws the demo's live artifact kinds. Pass to `ChatProvider`'s `artifactRenderers`. */
+export declare const DEMO_ARTIFACT_RENDERERS: ChatArtifactRenderers;
+export declare const DEMO_DASHBOARD_ARTIFACT: ChatArtifact;
+export declare const DEMO_PAGE_ARTIFACT: ChatArtifact;