rift-ds 1.7.0 → 1.9.0

package/chat/useChat.js

@@ -0,0 +1,241 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { revokeAttachmentUrls } from "../components/Attachment/useAttachments.js";
+import { createStreamReveal } from "../components/StreamingText/useStreamReveal.js";
+let nextId = 0;
+const makeId = () => `turn-${++nextId}`;
+const DEFAULT_PLACEHOLDER_COPY = {
+  empty: "The reply came back empty. Try sending that again.",
+  stopped: "Stopped before a reply arrived.",
+  failed: "Something went wrong while replying. Try sending that again."
+};
+function useChat(transport, placeholders = DEFAULT_PLACEHOLDER_COPY) {
+  const [turns, setTurns] = useState([]);
+  const [live, setLive] = useState(null);
+  const [modelLabel, setModelLabel] = useState(null);
+  const [modelPolicy, setModelPolicy] = useState(null);
+  const abortRef = useRef(null);
+  const busyRef = useRef(false);
+  const historyRef = useRef([]);
+  const generationRef = useRef(0);
+  useEffect(() => () => abortRef.current?.abort(), []);
+  const turnsRef = useRef(turns);
+  useEffect(() => {
+    turnsRef.current = turns;
+  }, [turns]);
+  const releaseAttachments = useCallback(() => {
+    for (const turn of turnsRef.current) {
+      if (turn.attachments) revokeAttachmentUrls(turn.attachments);
+    }
+  }, []);
+  useEffect(() => releaseAttachments, [releaseAttachments]);
+  const streaming = live !== null;
+  const commit = useCallback(
+    (finished, startedAt, historyText) => {
+      if (historyText !== null && historyText !== "") {
+        historyRef.current = [
+          ...historyRef.current,
+          { role: "assistant", content: historyText }
+        ];
+      }
+      setLive(null);
+      setTurns((prev) => [
+        ...prev,
+        {
+          id: finished.id,
+          role: "assistant",
+          text: finished.text,
+          tracePoints: finished.tracePoints,
+          exchangeId: finished.exchangeId,
+          followups: finished.followups,
+          content: finished.content,
+          card: finished.card,
+          durationSeconds: finished.durationSeconds ?? Math.max(1, Math.round((Date.now() - startedAt) / 1e3))
+        }
+      ]);
+    },
+    []
+  );
+  const send = useCallback(
+    (text, options) => {
+      const trimmed = text.trim();
+      const attachments = options?.attachments?.length ? options.attachments : void 0;
+      if (trimmed === "" && !attachments || busyRef.current) return false;
+      busyRef.current = true;
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const generation = generationRef.current;
+      const startedAt = Date.now();
+      const history = [
+        ...historyRef.current,
+        {
+          role: "user",
+          content: trimmed,
+          attachments: attachments?.map(({ name, kind, size }) => ({ name, kind, size }))
+        }
+      ];
+      historyRef.current = history;
+      const userTurnId = makeId();
+      setTurns((prev) => [
+        ...prev,
+        {
+          id: userTurnId,
+          role: "user",
+          text: trimmed,
+          content: options?.content,
+          attachments
+        }
+      ]);
+      let current = {
+        id: makeId(),
+        phase: "thinking",
+        statusLabel: "Thinking",
+        tracePoints: [],
+        text: ""
+      };
+      setLive(current);
+      const update = (next) => {
+        current = next;
+        setLive(next);
+      };
+      const reveal = createStreamReveal({
+        onUpdate: (visible) => update({ ...current, text: visible }),
+        /* Someone who has asked for less motion is asking for less of this. */
+        paced: !window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      });
+      const run = async () => {
+        try {
+          for await (const event of transport(history, controller.signal)) {
+            if (generation !== generationRef.current || controller.signal.aborted) break;
+            switch (event.type) {
+              case "model":
+                setModelLabel(event.label);
+                break;
+              case "models":
+                setModelPolicy({ default: event.default, locked: event.locked });
+                break;
+              case "exchange":
+                current = { ...current, exchangeId: event.id };
+                break;
+              case "followups":
+                current = { ...current, followups: event.items };
+                break;
+              case "content":
+                current = { ...current, content: event.node };
+                break;
+              case "card":
+                current = { ...current, card: event.card };
+                break;
+              case "status":
+                update({
+                  ...current,
+                  statusLabel: event.label,
+                  tracePoints: event.point ? [...current.tracePoints, event.point] : current.tracePoints
+                });
+                break;
+              case "delta":
+                current = {
+                  ...current,
+                  phase: "streaming",
+                  // Thinking ends at the first delta; freeze the duration then.
+                  durationSeconds: current.durationSeconds ?? Math.max(1, Math.round((Date.now() - startedAt) / 1e3))
+                };
+                reveal.append(event.text);
+                break;
+              /* A guardrail line and a failure are not the model speaking, so
+                 they are not paced like it: they appear whole. */
+              case "notice":
+              case "error":
+                current = {
+                  ...current,
+                  phase: "streaming",
+                  durationSeconds: current.durationSeconds ?? 1
+                };
+                reveal.showWhole(event.type === "notice" ? event.text : event.message);
+                break;
+              case "done":
+                break;
+            }
+            if (event.type === "done") break;
+          }
+          if (controller.signal.aborted || generation !== generationRef.current) {
+            reveal.flush();
+          } else {
+            await reveal.drained();
+          }
+          reveal.cancel();
+          if (generation !== generationRef.current) return;
+          if (current.text === "") {
+            commit({ ...current, text: placeholders.empty }, startedAt, null);
+          } else {
+            commit(current, startedAt, current.text);
+          }
+        } catch (err) {
+          reveal.flush();
+          if (generation !== generationRef.current) ;
+          else if (controller.signal.aborted) {
+            if (current.text === "") {
+              commit({ ...current, text: placeholders.stopped }, startedAt, null);
+            } else {
+              commit(current, startedAt, current.text);
+            }
+          } else {
+            if (current.text === "") {
+              commit({ ...current, text: placeholders.failed }, startedAt, null);
+            } else {
+              commit(current, startedAt, current.text);
+            }
+            console.error(err);
+          }
+        } finally {
+          if (generation === generationRef.current) busyRef.current = false;
+        }
+      };
+      void run();
+      return true;
+    },
+    [transport, commit, placeholders]
+  );
+  const setTurnFeedback = useCallback((turnId, feedback) => {
+    setTurns(
+      (prev) => prev.map((turn) => turn.id === turnId ? { ...turn, feedback } : turn)
+    );
+  }, []);
+  const setTurnFollowups = useCallback((turnId, followups) => {
+    setTurns(
+      (prev) => prev.map((turn) => turn.id === turnId ? { ...turn, followups } : turn)
+    );
+  }, []);
+  const injectTurn = useCallback((turn) => {
+    setTurns((prev) => [...prev, { ...turn, id: makeId() }]);
+  }, []);
+  const stop = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+  const reset = useCallback(() => {
+    generationRef.current += 1;
+    abortRef.current?.abort();
+    busyRef.current = false;
+    historyRef.current = [];
+    releaseAttachments();
+    setTurns([]);
+    setLive(null);
+  }, [releaseAttachments]);
+  return {
+    turns,
+    live,
+    streaming,
+    modelLabel,
+    modelPolicy,
+    send,
+    stop,
+    reset,
+    injectTurn,
+    setTurnFeedback,
+    setTurnFollowups
+  };
+}
+export {
+  DEFAULT_PLACEHOLDER_COPY,
+  useChat
+};

package/cli/templates/chat/app/api/chat/feedback/route.d.ts

@@ -0,0 +1,3 @@
+export declare const runtime = "nodejs";
+export declare const dynamic = "force-dynamic";
+export declare function POST(request: Request): Promise<Response>;

package/cli/templates/chat/app/api/chat/followups/route.d.ts

@@ -0,0 +1,3 @@
+export declare const runtime = "nodejs";
+export declare const dynamic = "force-dynamic";
+export declare function POST(request: Request): Promise<Response>;

package/cli/templates/chat/app/api/chat/guardrails.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Rate limits, a daily budget with model tiers, the exchange log and the
+ * feedback store, over Upstash Redis. Shared by the three chat routes.
+ *
+ * Fails open: with KV_REST_API_URL and KV_REST_API_TOKEN unset, every
+ * request is allowed and nothing is logged, so the chat works on day one
+ * and the limits arrive when you add the two variables. Set CHAT_VISITOR_SALT
+ * too: it salts the hashed visitor address the limits key on.
+ */
+export declare const guardrails: import('../../../../../../chat/server').ChatGuardrails;

package/cli/templates/chat/app/api/chat/route.d.ts

@@ -0,0 +1,4 @@
+export declare const runtime = "nodejs";
+export declare const maxDuration = 60;
+export declare const dynamic = "force-dynamic";
+export declare function POST(request: Request): Promise<Response>;

package/cli/templates/chat/components/chat/ChatMount.d.ts

@@ -0,0 +1 @@
+export declare function ChatMount(): import("react").JSX.Element;

package/cli/templates/chat/components/chat/models.d.ts

@@ -0,0 +1,11 @@
+import { ChatModelOption } from 'rift-ds/chat';
+/**
+ * The models your chat offers. The widget's picker shows `label` and
+ * `description`; the client sends `value`; the server calls `id`. Shared by
+ * the route and the mount so the two can never disagree. Edit freely.
+ */
+export declare const CHAT_MODELS: ChatModelOption[];
+/** What serves when the visitor has not chosen. */
+export declare const DEFAULT_CHAT_MODEL: string;
+/** The model that writes the three follow-up questions under an answer. */
+export declare const FOLLOWUP_MODEL = "claude-haiku-5-5";

package/components/AgentRail/AgentRail.css

@@ -38,11 +38,12 @@
 }
 
 /* ============================================
-   COLLAPSE — the way out, pinned to the LEADING corner. The trailing one
-   belongs to the host: a rail seated at a card's edge puts the card's own
-   controls above it, and the collapse would sit under them. A chevron,
-   never a cross, for the same reason: two crosses a few pixels apart read
-   as two ways to dismiss the same thing.
+   COLLAPSE — the way out. By default a chevron pinned to the LEADING
+   corner: the trailing one usually belongs to the host, since a rail seated
+   at a card's edge puts the card's own controls above it, and two crosses a
+   few pixels apart read as two ways to dismiss the same thing. A host that
+   has weighed that and wants the way out where a panel's close is looked
+   for takes the close variant below: a cross in the trailing corner.
    ============================================ */
 
 .ds-agent-rail__collapse {
@@ -72,6 +73,14 @@
   transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
 }
 
+/* The close variant: a cross in the trailing corner, where a panel's own
+   way out usually sits. The host that asks for it has decided its controls
+   and this one do not collide. */
+.ds-agent-rail__collapse--close {
+  left: auto;
+  right: var(--padding-300);
+}
+
 .ds-agent-rail__collapse .material-symbols-rounded {
   --icon-size: var(--icon-size-600);
 }

package/components/AgentRail/AgentRail.d.ts

@@ -49,6 +49,8 @@ type AgentRailOwnProps = {
     onCollapse?: () => void;
     /** Accessible name for the collapse affordance. */
     collapseLabel?: string;
+    /** How the collapse affordance is drawn. `chevron` (the default) pins a chevron to the leading corner, clear of a host's own controls. `close` pins a cross to the trailing corner, for a rail that is its card's only way out or whose host wants the way out where a panel's close usually is. */
+    collapseVariant?: 'chevron' | 'close';
     /** Rendered under the pane, outside its scroll — a sign-out row, a quiet hint. */
     footer?: React.ReactNode;
     /** Additional CSS classes */

package/components/AgentRail/AgentRail.js

@@ -15,6 +15,7 @@ const AgentRail = React.forwardRef(
     ariaLabel,
     onCollapse,
     collapseLabel = "Collapse the agent panel",
+    collapseVariant = "chevron",
     footer,
     className = "",
     ...rest
@@ -26,10 +27,10 @@ const AgentRail = React.forwardRef(
         "button",
         {
           type: "button",
-          className: `${baseClass}__collapse`,
+          className: `${baseClass}__collapse${collapseVariant === "close" ? ` ${baseClass}__collapse--close` : ""}`,
           "aria-label": collapseLabel,
           onClick: onCollapse,
-          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "chevron_right" })
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: collapseVariant === "close" ? "close" : "chevron_right" })
         }
       ),
       profile && /* @__PURE__ */ jsxs("header", { className: `${baseClass}__header`, children: [

package/components/ArtifactCard/ArtifactCard.css

@@ -0,0 +1,106 @@
+/* ============================================
+   ARTIFACT CARD COMPONENT
+   An artifact's place in a conversation: a mark, the name over its kind,
+   and a cue for what a press does. One row, the width of a card, and a
+   toggle button: pressed while its artifact is on stage in the panel.
+   ============================================ */
+
+/* Base */
+
+.ds-artifact-card {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-300);
+  width: 100%;
+  max-width: 360px;
+  padding: var(--padding-300);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-600);
+  background-color: var(--color-bg-container-primary);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background-color var(--motion-duration-fast) var(--motion-ease-standard),
+    border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-artifact-card:hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-artifact-card:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* States */
+
+/* On stage, the tile holds the "on stage" fill ThreadPanel's active row and
+   ThreadTabs' active tab wear. */
+.ds-artifact-card--open {
+  background-color: var(--color-bg-container-tertiary);
+}
+
+/* The mark steps to the card's resting fill while the card holds the
+   on-stage one, so it stays a tile on the card instead of dissolving into
+   a fill of nearly its own value. */
+.ds-artifact-card--open .ds-artifact-card__mark {
+  background-color: var(--color-bg-container-primary);
+}
+
+.ds-artifact-card__mark {
+  --icon-size: var(--icon-size-600);
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  /* Concentric with the card: its radius less the padding between them,
+     computed from the live tokens so the corner holds under any theme's
+     radius scale, and squares off with a squared theme. */
+  border-radius: max(0px, calc(var(--radius-600) - var(--padding-300)));
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-icon-primary);
+}
+
+.ds-artifact-card__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ds-artifact-card__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-artifact-card__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+}
+
+.ds-artifact-card__cue {
+  --icon-size: var(--icon-size-500);
+  flex: none;
+  color: var(--color-icon-secondary);
+}
+
+.ds-artifact-card:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}

package/components/ArtifactCard/ArtifactCard.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+/** Props owned by ArtifactCard itself — everything else falls through to the root `<button>`. */
+type ArtifactCardOwnProps = {
+    /** The artifact's name. Collides with the native `title` tooltip attribute on purpose: the card shows its name, it does not hide it in a tooltip. */
+    title: React.ReactNode;
+    /** A quiet line under the name: what kind of thing this is, or which version. */
+    meta?: React.ReactNode;
+    /** The leading mark — Material Symbol name (string) or custom element (ReactNode). */
+    icon?: string | React.ReactNode;
+    /** Whether this card's artifact is on stage in its panel. The card holds the on-stage fill, announces itself pressed, and its trailing cue turns from open to close. */
+    open?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface ArtifactCardProps extends ArtifactCardOwnProps, Omit<React.ComponentPropsWithoutRef<'button'>, keyof ArtifactCardOwnProps | 'type'> {
+}
+/**
+ * ArtifactCard is an artifact's place in a conversation: one row naming
+ * something the chat made, which opens it in an ArtifactPanel. It is a
+ * toggle button, so `open` is the whole state and `onClick` the whole
+ * behaviour; the host decides what opening means.
+ *
+ * Hook-free and stateless, so it renders from a Server Component until it
+ * is given a handler.
+ */
+export declare const ArtifactCard: React.ForwardRefExoticComponent<ArtifactCardProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/ArtifactCard/ArtifactCard.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./ArtifactCard.css";
+import "../../fonts/material-symbols.css";
+const baseClass = "ds-artifact-card";
+const ArtifactCard = React.forwardRef(
+  ({ title, meta, icon = "draft", open = false, className = "", ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      ...rest,
+      type: "button",
+      className: [baseClass, open && `${baseClass}--open`, className].filter(Boolean).join(" "),
+      "aria-pressed": open,
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: `${baseClass}__mark material-symbols-rounded`, "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: `${baseClass}__mark`, children: icon }),
+        /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+          /* @__PURE__ */ jsx("span", { className: `${baseClass}__title`, children: title }),
+          meta && /* @__PURE__ */ jsx("span", { className: `${baseClass}__meta`, children: meta })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: `${baseClass}__cue material-symbols-rounded`, "aria-hidden": "true", children: open ? "close" : "open_in_new_down" })
+      ]
+    }
+  )
+);
+ArtifactCard.displayName = "ArtifactCard";
+export {
+  ArtifactCard
+};

package/components/ArtifactPanel/ArtifactPanel.css

@@ -0,0 +1,159 @@
+/* ============================================
+   ARTIFACT PANEL COMPONENT
+   The surface a chat opens beside the conversation to show something it
+   made. A header names the artifact and carries its controls; the body is
+   the preview (live content, or a sandboxed frame) or the source.
+   Deliberately surface-less, like AgentRail and ThreadPanel — the host
+   paints the card it sits in, and decides where that card goes.
+
+   One scroll region only: the body. The header stays put, so the controls
+   never leave with the content.
+   ============================================ */
+
+/* Base */
+
+.ds-artifact-panel {
+  /* Width, height and padding combine on the root, so the component declares
+     its own sizing model rather than leaning on a host reset. */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ============================================
+   HEADER — the artifact's name, then its controls
+   ============================================ */
+
+/* The controls stand --padding-300 in from the top and trailing edges, the
+   inset AgentRail gives its own corner control, so the two panels that
+   share a chat's trailing seat put their close in the same place and a
+   rounded host card has room to turn its corner around it. */
+.ds-artifact-panel__header {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-300);
+  min-width: 0;
+  padding: var(--padding-300) var(--padding-300) var(--padding-300)
+    var(--padding-400);
+  border-bottom: var(--border-025) solid var(--color-bg-container-border);
+}
+
+.ds-artifact-panel__heading {
+  display: flex;
+  flex: 1;
+  align-items: baseline;
+  gap: var(--gap-200);
+  min-width: 0;
+}
+
+/* The mark sits on the row's centre line while the name and its meta share
+   a baseline. */
+.ds-artifact-panel__icon {
+  --icon-size: var(--icon-size-500);
+  display: inline-flex;
+  flex: none;
+  align-self: center;
+  color: var(--color-icon-secondary);
+}
+
+/* ChatHeader's title face, so the two headers read as one line of type.
+   The name outranks its meta when the row runs short: the meta carries a
+   shrink factor large enough to give way entirely before the name loses a
+   letter. */
+.ds-artifact-panel__title {
+  flex: 0 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-title-body-family);
+  font-size: var(--font-title-body-size);
+  font-weight: var(--font-title-body-weight);
+  line-height: var(--font-title-body-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-artifact-panel__meta {
+  flex: 0 1000 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-caption-family);
+  font-size: var(--font-caption-size);
+  font-weight: var(--font-caption-weight);
+  line-height: var(--font-caption-line-height);
+  color: var(--color-text-tertiary);
+}
+
+.ds-artifact-panel__controls {
+  display: flex;
+  flex: none;
+  align-items: center;
+  /* The row is the buttons' height whatever it holds: the view switch
+     stands a hair taller than a button, and a header that grew with it
+     would move every control when an artifact with source took the stage. */
+  height: 40px;
+  gap: var(--gap-100);
+  min-width: 0;
+}
+
+/* The view switch stands a beat clear of the icon buttons it leads. */
+.ds-artifact-panel__controls > .ds-segmented-control {
+  margin-inline-end: var(--gap-100);
+}
+
+/* ============================================
+   BODY — the preview or the source
+   ============================================ */
+
+.ds-artifact-panel__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* Live content scrolls inside the body and brings its own padding: a
+   dashboard wants an inset, a full-bleed page does not. */
+.ds-artifact-panel__content,
+.ds-artifact-panel__code {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  /* ThreadPanel's tucked-away thin scrollbar: no track fill, the thumb
+     showing only while the region is hovered or scrolled from the keyboard. */
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.ds-artifact-panel__content:hover,
+.ds-artifact-panel__content:focus-within,
+.ds-artifact-panel__code:hover,
+.ds-artifact-panel__code:focus-within {
+  scrollbar-color: var(--color-bg-container-border) transparent;
+}
+
+.ds-artifact-panel__code {
+  padding: var(--padding-400);
+}
+
+/* A framed document is its own page: it fills the body edge to edge and
+   owns its own scrolling. */
+.ds-artifact-panel__frame {
+  display: block;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+  border: none;
+}