@epicbagel/saas-kit 1.5.0 → 1.7.0

package/dist/primitives/chat.cjs

@@ -7,11 +7,11 @@
 var _chunk2BTDBZYNcjs = require('../chunk-2BTDBZYN.cjs');
 
 
-var _chunkEOUO3OROcjs = require('../chunk-EOUO3ORO.cjs');
+var _chunkLKPM6DQPcjs = require('../chunk-LKPM6DQP.cjs');
 
 
 
-var _chunkSUB4BAYEcjs = require('../chunk-SUB4BAYE.cjs');
+var _chunkM4V7OJNFcjs = require('../chunk-M4V7OJNF.cjs');
 
 
 
@@ -19,13 +19,13 @@ var _chunkSUB4BAYEcjs = require('../chunk-SUB4BAYE.cjs');
 
 
 
-var _chunkXABXUP6Lcjs = require('../chunk-XABXUP6L.cjs');
+var _chunk5VMKDVB6cjs = require('../chunk-5VMKDVB6.cjs');
 
 
 
 
 
-var _chunkLAN3K2JIcjs = require('../chunk-LAN3K2JI.cjs');
+var _chunkNWDPH2Z7cjs = require('../chunk-NWDPH2Z7.cjs');
 
 
 
@@ -34,12 +34,12 @@ var _chunkB765DSRGcjs = require('../chunk-B765DSRG.cjs');
 
 
 
-var _chunkRIWLAMMEcjs = require('../chunk-RIWLAMME.cjs');
+var _chunk7LDJAXRXcjs = require('../chunk-7LDJAXRX.cjs');
 require('../chunk-2HV2KKOE.cjs');
 
 
 
-var _chunkKADJ56AHcjs = require('../chunk-KADJ56AH.cjs');
+var _chunkZ3JJSNR5cjs = require('../chunk-Z3JJSNR5.cjs');
 
 
 var _chunkKENBU3NVcjs = require('../chunk-KENBU3NV.cjs');
@@ -66,7 +66,7 @@ require('../chunk-W5HPHEE7.cjs');
 
 
 
-var _chunk32Q4XOTUcjs = require('../chunk-32Q4XOTU.cjs');
+var _chunkFYRQFEU4cjs = require('../chunk-FYRQFEU4.cjs');
 require('../chunk-U2NES7VR.cjs');
 
 
@@ -74,7 +74,7 @@ var _chunk2KFZQJH5cjs = require('../chunk-2KFZQJH5.cjs');
 require('../chunk-PQUSJEXL.cjs');
 
 
-var _chunkL4DH72UFcjs = require('../chunk-L4DH72UF.cjs');
+var _chunkJDEXZGIYcjs = require('../chunk-JDEXZGIY.cjs');
 
 
 var _chunk4LXN6GLZcjs = require('../chunk-4LXN6GLZ.cjs');
@@ -149,7 +149,7 @@ function ChatRunningLine({
   align = "start",
   workspace
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.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 }) }) }) }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.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({
@@ -170,15 +170,15 @@ var ChatThread = _react.forwardRef.call(void 0,
     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, 
-      _chunkXABXUP6Lcjs.MessageScroller,
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerProvider, { autoScroll: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunk5VMKDVB6cjs.MessageScroller,
       {
         ref,
         style: { maxHeight },
         className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0", className),
         children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkXABXUP6Lcjs.MessageScrollerContent,
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerViewport, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _chunk5VMKDVB6cjs.MessageScrollerContent,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                 workspace ? "mx-auto w-full max-w-3xl gap-10 px-4 py-6 md:px-6 md:py-8" : "gap-2.5 px-px py-px"
@@ -187,7 +187,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                 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, 
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                       ChatRunningLine,
                       {
                         label: m.text || pendingLabel,
@@ -200,14 +200,14 @@ var ChatThread = _react.forwardRef.call(void 0,
                   const marker = markers[index];
                   const actions = messageActions && offersActions(m) ? messageActions(m) : null;
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                    _chunkXABXUP6Lcjs.MessageScrollerItem,
+                    _chunk5VMKDVB6cjs.MessageScrollerItem,
                     {
                       messageId: m.id,
                       scrollAnchor: m.id === anchorId,
                       className: _chunkKWLSBTB2cjs.cn.call(void 0, "flex flex-col", workspace ? "gap-5" : "gap-3"),
                       children: [
                         marker ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TimelineMarker, { label: marker }) : null,
-                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLAN3K2JIcjs.MessageContent, { children: [
+                        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: isUser ? "end" : "start", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: [
                           (m.content || m.text) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                             _chunkV4YWTRLDcjs.Bubble,
                             {
@@ -241,7 +241,7 @@ var ChatThread = _react.forwardRef.call(void 0,
                             // button's inset, so the first icon lines up with
                             // the text above it.
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                              _chunkLAN3K2JIcjs.MessageActions,
+                              _chunkNWDPH2Z7cjs.MessageActions,
                               {
                                 className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                                   workspace && (isUser ? "-me-2 pointer-coarse:-me-3.5" : "-ms-2 pointer-coarse:-ms-3.5")
@@ -256,15 +256,15 @@ 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, ChatRunningLine, { label: pendingLabel, workspace }) }),
+                pending && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.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.
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLAN3K2JIcjs.MessageContent, { children: footer }) }) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerItem, { className: "[content-visibility:visible]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.Message, { align: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNWDPH2Z7cjs.MessageContent, { children: footer }) }) })
               ]
             }
           ) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXABXUP6Lcjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk5VMKDVB6cjs.MessageScrollerButton, { variant: "outline", className: "rounded-full shadow-sm", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowDown, { className: "h-4 w-4" }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only", children: scrollButtonLabel })
           ] })
@@ -284,7 +284,7 @@ function ChatCopyAction({
   const text = message.text;
   if (!text) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkLAN3K2JIcjs.MessageAction,
+    _chunkNWDPH2Z7cjs.MessageAction,
     {
       tooltip: copied ? copiedLabel : label,
       "data-copied": copied || void 0,
@@ -320,18 +320,18 @@ function ChatAttachmentList({
   className
 }) {
   const { verb, icon: ActionIcon } = ATTACHMENT_ACTIONS[openAction];
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentGroup, { className: _chunkKWLSBTB2cjs.cn.call(void 0, "gap-2 px-3 pt-3", className), children: attachments.map((attachment) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentGroup, { className: _chunkKWLSBTB2cjs.cn.call(void 0, "gap-2 px-3 pt-3", className), children: attachments.map((attachment) => {
     const state = _nullishCoalesce(attachment.state, () => ( "done"));
     const opens = Boolean(onOpen) && state === "done";
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunk32Q4XOTUcjs.Attachment,
+      _chunkFYRQFEU4cjs.Attachment,
       {
         state,
         size: "sm",
         className: "min-w-[12rem] rounded-xl p-2",
         children: [
           opens && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk32Q4XOTUcjs.AttachmentTrigger,
+            _chunkFYRQFEU4cjs.AttachmentTrigger,
             {
               "aria-label": `${verb} ${attachment.name}`,
               title: `${verb} ${attachment.name}`,
@@ -339,13 +339,13 @@ function ChatAttachmentList({
               className: "rounded-xl focus-visible:ring-2 focus-visible:ring-ring/50"
             }
           ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentMedia, { variant: "icon", className: "h-9 w-9 rounded-lg bg-muted", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FileText, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk32Q4XOTUcjs.AttachmentContent, { className: "px-2", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentTitle, { className: "text-xs font-medium", children: attachment.name }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentDescription, { className: "text-[11px]", children: state === "uploading" ? uploadingLabel : opens ? `${formatFileSize(attachment.size)} \xB7 ${verb}` : formatFileSize(attachment.size) })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentMedia, { variant: "icon", className: "h-9 w-9 rounded-lg bg-muted", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FileText, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkFYRQFEU4cjs.AttachmentContent, { className: "px-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentTitle, { className: "text-xs font-medium", children: attachment.name }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentDescription, { className: "text-[11px]", children: state === "uploading" ? uploadingLabel : opens ? `${formatFileSize(attachment.size)} \xB7 ${verb}` : formatFileSize(attachment.size) })
           ] }),
-          onRemove ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentActions, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk32Q4XOTUcjs.AttachmentAction,
+          onRemove ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentActions, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkFYRQFEU4cjs.AttachmentAction,
             {
               type: "button",
               "aria-label": `Remove ${attachment.name}`,
@@ -354,7 +354,7 @@ function ChatAttachmentList({
             }
           ) }) : opens ? (
             // The trigger covers the whole file; the icon only says what it does.
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk32Q4XOTUcjs.AttachmentActions, { "aria-hidden": true, className: "pointer-events-none pr-1 text-muted-foreground", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActionIcon, { className: "h-4 w-4" }) })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkFYRQFEU4cjs.AttachmentActions, { "aria-hidden": true, className: "pointer-events-none pr-1 text-muted-foreground", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActionIcon, { className: "h-4 w-4" }) })
           ) : null
         ]
       },
@@ -385,12 +385,15 @@ function ChatInput({
   multiple = true,
   addFilesLabel = "Add files",
   appearance = "default",
+  compactOnBlur = false,
   helperText,
   privacyNote
 }) {
   const internalRef = _react.useRef.call(void 0, null);
   const ref = _nullishCoalesce(inputRef, () => ( internalRef));
   const fileInputRef = _react.useRef.call(void 0, null);
+  const [editing, setEditing] = _react.useState.call(void 0, false);
+  const focusVersion = _react.useRef.call(void 0, 0);
   const isDisabled = pending || disabled;
   const attachmentsReady = attachments.length > 0 && attachments.every((item) => item.state !== "uploading");
   const canSubmit = !isDisabled && (Boolean(value.trim()) || attachmentsReady);
@@ -401,13 +404,27 @@ function ChatInput({
   };
   const spacious = appearance === "spacious";
   const composerSize = COMPOSER_SIZES[size];
+  const compact = compactOnBlur && !editing && value.length === 0 && attachments.length === 0;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "chat-input-container", className: "w-full", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "form",
       {
         "data-slot": "chat-input",
         "data-appearance": appearance,
+        "data-compact": compact || void 0,
         className: "w-full",
+        onFocusCapture: (event) => {
+          focusVersion.current += 1;
+          if (event.nativeEvent.target === ref.current) setEditing(true);
+        },
+        onBlurCapture: (event) => {
+          if (event.currentTarget.contains(event.relatedTarget)) return;
+          const form = event.currentTarget;
+          const blurredAt = ++focusVersion.current;
+          queueMicrotask(() => {
+            if (form.isConnected && focusVersion.current === blurredAt) setEditing(false);
+          });
+        },
         onSubmit: (event) => {
           if (event.target !== event.currentTarget) return;
           event.preventDefault();
@@ -430,7 +447,7 @@ function ChatInput({
             }
           ),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            _chunkRIWLAMMEcjs.InputGroup,
+            _chunk7LDJAXRXcjs.InputGroup,
             {
               className: _chunkKWLSBTB2cjs.cn.call(void 0, 
                 // Opaque in both modes: the input group's own dark:bg-input/30
@@ -450,7 +467,7 @@ function ChatInput({
                   }
                 ),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkRIWLAMMEcjs.InputGroupTextarea,
+                  _chunk7LDJAXRXcjs.InputGroupTextarea,
                   {
                     ref,
                     value,
@@ -462,39 +479,42 @@ function ChatInput({
                       submit();
                     },
                     placeholder,
-                    rows: composerSize.rows,
+                    rows: compact ? 1 : composerSize.rows,
+                    wrap: compact ? "off" : void 0,
                     disabled: isDisabled,
                     autoFocus,
                     className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-                      composerSize.minHeight,
+                      compact ? "h-[44px] min-h-[44px] max-h-[44px] min-w-0 field-sizing-fixed overflow-hidden whitespace-nowrap text-ellipsis" : composerSize.minHeight,
                       // Grows with the text, then scrolls rather than pushing the thread away.
-                      "max-h-48 leading-relaxed disabled:opacity-70 placeholder:text-sm",
-                      spacious ? "px-6 pb-2 pt-6" : "px-4 py-3.5"
+                      "leading-relaxed disabled:opacity-70 placeholder:text-sm",
+                      !compact && "max-h-48",
+                      compact ? "px-4 py-2" : spacious ? "px-6 pb-2 pt-6" : "px-4 py-3.5"
                     )
                   }
                 ),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                  _chunkRIWLAMMEcjs.InputGroupAddon,
+                  _chunk7LDJAXRXcjs.InputGroupAddon,
                   {
-                    align: "block-end",
+                    align: compact ? "inline-end" : "block-end",
                     "data-slot": "chat-input-actions",
                     onClick: (event) => {
                       if (!event.currentTarget.contains(event.target)) return;
                       if (!event.target.closest("button")) _optionalChain([ref, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.focus, 'call', _5 => _5()]);
                     },
                     className: _chunkKWLSBTB2cjs.cn.call(void 0, 
-                      "gap-2",
-                      spacious ? "px-5 pb-5 pt-1" : "border-t border-border px-3 py-2.5"
+                      compact ? "shrink-0 gap-0 p-1" : "gap-2",
+                      !compact && (spacious ? "px-5 pb-5 pt-1" : "border-t border-border px-3 py-2.5")
                     ),
                     children: [
                       onFilesSelected && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkZAITUDYDcjs.DropdownMenu, { children: [
                         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZAITUDYDcjs.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          _chunkL4DH72UFcjs.Button,
+                          _chunkJDEXZGIYcjs.Button,
                           {
                             type: "button",
-                            size: spacious ? "icon-lg" : "icon",
+                            size: spacious && !compact ? "icon-lg" : "icon",
                             variant: "ghost",
                             "aria-label": "Add to conversation",
+                            className: compactOnBlur ? "min-h-[44px] min-w-[44px] shrink-0" : void 0,
                             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Plus, { className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "h-5 w-5") })
                           }
                         ) }),
@@ -504,44 +524,48 @@ function ChatInput({
                         ] }) })
                       ] }),
                       voice && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkEOUO3OROcjs.VoiceDictationButton,
+                        _chunkLKPM6DQPcjs.VoiceDictationButton,
                         {
                           size: "icon",
                           title: voiceTitle,
                           lang: voiceLang,
                           onCommit: (text) => onSend(text),
-                          className: spacious ? "h-12 w-12 border-transparent bg-transparent shadow-none hover:bg-muted" : void 0
+                          className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+                            spacious && "border-transparent bg-transparent shadow-none hover:bg-muted",
+                            spacious && !compact && "h-12 w-12",
+                            compactOnBlur && "min-h-[44px] min-w-[44px] shrink-0"
+                          )
                         }
                       ),
                       helperText ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                         "span",
                         {
                           "data-slot": "chat-input-helper",
-                          className: "min-w-0 flex-1 truncate px-1 text-center text-xs font-normal text-muted-foreground sm:px-2 sm:text-sm",
+                          className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-w-0 flex-1 truncate px-1 text-center text-xs font-normal text-muted-foreground sm:px-2 sm:text-sm", compact && "hidden"),
                           children: helperText
                         }
-                      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1" }),
+                      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: compact ? "hidden" : "flex-1" }),
                       submitLabel ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-                        _chunkL4DH72UFcjs.Button,
+                        _chunkJDEXZGIYcjs.Button,
                         {
                           type: "submit",
                           disabled: !canSubmit,
                           "data-chat-action": "submit",
-                          className: spacious ? "rounded-xl" : void 0,
+                          className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "rounded-xl", compactOnBlur && "min-h-[44px] min-w-[44px] shrink-0"),
                           children: [
                             submitLabel,
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowRight, { className: "ml-2 h-4 w-4" })
                           ]
                         }
                       ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkL4DH72UFcjs.Button,
+                        _chunkJDEXZGIYcjs.Button,
                         {
                           type: "submit",
-                          size: spacious ? "icon-lg" : "icon",
+                          size: spacious && !compact ? "icon-lg" : "icon",
                           disabled: !canSubmit,
                           "aria-label": "Send",
                           "data-chat-action": "submit",
-                          className: spacious ? "rounded-xl" : void 0,
+                          className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "rounded-xl", compactOnBlur && "min-h-[44px] min-w-[44px] shrink-0"),
                           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ArrowUp, { className: _chunkKWLSBTB2cjs.cn.call(void 0, spacious && "h-5 w-5") })
                         }
                       )
@@ -577,7 +601,7 @@ function VoiceHero({
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-5 py-6", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkEOUO3OROcjs.VoiceDictationButton,
+      _chunkLKPM6DQPcjs.VoiceDictationButton,
       {
         size: "lg",
         title: voiceTitle,
@@ -605,27 +629,40 @@ var EXAMPLE_PROMPT_LAYOUTS = {
   row: "row",
   cards: "grid"
 };
-function ExamplePrompts({
-  prompts,
+function ChatSuggestions({
+  slot,
+  items,
   onSelect,
-  label = "Try",
+  label,
+  showLabel = true,
   variant = "chips",
+  disabled = false,
   className
 }) {
   const labelId = _react.useId.call(void 0, );
-  if (prompts.length === 0) return null;
+  if (items.length === 0) return null;
   const cards = variant === "cards";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": "chat-examples", "data-variant": variant, className: _chunkKWLSBTB2cjs.cn.call(void 0, cards ? "mt-4" : "mt-3", className), children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: labelId, "data-slot": "chat-examples-label", className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSUB4BAYEcjs.Suggestions, { role: "group", "aria-labelledby": labelId, layout: EXAMPLE_PROMPT_LAYOUTS[variant], children: prompts.map((prompt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkSUB4BAYEcjs.Suggestion,
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { "data-slot": slot, "data-variant": variant, className, children: [
+    showLabel && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { id: labelId, "data-slot": `${slot}-label`, className: "mb-2 text-left text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkM4V7OJNFcjs.Suggestions,
       {
-        suggestion: prompt,
-        onClick: onSelect,
-        className: cards ? "h-auto min-h-12 px-3 py-2.5 text-xs" : void 0
-      },
-      prompt
-    )) })
+        role: "group",
+        "aria-labelledby": showLabel ? labelId : void 0,
+        "aria-label": showLabel ? void 0 : label,
+        layout: EXAMPLE_PROMPT_LAYOUTS[variant],
+        children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkM4V7OJNFcjs.Suggestion,
+          {
+            suggestion: item,
+            onClick: onSelect,
+            disabled,
+            className: cards ? "h-auto min-h-12 px-3 py-2.5 text-xs" : void 0
+          },
+          item
+        ))
+      }
+    )
   ] });
 }
 function ExamplePromptsLoading({ label, className }) {
@@ -669,6 +706,8 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   examplePromptsVariant = "chips",
   examplePromptsLoading = false,
   examplePromptsLoadingLabel = "Loading suggestions\u2026",
+  replySuggestions = [],
+  replySuggestionsLabel = "Suggested replies",
   compactEmptyState = false,
   defaultMode,
   placeholder = "Type your message\u2026",
@@ -681,6 +720,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   addFilesLabel,
   uploadingLabel,
   composerAppearance = "default",
+  mobileCompactComposer = false,
   composerHelperText,
   composerPrivacyNote,
   emptyFileDropzone = false,
@@ -714,6 +754,14 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const conversationStarted = messages.length > 0;
   const [userMode, setUserMode] = _react.useState.call(void 0, null);
   const mode = _nullishCoalesce(_nullishCoalesce(userMode, () => ( defaultMode)), () => ( (isMobile ? "voice" : "text")));
+  const reportSendError = _react.useCallback.call(void 0, 
+    (cause) => {
+      if (onSendError) onSendError(cause);
+      else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
+      else console.error(cause);
+    },
+    [onSendError]
+  );
   const send = _react.useCallback.call(void 0, 
     async (text, sentAttachments = attachments) => {
       const trimmed = text.trim();
@@ -726,18 +774,29 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
           setInput((current) => current ? current : trimmed);
           if (mode === "voice") setUserMode("text");
         }
-        if (onSendError) onSendError(cause);
-        else if (typeof globalThis.reportError === "function") globalThis.reportError(cause);
-        else console.error(cause);
+        reportSendError(cause);
       }
       window.setTimeout(() => _optionalChain([inputRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.focus, 'call', _11 => _11()]), 0);
     },
-    [attachments, mode, onSend, onSendError, pending]
+    [attachments, mode, onSend, pending, reportSendError]
+  );
+  const sendSuggestion = _react.useCallback.call(void 0, 
+    async (text) => {
+      const trimmed = text.trim();
+      if (!trimmed || pending) return;
+      try {
+        await onSend(trimmed, []);
+      } catch (cause) {
+        reportSendError(cause);
+      }
+      window.setTimeout(() => _optionalChain([inputRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.focus, 'call', _14 => _14()]), 0);
+    },
+    [onSend, pending, reportSendError]
   );
   _react.useImperativeHandle.call(void 0, 
     ref,
     () => ({
-      focusInput: () => _optionalChain([inputRef, 'access', _12 => _12.current, 'optionalAccess', _13 => _13.focus, 'call', _14 => _14()]),
+      focusInput: () => _optionalChain([inputRef, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.focus, 'call', _17 => _17()]),
       clearInput: () => setInput("")
     }),
     []
@@ -745,7 +804,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', _15 => _15(files)]);
+      return _optionalChain([onFilesSelected, 'optionalCall', _18 => _18(files)]);
     },
     [conversationStarted, mode, onFilesSelected]
   );
@@ -754,7 +813,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,
+    _chunkZ3JJSNR5cjs.FileDropArea,
     {
       "data-slot": "chat",
       "data-layout": layout,
@@ -822,7 +881,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                 ),
                 children: [
                   showEmptyFileDropzone && onFilesSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkKADJ56AHcjs.FileDropzone,
+                    _chunkZ3JJSNR5cjs.FileDropzone,
                     {
                       multiple: true,
                       onFiles: onFilesSelected,
@@ -873,12 +932,14 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                   error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ChatError, { children: error }),
                   !pending && examplePromptsLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ExamplePromptsLoading, { label: examplePromptsLoadingLabel }),
                   !pending && !examplePromptsLoading && examplePrompts.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    ExamplePrompts,
+                    ChatSuggestions,
                     {
-                      prompts: examplePrompts,
-                      onSelect: (p) => void send(p),
+                      slot: "chat-examples",
+                      items: examplePrompts,
+                      onSelect: (prompt) => void sendSuggestion(prompt),
                       label: examplePromptsLabel,
-                      variant: examplePromptsVariant
+                      variant: examplePromptsVariant,
+                      className: examplePromptsVariant === "cards" ? "mt-4" : "mt-3"
                     }
                   ),
                   emptyFooter && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-slot": "chat-empty-footer", className: "mt-5", children: emptyFooter })
@@ -917,9 +978,22 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
             className: _chunkKWLSBTB2cjs.cn.call(void 0, 
               "pt-3",
               application && "px-4 py-3 md:bg-transparent md:px-0 md:pb-0 md:backdrop-blur-none md:supports-backdrop-filter:bg-transparent",
-              workspace && "border-0 bg-gradient-to-t from-background via-background to-transparent px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-8 backdrop-blur-none supports-[backdrop-filter]:bg-gradient-to-t"
+              workspace && "border-0 bg-gradient-to-t from-background via-background to-transparent px-4 pb-[max(1.25rem,env(safe-area-inset-bottom))] pt-8 backdrop-blur-none supports-[backdrop-filter]:bg-gradient-to-t",
+              workspace && mobileCompactComposer && "max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] max-md:pt-3"
             ),
             children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                ChatSuggestions,
+                {
+                  slot: "chat-replies",
+                  items: replySuggestions,
+                  onSelect: (reply) => void sendSuggestion(reply),
+                  label: replySuggestionsLabel,
+                  showLabel: false,
+                  disabled: pending,
+                  className: _chunkKWLSBTB2cjs.cn.call(void 0, "mb-3", workspace && "mx-auto max-w-3xl")
+                }
+              ),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 ChatInput,
                 {
@@ -940,6 +1014,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
                   addFilesLabel,
                   uploadingLabel,
                   appearance: composerAppearance,
+                  compactOnBlur: mobileCompactComposer && isMobile,
                   helperText: composerHelperText,
                   privacyNote: composerPrivacyNote,
                   className: workspace ? "mx-auto max-w-3xl rounded-3xl shadow-sm" : void 0