@arbidocs/blocks 0.4.5 → 0.4.6

package/dist/{chunk-6YHWXMPQ.js → chunk-G2T3KTZ3.js}

@@ -1,10 +1,11 @@
 "use client";
-import { ToolButton, Shell } from './chunk-2VBJ763Y.js';
-import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { useShellBottomInset, ToolButton, Shell } from './chunk-KZJAG7T3.js';
+import { observeResize } from './chunk-NPLYHR2E.js';
 import { formatCount } from './chunk-OXF2IFXG.js';
-import { forwardRef, useState, useRef, useEffect, useSyncExternalStore, useCallback } from 'react';
+import { testIdOr } from './chunk-7F6CBP3Z.js';
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback, useSyncExternalStore, useLayoutEffect } from 'react';
 import { FileText, ChevronDown, Pencil, Sparkles, ChevronUp, MoreHorizontal, RotateCw, AlertCircle, ArrowLeft, Edit3, Send, Loader2, Square, Mic, ArrowDown, GanttChartSquare, ArrowUpRight, Upload, MessageSquarePlus, Trash2, PanelRight, MessageSquare, X, FileUp } from 'lucide-react';
-import { cn, Textarea, Button, PopoverTrigger, Popover, PopoverAnchor, PopoverContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Tooltip, TooltipTrigger, TooltipContent, MarkdownRenderer } from '@arbidocs/react/ui';
+import { cn, Textarea, Button, PopoverTrigger, Popover, PopoverAnchor, PopoverContent, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Tooltip, TooltipTrigger, TooltipContent, MarkdownRenderer, trimOpenCitation } from '@arbidocs/react/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DEFAULT_MESSAGE_LABELS = {
@@ -673,9 +674,12 @@ function ComposerRoot({
   children,
   ...rest
 }) {
+  const rootRef = useRef(null);
+  useShellBottomInset(rootRef);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       "data-slot": "composer",
       className: cn("relative z-[20] shrink-0", isBranching && "bg-muted/30"),
       "data-testid": testId,
@@ -1247,6 +1251,168 @@ var ContextChip = forwardRef(function ContextChip2({
     }
   );
 });
+var MARK = "ml-px align-super text-[0.7em] font-medium leading-none tabular-nums text-muted-foreground";
+function sourceLabel(citation, labels) {
+  return [citation.documentTitle, citation.page != null ? labels.page(citation.page) : ""].filter(Boolean).join(", ");
+}
+function CitationMark({ num, citation, labels, onOpen, className }) {
+  const [isOpen2, setIsOpen] = useState(false);
+  if (!citation) {
+    return /* @__PURE__ */ jsx("sup", { className: cn(MARK, className), "data-cite": num, children: num });
+  }
+  const open = (passage) => {
+    setIsOpen(false);
+    onOpen?.({
+      documentId: passage?.documentId ?? null,
+      documentTitle: passage?.documentTitle ?? citation.documentTitle,
+      page: passage?.page ?? citation.page,
+      passage,
+      citation
+    });
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen2, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-cite": num,
+        "data-testid": `chat-citation-${num}`,
+        "aria-label": labels.citation(num, sourceLabel(citation, labels)),
+        className: cn(
+          MARK,
+          // A pill hit area: 44px on touch without moving the text.
+          "relative -my-1 inline-flex min-w-[1.1em] justify-center rounded px-1 py-1 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-muted data-[state=open]:text-foreground",
+          "pointer-coarse:after:absolute pointer-coarse:after:-inset-3 pointer-coarse:after:content-['']",
+          className
+        ),
+        children: num
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        "aria-label": labels.citationHeading(num),
+        "data-testid": `chat-citation-popover-${num}`,
+        className: "w-96 max-w-[calc(100vw-1rem)] p-0 text-sm",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-2 text-xs font-semibold text-muted-foreground", children: labels.citationHeading(num) }),
+          citation.passages.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-3 text-muted-foreground", children: labels.citationNoSource }) : /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border", children: citation.passages.map((passage) => /* @__PURE__ */ jsxs("li", { className: "space-y-1.5 px-3 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx(
+                FileText,
+                {
+                  className: "mt-0.5 size-4 shrink-0 text-muted-foreground",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "break-words font-medium text-foreground", children: passage.documentTitle }),
+                passage.page != null && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: labels.page(passage.page) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("blockquote", { className: "line-clamp-6 border-l-2 border-border pl-3 text-xs italic text-muted-foreground", children: passage.text }),
+            onOpen && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                className: "pointer-coarse:min-h-11",
+                onClick: () => open(passage),
+                "data-testid": `chat-citation-open-${num}`,
+                children: labels.openDocument
+              }
+            )
+          ] }, passage.id)) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/chat/chat-page-types.ts
+var DEFAULT_CHAT_PAGE_LABELS = {
+  chat: "Assistant chat",
+  conversations: "Conversations",
+  newChat: "New chat",
+  untitled: "New chat",
+  deleteConversation: (title) => `Delete conversation ${title}`,
+  assistant: "Assistant",
+  thinking: "Thinking\u2026",
+  steps: (count) => count === 1 ? "1 step" : `${count} steps`,
+  responseFailed: "Response failed",
+  answerFailedTitle: "The answer could not be completed",
+  uploadFailedTitle: "The upload failed",
+  placeholder: "Ask about your documents",
+  composerAriaLabel: "Message the assistant",
+  documentsInChat: (selected, total) => `${selected} of ${total} documents in this chat`,
+  documentsHeading: "Documents in this chat",
+  selectAllDocuments: "Select all",
+  noDocuments: "No documents yet",
+  uploadDocuments: "Upload documents",
+  uploading: "Uploading\u2026",
+  emptyTitle: "Ask about your documents",
+  emptyDescription: "Every answer is grounded in the selected documents and cites its sources.",
+  emptyUploadTitle: "Add a document to start",
+  emptyUploadDescription: "Upload the documents you want to ask about.",
+  workflows: "Workflows",
+  loadingDocuments: "Loading documents\u2026",
+  stop: "Stop generating",
+  stopped: "Stopped",
+  loadingConversation: "Loading conversation\u2026",
+  historyFailedTitle: "The conversation history could not be used",
+  citation: (num, source) => source ? `Source ${num}: ${source}` : `Source ${num}`,
+  citationHeading: (num) => `Source ${num}`,
+  citationNoSource: "The passage for this source is not available.",
+  openDocument: "Open document",
+  page: (page) => `Page ${page}`,
+  morePassages: (count) => count === 1 ? "1 more passage" : `${count} more passages`
+};
+function ChatMessageContent({
+  message,
+  labels,
+  onOpenCitation,
+  className
+}) {
+  const l = { ...DEFAULT_CHAT_PAGE_LABELS, ...labels };
+  const { citation, citationHeading, citationNoSource, openDocument, page } = l;
+  const citationLabels = useMemo(
+    () => ({ citation, citationHeading, citationNoSource, openDocument, page }),
+    [citation, citationHeading, citationNoSource, openDocument, page]
+  );
+  const byNum = useMemo(
+    () => new Map((message.citations ?? []).map((c) => [c.num, c])),
+    [message.citations]
+  );
+  const renderCitation = useCallback(
+    ({ num, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      children,
+      /* @__PURE__ */ jsx(
+        CitationMark,
+        {
+          num,
+          citation: byNum.get(num),
+          labels: citationLabels,
+          onOpen: onOpenCitation
+        }
+      )
+    ] }),
+    [byNum, citationLabels, onOpenCitation]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      MarkdownRenderer,
+      {
+        isStreaming: message.status === "streaming",
+        renderCitation,
+        className,
+        children: message.status === "streaming" || message.stopped ? trimOpenCitation(message.content) : message.content
+      }
+    ),
+    message.stopped && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs italic text-muted-foreground", "data-testid": "chat-stopped", children: l.stopped })
+  ] });
+}
 function ChatDocuments({ chat, labels, onPickFiles, testIds }) {
   const [isOpen2, setIsOpen] = useState(false);
   const selected = chat.documents.filter((d) => d.isSelected).length;
@@ -1324,6 +1490,7 @@ function ChatThreadList({
   onSelect,
   onNew,
   onDelete,
+  isLoading,
   testIds
 }) {
   return /* @__PURE__ */ jsxs(
@@ -1348,38 +1515,45 @@ function ChatThreadList({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto", children: threads.map((thread) => {
-          const isActive = thread.id === activeId;
-          const title = thread.title || labels.untitled;
-          return /* @__PURE__ */ jsxs("li", { className: "group relative", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onSelect(thread.id),
-                "aria-current": isActive ? "true" : void 0,
-                title,
-                "data-testid": `${testIdOr(testIds?.row, { testId: "chat-conversation" })}-${thread.id}`,
-                className: cn(
-                  "flex w-full items-center rounded-md px-3 py-2 pr-10 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11",
-                  isActive ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto",
+            "aria-busy": isLoading ? "true" : void 0,
+            children: threads.map((thread) => {
+              const isActive = thread.id === activeId;
+              const title = thread.title || labels.untitled;
+              return /* @__PURE__ */ jsxs("li", { className: "group relative", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onSelect(thread.id),
+                    "aria-current": isActive ? "true" : void 0,
+                    title,
+                    "data-testid": `${testIdOr(testIds?.row, { testId: "chat-conversation" })}-${thread.id}`,
+                    className: cn(
+                      "flex w-full items-center rounded-md px-3 py-2 pr-10 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:min-h-11",
+                      isActive ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx("span", { className: "truncate", children: title })
+                  }
                 ),
-                children: /* @__PURE__ */ jsx("span", { className: "truncate", children: title })
-              }
-            ),
-            onDelete && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onDelete(thread.id),
-                "aria-label": labels.deleteConversation(title),
-                "data-testid": `${testIdOr(testIds?.delete, { testId: "chat-delete" })}-${thread.id}`,
-                className: "absolute right-1 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground opacity-100 hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-fine:opacity-0 pointer-fine:group-hover:opacity-100 pointer-coarse:size-11",
-                children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
-              }
-            )
-          ] }, thread.id);
-        }) })
+                onDelete && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onDelete(thread.id),
+                    "aria-label": labels.deleteConversation(title),
+                    "data-testid": `${testIdOr(testIds?.delete, { testId: "chat-delete" })}-${thread.id}`,
+                    className: "absolute right-1 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground opacity-100 hover:bg-background hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-fine:opacity-0 pointer-fine:group-hover:opacity-100 pointer-coarse:size-11",
+                    children: /* @__PURE__ */ jsx(Trash2, { className: "size-4", "aria-hidden": "true" })
+                  }
+                )
+              ] }, thread.id);
+            })
+          }
+        )
       ]
     }
   );
@@ -1431,38 +1605,88 @@ function useChatSurface() {
   );
   return { hasEmbeddedChat: count > 0, isDockAvailable: count === 0 };
 }
-
-// src/chat/chat-page-types.ts
-var DEFAULT_CHAT_PAGE_LABELS = {
-  chat: "Assistant chat",
-  conversations: "Conversations",
-  newChat: "New chat",
-  untitled: "New chat",
-  deleteConversation: (title) => `Delete conversation ${title}`,
-  assistant: "Assistant",
-  thinking: "Thinking\u2026",
-  steps: (count) => count === 1 ? "1 step" : `${count} steps`,
-  responseFailed: "Response failed",
-  answerFailedTitle: "The answer could not be completed",
-  uploadFailedTitle: "The upload failed",
-  placeholder: "Ask about your documents",
-  composerAriaLabel: "Message the assistant",
-  documentsInChat: (selected, total) => `${selected} of ${total} documents in this chat`,
-  documentsHeading: "Documents in this chat",
-  selectAllDocuments: "Select all",
-  noDocuments: "No documents yet",
-  uploadDocuments: "Upload documents",
-  uploading: "Uploading\u2026",
-  emptyTitle: "Ask about your documents",
-  emptyDescription: "Every answer is grounded in the selected documents and cites its sources.",
-  emptyUploadTitle: "Add a document to start",
-  emptyUploadDescription: "Upload the documents you want to ask about.",
-  workflows: "Workflows",
-  loadingDocuments: "Loading documents\u2026"
-};
+function useElementSize(ref) {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      setSize(
+        (prev) => prev.width === rect.width && prev.height === rect.height ? prev : { width: rect.width, height: rect.height }
+      );
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    const stopObserving = observeResize(el, measure);
+    return () => {
+      window.removeEventListener("resize", measure);
+      stopObserving();
+    };
+  }, [ref]);
+  return size;
+}
+function rootFontSizePx() {
+  if (typeof document === "undefined") return 16;
+  const size = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return Number.isFinite(size) && size > 0 ? size : 16;
+}
+function bottomSpace(el, until) {
+  let space = 0;
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    space += (parseFloat(style.paddingBottom) || 0) + (parseFloat(style.borderBottomWidth) || 0);
+    if (node === until) break;
+  }
+  return space;
+}
+function scrollParent(el) {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const overflowY = getComputedStyle(node).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") return node;
+  }
+  return null;
+}
+function useFillHeight(ref, enabled, minHeight) {
+  const [height, setHeight] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!enabled || !el) return;
+    const scroller = scrollParent(el);
+    const measure = () => {
+      const viewport = window.visualViewport?.height ?? window.innerHeight;
+      const rect = el.getBoundingClientRect();
+      const scrolled = scroller ? scroller.scrollTop : window.scrollY;
+      let available;
+      if (scroller) {
+        const top = rect.top - scroller.getBoundingClientRect().top;
+        available = scroller.clientHeight - (top + scrolled) - bottomSpace(el, scroller);
+      } else {
+        available = viewport - rect.top;
+      }
+      const bar = document.querySelector('[data-slot="mobile-tab-bar"]')?.getBoundingClientRect();
+      const barHeight = bar && bar.height > 0 ? Math.max(0, viewport - bar.top) : 0;
+      available = Math.min(available, viewport - barHeight - (rect.top + scrolled));
+      setHeight(Math.max(minHeight, Math.floor(available)));
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    window.visualViewport?.addEventListener("resize", measure);
+    const stopObserving = scroller ? observeResize(scroller, measure) : () => {
+    };
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.visualViewport?.removeEventListener("resize", measure);
+      stopObserving();
+    };
+  }, [ref, enabled, minHeight]);
+  return enabled ? height : null;
+}
 var USER_BUBBLE = "bg-[color:hsl(var(--chat-user-bubble,var(--muted)))] text-[color:hsl(var(--chat-user-bubble-foreground,var(--foreground)))]";
 var NEAR_BOTTOM_PX = 96;
-function MessageRow({ message, identity, renderContent, labels }) {
+var LIST_COLUMN_REM = 48;
+var DEFAULT_ASIDE_BREAKPOINT_REM = 60;
+function MessageRow({ message, identity, renderContent, onOpenCitation, labels }) {
   if (message.role === "user") {
     return /* @__PURE__ */ jsx(Message.Root, { role: "user", messageId: message.id, children: /* @__PURE__ */ jsx(Message.Content, { role: "user", messageId: message.id, children: /* @__PURE__ */ jsx(
       Message.Bubble,
@@ -1490,7 +1714,15 @@ function MessageRow({ message, identity, renderContent, labels }) {
         statusLabel: isFailed ? labels.responseFailed : ""
       }
     ),
-    hasText && (renderContent?.(message) ?? /* @__PURE__ */ jsx(MarkdownRenderer, { isStreaming, children: message.content })),
+    hasText && (renderContent?.(message) ?? /* @__PURE__ */ jsx(
+      ChatMessageContent,
+      {
+        message,
+        labels,
+        onOpenCitation
+      }
+    )),
+    !hasText && message.stopped && /* @__PURE__ */ jsx("p", { className: "text-xs italic text-muted-foreground", "data-testid": "chat-stopped", children: labels.stopped }),
     isStreaming && !hasText && /* @__PURE__ */ jsxs(
       "span",
       {
@@ -1515,6 +1747,11 @@ function ChatPage({
   emptyDescription,
   identity,
   renderContent,
+  onOpenCitation,
+  asideBreakpoint = DEFAULT_ASIDE_BREAKPOINT_REM,
+  fillHeight = false,
+  minHeight = 360,
+  compactHeader = false,
   accept,
   labels,
   className,
@@ -1525,9 +1762,40 @@ function ChatPage({
   const [draft, setDraft] = useState("");
   const [isAsideOpen, setIsAsideOpen] = useState(false);
   const [isAway, setIsAway] = useState(false);
+  const rootRef = useRef(null);
+  const headerRef = useRef(null);
+  const asideToggleRef = useRef(null);
+  const asideRef = useRef(null);
   const scrollRef = useRef(null);
   const fileRef = useRef(null);
   const textareaRef = useRef(null);
+  const { width } = useElementSize(rootRef);
+  const { height: headerHeight } = useElementSize(headerRef);
+  const rem = rootFontSizePx();
+  const hasListColumn = width >= LIST_COLUMN_REM * rem;
+  const hasAsideColumn = width > 0 && width >= asideBreakpoint * rem;
+  const fillPx = useFillHeight(rootRef, fillHeight, minHeight);
+  const closeAside = useCallback(() => setIsAsideOpen(false), []);
+  const isAsidePanelOpen = !!aside && !hasAsideColumn && isAsideOpen;
+  useEffect(() => {
+    if (!isAsidePanelOpen) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      closeAside();
+      asideToggleRef.current?.focus();
+    };
+    const onPointer = (e) => {
+      const target = e.target;
+      if (asideRef.current?.contains(target) || asideToggleRef.current?.contains(target)) return;
+      closeAside();
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointer);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointer);
+    };
+  }, [isAsidePanelOpen, closeAside]);
   const last = chat.messages[chat.messages.length - 1];
   const announcement = useStreamAnnouncement({
     isStreaming: chat.isRunning,
@@ -1560,27 +1828,34 @@ function ChatPage({
   const onFiles = (files) => {
     if (files.length > 0) void chat.upload(files);
   };
+  const hasHeader = !(compactHeader && hasListColumn && !headerActions && !(aside && !hasAsideColumn));
   const activeThread = chat.threads.find((t) => t.id === chat.activeThreadId);
   const hasDocuments = chat.documents.length > 0;
   const isEmpty = chat.messages.length === 0;
-  const heading = header ?? /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate text-sm font-semibold text-foreground", children: activeThread?.title || l.untitled });
+  const heading = compactHeader ? null : header ?? /* @__PURE__ */ jsx("h2", { className: "min-w-0 truncate text-sm font-semibold text-foreground", children: activeThread?.title || l.untitled });
   return /* @__PURE__ */ jsxs(
     "section",
     {
+      ref: rootRef,
       "aria-label": l.chat,
       "data-slot": "chat-page",
       "data-surface": surface,
+      "data-list": hasListColumn ? "column" : "select",
+      "data-aside": aside ? hasAsideColumn ? "column" : "panel" : void 0,
       "data-testid": testIdOr(testIds?.root, { testId: "chat-page" }),
+      style: fillPx != null ? { height: fillPx } : void 0,
       className: cn(
-        "@container/chat flex h-full min-h-0 w-full overflow-hidden bg-background text-foreground",
+        "@container/chat relative flex min-h-0 w-full overflow-hidden bg-background text-foreground",
+        fillHeight ? "h-[70dvh]" : "h-full",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden w-64 shrink-0 flex-col border-r border-border @3xl/chat:flex", children: /* @__PURE__ */ jsx(
+        hasListColumn && /* @__PURE__ */ jsx("div", { className: "flex w-64 shrink-0 flex-col border-r border-border", children: /* @__PURE__ */ jsx(
           ChatThreadList,
           {
             threads: chat.threads,
             activeId: chat.activeThreadId,
+            isLoading: chat.isLoadingThreads,
             labels: l,
             onSelect: chat.selectThread,
             onNew: chat.newThread,
@@ -1588,48 +1863,48 @@ function ChatPage({
           }
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxs(
+          hasHeader && /* @__PURE__ */ jsxs(
             "div",
             {
+              ref: headerRef,
               "data-slot": "chat-page-header",
               className: "flex min-h-12 shrink-0 items-center gap-2 border-b border-border px-3 py-1.5",
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-                  /* @__PURE__ */ jsx("div", { className: "hidden min-w-0 flex-1 @3xl/chat:block", children: heading }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 @3xl/chat:hidden", children: [
-                    header ? /* @__PURE__ */ jsx("div", { className: "min-w-0 shrink", children: header }) : null,
-                    /* @__PURE__ */ jsx(
-                      ChatThreadSelect,
-                      {
-                        threads: chat.threads,
-                        activeId: chat.activeThreadId,
-                        labels: l,
-                        onSelect: chat.selectThread
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon",
-                        className: "size-9 shrink-0 pointer-coarse:size-11",
-                        "aria-label": l.newChat,
-                        onClick: chat.newThread,
-                        children: /* @__PURE__ */ jsx(MessageSquarePlus, { className: "size-4", "aria-hidden": "true" })
-                      }
-                    )
-                  ] })
+                hasListColumn ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center", children: heading }) : /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                  heading ? /* @__PURE__ */ jsx("div", { className: "min-w-0 shrink", children: heading }) : null,
+                  /* @__PURE__ */ jsx(
+                    ChatThreadSelect,
+                    {
+                      threads: chat.threads,
+                      activeId: chat.activeThreadId,
+                      labels: l,
+                      onSelect: chat.selectThread
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "size-9 shrink-0 pointer-coarse:size-11",
+                      "aria-label": l.newChat,
+                      onClick: chat.newThread,
+                      "data-testid": "chat-new-compact",
+                      children: /* @__PURE__ */ jsx(MessageSquarePlus, { className: "size-4", "aria-hidden": "true" })
+                    }
+                  )
                 ] }),
-                aside && /* @__PURE__ */ jsxs(
+                aside && !hasAsideColumn && /* @__PURE__ */ jsxs(
                   Button,
                   {
+                    ref: asideToggleRef,
                     type: "button",
                     variant: "outline",
                     size: "sm",
-                    className: "shrink-0 gap-1.5 pointer-coarse:min-h-11 @6xl/chat:hidden",
+                    className: "shrink-0 gap-1.5 pointer-coarse:min-h-11",
                     "aria-expanded": isAsideOpen,
-                    "aria-controls": "chat-page-aside-panel",
+                    "aria-controls": "chat-page-aside",
                     onClick: () => setIsAsideOpen((v) => !v),
                     "data-testid": testIdOr(testIds?.asideToggle, { testId: "chat-aside-toggle" }),
                     children: [
@@ -1642,15 +1917,6 @@ function ChatPage({
               ]
             }
           ),
-          aside && isAsideOpen && /* @__PURE__ */ jsx(
-            "div",
-            {
-              id: "chat-page-aside-panel",
-              "data-slot": "chat-page-aside-panel",
-              className: "max-h-[45%] shrink-0 overflow-y-auto border-b border-border p-3 @6xl/chat:hidden",
-              children: aside
-            }
-          ),
           /* @__PURE__ */ jsxs(
             MessageList.Root,
             {
@@ -1665,8 +1931,16 @@ function ChatPage({
                     ref: scrollRef,
                     onScroll,
                     "data-slot": "chat-page-scroll",
-                    className: "relative min-h-0 flex-1 overflow-y-auto overscroll-contain",
-                    children: isEmpty ? chat.isLoadingDocuments ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: l.loadingDocuments }) : /* @__PURE__ */ jsx(
+                    className: "scrollbar-themed relative min-h-0 flex-1 overflow-y-auto overscroll-contain",
+                    children: isEmpty ? chat.isLoadingDocuments || chat.isLoadingThread ? /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "status",
+                        className: "flex h-full items-center justify-center text-sm text-muted-foreground",
+                        "data-testid": "chat-loading",
+                        children: chat.isLoadingThread ? l.loadingConversation : l.loadingDocuments
+                      }
+                    ) : /* @__PURE__ */ jsx(
                       ConversationEmpty,
                       {
                         hasDocuments,
@@ -1711,6 +1985,7 @@ function ChatPage({
                             message,
                             identity,
                             renderContent,
+                            onOpenCitation,
                             labels: l
                           }
                         ) }, message.id))
@@ -1743,6 +2018,14 @@ function ChatPage({
                 testId: testIdOr(testIds?.alert, { testId: "chat-alert" })
               }
             ),
+            chat.historyError && /* @__PURE__ */ jsx(
+              MessageAlert,
+              {
+                title: l.historyFailedTitle,
+                description: chat.historyError,
+                testId: "chat-history-alert"
+              }
+            ),
             chat.uploadError && /* @__PURE__ */ jsx(
               MessageAlert,
               {
@@ -1775,7 +2058,20 @@ function ChatPage({
                       testIds: { documents: testIds?.documents, upload: testIds?.upload }
                     }
                   ),
-                  trailing: /* @__PURE__ */ jsx(
+                  trailing: chat.isRunning && chat.stop ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      size: "icon",
+                      variant: "outline",
+                      className: "h-9 w-9 shrink-0 pointer-coarse:h-11 pointer-coarse:w-11",
+                      "aria-label": l.stop,
+                      title: l.stop,
+                      onClick: chat.stop,
+                      "data-testid": "chat-stop",
+                      children: /* @__PURE__ */ jsx(Square, { className: "h-3.5 w-3.5 fill-current", "aria-hidden": "true" })
+                    }
+                  ) : /* @__PURE__ */ jsx(
                     Composer.Send,
                     {
                       onSend: () => submit(),
@@ -1791,10 +2087,18 @@ function ChatPage({
         aside && /* @__PURE__ */ jsx(
           "aside",
           {
+            ref: asideRef,
+            id: "chat-page-aside",
             "aria-label": l.workflows,
             "data-slot": "chat-page-aside",
+            "data-mode": hasAsideColumn ? "column" : "panel",
             "data-testid": testIdOr(testIds?.aside, { testId: "chat-aside" }),
-            className: "hidden w-80 shrink-0 overflow-y-auto border-l border-border p-4 @6xl/chat:block",
+            hidden: !hasAsideColumn && !isAsideOpen,
+            style: hasAsideColumn ? void 0 : { top: headerHeight + 4 },
+            className: cn(
+              "scrollbar-themed overflow-y-auto bg-background",
+              hasAsideColumn ? "w-72 shrink-0 border-l border-border p-4" : "absolute right-2 z-20 max-h-[min(60%,32rem)] w-[min(22rem,calc(100%-1rem))] rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg"
+            ),
             children: aside
           }
         ),
@@ -1894,6 +2198,6 @@ function AssistantDock({
   );
 }
 
-export { AssistantDock, AssistantDockToggle, ChatDocuments, ChatPage, ChatThreadList, ChatThreadSelect, Composer, ComposerBranchingNotice, ComposerContainer, ComposerDock, ComposerFrame, ComposerInput, ComposerRoot, ComposerSend, ComposerToolbar, ComposerVoiceButton, ContextChip, ConversationEmpty, DEFAULT_CHAT_PAGE_LABELS, DEFAULT_COMPOSER_LABELS, DEFAULT_CONVERSATION_EMPTY_LABELS, DEFAULT_MESSAGE_ALERT_LABELS, DEFAULT_MESSAGE_LABELS, DEFAULT_MESSAGE_LIST_LABELS, Message, MessageActionButton, MessageActionMenu, MessageAlert, MessageBody, MessageBubble, MessageByline, MessageContent, MessageFooter, MessageList, MessageListBanner, MessageListEmpty, MessageListRoot, MessageListRow, MessageListRows, MessageListStatus, MessageListTail, MessageNarration, MessageRoot, MessageSources, MessageSubagentBadge, ScrollToBottom, SourceChip, toSpeakableText, useAssistantDock, useChatSurface, useRegisterEmbeddedChat, useStreamAnnouncement };
-//# sourceMappingURL=chunk-6YHWXMPQ.js.map
-//# sourceMappingURL=chunk-6YHWXMPQ.js.map
+export { AssistantDock, AssistantDockToggle, ChatDocuments, ChatMessageContent, ChatPage, ChatThreadList, ChatThreadSelect, CitationMark, Composer, ComposerBranchingNotice, ComposerContainer, ComposerDock, ComposerFrame, ComposerInput, ComposerRoot, ComposerSend, ComposerToolbar, ComposerVoiceButton, ContextChip, ConversationEmpty, DEFAULT_CHAT_PAGE_LABELS, DEFAULT_COMPOSER_LABELS, DEFAULT_CONVERSATION_EMPTY_LABELS, DEFAULT_MESSAGE_ALERT_LABELS, DEFAULT_MESSAGE_LABELS, DEFAULT_MESSAGE_LIST_LABELS, Message, MessageActionButton, MessageActionMenu, MessageAlert, MessageBody, MessageBubble, MessageByline, MessageContent, MessageFooter, MessageList, MessageListBanner, MessageListEmpty, MessageListRoot, MessageListRow, MessageListRows, MessageListStatus, MessageListTail, MessageNarration, MessageRoot, MessageSources, MessageSubagentBadge, ScrollToBottom, SourceChip, toSpeakableText, useAssistantDock, useChatSurface, useRegisterEmbeddedChat, useStreamAnnouncement };
+//# sourceMappingURL=chunk-G2T3KTZ3.js.map
+//# sourceMappingURL=chunk-G2T3KTZ3.js.map