@sybilion/uilib 1.3.38 → 1.3.40

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

@@ -4,12 +4,5 @@ var MessageRole;
     MessageRole["ASSISTANT"] = "assistant";
     MessageRole["SYSTEM"] = "system";
 })(MessageRole || (MessageRole = {}));
-/** System placeholder while dashboard generation runs (must match ChatSheet `addMessage` text). */
-const GENERATING_DASHBOARD_SYSTEM_TEXT = 'Generating dashboard…';
-/** Slash command id that triggers dashboard generation when `onGenerateDashboard` is set. */
-const GENERATE_DASHBOARD_SLASH_COMMAND_ID = 'generate-dashboard';
-function isGenerateDashboardSlashMessage(message) {
-    return message.trim() === `/${GENERATE_DASHBOARD_SLASH_COMMAND_ID}`;
-}
 
-export { GENERATE_DASHBOARD_SLASH_COMMAND_ID, GENERATING_DASHBOARD_SYSTEM_TEXT, MessageRole, isGenerateDashboardSlashMessage };
+export { MessageRole };

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

@@ -68,7 +68,7 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
     }, [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) => {
                                             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

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

@@ -4,19 +4,19 @@ import { InteractiveContent } from '../../InteractiveContent/InteractiveContent.
 import 'lucide-react';
 import '../../InteractiveContent/InteractiveContent.styl.js';
 import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
-import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.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 === GENERATING_DASHBOARD_SYSTEM_TEXT ? (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}`)))] })) }));
+    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/ChatSheet/ChatSheet.js

@@ -4,20 +4,20 @@ import { Button } from '../../Button/Button.js';
 import { ChatChrome } from '../ChatChrome/ChatChrome.js';
 import { useChatPanelChromeModel } from './useChatPanelChromeModel.js';
 
-function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, inline = false, }) {
+function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, inline = false, }) {
     const model = useChatPanelChromeModel({
         embedAsPage: inline,
         presets,
         scopeId,
         onMessage,
         onScriptComplete,
-        onGenerateDashboard,
         renderMessageChart,
         emptyState,
         allowedAttachments,
         allowPdfAttachments,
         onAttachmentsDropped,
         slashCommandItems,
+        onSlashItemCommand,
     });
     if (actionsRef) {
         actionsRef.current = {

package/dist/esm/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -1,9 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT, GENERATE_DASHBOARD_SLASH_COMMAND_ID, isGenerateDashboardSlashMessage } from '../Chat.types.js';
+import { MessageRole } from '../Chat.types.js';
 import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, isPresetScriptGraph, branchesFromPresetScriptGraph, parseScriptLine, textHasQuickReplyMarkers, branchKeysUsedFromChatHistory, branchKeysUsedByUserMessages, extractQuickReplyLabelKeyPairsFromText, entryBranchKeyBeforeLastAssistant } from '../ChatMessage/presetScript.js';
 import { buildChatSendMessagePayload, displayTextFromSendPayload } from '../buildChatSendMessagePayload.js';
-import { usedPresetIdsFromMessages, formatChatTranscript } from '../chat-preset-utils.js';
+import { usedPresetIdsFromMessages } from '../chat-preset-utils.js';
 import { useChatsForScopeId, useChat, useChatOutboundPending, useSyncChatPanelBusy, isChatEmpty } from '../../../../contexts/chat-context.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
@@ -22,7 +22,7 @@ const CHAT_NAV_COLLAPSE_BREAKPOINT_PX = 1400;
 const CHAT_QUERY_PARAM = 'chat';
 const CHAT_OPEN_VALUE = 'open';
 const PROMPT_QUERY_PARAM = 'prompt';
-function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, }) {
+function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, }) {
     const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
     const isMobile = useIsMobile();
     const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, chatWidthPx, setChatWidthPx, getShellWidth, setChatPanelOpen, } = useSidebar();
@@ -60,7 +60,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     const [intakeByChatId, setIntakeByChatId] = useState({});
     /** Preset intake finished for this session (e.g. `onScriptComplete` callback). */
     const [scriptCompleteByChatId, setScriptCompleteByChatId] = useState({});
-    const [generatingDashboard, setGeneratingDashboard] = useState(false);
     const scriptAdvanceLockRef = useRef(false);
     const quickReplyLockRef = useRef(false);
     const scrollRef = useRef(null);
@@ -712,60 +711,14 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         lastMsg?.role === MessageRole.ASSISTANT &&
         !linearScriptActive &&
         (!graphActive || (!lastHasQuickMarkers && unusedBranchKeys.length === 0));
-    const handleGenerateDashboard = useCallback(async () => {
-        if (!currentChatId || !onGenerateDashboard)
-            return;
-        const transcript = formatChatTranscript((chat?.messages ?? []).filter(m => m.role !== MessageRole.SYSTEM));
-        setGeneratingDashboard(true);
-        const systemPlaceholderId = addMessage(currentChatId, MessageRole.SYSTEM, GENERATING_DASHBOARD_SYSTEM_TEXT);
-        try {
-            await Promise.resolve(onGenerateDashboard(transcript));
-            setScriptCompleteByChatId(prev => {
-                const next = { ...prev };
-                delete next[currentChatId];
-                return next;
-            });
-        }
-        finally {
-            if (systemPlaceholderId) {
-                removeMessageById(currentChatId, systemPlaceholderId);
-            }
-            setGeneratingDashboard(false);
-        }
-    }, [
-        currentChatId,
-        onGenerateDashboard,
-        chat?.messages,
-        addMessage,
-        removeMessageById,
-    ]);
-    const onSlashItemCommand = useCallback(({ item }) => {
-        if (item.id !== GENERATE_DASHBOARD_SLASH_COMMAND_ID ||
-            !onGenerateDashboard) {
-            return false;
-        }
-        if (generatingDashboard) {
-            return true;
-        }
-        queueMicrotask(() => {
-            void handleGenerateDashboard();
-        });
-        return true;
-    }, [onGenerateDashboard, generatingDashboard, handleGenerateDashboard]);
     const onPromptSubmitWithSlashCommands = useCallback(async (message, attachments) => {
-        if (isGenerateDashboardSlashMessage(message) &&
-            onGenerateDashboard &&
-            !generatingDashboard) {
-            void handleGenerateDashboard();
+        const trimmed = message.trim();
+        const slashItem = slashCommandItems?.find(item => trimmed === `/${item.id}`);
+        if (slashItem && onSlashItemCommand?.({ item: slashItem }) === true) {
             return;
         }
         return handlePromptSubmit(message, attachments);
-    }, [
-        handlePromptSubmit,
-        onGenerateDashboard,
-        generatingDashboard,
-        handleGenerateDashboard,
-    ]);
+    }, [handlePromptSubmit, slashCommandItems, onSlashItemCommand]);
     const onDragChatWidth = useCallback((rawPx) => setChatWidthPx(rawPx, { persist: false }), [setChatWidthPx]);
     const onDragChatComplete = useCallback((finalRawPx) => setChatWidthPx(finalRawPx, { persist: true }), [setChatWidthPx]);
     const chromeProps = {

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] ?? [];

package/dist/esm/index.js

@@ -22,7 +22,7 @@ export { ChartLegend, ChartTooltip } from './components/ui/Chart/Chart.js';
 export { THEMES } from './components/ui/Chart/Chart.types.js';
 export { ChartAreaInteractive, chartConfig } from './components/ui/ChartAreaInteractive/ChartAreaInteractive.js';
 export { Chat } from './components/ui/Chat/Chat.js';
-export { usedPresetIdsFromMessages } from './components/ui/Chat/chat-preset-utils.js';
+export { formatChatTranscript, usedPresetIdsFromMessages } from './components/ui/Chat/chat-preset-utils.js';
 export { ChatChrome } from './components/ui/Chat/ChatChrome/ChatChrome.js';
 export { TEXT_ATTACHMENT_ACCEPT_PARTS, filterToTextAttachments } from './components/ui/Chat/chatAttachmentAccept.js';
 export { buildChatSendMessagePayload, displayTextFromSendPayload, normalizeUserTextFileAttachments } from './components/ui/Chat/buildChatSendMessagePayload.js';
@@ -32,7 +32,7 @@ export { useChatPanelChromeModel } from './components/ui/Chat/ChatSheet/useChatP
 export { ChatMessage } from './components/ui/Chat/ChatMessage/ChatMessage.js';
 export { ChatPrompt } from './components/ui/Chat/ChatPrompt/ChatPrompt.js';
 export { ChatPresets } from './components/ui/Chat/ChatPresets/ChatPresets.js';
-export { GENERATE_DASHBOARD_SLASH_COMMAND_ID, MessageRole, isGenerateDashboardSlashMessage } from './components/ui/Chat/Chat.types.js';
+export { MessageRole } from './components/ui/Chat/Chat.types.js';
 export { CsvIcon } from './components/icons/CsvIcon/CsvIcon.js';
 export { Checkbox } from './components/ui/Checkbox/Checkbox.js';
 export { Confirm } from './components/ui/Confirm/Confirm.js';

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

@@ -6,11 +6,6 @@ export declare enum MessageRole {
     ASSISTANT = "assistant",
     SYSTEM = "system"
 }
-/** System placeholder while dashboard generation runs (must match ChatSheet `addMessage` text). */
-export declare const GENERATING_DASHBOARD_SYSTEM_TEXT = "Generating dashboard\u2026";
-/** Slash command id that triggers dashboard generation when `onGenerateDashboard` is set. */
-export declare const GENERATE_DASHBOARD_SLASH_COMMAND_ID = "generate-dashboard";
-export declare function isGenerateDashboardSlashMessage(message: string): boolean;
 /** USER-only: text file attached to a message; shown as downloadable file row(s). */
 export type UserTextFileAttachment = {
     displayName: string;
@@ -29,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;
@@ -93,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/components/ui/Chat/ChatSheet/ChatSheet.d.ts

@@ -19,4 +19,4 @@ export interface ChatSheetProps extends Omit<UseChatPanelChromeModelInput, 'embe
      */
     inline?: boolean;
 }
-export declare function ChatSheet({ triggerLabel, triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, inline, }: ChatSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSheet({ triggerLabel, triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, inline, }: ChatSheetProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { ChatPreset, type ScriptCompletePayload } from '#uilib/components/ui/Chat/Chat.types';
-import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type { SlashCommandItem, SlashOnItemCommand } from '#uilib/tiptap/slash-mention/types';
 import type { ChatChromeProps } from '../ChatChrome';
 import type { ChatAttachmentDropItem } from '../ChatChrome/ChatChrome.types';
 import type { ChatEmptyStateConfig } from '../ChatEmptyState/ChatEmptyState.types';
@@ -12,8 +12,6 @@ export type UseChatPanelChromeModelInput = {
     onMessage?: (message: string) => void;
     /** Fires when a preset script has no further `[Label|branchKey]` steps (graph leaf or linear script end). */
     onScriptComplete?: (payload: ScriptCompletePayload) => void;
-    /** Generate dashboard from chat transcript (e.g. via `/generate-dashboard` slash command). */
-    onGenerateDashboard?: (transcript: string) => void | Promise<void>;
     /** Renders `[CHART]` tokens in assistant messages. */
     renderMessageChart?: () => React.ReactNode;
     /** Forwarded to `ChatChrome` when the thread is empty. */
@@ -25,6 +23,8 @@ export type UseChatPanelChromeModelInput = {
     onAttachmentsDropped?: (items: ChatAttachmentDropItem[]) => void | Promise<void>;
     /** Slash menu (`/`) in the composer; omit or pass empty to disable. */
     slashCommandItems?: SlashCommandItem[];
+    /** Custom slash command handler (palette pick or Enter on `/id`). */
+    onSlashItemCommand?: SlashOnItemCommand;
 };
 export type UseChatPanelChromeModelResult = {
     chromeProps: ChatChromeProps;
@@ -34,4 +34,4 @@ export type UseChatPanelChromeModelResult = {
     newChat: () => void;
     chatPanelContainer: HTMLElement | null;
 };
-export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;
+export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;

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

@@ -1,5 +1,5 @@
 export { Chat } from './Chat';
-export { usedPresetIdsFromMessages } from './chat-preset-utils';
+export { formatChatTranscript, usedPresetIdsFromMessages, } from './chat-preset-utils';
 export { ChatChrome } from './ChatChrome';
 export type { ChatChromeProps, ChatChromeResizeHandleConfig, } from './ChatChrome';
 export { TEXT_ATTACHMENT_ACCEPT_PARTS, filterToTextAttachments, } from './chatAttachmentAccept';
@@ -14,6 +14,6 @@ export { ChatPrompt } from './ChatPrompt';
 export { ChatPresets } from './ChatPresets';
 export type { ChatEmptyStateConfig, ChatEmptyStateContext, ChatEmptyStateProps, } from './ChatEmptyState/ChatEmptyState.types';
 export type { Chat as ChatType, ChatAttachmentDropItem, ChatSendMessagePayload, ChatProps, ChatPreset as ChatPresetType, Message, UserTextFileAttachment, } from './Chat.types';
-export { GENERATE_DASHBOARD_SLASH_COMMAND_ID, isGenerateDashboardSlashMessage, MessageRole, } from './Chat.types';
-export type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+export { MessageRole } from './Chat.types';
+export type { SlashCommandItem, SlashItemCommandContext, SlashOnItemCommand, } from '#uilib/tiptap/slash-mention/types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

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

@@ -5,6 +5,8 @@ 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 interface ChatContextType {
     /** Returns the new session id, or undefined if no user / not created. */

package/dist/esm/types/src/tiptap/slash-mention/types.d.ts

@@ -5,9 +5,10 @@ export type SlashCommandItem = {
     description?: string;
 };
 export type SlashItemCommandContext = {
-    editor: Editor;
-    range: Range;
     item: SlashCommandItem;
+    /** Present when picked from the slash palette; omitted on Enter submit of `/id`. */
+    editor?: Editor;
+    range?: Range;
 };
 /**
  * If provided, run when a slash item is picked. Return true to skip mention insert

package/package.json

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

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

@@ -13,16 +13,6 @@ export enum MessageRole {
   SYSTEM = 'system',
 }
 
-/** System placeholder while dashboard generation runs (must match ChatSheet `addMessage` text). */
-export const GENERATING_DASHBOARD_SYSTEM_TEXT = 'Generating dashboard…';
-
-/** Slash command id that triggers dashboard generation when `onGenerateDashboard` is set. */
-export const GENERATE_DASHBOARD_SLASH_COMMAND_ID = 'generate-dashboard';
-
-export function isGenerateDashboardSlashMessage(message: string): boolean {
-  return message.trim() === `/${GENERATE_DASHBOARD_SLASH_COMMAND_ID}`;
-}
-
 /** USER-only: text file attached to a message; shown as downloadable file row(s). */
 export type UserTextFileAttachment = {
   displayName: string;
@@ -43,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 {
@@ -113,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

@@ -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}

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

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

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

@@ -41,13 +41,13 @@ export function ChatSheet({
   scopeId,
   onMessage,
   onScriptComplete,
-  onGenerateDashboard,
   renderMessageChart,
   emptyState,
   allowedAttachments,
   allowPdfAttachments,
   onAttachmentsDropped,
   slashCommandItems,
+  onSlashItemCommand,
   inline = false,
 }: ChatSheetProps) {
   const model = useChatPanelChromeModel({
@@ -56,13 +56,13 @@ export function ChatSheet({
     scopeId,
     onMessage,
     onScriptComplete,
-    onGenerateDashboard,
     renderMessageChart,
     emptyState,
     allowedAttachments,
     allowPdfAttachments,
     onAttachmentsDropped,
     slashCommandItems,
+    onSlashItemCommand,
   });
 
   if (actionsRef) {

package/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -2,11 +2,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   ChatPreset,
-  GENERATE_DASHBOARD_SLASH_COMMAND_ID,
-  GENERATING_DASHBOARD_SYSTEM_TEXT,
   MessageRole,
   type ScriptCompletePayload,
-  isGenerateDashboardSlashMessage,
 } from '#uilib/components/ui/Chat/Chat.types';
 import {
   branchKeysUsedByUserMessages,
@@ -25,10 +22,7 @@ import {
   buildChatSendMessagePayload,
   displayTextFromSendPayload,
 } from '#uilib/components/ui/Chat/buildChatSendMessagePayload';
-import {
-  formatChatTranscript,
-  usedPresetIdsFromMessages,
-} from '#uilib/components/ui/Chat/chat-preset-utils';
+import { usedPresetIdsFromMessages } from '#uilib/components/ui/Chat/chat-preset-utils';
 import {
   isChatEmpty,
   useChat,
@@ -42,7 +36,7 @@ import { useQueryParams } from '#uilib/hooks/useQueryParams';
 import logger from '#uilib/lib/logger';
 import type {
   SlashCommandItem,
-  SlashItemCommandContext,
+  SlashOnItemCommand,
 } from '#uilib/tiptap/slash-mention/types';
 import { mergePresetFreeformDefaults } from '#uilib/utils/chatPresetMerge';
 import { ScrollRef } from '@homecode/ui';
@@ -63,8 +57,6 @@ export type UseChatPanelChromeModelInput = {
   onMessage?: (message: string) => void;
   /** Fires when a preset script has no further `[Label|branchKey]` steps (graph leaf or linear script end). */
   onScriptComplete?: (payload: ScriptCompletePayload) => void;
-  /** Generate dashboard from chat transcript (e.g. via `/generate-dashboard` slash command). */
-  onGenerateDashboard?: (transcript: string) => void | Promise<void>;
   /** Renders `[CHART]` tokens in assistant messages. */
   renderMessageChart?: () => React.ReactNode;
   /** Forwarded to `ChatChrome` when the thread is empty. */
@@ -78,6 +70,8 @@ export type UseChatPanelChromeModelInput = {
   ) => void | Promise<void>;
   /** Slash menu (`/`) in the composer; omit or pass empty to disable. */
   slashCommandItems?: SlashCommandItem[];
+  /** Custom slash command handler (palette pick or Enter on `/id`). */
+  onSlashItemCommand?: SlashOnItemCommand;
 };
 
 export type UseChatPanelChromeModelResult = {
@@ -120,13 +114,13 @@ export function useChatPanelChromeModel({
   scopeId,
   onMessage,
   onScriptComplete,
-  onGenerateDashboard,
   renderMessageChart,
   emptyState,
   allowedAttachments,
   allowPdfAttachments,
   onAttachmentsDropped,
   slashCommandItems,
+  onSlashItemCommand,
 }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult {
   const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
   const isMobile = useIsMobile();
@@ -202,7 +196,6 @@ export function useChatPanelChromeModel({
   const [scriptCompleteByChatId, setScriptCompleteByChatId] = useState<
     Record<string, boolean>
   >({});
-  const [generatingDashboard, setGeneratingDashboard] = useState(false);
   const scriptAdvanceLockRef = useRef(false);
   const quickReplyLockRef = useRef(false);
   const scrollRef = useRef<ScrollRef>(null);
@@ -961,75 +954,18 @@ export function useChatPanelChromeModel({
     !linearScriptActive &&
     (!graphActive || (!lastHasQuickMarkers && unusedBranchKeys.length === 0));
 
-  const handleGenerateDashboard = useCallback(async () => {
-    if (!currentChatId || !onGenerateDashboard) return;
-    const transcript = formatChatTranscript(
-      (chat?.messages ?? []).filter(m => m.role !== MessageRole.SYSTEM),
-    );
-    setGeneratingDashboard(true);
-    const systemPlaceholderId = addMessage(
-      currentChatId,
-      MessageRole.SYSTEM,
-      GENERATING_DASHBOARD_SYSTEM_TEXT,
-    );
-    try {
-      await Promise.resolve(onGenerateDashboard(transcript));
-      setScriptCompleteByChatId(prev => {
-        const next = { ...prev };
-        delete next[currentChatId];
-        return next;
-      });
-    } finally {
-      if (systemPlaceholderId) {
-        removeMessageById(currentChatId, systemPlaceholderId);
-      }
-      setGeneratingDashboard(false);
-    }
-  }, [
-    currentChatId,
-    onGenerateDashboard,
-    chat?.messages,
-    addMessage,
-    removeMessageById,
-  ]);
-
-  const onSlashItemCommand = useCallback(
-    ({ item }: SlashItemCommandContext) => {
-      if (
-        item.id !== GENERATE_DASHBOARD_SLASH_COMMAND_ID ||
-        !onGenerateDashboard
-      ) {
-        return false;
-      }
-      if (generatingDashboard) {
-        return true;
-      }
-      queueMicrotask(() => {
-        void handleGenerateDashboard();
-      });
-      return true;
-    },
-    [onGenerateDashboard, generatingDashboard, handleGenerateDashboard],
-  );
-
   const onPromptSubmitWithSlashCommands = useCallback(
     async (message: string, attachments?: ChatAttachmentDropItem[]) => {
-      if (
-        isGenerateDashboardSlashMessage(message) &&
-        onGenerateDashboard &&
-        !generatingDashboard
-      ) {
-        void handleGenerateDashboard();
+      const trimmed = message.trim();
+      const slashItem = slashCommandItems?.find(
+        item => trimmed === `/${item.id}`,
+      );
+      if (slashItem && onSlashItemCommand?.({ item: slashItem }) === true) {
         return;
       }
       return handlePromptSubmit(message, attachments);
     },
-    [
-      handlePromptSubmit,
-      onGenerateDashboard,
-      generatingDashboard,
-      handleGenerateDashboard,
-    ],
+    [handlePromptSubmit, slashCommandItems, onSlashItemCommand],
   );
 
   const onDragChatWidth = useCallback(

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

@@ -1,5 +1,8 @@
 export { Chat } from './Chat';
-export { usedPresetIdsFromMessages } from './chat-preset-utils';
+export {
+  formatChatTranscript,
+  usedPresetIdsFromMessages,
+} from './chat-preset-utils';
 export { ChatChrome } from './ChatChrome';
 export type {
   ChatChromeProps,
@@ -39,10 +42,10 @@ export type {
   Message,
   UserTextFileAttachment,
 } from './Chat.types';
-export {
-  GENERATE_DASHBOARD_SLASH_COMMAND_ID,
-  isGenerateDashboardSlashMessage,
-  MessageRole,
-} from './Chat.types';
-export type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+export { MessageRole } from './Chat.types';
+export type {
+  SlashCommandItem,
+  SlashItemCommandContext,
+  SlashOnItemCommand,
+} from '#uilib/tiptap/slash-mention/types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

package/src/contexts/chat-context.tsx

@@ -35,6 +35,8 @@ 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 interface ChatContextType {
@@ -326,6 +328,7 @@ export function ChatProvider({
         ...(attachments?.length
           ? { userTextFileAttachments: attachments }
           : {}),
+        ...(options?.inProgress ? { inProgress: true } : {}),
       };
 
       setChats(prev => {

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -31,18 +31,25 @@ const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
 const SAMPLE_COMMAND_REPLY_TEXT =
   'Sample command ran via `onSlashItemCommand` — composer cleared, no mention inserted.';
 
-const ASSISTANT_REPLY_TEXT =
-  'Demo reply for a normal message. Slash picks with a custom handler skip mention insert.';
+const SAMPLE_COMMAND_PROGRESS_TEXT = 'Running sample command…';
 
-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 } : {}),
   };
 }
 
+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 +70,30 @@ 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 => [
+        ...prev.filter(m => m.id !== progressId),
+        makeMessage(MessageRole.ASSISTANT, SAMPLE_COMMAND_REPLY_TEXT),
+      ]);
+      setIsLoading(false);
+    }, 1200);
   }, []);
 
   const onSlashItemCommand = useCallback(
@@ -113,7 +140,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 remove it when done.`}
         actions={
           <DocsHeaderActions slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS} />
         }
@@ -127,8 +154,10 @@ 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 a transient{' '}
+          <kbd className="font-mono">inProgress</kbd> shimmer while the demo
+          action runs), or send <kbd className="font-mono">/sample-command</kbd>{' '}
+          with Enter.
         </p>
         <ChatChrome
           showResizeHandle={false}
@@ -156,10 +185,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.',
-            additionalContent: (
-              <p>Optional empty-state slot via additionalContent.</p>
-            ),
+              'Pick sample-command from the palette or send /sample-command — onSlashItemCommand clears the composer, shows an inProgress placeholder, then posts the demo reply.',
           }}
         />
       </PageContentSection>

package/src/tiptap/slash-mention/types.ts

@@ -7,9 +7,10 @@ export type SlashCommandItem = {
 };
 
 export type SlashItemCommandContext = {
-  editor: Editor;
-  range: Range;
   item: SlashCommandItem;
+  /** Present when picked from the slash palette; omitted on Enter submit of `/id`. */
+  editor?: Editor;
+  range?: Range;
 };
 
 /**

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,32 +0,0 @@
-import {
-  GENERATE_DASHBOARD_SLASH_COMMAND_ID,
-  isGenerateDashboardSlashMessage,
-} from './Chat.types';
-
-describe('isGenerateDashboardSlashMessage', () => {
-  it('matches exact slash command', () => {
-    expect(
-      isGenerateDashboardSlashMessage(
-        `/${GENERATE_DASHBOARD_SLASH_COMMAND_ID}`,
-      ),
-    ).toBe(true);
-  });
-
-  it('trims surrounding whitespace', () => {
-    expect(
-      isGenerateDashboardSlashMessage(
-        `  /${GENERATE_DASHBOARD_SLASH_COMMAND_ID}  `,
-      ),
-    ).toBe(true);
-  });
-
-  it('rejects plain text and partial commands', () => {
-    expect(isGenerateDashboardSlashMessage('generate-dashboard')).toBe(false);
-    expect(isGenerateDashboardSlashMessage('/generate')).toBe(false);
-    expect(
-      isGenerateDashboardSlashMessage(
-        `/ ${GENERATE_DASHBOARD_SLASH_COMMAND_ID}`,
-      ),
-    ).toBe(false);
-  });
-});