@sybilion/uilib 1.3.37 → 1.3.38

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

@@ -6,5 +6,10 @@ var MessageRole;
 })(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 { GENERATING_DASHBOARD_SYSTEM_TEXT, MessageRole };
+export { GENERATE_DASHBOARD_SLASH_COMMAND_ID, GENERATING_DASHBOARD_SYSTEM_TEXT, MessageRole, isGenerateDashboardSlashMessage };

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

@@ -4,7 +4,7 @@ import { useMemo, useState, useCallback, useEffect } from 'react';
 import { displayLabelForBranchKeyFromMessages, humanizeBranchKey } from '../ChatMessage/presetScript.js';
 import { TextShimmer } from '../../TextShimmer/TextShimmer.js';
 import { Scroll } from '@homecode/ui';
-import { X, PaperPlaneRightIcon, ChartLineIcon } from '@phosphor-icons/react';
+import { X, PaperPlaneRightIcon } from '@phosphor-icons/react';
 import { Button } from '../../Button/Button.js';
 import { DropZone } from '../../DropZone/DropZone.js';
 import { PanelResizeHandle } from '../../Sidebar/Sidebar.js';
@@ -14,7 +14,7 @@ import { filterToTextAttachments, isAttachmentsDropzoneEnabled, buildAcceptAttr
 import { extractChatAttachmentItems } from '../chatAttachmentExtract.js';
 import S from './ChatChrome.styl.js';
 
-function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showBranchActionsRow, showSyntheticBranchButtons, unusedBranchKeys, isScriptComplete, onGenerateDashboard, generatingDashboard, onGenerateDashboardClick, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments = false, onAttachmentsDropped, slashCommandItems, promptPlaceholder, }) {
+function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments = false, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, }) {
     const filteredAllowedAttachments = useMemo(() => filterToTextAttachments(allowedAttachments), [allowedAttachments]);
     const attachmentsDropzoneEnabled = isAttachmentsDropzoneEnabled(allowedAttachments, allowPdfAttachments);
     const attachmentAccept = useMemo(() => buildAcceptAttr(filteredAllowedAttachments, allowPdfAttachments), [filteredAllowedAttachments, allowPdfAttachments]);
@@ -73,14 +73,11 @@ function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPr
                                                     : undefined, onScriptContinue: isLast && scriptContinueLabel
                                                     ? onScriptContinue
                                                     : undefined, renderMessageChart: renderMessageChart }, msg.id));
-                                        }), showBranchActionsRow && (jsxs("div", { className: S.branchRow, children: [showSyntheticBranchButtons
-                                                    ? unusedBranchKeys.map(key => {
-                                                        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, isScriptComplete &&
-                                                    onGenerateDashboard &&
-                                                    !generatingDashboard ? (jsxs(Button, { type: "button", variant: "default", size: "lg", disabled: isLoading, onClick: onGenerateDashboardClick, children: [jsx(ChartLineIcon, {}), "Generate Dashboard"] })) : 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, attachmentAccept: attachmentsDropzoneEnabled ? attachmentAccept : undefined, onAttachmentFiles: attachmentsDropzoneEnabled ? handleAttachmentFiles : undefined })] })] })] })] }));
+                                        }), showSyntheticBranchButtons ? (jsx("div", { className: S.branchRow, children: unusedBranchKeys.map(key => {
+                                                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 })] })] })] })] }));
 }
 
 export { ChatChrome };

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

@@ -6,13 +6,14 @@ import { ChatPromptAttachments } from './ChatPromptAttachments.js';
 import { ChatPromptComposer } from './ChatPromptComposer.js';
 import { useChatPromptEditor } from './useChatPromptEditor.js';
 
-function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, slashCommandItems, attachments = [], onRemoveAttachment, disabled = false, attachmentAccept, onAttachmentFiles, }) {
+function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, slashCommandItems, onSlashItemCommand, attachments = [], onRemoveAttachment, disabled = false, attachmentAccept, onAttachmentFiles, }) {
     const attachmentsCount = attachments.length;
     const emitSubmitRef = useRef(() => { });
     const { editor, trimmedMessage, resetAfterSend, handleComposerKeyDown } = useChatPromptEditor({
         disabled,
         placeholder,
         slashCommandItems,
+        onSlashItemCommand,
         prefillMessage,
         attachmentsCount,
         onEnterSubmit: () => emitSubmitRef.current(),

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

@@ -7,8 +7,10 @@ import StarterKit from '@tiptap/starter-kit';
 import { chatPromptSafeEditorDom, syncChatPromptComposerHeight } from './ChatPrompt.helpers.js';
 import { CHAT_PROMPT_EMPTY_DOC, chatPromptParagraphDoc } from './chatPromptDoc.js';
 
-function useChatPromptEditor({ disabled, placeholder, slashCommandItems, prefillMessage, attachmentsCount = 0, onEnterSubmit, }) {
+function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount = 0, onEnterSubmit, }) {
     const slashOpenRef = useRef(false);
+    const onSlashItemCommandRef = useRef(onSlashItemCommand);
+    onSlashItemCommandRef.current = onSlashItemCommand;
     const suggestionActiveUpdater = useCallback((active) => {
         slashOpenRef.current = active;
     }, []);
@@ -50,6 +52,7 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, prefill
                 items: slashItemsStable,
                 suggestionPlacement: 'above',
                 onSuggestionUiActiveChange: suggestionActiveUpdater,
+                onItemCommand: ctx => onSlashItemCommandRef.current?.(ctx) === true,
             }));
         }
         return exts;
@@ -86,7 +89,7 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, prefill
             setPlainDraft(ed.getText());
         },
         onCreate: bindEditorDom,
-    }, [extensions, disabled, bindEditorDom, ariaLabelComposer]);
+    }, [extensions, bindEditorDom, ariaLabelComposer]);
     useEffect(() => {
         if (!editor)
             return;

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT } from '../Chat.types.js';
+import { MessageRole, GENERATING_DASHBOARD_SYSTEM_TEXT, GENERATE_DASHBOARD_SLASH_COMMAND_ID, isGenerateDashboardSlashMessage } 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';
@@ -58,7 +58,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
     const [quickReplyBranchesByChat, setQuickReplyBranchesByChat] = useState({});
     const [usedScriptBranchKeysByChat, setUsedScriptBranchKeysByChat] = useState({});
     const [intakeByChatId, setIntakeByChatId] = useState({});
-    /** Preset intake finished for this session; show [Generate Dashboard] when `onGenerateDashboard` is set. */
+    /** Preset intake finished for this session (e.g. `onScriptComplete` callback). */
     const [scriptCompleteByChatId, setScriptCompleteByChatId] = useState({});
     const [generatingDashboard, setGeneratingDashboard] = useState(false);
     const scriptAdvanceLockRef = useRef(false);
@@ -712,10 +712,6 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         lastMsg?.role === MessageRole.ASSISTANT &&
         !linearScriptActive &&
         (!graphActive || (!lastHasQuickMarkers && unusedBranchKeys.length === 0));
-    const isScriptComplete = Boolean(currentChatId && scriptCompleteByChatId[currentChatId]);
-    /** Branch row also when intake is done but all branches used (Generate Dashboard only). */
-    const showBranchActionsRow = showSyntheticBranchButtons ||
-        (isScriptComplete && Boolean(onGenerateDashboard) && !generatingDashboard);
     const handleGenerateDashboard = useCallback(async () => {
         if (!currentChatId || !onGenerateDashboard)
             return;
@@ -743,6 +739,33 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         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();
+            return;
+        }
+        return handlePromptSubmit(message, attachments);
+    }, [
+        handlePromptSubmit,
+        onGenerateDashboard,
+        generatingDashboard,
+        handleGenerateDashboard,
+    ]);
     const onDragChatWidth = useCallback((rawPx) => setChatWidthPx(rawPx, { persist: false }), [setChatWidthPx]);
     const onDragChatComplete = useCallback((finalRawPx) => setChatWidthPx(finalRawPx, { persist: true }), [setChatWidthPx]);
     const chromeProps = {
@@ -766,20 +789,13 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         scriptContinueLabel,
         onScriptContinue,
         renderMessageChart,
-        showBranchActionsRow,
         showSyntheticBranchButtons,
         unusedBranchKeys,
-        isScriptComplete,
-        onGenerateDashboard,
-        generatingDashboard,
-        onGenerateDashboardClick: () => {
-            void handleGenerateDashboard();
-        },
         showInlinePresets,
         isLastMessageFromUser,
         scrollRef,
         effectiveScopeId,
-        onPromptSubmit: handlePromptSubmit,
+        onPromptSubmit: onPromptSubmitWithSlashCommands,
         onChatDeleted: endLocalDemoFlow,
         promptPrefill: promptLinkPrefill,
         emptyState: resolvedEmptyState,
@@ -787,6 +803,7 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         allowPdfAttachments,
         onAttachmentsDropped,
         slashCommandItems,
+        onSlashItemCommand,
     };
     const toggleOpen = () => onOpenChange(!isOpen);
     return {

package/dist/esm/index.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 { MessageRole } from './components/ui/Chat/Chat.types.js';
+export { GENERATE_DASHBOARD_SLASH_COMMAND_ID, MessageRole, isGenerateDashboardSlashMessage } 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/tiptap/slash-mention/createSlashMentionExtension.js

@@ -68,6 +68,28 @@ function slashMentionSuggestionRender(uiRef, placement = 'below') {
         onKeyDown: ({ event }) => uiRef.current?.onKeyboardEvent(event) ?? false,
     };
 }
+function clearSlashTriggerEditor(editor, range) {
+    if (editor.isDestroyed)
+        return;
+    try {
+        editor.chain().focus().deleteRange(range).clearContent().run();
+    }
+    catch {
+        // Editor view may be tearing down during suggestion exit.
+    }
+}
+function collapseEditorSelectionEnd(editor) {
+    if (editor.isDestroyed)
+        return;
+    try {
+        editor.view?.dom?.ownerDocument?.defaultView
+            ?.getSelection?.()
+            ?.collapseToEnd();
+    }
+    catch {
+        // view.dom throws when editor is not mounted
+    }
+}
 function insertDefaultMention(editor, range, props, slashChar) {
     const nodeAfter = editor.view.state.selection.$to.nodeAfter;
     const extend = nodeAfter?.text?.startsWith(' ') ? 1 : 0;
@@ -135,11 +157,8 @@ function createSlashMentionExtension({ items: resolvedItems, slashChar = '/', pl
             command: ({ editor, range, props }) => {
                 const item = props;
                 if (onItemCommand?.({ editor, range, item }) === true) {
-                    queueMicrotask(() => {
-                        editor.view.dom.ownerDocument?.defaultView
-                            ?.getSelection?.()
-                            ?.collapseToEnd();
-                    });
+                    clearSlashTriggerEditor(editor, range);
+                    queueMicrotask(() => collapseEditorSelectionEnd(editor));
                     return null;
                 }
                 insertDefaultMention(editor, range, item, slashChar);

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
-import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type { SlashCommandItem, SlashOnItemCommand } from '#uilib/tiptap/slash-mention/types';
 import type { PresetScriptGraph } from './ChatMessage/presetScript';
 export declare enum MessageRole {
     USER = "user",
@@ -8,6 +8,9 @@ export declare enum MessageRole {
 }
 /** 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;
@@ -84,6 +87,8 @@ export interface ChatPromptProps {
     onAttachmentFiles?: (files: File[]) => void;
     /** Slash menu (`/`); omit or pass empty to disable Mention trigger (no default items). */
     slashCommandItems?: SlashCommandItem[];
+    /** Custom slash pick handler; return true to skip default mention insert. */
+    onSlashItemCommand?: SlashOnItemCommand;
 }
 export interface ChatMessageProps {
     role: MessageRole;

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

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

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

@@ -1,2 +1,2 @@
 import type { ChatChromeProps } from './ChatChrome.types';
-export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showBranchActionsRow, showSyntheticBranchButtons, unusedBranchKeys, isScriptComplete, onGenerateDashboard, generatingDashboard, onGenerateDashboardClick, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, promptPlaceholder, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatChrome({ showResizeHandle, resizeHandle, onClose, isEmpty, renderPresets, messages, onQuickReply, suppressedQuickReplyKeys, isLoading, scriptContinueLabel, onScriptContinue, renderMessageChart, showSyntheticBranchButtons, unusedBranchKeys, showInlinePresets, isLastMessageFromUser, scrollRef, effectiveScopeId, onPromptSubmit, onChatDeleted, promptPrefill, footerClassName, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, promptPlaceholder, }: ChatChromeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import type { RefObject } from 'react';
 import type { ChatAttachmentDropItem, Message } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
 import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
-import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type { SlashCommandItem, SlashOnItemCommand } from '#uilib/tiptap/slash-mention/types';
 import type { ScrollRef } from '@homecode/ui';
 export type ChatChromeResizeHandleConfig = {
     isActive: boolean;
@@ -26,13 +26,8 @@ export interface ChatChromeProps {
     scriptContinueLabel: string | undefined;
     onScriptContinue: (() => void) | undefined;
     renderMessageChart?: () => React.ReactNode;
-    showBranchActionsRow: boolean;
     showSyntheticBranchButtons: boolean;
     unusedBranchKeys: string[];
-    isScriptComplete: boolean;
-    onGenerateDashboard: ((transcript: string) => void | Promise<void>) | undefined;
-    generatingDashboard: boolean;
-    onGenerateDashboardClick: () => void;
     showInlinePresets: boolean;
     isLastMessageFromUser: boolean;
     scrollRef: RefObject<ScrollRef | null>;
@@ -51,6 +46,8 @@ export interface ChatChromeProps {
     onAttachmentsDropped?: (items: ChatAttachmentDropItem[]) => void | Promise<void>;
     /** Slash menu (`/`), forwarded to `Chat.Prompt`; omit or pass empty list to disable slash palette. */
     slashCommandItems?: SlashCommandItem[];
+    /** Custom slash pick handler; forwarded to `Chat.Prompt`. */
+    onSlashItemCommand?: SlashOnItemCommand;
     /** Composer placeholder forwarded to `Chat.Prompt`. */
     promptPlaceholder?: string;
 }

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

@@ -1,2 +1,2 @@
 import type { ChatPromptProps } from '../Chat.types';
-export declare function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, slashCommandItems, attachments, onRemoveAttachment, disabled, attachmentAccept, onAttachmentFiles, }: ChatPromptProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPrompt({ onSubmit, placeholder, className, footer, prefillMessage, slashCommandItems, onSlashItemCommand, attachments, onRemoveAttachment, disabled, attachmentAccept, onAttachmentFiles, }: ChatPromptProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,11 @@
 import { type KeyboardEvent as ReactKeyboardEvent } from 'react';
-import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type { SlashCommandItem, SlashOnItemCommand } from '#uilib/tiptap/slash-mention/types';
 import type { Editor } from '@tiptap/core';
 export type UseChatPromptEditorOptions = {
     disabled: boolean;
     placeholder?: string;
     slashCommandItems?: SlashCommandItem[];
+    onSlashItemCommand?: SlashOnItemCommand;
     prefillMessage?: string | null;
     /** Staged attachment count — Enter-to-send when text empty but files present. */
     attachmentsCount?: number;
@@ -17,4 +18,4 @@ export type UseChatPromptEditorResult = {
     resetAfterSend: () => void;
     handleComposerKeyDown: (event: ReactKeyboardEvent) => void;
 };
-export declare function useChatPromptEditor({ disabled, placeholder, slashCommandItems, prefillMessage, attachmentsCount, onEnterSubmit, }: UseChatPromptEditorOptions): UseChatPromptEditorResult;
+export declare function useChatPromptEditor({ disabled, placeholder, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount, onEnterSubmit, }: UseChatPromptEditorOptions): UseChatPromptEditorResult;

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

@@ -12,7 +12,7 @@ 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;
-    /** After intake script completes, user can generate a dashboard from the full transcript (e.g. Decision board). */
+    /** 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;

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

@@ -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 { MessageRole } from './Chat.types';
+export { GENERATE_DASHBOARD_SLASH_COMMAND_ID, isGenerateDashboardSlashMessage, MessageRole, } from './Chat.types';
 export type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

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

@@ -10,7 +10,8 @@ export type SlashItemCommandContext = {
     item: SlashCommandItem;
 };
 /**
- * If provided, run before default mention insertion. Return true to skip inserting a mention node.
+ * If provided, run when a slash item is picked. Return true to skip mention insert
+ * (extension clears the trigger text from the composer).
  */
 export type SlashOnItemCommand = (ctx: SlashItemCommandContext) => boolean;
 /** Where the slash palette opens relative to the caret. */

package/package.json

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

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

@@ -0,0 +1,32 @@
+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);
+  });
+});

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

@@ -1,6 +1,9 @@
 import type { HTMLAttributes, ReactNode } from 'react';
 
-import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type {
+  SlashCommandItem,
+  SlashOnItemCommand,
+} from '#uilib/tiptap/slash-mention/types';
 
 import type { PresetScriptGraph } from './ChatMessage/presetScript';
 
@@ -13,6 +16,13 @@ export enum MessageRole {
 /** 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;
@@ -96,6 +106,8 @@ export interface ChatPromptProps {
   onAttachmentFiles?: (files: File[]) => void;
   /** Slash menu (`/`); omit or pass empty to disable Mention trigger (no default items). */
   slashCommandItems?: SlashCommandItem[];
+  /** Custom slash pick handler; return true to skip default mention insert. */
+  onSlashItemCommand?: SlashOnItemCommand;
 }
 
 export interface ChatMessageProps {

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

@@ -7,7 +7,7 @@ import {
 } from '#uilib/components/ui/Chat/ChatMessage/presetScript';
 import { TextShimmer } from '#uilib/components/ui/TextShimmer';
 import { Scroll } from '@homecode/ui';
-import { ChartLineIcon, PaperPlaneRightIcon, X } from '@phosphor-icons/react';
+import { PaperPlaneRightIcon, X } from '@phosphor-icons/react';
 
 import { Button } from '../../Button';
 import { DropZone } from '../../DropZone/DropZone';
@@ -37,13 +37,8 @@ export function ChatChrome({
   scriptContinueLabel,
   onScriptContinue,
   renderMessageChart,
-  showBranchActionsRow,
   showSyntheticBranchButtons,
   unusedBranchKeys,
-  isScriptComplete,
-  onGenerateDashboard,
-  generatingDashboard,
-  onGenerateDashboardClick,
   showInlinePresets,
   isLastMessageFromUser,
   scrollRef,
@@ -57,6 +52,7 @@ export function ChatChrome({
   allowPdfAttachments = false,
   onAttachmentsDropped,
   slashCommandItems,
+  onSlashItemCommand,
   promptPlaceholder,
 }: ChatChromeProps) {
   const filteredAllowedAttachments = useMemo(
@@ -223,48 +219,29 @@ export function ChatChrome({
                   );
                 })}
 
-                {showBranchActionsRow && (
+                {showSyntheticBranchButtons ? (
                   <div className={S.branchRow}>
-                    {showSyntheticBranchButtons
-                      ? unusedBranchKeys.map(key => {
-                          const label =
-                            displayLabelForBranchKeyFromMessages(
-                              key,
-                              messages,
-                            ) ?? humanizeBranchKey(key);
-                          return (
-                            <span key={key} className={S.branchBtnWrap}>
-                              <Button
-                                type="button"
-                                variant="outline"
-                                size="sm"
-                                disabled={isLoading}
-                                onClick={() => onQuickReply(key, label)}
-                              >
-                                <PaperPlaneRightIcon />
-                                {label}
-                              </Button>
-                            </span>
-                          );
-                        })
-                      : null}
-
-                    {isScriptComplete &&
-                    onGenerateDashboard &&
-                    !generatingDashboard ? (
-                      <Button
-                        type="button"
-                        variant="default"
-                        size="lg"
-                        disabled={isLoading}
-                        onClick={onGenerateDashboardClick}
-                      >
-                        <ChartLineIcon />
-                        Generate Dashboard
-                      </Button>
-                    ) : null}
+                    {unusedBranchKeys.map(key => {
+                      const label =
+                        displayLabelForBranchKeyFromMessages(key, messages) ??
+                        humanizeBranchKey(key);
+                      return (
+                        <span key={key} className={S.branchBtnWrap}>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            disabled={isLoading}
+                            onClick={() => onQuickReply(key, label)}
+                          >
+                            <PaperPlaneRightIcon />
+                            {label}
+                          </Button>
+                        </span>
+                      );
+                    })}
                   </div>
-                )}
+                ) : null}
 
                 {showInlinePresets && renderPresets('inline')}
 
@@ -291,6 +268,7 @@ export function ChatChrome({
               prefillMessage={promptPrefill ?? undefined}
               placeholder={promptPlaceholder}
               slashCommandItems={slashCommandItems}
+              onSlashItemCommand={onSlashItemCommand}
               attachmentAccept={
                 attachmentsDropzoneEnabled ? attachmentAccept : undefined
               }

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

@@ -6,7 +6,10 @@ import type {
 } from '#uilib/components/ui/Chat/Chat.types';
 import type { ChatEmptyStateProps } from '#uilib/components/ui/Chat/ChatEmptyState/ChatEmptyState.types';
 import type { ChatPresetsLayout } from '#uilib/components/ui/Chat/ChatPresets';
-import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type {
+  SlashCommandItem,
+  SlashOnItemCommand,
+} from '#uilib/tiptap/slash-mention/types';
 import type { ScrollRef } from '@homecode/ui';
 
 export type ChatChromeResizeHandleConfig = {
@@ -33,15 +36,8 @@ export interface ChatChromeProps {
   scriptContinueLabel: string | undefined;
   onScriptContinue: (() => void) | undefined;
   renderMessageChart?: () => React.ReactNode;
-  showBranchActionsRow: boolean;
   showSyntheticBranchButtons: boolean;
   unusedBranchKeys: string[];
-  isScriptComplete: boolean;
-  onGenerateDashboard:
-    | ((transcript: string) => void | Promise<void>)
-    | undefined;
-  generatingDashboard: boolean;
-  onGenerateDashboardClick: () => void;
   showInlinePresets: boolean;
   isLastMessageFromUser: boolean;
   scrollRef: RefObject<ScrollRef | null>;
@@ -65,6 +61,8 @@ export interface ChatChromeProps {
   ) => void | Promise<void>;
   /** Slash menu (`/`), forwarded to `Chat.Prompt`; omit or pass empty list to disable slash palette. */
   slashCommandItems?: SlashCommandItem[];
+  /** Custom slash pick handler; forwarded to `Chat.Prompt`. */
+  onSlashItemCommand?: SlashOnItemCommand;
   /** Composer placeholder forwarded to `Chat.Prompt`. */
   promptPlaceholder?: string;
 }

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

@@ -14,6 +14,7 @@ export function ChatPrompt({
   footer,
   prefillMessage,
   slashCommandItems,
+  onSlashItemCommand,
   attachments = [],
   onRemoveAttachment,
   disabled = false,
@@ -28,6 +29,7 @@ export function ChatPrompt({
       disabled,
       placeholder,
       slashCommandItems,
+      onSlashItemCommand,
       prefillMessage,
       attachmentsCount,
       onEnterSubmit: () => emitSubmitRef.current(),

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

@@ -12,7 +12,10 @@ import {
   DEFAULT_CHAT_SLASH_ITEMS,
   createSlashMentionExtension,
 } from '#uilib/tiptap/slash-mention';
-import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type {
+  SlashCommandItem,
+  SlashOnItemCommand,
+} from '#uilib/tiptap/slash-mention/types';
 import type { AnyExtension, Editor } from '@tiptap/core';
 import { Placeholder } from '@tiptap/extensions';
 import { useEditor } from '@tiptap/react';
@@ -28,6 +31,7 @@ export type UseChatPromptEditorOptions = {
   disabled: boolean;
   placeholder?: string;
   slashCommandItems?: SlashCommandItem[];
+  onSlashItemCommand?: SlashOnItemCommand;
   prefillMessage?: string | null;
   /** Staged attachment count — Enter-to-send when text empty but files present. */
   attachmentsCount?: number;
@@ -46,11 +50,14 @@ export function useChatPromptEditor({
   disabled,
   placeholder,
   slashCommandItems,
+  onSlashItemCommand,
   prefillMessage,
   attachmentsCount = 0,
   onEnterSubmit,
 }: UseChatPromptEditorOptions): UseChatPromptEditorResult {
   const slashOpenRef = useRef(false);
+  const onSlashItemCommandRef = useRef(onSlashItemCommand);
+  onSlashItemCommandRef.current = onSlashItemCommand;
   const suggestionActiveUpdater = useCallback((active: boolean) => {
     slashOpenRef.current = active;
   }, []);
@@ -96,6 +103,7 @@ export function useChatPromptEditor({
           items: slashItemsStable,
           suggestionPlacement: 'above',
           onSuggestionUiActiveChange: suggestionActiveUpdater,
+          onItemCommand: ctx => onSlashItemCommandRef.current?.(ctx) === true,
         }),
       );
     }
@@ -139,7 +147,7 @@ export function useChatPromptEditor({
       },
       onCreate: bindEditorDom,
     },
-    [extensions, disabled, bindEditorDom, ariaLabelComposer],
+    [extensions, bindEditorDom, ariaLabelComposer],
   );
 
   useEffect(() => {

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

@@ -2,9 +2,11 @@ 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,
@@ -38,7 +40,10 @@ import useEvent from '#uilib/hooks/useEvent';
 import { useIsMobile } from '#uilib/hooks/useIsMobile';
 import { useQueryParams } from '#uilib/hooks/useQueryParams';
 import logger from '#uilib/lib/logger';
-import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type {
+  SlashCommandItem,
+  SlashItemCommandContext,
+} from '#uilib/tiptap/slash-mention/types';
 import { mergePresetFreeformDefaults } from '#uilib/utils/chatPresetMerge';
 import { ScrollRef } from '@homecode/ui';
 
@@ -58,7 +63,7 @@ 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;
-  /** After intake script completes, user can generate a dashboard from the full transcript (e.g. Decision board). */
+  /** 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;
@@ -193,7 +198,7 @@ export function useChatPanelChromeModel({
   const [intakeByChatId, setIntakeByChatId] = useState<
     Record<string, IntakeScriptState | undefined>
   >({});
-  /** Preset intake finished for this session; show [Generate Dashboard] when `onGenerateDashboard` is set. */
+  /** Preset intake finished for this session (e.g. `onScriptComplete` callback). */
   const [scriptCompleteByChatId, setScriptCompleteByChatId] = useState<
     Record<string, boolean>
   >({});
@@ -956,15 +961,6 @@ export function useChatPanelChromeModel({
     !linearScriptActive &&
     (!graphActive || (!lastHasQuickMarkers && unusedBranchKeys.length === 0));
 
-  const isScriptComplete = Boolean(
-    currentChatId && scriptCompleteByChatId[currentChatId],
-  );
-
-  /** Branch row also when intake is done but all branches used (Generate Dashboard only). */
-  const showBranchActionsRow =
-    showSyntheticBranchButtons ||
-    (isScriptComplete && Boolean(onGenerateDashboard) && !generatingDashboard);
-
   const handleGenerateDashboard = useCallback(async () => {
     if (!currentChatId || !onGenerateDashboard) return;
     const transcript = formatChatTranscript(
@@ -997,6 +993,45 @@ export function useChatPanelChromeModel({
     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();
+        return;
+      }
+      return handlePromptSubmit(message, attachments);
+    },
+    [
+      handlePromptSubmit,
+      onGenerateDashboard,
+      generatingDashboard,
+      handleGenerateDashboard,
+    ],
+  );
+
   const onDragChatWidth = useCallback(
     (rawPx: number) => setChatWidthPx(rawPx, { persist: false }),
     [setChatWidthPx],
@@ -1028,20 +1063,13 @@ export function useChatPanelChromeModel({
     scriptContinueLabel,
     onScriptContinue,
     renderMessageChart,
-    showBranchActionsRow,
     showSyntheticBranchButtons,
     unusedBranchKeys,
-    isScriptComplete,
-    onGenerateDashboard,
-    generatingDashboard,
-    onGenerateDashboardClick: () => {
-      void handleGenerateDashboard();
-    },
     showInlinePresets,
     isLastMessageFromUser,
     scrollRef,
     effectiveScopeId,
-    onPromptSubmit: handlePromptSubmit,
+    onPromptSubmit: onPromptSubmitWithSlashCommands,
     onChatDeleted: endLocalDemoFlow,
     promptPrefill: promptLinkPrefill,
     emptyState: resolvedEmptyState,
@@ -1049,6 +1077,7 @@ export function useChatPanelChromeModel({
     allowPdfAttachments,
     onAttachmentsDropped,
     slashCommandItems,
+    onSlashItemCommand,
   };
 
   const toggleOpen = () => onOpenChange(!isOpen);

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

@@ -39,6 +39,10 @@ export type {
   Message,
   UserTextFileAttachment,
 } from './Chat.types';
-export { MessageRole } from './Chat.types';
+export {
+  GENERATE_DASHBOARD_SLASH_COMMAND_ID,
+  isGenerateDashboardSlashMessage,
+  MessageRole,
+} from './Chat.types';
 export type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

package/src/docs/pages/ChatAttachmentsDropzonePage.tsx

@@ -120,13 +120,8 @@ export default function ChatAttachmentsDropzonePage() {
           isLoading={isLoading}
           scriptContinueLabel={undefined}
           onScriptContinue={undefined}
-          showBranchActionsRow={false}
           showSyntheticBranchButtons={false}
           unusedBranchKeys={[]}
-          isScriptComplete={false}
-          onGenerateDashboard={undefined}
-          generatingDashboard={false}
-          onGenerateDashboardClick={() => {}}
           showInlinePresets={false}
           isLastMessageFromUser={isLastMessageFromUser}
           scrollRef={scrollRef}

package/src/docs/pages/ChatPage.tsx

@@ -84,13 +84,8 @@ export default function ChatPage() {
           isLoading={isLoading}
           scriptContinueLabel={undefined}
           onScriptContinue={undefined}
-          showBranchActionsRow={false}
           showSyntheticBranchButtons={false}
           unusedBranchKeys={[]}
-          isScriptComplete={false}
-          onGenerateDashboard={undefined}
-          generatingDashboard={false}
-          onGenerateDashboardClick={() => {}}
           showInlinePresets={false}
           isLastMessageFromUser={isLastMessageFromUser}
           scrollRef={scrollRef}

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -8,6 +8,7 @@ import {
   type SlashCommandItem,
 } from '#uilib/components/ui/Chat';
 import { PageContentSection } from '#uilib/components/ui/Page';
+import type { SlashItemCommandContext } from '#uilib/tiptap/slash-mention/types';
 import { ScrollRef } from '@homecode/ui';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
@@ -15,18 +16,23 @@ import { DocsHeaderActions } from '../docsHeaderActions';
 
 const NO_QUICK_REPLY_KEYS: ReadonlySet<string> = new Set();
 
+const DOCS_SAMPLE_COMMAND_ID = 'sample-command';
+
 /** Sample items so the docs demo still shows a `/` palette (`DEFAULT_CHAT_SLASH_ITEMS` is empty). */
 const DOCS_SAMPLE_SLASH_ITEMS: SlashCommandItem[] = [
   {
-    id: 'sample-command',
-    label: 'sample-command',
+    id: DOCS_SAMPLE_COMMAND_ID,
+    label: DOCS_SAMPLE_COMMAND_ID,
     description:
-      'Demo only — define `slashCommandItems` in your app to list real commands.',
+      'Demo handler — clears composer and runs `onSlashItemCommand` (no mention insert).',
   },
 ];
 
+const SAMPLE_COMMAND_REPLY_TEXT =
+  'Sample command ran via `onSlashItemCommand` — composer cleared, no mention inserted.';
+
 const ASSISTANT_REPLY_TEXT =
-  'Demo reply. Picked slash text is `/sample-command` via TipTap Mention (plain-text round-trip with renderText).';
+  'Demo reply for a normal message. Slash picks with a custom handler skip mention insert.';
 
 function makeMessage(role: MessageRole, text: string): Message {
   return {
@@ -56,11 +62,34 @@ export default function ChatSlashCommandsPage() {
     messages.length > 0 &&
     messages[messages.length - 1]?.role === MessageRole.USER;
 
+  const runSampleCommand = useCallback(() => {
+    setMessages(prev => [
+      ...prev,
+      makeMessage(MessageRole.ASSISTANT, SAMPLE_COMMAND_REPLY_TEXT),
+    ]);
+  }, []);
+
+  const onSlashItemCommand = useCallback(
+    ({ item }: SlashItemCommandContext) => {
+      if (item.id !== DOCS_SAMPLE_COMMAND_ID) {
+        return false;
+      }
+      queueMicrotask(() => runSampleCommand());
+      return true;
+    },
+    [runSampleCommand],
+  );
+
   const onSubmit = useCallback(
     (raw: string) => {
       const text = raw.trim();
       if (!text || isLoading) return;
 
+      if (text === `/${DOCS_SAMPLE_COMMAND_ID}`) {
+        runSampleCommand();
+        return;
+      }
+
       setMessages(prev => [...prev, makeMessage(MessageRole.USER, text)]);
       setIsLoading(true);
 
@@ -76,7 +105,7 @@ export default function ChatSlashCommandsPage() {
         setIsLoading(false);
       }, 900);
     },
-    [isLoading],
+    [isLoading, runSampleCommand],
   );
 
   return (
@@ -84,7 +113,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. Library default item list is empty — pass slashCommandItems from the app (this page uses a sample item for the demo).`}
+        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.`}
         actions={
           <DocsHeaderActions slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS} />
         }
@@ -97,7 +126,9 @@ export default function ChatSlashCommandsPage() {
           </Link>{' '}
           shell below: scrolling history, empty state, disclaimer, composer.
           Type <kbd className="font-mono">/</kbd> at line start or after a
-          space; pick with arrows + Enter or click, then send.
+          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.
         </p>
         <ChatChrome
           showResizeHandle={false}
@@ -111,13 +142,8 @@ export default function ChatSlashCommandsPage() {
           isLoading={isLoading}
           scriptContinueLabel={undefined}
           onScriptContinue={undefined}
-          showBranchActionsRow={false}
           showSyntheticBranchButtons={false}
           unusedBranchKeys={[]}
-          isScriptComplete={false}
-          onGenerateDashboard={undefined}
-          generatingDashboard={false}
-          onGenerateDashboardClick={() => {}}
           showInlinePresets={false}
           isLastMessageFromUser={isLastMessageFromUser}
           scrollRef={scrollRef}
@@ -125,11 +151,12 @@ export default function ChatSlashCommandsPage() {
           onPromptSubmit={onSubmit}
           onChatDeleted={() => {}}
           slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS}
+          onSlashItemCommand={onSlashItemCommand}
           promptPlaceholder='Ask something or type "/" for demo commands…'
           emptyState={{
             title: 'Try a slash command',
             description:
-              'This demo mounts one sample slash item. Production: pass slashCommandItems to ChatChrome so `/` opens your palette.',
+              '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>
             ),

package/src/docs/pages/ChatUserCsvAttachmentPage.tsx

@@ -148,13 +148,8 @@ export default function ChatUserCsvAttachmentPage() {
           isLoading={isLoading}
           scriptContinueLabel={undefined}
           onScriptContinue={undefined}
-          showBranchActionsRow={false}
           showSyntheticBranchButtons={false}
           unusedBranchKeys={[]}
-          isScriptComplete={false}
-          onGenerateDashboard={undefined}
-          generatingDashboard={false}
-          onGenerateDashboardClick={() => {}}
           showInlinePresets={false}
           isLastMessageFromUser={isLastMessageFromUser}
           scrollRef={scrollRef}

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

@@ -124,6 +124,28 @@ export function slashMentionSuggestionRender(
   };
 }
 
+function clearSlashTriggerEditor(
+  editor: Editor,
+  range: { from: number; to: number },
+): void {
+  if (editor.isDestroyed) return;
+  try {
+    editor.chain().focus().deleteRange(range).clearContent().run();
+  } catch {
+    // Editor view may be tearing down during suggestion exit.
+  }
+}
+
+function collapseEditorSelectionEnd(editor: Editor): void {
+  if (editor.isDestroyed) return;
+  try {
+    editor.view?.dom?.ownerDocument?.defaultView
+      ?.getSelection?.()
+      ?.collapseToEnd();
+  } catch {
+    // view.dom throws when editor is not mounted
+  }
+}
 function insertDefaultMention(
   editor: Editor,
   range: { from: number; to: number },
@@ -223,11 +245,8 @@ export function createSlashMentionExtension({
       command: ({ editor, range, props }) => {
         const item = props as SlashCommandItem;
         if (onItemCommand?.({ editor, range, item }) === true) {
-          queueMicrotask(() => {
-            editor.view.dom.ownerDocument?.defaultView
-              ?.getSelection?.()
-              ?.collapseToEnd();
-          });
+          clearSlashTriggerEditor(editor, range);
+          queueMicrotask(() => collapseEditorSelectionEnd(editor));
           return null;
         }
         insertDefaultMention(editor, range, item, slashChar);

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

@@ -13,7 +13,8 @@ export type SlashItemCommandContext = {
 };
 
 /**
- * If provided, run before default mention insertion. Return true to skip inserting a mention node.
+ * If provided, run when a slash item is picked. Return true to skip mention insert
+ * (extension clears the trigger text from the composer).
  */
 export type SlashOnItemCommand = (ctx: SlashItemCommandContext) => boolean;