@sybilion/uilib 1.3.39 → 1.3.41

package/README.md

@@ -108,15 +108,7 @@ Runtime dependencies are listed in `[package.json](./package.json)`.
 yarn publish:npm    # @sybilion/uilib
 ```
 
-runs `yarn build` before `npm publish`.
-
-**GitHub `github:` consumers:** after changing library **source**, regenerate and commit the prebuilt output:
-
-```bash
-yarn build
-```
-
-Then commit the updated `dist/` tree so GitHub installs stay up to date.
+runs `yarn build` before `npm publish`. `dist/` is build output only (not committed); consumers install prebuilt artifacts from the npm registry.
 
 ## Integration notes (injected props)
 
@@ -131,7 +123,6 @@ These areas expect the **app** to supply behavior or data (not vendored from pro
 
 ## Scripts (this repo)
 
-
 | Script                | Description                                 |
 | --------------------- | ------------------------------------------- |
 | `yarn dev`            | Webpack dev server for the docs app         |
@@ -143,5 +134,3 @@ These areas expect the **app** to supply behavior or data (not vendored from pro
 | `yarn ts`             | Typecheck (`tsc --noEmit`)                  |
 | `yarn tests`          | Jest smoke tests                            |
 | `yarn release`        | `standard-version` (bump changelog + tag)   |
-
-

package/dist/esm/components/ui/Chat/ChatChrome/ChatChrome.js

@@ -20,9 +20,9 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
     const attachmentAccept = useMemo(() => buildAcceptAttr(filteredAllowedAttachments, allowPdfAttachments), [filteredAllowedAttachments, allowPdfAttachments]);
     const [pendingAttachments, setPendingAttachments] = useState([]);
     const [isExtractingAttachments, setIsExtractingAttachments] = useState(false);
-    const promptBusy = isLoading || isExtractingAttachments;
+    const promptDisabled = isExtractingAttachments;
     const handleAttachmentFiles = useCallback((files) => {
-        if (promptBusy || files.length === 0)
+        if (promptDisabled || files.length === 0)
             return;
         setIsExtractingAttachments(true);
         void extractChatAttachmentItems(files, allowPdfAttachments)
@@ -35,7 +35,7 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
             // Extraction failed (parse error, size limit, etc.); skip staging.
         })
             .finally(() => setIsExtractingAttachments(false));
-    }, [allowPdfAttachments, promptBusy]);
+    }, [allowPdfAttachments, promptDisabled]);
     const handleRemoveAttachment = useCallback((index) => {
         setPendingAttachments(prev => prev.filter((_, i) => i !== index));
     }, []);
@@ -66,9 +66,9 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
         if (inner)
             setTimeout(scrollToBottom, 100);
     }, [isEmpty, messages.length]);
-    return (jsxs("div", { className: S.root, children: [showResizeHandle && resizeHandle ? (jsx(PanelResizeHandle, { edge: "leading", isActive: resizeHandle.isActive, startWidthPx: resizeHandle.startWidthPx, getShellWidth: resizeHandle.getShellWidth, onDragWidth: resizeHandle.onDragWidth, onDragComplete: resizeHandle.onDragComplete, className: cn(SidebarStem.sidebarResizeHandle, S.chatResizeHandle) })) : null, jsx("div", { className: S.panelHeader, children: onClose ? (jsx(Button, { type: "button", variant: "ghost", icon: true, className: S.panelClose, "aria-label": "Close chat", onClick: onClose, children: jsx(X, { className: "size-4" }) })) : null }), jsxs("div", { className: S.content, children: [attachmentsDropzoneEnabled ? (jsx(DropZone, { accept: attachmentAccept, label: "Drop text files to attach", multiple: true, ghost: true, overlayScope: "container", disabled: promptBusy, className: S.attachmentDropzone, onFiles: handleAttachmentFiles })) : null, jsxs(Chat, { isEmpty: isEmpty, scopeId: effectiveScopeId, onChatDeleted: onChatDeleted, children: [isEmpty ? (jsxs(Fragment, { children: [jsx(Chat.EmptyState, { ...emptyState }), renderPresets('fixed')] })) : (jsx("div", { className: S.scrollWrapper, children: jsxs(Scroll, { y: true, yScrollbarClassName: S.scrollbar, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 56, after: 180 } }, fadeSize: "m", autoHide: true, ref: scrollRef, children: [messages.map((msg, index, arr) => {
+    return (jsxs("div", { className: S.root, children: [showResizeHandle && resizeHandle ? (jsx(PanelResizeHandle, { edge: "leading", isActive: resizeHandle.isActive, startWidthPx: resizeHandle.startWidthPx, getShellWidth: resizeHandle.getShellWidth, onDragWidth: resizeHandle.onDragWidth, onDragComplete: resizeHandle.onDragComplete, className: cn(SidebarStem.sidebarResizeHandle, S.chatResizeHandle) })) : null, jsx("div", { className: S.panelHeader, children: onClose ? (jsx(Button, { type: "button", variant: "ghost", icon: true, className: S.panelClose, "aria-label": "Close chat", onClick: onClose, children: jsx(X, { className: "size-4" }) })) : null }), jsxs("div", { className: S.content, children: [attachmentsDropzoneEnabled ? (jsx(DropZone, { accept: attachmentAccept, label: "Drop text files to attach", multiple: true, ghost: true, overlayScope: "container", disabled: promptDisabled, className: S.attachmentDropzone, onFiles: handleAttachmentFiles })) : null, jsxs(Chat, { isEmpty: isEmpty, scopeId: effectiveScopeId, onChatDeleted: onChatDeleted, children: [isEmpty ? (jsxs(Fragment, { children: [jsx(Chat.EmptyState, { ...emptyState }), renderPresets('fixed')] })) : (jsx("div", { className: S.scrollWrapper, children: jsxs(Scroll, { y: true, yScrollbarClassName: S.scrollbar, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 56, after: 180 } }, fadeSize: "m", autoHide: true, ref: scrollRef, children: [messages.map((msg, index, arr) => {
                                             const isLast = index === arr.length - 1;
-                                            return (jsx(Chat.Message, { role: msg.role, text: msg.text, userTextFileAttachments: msg.userTextFileAttachments, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: isLoading, isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
+                                            return (jsx(Chat.Message, { role: msg.role, text: msg.text, inProgress: msg.inProgress, userTextFileAttachments: msg.userTextFileAttachments, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: isLoading, isLastMessage: isLast, scriptContinue: isLast && scriptContinueLabel
                                                     ? { label: scriptContinueLabel }
                                                     : undefined, onScriptContinue: isLast && scriptContinueLabel
                                                     ? onScriptContinue
@@ -77,7 +77,7 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
                                                 const label = displayLabelForBranchKeyFromMessages(key, messages) ??
                                                     humanizeBranchKey(key);
                                                 return (jsx("span", { className: S.branchBtnWrap, children: jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: isLoading, onClick: () => onQuickReply(key, label), children: [jsx(PaperPlaneRightIcon, {}), label] }) }, key));
-                                            }) })) : null, showInlinePresets && renderPresets('inline'), isLoading && isLastMessageFromUser && (jsx(TextShimmer, { duration: 1, spread: 5, className: S.loader, children: "Thinking..." }))] }) })), jsxs("div", { className: cn(S.footer, footerClassName), children: [isEmpty ? (jsx("div", { className: S.notice, children: "Forecast Assistant can make mistakes." })) : null, jsx(Chat.Prompt, { onSubmit: handlePromptSubmitWithAttachments, disabled: promptBusy, attachments: pendingAttachments, onRemoveAttachment: handleRemoveAttachment, prefillMessage: promptPrefill ?? undefined, placeholder: promptPlaceholder, slashCommandItems: slashCommandItems, onSlashItemCommand: onSlashItemCommand, attachmentAccept: attachmentsDropzoneEnabled ? attachmentAccept : undefined, onAttachmentFiles: attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined })] })] })] })] }));
+                                            }) })) : null, showInlinePresets && renderPresets('inline'), isLoading && isLastMessageFromUser && (jsx(TextShimmer, { duration: 1, spread: 5, className: S.loader, children: "Thinking..." }))] }) })), jsxs("div", { className: cn(S.footer, footerClassName), children: [isEmpty ? (jsx("div", { className: S.notice, children: "Forecast Assistant can make mistakes." })) : null, jsx(Chat.Prompt, { onSubmit: handlePromptSubmitWithAttachments, disabled: promptDisabled, attachments: pendingAttachments, onRemoveAttachment: handleRemoveAttachment, prefillMessage: promptPrefill ?? undefined, placeholder: promptPlaceholder, slashCommandItems: slashCommandItems, onSlashItemCommand: onSlashItemCommand, attachmentAccept: attachmentsDropzoneEnabled ? attachmentAccept : undefined, onAttachmentFiles: attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined })] })] })] })] }));
 }
 
 export { ChatChrome };

package/dist/esm/components/ui/Chat/ChatMessage/ChatMessage.js

@@ -3,19 +3,20 @@ import cn from 'classnames';
 import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.js';
 import 'lucide-react';
 import '../../InteractiveContent/InteractiveContent.styl.js';
+import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
 import { MessageRole } from '../Chat.types.js';
 import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments.js';
 import { AgentMessageContent } from './AgentMessageContent.js';
 import S from './ChatMessage.styl.js';
 import { UserTextFileAttachmentBubble } from './UserTextFileAttachmentBubble.js';
 
-function ChatMessage({ role, text, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
+function ChatMessage({ role, text, inProgress, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage = true, scriptContinue, onScriptContinue, renderMessageChart, }) {
     const fileAttachments = userTextFileAttachmentsFromMessage({
         userTextFileAttachments,
     });
     const isAssistant = role === MessageRole.ASSISTANT;
     const isSystem = role === MessageRole.SYSTEM;
-    return (jsx("div", { className: cn(S.root, S[`role-${role}`]), children: isSystem ? (jsx("div", { className: S.text, children: text })) : isAssistant ? (jsx(AgentMessageContent, { text: text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: quickReplyDisabled, isLastMessage: isLastMessage, scriptContinue: scriptContinue, onScriptContinue: onScriptContinue, renderMessageChart: renderMessageChart })) : (jsxs("div", { className: S.userColumn, children: [jsx("div", { className: S.text, children: jsx(InteractiveContent, { text: text }) }), fileAttachments.map(attachment => (jsx(UserTextFileAttachmentBubble, { attachment: attachment }, `${attachment.displayName}:${attachment.filename}`)))] })) }));
+    return (jsx("div", { className: cn(S.root, S[`role-${role}`]), children: isSystem ? (jsx("div", { className: S.text, children: inProgress ? jsx(TextShimmer, { as: "span", children: text }) : text })) : isAssistant ? (jsx(AgentMessageContent, { text: text, onQuickReply: onQuickReply, suppressedQuickReplyKeys: suppressedQuickReplyKeys, quickReplyDisabled: quickReplyDisabled, isLastMessage: isLastMessage, scriptContinue: scriptContinue, onScriptContinue: onScriptContinue, renderMessageChart: renderMessageChart })) : (jsxs("div", { className: S.userColumn, children: [jsx("div", { className: S.text, children: jsx(InteractiveContent, { text: text }) }), fileAttachments.map(attachment => (jsx(UserTextFileAttachmentBubble, { attachment: attachment }, `${attachment.displayName}:${attachment.filename}`)))] })) }));
 }
 
 export { ChatMessage };

package/dist/esm/components/ui/Chat/ChatMessage/ChatMessage.styl.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".ChatMessage_root__6rnsF{background:var(--bg-secondary);display:flex;flex-direction:column;gap:var(--p-1);padding:var(--p-6)}.ChatMessage_text__Y1XNR{color:var(--text-secondary);font-size:var(--text-sm);max-width:100%;min-width:0;overflow-wrap:anywhere;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:-moz-fit-content;width:fit-content;word-break:break-word}.ChatMessage_role-user__u4JPV{align-items:flex-end;max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_userColumn__cQM6-{align-items:flex-end;display:flex;flex-direction:column;gap:var(--p-2);max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-slate-100);border-radius:var(--p-4);border-bottom-right-radius:0;box-sizing:border-box;overflow:hidden;padding:var(--p-3) var(--p-4);white-space:pre-wrap}.dark .ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-gray-800)}.ChatMessage_role-system__g13OP{align-items:center}.ChatMessage_role-system__g13OP .ChatMessage_text__Y1XNR{color:var(--muted-foreground);font-size:var(--text-xs);width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_text__Y1XNR{width:100%}.ChatMessage_role-assistant__wketE h3{line-height:2.4}.ChatMessage_role-assistant__wketE h4{font-size:1.1em;font-weight:600;line-height:2.2}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq{display:inline-block;margin-left:4px;margin-right:6px}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq:before{color:var(--text-secondary);content:\"•\";display:inline-block}.ChatMessage_role-assistant__wketE .ChatMessage_scrollHorizontal__Rms9n{max-width:100%}.ChatMessage_role-assistant__wketE table{border:1px solid var(--border);border-collapse:collapse;border-radius:var(--p-2);border-spacing:0;margin:var(--p-4) 0;overflow:hidden}.ChatMessage_role-assistant__wketE table td,.ChatMessage_role-assistant__wketE table th{border:1px solid var(--border);min-width:100px;padding:var(--p-1)}.ChatMessage_role-assistant__wketE table th{text-align:left}.ChatMessage_role-assistant__wketE ol,.ChatMessage_role-assistant__wketE ul{padding-left:var(--p-4)}.ChatMessage_role-assistant__wketE ul{list-style-type:disc}.ChatMessage_role-assistant__wketE ol{list-style-type:decimal}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{align-items:center;border:1px dashed var(--sb-slate-300);border-radius:8px;color:var(--foreground);display:inline-flex;font-size:var(--text-xs);gap:6px;margin:1px;max-width:100%;padding:2px 6px 2px 4px;text-decoration:none;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-slate-50);border-color:var(--sb-slate-400);border-style:solid}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{border-color:var(--sb-gray-600)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLinkLabel__PMU7e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_role-assistant__wketE .ChatMessage_quickReplyWrap__1UFyD{display:inline-block;margin:var(--p-1) var(--p-1) var(--p-1) 0;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_downloadButtons__RygM-{display:flex;gap:var(--p-2);margin-top:var(--p-4)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{align-items:center;background-color:var(--background);border-radius:var(--p-3);box-shadow:0 0 0 1px var(--border);cursor:pointer;display:flex;gap:var(--p-4);margin-top:var(--p-3);padding:var(--p-3);padding-right:var(--p-4);transition:all .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-800)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardIcon__jkxDJ{align-items:center;border-radius:var(--p-2);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardContent__PTPwz{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardTitle__K1wqr{font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardSubtitle__fVeF2{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}";
-var S = {"root":"ChatMessage_root__6rnsF","text":"ChatMessage_text__Y1XNR","role-user":"ChatMessage_role-user__u4JPV","userColumn":"ChatMessage_userColumn__cQM6-","role-system":"ChatMessage_role-system__g13OP","role-assistant":"ChatMessage_role-assistant__wketE","bullet":"ChatMessage_bullet__6vAhq","scrollHorizontal":"ChatMessage_scrollHorizontal__Rms9n","datasetAppLink":"ChatMessage_datasetAppLink__Pxy-T","datasetAppLinkLabel":"ChatMessage_datasetAppLinkLabel__PMU7e","quickReplyWrap":"ChatMessage_quickReplyWrap__1UFyD","downloadButtons":"ChatMessage_downloadButtons__RygM-","downloadCard":"ChatMessage_downloadCard__NsNRa","downloadCardIcon":"ChatMessage_downloadCardIcon__jkxDJ","downloadCardContent":"ChatMessage_downloadCardContent__PTPwz","downloadCardTitle":"ChatMessage_downloadCardTitle__K1wqr","downloadCardSubtitle":"ChatMessage_downloadCardSubtitle__fVeF2"};
+var css_248z = ".ChatMessage_root__6rnsF{background:var(--bg-secondary);display:flex;flex-direction:column;gap:var(--p-1);padding:var(--p-4);padding-bottom:var(--p-1)}.ChatMessage_text__Y1XNR{color:var(--text-secondary);font-size:var(--text-sm);max-width:100%;min-width:0;overflow-wrap:anywhere;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:-moz-fit-content;width:fit-content;word-break:break-word}.ChatMessage_role-assistant__wketE+.ChatMessage_role-assistant__wketE,.ChatMessage_role-system__g13OP+.ChatMessage_role-system__g13OP,.ChatMessage_role-user__u4JPV+.ChatMessage_role-user__u4JPV{padding-top:var(--p-1)}.ChatMessage_role-user__u4JPV{align-items:flex-end;max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_userColumn__cQM6-{align-items:flex-end;display:flex;flex-direction:column;gap:var(--p-2);max-width:100%;min-width:0}.ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-slate-100);border-radius:var(--p-4);border-bottom-right-radius:0;box-sizing:border-box;overflow:hidden;padding:var(--p-3) var(--p-4);white-space:pre-wrap}.dark .ChatMessage_role-user__u4JPV .ChatMessage_text__Y1XNR{background-color:var(--sb-gray-800)}.ChatMessage_role-system__g13OP{align-items:center}.ChatMessage_role-system__g13OP .ChatMessage_text__Y1XNR{color:var(--muted-foreground);width:100%}.ChatMessage_role-assistant__wketE .ChatMessage_text__Y1XNR{width:100%}.ChatMessage_role-assistant__wketE h3{line-height:2.4}.ChatMessage_role-assistant__wketE h4{font-size:1.1em;font-weight:600;line-height:2.2}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq{display:inline-block;margin-left:4px;margin-right:6px}.ChatMessage_role-assistant__wketE .ChatMessage_bullet__6vAhq:before{color:var(--text-secondary);content:\"•\";display:inline-block}.ChatMessage_role-assistant__wketE .ChatMessage_scrollHorizontal__Rms9n{max-width:100%}.ChatMessage_role-assistant__wketE table{border:1px solid var(--border);border-collapse:collapse;border-radius:var(--p-2);border-spacing:0;margin:var(--p-4) 0;overflow:hidden}.ChatMessage_role-assistant__wketE table td,.ChatMessage_role-assistant__wketE table th{border:1px solid var(--border);min-width:100px;padding:var(--p-1)}.ChatMessage_role-assistant__wketE table th{text-align:left}.ChatMessage_role-assistant__wketE ol,.ChatMessage_role-assistant__wketE ul{padding-left:var(--p-4)}.ChatMessage_role-assistant__wketE ul{list-style-type:disc}.ChatMessage_role-assistant__wketE ol{list-style-type:decimal}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{align-items:center;border:1px dashed var(--sb-slate-300);border-radius:8px;color:var(--foreground);display:inline-flex;font-size:var(--text-xs);gap:6px;margin:1px;max-width:100%;padding:2px 6px 2px 4px;text-decoration:none;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-slate-50);border-color:var(--sb-slate-400);border-style:solid}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T{border-color:var(--sb-gray-600)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLink__Pxy-T:hover{background-color:var(--sb-gray-900)}.ChatMessage_role-assistant__wketE .ChatMessage_datasetAppLinkLabel__PMU7e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ChatMessage_role-assistant__wketE .ChatMessage_quickReplyWrap__1UFyD{display:inline-block;margin:var(--p-1) var(--p-1) var(--p-1) 0;vertical-align:middle}.ChatMessage_role-assistant__wketE .ChatMessage_downloadButtons__RygM-{display:flex;gap:var(--p-2);margin-top:var(--p-4)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{align-items:center;background-color:var(--background);border-radius:var(--p-3);box-shadow:0 0 0 1px var(--border);cursor:pointer;display:flex;gap:var(--p-4);margin-top:var(--p-3);padding:var(--p-3);padding-right:var(--p-4);transition:all .15s;width:-moz-fit-content;width:fit-content}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .ChatMessage_role-assistant__wketE .ChatMessage_downloadCard__NsNRa:hover{background-color:var(--sb-gray-800)}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardIcon__jkxDJ{align-items:center;border-radius:var(--p-2);display:flex;flex-shrink:0;height:32px;justify-content:center;width:32px}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardContent__PTPwz{display:flex;flex:1;flex-direction:column;min-width:0}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardTitle__K1wqr{font-size:var(--text-base);font-weight:600;line-height:1.4}.ChatMessage_role-assistant__wketE .ChatMessage_downloadCardSubtitle__fVeF2{color:var(--muted-foreground);font-size:var(--text-sm);line-height:1.4}";
+var S = {"root":"ChatMessage_root__6rnsF","text":"ChatMessage_text__Y1XNR","role-user":"ChatMessage_role-user__u4JPV","role-assistant":"ChatMessage_role-assistant__wketE","role-system":"ChatMessage_role-system__g13OP","userColumn":"ChatMessage_userColumn__cQM6-","bullet":"ChatMessage_bullet__6vAhq","scrollHorizontal":"ChatMessage_scrollHorizontal__Rms9n","datasetAppLink":"ChatMessage_datasetAppLink__Pxy-T","datasetAppLinkLabel":"ChatMessage_datasetAppLinkLabel__PMU7e","quickReplyWrap":"ChatMessage_quickReplyWrap__1UFyD","downloadButtons":"ChatMessage_downloadButtons__RygM-","downloadCard":"ChatMessage_downloadCard__NsNRa","downloadCardIcon":"ChatMessage_downloadCardIcon__jkxDJ","downloadCardContent":"ChatMessage_downloadCardContent__PTPwz","downloadCardTitle":"ChatMessage_downloadCardTitle__K1wqr","downloadCardSubtitle":"ChatMessage_downloadCardSubtitle__fVeF2"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/components/ui/Chat/ChatPrompt/ChatPromptComposer.js

@@ -19,7 +19,7 @@ function ChatPromptComposer({ editor, disabled, trimmedMessage, attachments, att
     return (jsxs("div", { className: S.composer, children: [showAttachButton ? (jsxs(Fragment, { children: [jsx("input", { ref: fileInputRef, type: "file", accept: attachmentAccept, multiple: true, className: S.fileInput, disabled: disabled, onChange: handleFileInputChange }), jsx(Button, { type: "button", variant: "ghost", icon: true, size: "sm", className: S.attachButton, "aria-label": "Attach file", disabled: disabled, onClick: e => {
                             e.preventDefault();
                             fileInputRef.current?.click();
-                        }, children: jsx(PaperclipIcon, { size: 16 }) })] })) : null, jsx("div", { className: S.editorWrap, onKeyDown: onComposerKeyDown, children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }), jsx("div", { className: S.submitColumn, children: jsx(Button, { type: "submit", size: "sm", disabled: disabled || !canSubmit, children: jsx(SendHorizontalIcon, { size: 16 }) }) })] }));
+                        }, children: jsx(PaperclipIcon, { size: 16 }) })] })) : null, jsx("div", { className: S.editorWrap, onKeyDown: onComposerKeyDown, children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }), jsx("div", { className: S.submitColumn, children: jsx(Button, { type: "submit", size: "sm", disabled: disabled || !canSubmit, onMouseDown: e => e.preventDefault(), children: jsx(SendHorizontalIcon, { size: 16 }) }) })] }));
 }
 
 export { ChatPromptComposer };

package/dist/esm/components/ui/Chat/ChatPrompt/useChatPromptEditor.js

@@ -136,7 +136,7 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlash
     const resetAfterSend = useCallback(() => {
         if (!editor)
             return;
-        editor.commands.clearContent();
+        editor.chain().clearContent().focus().run();
         queueMicrotask(() => {
             const dom = chatPromptSafeEditorDom(editor);
             if (dom)

package/dist/esm/contexts/chat-context.js

@@ -200,6 +200,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             ...(attachments?.length
                 ? { userTextFileAttachments: attachments }
                 : {}),
+            ...(options?.inProgress ? { inProgress: true } : {}),
         };
         setChats(prev => {
             const scopeChats = prev[scopeId] ?? [];
@@ -233,6 +234,42 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             return { ...prev, [scopeId]: updatedChats };
         });
     }, [userSwitchKey]);
+    const updateMessageById = useCallback((scopeId, chatId, messageId, patch) => {
+        if (userSwitchKey === null)
+            return;
+        setChats(prev => {
+            const scopeChats = prev[scopeId] ?? [];
+            const updatedChats = scopeChats.map(chat => {
+                if (chat.session_id !== chatId)
+                    return chat;
+                return {
+                    ...chat,
+                    messages: chat.messages.map(message => {
+                        if (message.id !== messageId)
+                            return message;
+                        const next = { ...message };
+                        if (patch.role != null) {
+                            next.role = patch.role;
+                        }
+                        if (patch.text != null) {
+                            next.text = stripJsonDashboardFences(patch.text);
+                        }
+                        if (patch.inProgress === true) {
+                            next.inProgress = true;
+                        }
+                        else if (patch.inProgress === false ||
+                            (patch.role != null && patch.role !== MessageRole.SYSTEM)) {
+                            delete next.inProgress;
+                        }
+                        return next;
+                    }),
+                };
+            });
+            const chatsKey = getChatsKey(scopeId);
+            LS.set(chatsKey, updatedChats);
+            return { ...prev, [scopeId]: updatedChats };
+        });
+    }, [userSwitchKey]);
     const sendMessage = useCallback(async (scopeId, message, chatId) => {
         const targetChatId = chatId ?? getCurrentChatId(scopeId);
         if (targetChatId === null || targetChatId === '') {
@@ -309,6 +346,7 @@ function ChatProvider({ children, userSwitchKey, sendChatMessage: sendChatMessag
             setCurrentChatId,
             addMessage,
             removeMessageById,
+            updateMessageById,
             sendMessage,
             getChatsForScopeId,
             getCurrentChatId,
@@ -369,7 +407,7 @@ function useSyncChatPanelBusy(isLoading) {
     }, [isLoading, acquirePanelBusy, releasePanelBusy]);
 }
 function useChatsForScopeId(scopeId) {
-    const { getChatsForScopeId, getCurrentChatId, setCurrentChatId, newChat, addMessage, removeMessageById, sendMessage, deleteChat, } = useChats();
+    const { getChatsForScopeId, getCurrentChatId, setCurrentChatId, newChat, addMessage, removeMessageById, updateMessageById, sendMessage, deleteChat, } = useChats();
     const chats = getChatsForScopeId(scopeId);
     const currentChatId = getCurrentChatId(scopeId);
     const currentChat = useChat(scopeId, currentChatId ?? undefined);
@@ -383,6 +421,7 @@ function useChatsForScopeId(scopeId) {
         newChat: () => newChat(scopeId),
         addMessage: (chatId, role, text, options) => addMessage(scopeId, chatId, role, text, options),
         removeMessageById: (chatId, messageId) => removeMessageById(scopeId, chatId, messageId),
+        updateMessageById: (chatId, messageId, patch) => updateMessageById(scopeId, chatId, messageId, patch),
         sendMessage: (message, chatId) => sendMessage(scopeId, message, chatId),
         deleteChat: (sessionId) => deleteChat(scopeId, sessionId),
     };

package/dist/esm/types/src/components/ui/Chat/Chat.types.d.ts

@@ -24,6 +24,8 @@ export interface Message {
     text: string;
     timestamp: number;
     userTextFileAttachments?: UserTextFileAttachment[];
+    /** SYSTEM-only: transient progress placeholder while work is in flight. */
+    inProgress?: boolean;
 }
 export interface Chat {
     session_id: string;
@@ -88,6 +90,7 @@ export interface ChatPromptProps {
 export interface ChatMessageProps {
     role: MessageRole;
     text: string;
+    inProgress?: boolean;
     userTextFileAttachments?: UserTextFileAttachment[];
     onQuickReply?: (branchKey: string, displayLabel: string) => void;
     /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */

package/dist/esm/types/src/components/ui/Chat/ChatMessage/ChatMessage.d.ts

@@ -1,2 +1,2 @@
 import { type ChatMessageProps } from '../Chat.types';
-export declare function ChatMessage({ role, text, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessage({ role, text, inProgress, userTextFileAttachments, onQuickReply, suppressedQuickReplyKeys, quickReplyDisabled, isLastMessage, scriptContinue, onScriptContinue, renderMessageChart, }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/contexts/chat-context.d.ts

@@ -5,6 +5,13 @@ export type SendChatMessageFn = (message: string, targetChatId: string) => Promi
 export type { ChatSendMessagePayload, UserTextFileAttachment, } from '#uilib/components/ui/Chat/Chat.types';
 export type AddChatMessageOptions = {
     userTextFileAttachments?: UserTextFileAttachment[];
+    /** SYSTEM-only: mark as transient progress placeholder (shimmer until removed). */
+    inProgress?: boolean;
+};
+export type UpdateChatMessagePatch = {
+    role?: MessageRole;
+    text?: string;
+    inProgress?: boolean;
 };
 export interface ChatContextType {
     /** Returns the new session id, or undefined if no user / not created. */
@@ -12,6 +19,7 @@ export interface ChatContextType {
     setCurrentChatId: (currScopeId: string, sessionId: string) => void;
     addMessage: (scopeId: string, chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string | undefined;
     removeMessageById: (scopeId: string, chatId: string, messageId: string) => void;
+    updateMessageById: (scopeId: string, chatId: string, messageId: string, patch: UpdateChatMessagePatch) => void;
     sendMessage: (scopeId: string, message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
     getChatsForScopeId: (scopeId: string) => Chat[];
     getCurrentChatId: (scopeId: string) => string | null;
@@ -53,6 +61,7 @@ export declare function useChatsForScopeId(scopeId: string): {
     newChat: () => string;
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
     removeMessageById: (chatId: string, messageId: string) => void;
+    updateMessageById: (chatId: string, messageId: string, patch: UpdateChatMessagePatch) => void;
     sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
     deleteChat: (sessionId: string) => void;
 };
@@ -66,6 +75,7 @@ export declare function useChatsForDataset(scopeId: string): {
     newChat: () => string;
     addMessage: (chatId: string, role: MessageRole, text: string, options?: AddChatMessageOptions) => string;
     removeMessageById: (chatId: string, messageId: string) => void;
+    updateMessageById: (chatId: string, messageId: string, patch: UpdateChatMessagePatch) => void;
     sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) => Promise<string>;
     deleteChat: (sessionId: string) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.39",
+  "version": "1.3.41",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/Chat.types.ts

@@ -33,6 +33,8 @@ export interface Message {
   text: string;
   timestamp: number;
   userTextFileAttachments?: UserTextFileAttachment[];
+  /** SYSTEM-only: transient progress placeholder while work is in flight. */
+  inProgress?: boolean;
 }
 
 export interface Chat {
@@ -103,6 +105,7 @@ export interface ChatPromptProps {
 export interface ChatMessageProps {
   role: MessageRole;
   text: string;
+  inProgress?: boolean;
   userTextFileAttachments?: UserTextFileAttachment[];
   onQuickReply?: (branchKey: string, displayLabel: string) => void;
   /** Branch keys already taken (e.g. from chat history); hide quick-reply buttons for these. */

package/src/components/ui/Chat/ChatChrome/ChatChrome.tsx

@@ -71,11 +71,11 @@ export function ChatChrome({
     ChatAttachmentDropItem[]
   >([]);
   const [isExtractingAttachments, setIsExtractingAttachments] = useState(false);
-  const promptBusy = isLoading || isExtractingAttachments;
+  const promptDisabled = isExtractingAttachments;
 
   const handleAttachmentFiles = useCallback(
     (files: File[]) => {
-      if (promptBusy || files.length === 0) return;
+      if (promptDisabled || files.length === 0) return;
 
       setIsExtractingAttachments(true);
       void extractChatAttachmentItems(files, allowPdfAttachments)
@@ -89,7 +89,7 @@ export function ChatChrome({
         })
         .finally(() => setIsExtractingAttachments(false));
     },
-    [allowPdfAttachments, promptBusy],
+    [allowPdfAttachments, promptDisabled],
   );
 
   const handleRemoveAttachment = useCallback((index: number) => {
@@ -165,7 +165,7 @@ export function ChatChrome({
             multiple
             ghost
             overlayScope="container"
-            disabled={promptBusy}
+            disabled={promptDisabled}
             className={S.attachmentDropzone}
             onFiles={handleAttachmentFiles}
           />
@@ -199,6 +199,7 @@ export function ChatChrome({
                       key={msg.id}
                       role={msg.role}
                       text={msg.text}
+                      inProgress={msg.inProgress}
                       userTextFileAttachments={msg.userTextFileAttachments}
                       onQuickReply={onQuickReply}
                       suppressedQuickReplyKeys={suppressedQuickReplyKeys}
@@ -262,7 +263,7 @@ export function ChatChrome({
             ) : null}
             <Chat.Prompt
               onSubmit={handlePromptSubmitWithAttachments}
-              disabled={promptBusy}
+              disabled={promptDisabled}
               attachments={pendingAttachments}
               onRemoveAttachment={handleRemoveAttachment}
               prefillMessage={promptPrefill ?? undefined}

package/src/components/ui/Chat/ChatMessage/ChatMessage.styl

@@ -3,7 +3,8 @@
   flex-direction column
   gap var(--p-1)
 
-  padding var(--p-6)
+  padding var(--p-4)
+  padding-bottom var(--p-1)
   background var(--bg-secondary)
 
 .text
@@ -16,6 +17,12 @@
   overflow-wrap anywhere
   word-break break-word
 
+.role-user
+.role-assistant
+.role-system
+  & + &
+    padding-top var(--p-1)
+
 .role-user
   align-items flex-end
   max-width 100%
@@ -48,7 +55,6 @@
 
   .text
     width 100%
-    font-size var(--text-xs)
     color var(--muted-foreground)
 
 .role-assistant

package/src/components/ui/Chat/ChatMessage/ChatMessage.tsx

@@ -1,6 +1,7 @@
 import cn from 'classnames';
 
 import { InteractiveContent } from '#uilib/components/ui/InteractiveContent';
+import { TextShimmer } from '#uilib/components/ui/TextShimmer';
 
 import { type ChatMessageProps, MessageRole } from '../Chat.types';
 import { userTextFileAttachmentsFromMessage } from '../userTextFileAttachments';
@@ -11,6 +12,7 @@ import { UserTextFileAttachmentBubble } from './UserTextFileAttachmentBubble';
 export function ChatMessage({
   role,
   text,
+  inProgress,
   userTextFileAttachments,
   onQuickReply,
   suppressedQuickReplyKeys,
@@ -29,7 +31,9 @@ export function ChatMessage({
   return (
     <div className={cn(S.root, S[`role-${role}`])}>
       {isSystem ? (
-        <div className={S.text}>{text}</div>
+        <div className={S.text}>
+          {inProgress ? <TextShimmer as="span">{text}</TextShimmer> : text}
+        </div>
       ) : isAssistant ? (
         <AgentMessageContent
           text={text}

package/src/components/ui/Chat/ChatPrompt/ChatPromptComposer.tsx

@@ -84,7 +84,12 @@ export function ChatPromptComposer({
       </div>
 
       <div className={S.submitColumn}>
-        <Button type="submit" size="sm" disabled={disabled || !canSubmit}>
+        <Button
+          type="submit"
+          size="sm"
+          disabled={disabled || !canSubmit}
+          onMouseDown={e => e.preventDefault()}
+        >
           <SendHorizontalIcon size={16} />
         </Button>
       </div>

package/src/components/ui/Chat/ChatPrompt/useChatPromptEditor.ts

@@ -193,7 +193,7 @@ export function useChatPromptEditor({
 
   const resetAfterSend = useCallback(() => {
     if (!editor) return;
-    editor.commands.clearContent();
+    editor.chain().clearContent().focus().run();
     queueMicrotask(() => {
       const dom = chatPromptSafeEditorDom(editor);
       if (dom) syncChatPromptComposerHeight(dom, '');

package/src/contexts/chat-context.tsx

@@ -35,6 +35,14 @@ const CHAT_SCOPE_IDS_REGISTRY_KEY = 'chat-scope-ids';
 
 export type AddChatMessageOptions = {
   userTextFileAttachments?: UserTextFileAttachment[];
+  /** SYSTEM-only: mark as transient progress placeholder (shimmer until removed). */
+  inProgress?: boolean;
+};
+
+export type UpdateChatMessagePatch = {
+  role?: MessageRole;
+  text?: string;
+  inProgress?: boolean;
 };
 
 export interface ChatContextType {
@@ -53,6 +61,12 @@ export interface ChatContextType {
     chatId: string,
     messageId: string,
   ) => void;
+  updateMessageById: (
+    scopeId: string,
+    chatId: string,
+    messageId: string,
+    patch: UpdateChatMessagePatch,
+  ) => void;
   sendMessage: (
     scopeId: string,
     message: string | ChatSendMessagePayload,
@@ -326,6 +340,7 @@ export function ChatProvider({
         ...(attachments?.length
           ? { userTextFileAttachments: attachments }
           : {}),
+        ...(options?.inProgress ? { inProgress: true } : {}),
       };
 
       setChats(prev => {
@@ -367,6 +382,49 @@ export function ChatProvider({
     [userSwitchKey],
   );
 
+  const updateMessageById = useCallback(
+    (
+      scopeId: string,
+      chatId: string,
+      messageId: string,
+      patch: UpdateChatMessagePatch,
+    ) => {
+      if (userSwitchKey === null) return;
+      setChats(prev => {
+        const scopeChats = prev[scopeId] ?? [];
+        const updatedChats = scopeChats.map(chat => {
+          if (chat.session_id !== chatId) return chat;
+          return {
+            ...chat,
+            messages: chat.messages.map(message => {
+              if (message.id !== messageId) return message;
+              const next: Message = { ...message };
+              if (patch.role != null) {
+                next.role = patch.role;
+              }
+              if (patch.text != null) {
+                next.text = stripJsonDashboardFences(patch.text);
+              }
+              if (patch.inProgress === true) {
+                next.inProgress = true;
+              } else if (
+                patch.inProgress === false ||
+                (patch.role != null && patch.role !== MessageRole.SYSTEM)
+              ) {
+                delete next.inProgress;
+              }
+              return next;
+            }),
+          };
+        });
+        const chatsKey = getChatsKey(scopeId);
+        LS.set(chatsKey, updatedChats);
+        return { ...prev, [scopeId]: updatedChats };
+      });
+    },
+    [userSwitchKey],
+  );
+
   const sendMessage = useCallback(
     async (
       scopeId: string,
@@ -484,6 +542,7 @@ export function ChatProvider({
         setCurrentChatId,
         addMessage,
         removeMessageById,
+        updateMessageById,
         sendMessage,
         getChatsForScopeId,
         getCurrentChatId,
@@ -569,6 +628,7 @@ export function useChatsForScopeId(scopeId: string) {
     newChat,
     addMessage,
     removeMessageById,
+    updateMessageById,
     sendMessage,
     deleteChat,
   } = useChats();
@@ -592,6 +652,11 @@ export function useChatsForScopeId(scopeId: string) {
     ) => addMessage(scopeId, chatId, role, text, options),
     removeMessageById: (chatId: string, messageId: string) =>
       removeMessageById(scopeId, chatId, messageId),
+    updateMessageById: (
+      chatId: string,
+      messageId: string,
+      patch: UpdateChatMessagePatch,
+    ) => updateMessageById(scopeId, chatId, messageId, patch),
     sendMessage: (message: string | ChatSendMessagePayload, chatId?: string) =>
       sendMessage(scopeId, message, chatId),
     deleteChat: (sessionId: string) => deleteChat(scopeId, sessionId),

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -28,21 +28,54 @@ const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
   },
 ];
 
-const SAMPLE_COMMAND_REPLY_TEXT =
-  'Sample command ran via `onSlashItemCommand` — composer cleared, no mention inserted.';
+const SAMPLE_COMMAND_PROGRESS_TEXT = 'Running sample command…';
 
-const ASSISTANT_REPLY_TEXT =
-  'Demo reply for a normal message. Slash picks with a custom handler skip mention insert.';
+const SAMPLE_COMMAND_SUCCESS_TEXT = '✅ Sample command complete.';
 
-function makeMessage(role: MessageRole, text: string): Message {
+function makeMessage(
+  role: MessageRole,
+  text: string,
+  options?: { inProgress?: boolean },
+): Message {
   return {
     id: crypto.randomUUID(),
     role,
     text,
     timestamp: Date.now(),
+    ...(options?.inProgress ? { inProgress: true } : {}),
   };
 }
 
+/** Local-state equivalent of chat-context `updateMessageById`. */
+function updateMessageInPlace(
+  messages: Message[],
+  messageId: string,
+  patch: { role?: MessageRole; text?: string; inProgress?: boolean },
+): Message[] {
+  return messages.map(message => {
+    if (message.id !== messageId) return message;
+    const next: Message = { ...message };
+    if (patch.role != null) {
+      next.role = patch.role;
+    }
+    if (patch.text != null) {
+      next.text = patch.text;
+    }
+    if (patch.inProgress === true) {
+      next.inProgress = true;
+    } else if (
+      patch.inProgress === false ||
+      (patch.role != null && patch.role !== MessageRole.SYSTEM)
+    ) {
+      delete next.inProgress;
+    }
+    return next;
+  });
+}
+
+const ASSISTANT_REPLY_TEXT =
+  'Demo reply for a normal message. Slash picks with a custom handler skip mention insert.';
+
 export default function ChatSlashCommandsPage() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -63,10 +96,33 @@ export default function ChatSlashCommandsPage() {
     messages[messages.length - 1]?.role === MessageRole.USER;
 
   const runSampleCommand = useCallback(() => {
+    const progressId = crypto.randomUUID();
+    setIsLoading(true);
     setMessages(prev => [
       ...prev,
-      makeMessage(MessageRole.ASSISTANT, SAMPLE_COMMAND_REPLY_TEXT),
+      {
+        id: progressId,
+        role: MessageRole.SYSTEM,
+        text: SAMPLE_COMMAND_PROGRESS_TEXT,
+        timestamp: Date.now(),
+        inProgress: true,
+      },
     ]);
+
+    if (replyTimeoutRef.current != null) {
+      clearTimeout(replyTimeoutRef.current);
+    }
+    replyTimeoutRef.current = setTimeout(() => {
+      replyTimeoutRef.current = null;
+      setMessages(prev =>
+        updateMessageInPlace(prev, progressId, {
+          role: MessageRole.ASSISTANT,
+          text: SAMPLE_COMMAND_SUCCESS_TEXT,
+          inProgress: false,
+        }),
+      );
+      setIsLoading(false);
+    }, 1200);
   }, []);
 
   const onSlashItemCommand = useCallback(
@@ -83,7 +139,7 @@ export default function ChatSlashCommandsPage() {
   const onSubmit = useCallback(
     (raw: string) => {
       const text = raw.trim();
-      if (!text || isLoading) return;
+      if (!text) return;
 
       if (text === `/${DOCS_SAMPLE_COMMAND_ID}`) {
         runSampleCommand();
@@ -105,7 +161,7 @@ export default function ChatSlashCommandsPage() {
         setIsLoading(false);
       }, 900);
     },
-    [isLoading, runSampleCommand],
+    [runSampleCommand],
   );
 
   return (
@@ -113,7 +169,7 @@ export default function ChatSlashCommandsPage() {
       <AppPageHeader
         breadcrumbs={[{ label: 'Chat' }, { label: 'Chat slash commands' }]}
         title="Chat slash commands"
-        subheader={`Slash palette uses TipTap Mention with "/" as the trigger. Pass slashCommandItems from the app; optional onSlashItemCommand can clear the composer and run an action instead of inserting a mention.`}
+        subheader={`Slash palette uses TipTap Mention with "/" as the trigger. Pass slashCommandItems from the app; optional onSlashItemCommand can clear the composer and run an action instead of inserting a mention. Long-running handlers can append a SYSTEM message with inProgress while work is in flight, then update it in place (e.g. via updateMessageById) to a final assistant message when done.`}
         actions={
           <DocsHeaderActions slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS} />
         }
@@ -127,8 +183,9 @@ export default function ChatSlashCommandsPage() {
           shell below: scrolling history, empty state, disclaimer, composer.
           Type <kbd className="font-mono">/</kbd> at line start or after a
           space; pick <kbd className="font-mono">sample-command</kbd> to run the
-          custom handler, or send{' '}
-          <kbd className="font-mono">/sample-command</kbd> with Enter.
+          custom handler (shows an <kbd className="font-mono">inProgress</kbd>{' '}
+          shimmer, then updates the same message to a success assistant reply),
+          or send <kbd className="font-mono">/sample-command</kbd> with Enter.
         </p>
         <ChatChrome
           showResizeHandle={false}
@@ -156,7 +213,7 @@ export default function ChatSlashCommandsPage() {
           emptyState={{
             title: 'Try a slash command',
             description:
-              'Pick sample-command from the palette or send /sample-command — onSlashItemCommand clears the composer and runs the demo action.',
+              'Pick sample-command from the palette or send /sample-command — inProgress placeholder shimmers, then becomes "✅ Sample command complete." in the same slot.',
           }}
         />
       </PageContentSection>