rift-ds 1.7.0 → 1.9.0

package/chat/ChatWidget.js

@@ -0,0 +1,709 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useSyncExternalStore, useRef, useEffect, 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";
+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 { cardArtifact } from "./artifacts.js";
+import { ChatAgentPane } from "./ChatAgentPane.js";
+import { ChatArtifactPane } from "./ChatArtifactPane.js";
+import { ChatTabs } from "./ChatTabs.js";
+import { ChatThreads } from "./ChatThreads.js";
+import { useChatWidget, ArtifactSeatContext } from "./context.js";
+import { subscribeClock, readGreeting, serverGreeting } from "./greeting.js";
+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 "./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,
+  artifacts = false,
+  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,
+    artifact,
+    openArtifact,
+    closeArtifact
+  } = 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,
+      onClose: ctx.close
+    }
+  ) : void 0);
+  const tabsNode = tabs === true ? /* @__PURE__ */ jsx(ChatTabs, {}) : tabs || null;
+  const hasRails = Boolean(renderThreads || renderAside || artifacts);
+  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 [asideRoomy, setAsideRoomy] = useState(false);
+  const [artifactEmptyOpen, setArtifactEmptyOpen] = useState(false);
+  const [artifactExpandedWanted, setArtifactExpanded] = useState(false);
+  const wasAsideWideRef = useRef(true);
+  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);
+      setAsideRoomy(width >= ASIDE_WITH_THREADS_MIN_WIDTH);
+      if (wide) setThreadsOpen(false);
+      if (wasAsideWideRef.current && !asideRoom) {
+        setAsideOpen(false);
+        setArtifactEmptyOpen(false);
+        setArtifactExpanded(false);
+        closeArtifact();
+      }
+      wasAsideWideRef.current = asideRoom;
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(host);
+    return () => observer.disconnect();
+  }, [hasRails, closeArtifact]);
+  const closeThreads = () => setThreadsOpen(false);
+  const artifactId = useId();
+  const artifactShown = artifacts && (artifact !== null || artifactEmptyOpen);
+  const [heldArtifact, setHeldArtifact] = useState(artifact);
+  if (artifactShown && artifact !== heldArtifact) setHeldArtifact(artifact);
+  const artifactInline = artifactShown && asideWide;
+  const artifactExpanded = artifactInline && artifactExpandedWanted;
+  const closeArtifactPanel = () => {
+    setArtifactExpanded(false);
+    setArtifactEmptyOpen(false);
+    closeArtifact();
+  };
+  const [artifactWidth, setArtifactWidth] = useState(null);
+  const [artifactResizing, setArtifactResizing] = useState(false);
+  const artifactRailRef = useRef(null);
+  const artifactDragRef = useRef(null);
+  const beginArtifactResize = (e) => {
+    if (e.pointerType === "mouse" && e.button !== 0 || artifactDragRef.current) return;
+    const rail = artifactRailRef.current;
+    const column = railsHostRef.current?.querySelector(":scope > .ds-chat-widget");
+    if (!rail || !column) return;
+    const width = rail.getBoundingClientRect().width;
+    const spare = column.getBoundingClientRect().width - ARTIFACT_MIN_COLUMN_WIDTH;
+    artifactDragRef.current = { startX: e.clientX, width, max: width + Math.max(0, spare), next: width };
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setArtifactResizing(true);
+  };
+  const moveArtifactResize = (e) => {
+    const drag = artifactDragRef.current;
+    if (!drag) return;
+    const grown = drag.width - (e.clientX - drag.startX);
+    drag.next = Math.round(Math.min(drag.max, Math.max(ARTIFACT_MIN_COLUMN_WIDTH, grown)));
+    railsHostRef.current?.style.setProperty("--ds-chat-artifact-width", `${drag.next}px`);
+  };
+  const endArtifactResize = () => {
+    const drag = artifactDragRef.current;
+    if (!drag) return;
+    artifactDragRef.current = null;
+    setArtifactWidth(drag.next);
+    setArtifactResizing(false);
+  };
+  const latestArtifact = useMemo(() => {
+    for (let index = turns.length - 1; index >= 0; index -= 1) {
+      const found = cardArtifact(turns[index].card);
+      if (found) return found;
+    }
+    return null;
+  }, [turns]);
+  const seenArtifactTurns = useRef(null);
+  const asideWideRef = useRef(asideWide);
+  useEffect(() => {
+    asideWideRef.current = asideWide;
+  }, [asideWide]);
+  useEffect(() => {
+    if (!artifacts) return;
+    const carrying = turns.filter((turn) => cardArtifact(turn.card));
+    if (seenArtifactTurns.current === null) {
+      seenArtifactTurns.current = new Set(carrying.map((turn) => turn.id));
+      return;
+    }
+    for (const turn of carrying) {
+      if (seenArtifactTurns.current.has(turn.id)) continue;
+      seenArtifactTurns.current.add(turn.id);
+      const arrived = cardArtifact(turn.card);
+      if (arrived && asideWideRef.current) openArtifact(arrived);
+    }
+  }, [artifacts, turns, openArtifact]);
+  const trailingUp = artifactInline || Boolean(renderAside) && asideOpen && asideWide;
+  const threadsInline = threadsWide && !(trailingUp && (!asideRoomy || artifactExpanded));
+  const asideRailRef = useRef(null);
+  const asideMounted = Boolean(renderAside) && asideWide;
+  useEffect(() => {
+    if (!asideMounted) return;
+    const rail = asideRailRef.current;
+    const card = rail?.firstElementChild;
+    const pane = card?.firstElementChild;
+    if (!rail || !card || !pane) return;
+    const measure = () => {
+      const width = pane.offsetWidth + (card.offsetWidth - card.clientWidth);
+      if (pane.offsetWidth > 0) rail.style.setProperty("--ds-chat-aside-width", `${width}px`);
+      else rail.style.removeProperty("--ds-chat-aside-width");
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(pane);
+    return () => observer.disconnect();
+  }, [asideMounted]);
+  const asideId = useId();
+  const asideShown = Boolean(renderAside) && asideOpen && !artifactShown;
+  const closeAside = () => setAsideOpen(false);
+  const toggleAside = () => {
+    if (artifactShown) {
+      closeArtifactPanel();
+      setAsideOpen(true);
+      return;
+    }
+    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 trailingInline = asideShown && asideWide || artifactInline;
+  const actionsFloat = (Boolean(renderAside) || artifacts) && asideWide;
+  const showNewChat = !(renderThreads && threadsWide);
+  const actionCount = Number(showNewChat) + Number(Boolean(renderAside)) + Number(artifacts) + Number(placementEnabled) + Number(fullscreenEnabled) + Number(closeEnabled);
+  const headerActions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    showNewChat && /* @__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
+      }
+    ),
+    artifacts && /* @__PURE__ */ jsx(
+      CircularButton,
+      {
+        icon: artifactShown ? "right_panel_close" : "right_panel_open",
+        variant: "tertiary",
+        className: artifactShown ? "ds-chat-widget__agent-toggle--on" : void 0,
+        ariaLabel: artifactShown ? "Hide the artifact panel" : "Show the artifact panel",
+        tooltipPosition: "bottom",
+        "aria-expanded": artifactShown,
+        "aria-controls": artifactShown ? artifactId : void 0,
+        onClick: () => {
+          if (artifactShown) closeArtifactPanel();
+          else if (latestArtifact) openArtifact(latestArtifact);
+          else setArtifactEmptyOpen(true);
+        }
+      }
+    ),
+    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": trailingInline || void 0,
+      onKeyDown: (e) => {
+        if (e.key === "Escape" && (threadsOpen || asideShown && !asideWide || artifactShown && !asideWide)) {
+          e.stopPropagation();
+          if (threadsOpen) closeThreads();
+          else if (artifactShown) closeArtifactPanel();
+          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 && !threadsInline && /* @__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). */
+                !actionsFloat ? headerActions : trailingInline ? void 0 : /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "ds-chat-widget__actions-spacer",
+                    style: { "--ds-chat-action-count": actionCount },
+                    "aria-hidden": "true"
+                  }
+                )
+              )
+            }
+          ),
+          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: [
+              ...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",
+      "data-artifact-expanded": artifactExpanded || void 0,
+      "data-artifact-sized": artifactWidth !== null || artifactResizing || void 0,
+      "data-artifact-resizing": artifactResizing || void 0,
+      style: artifactWidth !== null ? { "--ds-chat-artifact-width": `${artifactWidth}px` } : void 0,
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && artifactExpanded) {
+          event.stopPropagation();
+          setArtifactExpanded(false);
+        }
+      },
+      children: [
+        renderThreads && threadsInline && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__threads-rail", children: renderThreads({ overlay: false, close: closeThreads }) }),
+        chatColumn,
+        actionsFloat && /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__rail-actions", children: headerActions }),
+        renderAside && asideWide && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: asideRailRef,
+            className: `ds-chat-widget__aside-rail ${asideShown ? "ds-chat-widget__aside-rail--open" : ""}`,
+            id: asideId,
+            inert: !asideShown || void 0,
+            children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-rail-inner", children: renderAside({ overlay: false, close: closeAside }) })
+          }
+        ),
+        artifactInline && !artifactExpanded && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `ds-chat-widget__artifact-grip ${artifactResizing ? "ds-chat-widget__artifact-grip--resizing" : ""}`,
+            "aria-hidden": "true",
+            onPointerDown: beginArtifactResize,
+            onPointerMove: moveArtifactResize,
+            onPointerUp: endArtifactResize,
+            onPointerCancel: endArtifactResize
+          }
+        ),
+        artifacts && asideWide && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: artifactRailRef,
+            className: `ds-chat-widget__artifact-rail ${artifactShown ? "ds-chat-widget__artifact-rail--open" : ""}`,
+            id: artifactId,
+            inert: !artifactShown || void 0,
+            children: /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__artifact-rail-inner", children: /* @__PURE__ */ jsx(
+              ChatArtifactPane,
+              {
+                artifact: heldArtifact,
+                expanded: artifactExpanded,
+                onExpandedChange: setArtifactExpanded,
+                onClose: closeArtifactPanel
+              }
+            ) })
+          }
+        ),
+        artifacts && !asideWide && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `ds-chat-widget__aside-overlay ${artifactShown ? "ds-chat-widget__aside-overlay--open" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ds-chat-widget__rail-scrim",
+                  "aria-label": "Close the artifact panel",
+                  tabIndex: artifactShown ? 0 : -1,
+                  onClick: closeArtifactPanel
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "ds-chat-widget__aside-sheet ds-chat-widget__aside-sheet--artifact",
+                  id: artifactId,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "ds-chat-widget__aside-grabber", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("div", { className: "ds-chat-widget__aside-sheet-body", children: /* @__PURE__ */ jsx(ChatArtifactPane, { artifact: heldArtifact, onClose: closeArtifactPanel }) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        renderThreads && !threadsInline && /* @__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 ${asideShown ? "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: asideShown ? 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
+};