@epicbagel/saas-kit 1.2.1 → 1.2.3

package/README.md

@@ -135,6 +135,31 @@ public in 1.1.0, and these were the decisions about its props then:
 - The drop handling follows AI SDK Elements' `PromptInput` and its
   `globalDrop` (Apache-2.0; see `THIRD_PARTY_NOTICES.md`).
 
+### A reply in the background (1.2.3)
+
+- **A running turn.** `pending` does two things: it ends the thread on the
+  running line, and it locks the composer. A reply worked on in the
+  background, while the user keeps writing, needs only the first. Put a turn
+  with `status: "running"` in `messages`, and the thread draws the line
+  `pending` draws, labelled with the turn's `text` (else `pendingLabel`),
+  where the turn sits, while the composer stays free. Replace it with the
+  reply when that lands.
+
+  ```tsx
+  <Chat
+    messages={[
+      ...messages,
+      ...(replyOwed ? [{ id: "reply", role: "assistant", status: "running", text: "Reading your files…" } as const] : []),
+    ]}
+    onSend={send}
+  />
+  ```
+
+- **It is not a message.** The row is the one `pending` draws: its own row
+  of the log, which announces it as it appears, with no message id, so the
+  scroller neither anchors it nor tracks it. It has no time marker, files or
+  rich `content`, and the turns either side of it keep their time grouping.
+
 ## License
 
 MIT. Some components and styles are adapted from shadcn/ui, and the file

package/dist/{chunk-RSFEKQDR.cjs → chunk-J467F76I.cjs}

@@ -12,7 +12,9 @@ var gapStyles = {
   sm: "gap-2",
   compact: "gap-3",
   md: "gap-4",
-  lg: "gap-6"
+  lg: "gap-6",
+  xl: "gap-10",
+  "2xl": "gap-18"
 };
 var directionStyles = {
   vertical: "flex flex-col",

package/dist/{chunk-HRLP4BHJ.js → chunk-KYQPX754.js}

@@ -7,16 +7,16 @@ import {
 } from "./chunk-J3GQXM37.js";
 import {
   FilterBar
-} from "./chunk-MLHNYRFX.js";
-import {
-  Heading
-} from "./chunk-H2O6NMLZ.js";
+} from "./chunk-PVZ4JGDU.js";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
 } from "./chunk-ZRLUUZHK.js";
+import {
+  Heading
+} from "./chunk-H2O6NMLZ.js";
 import {
   BoardColumnComponent,
   MobileBoardView
@@ -24,15 +24,15 @@ import {
 import {
   ScrollArea
 } from "./chunk-LELFPLTE.js";
+import {
+  useIsMobile
+} from "./chunk-PIU5SSUV.js";
 import {
   Input
 } from "./chunk-QMA3WVB7.js";
 import {
   Button
 } from "./chunk-HQRWRRZJ.js";
-import {
-  useIsMobile
-} from "./chunk-PIU5SSUV.js";
 import {
   cn
 } from "./chunk-G6SRSWXB.js";

package/dist/{chunk-IH3COANJ.cjs → chunk-N6V3DDKU.cjs}

@@ -7,16 +7,16 @@ var _chunkPNWNU6JWcjs = require('./chunk-PNWNU6JW.cjs');
 var _chunkFNDBM67Kcjs = require('./chunk-FNDBM67K.cjs');
 
 
-var _chunkSGW4FWBXcjs = require('./chunk-SGW4FWBX.cjs');
+var _chunkCYH63OCLcjs = require('./chunk-CYH63OCL.cjs');
 
 
-var _chunkLELBCBDTcjs = require('./chunk-LELBCBDT.cjs');
 
 
 
+var _chunkU2NES7VRcjs = require('./chunk-U2NES7VR.cjs');
 
 
-var _chunkU2NES7VRcjs = require('./chunk-U2NES7VR.cjs');
+var _chunkLELBCBDTcjs = require('./chunk-LELBCBDT.cjs');
 
 
 
@@ -26,13 +26,13 @@ var _chunkYYFVG5A6cjs = require('./chunk-YYFVG5A6.cjs');
 var _chunkXLIAY56Vcjs = require('./chunk-XLIAY56V.cjs');
 
 
-var _chunkPQUSJEXLcjs = require('./chunk-PQUSJEXL.cjs');
+var _chunkR35FT53Gcjs = require('./chunk-R35FT53G.cjs');
 
 
-var _chunkL4DH72UFcjs = require('./chunk-L4DH72UF.cjs');
+var _chunkPQUSJEXLcjs = require('./chunk-PQUSJEXL.cjs');
 
 
-var _chunkR35FT53Gcjs = require('./chunk-R35FT53G.cjs');
+var _chunkL4DH72UFcjs = require('./chunk-L4DH72UF.cjs');
 
 
 var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
@@ -268,7 +268,7 @@ function ResourceList({
   const controlsVisible = !(hideControlsWhenEmpty && !loading && !error && _optionalChain([data, 'optionalAccess', _5 => _5.length]) === 0);
   const filterOnQuickRow = filterBarVisible && !toolbarHasOtherControls && hasQuickFilters;
   const filterBarNode = filterBarVisible ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkSGW4FWBXcjs.FilterBar,
+    _chunkCYH63OCLcjs.FilterBar,
     {
       filters: filterSchema,
       onFiltersChange,

package/dist/{chunk-6RVPQGYS.js → chunk-WNWBKEWV.js}

@@ -12,7 +12,9 @@ var gapStyles = {
   sm: "gap-2",
   compact: "gap-3",
   md: "gap-4",
-  lg: "gap-6"
+  lg: "gap-6",
+  xl: "gap-10",
+  "2xl": "gap-18"
 };
 var directionStyles = {
   vertical: "flex flex-col",

package/dist/primitives/activity-feed.cjs

@@ -4,13 +4,13 @@
 var _chunkKGFL3VWYcjs = require('../chunk-KGFL3VWY.cjs');
 
 
+var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
+require('../chunk-VGTINL5Q.cjs');
 
 
-var _chunkWABCLRBRcjs = require('../chunk-WABCLRBR.cjs');
 
 
-var _chunkPQUSJEXLcjs = require('../chunk-PQUSJEXL.cjs');
-require('../chunk-VGTINL5Q.cjs');
+var _chunkWABCLRBRcjs = require('../chunk-WABCLRBR.cjs');
 require('../chunk-I6GUOEBO.cjs');
 
 

package/dist/primitives/activity-feed.js

@@ -2,15 +2,15 @@
 import {
   ChipTabs
 } from "../chunk-QD63LB2F.js";
+import {
+  Input
+} from "../chunk-QMA3WVB7.js";
+import "../chunk-H7TETFLB.js";
 import {
   Avatar,
   AvatarFallback,
   AvatarImage
 } from "../chunk-3OWGL4Q2.js";
-import {
-  Input
-} from "../chunk-QMA3WVB7.js";
-import "../chunk-H7TETFLB.js";
 import "../chunk-D4ZL2OEQ.js";
 import {
   EmptyState

package/dist/primitives/board-view.cjs

@@ -2,26 +2,26 @@
 "use client";
 
 
-var _chunkIH3COANJcjs = require('../chunk-IH3COANJ.cjs');
+var _chunkN6V3DDKUcjs = require('../chunk-N6V3DDKU.cjs');
 require('../chunk-PNWNU6JW.cjs');
 require('../chunk-FNDBM67K.cjs');
-require('../chunk-SGW4FWBX.cjs');
+require('../chunk-CYH63OCL.cjs');
 require('../chunk-PPX2VPGI.cjs');
 require('../chunk-WNXVGUBF.cjs');
 require('../chunk-IQZLUT2Y.cjs');
-require('../chunk-LELBCBDT.cjs');
-require('../chunk-R5L4CM6V.cjs');
 require('../chunk-U2NES7VR.cjs');
 require('../chunk-JH4GAGOQ.cjs');
+require('../chunk-LELBCBDT.cjs');
 require('../chunk-YYFVG5A6.cjs');
 require('../chunk-XLIAY56V.cjs');
 require('../chunk-V5SPFLKW.cjs');
+require('../chunk-R5L4CM6V.cjs');
+require('../chunk-R35FT53G.cjs');
 require('../chunk-PQUSJEXL.cjs');
 require('../chunk-VGTINL5Q.cjs');
 require('../chunk-I6GUOEBO.cjs');
 require('../chunk-VBPPFC7X.cjs');
 require('../chunk-L4DH72UF.cjs');
-require('../chunk-R35FT53G.cjs');
 require('../chunk-KWLSBTB2.cjs');
 
 // src/primitives/board-view.tsx
@@ -57,7 +57,7 @@ function BoardView({
   onSortChange
 }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkIH3COANJcjs.ResourceList,
+    _chunkN6V3DDKUcjs.ResourceList,
     {
       data,
       loading,

package/dist/primitives/board-view.js

@@ -2,26 +2,26 @@
 "use client";
 import {
   ResourceList
-} from "../chunk-HRLP4BHJ.js";
+} from "../chunk-KYQPX754.js";
 import "../chunk-LI5EOSQG.js";
 import "../chunk-J3GQXM37.js";
-import "../chunk-MLHNYRFX.js";
+import "../chunk-PVZ4JGDU.js";
 import "../chunk-G76JANB4.js";
 import "../chunk-YG7FBJRM.js";
 import "../chunk-E2TQMDO7.js";
-import "../chunk-H2O6NMLZ.js";
-import "../chunk-RRRD5EUI.js";
 import "../chunk-ZRLUUZHK.js";
 import "../chunk-OICAYRVH.js";
+import "../chunk-H2O6NMLZ.js";
 import "../chunk-62UTAG2C.js";
 import "../chunk-LELFPLTE.js";
 import "../chunk-J6NXDZR5.js";
+import "../chunk-RRRD5EUI.js";
+import "../chunk-PIU5SSUV.js";
 import "../chunk-QMA3WVB7.js";
 import "../chunk-H7TETFLB.js";
 import "../chunk-D4ZL2OEQ.js";
 import "../chunk-YEW65ASC.js";
 import "../chunk-HQRWRRZJ.js";
-import "../chunk-PIU5SSUV.js";
 import "../chunk-G6SRSWXB.js";
 
 // src/primitives/board-view.tsx

package/dist/primitives/chat.cjs

@@ -10,12 +10,11 @@ var _chunk2BTDBZYNcjs = require('../chunk-2BTDBZYN.cjs');
 var _chunkEOUO3OROcjs = require('../chunk-EOUO3ORO.cjs');
 
 
-
-var _chunkSUB4BAYEcjs = require('../chunk-SUB4BAYE.cjs');
+var _chunkH2UFRLLNcjs = require('../chunk-H2UFRLLN.cjs');
 
 
 
-var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
+var _chunkSUB4BAYEcjs = require('../chunk-SUB4BAYE.cjs');
 
 
 
@@ -30,24 +29,29 @@ var _chunkXABXUP6Lcjs = require('../chunk-XABXUP6L.cjs');
 var _chunk2AU7ZRGXcjs = require('../chunk-2AU7ZRGX.cjs');
 
 
+var _chunkKENBU3NVcjs = require('../chunk-KENBU3NV.cjs');
+require('../chunk-ELPV44S6.cjs');
 
 
-var _chunkRIWLAMMEcjs = require('../chunk-RIWLAMME.cjs');
-require('../chunk-2HV2KKOE.cjs');
 
+var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
-var _chunkKENBU3NVcjs = require('../chunk-KENBU3NV.cjs');
-require('../chunk-ELPV44S6.cjs');
 
 
 
-var _chunkKADJ56AHcjs = require('../chunk-KADJ56AH.cjs');
+var _chunkRIWLAMMEcjs = require('../chunk-RIWLAMME.cjs');
+require('../chunk-2HV2KKOE.cjs');
+
+
+
+var _chunk6OTAGP2Icjs = require('../chunk-6OTAGP2I.cjs');
 
 
 
 
 
 var _chunkZAITUDYDcjs = require('../chunk-ZAITUDYD.cjs');
+require('../chunk-U2NES7VR.cjs');
 
 
 
@@ -65,7 +69,9 @@ require('../chunk-W5HPHEE7.cjs');
 
 
 var _chunk32Q4XOTUcjs = require('../chunk-32Q4XOTU.cjs');
-require('../chunk-U2NES7VR.cjs');
+
+
+var _chunkR35FT53Gcjs = require('../chunk-R35FT53G.cjs');
 
 
 var _chunk2KFZQJH5cjs = require('../chunk-2KFZQJH5.cjs');
@@ -75,12 +81,6 @@ require('../chunk-PQUSJEXL.cjs');
 var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
 
 
-var _chunkR35FT53Gcjs = require('../chunk-R35FT53G.cjs');
-
-
-var _chunkH2UFRLLNcjs = require('../chunk-H2UFRLLN.cjs');
-
-
 var _chunkKWLSBTB2cjs = require('../chunk-KWLSBTB2.cjs');
 
 // src/primitives/chat.tsx
@@ -114,13 +114,32 @@ function useArrivingUserTurnId(messages) {
   }, [messages]);
   for (let i = messages.length - 1; i >= 0; i--) {
     const message = messages[i];
-    if (message.role === "user") return seen.current.has(message.id) ? void 0 : message.id;
+    if (message.role === "user" && message.status !== "running") {
+      return seen.current.has(message.id) ? void 0 : message.id;
+    }
   }
   return void 0;
 }
+function timelineMarkers(messages, now) {
+  let previous = null;
+  return messages.map((message) => {
+    if (message.status === "running") return null;
+    const relativeTime = _chunkH2UFRLLNcjs.formatRelativeLong.call(void 0, message.createdAt, now);
+    const opens = relativeTime && relativeTime !== previous ? relativeTime : null;
+    previous = relativeTime;
+    return opens;
+  });
+}
 function TimelineMarker({ label }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB765DSRGcjs.Marker, { variant: "separator", role: "separator", "aria-label": label, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkB765DSRGcjs.MarkerContent, { children: label }) });
 }
+function ChatRunningLine({
+  label,
+  align = "start",
+  workspace
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.Message, { align, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.MessageContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceLine, { status: "running", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceTitle, { children: label }) }) }) }) });
+}
 var ChatThread = _react.forwardRef.call(void 0, 
   function ChatThread2({
     messages,
@@ -136,7 +155,7 @@ var ChatThread = _react.forwardRef.call(void 0,
     attachmentAction = "open",
     className
   }, ref) {
-    const timelineNow = /* @__PURE__ */ new Date();
+    const markers = timelineMarkers(messages, /* @__PURE__ */ new Date());
     const anchorId = useArrivingUserTurnId(messages);
     const workspace = appearance === "workspace";
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -155,10 +174,18 @@ var ChatThread = _react.forwardRef.call(void 0,
               children: [
                 messages.map((m, index) => {
                   const isUser = m.role === "user";
+                  if (m.status === "running") {
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                      ChatRunningLine,
+                      {
+                        label: m.text || pendingLabel,
+                        align: isUser ? "end" : "start",
+                        workspace
+                      }
+                    ) }, m.id);
+                  }
                   const isFullWidth = m.width === "full";
-                  const relativeTime = _chunkH2UFRLLNcjs.formatRelativeLong.call(void 0, m.createdAt, timelineNow);
-                  const previousRelativeTime = _chunkH2UFRLLNcjs.formatRelativeLong.call(void 0, _optionalChain([messages, 'access', _ => _[index - 1], 'optionalAccess', _2 => _2.createdAt]), timelineNow);
-                  const startsTimelineSection = relativeTime && relativeTime !== previousRelativeTime;
+                  const marker = markers[index];
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                     _chunkXABXUP6Lcjs.MessageScrollerItem,
                     {
@@ -166,7 +193,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                       scrollAnchor: m.id === anchorId,
                       className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col", workspace ? "gap-5" : "gap-3"),
                       children: [
-                        startsTimelineSection ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimelineMarker, { label: relativeTime }) : null,
+                        marker ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimelineMarker, { label: marker }) : null,
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2AU7ZRGXcjs.MessageContent, { children: [
                           (m.content || m.text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             _chunkV4YWTRLDcjs.Bubble,
@@ -202,7 +229,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2AU7ZRGXcjs.MessageContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceLine, { status: "running", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2BTDBZYNcjs.TraceTitle, { children: pendingLabel }) }) }) }) }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatRunningLine, { label: pendingLabel, workspace }) }),
                 footer && // Always painted: content-visibility:auto would contain the
                 // footer's paint and layout, clipping a ring or shadow at its
                 // edge and re-parenting anything fixed inside it.
@@ -258,7 +285,7 @@ function ChatAttachmentList({
             {
               "aria-label": `${verb} ${attachment.name}`,
               title: `${verb} ${attachment.name}`,
-              onClick: () => _optionalChain([onOpen, 'optionalCall', _3 => _3(attachment)]),
+              onClick: () => _optionalChain([onOpen, 'optionalCall', _ => _(attachment)]),
               className: "rounded-xl focus-visible:ring-2 focus-visible:ring-ring/50"
             }
           ),
@@ -403,7 +430,7 @@ function ChatInput({
                     "data-slot": "chat-input-actions",
                     onClick: (event) => {
                       if (!event.currentTarget.contains(event.target)) return;
-                      if (!event.target.closest("button")) _optionalChain([ref, 'access', _4 => _4.current, 'optionalAccess', _5 => _5.focus, 'call', _6 => _6()]);
+                      if (!event.target.closest("button")) _optionalChain([ref, 'access', _2 => _2.current, 'optionalAccess', _3 => _3.focus, 'call', _4 => _4()]);
                     },
                     className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                       "gap-2",
@@ -421,7 +448,7 @@ function ChatInput({
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Plus, { className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "h-5 w-5") })
                           }
                         ) }),
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuContent, { align: "start", side: "top", className: "min-w-52", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenuItem, { onSelect: () => _optionalChain([fileInputRef, 'access', _7 => _7.current, 'optionalAccess', _8 => _8.click, 'call', _9 => _9()]), children: [
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuContent, { align: "start", side: "top", className: "min-w-52", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenuItem, { onSelect: () => _optionalChain([fileInputRef, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.click, 'call', _7 => _7()]), children: [
                           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Paperclip, { className: "h-4 w-4" }),
                           addFilesLabel
                         ] }) })
@@ -652,14 +679,14 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
         else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
         else console.error(cause);
       }
-      window.setTimeout(() => _optionalChain([inputRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.focus, 'call', _12 => _12()]), 0);
+      window.setTimeout(() => _optionalChain([inputRef, 'access', _8 => _8.current, 'optionalAccess', _9 => _9.focus, 'call', _10 => _10()]), 0);
     },
     [attachments, mode, onSend, onSendError, pending]
   );
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      focusInput: () => _optionalChain([inputRef, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15()]),
+      focusInput: () => _optionalChain([inputRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]),
       clearInput: () => setInput("")
     }),
     []
@@ -667,7 +694,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const dropFiles = _react.useCallback.call(void 0, 
     (files) => {
       if (!conversationStarted && mode === "voice") setUserMode("text");
-      return _optionalChain([onFilesSelected, 'optionalCall', _16 => _16(files)]);
+      return _optionalChain([onFilesSelected, 'optionalCall', _14 => _14(files)]);
     },
     [conversationStarted, mode, onFilesSelected]
   );
@@ -676,7 +703,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const showEmptyFileDropzone = emptyFileDropzone && Boolean(onFilesSelected) && attachments.length === 0;
   const showEmptyPending = !conversationStarted && pending && Boolean(emptyPendingContent);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkKADJ56AHcjs.FileDropArea,
+    _chunk6OTAGP2Icjs.FileDropArea,
     {
       "data-slot": "chat",
       "data-layout": layout,
@@ -744,7 +771,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                 ),
                 children: [
                   showEmptyFileDropzone && onFilesSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkKADJ56AHcjs.FileDropzone,
+                    _chunk6OTAGP2Icjs.FileDropzone,
                     {
                       multiple: true,
                       onFiles: onFilesSelected,

package/dist/primitives/chat.d.cts

@@ -34,12 +34,26 @@ type ChatMessage = {
     content?: ReactNode;
     /** Files that belong to this turn. */
     attachments?: ReadonlyArray<ChatAttachment>;
+    /**
+     * `"running"`: a reply still being worked on. The thread draws the turn as
+     * its running line, the one `pending` adds at the end, labelled with `text`
+     * (else the thread's `pendingLabel`), where the turn sits in `messages`.
+     * Unlike `pending`, it leaves the composer free, so use it for a reply
+     * worked on in the background while the user can keep writing; replace it
+     * with the reply when that lands. The line is not a message: it has no time
+     * marker, files or rich `content`, and the scroller neither anchors nor
+     * tracks it.
+     */
+    status?: "running";
 };
 interface ChatThreadProps {
     messages: ChatMessage[];
-    /** Show a running line (`pendingLabel`) at the end of the thread. */
+    /**
+     * Show a running line (`pendingLabel`) at the end of the thread. A turn with
+     * `status: "running"` draws the same line where it sits in `messages`.
+     */
     pending?: boolean;
-    /** The running line while a reply is pending. Defaults to "Thinking…". */
+    /** The running line while a reply is pending, and a running turn's without `text`. Defaults to "Thinking…". */
     pendingLabel?: string;
     /** Accessible name of the scroll-to-latest button. Defaults to "Scroll to latest message". */
     scrollButtonLabel?: string;
@@ -80,7 +94,7 @@ interface ChatThreadProps {
  * button appears whenever the reader is away from the end. Turns with a
  * `createdAt` are grouped under relative-time markers ("2 days ago"), and a
  * pending reply shows as a running trace line, which the log announces as it
- * appears.
+ * appears. A turn with `status: "running"` draws the same line in its place.
  */
 declare const ChatThread: React$1.ForwardRefExoticComponent<ChatThreadProps & React$1.RefAttributes<HTMLDivElement>>;
 interface ChatInputProps {
@@ -170,9 +184,14 @@ interface ChatProps {
      * failure itself, with `error`.
      */
     onSendError?: (error: unknown) => void;
-    /** Whether an in-flight request is pending. Disables input and shows a running line (`pendingLabel`). */
+    /**
+     * Whether an in-flight request is pending. Disables input and shows a
+     * running line (`pendingLabel`) at the end of the thread. To show that line
+     * and leave the composer free, as for a reply worked on in the background,
+     * put a turn with `status: "running"` in `messages` instead.
+     */
     pending?: boolean;
-    /** The running line while a reply is pending. Defaults to "Thinking…". */
+    /** The running line while a reply is pending, and a running turn's without `text`. Defaults to "Thinking…". */
     pendingLabel?: string;
     /**
      * Replaces the empty composer while its first message is in flight. Use for

package/dist/primitives/chat.d.ts

@@ -34,12 +34,26 @@ type ChatMessage = {
     content?: ReactNode;
     /** Files that belong to this turn. */
     attachments?: ReadonlyArray<ChatAttachment>;
+    /**
+     * `"running"`: a reply still being worked on. The thread draws the turn as
+     * its running line, the one `pending` adds at the end, labelled with `text`
+     * (else the thread's `pendingLabel`), where the turn sits in `messages`.
+     * Unlike `pending`, it leaves the composer free, so use it for a reply
+     * worked on in the background while the user can keep writing; replace it
+     * with the reply when that lands. The line is not a message: it has no time
+     * marker, files or rich `content`, and the scroller neither anchors nor
+     * tracks it.
+     */
+    status?: "running";
 };
 interface ChatThreadProps {
     messages: ChatMessage[];
-    /** Show a running line (`pendingLabel`) at the end of the thread. */
+    /**
+     * Show a running line (`pendingLabel`) at the end of the thread. A turn with
+     * `status: "running"` draws the same line where it sits in `messages`.
+     */
     pending?: boolean;
-    /** The running line while a reply is pending. Defaults to "Thinking…". */
+    /** The running line while a reply is pending, and a running turn's without `text`. Defaults to "Thinking…". */
     pendingLabel?: string;
     /** Accessible name of the scroll-to-latest button. Defaults to "Scroll to latest message". */
     scrollButtonLabel?: string;
@@ -80,7 +94,7 @@ interface ChatThreadProps {
  * button appears whenever the reader is away from the end. Turns with a
  * `createdAt` are grouped under relative-time markers ("2 days ago"), and a
  * pending reply shows as a running trace line, which the log announces as it
- * appears.
+ * appears. A turn with `status: "running"` draws the same line in its place.
  */
 declare const ChatThread: React$1.ForwardRefExoticComponent<ChatThreadProps & React$1.RefAttributes<HTMLDivElement>>;
 interface ChatInputProps {
@@ -170,9 +184,14 @@ interface ChatProps {
      * failure itself, with `error`.
      */
     onSendError?: (error: unknown) => void;
-    /** Whether an in-flight request is pending. Disables input and shows a running line (`pendingLabel`). */
+    /**
+     * Whether an in-flight request is pending. Disables input and shows a
+     * running line (`pendingLabel`) at the end of the thread. To show that line
+     * and leave the composer free, as for a reply worked on in the background,
+     * put a turn with `status: "running"` in `messages` instead.
+     */
     pending?: boolean;
-    /** The running line while a reply is pending. Defaults to "Thinking…". */
+    /** The running line while a reply is pending, and a running turn's without `text`. Defaults to "Thinking…". */
     pendingLabel?: string;
     /**
      * Replaces the empty composer while its first message is in flight. Use for