rift-ds 1.9.0 → 1.10.0

package/README.md

@@ -13,7 +13,7 @@ An open source React design system built for AI products and coding agents: comp
 
 ## Why Rift DS
 
-- **<!-- component-count -->152<!-- /component-count --> components.** Buttons, forms and tables through to charts, navigation and overlays, each typed and documented with live examples. React is the only required peer dependency.
+- **<!-- component-count -->153<!-- /component-count --> components.** Buttons, forms and tables through to charts, navigation and overlays, each typed and documented with live examples. React is the only required peer dependency.
 - **AI patterns, the whole chat and templates, ready to use.** Composer, streaming chat thread, tool calls, reasoning and thread panel are in the box, the complete AI chat ships assembled as one widget that one command scaffolds, and the docs site has complete template screens built from them.
 - **Fully themeable.** The shipped themes are complete looks to start from, each in light and dark. One `data-brand` attribute applies a theme, and a few CSS overrides make your own.
 - **Ready for coding agents.** One command installs the agent skills, and a public MCP endpoint serves every component's props, so your agent builds with the library as it actually is. No key, no account.
@@ -94,13 +94,13 @@ import 'rift-ds/tokens/presets/presets.css';
 
 ## Components
 
-<!-- component-count -->152<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
+<!-- component-count -->153<!-- /component-count --> components, including a chat set for AI products (Chat thread, Composer, Tool call, Reasoning, Thread panel) and Shader field, a WebGL2 ambient background whose light sources read your colour tokens at runtime, so it re-themes with everything else. Details and live examples are on the [docs site](https://rift-ds.com/components).
 
 <details>
 <summary>The full list</summary>
 
 <!-- component-list:start -->
-Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Artifact card · Artifact panel · Attachment drop zone · Attachment group · Attachment tile · Attachment viewer · Avatar · Avatar group · Badge · Banner · Bar chart · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Mention · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Pixel avatar · Popover · Progress bar · Prompt suggestions · Prose · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · Widget · World map
+Accordion · Agent plan · Agent rail · Agent status · AI button · Alert · Alert dialog · Anchor nav · Animated number · App layout · App sidebar · Area chart · Artifact card · Artifact panel · Attachment drop zone · Attachment group · Attachment tile · Attachment viewer · Avatar · Avatar group · Badge · Banner · Bar chart · Bottom nav · Breadcrumb · Button · Button group · Card · Card stack · Carousel · Chat header · Chat marker · Chat message · Chat thread · Checkbox · Chip · Circular button · Code block · Code diff · Colour picker · Combo chart · Combobox · Command palette · Composer · Contact card · Context menu · Contribution graph · Data table · Date input · Date picker · Dialog · Divider · Document chip · Drawer · Dropdown · Dropdown menu · Empty state · Entity card · Event calendar · Field · Figure · File input · Filter bar · Funnel chart · Gantt chart · Gauge · Globe · Hover card · Image compare · Input · Inspector colour picker · Inspector dropdown · Inspector input · Inspector section · Inspector segments · Inspector slider · Inspector toggle switch · Instructions · Interrupt card · Kbd · Legend tile · Lightbox · Line chart · Link list · Map callout · Map legend · Mention · Message actions · Message card · Meter · Model picker · Nav · Nav list · Notification centre · Number input · Pagination · Panel · Pie chart · Pin input · Pixel avatar · Popover · Progress bar · Prompt suggestions · Prose · Question card · Quote · Radar chart · Radial chart · Radio button · Rating · Reasoning · Rich dropdown · Scatter chart · Section title · Segmented control · Selection card · Shader field · Sidebar panel · Skeleton · Slider · Source chip · Source trail · Sparkline · Spinner · Split button · Split pane · Stacked bar chart · Stat · Status dot · Stepper · Streaming text · Swatch · Table · Tabs · Tag input · Textarea · Thread panel · Thread tabs · Time picker · Timeline · Toast · Toggle group · Toggle switch · Tool call · Toolbar · Tooltip · Top app bar · Tree view · Treemap · Usage card · Waveform · Widget · World map
 <!-- component-list:end -->
 
 </details>

package/bin/templates/chat/app/api/chat/route.ts

@@ -23,6 +23,9 @@ const handler = createChatHandler({
   models: CHAT_MODELS,
   defaultModel: DEFAULT_CHAT_MODEL,
   // tools: [], // Deterministic lookups the model may call; a tool can answer with a card.
+  // A reply can end in a question with answers to pick, drawn as a card the
+  // visitor taps. Asking ends the exchange; the answer arrives as the next message.
+  askUser: true,
   guardrails,
 });
 

package/chat/AssistantTurn.js

@@ -12,6 +12,7 @@ import { DOCK_QUERY } from "./queries.js";
 import { FollowupSuggestions } from "./FollowupSuggestions.js";
 import { ResponseActions } from "./ResponseActions.js";
 import { TurnCard } from "./TurnContent.js";
+import { TurnQuestion } from "./TurnQuestion.js";
 function MarkdownLink({ href, children }) {
   const { view, setOpen, renderLink, isInternalHref } = useChatWidget();
   if (!href || !isInternalHref(href)) return /* @__PURE__ */ jsx(Fragment, { children });
@@ -44,7 +45,7 @@ function AssistantTurn({ turn, live }) {
   const durationSeconds = live ? live.durationSeconds : turn?.durationSeconds;
   const text = live ? live.text : turn?.text ?? "";
   const { turns, live: liveTurn, freshFollowupsId } = useChatWidget();
-  const followupsPending = !!turn && turn.text !== "" && !!turn.exchangeId && !turn.followups && !liveTurn && turns[turns.length - 1]?.id === turn.id;
+  const followupsPending = !!turn && turn.text !== "" && !!turn.exchangeId && !turn.followups && !turn.question && !liveTurn && turns[turns.length - 1]?.id === turn.id;
   return /* @__PURE__ */ jsx(
     ChatMessage,
     {
@@ -56,6 +57,7 @@ function AssistantTurn({ turn, live }) {
         {
           turnId: turn.id,
           suggestions: turn.followups,
+          chosen: turn.followupChosen,
           entrance: turn.id === freshFollowupsId
         }
       ) : followupsPending && turn ? /* @__PURE__ */ jsx(FollowupSuggestions, { turnId: turn.id, suggestions: [], pending: true }) : void 0,
@@ -72,7 +74,8 @@ function AssistantTurn({ turn, live }) {
         ),
         turn?.content,
         turn?.card && /* @__PURE__ */ jsx(TurnCard, { card: turn.card }),
-        text !== "" && /* @__PURE__ */ jsx(Prose, { children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, children: text }) })
+        text !== "" && /* @__PURE__ */ jsx(Prose, { children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, children: text }) }),
+        turn?.question && /* @__PURE__ */ jsx(TurnQuestion, { turn })
       ] })
     }
   );

package/chat/ChatWidget.css

@@ -976,7 +976,7 @@
   box-shadow: var(--shadow-floating);
   overflow: hidden;
   backdrop-filter: blur(24px);
-  z-index: 1100;
+  z-index: var(--layer-chat-panel);
   /* The panel-to-takeover glide: the same card grows to fill the viewport,
      so every property that differs between the two views animates together. */
   transition:
@@ -1050,7 +1050,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
   position: fixed;
   inset: 0;
   background: var(--color-scrim);
-  z-index: 1090;
+  z-index: var(--layer-chat-scrim);
   animation: ds-chat-launcher-scrim-in var(--motion-duration-slow) var(--motion-ease-standard);
 }
 
@@ -1075,7 +1075,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
   justify-content: center;
   cursor: ew-resize;
   touch-action: none;
-  z-index: 1101;
+  z-index: calc(var(--layer-chat-panel) + 1);
 }
 
 .ds-chat-launcher__dock-handle--left {
@@ -1135,6 +1135,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel {
    corner, all inside the card. */
 .ds-chat-launcher__float-grip {
   position: absolute;
+  /* ds-allow(stacking): local order inside the floating card, above its own content; the card itself sits on --layer-chat-panel. */
   z-index: 10;
   display: flex;
   align-items: center;
@@ -1246,7 +1247,7 @@ html[data-chat-resizing] .ds-chat-launcher__panel--floating .ds-chat-header {
   position: fixed;
   right: var(--ds-chat-inset);
   bottom: var(--ds-chat-inset);
-  z-index: 1080;
+  z-index: var(--layer-chat-launcher);
 }
 
 /* The button's own solid field keeps it legible over whatever content

package/chat/ChatWidget.d.ts

@@ -37,8 +37,17 @@ export interface ChatWidgetProps {
     phone?: boolean;
     /** The header brand name. */
     title?: string;
+    /**
+     * Which way the conversation reads. `top-down` (the default) floats each
+     * new turn to the top of the thread and streams the answer in below it.
+     * `bottom-up` is the classic message thread: turns stack from the bottom,
+     * the newest just above the composer, and the view follows the answer.
+     */
+    flow?: 'top-down' | 'bottom-up';
     /** The composer's placeholder text. */
     placeholder?: string;
+    /** The composer's placeholder while a set of questions holds it: the answer goes in the card, or the card is skipped. */
+    questionsPlaceholder?: string;
     /** Show the conversation starters on the welcome screen. */
     showStarters?: boolean;
     /** The header mark's image src; null (the default) shows the name alone. */
@@ -112,4 +121,4 @@ export interface ChatWidgetProps {
  * a stage card, a whole page). It reads all of its state from ChatProvider,
  * so the conversation is the same object wherever it shows.
  */
-export declare function ChatWidget({ fullscreenEnabled, closeEnabled, placementEnabled, compact, phone, title, placeholder, showStarters, logo, tagline, starters: startersInput, startersKey, composerActions, models, defaultModel, lockedModelDescription, fileAttachments, maxAttachments, maxAttachmentBytes, mentions, threads, threadsProps, tabs, aside, agent, artifacts, contextLabel, widgets, widgetsLayout, widgetsWidth, disclaimer, }: ChatWidgetProps): import("react").JSX.Element;
+export declare function ChatWidget({ fullscreenEnabled, closeEnabled, placementEnabled, compact, phone, title, flow, placeholder, questionsPlaceholder, showStarters, logo, tagline, starters: startersInput, startersKey, composerActions, models, defaultModel, lockedModelDescription, fileAttachments, maxAttachments, maxAttachmentBytes, mentions, threads, threadsProps, tabs, aside, agent, artifacts, contextLabel, widgets, widgetsLayout, widgetsWidth, disclaimer, }: ChatWidgetProps): import("react").JSX.Element;

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 { 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";
@@ -27,6 +27,8 @@ 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 "./ChatWidget.css";
 const DEFAULT_MAX_ATTACHMENTS = 10;
 const DEFAULT_MAX_ATTACHMENT_BYTES = 50 * 1024 * 1024;
@@ -40,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?",
@@ -91,6 +95,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;
@@ -478,7 +490,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(ChatThread, { className: "ds-chat-widget__thread", flow, children: [
               ...turns.map(
                 (turn) => turn.bare ? (
                   /* Conversation furniture (a day marker): the injected
@@ -495,7 +507,7 @@ 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
                   )
@@ -515,7 +527,8 @@ function ChatWidget({
           Composer,
           {
             ref: composerRef,
-            placeholder,
+            placeholder: questionsOpen ? questionsPlaceholder : placeholder,
+            disabled: questionsOpen,
             sendLabel: "Send",
             aiGlow: true,
             value: draft,

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/TurnQuestion.d.ts

@@ -0,0 +1,19 @@
+import { ChatReply, ChatTurn } from './types';
+/**
+ * The questions an assistant turn asks, drawn under its prose. Live only
+ * while the turn is the newest and nothing is streaming: once the
+ * conversation moves on without an answer the card stays as it was offered,
+ * inert, so the transcript still shows what was asked.
+ */
+export declare function TurnQuestion({ turn }: {
+    turn: ChatTurn;
+}): import("react").JSX.Element | null;
+/**
+ * A user turn that answered a set of questions: each question over its
+ * answers. One question, with one pick or several, stays the ordinary
+ * bubble, its picks joined with commas.
+ */
+export declare function ReplyBody({ reply, text }: {
+    reply?: ChatReply;
+    text: string;
+}): import("react").JSX.Element;

package/chat/TurnQuestion.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { QuestionSummary, QuestionCard } from "../components/QuestionCard/QuestionCard.js";
+import { useChatWidget } from "./context.js";
+import { isBlockingQuestion } from "./questions.js";
+function TurnQuestion({ turn }) {
+  const { turns, live, answerQuestion, skipQuestion } = useChatWidget();
+  const set = turn.question;
+  const newest = turns[turns.length - 1]?.id === turn.id;
+  const blocking = newest && isBlockingQuestion(turn, live !== null);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!blocking) return;
+    ref.current?.querySelector("button:not(:disabled)")?.focus({ preventScroll: true });
+  }, []);
+  if (!set) return null;
+  return /* @__PURE__ */ jsx(
+    QuestionCard,
+    {
+      ref,
+      className: "ds-chat-widget__question",
+      questions: set.questions,
+      values: turn.answers,
+      disabled: turn.answers === void 0 && (!newest || live !== null),
+      onValuesChange: (answers) => answerQuestion(turn.id, answers),
+      onSkip: blocking ? () => skipQuestion(turn.id) : void 0
+    }
+  );
+}
+function ReplyBody({ reply, text }) {
+  if (!reply || reply.items.length === 1) return /* @__PURE__ */ jsx(Fragment, { children: text });
+  return /* @__PURE__ */ jsx(QuestionSummary, { variant: "plain", items: reply.items });
+}
+export {
+  ReplyBody,
+  TurnQuestion
+};