rift-ds 1.6.0 → 1.8.0

package/chat/AssistantTurn.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { AgentStatus } from "../components/AgentStatus/AgentStatus.js";
+import { CodeBlock } from "../components/CodeBlock/CodeBlock.js";
+import { ChatMessage } from "../components/ChatMessage/ChatMessage.js";
+import { Prose } from "../components/Prose/Prose.js";
+import { Reasoning } from "../components/Reasoning/Reasoning.js";
+import { useChatWidget } from "./context.js";
+import { DOCK_QUERY } from "./queries.js";
+import { FollowupSuggestions } from "./FollowupSuggestions.js";
+import { ResponseActions } from "./ResponseActions.js";
+import { TurnCard } from "./TurnContent.js";
+function MarkdownLink({ href, children }) {
+  const { view, setOpen, renderLink, isInternalHref } = useChatWidget();
+  if (!href || !isInternalHref(href)) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(Fragment, { children: renderLink({
+    href,
+    children,
+    onNavigate: () => {
+      if (view === "full" || !window.matchMedia(DOCK_QUERY).matches) setOpen(false);
+    }
+  }) });
+}
+const hastText = (node) => node.type === "text" ? node.value ?? "" : (node.children ?? []).map(hastText).join("");
+function MarkdownPre({ node, children, ...props }) {
+  const code = node?.children?.find(
+    (child) => child.type === "element" && child.tagName === "code"
+  );
+  if (!code) return /* @__PURE__ */ jsx("pre", { ...props, children });
+  const classes = code.properties?.className;
+  const language = (Array.isArray(classes) ? classes : []).map(String).find((name) => name.startsWith("language-"))?.slice("language-".length);
+  return /* @__PURE__ */ jsx(CodeBlock, { code: hastText(code).replace(/\n$/, ""), language });
+}
+const markdownComponents = {
+  a: MarkdownLink,
+  pre: MarkdownPre,
+  table: ({ children, ...props }) => /* @__PURE__ */ jsx("table", { tabIndex: 0, ...props, children })
+};
+function AssistantTurn({ turn, live }) {
+  const thinking = live?.phase === "thinking";
+  const tracePoints = live ? live.tracePoints : turn?.tracePoints ?? [];
+  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;
+  return /* @__PURE__ */ jsx(
+    ChatMessage,
+    {
+      role: "assistant",
+      showActions: true,
+      actions: turn && turn.text !== "" ? /* @__PURE__ */ jsx(ResponseActions, { turn }) : void 0,
+      footer: turn?.followups?.length ? /* @__PURE__ */ jsx(
+        FollowupSuggestions,
+        {
+          turnId: turn.id,
+          suggestions: turn.followups,
+          entrance: turn.id === freshFollowupsId
+        }
+      ) : followupsPending && turn ? /* @__PURE__ */ jsx(FollowupSuggestions, { turnId: turn.id, suggestions: [], pending: true }) : void 0,
+      children: /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__response", children: [
+        (thinking || tracePoints.length > 0) && /* @__PURE__ */ jsx(
+          Reasoning,
+          {
+            streaming: thinking,
+            summaryOnly: tracePoints.length === 0,
+            duration: durationSeconds,
+            summary: thinking && live ? /* @__PURE__ */ jsx(AgentStatus, { state: "working", label: live.statusLabel }) : void 0,
+            children: tracePoints.length > 0 && /* @__PURE__ */ jsx("ul", { children: tracePoints.map((point, index) => /* @__PURE__ */ jsx("li", { children: point }, `${index}-${point.slice(0, 24)}`)) })
+          }
+        ),
+        turn?.content,
+        turn?.card && /* @__PURE__ */ jsx(TurnCard, { card: turn.card }),
+        text !== "" && /* @__PURE__ */ jsx(Prose, { children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, children: text }) })
+      ] })
+    }
+  );
+}
+export {
+  AssistantTurn
+};

package/chat/ChatAgentPane.css

@@ -0,0 +1,56 @@
+/* The built-in agent pane. The rail owns its shell; this only says how it
+   sits in the widget's bottom sheet, where it fills the width rather than
+   holding its own column and the sheet's rounded top edge is the surface. */
+.ds-chat-agent-pane--sheet {
+  width: 100%;
+}
+
+/* The pane furniture a host's panes commonly carry: a date heading over a
+   run of rows, and a small card. Host content, offered as classes rather
+   than components so a pane stays whatever the host writes. */
+.ds-chat-agent-pane__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-100);
+}
+
+.ds-chat-agent-pane__group + .ds-chat-agent-pane__group,
+.ds-chat-agent-pane__card + .ds-chat-agent-pane__group {
+  margin-top: var(--gap-400);
+}
+
+.ds-chat-agent-pane__heading {
+  font-family: var(--font-overline-family);
+  font-size: var(--font-overline-size);
+  font-weight: var(--font-overline-weight);
+  line-height: var(--font-overline-line-height);
+  letter-spacing: var(--font-overline-letter-spacing);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  padding: var(--padding-100) var(--padding-200);
+  margin: 0;
+}
+
+.ds-chat-agent-pane__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200);
+  padding: var(--padding-300);
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-400);
+}
+
+.ds-chat-agent-pane__card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap-300);
+}
+
+.ds-chat-agent-pane__card-label {
+  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);
+}

package/chat/ChatAgentPane.d.ts

@@ -0,0 +1,21 @@
+import { AgentRailProfile, AgentRailTab } from '../components/AgentRail/AgentRail';
+export interface ChatAgentPaneProps {
+    /** The agent this pane belongs to: the portrait block at the top. */
+    profile: AgentRailProfile;
+    /** The panes, in display order: activity, approvals, automations, personalisation, or whatever the agent has. */
+    tabs: AgentRailTab[];
+    /** The tab on stage, when the host owns the state; otherwise the pane keeps its own. */
+    activeTab?: string;
+    /** Fires with the chosen tab's id. */
+    onTabChange?: (id: string) => void;
+    /** The widget seated the pane as a bottom sheet, where it fills the width instead of holding its own column. */
+    overlay: boolean;
+}
+/**
+ * The built-in agent pane: an AgentRail the widget seats on the
+ * conversation's trailing edge (inline at 860px and up, a bottom sheet
+ * below). A host hands it the agent's profile and panes; the widget owns
+ * whether it is up, so `onCollapse` is deliberately unwired here: the
+ * header's agent toggle is the one control, both ways.
+ */
+export declare function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay }: ChatAgentPaneProps): import("react").JSX.Element;

package/chat/ChatAgentPane.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { AgentRail } from "../components/AgentRail/AgentRail.js";
+import "./ChatAgentPane.css";
+function ChatAgentPane({ profile, tabs, activeTab, onTabChange, overlay }) {
+  const [ownTab, setOwnTab] = useState(tabs[0]?.id ?? "");
+  const current = activeTab ?? ownTab;
+  return /* @__PURE__ */ jsx(
+    AgentRail,
+    {
+      className: overlay ? "ds-chat-agent-pane--sheet" : void 0,
+      profile,
+      tabs,
+      activeTab: current,
+      onTabChange: (id) => {
+        setOwnTab(id);
+        onTabChange?.(id);
+      }
+    }
+  );
+}
+export {
+  ChatAgentPane
+};

package/chat/ChatLauncher.d.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react';
+import { AiButtonSummary } from '../components/AiButton/AiButton';
+import { ChatWidgetProps } from './ChatWidget';
+/** The id the panel carries, for a host control's `aria-controls`. */
+export declare const CHAT_PANEL_ID = "ds-chat-panel";
+export interface ChatLauncherProps {
+    /** The floating button's text. */
+    label?: string;
+    /** The button's icon. */
+    icon?: string;
+    /**
+     * A TLDR panel the button summons on hover: a pre-written summary and
+     * prompt chips. A tapped chip opens the chat and sends the chip's
+     * `prompt`. Hover-capable devices only: the launcher never renders it on
+     * touch, and never in server HTML.
+     */
+    summary?: AiButtonSummary & {
+        chips?: {
+            id: string;
+            label: string;
+            prompt: string;
+        }[];
+    };
+    /** Render nothing at all: for routes that carry no chrome. */
+    hidden?: boolean;
+    /** The panel's DOM id, for a host control's `aria-controls`. */
+    panelId?: string;
+    /**
+     * The attribute the launcher writes on `<html>` to say how the panel sits
+     * (`docked`, `docked-left`, `takeover`), so the host's stylesheet can pad
+     * the page or hide it. `false` writes none.
+     */
+    hostAttribute?: string | false;
+    /** Accessible name for the panel. */
+    panelLabel?: string;
+    /** Everything the widget takes. The launcher sets the responsive ones itself. */
+    widget?: Omit<ChatWidgetProps, 'fullscreenEnabled' | 'placementEnabled' | 'compact' | 'phone'>;
+    /** Rendered inside the panel after the widget: for a host's extra chrome. */
+    children?: ReactNode;
+}
+/**
+ * The site-wide panel. Mount it once, after the page content, so it sits
+ * last in the tab order and never remounts on navigation, which is what
+ * lets a mid-stream answer keep streaming while the visitor reads a
+ * different page.
+ *
+ * Docked (wide screens) it is a non-modal complementary region: no scrim,
+ * no focus trap, the page stays fully usable beside it. Overlaying (below
+ * the threshold, and in fullscreen view) it is modal: scrim, focus trap,
+ * body scroll locked, Escape closes.
+ *
+ * The visitor picks the seat from the header's Chat position menu: either
+ * edge for the dock (and for the overlay below the threshold), or floating,
+ * a non-modal card that is moved by its header and sized by its edges.
+ * Phones get none of it: the takeover is the only form there.
+ *
+ * The host contract: the launcher sets `hostAttribute` on `<html>` and
+ * writes the chosen dock width to `--ds-chat-width` there; a host's
+ * stylesheet pads the page beside a docked panel and hides it behind a
+ * takeover from those two facts (the package's own stylesheet does not
+ * touch the host's body). The panel's geometry reads `--ds-chat-width`,
+ * `--ds-chat-inset` and `--ds-chat-float-height`, defaulted on `:root`.
+ */
+export declare function ChatLauncher({ label, icon, summary, hidden, panelId, hostAttribute, panelLabel, widget, children, }: ChatLauncherProps): import("react").JSX.Element | null;

package/chat/ChatLauncher.js

@@ -0,0 +1,347 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useSyncExternalStore, useLayoutEffect, useRef, useEffect, useState } from "react";
+import { useScrollLock } from "../behaviors/useScrollLock.js";
+import { AiButton } from "../components/AiButton/AiButton.js";
+import { ChatWidget } from "./ChatWidget.js";
+import { useChatWidget } from "./context.js";
+import { isFloatDragStart, FLOAT_EDGE_GAP, FLOAT_MAX_SCALE, dockWidthFromDrag, clampFloatPosition } from "./placement.js";
+import { DOCK_QUERY, TAKEOVER_QUERY } from "./queries.js";
+import "./ChatWidget.css";
+const CHAT_PANEL_ID = "ds-chat-panel";
+const FLOAT_GRIPS = [
+  { dir: "n", dx: 0, dy: -1 },
+  { dir: "s", dx: 0, dy: 1 },
+  { dir: "e", dx: 1, dy: 0 },
+  { dir: "w", dx: -1, dy: 0 },
+  { dir: "ne", dx: 1, dy: -1 },
+  { dir: "nw", dx: -1, dy: -1 },
+  { dir: "se", dx: 1, dy: 1 },
+  { dir: "sw", dx: -1, dy: 1 }
+];
+const viewportBounds = () => ({
+  left: 0,
+  top: 0,
+  right: window.innerWidth,
+  bottom: window.innerHeight
+});
+const subscribeQuery = (query) => (onChange) => {
+  const media = window.matchMedia(query);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+};
+const subscribeDock = subscribeQuery(DOCK_QUERY);
+const readDocked = () => window.matchMedia(DOCK_QUERY).matches;
+const subscribeTakeover = subscribeQuery(TAKEOVER_QUERY);
+const readTakeover = () => window.matchMedia(TAKEOVER_QUERY).matches;
+function ChatLauncher({
+  label = "Ask",
+  icon = "forum",
+  summary,
+  hidden = false,
+  panelId = CHAT_PANEL_ID,
+  hostAttribute = "data-chat",
+  panelLabel = "Chat",
+  widget,
+  children
+}) {
+  const { open, setOpen, panelPhase, view, side, floating, returnFocusRef, send } = useChatWidget();
+  const launchSuggestion = (id) => {
+    const chip = summary?.chips?.find((c) => c.id === id);
+    if (!chip) return;
+    setOpen(true);
+    send(chip.prompt);
+  };
+  const docked = useSyncExternalStore(subscribeDock, readDocked, () => false);
+  const takeover = useSyncExternalStore(subscribeTakeover, readTakeover, () => false);
+  const isFull = view === "full" || takeover;
+  const isFloating = floating && !isFull;
+  const isDocked = docked && !isFull && !isFloating;
+  const modal = open && !hidden && (isFull || !docked && !isFloating);
+  const showPanel = open && !hidden;
+  const renderPanel = (open || panelPhase === "closing") && !hidden;
+  useLayoutEffect(() => {
+    if (!hostAttribute) return;
+    const root = document.documentElement;
+    if (showPanel && takeover) {
+      const scrollY = window.scrollY;
+      root.setAttribute(hostAttribute, "takeover");
+      window.scrollTo({ top: 0, behavior: "instant" });
+      return () => {
+        root.removeAttribute(hostAttribute);
+        window.scrollTo({ top: scrollY, behavior: "instant" });
+      };
+    }
+    if (showPanel && isDocked) {
+      root.setAttribute(hostAttribute, side === "left" ? "docked-left" : "docked");
+      return () => root.removeAttribute(hostAttribute);
+    }
+    root.removeAttribute(hostAttribute);
+  }, [showPanel, isDocked, side, takeover, hostAttribute]);
+  useScrollLock(modal && !takeover);
+  const panelRef = useRef(null);
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (wasOpen.current && !open) {
+      const target = returnFocusRef.current;
+      if (target && target.isConnected) target.focus();
+    }
+    wasOpen.current = open;
+  }, [open, returnFocusRef]);
+  const dragRef = useRef(null);
+  const [resizing, setResizing] = useState(false);
+  const beginResize = (e) => {
+    if (e.pointerType === "mouse" && e.button !== 0 || dragRef.current) return;
+    const rect = panelRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    dragRef.current = { startX: e.clientX, width: rect.width };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setResizing(true);
+    document.documentElement.setAttribute("data-chat-resizing", "");
+  };
+  const moveResize = (e) => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    const width = dockWidthFromDrag(drag.width, e.clientX - drag.startX, side);
+    document.documentElement.style.setProperty("--ds-chat-width", `${width}px`);
+  };
+  const endResize = () => {
+    dragRef.current = null;
+    setResizing(false);
+    document.documentElement.removeAttribute("data-chat-resizing");
+  };
+  const [floatPos, setFloatPos] = useState(null);
+  const moveRef = useRef(null);
+  const clampFloat = (x, y, rect) => clampFloatPosition(x, y, rect, viewportBounds());
+  const beginMove = (e) => {
+    if (!isFloating || moveRef.current) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    if (!isFloatDragStart(e.target)) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    moveRef.current = { dx: e.clientX - rect.left, dy: e.clientY - rect.top, x: rect.left, y: rect.top };
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    document.documentElement.setAttribute("data-chat-resizing", "");
+  };
+  const moveMove = (e) => {
+    const move = moveRef.current;
+    if (!move) return;
+    const node = e.currentTarget;
+    const next = clampFloat(e.clientX - move.dx, e.clientY - move.dy, node.getBoundingClientRect());
+    move.x = next.x;
+    move.y = next.y;
+    node.style.setProperty("--ds-chat-float-x", `${next.x}px`);
+    node.style.setProperty("--ds-chat-float-y", `${next.y}px`);
+  };
+  const endMove = () => {
+    const move = moveRef.current;
+    if (!move) return;
+    moveRef.current = null;
+    setFloatPos({ x: move.x, y: move.y });
+    document.documentElement.removeAttribute("data-chat-resizing");
+  };
+  const [floatSize, setFloatSize] = useState(null);
+  const sizeRef = useRef(null);
+  const beginSize = (e, dx, dy) => {
+    if (e.pointerType === "mouse" && e.button !== 0 || sizeRef.current) return;
+    const rect = panelRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    e.stopPropagation();
+    const root = getComputedStyle(document.documentElement);
+    const inset = parseFloat(root.getPropertyValue("--ds-chat-inset")) || 0;
+    const minW = parseFloat(root.getPropertyValue("--ds-chat-width")) || rect.width;
+    const restH = parseFloat(root.getPropertyValue("--ds-chat-float-height")) || rect.height;
+    const minH = Math.min(restH, window.innerHeight - inset * 2);
+    sizeRef.current = {
+      dx,
+      dy,
+      startX: e.clientX,
+      startY: e.clientY,
+      rect,
+      minW,
+      minH,
+      next: { x: rect.left, y: rect.top, w: rect.width, h: rect.height }
+    };
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch {
+    }
+    document.documentElement.setAttribute("data-chat-resizing", "");
+  };
+  const moveSize = (e) => {
+    const drag = sizeRef.current;
+    const node = panelRef.current;
+    if (!drag || !node) return;
+    const { rect, next } = drag;
+    if (drag.dx !== 0) {
+      const room = drag.dx > 0 ? window.innerWidth - FLOAT_EDGE_GAP - rect.left : rect.right - FLOAT_EDGE_GAP;
+      const max = Math.max(drag.minW, Math.min(drag.minW * FLOAT_MAX_SCALE, room));
+      next.w = Math.round(
+        Math.min(max, Math.max(drag.minW, rect.width + drag.dx * (e.clientX - drag.startX)))
+      );
+      next.x = Math.round(drag.dx > 0 ? rect.left : rect.right - next.w);
+    }
+    if (drag.dy !== 0) {
+      const room = drag.dy > 0 ? window.innerHeight - FLOAT_EDGE_GAP - rect.top : rect.bottom - FLOAT_EDGE_GAP;
+      const max = Math.max(drag.minH, Math.min(drag.minH * FLOAT_MAX_SCALE, room));
+      next.h = Math.round(
+        Math.min(max, Math.max(drag.minH, rect.height + drag.dy * (e.clientY - drag.startY)))
+      );
+      next.y = Math.round(drag.dy > 0 ? rect.top : rect.bottom - next.h);
+    }
+    node.style.setProperty("--ds-chat-float-x", `${next.x}px`);
+    node.style.setProperty("--ds-chat-float-y", `${next.y}px`);
+    node.style.setProperty("--ds-chat-float-w", `${next.w}px`);
+    node.style.setProperty("--ds-chat-float-h", `${next.h}px`);
+  };
+  const endSize = () => {
+    const drag = sizeRef.current;
+    if (!drag) return;
+    sizeRef.current = null;
+    setFloatPos({ x: drag.next.x, y: drag.next.y });
+    setFloatSize({ w: drag.next.w, h: drag.next.h });
+    document.documentElement.removeAttribute("data-chat-resizing");
+  };
+  useEffect(() => {
+    if (!isFloating || !floatPos) return;
+    const onResize = () => {
+      const rect = panelRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setFloatPos((pos) => {
+        if (!pos) return pos;
+        const next = clampFloat(pos.x, pos.y, rect);
+        return next.x === pos.x && next.y === pos.y ? pos : next;
+      });
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [isFloating, floatPos]);
+  if (hidden) return null;
+  if (!renderPanel) {
+    return /* @__PURE__ */ jsx("div", { className: "ds-chat-launcher__fab", children: /* @__PURE__ */ jsx(
+      AiButton,
+      {
+        label,
+        icon,
+        "aria-expanded": false,
+        "aria-controls": panelId,
+        summary: summary ? {
+          overline: summary.overline,
+          title: summary.title,
+          caption: summary.caption,
+          text: summary.text,
+          suggestions: summary.suggestions ?? summary.chips?.map(({ id, label: chipLabel }) => ({ id, label: chipLabel }))
+        } : void 0,
+        onSummarySuggestion: launchSuggestion,
+        onClick: (event) => {
+          returnFocusRef.current = event.currentTarget;
+          setOpen(true);
+        }
+      }
+    ) });
+  }
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      setOpen(false);
+      return;
+    }
+    if (modal && event.key === "Tab" && panelRef.current) {
+      const focusables = panelRef.current.querySelectorAll(
+        'button:not([disabled]), a[href], textarea:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusables.length === 0) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  const panelClass = [
+    "ds-chat-launcher__panel",
+    side === "left" ? "ds-chat-launcher__panel--left" : "",
+    isFloating ? "ds-chat-launcher__panel--floating" : "",
+    isFull ? "ds-chat-launcher__panel--full" : "",
+    panelPhase === "closing" ? "ds-chat-launcher__panel--closing" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    modal && !isFull && /* @__PURE__ */ jsx("div", { className: "ds-chat-launcher__scrim", onClick: () => setOpen(false), "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        id: panelId,
+        className: panelClass,
+        style: isFloating && (floatPos || floatSize) ? {
+          ...floatPos && {
+            "--ds-chat-float-x": `${floatPos.x}px`,
+            "--ds-chat-float-y": `${floatPos.y}px`
+          },
+          ...floatSize && {
+            "--ds-chat-float-w": `${floatSize.w}px`,
+            "--ds-chat-float-h": `${floatSize.h}px`
+          }
+        } : void 0,
+        onPointerDown: beginMove,
+        onPointerMove: moveMove,
+        onPointerUp: endMove,
+        onPointerCancel: endMove,
+        role: modal ? "dialog" : "complementary",
+        "aria-modal": modal || void 0,
+        "aria-label": panelLabel,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            ChatWidget,
+            {
+              ...widget,
+              fullscreenEnabled: !takeover,
+              placementEnabled: !takeover,
+              compact: takeover || !isFull,
+              phone: takeover
+            }
+          ),
+          children,
+          isFloating && FLOAT_GRIPS.map(({ dir, dx, dy }) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "ds-chat-launcher__float-grip",
+              "data-dir": dir,
+              "aria-hidden": "true",
+              onPointerDown: (e) => beginSize(e, dx, dy),
+              onPointerMove: moveSize,
+              onPointerUp: endSize,
+              onPointerCancel: endSize
+            },
+            dir
+          ))
+        ]
+      }
+    ),
+    showPanel && isDocked && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [
+          "ds-chat-launcher__dock-handle",
+          side === "left" ? "ds-chat-launcher__dock-handle--left" : "",
+          resizing ? "ds-chat-launcher__dock-handle--resizing" : ""
+        ].filter(Boolean).join(" "),
+        "aria-hidden": "true",
+        onPointerDown: beginResize,
+        onPointerMove: moveResize,
+        onPointerUp: endResize,
+        onPointerCancel: endResize
+      }
+    )
+  ] });
+}
+export {
+  CHAT_PANEL_ID,
+  ChatLauncher
+};

package/chat/ChatProvider.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { ChatCardRenderers, ChatLinkRenderer, FeedbackSink } from './context';
+import { FollowupsSource } from './followups';
+import { ChatPlacement } from './placement';
+import { ThreadsOptions } from './threads';
+import { ChatTransport } from './types';
+import { ChatPlaceholderCopy } from './useChat';
+export interface ChatProviderProps {
+    /**
+     * Where the conversation goes. Defaults to the fetch transport against
+     * `endpoint`, carrying the visitor's model pick. A script from
+     * `scriptChat()` runs the widget with no backend at all.
+     */
+    transport?: ChatTransport;
+    /** The endpoint the default transport posts to. */
+    endpoint?: string;
+    /** The seat the panel opens in. */
+    defaultPlacement?: ChatPlacement;
+    /**
+     * Where follow-up questions come from after an answer commits: a source
+     * function, an endpoint for the built-in fetcher, or `false` for none.
+     * Defaults to the fetcher against `/api/chat/followups`.
+     */
+    followups?: FollowupsSource | string | false;
+    /** The written questions offered when the source returns none. */
+    fallbackFollowups?: readonly string[];
+    /**
+     * Where a thumbs verdict goes: a sink function, an endpoint for the
+     * built-in poster, or `false` to hide the thumbs. Defaults to the poster
+     * against `/api/chat/feedback`. Thumbs only ever show on a turn the
+     * server logged (one with an exchange id).
+     */
+    feedback?: FeedbackSink | string | false;
+    /** Draws `card` events by kind. */
+    renderers?: ChatCardRenderers;
+    /** Renders a same-site link in an answer. The default is a plain anchor; a Next.js host passes its Link. */
+    renderLink?: ChatLinkRenderer;
+    /** Which hrefs in an answer become links. Everything else renders as text. */
+    isInternalHref?: (href: string) => boolean;
+    /** Seeds the thread lifecycle behind the `threads` and `tabs` slots. */
+    threads?: ThreadsOptions;
+    /** Replacement copy for the hook's placeholder replies. */
+    placeholders?: Partial<ChatPlaceholderCopy>;
+    children: ReactNode;
+}
+/**
+ * The chat's whole client state. Mount it once, high in the tree: a root
+ * layout never remounts on client-side navigation, so the transcript, a
+ * stream in flight, the half-typed draft and the open state survive
+ * clicking between pages for free. A hard reload starts clean by design:
+ * no storage, no persistence.
+ */
+export declare function ChatProvider({ transport, endpoint, defaultPlacement, followups, fallbackFollowups, feedback, renderers, renderLink, isInternalHref, threads: threadsOptions, placeholders, children, }: ChatProviderProps): import("react").JSX.Element;