@arbidocs/blocks 0.4.5 → 0.4.6

package/dist/{chunk-YLOKCIQJ.cjs → chunk-5SLLMK5K.cjs}

@@ -1,9 +1,10 @@
 "use client";
 'use strict';
 
-var chunkKHX2BX3S_cjs = require('./chunk-KHX2BX3S.cjs');
-var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
+var chunkVGOFFCMT_cjs = require('./chunk-VGOFFCMT.cjs');
+var chunkPPCATBOY_cjs = require('./chunk-PPCATBOY.cjs');
 var chunkKDG6FER6_cjs = require('./chunk-KDG6FER6.cjs');
+var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
 var react = require('react');
 var lucideReact = require('lucide-react');
 var ui = require('@arbidocs/react/ui');
@@ -675,9 +676,12 @@ function ComposerRoot({
   children,
   ...rest
 }) {
+  const rootRef = react.useRef(null);
+  chunkVGOFFCMT_cjs.useShellBottomInset(rootRef);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref: rootRef,
       "data-slot": "composer",
       className: ui.cn("relative z-[20] shrink-0", isBranching && "bg-muted/30"),
       "data-testid": testId,
@@ -1249,6 +1253,168 @@ var ContextChip = react.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] = react.useState(false);
+  if (!citation) {
+    return /* @__PURE__ */ jsxRuntime.jsx("sup", { className: ui.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__ */ jsxRuntime.jsxs(ui.Popover, { open: isOpen2, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "data-cite": num,
+        "data-testid": `chat-citation-${num}`,
+        "aria-label": labels.citation(num, sourceLabel(citation, labels)),
+        className: ui.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__ */ jsxRuntime.jsxs(
+      ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "px-3 py-3 text-muted-foreground", children: labels.citationNoSource }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-border", children: citation.passages.map((passage) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "space-y-1.5 px-3 py-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.FileText,
+                {
+                  className: "mt-0.5 size-4 shrink-0 text-muted-foreground",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "break-words font-medium text-foreground", children: passage.documentTitle }),
+                passage.page != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: labels.page(passage.page) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("blockquote", { className: "line-clamp-6 border-l-2 border-border pl-3 text-xs italic text-muted-foreground", children: passage.text }),
+            onOpen && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.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 = react.useMemo(
+    () => ({ citation, citationHeading, citationNoSource, openDocument, page }),
+    [citation, citationHeading, citationNoSource, openDocument, page]
+  );
+  const byNum = react.useMemo(
+    () => new Map((message.citations ?? []).map((c) => [c.num, c])),
+    [message.citations]
+  );
+  const renderCitation = react.useCallback(
+    ({ num, children }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CitationMark,
+        {
+          num,
+          citation: byNum.get(num),
+          labels: citationLabels,
+          onOpen: onOpenCitation
+        }
+      )
+    ] }),
+    [byNum, citationLabels, onOpenCitation]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.MarkdownRenderer,
+      {
+        isStreaming: message.status === "streaming",
+        renderCitation,
+        className,
+        children: message.status === "streaming" || message.stopped ? ui.trimOpenCitation(message.content) : message.content
+      }
+    ),
+    message.stopped && /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
   const selected = chat.documents.filter((d) => d.isSelected).length;
@@ -1326,6 +1492,7 @@ function ChatThreadList({
   onSelect,
   onNew,
   onDelete,
+  isLoading,
   testIds
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1350,38 +1517,45 @@ function ChatThreadList({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { className: "group relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onSelect(thread.id),
-                "aria-current": isActive ? "true" : void 0,
-                title,
-                "data-testid": `${chunkMHVNT4J3_cjs.testIdOr(testIds?.row, { testId: "chat-conversation" })}-${thread.id}`,
-                className: ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("li", { className: "group relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onSelect(thread.id),
+                    "aria-current": isActive ? "true" : void 0,
+                    title,
+                    "data-testid": `${chunkMHVNT4J3_cjs.testIdOr(testIds?.row, { testId: "chat-conversation" })}-${thread.id}`,
+                    className: ui.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__ */ jsxRuntime.jsx("span", { className: "truncate", children: title })
+                  }
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: title })
-              }
-            ),
-            onDelete && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onDelete(thread.id),
-                "aria-label": labels.deleteConversation(title),
-                "data-testid": `${chunkMHVNT4J3_cjs.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4", "aria-hidden": "true" })
-              }
-            )
-          ] }, thread.id);
-        }) })
+                onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onDelete(thread.id),
+                    "aria-label": labels.deleteConversation(title),
+                    "data-testid": `${chunkMHVNT4J3_cjs.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__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-4", "aria-hidden": "true" })
+                  }
+                )
+              ] }, thread.id);
+            })
+          }
+        )
       ]
     }
   );
@@ -1433,38 +1607,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] = react.useState({ width: 0, height: 0 });
+  react.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 = chunkPPCATBOY_cjs.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] = react.useState(null);
+  react.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 ? chunkPPCATBOY_cjs.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__ */ jsxRuntime.jsx(Message.Root, { role: "user", messageId: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(Message.Content, { role: "user", messageId: message.id, children: /* @__PURE__ */ jsxRuntime.jsx(
       Message.Bubble,
@@ -1492,7 +1716,15 @@ function MessageRow({ message, identity, renderContent, labels }) {
         statusLabel: isFailed ? labels.responseFailed : ""
       }
     ),
-    hasText && (renderContent?.(message) ?? /* @__PURE__ */ jsxRuntime.jsx(ui.MarkdownRenderer, { isStreaming, children: message.content })),
+    hasText && (renderContent?.(message) ?? /* @__PURE__ */ jsxRuntime.jsx(
+      ChatMessageContent,
+      {
+        message,
+        labels,
+        onOpenCitation
+      }
+    )),
+    !hasText && message.stopped && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs italic text-muted-foreground", "data-testid": "chat-stopped", children: labels.stopped }),
     isStreaming && !hasText && /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
@@ -1517,6 +1749,11 @@ function ChatPage({
   emptyDescription,
   identity,
   renderContent,
+  onOpenCitation,
+  asideBreakpoint = DEFAULT_ASIDE_BREAKPOINT_REM,
+  fillHeight = false,
+  minHeight = 360,
+  compactHeader = false,
   accept,
   labels,
   className,
@@ -1527,9 +1764,40 @@ function ChatPage({
   const [draft, setDraft] = react.useState("");
   const [isAsideOpen, setIsAsideOpen] = react.useState(false);
   const [isAway, setIsAway] = react.useState(false);
+  const rootRef = react.useRef(null);
+  const headerRef = react.useRef(null);
+  const asideToggleRef = react.useRef(null);
+  const asideRef = react.useRef(null);
   const scrollRef = react.useRef(null);
   const fileRef = react.useRef(null);
   const textareaRef = react.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 = react.useCallback(() => setIsAsideOpen(false), []);
+  const isAsidePanelOpen = !!aside && !hasAsideColumn && isAsideOpen;
+  react.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,
@@ -1562,27 +1830,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__ */ jsxRuntime.jsx("h2", { className: "min-w-0 truncate text-sm font-semibold text-foreground", children: activeThread?.title || l.untitled });
+  const heading = compactHeader ? null : header ?? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "min-w-0 truncate text-sm font-semibold text-foreground", children: activeThread?.title || l.untitled });
   return /* @__PURE__ */ jsxRuntime.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": chunkMHVNT4J3_cjs.testIdOr(testIds?.root, { testId: "chat-page" }),
+      style: fillPx != null ? { height: fillPx } : void 0,
       className: ui.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__ */ jsxRuntime.jsx("div", { className: "hidden w-64 shrink-0 flex-col border-r border-border @3xl/chat:flex", children: /* @__PURE__ */ jsxRuntime.jsx(
+        hasListColumn && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-64 shrink-0 flex-col border-r border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
           ChatThreadList,
           {
             threads: chat.threads,
             activeId: chat.activeThreadId,
+            isLoading: chat.isLoadingThreads,
             labels: l,
             onSelect: chat.selectThread,
             onNew: chat.newThread,
@@ -1590,48 +1865,48 @@ function ChatPage({
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          hasHeader && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden min-w-0 flex-1 @3xl/chat:block", children: heading }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 @3xl/chat:hidden", children: [
-                    header ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 shrink", children: header }) : null,
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ChatThreadSelect,
-                      {
-                        threads: chat.threads,
-                        activeId: chat.activeThreadId,
-                        labels: l,
-                        onSelect: chat.selectThread
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      ui.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__ */ jsxRuntime.jsx(lucideReact.MessageSquarePlus, { className: "size-4", "aria-hidden": "true" })
-                      }
-                    )
-                  ] })
+                hasListColumn ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center", children: heading }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                  heading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 shrink", children: heading }) : null,
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ChatThreadSelect,
+                    {
+                      threads: chat.threads,
+                      activeId: chat.activeThreadId,
+                      labels: l,
+                      onSelect: chat.selectThread
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.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__ */ jsxRuntime.jsx(lucideReact.MessageSquarePlus, { className: "size-4", "aria-hidden": "true" })
+                    }
+                  )
                 ] }),
-                aside && /* @__PURE__ */ jsxRuntime.jsxs(
+                aside && !hasAsideColumn && /* @__PURE__ */ jsxRuntime.jsxs(
                   ui.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": chunkMHVNT4J3_cjs.testIdOr(testIds?.asideToggle, { testId: "chat-aside-toggle" }),
                     children: [
@@ -1644,15 +1919,6 @@ function ChatPage({
               ]
             }
           ),
-          aside && isAsideOpen && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
             MessageList.Root,
             {
@@ -1667,8 +1933,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__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: l.loadingDocuments }) : /* @__PURE__ */ jsxRuntime.jsx(
+                    className: "scrollbar-themed relative min-h-0 flex-1 overflow-y-auto overscroll-contain",
+                    children: isEmpty ? chat.isLoadingDocuments || chat.isLoadingThread ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                       ConversationEmpty,
                       {
                         hasDocuments,
@@ -1713,6 +1987,7 @@ function ChatPage({
                             message,
                             identity,
                             renderContent,
+                            onOpenCitation,
                             labels: l
                           }
                         ) }, message.id))
@@ -1745,6 +2020,14 @@ function ChatPage({
                 testId: chunkMHVNT4J3_cjs.testIdOr(testIds?.alert, { testId: "chat-alert" })
               }
             ),
+            chat.historyError && /* @__PURE__ */ jsxRuntime.jsx(
+              MessageAlert,
+              {
+                title: l.historyFailedTitle,
+                description: chat.historyError,
+                testId: "chat-history-alert"
+              }
+            ),
             chat.uploadError && /* @__PURE__ */ jsxRuntime.jsx(
               MessageAlert,
               {
@@ -1777,7 +2060,20 @@ function ChatPage({
                       testIds: { documents: testIds?.documents, upload: testIds?.upload }
                     }
                   ),
-                  trailing: /* @__PURE__ */ jsxRuntime.jsx(
+                  trailing: chat.isRunning && chat.stop ? /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.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__ */ jsxRuntime.jsx(lucideReact.Square, { className: "h-3.5 w-3.5 fill-current", "aria-hidden": "true" })
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
                     Composer.Send,
                     {
                       onSend: () => submit(),
@@ -1793,10 +2089,18 @@ function ChatPage({
         aside && /* @__PURE__ */ jsxRuntime.jsx(
           "aside",
           {
+            ref: asideRef,
+            id: "chat-page-aside",
             "aria-label": l.workflows,
             "data-slot": "chat-page-aside",
+            "data-mode": hasAsideColumn ? "column" : "panel",
             "data-testid": chunkMHVNT4J3_cjs.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: ui.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
           }
         ),
@@ -1847,7 +2151,7 @@ function AssistantDockToggle({
   const { isDockAvailable } = useChatSurface();
   const dock = useAssistantDock();
   if (!isDockAvailable) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkKHX2BX3S_cjs.ToolButton, { onClick: dock.toggle, label, active: dock.isOpen, "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "size-4", "aria-hidden": "true" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkVGOFFCMT_cjs.ToolButton, { onClick: dock.toggle, label, active: dock.isOpen, "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { className: "size-4", "aria-hidden": "true" }) });
 }
 function AssistantDock({
   chat,
@@ -1862,7 +2166,7 @@ function AssistantDock({
   const dock = useAssistantDock();
   if (!isDockAvailable) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkKHX2BX3S_cjs.Shell.Dock,
+    chunkVGOFFCMT_cjs.Shell.Dock,
     {
       isOpen: dock.isOpen,
       onOpenChange: dock.setOpen,
@@ -1881,7 +2185,7 @@ function AssistantDock({
           headerActions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             headerActions,
             !isMobile && /* @__PURE__ */ jsxRuntime.jsx(
-              chunkKHX2BX3S_cjs.ToolButton,
+              chunkVGOFFCMT_cjs.ToolButton,
               {
                 onClick: () => dock.setOpen(false),
                 label: closeLabel,
@@ -1899,9 +2203,11 @@ function AssistantDock({
 exports.AssistantDock = AssistantDock;
 exports.AssistantDockToggle = AssistantDockToggle;
 exports.ChatDocuments = ChatDocuments;
+exports.ChatMessageContent = ChatMessageContent;
 exports.ChatPage = ChatPage;
 exports.ChatThreadList = ChatThreadList;
 exports.ChatThreadSelect = ChatThreadSelect;
+exports.CitationMark = CitationMark;
 exports.Composer = Composer;
 exports.ComposerBranchingNotice = ComposerBranchingNotice;
 exports.ComposerContainer = ComposerContainer;
@@ -1948,5 +2254,5 @@ exports.useAssistantDock = useAssistantDock;
 exports.useChatSurface = useChatSurface;
 exports.useRegisterEmbeddedChat = useRegisterEmbeddedChat;
 exports.useStreamAnnouncement = useStreamAnnouncement;
-//# sourceMappingURL=chunk-YLOKCIQJ.cjs.map
-//# sourceMappingURL=chunk-YLOKCIQJ.cjs.map
+//# sourceMappingURL=chunk-5SLLMK5K.cjs.map
+//# sourceMappingURL=chunk-5SLLMK5K.cjs.map