rift-ds 1.6.0 → 1.8.0

package/chat/DemoWelcome.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { BarChart } from "../components/Chart/BarChart.js";
+import { PixelAvatar } from "../components/PixelAvatar/PixelAvatar.js";
+import { PromptSuggestions } from "../components/PromptSuggestions/PromptSuggestions.js";
+import { Spinner } from "../components/Spinner/Spinner.js";
+import { StatusDot } from "../components/StatusDot/StatusDot.js";
+import { WidgetGrid, Widget, WidgetRow, WidgetGroup } from "../components/Widget/Widget.js";
+const LINKS = [
+  { id: "How do I get started?", icon: "rocket_launch", label: "Get started", description: "Set up a workspace" },
+  { id: "What do the plans include?", icon: "sell", label: "Plans", description: "What each one includes" },
+  { id: "Invite my team to a workspace", icon: "group_add", label: "Team", description: "Invite the others" },
+  { id: "How is the trial going?", icon: "monitoring", label: "Trial", description: "Signups so far" }
+];
+const CARDS = [
+  {
+    id: "Set it all up for me",
+    icon: "auto_awesome",
+    label: "Set up the workspace",
+    description: "Roles, channels and the first project, done for you."
+  },
+  {
+    id: "Which plan fits a team of five?",
+    icon: "sell",
+    label: "Pick a plan",
+    description: "Which plan fits a team of five?"
+  },
+  {
+    id: "Find a time we can all meet",
+    icon: "event",
+    label: "Find a time",
+    description: "A slot the whole team has free this week."
+  }
+];
+const BOARD_SIGNUPS = [
+  { label: "W1", value: 320 },
+  { label: "W2", value: 410 },
+  { label: "W3", value: 380 },
+  { label: "W4", value: 520 },
+  { label: "W5", value: 560 },
+  { label: "W6", value: 640 }
+];
+const BOARD_PROJECTS = [
+  ["Workspace revamp", "4 open tasks", "1m"],
+  ["Billing cleanup", "Waiting on finance", "3d"],
+  ["Launch week", "Plan attached", "5d"]
+];
+function DemoBoard({ onAsk }) {
+  return /* @__PURE__ */ jsxs(WidgetGrid, { children: [
+    /* @__PURE__ */ jsx(Widget, { title: "Working now", count: 1, children: /* @__PURE__ */ jsx(
+      WidgetRow,
+      {
+        leading: /* @__PURE__ */ jsx(Spinner, { size: "sm" }),
+        title: "Importing last year’s invoices",
+        description: "212 of 340 matched",
+        meta: "2m 13s"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Widget, { title: "Trial signups", children: [
+      /* @__PURE__ */ jsx(BarChart, { data: BOARD_SIGNUPS, dataLabel: "Signups", height: 140, bare: true }),
+      /* @__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(WidgetGroup, { label: "Waiting on you", children: [
+        /* @__PURE__ */ jsx(
+          WidgetRow,
+          {
+            leading: /* @__PURE__ */ jsx(StatusDot, { variant: "warning", size: "sm", "aria-hidden": "true" }),
+            title: "Invite the other three",
+            description: "2 of 5 seats filled",
+            meta: "Today",
+            onClick: () => onAsk("Go ahead and invite the other three")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          WidgetRow,
+          {
+            leading: /* @__PURE__ */ jsx(StatusDot, { variant: "info", size: "sm", "aria-hidden": "true" }),
+            title: "Choose a plan",
+            description: "Trial ends in 9 days",
+            meta: "Oct 19",
+            onClick: () => onAsk("Which plan fits a team of five?")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(WidgetGroup, { label: "In progress", children: [
+        /* @__PURE__ */ jsx(
+          WidgetRow,
+          {
+            leading: /* @__PURE__ */ jsx(StatusDot, { variant: "positive", size: "sm", "aria-hidden": "true" }),
+            title: "Shared calendar",
+            description: "Synced an hour ago",
+            meta: "On"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          WidgetRow,
+          {
+            leading: /* @__PURE__ */ jsx(StatusDot, { variant: "neutral", size: "sm", "aria-hidden": "true" }),
+            title: "Mention notifications",
+            description: "Quiet hours, 6pm to 8am",
+            meta: "Paused"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Widget, { title: "This week", children: [
+      /* @__PURE__ */ jsx(WidgetRow, { title: "Signups", meta: "640" }),
+      /* @__PURE__ */ jsx(WidgetRow, { title: "Seats in use", meta: "5 of 12" }),
+      /* @__PURE__ */ jsx(WidgetRow, { title: "Messages sent", meta: "1,284" })
+    ] })
+  ] });
+}
+function DemoWelcome({
+  variant,
+  onAsk
+}) {
+  if (variant === "links") {
+    return /* @__PURE__ */ jsx(PromptSuggestions, { layout: "tiles", ariaLabel: "Places to start", suggestions: LINKS, onValueChange: onAsk });
+  }
+  if (variant === "cards") {
+    return /* @__PURE__ */ jsx(PromptSuggestions, { layout: "cards", ariaLabel: "Things to ask", suggestions: CARDS, onValueChange: onAsk });
+  }
+  if (variant === "dashboard") return /* @__PURE__ */ jsx(DemoBoard, { onAsk });
+  return null;
+}
+export {
+  DemoBoard,
+  DemoWelcome
+};

package/chat/FollowupSuggestions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ *
+ * 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, }: {
+    /** The turn these belong to; makes each suggestion's id unique in the thread. */
+    turnId: string;
+    suggestions: string[];
+    /** The follow-ups request is still in flight; show placeholders. */
+    pending?: boolean;
+    /** Play the chips' staggered pop-in. Off for rows remounted by a reopen, whose suggestions already arrived once. */
+    entrance?: boolean;
+}): import("react").JSX.Element;

package/chat/FollowupSuggestions.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { PromptSuggestions } from "../components/PromptSuggestions/PromptSuggestions.js";
+import { useChatWidget } from "./context.js";
+function FollowupSuggestions({
+  turnId,
+  suggestions,
+  pending = false,
+  entrance = true
+}) {
+  const { send } = useChatWidget();
+  const items = suggestions.map((label, index) => ({
+    id: `${turnId}-followup-${index}`,
+    label
+  }));
+  return /* @__PURE__ */ jsx(
+    PromptSuggestions,
+    {
+      className: "ds-chat-widget__followups",
+      layout: "stack",
+      ariaLabel: "Follow-up questions",
+      pending,
+      entrance,
+      suggestions: items,
+      onValueChange: (id) => {
+        const item = items.find((candidate) => candidate.id === id);
+        if (item) send(item.label);
+      }
+    }
+  );
+}
+export {
+  FollowupSuggestions
+};

package/chat/ResponseActions.d.ts

@@ -0,0 +1,18 @@
+import { ChatTurn } from './types';
+/**
+ * The row under a committed assistant turn: copy, and, when the server
+ * logged the exchange and the provider has somewhere to send a verdict,
+ * thumbs up and down. A scripted transport never sends an exchange id, so
+ * it shows copy alone: the thumbs would have nothing to rate.
+ *
+ * Deliberately not the library's MessageActions component: its items API
+ * swaps an icon by name, which cannot crossfade, and this row's copied-tick
+ * (status colour, scale-and-fade swap) and filled chosen thumb both need
+ * styling per element that the items shape does not carry.
+ *
+ * Copy takes the turn's raw markdown, not the rendered text: it pastes back
+ * into anything that reads markdown, and plain readers still get the words.
+ */
+export declare function ResponseActions({ turn }: {
+    turn: ChatTurn;
+}): import("react").JSX.Element;

package/chat/ResponseActions.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { MOTION_FEEDBACK_RESET_MS } from "../tokens/motion.js";
+import { useChatWidget } from "./context.js";
+function ResponseActions({ turn }) {
+  const { submitFeedback } = useChatWidget();
+  const [copied, setCopied] = useState(false);
+  const revertTimer = useRef(null);
+  useEffect(
+    () => () => {
+      if (revertTimer.current !== null) clearTimeout(revertTimer.current);
+    },
+    []
+  );
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(turn.text);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    if (revertTimer.current !== null) clearTimeout(revertTimer.current);
+    revertTimer.current = setTimeout(() => setCopied(false), MOTION_FEEDBACK_RESET_MS);
+  };
+  const vote = (verdict) => {
+    if (!turn.exchangeId || !submitFeedback || turn.feedback === verdict) return;
+    submitFeedback(turn.id, turn.exchangeId, verdict);
+  };
+  const iconClass = (hidden, tick = false) => [
+    "ds-chat-widget__action-icon",
+    tick ? "ds-chat-widget__action-icon--tick" : "",
+    hidden ? "ds-chat-widget__action-icon--hidden" : "",
+    "material-symbols-rounded"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "ds-chat-widget__action",
+        onClick: copy,
+        "aria-label": copied ? "Copied" : "Copy response",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: iconClass(copied), "aria-hidden": "true", children: "content_copy" }),
+          /* @__PURE__ */ jsx("span", { className: iconClass(!copied, true), "aria-hidden": "true", children: "check" })
+        ]
+      }
+    ),
+    turn.exchangeId && submitFeedback && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ds-chat-widget__action",
+          onClick: () => vote("up"),
+          "aria-label": "Good response",
+          "aria-pressed": turn.feedback === "up",
+          children: /* @__PURE__ */ jsx("span", { className: iconClass(false), "aria-hidden": "true", children: "thumb_up" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ds-chat-widget__action",
+          onClick: () => vote("down"),
+          "aria-label": "Bad response",
+          "aria-pressed": turn.feedback === "down",
+          children: /* @__PURE__ */ jsx("span", { className: iconClass(false), "aria-hidden": "true", children: "thumb_down" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__sr-only", "aria-live": "polite", children: copied ? "Copied to clipboard" : "" })
+  ] });
+}
+export {
+  ResponseActions
+};

package/chat/TurnContent.d.ts

@@ -0,0 +1,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.
+ */
+export declare function TurnCard({ card }: {
+    card: ChatCard;
+}): import("react").JSX.Element | null;

package/chat/TurnContent.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useChatWidget } from "./context.js";
+function TurnCard({ card }) {
+  const { renderers } = useChatWidget();
+  const render = renderers[card.kind];
+  if (!render) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: render(card.data) });
+}
+export {
+  TurnCard
+};

package/chat/context.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { ChatPlacement, ChatSide } from './placement';
+import { ThreadsState } from './threads';
+import { ChatFeedbackVerdict } from './types';
+import { ChatState } from './useChat';
+/** Panel is the docked rail; full is the viewport takeover. */
+export type ChatView = 'panel' | 'full';
+/**
+ * Draws a `card` event's data as a React node. Keyed by the card's `kind`;
+ * a kind with no renderer draws nothing.
+ */
+export type ChatCardRenderers = Record<string, (data: unknown) => ReactNode>;
+/** How the widget renders a link the model wrote. */
+export type ChatLinkRenderer = (props: {
+    href: string;
+    children: ReactNode;
+    /** Call on navigation: closes the panel when it covers the page. */
+    onNavigate: () => void;
+}) => ReactNode;
+/** Sends a thumbs verdict somewhere. */
+export type FeedbackSink = (exchangeId: string, verdict: ChatFeedbackVerdict) => Promise<void>;
+export interface ChatWidgetContextValue extends ChatState {
+    /** The visitor's explicit model pick (a wire value), null while following the server's default. */
+    chosenModel: string | null;
+    /** Records an explicit pick; it rides on every send until changed or cleared by a lock. */
+    setChosenModel: (value: string | null) => void;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    toggleOpen: () => void;
+    /** Where the panel is in its lifecycle: `closing` is the exit beat after a close, during which the launcher keeps the panel rendered so its exit animation is seen. Everything behavioural keys on `open`; only presence reads this. */
+    panelPhase: 'open' | 'closing' | 'closed';
+    /** Which starters key has played its staged reveal, so a reopen shows the set standing rather than generating again. */
+    starterRevealKey: string | null;
+    setStarterRevealKey: (key: string | null) => void;
+    /** The draw for the starter pools: rolled once per load and again by reset(). */
+    starterSeed: number;
+    /** The turn whose follow-ups landed most recently in this open session, or null. Its row plays the entrance. */
+    freshFollowupsId: string | null;
+    view: ChatView;
+    setView: (view: ChatView) => void;
+    /** The panel's seat: a dock edge or floating. Provider-lifetime, so a reload returns to the host's default. */
+    placement: ChatPlacement;
+    setPlacement: (placement: ChatPlacement) => void;
+    /** The dock edge, remembered while floating, so the card has an edge to return to and to overlay from. */
+    side: ChatSide;
+    /** Popped out of the dock: a non-modal card the visitor moves and sizes. */
+    floating: boolean;
+    draft: string;
+    setDraft: (draft: string) => void;
+    /** The element to restore focus to when the panel closes. */
+    returnFocusRef: React.MutableRefObject<HTMLElement | null>;
+    /** The thread lifecycle behind the built-in threads and tabs. */
+    threads: ThreadsState;
+    renderers: ChatCardRenderers;
+    renderLink: ChatLinkRenderer;
+    isInternalHref: (href: string) => boolean;
+    /** Record and send a thumbs verdict; null when feedback is off. */
+    submitFeedback: ((turnId: string, exchangeId: string, verdict: ChatFeedbackVerdict) => void) | null;
+}
+export declare const ChatWidgetContext: import('react').Context<ChatWidgetContextValue | null>;
+/** The chat's state and actions, for anything rendered inside `ChatProvider`. */
+export declare function useChatWidget(): ChatWidgetContextValue;
+export declare const isInternalPath: (href: string) => boolean;
+/** A sink that posts a verdict to an endpoint speaking the feedback protocol (`createFeedbackHandler`). */
+export declare function createFeedbackPoster(endpoint?: string): FeedbackSink;

package/chat/context.js

@@ -0,0 +1,27 @@
+"use client";
+import { useContext, createContext } from "react";
+const ChatWidgetContext = createContext(null);
+function useChatWidget() {
+  const context = useContext(ChatWidgetContext);
+  if (!context) {
+    throw new Error("useChatWidget must be used inside a ChatProvider");
+  }
+  return context;
+}
+const INTERNAL_PATH = /^\/(?:[a-z0-9-]+(?:\/[a-z0-9-]+){0,3})?$/;
+const isInternalPath = (href) => INTERNAL_PATH.test(href);
+function createFeedbackPoster(endpoint = "/api/chat/feedback") {
+  return async (id, verdict) => {
+    await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ id, verdict })
+    });
+  };
+}
+export {
+  ChatWidgetContext,
+  createFeedbackPoster,
+  isInternalPath,
+  useChatWidget
+};

package/chat/demo-agent-panes.d.ts

@@ -0,0 +1,5 @@
+export declare function DemoActivityPane(): import("react").JSX.Element;
+export declare function DemoScheduledPane(): import("react").JSX.Element;
+export declare function DemoPersonalizationPane({ name }: {
+    name: string;
+}): import("react").JSX.Element;

package/chat/demo-agent-panes.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Button } from "../components/Button/Button.js";
+import { NotificationItem } from "../components/NotificationCenter/NotificationCenter.js";
+import "./ChatAgentPane.css";
+const NOOP = () => {
+};
+function DemoActivityPane() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "ds-chat-agent-pane__group", children: [
+      /* @__PURE__ */ jsx("p", { className: "ds-chat-agent-pane__heading", children: "Today" }),
+      /* @__PURE__ */ jsx(NotificationItem, { title: "Watch the Q3 invoices", media: "bolt", time: "9:13 am", children: "Started the hourly check on the billing inbox" }),
+      /* @__PURE__ */ jsx(NotificationItem, { title: "Draft the renewal note", media: "check_circle", time: "9:04 am", children: "Asked for your choice on the tone" }),
+      /* @__PURE__ */ jsx(NotificationItem, { title: "Send the approval request", media: "check_circle", time: "9:02 am", children: "Prepared the request and paused for a yes" }),
+      /* @__PURE__ */ jsx(NotificationItem, { title: "Tidy the workspace roles", media: "check_circle", time: "8:58 am", children: "Interrupted" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-chat-agent-pane__group", children: [
+      /* @__PURE__ */ jsx("p", { className: "ds-chat-agent-pane__heading", children: "Yesterday" }),
+      /* @__PURE__ */ jsx(NotificationItem, { title: "Summarize the standup", media: "check_circle", time: "4:40 pm", children: "Posted the recap to the team channel" }),
+      /* @__PURE__ */ jsx(NotificationItem, { title: "Retire the stale flags", media: "check_circle", time: "11:12 am", children: "Opened a pull request for review" })
+    ] })
+  ] });
+}
+function DemoScheduledPane() {
+  return /* @__PURE__ */ jsxs("div", { className: "ds-chat-agent-pane__group", children: [
+    /* @__PURE__ */ jsx("p", { className: "ds-chat-agent-pane__heading", children: "Daily" }),
+    /* @__PURE__ */ jsx(NotificationItem, { title: "Morning digest", media: "schedule", time: "8:00 am", children: "Every weekday" }),
+    /* @__PURE__ */ jsx(NotificationItem, { title: "Inbox sweep", media: "mail", time: "Every 30m", children: "Flags anything still waiting on a reply" }),
+    /* @__PURE__ */ jsx(NotificationItem, { title: "Invoice watch", media: "receipt_long", time: "Hourly", children: "Asks before it pays anything" })
+  ] });
+}
+function DemoPersonalizationPane({ name }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "ds-chat-agent-pane__card", children: /* @__PURE__ */ jsxs("div", { className: "ds-chat-agent-pane__card-row", children: [
+      /* @__PURE__ */ jsx("span", { className: "ds-chat-agent-pane__card-label", children: name }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "compact", iconLeft: "edit", onClick: NOOP, label: "Edit" })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "ds-chat-agent-pane__group", children: [
+      /* @__PURE__ */ jsx("p", { className: "ds-chat-agent-pane__heading", children: "What it remembers" }),
+      /* @__PURE__ */ jsx(NotificationItem, { title: "Tone", media: "favorite", time: "18 Sep", children: "Plain and short, no exclamation marks" }),
+      /* @__PURE__ */ jsx(NotificationItem, { title: "Working hours", media: "psychology", time: "22 Sep", children: "Nothing scheduled before 9am" })
+    ] })
+  ] });
+}
+export {
+  DemoActivityPane,
+  DemoPersonalizationPane,
+  DemoScheduledPane
+};

package/chat/demo-agent.d.ts

@@ -0,0 +1,3 @@
+import { AgentRailTab } from '../components/AgentRail/AgentRail';
+/** The agent pane's four tabs for an agent called `name`. */
+export declare function demoAgentTabs(name: string): AgentRailTab[];

package/chat/demo-agent.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { EmptyState } from "../components/EmptyState/EmptyState.js";
+import { DemoActivityPane, DemoScheduledPane, DemoPersonalizationPane } from "./demo-agent-panes.js";
+function demoAgentTabs(name) {
+  return [
+    { id: "activity", label: "Activity", icon: "list", content: /* @__PURE__ */ jsx(DemoActivityPane, {}) },
+    {
+      id: "approvals",
+      label: "Approvals",
+      icon: "verified_user",
+      content: /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          size: "compact",
+          icon: "verified_user",
+          title: "No approvals yet",
+          description: "Anything the agent wants to spend or send lands here first."
+        }
+      )
+    },
+    { id: "scheduled", label: "Scheduled", icon: "history_toggle_off", content: /* @__PURE__ */ jsx(DemoScheduledPane, {}) },
+    { id: "profile", label: "You", icon: "fingerprint", content: /* @__PURE__ */ jsx(DemoPersonalizationPane, { name }) }
+  ];
+}
+export {
+  demoAgentTabs
+};

package/chat/demo-card-components.d.ts

@@ -0,0 +1,46 @@
+import { ChatCardRenderers } from './context';
+import { ChatCard } from './types';
+export interface DemoChartCard {
+    type: 'area' | 'bar';
+    title: string;
+    meta?: string;
+    data: Record<string, string | number>[];
+    xKey: string;
+    yKey: string;
+    label: string;
+}
+export interface DemoToolCallCard {
+    name: string;
+    summary: string;
+    status: 'success' | 'error' | 'running';
+    duration?: string;
+    args?: string;
+    /** The error can be retried in place; the retry runs for a beat and lands as a success. */
+    retryable?: boolean;
+}
+export interface DemoInterruptCard {
+    title: string;
+    description: string;
+    options: {
+        value: string;
+        label: string;
+        variant: 'primary' | 'secondary';
+    }[];
+}
+/** Several cards landing as one turn's stack. */
+export interface DemoStackCard {
+    items: ChatCard[];
+}
+export declare function DemoToolCall({ card }: {
+    card: DemoToolCallCard;
+}): import("react").JSX.Element;
+export declare function DemoInterrupt({ card }: {
+    card: DemoInterruptCard;
+}): import("react").JSX.Element;
+export declare function DemoChart({ card }: {
+    card: DemoChartCard;
+}): import("react").JSX.Element;
+export declare function DemoStack({ card, renderers }: {
+    card: DemoStackCard;
+    renderers: ChatCardRenderers;
+}): import("react").JSX.Element;

package/chat/demo-card-components.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "../components/Button/Button.js";
+import { AreaChart } from "../components/Chart/AreaChart.js";
+import { BarChart } from "../components/Chart/BarChart.js";
+import { CodeBlock } from "../components/CodeBlock/CodeBlock.js";
+import { InterruptCard } from "../components/InterruptCard/InterruptCard.js";
+import { MessageCard } from "../components/MessageCard/MessageCard.js";
+import { ToolCall } from "../components/ToolCall/ToolCall.js";
+const RETRY_RUN_MS = 1400;
+function DemoToolCall({ card }) {
+  const [status, setStatus] = useState(card.status);
+  useEffect(() => {
+    if (status !== "running" || !card.retryable) return;
+    const timer = setTimeout(() => setStatus("success"), RETRY_RUN_MS);
+    return () => clearTimeout(timer);
+  }, [status, card.retryable]);
+  return /* @__PURE__ */ jsx(
+    ToolCall,
+    {
+      name: card.name,
+      summary: card.summary,
+      status,
+      duration: status === "running" ? void 0 : card.duration,
+      actions: card.retryable && status === "error" ? /* @__PURE__ */ jsx(Button, { label: "Retry", variant: "secondary", size: "compact", onClick: () => setStatus("running") }) : void 0,
+      children: card.args ? /* @__PURE__ */ jsx(CodeBlock, { code: card.args, language: "json" }) : void 0
+    }
+  );
+}
+function DemoInterrupt({ card }) {
+  const [value, setValue] = useState(void 0);
+  return /* @__PURE__ */ jsx(
+    InterruptCard,
+    {
+      title: card.title,
+      description: card.description,
+      options: card.options,
+      value,
+      onValueChange: setValue
+    }
+  );
+}
+function DemoChart({ card }) {
+  const chart = card.type === "area" ? /* @__PURE__ */ jsx(AreaChart, { data: card.data, xKey: card.xKey, series: [{ dataKey: card.yKey, label: card.label }], height: 150 }) : /* @__PURE__ */ jsx(BarChart, { data: card.data, xKey: card.xKey, yKey: card.yKey, dataLabel: card.label, height: 150 });
+  return /* @__PURE__ */ jsx(MessageCard, { media: chart, title: card.title, meta: card.meta });
+}
+function DemoStack({ card, renderers }) {
+  return /* @__PURE__ */ jsx("div", { className: "ds-chat-demo__stack", children: card.items.map((item, index) => {
+    const render = renderers[item.kind];
+    return render ? /* @__PURE__ */ jsx("div", { children: render(item.data) }, index) : null;
+  }) });
+}
+export {
+  DemoChart,
+  DemoInterrupt,
+  DemoStack,
+  DemoToolCall
+};

package/chat/demo-cards.d.ts

@@ -0,0 +1,32 @@
+import { AgentPlanStep } from '../components/AgentPlan/AgentPlan';
+import { ChatCardRenderers } from './context';
+import { DemoChartCard, DemoInterruptCard, DemoStackCard, DemoToolCallCard } from './demo-card-components';
+export type { DemoChartCard, DemoInterruptCard, DemoStackCard, DemoToolCallCard };
+export interface DemoProductCard {
+    title: string;
+    description: string;
+    meta?: string;
+    actions?: {
+        label: string;
+        variant: 'secondary' | 'tertiary';
+    }[];
+}
+export interface DemoSourcesCard {
+    items: {
+        title: string;
+        source: string;
+        meta?: string;
+        excerpt: string;
+        letter?: string;
+        index?: number;
+    }[];
+}
+export interface DemoDiffCard {
+    diff: string;
+    filename: string;
+}
+export interface DemoPlanCard {
+    steps: AgentPlanStep[];
+}
+/** Draws every demo card kind. Pass to `ChatProvider`'s `renderers`. */
+export declare const DEMO_RENDERERS: ChatCardRenderers;