@sybilion/uilib 1.3.36 → 1.3.38

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;
   }, []);
@@ -94,7 +101,9 @@ export function useChatPromptEditor({
       exts.push(
         createSlashMentionExtension({
           items: slashItemsStable,
+          suggestionPlacement: 'above',
           onSuggestionUiActiveChange: suggestionActiveUpdater,
+          onItemCommand: ctx => onSlashItemCommandRef.current?.(ctx) === true,
         }),
       );
     }
@@ -138,7 +147,7 @@ export function useChatPromptEditor({
       },
       onCreate: bindEditorDom,
     },
-    [extensions, disabled, bindEditorDom, ariaLabelComposer],
+    [extensions, bindEditorDom, ariaLabelComposer],
   );
 
   useEffect(() => {

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

@@ -47,6 +47,7 @@ export function ChatSheet({
   allowedAttachments,
   allowPdfAttachments,
   onAttachmentsDropped,
+  slashCommandItems,
   inline = false,
 }: ChatSheetProps) {
   const model = useChatPanelChromeModel({
@@ -61,6 +62,7 @@ export function ChatSheet({
     allowedAttachments,
     allowPdfAttachments,
     onAttachmentsDropped,
+    slashCommandItems,
   });
 
   if (actionsRef) {

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,6 +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,
+  SlashItemCommandContext,
+} from '#uilib/tiptap/slash-mention/types';
 import { mergePresetFreeformDefaults } from '#uilib/utils/chatPresetMerge';
 import { ScrollRef } from '@homecode/ui';
 
@@ -57,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;
@@ -70,6 +76,8 @@ export type UseChatPanelChromeModelInput = {
   onAttachmentsDropped?: (
     items: ChatAttachmentDropItem[],
   ) => void | Promise<void>;
+  /** Slash menu (`/`) in the composer; omit or pass empty to disable. */
+  slashCommandItems?: SlashCommandItem[];
 };
 
 export type UseChatPanelChromeModelResult = {
@@ -118,6 +126,7 @@ export function useChatPanelChromeModel({
   allowedAttachments,
   allowPdfAttachments,
   onAttachmentsDropped,
+  slashCommandItems,
 }: UseChatPanelChromeModelInput): UseChatPanelChromeModelResult {
   const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
   const isMobile = useIsMobile();
@@ -189,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>
   >({});
@@ -616,103 +625,107 @@ export function useChatPanelChromeModel({
     ],
   );
 
-  const submitPreset = useCallback(async (preset: ChatPreset) => {
-    const script = preset.script;
-    const scriptGraph = isPresetScriptGraph(script);
-    const hasLinearScript = Array.isArray(script) && script.length > 0;
-    const hasReplies = preset.replies && Object.keys(preset.replies).length > 0;
-    const isLocalDemo =
-      hasLinearScript ||
-      scriptGraph ||
-      Boolean(preset.answer?.trim()) ||
-      Boolean(hasReplies);
-
-    if (!isLocalDemo) {
-      if (!currentChatId) return;
-      endLocalDemoFlow(currentChatId);
-      await handlePromptSubmit(preset.text);
-      return;
-    }
+  const submitPreset = useCallback(
+    async (preset: ChatPreset) => {
+      const script = preset.script;
+      const scriptGraph = isPresetScriptGraph(script);
+      const hasLinearScript = Array.isArray(script) && script.length > 0;
+      const hasReplies =
+        preset.replies && Object.keys(preset.replies).length > 0;
+      const isLocalDemo =
+        hasLinearScript ||
+        scriptGraph ||
+        Boolean(preset.answer?.trim()) ||
+        Boolean(hasReplies);
+
+      if (!isLocalDemo) {
+        if (!currentChatId) return;
+        endLocalDemoFlow(currentChatId);
+        await handlePromptSubmit(preset.text);
+        return;
+      }
 
-    setLocalUiBusy(true);
-    try {
-      if (!currentChatId) return;
-      setScriptCompleteByChatId(prev => {
-        const next = { ...prev };
-        delete next[currentChatId];
-        return next;
-      });
-      addMessage(currentChatId, MessageRole.USER, preset.text);
-      await new Promise(resolve => setTimeout(resolve, 1000));
-      const firstAssistant = scriptGraph
-        ? script.initialMessage
-        : (preset.answer ?? '');
-      addMessage(currentChatId, MessageRole.ASSISTANT, firstAssistant);
-
-      setScriptByChatId(prev => {
-        const next = { ...prev };
-        if (hasLinearScript) {
-          next[currentChatId] = {
-            lines: script,
-            nextIndex: 0,
-            presetId: preset.id,
-          };
-        } else {
+      setLocalUiBusy(true);
+      try {
+        if (!currentChatId) return;
+        setScriptCompleteByChatId(prev => {
+          const next = { ...prev };
           delete next[currentChatId];
+          return next;
+        });
+        addMessage(currentChatId, MessageRole.USER, preset.text);
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        const firstAssistant = scriptGraph
+          ? script.initialMessage
+          : (preset.answer ?? '');
+        addMessage(currentChatId, MessageRole.ASSISTANT, firstAssistant);
+
+        setScriptByChatId(prev => {
+          const next = { ...prev };
+          if (hasLinearScript) {
+            next[currentChatId] = {
+              lines: script,
+              nextIndex: 0,
+              presetId: preset.id,
+            };
+          } else {
+            delete next[currentChatId];
+          }
+          return next;
+        });
+        setQuickReplyBranchesByChat(prev => {
+          const next = { ...prev };
+          if (scriptGraph) {
+            next[currentChatId] = branchesFromPresetScriptGraph(script);
+          } else if (hasReplies && !hasLinearScript) {
+            next[currentChatId] = preset.replies!;
+          } else {
+            delete next[currentChatId];
+          }
+          return next;
+        });
+        if (scriptGraph || (hasReplies && !hasLinearScript)) {
+          setUsedScriptBranchKeysByChat(prev => ({
+            ...prev,
+            [currentChatId]: [],
+          }));
         }
-        return next;
-      });
-      setQuickReplyBranchesByChat(prev => {
-        const next = { ...prev };
         if (scriptGraph) {
-          next[currentChatId] = branchesFromPresetScriptGraph(script);
-        } else if (hasReplies && !hasLinearScript) {
-          next[currentChatId] = preset.replies!;
-        } else {
-          delete next[currentChatId];
-        }
-        return next;
-      });
-      if (scriptGraph || (hasReplies && !hasLinearScript)) {
-        setUsedScriptBranchKeysByChat(prev => ({
-          ...prev,
-          [currentChatId]: [],
-        }));
-      }
-      if (scriptGraph) {
-        const fromMerged = presetsWithFreeform.find(p => p.id === preset.id);
-        let freeformNext = {
-          ...(fromMerged?.freeformNext ?? {}),
-          ...(preset.freeformNext ?? {}),
-        };
-        if (Object.keys(freeformNext).length === 0) {
-          const ks = Object.keys(branchesFromPresetScriptGraph(script));
-          if (ks.length === 1) {
-            freeformNext = { initial: ks[0] };
+          const fromMerged = presetsWithFreeform.find(p => p.id === preset.id);
+          let freeformNext = {
+            ...(fromMerged?.freeformNext ?? {}),
+            ...(preset.freeformNext ?? {}),
+          };
+          if (Object.keys(freeformNext).length === 0) {
+            const ks = Object.keys(branchesFromPresetScriptGraph(script));
+            if (ks.length === 1) {
+              freeformNext = { initial: ks[0] };
+            }
           }
+          setIntakeByChatId(prev => ({
+            ...prev,
+            [currentChatId!]: {
+              presetId: preset.id,
+              freeformNext,
+              scriptStepId: 'initial',
+              answers: {},
+            },
+          }));
         }
-        setIntakeByChatId(prev => ({
-          ...prev,
-          [currentChatId!]: {
-            presetId: preset.id,
-            freeformNext,
-            scriptStepId: 'initial',
-            answers: {},
-          },
-        }));
+      } catch (error) {
+        logger.error('Error sending chat message:', error);
+      } finally {
+        setLocalUiBusy(false);
       }
-    } catch (error) {
-      logger.error('Error sending chat message:', error);
-    } finally {
-      setLocalUiBusy(false);
-    }
-  }, [
-    currentChatId,
-    endLocalDemoFlow,
-    handlePromptSubmit,
-    addMessage,
-    presetsWithFreeform,
-  ]);
+    },
+    [
+      currentChatId,
+      endLocalDemoFlow,
+      handlePromptSubmit,
+      addMessage,
+      presetsWithFreeform,
+    ],
+  );
 
   const resolvedEmptyState = useMemo((): ChatEmptyStateProps | undefined => {
     if (!emptyState) return undefined;
@@ -948,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(
@@ -989,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],
@@ -1020,26 +1063,21 @@ 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,
     allowedAttachments,
     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/docsHeaderActions.tsx

@@ -1,9 +1,9 @@
-import { ChatSheet } from '#uilib/components/ui/Chat';
+import { ChatSheet, ChatSheetProps } from '#uilib/components/ui/Chat';
 import { MessageSquare } from 'lucide-react';
 
 import { DOCS_CHAT_SCOPE_ID } from './docsConstants';
 
-export function DocsHeaderActions() {
+export function DocsHeaderActions(props: ChatSheetProps) {
   return (
     <ChatSheet
       triggerLabel={
@@ -21,6 +21,7 @@ export function DocsHeaderActions() {
           <p>Optional empty-state slot via additionalContent.</p>
         ),
       }}
+      {...props}
     />
   );
 }

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}