@epicbagel/saas-kit 1.2.2 → 1.3.0

package/dist/chunk-JTI4244T.js

@@ -0,0 +1,143 @@
+"use client";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger
+} from "./chunk-4HWCNRK4.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "./chunk-3QT5VYZ3.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/responsive-dialog.tsx
+import * as React from "react";
+import { useMediaQuery } from "react-responsive";
+import { jsx } from "react/jsx-runtime";
+var DesktopContext = React.createContext(false);
+var useIsDesktop = () => React.useContext(DesktopContext);
+var DESKTOP_QUERY = { minWidth: 1024 };
+var ResponsiveDialog = ({ children, ...props }) => {
+  const isDesktop = useMediaQuery(DESKTOP_QUERY);
+  const Root = isDesktop ? Dialog : Drawer;
+  return /* @__PURE__ */ jsx(DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ jsx(Root, { ...props, children }) });
+};
+ResponsiveDialog.displayName = "ResponsiveDialog";
+var ResponsiveDialogTrigger = ({
+  children,
+  ...props
+}) => {
+  const Trigger = useIsDesktop() ? DialogTrigger : DrawerTrigger;
+  return /* @__PURE__ */ jsx(Trigger, { ...props, children });
+};
+ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
+var ResponsiveDialogClose = ({
+  children,
+  ...props
+}) => {
+  const Close = useIsDesktop() ? DialogClose : DrawerClose;
+  return /* @__PURE__ */ jsx(Close, { ...props, children });
+};
+ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
+var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
+  if (useIsDesktop()) {
+    return /* @__PURE__ */ jsx(
+      DialogContent,
+      {
+        ref,
+        className: cn(
+          "flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
+          presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DrawerContent,
+    {
+      ref,
+      className: cn("max-h-[92vh]", className),
+      ...props,
+      children
+    }
+  );
+});
+ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
+var ResponsiveDialogHeader = ({
+  className,
+  visibility = "visible",
+  ...props
+}) => {
+  const Header = useIsDesktop() ? DialogHeader : DrawerHeader;
+  return /* @__PURE__ */ jsx(
+    Header,
+    {
+      className: cn(useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
+      ...props
+    }
+  );
+};
+ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
+var ResponsiveDialogBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
+ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
+var ResponsiveDialogFooter = ({
+  className,
+  layout = "auto",
+  ...props
+}) => {
+  const isDesktop = useIsDesktop();
+  const Footer = isDesktop ? DialogFooter : DrawerFooter;
+  return /* @__PURE__ */ jsx(
+    Footer,
+    {
+      className: cn(
+        "mt-0 shrink-0 gap-2 border-t bg-background p-4",
+        layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
+var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Title = useIsDesktop() ? DialogTitle : DrawerTitle;
+  return /* @__PURE__ */ jsx(Title, { ref, className: cn(visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
+var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Description = useIsDesktop() ? DialogDescription : DrawerDescription;
+  return /* @__PURE__ */ jsx(Description, { ref, className: cn(visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+
+export {
+  ResponsiveDialog,
+  ResponsiveDialogTrigger,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogHeader,
+  ResponsiveDialogBody,
+  ResponsiveDialogFooter,
+  ResponsiveDialogTitle,
+  ResponsiveDialogDescription
+};

package/dist/chunk-QEJ2STIV.js

@@ -0,0 +1,53 @@
+"use client";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/image.tsx
+import { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var fitStyles = { cover: "object-cover", contain: "object-contain" };
+var radiusStyles = { none: "", sm: "rounded-sm", md: "rounded-md", xl: "rounded-xl", full: "rounded-full" };
+var Image = forwardRef(function Image2({ fit = "cover", frameHeight, radius = "none", width = "auto", align = "start", border = false, shadow = "none", emphasis = "full", loadingIndicator = "none", className, onLoad, onError, src, ...props }, ref) {
+  const [loaded, setLoaded] = useState(loadingIndicator === "none" || !src);
+  useEffect(() => {
+    setLoaded(loadingIndicator === "none" || !src);
+  }, [loadingIndicator, src]);
+  const loading = loadingIndicator === "pulse" && !loaded;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      className: cn(
+        fitStyles[fit],
+        radiusStyles[radius],
+        frameHeight === "sm" && "h-16",
+        frameHeight === "md" && "h-28",
+        width === "full" && "w-full",
+        width === "preview" && "w-full max-w-[380px]",
+        width === "preview-lg" && "w-full max-w-[440px]",
+        align === "center" && "mx-auto",
+        border && "border",
+        shadow === "subtle" && "shadow-xs",
+        loading && "animate-pulse bg-muted",
+        emphasis === "soft-until-parent-hover" && "transition-opacity duration-200 md:opacity-70 md:group-hover:opacity-100",
+        className
+      ),
+      src,
+      ...props,
+      "aria-busy": loading || void 0,
+      onLoad: (event) => {
+        setLoaded(true);
+        onLoad?.(event);
+      },
+      onError: (event) => {
+        setLoaded(true);
+        onError?.(event);
+      }
+    }
+  );
+});
+
+export {
+  Image
+};

package/dist/chunk-VLXPLKFR.cjs

@@ -0,0 +1,55 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _chunkVKIGJNJRcjs = require('./chunk-VKIGJNJR.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/code-block.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var HEIGHTS = {
+  none: "",
+  sm: "max-h-40 overflow-y-auto",
+  md: "max-h-64 overflow-y-auto",
+  lg: "max-h-96 overflow-y-auto",
+  viewport: "min-h-[55vh] max-h-[65vh] overflow-y-auto"
+};
+function CodeBlock({
+  children,
+  copy,
+  copyLabel,
+  wrap = false,
+  maxHeight = "none",
+  className
+}) {
+  const copyText = typeof copy === "string" ? copy : children;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "relative", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "pre",
+      {
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "rounded-md border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed",
+          wrap ? "whitespace-pre-wrap break-words" : "overflow-x-auto",
+          HEIGHTS[maxHeight],
+          copy ? "pr-12" : void 0
+        ),
+        children
+      }
+    ),
+    copy ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkVKIGJNJRcjs.CopyButton,
+      {
+        text: copyText,
+        label: copyLabel,
+        size: "sm",
+        variant: "ghost",
+        className: "absolute right-1.5 top-1.5"
+      }
+    ) : null
+  ] });
+}
+
+
+
+exports.CodeBlock = CodeBlock;

package/dist/primitives/chat.cjs

@@ -15,19 +15,19 @@ var _chunkSUB4BAYEcjs = require('../chunk-SUB4BAYE.cjs');
 
 
 
-var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
 
+var _chunkXABXUP6Lcjs = require('../chunk-XABXUP6L.cjs');
 
 
 
-var _chunkXABXUP6Lcjs = require('../chunk-XABXUP6L.cjs');
+var _chunk2AU7ZRGXcjs = require('../chunk-2AU7ZRGX.cjs');
 
 
 
-var _chunk2AU7ZRGXcjs = require('../chunk-2AU7ZRGX.cjs');
+var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
@@ -36,12 +36,12 @@ var _chunkRIWLAMMEcjs = require('../chunk-RIWLAMME.cjs');
 require('../chunk-2HV2KKOE.cjs');
 
 
-var _chunkKENBU3NVcjs = require('../chunk-KENBU3NV.cjs');
-require('../chunk-ELPV44S6.cjs');
 
+var _chunkKADJ56AHcjs = require('../chunk-KADJ56AH.cjs');
 
 
-var _chunkKADJ56AHcjs = require('../chunk-KADJ56AH.cjs');
+var _chunkKENBU3NVcjs = require('../chunk-KENBU3NV.cjs');
+require('../chunk-ELPV44S6.cjs');
 
 
 
@@ -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]
   );

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

package/dist/primitives/chat.js

@@ -12,10 +12,6 @@ import {
   Suggestion,
   Suggestions
 } from "../chunk-THWIJG5C.js";
-import {
-  Marker,
-  MarkerContent
-} from "../chunk-IW4ZIXXG.js";
 import {
   MessageScroller,
   MessageScrollerButton,
@@ -28,20 +24,24 @@ import {
   Message,
   MessageContent
 } from "../chunk-JZOBIPFC.js";
+import {
+  Marker,
+  MarkerContent
+} from "../chunk-IW4ZIXXG.js";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupTextarea
 } from "../chunk-MHYAVXOE.js";
 import "../chunk-6FC65AZQ.js";
-import {
-  LazyMarkdown
-} from "../chunk-VY5U4VGV.js";
-import "../chunk-INNGGLMZ.js";
 import {
   FileDropArea,
   FileDropzone
 } from "../chunk-M7FYGAGO.js";
+import {
+  LazyMarkdown
+} from "../chunk-VY5U4VGV.js";
+import "../chunk-INNGGLMZ.js";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -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 = formatRelativeLong(message.createdAt, now);
+    const opens = relativeTime && relativeTime !== previous ? relativeTime : null;
+    previous = relativeTime;
+    return opens;
+  });
+}
 function TimelineMarker({ label }) {
   return /* @__PURE__ */ jsx(Marker, { variant: "separator", role: "separator", "aria-label": label, children: /* @__PURE__ */ jsx(MarkerContent, { children: label }) });
 }
+function ChatRunningLine({
+  label,
+  align = "start",
+  workspace
+}) {
+  return /* @__PURE__ */ jsx(Message, { align, children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ jsx(TraceLine, { status: "running", children: /* @__PURE__ */ jsx(TraceTitle, { children: label }) }) }) }) });
+}
 var ChatThread = forwardRef(
   function ChatThread2({
     messages,
@@ -136,7 +155,7 @@ var ChatThread = forwardRef(
     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__ */ jsx(MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ jsxs(
@@ -155,10 +174,18 @@ var ChatThread = forwardRef(
               children: [
                 messages.map((m, index) => {
                   const isUser = m.role === "user";
+                  if (m.status === "running") {
+                    return /* @__PURE__ */ jsx(MessageScrollerItem, { children: /* @__PURE__ */ jsx(
+                      ChatRunningLine,
+                      {
+                        label: m.text || pendingLabel,
+                        align: isUser ? "end" : "start",
+                        workspace
+                      }
+                    ) }, m.id);
+                  }
                   const isFullWidth = m.width === "full";
-                  const relativeTime = formatRelativeLong(m.createdAt, timelineNow);
-                  const previousRelativeTime = formatRelativeLong(messages[index - 1]?.createdAt, timelineNow);
-                  const startsTimelineSection = relativeTime && relativeTime !== previousRelativeTime;
+                  const marker = markers[index];
                   return /* @__PURE__ */ jsxs(
                     MessageScrollerItem,
                     {
@@ -166,7 +193,7 @@ var ChatThread = forwardRef(
                       scrollAnchor: m.id === anchorId,
                       className: cn("flex flex-col", workspace ? "gap-5" : "gap-3"),
                       children: [
-                        startsTimelineSection ? /* @__PURE__ */ jsx(TimelineMarker, { label: relativeTime }) : null,
+                        marker ? /* @__PURE__ */ jsx(TimelineMarker, { label: marker }) : null,
                         /* @__PURE__ */ jsx(Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ jsxs(MessageContent, { children: [
                           (m.content || m.text) && /* @__PURE__ */ jsx(
                             Bubble,
@@ -202,7 +229,7 @@ var ChatThread = forwardRef(
                     m.id
                   );
                 }),
-                pending && /* @__PURE__ */ jsx(MessageScrollerItem, { children: /* @__PURE__ */ jsx(Message, { align: "start", children: /* @__PURE__ */ jsx(MessageContent, { children: /* @__PURE__ */ jsx(Trace, { className: workspace ? void 0 : "px-3.5 py-2", children: /* @__PURE__ */ jsx(TraceLine, { status: "running", children: /* @__PURE__ */ jsx(TraceTitle, { children: pendingLabel }) }) }) }) }) }),
+                pending && /* @__PURE__ */ jsx(MessageScrollerItem, { children: /* @__PURE__ */ jsx(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.