@sybilion/uilib 1.3.36 → 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;
     }, []);
@@ -48,7 +50,9 @@ function useChatPromptEditor({ disabled, placeholder, slashCommandItems, prefill
         if (slashItemsStable.length > 0) {
             exts.push(createSlashMentionExtension({
                 items: slashItemsStable,
+                suggestionPlacement: 'above',
                 onSuggestionUiActiveChange: suggestionActiveUpdater,
+                onItemCommand: ctx => onSlashItemCommandRef.current?.(ctx) === true,
             }));
         }
         return exts;
@@ -85,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/ChatSheet.js

@@ -4,7 +4,7 @@ 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, inline = false, }) {
+function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, renderTrigger, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, inline = false, }) {
     const model = useChatPanelChromeModel({
         embedAsPage: inline,
         presets,
@@ -17,6 +17,7 @@ function ChatSheet({ triggerLabel = 'Open Chat', triggerAriaLabel, actionsRef, r
         allowedAttachments,
         allowPdfAttachments,
         onAttachmentsDropped,
+        slashCommandItems,
     });
     if (actionsRef) {
         actionsRef.current = {

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';
@@ -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, }) {
+function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, }) {
     const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
     const isMobile = useIsMobile();
     const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, chatWidthPx, setChatWidthPx, getShellWidth, setChatPanelOpen, } = useSidebar();
@@ -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,26 +789,21 @@ 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,
         allowedAttachments,
         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

@@ -4,17 +4,30 @@ import { ReactRenderer } from '@tiptap/react';
 import { SlashSuggestionList } from './SlashSuggestionList.js';
 import { filterSlashItems } from './defaultChatSlashItems.js';
 
-function slashMentionSuggestionRender(uiRef) {
+const SUGGESTION_GAP_PX = 4;
+function placeSlashSuggestionPopup(popupElement, clientRect, placement) {
+    if (!clientRect)
+        return;
+    const el = popupElement;
+    const popupHeight = el.getBoundingClientRect().height;
+    const spaceBelow = window.innerHeight - clientRect.bottom - SUGGESTION_GAP_PX;
+    const spaceAbove = clientRect.top - SUGGESTION_GAP_PX;
+    let showAbove = placement === 'above';
+    if (placement === 'auto') {
+        showAbove = spaceBelow < popupHeight && spaceAbove >= spaceBelow;
+    }
+    const top = showAbove
+        ? Math.max(SUGGESTION_GAP_PX, clientRect.top - popupHeight - SUGGESTION_GAP_PX)
+        : clientRect.bottom + SUGGESTION_GAP_PX;
+    el.style.left = `${clientRect.left}px`;
+    el.style.top = `${top}px`;
+}
+function slashMentionSuggestionRender(uiRef, placement = 'below') {
     let popup = null;
     const place = (props) => {
         if (!popup?.element)
             return;
-        const rect = props.clientRect?.();
-        if (!rect)
-            return;
-        const el = popup.element;
-        el.style.left = `${rect.left}px`;
-        el.style.top = `${rect.bottom + 4}px`;
+        placeSlashSuggestionPopup(popup.element, props.clientRect?.() ?? null, placement);
     };
     return {
         onStart: props => {
@@ -33,6 +46,7 @@ function slashMentionSuggestionRender(uiRef) {
             popup.element.style.zIndex = '10002';
             document.body.append(popup.element);
             place(props);
+            requestAnimationFrame(() => place(props));
         },
         onUpdate: props => {
             if (!popup)
@@ -43,6 +57,7 @@ function slashMentionSuggestionRender(uiRef) {
                 listHandleRef: uiRef,
             });
             place(props);
+            requestAnimationFrame(() => place(props));
         },
         onExit: () => {
             popup?.destroy();
@@ -53,6 +68,28 @@ function slashMentionSuggestionRender(uiRef) {
         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;
@@ -88,7 +125,7 @@ function allowSlashTrigger({ state, range, }) {
     const before = state.doc.textBetween(range.from - 1, range.from);
     return /\s/.test(before);
 }
-function createSlashMentionExtension({ items: resolvedItems, slashChar = '/', pluginKey, onItemCommand, onSuggestionUiActiveChange, }) {
+function createSlashMentionExtension({ items: resolvedItems, slashChar = '/', pluginKey, onItemCommand, suggestionPlacement = 'below', onSuggestionUiActiveChange, }) {
     const uiRef = {
         current: null,
     };
@@ -120,18 +157,15 @@ 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);
                 return null;
             },
             render: () => {
-                const menu = slashMentionSuggestionRender(uiRef);
+                const menu = slashMentionSuggestionRender(uiRef, suggestionPlacement);
                 return {
                     ...menu,
                     onStart: props => {

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/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, inline, }: ChatSheetProps): import("react/jsx-runtime").JSX.Element;
+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;

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

@@ -1,4 +1,5 @@
 import { ChatPreset, type ScriptCompletePayload } from '#uilib/components/ui/Chat/Chat.types';
+import type { SlashCommandItem } 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';
@@ -11,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;
@@ -22,6 +23,8 @@ export type UseChatPanelChromeModelInput = {
     /** When true, PDF drops are accepted and parsed to plain text. */
     allowPdfAttachments?: boolean;
     onAttachmentsDropped?: (items: ChatAttachmentDropItem[]) => void | Promise<void>;
+    /** Slash menu (`/`) in the composer; omit or pass empty to disable. */
+    slashCommandItems?: SlashCommandItem[];
 };
 export type UseChatPanelChromeModelResult = {
     chromeProps: ChatChromeProps;
@@ -31,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, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;
+export declare function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, onGenerateDashboard, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult;

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/docs/docsHeaderActions.d.ts

@@ -1 +1,2 @@
-export declare function DocsHeaderActions(): import("react/jsx-runtime").JSX.Element;
+import { ChatSheetProps } from '#uilib/components/ui/Chat';
+export declare function DocsHeaderActions(props: ChatSheetProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 import type { MutableRefObject } from 'react';
 import type { SuggestionProps } from '@tiptap/suggestion';
 import { type SlashSuggestionListHandle } from './SlashSuggestionList';
-import type { CreateSlashMentionExtensionOptions, SlashCommandItem } from './types';
-export declare function slashMentionSuggestionRender(uiRef: MutableRefObject<SlashSuggestionListHandle | null>): {
+import type { CreateSlashMentionExtensionOptions, SlashCommandItem, SlashSuggestionPlacement } from './types';
+export declare function slashMentionSuggestionRender(uiRef: MutableRefObject<SlashSuggestionListHandle | null>, placement?: SlashSuggestionPlacement): {
     onStart?: (props: SuggestionProps<SlashCommandItem, SlashCommandItem>) => void;
     onUpdate?: (props: SuggestionProps<SlashCommandItem, SlashCommandItem>) => void;
     onExit?: (props: SuggestionProps<SlashCommandItem, SlashCommandItem>) => void;
@@ -18,4 +18,4 @@ export declare function slashMentionSuggestionRender(uiRef: MutableRefObject<Sla
 export type CreateSlashMentionExtensionConfiguredOptions = CreateSlashMentionExtensionOptions & {
     onSuggestionUiActiveChange?: (active: boolean) => void;
 };
-export declare function createSlashMentionExtension({ items: resolvedItems, slashChar, pluginKey, onItemCommand, onSuggestionUiActiveChange, }: CreateSlashMentionExtensionConfiguredOptions): import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;
+export declare function createSlashMentionExtension({ items: resolvedItems, slashChar, pluginKey, onItemCommand, suggestionPlacement, onSuggestionUiActiveChange, }: CreateSlashMentionExtensionConfiguredOptions): import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;

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

@@ -1,4 +1,4 @@
-export type { SlashCommandItem, SlashOnItemCommand, SlashItemCommandContext, CreateSlashMentionExtensionOptions, } from './types';
+export type { SlashCommandItem, SlashOnItemCommand, SlashItemCommandContext, SlashSuggestionPlacement, CreateSlashMentionExtensionOptions, } from './types';
 export { DEFAULT_CHAT_SLASH_ITEMS, filterSlashItems, } from './defaultChatSlashItems';
 export { createSlashMentionExtension, slashMentionSuggestionRender, } from './createSlashMentionExtension';
 export type { CreateSlashMentionExtensionConfiguredOptions } from './createSlashMentionExtension';

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

@@ -10,9 +10,12 @@ 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. */
+export type SlashSuggestionPlacement = 'below' | 'above' | 'auto';
 export type CreateSlashMentionExtensionOptions = {
     /** Items shown in the slash menu (filtered by query after `/`). */
     items: SlashCommandItem[];
@@ -22,4 +25,9 @@ export type CreateSlashMentionExtensionOptions = {
     pluginKey?: import('@tiptap/pm/state').PluginKey;
     /** Custom handler (e.g. insert a block node instead of a mention). */
     onItemCommand?: SlashOnItemCommand;
+    /**
+     * Palette position vs caret. Default `below`.
+     * Use `above` for bottom-anchored composers (chat prompt); `auto` flips by viewport space.
+     */
+    suggestionPlacement?: SlashSuggestionPlacement;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.36",
+  "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 {