rift-ds 1.6.0 → 1.8.0

package/chat/ChatWidget.d.ts

@@ -0,0 +1,113 @@
+import { ReactNode } from 'react';
+import { AgentRailProfile, AgentRailTab } from '../components/AgentRail/AgentRail';
+import { MentionSource } from '../components/Mention/Mention';
+import { ChatThreadsProps } from './ChatThreads';
+import { ChatModelOption, Starter } from './types';
+/** A rail slot: the widget's own panel, or a render prop for a custom one. */
+export type RailSlot = boolean | ((ctx: {
+    overlay: boolean;
+    close: () => void;
+}) => ReactNode);
+/** What the built-in agent pane shows. */
+export interface ChatAgentOptions {
+    /** The agent's portrait block. Defaults to the widget's title with a "Connected" status. A profile with neither `avatar` nor `avatarSrc` wears a PixelAvatar seeded by the widget's title, the mark the header toggle wears. */
+    profile?: AgentRailProfile;
+    /** The panes, in display order. */
+    tabs: AgentRailTab[];
+    /** Open the pane at mount, where the panel is wide enough to seat it inline. Off by default: the header button opens it. */
+    defaultOpen?: boolean;
+}
+/** Props owned by ChatWidget itself. */
+export interface ChatWidgetProps {
+    /** Show the expand toggle. A host whose stage is always a takeover hides it. */
+    fullscreenEnabled?: boolean;
+    /** Show the header's close button. A host that seats the chat as the page
+        itself rather than as a panel over one has nothing to close back to,
+        so it turns this off. */
+    closeEnabled?: boolean;
+    /** Show the header's Chat position menu (dock right, dock left, floating). Off by default: a host turns it on only when it implements the seats the menu offers, as ChatLauncher does. */
+    placementEnabled?: boolean;
+    /** Narrow insets for phone-width hosts. */
+    compact?: boolean;
+    /** The host is a phone viewport, where the soft keyboard will claim the
+        lower half of the screen the moment the composer is focused. The
+        welcome screen stacks instead of centring the composer: greeting in
+        the middle of the empty thread, starters directly above the composer,
+        composer pinned to the bottom from the first paint. */
+    phone?: boolean;
+    /** The header brand name. */
+    title?: string;
+    /** The composer's placeholder text. */
+    placeholder?: string;
+    /** Show the conversation starters on the welcome screen. */
+    showStarters?: boolean;
+    /** The header mark's image src; null (the default) shows the name alone. */
+    logo?: string | null;
+    /** The welcome screen's line under the greeting. */
+    tagline?: string;
+    /** The conversation starters: a few pre-written questions. Each must fit the chip budget (SUGGESTION_MAX_CHARS); one that does not is dropped rather than clipped. */
+    starters?: Starter[];
+    /** Keys the starters' staged reveal: a new key replays the generation beat, the same key shows the set standing. A host whose starters follow the page passes the pathname. */
+    startersKey?: string;
+    /** Replaces the composer's leading actions (the model picker). */
+    composerActions?: ReactNode;
+    /** The models the picker offers. The pick rides on each send as a wire value; the server resolves it. Omit for no picker. */
+    models?: ChatModelOption[];
+    /** The picker's selection before the server has reported its default. Defaults to the first model. */
+    defaultModel?: string;
+    /** The one line a locked model shows in place of its description. */
+    lockedModelDescription?: string;
+    /** Let the visitor attach files: an attach button, paste, drop anywhere
+        on the chat, and long pastes folded into a tile. Files are read in the
+        browser for previews; what reaches the transport is names and kinds. */
+    fileAttachments?: boolean;
+    /** Most files the visitor may queue on one message. */
+    maxAttachments?: number;
+    /** Largest file the visitor may queue, in bytes. */
+    maxAttachmentBytes?: number;
+    /** What the visitor can reference while typing: one source per trigger
+        character, drawn as tags in the composer and in the sent bubble. */
+    mentions?: MentionSource[];
+    /** A session-history rail. `true` seats the built-in ChatThreads over the
+        provider's thread lifecycle; a render prop seats your own. Wide hosts
+        seat it as an inline left rail, narrow ones summon it from a header
+        hamburger as a slide-over sheet behind a scrim. */
+    threads?: RailSlot;
+    /** Props for the built-in threads rail when `threads` is `true`. */
+    threadsProps?: Omit<ChatThreadsProps, 'overlay' | 'close'>;
+    /** An open-sessions tab strip as its own row under the header. `true` seats the built-in ChatTabs; a node seats your own. */
+    tabs?: boolean | ReactNode;
+    /** A companion rail on the trailing edge, the mirror of `threads`: a render prop for your own pane, seated inline on a wide host and raised as a bottom sheet from a header button on a narrow one. For the built-in pane pass `agent` instead. */
+    aside?: (ctx: {
+        overlay: boolean;
+        close: () => void;
+    }) => ReactNode;
+    /** The built-in agent pane: who the agent is and what it has been doing. Seated like `aside`. */
+    agent?: ChatAgentOptions;
+    /** The composer's context note, naming what the chat is looking at. Omit for none. */
+    contextLabel?: string | null;
+    /** A widget slot on the welcome screen, under the composer and its
+        starters. It takes any content and keeps its natural height, so the
+        composer rides up by half of it instead of holding dead centre: the
+        empty chat reads as a home page rather than a blank prompt. It leaves
+        with the first message, like the rest of the welcome dressing. */
+    widgets?: ReactNode;
+    /** How the widget slot takes its room. `fit` keeps the welcome screen to
+        one viewport: the widgets hold their height and the composer rides up
+        to make room. `scroll` turns the welcome screen into a page: the
+        greeting and composer take the opening of the viewport, the widgets
+        run on below the fold, and the whole welcome scrolls as one. */
+    widgetsLayout?: 'fit' | 'scroll';
+    /** How wide the widget slot runs. `column` holds it to the composer's
+        bounding box; `wide` lets it run past them, for a dashboard. */
+    widgetsWidth?: 'column' | 'wide';
+    /** The quiet line pinned to the widget's floor: what the chat is and where its policy lives. */
+    disclaimer?: ReactNode;
+}
+/**
+ * The composed chat: header, thread, composer, starters, disclaimer, and the
+ * optional rails, filling whatever container hosts it (ChatLauncher's panel,
+ * 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, contextLabel, widgets, widgetsLayout, widgetsWidth, disclaimer, }: ChatWidgetProps): import("react").JSX.Element;

package/chat/ChatWidget.js

@@ -0,0 +1,495 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useSyncExternalStore, useRef, useEffect, useState, useId } from "react";
+import { AttachmentDropZone } from "../components/Attachment/AttachmentDropZone.js";
+import { AttachmentGroup } from "../components/Attachment/AttachmentGroup.js";
+import { useAttachments } from "../components/Attachment/useAttachments.js";
+import { ChatHeader } from "../components/ChatHeader/ChatHeader.js";
+import { ChatMessage } from "../components/ChatMessage/ChatMessage.js";
+import { ChatThread } from "../components/ChatThread/ChatThread.js";
+import { CircularButton } from "../components/CircularButton/CircularButton.js";
+import { PixelAvatar } from "../components/PixelAvatar/PixelAvatar.js";
+import { Composer } from "../components/Composer/Composer.js";
+import { DropdownMenu } from "../components/DropdownMenu/DropdownMenu.js";
+import { MentionText } from "../components/Mention/Mention.js";
+import { ModelPicker } from "../components/ModelPicker/ModelPicker.js";
+import { PromptSuggestions } from "../components/PromptSuggestions/PromptSuggestions.js";
+import { MOTION_SUGGESTIONS_THINK_MS, MOTION_SCROLL_SETTLE_MS } from "../tokens/motion.js";
+import { AssistantTurn } from "./AssistantTurn.js";
+import { ChatAgentPane } from "./ChatAgentPane.js";
+import { ChatTabs } from "./ChatTabs.js";
+import { ChatThreads } from "./ChatThreads.js";
+import { useChatWidget } from "./context.js";
+import { subscribeClock, readGreeting, serverGreeting } from "./greeting.js";
+import { CHAT_PLACEMENTS, chatPlacement } from "./placement.js";
+import { THREADS_RAIL_MIN_WIDTH, ASIDE_RAIL_MIN_WIDTH } from "./queries.js";
+import { fitsChip } from "./suggestions.js";
+import { TurnCard } from "./TurnContent.js";
+import "./ChatWidget.css";
+const DEFAULT_MAX_ATTACHMENTS = 10;
+const DEFAULT_MAX_ATTACHMENT_BYTES = 50 * 1024 * 1024;
+const LONG_PASTE_CHARS = 1200;
+const formatBytes = (bytes) => bytes >= 1024 * 1024 * 1024 ? `${Math.round(bytes / (1024 * 1024 * 1024))} GB` : `${Math.round(bytes / (1024 * 1024))} MB`;
+const withAgentMark = (profile, title) => profile.avatar || profile.avatarSrc ? profile : { ...profile, avatar: /* @__PURE__ */ jsx(PixelAvatar, { name: title, size: "lg", label: title }) };
+function ChatWidget({
+  fullscreenEnabled = true,
+  closeEnabled = true,
+  placementEnabled = false,
+  compact = false,
+  phone = false,
+  title = "Assistant",
+  placeholder = "Ask anything",
+  showStarters = true,
+  logo = null,
+  tagline = "How can I help you today?",
+  starters: startersInput,
+  startersKey = "",
+  composerActions,
+  models,
+  defaultModel,
+  lockedModelDescription = "Paused for today to stay in budget.",
+  fileAttachments = false,
+  maxAttachments = DEFAULT_MAX_ATTACHMENTS,
+  maxAttachmentBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
+  mentions,
+  threads,
+  threadsProps,
+  tabs,
+  aside,
+  agent,
+  contextLabel,
+  widgets,
+  widgetsLayout = "fit",
+  widgetsWidth = "column",
+  disclaimer = "Answers may be wrong."
+}) {
+  const {
+    turns,
+    live,
+    streaming,
+    modelPolicy,
+    chosenModel,
+    setChosenModel,
+    send,
+    stop,
+    reset,
+    open,
+    setOpen,
+    view,
+    setView,
+    placement,
+    setPlacement,
+    draft,
+    setDraft,
+    starterSeed,
+    starterRevealKey,
+    setStarterRevealKey
+  } = useChatWidget();
+  const lockedValues = modelPolicy?.locked ?? [];
+  const pick = chosenModel && !lockedValues.includes(chosenModel) ? chosenModel : null;
+  const pickerValue = pick ?? modelPolicy?.default ?? defaultModel ?? models?.[0]?.value;
+  const pickerModels = (models ?? []).map((option) => ({
+    value: option.value,
+    label: option.label,
+    description: lockedValues.includes(option.value) ? lockedModelDescription : option.description,
+    disabled: lockedValues.includes(option.value)
+  }));
+  const greeting = useSyncExternalStore(subscribeClock, readGreeting, serverGreeting);
+  const starters = (startersInput ?? []).filter((starter) => fitsChip(starter.label));
+  const composerRef = useRef(null);
+  const focusComposer = () => composerRef.current?.focus({ preventScroll: true });
+  useEffect(() => {
+    if (open) focusComposer();
+  }, [open]);
+  const queue = useAttachments({ maxCount: maxAttachments, maxSize: maxAttachmentBytes });
+  const attachHint = `Up to ${formatBytes(maxAttachmentBytes)} each · ${maxAttachments} files max`;
+  const handleSubmit = (value) => {
+    if (fileAttachments && queue.items.length > 0) {
+      const ready = queue.items.filter((item) => item.status === "ready");
+      if (send(value, { attachments: ready })) {
+        queue.take();
+        setDraft("");
+      }
+    } else if (send(value)) setDraft("");
+    focusComposer();
+  };
+  const isFull = view === "full";
+  const isEmpty = turns.length === 0 && !live;
+  const [stagedKey, setStagedKey] = useState(null);
+  const startersThinking = open && isEmpty && starterRevealKey !== startersKey;
+  const startersEntrance = startersThinking || stagedKey === startersKey;
+  useEffect(() => {
+    if (!(open && isEmpty && starterRevealKey !== startersKey)) return;
+    const timer = setTimeout(() => {
+      setStagedKey(startersKey);
+      setStarterRevealKey(startersKey);
+    }, MOTION_SUGGESTIONS_THINK_MS);
+    return () => clearTimeout(timer);
+  }, [open, isEmpty, starterRevealKey, setStarterRevealKey, startersKey]);
+  const renderThreads = threads === true ? (ctx) => /* @__PURE__ */ jsx(ChatThreads, { ...threadsProps, logoText: threadsProps?.logoText ?? title, ...ctx }) : threads || void 0;
+  const renderAside = aside ?? (agent ? (ctx) => /* @__PURE__ */ jsx(
+    ChatAgentPane,
+    {
+      profile: withAgentMark(agent.profile ?? { name: title, status: "Connected" }, title),
+      tabs: agent.tabs,
+      overlay: ctx.overlay
+    }
+  ) : void 0);
+  const tabsNode = tabs === true ? /* @__PURE__ */ jsx(ChatTabs, {}) : tabs || null;
+  const hasRails = Boolean(renderThreads || renderAside);
+  const [threadsOpen, setThreadsOpen] = useState(false);
+  const [asideOpen, setAsideOpen] = useState(Boolean(agent?.defaultOpen));
+  const railsHostRef = useRef(null);
+  const [threadsWide, setThreadsWide] = useState(false);
+  const [asideWide, setAsideWide] = useState(false);
+  const wasAsideWideRef = useRef(false);
+  useEffect(() => {
+    if (!hasRails) return;
+    const host = railsHostRef.current;
+    if (!host) return;
+    const measure = () => {
+      const width = host.clientWidth;
+      const wide = width >= THREADS_RAIL_MIN_WIDTH;
+      const asideRoom = width >= ASIDE_RAIL_MIN_WIDTH;
+      setThreadsWide(wide);
+      setAsideWide(asideRoom);
+      if (wide) setThreadsOpen(false);
+      if (wasAsideWideRef.current && !asideRoom) setAsideOpen(false);
+      wasAsideWideRef.current = asideRoom;
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [hasRails]);
+  const closeThreads = () => setThreadsOpen(false);
+  const asideId = useId();
+  const asideShown = Boolean(renderAside) && asideOpen;
+  const closeAside = () => setAsideOpen(false);
+  const toggleAside = () => setAsideOpen((current) => !current);
+  const startersNode = isEmpty && showStarters && starters.length > 0 && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__starters", children: /* @__PURE__ */ jsx(
+    PromptSuggestions,
+    {
+      layout: "stack",
+      ariaLabel: "Conversation starters",
+      pending: startersThinking,
+      entrance: startersEntrance,
+      suggestions: starters,
+      onValueChange: (id) => {
+        const starter = starters.find((s) => s.id === id);
+        if (starter && send(starter.label)) focusComposer();
+      }
+    }
+  ) });
+  const widgetsNode = isEmpty && widgets && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__widgets", children: widgets });
+  const headerActions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !(renderThreads && threadsWide) && /* @__PURE__ */ jsx(
+      CircularButton,
+      {
+        icon: "edit_square",
+        variant: "tertiary",
+        ariaLabel: "New chat",
+        tooltipPosition: "bottom",
+        onClick: () => {
+          reset();
+          setDraft("");
+          focusComposer();
+        }
+      }
+    ),
+    renderAside && /* @__PURE__ */ jsx(
+      CircularButton,
+      {
+        icon: /* @__PURE__ */ jsx(PixelAvatar, { name: title, size: "sm" }),
+        variant: "tertiary",
+        className: asideShown ? "ds-chat-widget__agent-toggle--on" : void 0,
+        ariaLabel: asideShown ? "Hide the agent panel" : "Show the agent panel",
+        tooltipPosition: "bottom",
+        "aria-expanded": asideShown,
+        "aria-controls": asideShown ? asideId : void 0,
+        onClick: toggleAside
+      }
+    ),
+    placementEnabled && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ds-chat-widget__placement-menu",
+        onKeyDown: (event) => {
+          if (event.key === "Escape" && event.currentTarget.querySelector('[aria-expanded="true"]')) {
+            event.stopPropagation();
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          DropdownMenu,
+          {
+            align: "end",
+            trigger: /* @__PURE__ */ jsx(
+              CircularButton,
+              {
+                icon: chatPlacement(placement).icon,
+                variant: "tertiary",
+                ariaLabel: "Chat position",
+                tooltipPosition: "bottom",
+                disabled: isFull
+              }
+            ),
+            items: [
+              {
+                type: "group",
+                label: "Chat position",
+                items: CHAT_PLACEMENTS.map(({ id, label, icon }) => ({
+                  label,
+                  icon,
+                  selected: placement === id,
+                  onClick: () => setPlacement(id)
+                }))
+              }
+            ]
+          }
+        )
+      }
+    ),
+    fullscreenEnabled && /* @__PURE__ */ jsx(
+      CircularButton,
+      {
+        icon: isFull ? "close_fullscreen" : "open_in_full",
+        variant: "tertiary",
+        ariaLabel: isFull ? "Exit full screen" : "Enter full screen",
+        tooltipPosition: "bottom",
+        onClick: () => setView(isFull ? "panel" : "full")
+      }
+    ),
+    closeEnabled && /* @__PURE__ */ jsx(
+      CircularButton,
+      {
+        icon: "close",
+        variant: "tertiary",
+        ariaLabel: "Close chat",
+        tooltipPosition: "bottom",
+        onClick: () => setOpen(false)
+      }
+    )
+  ] });
+  const ChatRoot = fileAttachments ? AttachmentDropZone : "div";
+  const dropProps = fileAttachments ? { onFilesSelected: queue.add, hint: attachHint } : {};
+  const [rootScrolling, setRootScrolling] = useState(false);
+  const rootSettleTimer = useRef(void 0);
+  const handleRootScroll = () => {
+    if (widgetsLayout !== "scroll") return;
+    setRootScrolling(true);
+    window.clearTimeout(rootSettleTimer.current);
+    rootSettleTimer.current = window.setTimeout(() => setRootScrolling(false), MOTION_SCROLL_SETTLE_MS);
+  };
+  useEffect(() => () => window.clearTimeout(rootSettleTimer.current), []);
+  const chatColumn = /* @__PURE__ */ jsxs(
+    ChatRoot,
+    {
+      ...dropProps,
+      className: `ds-chat-widget ${renderThreads ? "ds-chat-widget--with-threads" : ""}`,
+      "data-compact": compact || void 0,
+      "data-phone": phone || void 0,
+      "data-widgets": widgetsNode ? widgetsLayout : void 0,
+      "data-widgets-wide": widgetsNode && widgetsWidth === "wide" ? "" : void 0,
+      "data-scrolling": widgetsNode && widgetsLayout === "scroll" && rootScrolling || void 0,
+      onScroll: handleRootScroll,
+      "data-lifted-actions": asideShown && asideWide || void 0,
+      onKeyDown: (e) => {
+        if (e.key === "Escape" && (threadsOpen || asideShown && !asideWide)) {
+          e.stopPropagation();
+          if (threadsOpen) closeThreads();
+          else closeAside();
+          return;
+        }
+        if (e.key === "Escape" && isFull) {
+          e.stopPropagation();
+          setView("panel");
+        }
+      },
+      onClick: (e) => {
+        if (!isEmpty) return;
+        const target = e.target;
+        if (target.closest("button, a, input, textarea, [role='button']")) return;
+        if (window.getSelection()?.toString()) return;
+        focusComposer();
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__top", children: [
+          /* @__PURE__ */ jsx(
+            ChatHeader,
+            {
+              title: /* @__PURE__ */ jsxs("span", { className: "ds-chat-widget__brand", children: [
+                renderThreads && !threadsWide && /* @__PURE__ */ jsx(
+                  CircularButton,
+                  {
+                    icon: "menu",
+                    variant: "tertiary",
+                    ariaLabel: "Open the chat history",
+                    tooltipPosition: "bottom",
+                    onClick: () => setThreadsOpen(true)
+                  }
+                ),
+                logo && /* @__PURE__ */ jsx("img", { src: logo, alt: "", width: 20, height: 20 }),
+                /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__brand-name", children: title })
+              ] }),
+              actions: (
+                /* With the agent rail seated inline the cluster moves to the
+                   widget's own right edge (see headerActions). */
+                asideShown && asideWide ? void 0 : headerActions
+              )
+            }
+          ),
+          tabsNode && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__tabs-row", children: tabsNode }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__body", children: [
+            /* @__PURE__ */ jsx(ChatThread, { className: "ds-chat-widget__thread", children: [
+              ...turns.map(
+                (turn) => turn.bare ? (
+                  /* Conversation furniture (a day marker): the injected
+                     content stands alone in the thread, no message chrome. */
+                  /* @__PURE__ */ jsx("div", { children: turn.content }, turn.id)
+                ) : turn.role === "user" ? (
+                  /* Files ride above the bubble on the sender's side; a turn
+                     of files alone draws no bubble. */
+                  /* @__PURE__ */ jsx(
+                    ChatMessage,
+                    {
+                      role: "user",
+                      attachments: turn.attachments ? /* @__PURE__ */ jsx(AttachmentGroup, { align: "end", items: turn.attachments }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                        turn.content,
+                        turn.card && /* @__PURE__ */ jsx(TurnCard, { card: turn.card })
+                      ] }),
+                      children: mentions && turn.text ? /* @__PURE__ */ jsx(MentionText, { text: turn.text, sources: mentions }) : turn.text
+                    },
+                    turn.id
+                  )
+                ) : /* @__PURE__ */ jsx(AssistantTurn, { turn }, turn.id)
+              ),
+              ...live ? [/* @__PURE__ */ jsx(AssistantTurn, { live }, live.id)] : []
+            ] }),
+            isEmpty && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__welcome", children: /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__greeting", children: [
+              /* @__PURE__ */ jsx("p", { className: "ds-chat-widget__hello", children: greeting }),
+              /* @__PURE__ */ jsx("p", { className: "ds-chat-widget__ask", children: tagline })
+            ] }) })
+          ] })
+        ] }),
+        phone && startersNode,
+        phone && widgetsLayout === "fit" && widgetsNode,
+        /* @__PURE__ */ jsx("footer", { className: "ds-chat-widget__footer", children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__composer", children: /* @__PURE__ */ jsx(
+          Composer,
+          {
+            ref: composerRef,
+            placeholder,
+            sendLabel: "Send",
+            aiGlow: true,
+            value: draft,
+            onValueChange: setDraft,
+            onSubmit: handleSubmit,
+            streaming,
+            onStop: stop,
+            context: contextLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              "Looking at “",
+              contextLabel,
+              "”"
+            ] }) : void 0,
+            contextIcon: "description",
+            contextPlacement: "above",
+            mentions,
+            ...fileAttachments ? {
+              files: queue.items,
+              onFilesSelected: queue.add,
+              onFileRemove: queue.remove,
+              pasteThreshold: LONG_PASTE_CHARS,
+              onPasteAsAttachment: (text) => queue.addText(text)
+            } : {},
+            actions: (
+              /* A host can slot its own leading actions. The default is the
+                 model picker over the host's model list: the pick rides on
+                 the next send, the server clamps it to the day's budget, and
+                 the selection follows the server's default until the visitor
+                 chooses. */
+              composerActions ?? (pickerModels.length > 0 ? /* @__PURE__ */ jsx(
+                ModelPicker,
+                {
+                  models: pickerModels,
+                  value: pickerValue,
+                  onValueChange: setChosenModel,
+                  placement: "top",
+                  "aria-label": "Choose a model"
+                }
+              ) : void 0)
+            )
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `ds-chat-widget__bottom ${isEmpty ? "ds-chat-widget__bottom--welcome" : ""} ${widgetsNode ? "ds-chat-widget__bottom--widgets" : ""}`,
+            children: [
+              !phone && startersNode,
+              (!phone || widgetsLayout === "scroll") && widgetsNode,
+              disclaimer && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__disclaimer-row", children: /* @__PURE__ */ jsx("p", { className: "ds-chat-widget__disclaimer", children: disclaimer }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (!hasRails) return chatColumn;
+  return /* @__PURE__ */ jsxs("div", { ref: railsHostRef, className: "ds-chat-widget__rails", children: [
+    renderThreads && threadsWide && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__threads-rail", children: renderThreads({ overlay: false, close: closeThreads }) }),
+    chatColumn,
+    asideShown && asideWide && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__rail-actions", children: headerActions }),
+    renderAside && asideWide && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `ds-chat-widget__aside-rail ${asideOpen ? "ds-chat-widget__aside-rail--open" : ""}`,
+        id: asideId,
+        inert: !asideOpen || void 0,
+        children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-rail-inner", children: renderAside({ overlay: false, close: closeAside }) })
+      }
+    ),
+    renderThreads && !threadsWide && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `ds-chat-widget__threads-overlay ${threadsOpen ? "ds-chat-widget__threads-overlay--open" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ds-chat-widget__rail-scrim",
+              "aria-label": "Close the chat history",
+              tabIndex: threadsOpen ? 0 : -1,
+              onClick: closeThreads
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__threads-sheet", children: renderThreads({ overlay: true, close: closeThreads }) })
+        ]
+      }
+    ),
+    renderAside && !asideWide && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `ds-chat-widget__aside-overlay ${asideOpen ? "ds-chat-widget__aside-overlay--open" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ds-chat-widget__rail-scrim",
+              "aria-label": "Close the agent panel",
+              tabIndex: asideOpen ? 0 : -1,
+              onClick: closeAside
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "ds-chat-widget__aside-sheet", id: asideId, children: [
+            /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__aside-grabber", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-sheet-body", children: renderAside({ overlay: true, close: closeAside }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ChatWidget
+};

package/chat/DemoWelcome.d.ts

@@ -0,0 +1,13 @@
+import { DemoWelcomeVariant } from './demo-fixtures';
+/** A board of Widgets for the welcome slot: the chat as a home page. */
+export declare function DemoBoard({ onAsk }: {
+    onAsk: (prompt: string) => void;
+}): import("react").JSX.Element;
+/**
+ * The welcome slot's content for a variant, or nothing for the two that
+ * leave the slot empty (`starters` is the widget's own, `none` is none).
+ */
+export declare function DemoWelcome({ variant, onAsk, }: {
+    variant: DemoWelcomeVariant;
+    onAsk: (prompt: string) => void;
+}): import("react").JSX.Element | null;