@sybilion/uilib 1.3.32 → 1.3.35

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

@@ -1,22 +1,11 @@
 import cn from 'classnames';
-import {
-  ChangeEvent,
-  FormEvent,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
+import { FormEvent, useCallback, useRef } from 'react';
 
-import useEvent from '#uilib/hooks/useEvent';
-import { PaperclipIcon, SendHorizontalIcon } from 'lucide-react';
-
-import { Button } from '../../Button';
-import { Input } from '../../Input';
 import type { ChatPromptProps } from '../Chat.types';
-import { syncChatPromptTextareaHeight } from './ChatPrompt.helpers';
 import S from './ChatPrompt.styl';
 import { ChatPromptAttachments } from './ChatPromptAttachments';
+import { ChatPromptComposer } from './ChatPromptComposer';
+import { useChatPromptEditor } from './useChatPromptEditor';
 
 export function ChatPrompt({
   onSubmit,
@@ -24,117 +13,72 @@ export function ChatPrompt({
   className,
   footer,
   prefillMessage,
+  slashCommandItems,
   attachments = [],
   onRemoveAttachment,
   disabled = false,
   attachmentAccept,
   onAttachmentFiles,
 }: ChatPromptProps) {
-  const [message, setMessage] = useState('');
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
-
-  useLayoutEffect(() => {
-    const el = inputRef.current;
-    if (!el) return;
-    syncChatPromptTextareaHeight(el, message);
-  }, [message]);
+  const attachmentsCount = attachments.length;
 
-  useEffect(() => {
-    if (prefillMessage != null && prefillMessage !== '') {
-      setMessage(prefillMessage);
-    }
-  }, [prefillMessage]);
+  const emitSubmitRef = useRef(() => {});
+  const { editor, trimmedMessage, resetAfterSend, handleComposerKeyDown } =
+    useChatPromptEditor({
+      disabled,
+      placeholder,
+      slashCommandItems,
+      prefillMessage,
+      attachmentsCount,
+      onEnterSubmit: () => emitSubmitRef.current(),
+    });
 
-  const handleSubmit = (e: FormEvent | KeyboardEvent) => {
-    const trimmedMessage = message.trim();
-    const hasAttachments = attachments.length > 0;
+  const emitSubmitAndClear = useCallback(() => {
+    if (!editor) return;
+    if (!trimmedMessage && attachmentsCount === 0) return;
 
-    if (trimmedMessage || hasAttachments) {
-      e.preventDefault();
-      onSubmit(trimmedMessage, hasAttachments ? attachments : undefined);
-      setMessage('');
-    }
-  };
+    const msg = trimmedMessage;
+    resetAfterSend();
+    onSubmit(msg, attachmentsCount > 0 ? attachments : undefined);
+  }, [
+    attachments,
+    attachmentsCount,
+    editor,
+    onSubmit,
+    resetAfterSend,
+    trimmedMessage,
+  ]);
 
-  const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(e.target.files ?? []);
-    e.target.value = '';
-    if (files.length > 0) {
-      onAttachmentFiles?.(files);
-    }
-  };
+  emitSubmitRef.current = emitSubmitAndClear;
 
-  useEvent({
-    event: 'keydown',
-    callback: (e: KeyboardEvent) => {
-      if (e.key === 'Enter' && !(e.metaKey || e.shiftKey || e.ctrlKey)) {
-        e.preventDefault();
-        handleSubmit(e);
-        setMessage('');
-      }
+  const handleSubmitForm = useCallback(
+    (e?: FormEvent) => {
+      e?.preventDefault();
+      emitSubmitAndClear();
     },
-  });
+    [emitSubmitAndClear],
+  );
+
+  if (!editor) {
+    return null;
+  }
 
   return (
-    <form onSubmit={handleSubmit} className={cn(S.root, className)}>
+    <form onSubmit={handleSubmitForm} className={cn(S.root, className)}>
       <ChatPromptAttachments
         attachments={attachments}
         onRemove={index => onRemoveAttachment?.(index)}
         disabled={disabled}
       />
-      <div className={S.composer}>
-        {showAttachButton ? (
-          <>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept={attachmentAccept}
-              multiple
-              className={S.fileInput}
-              disabled={disabled}
-              onChange={handleFileInputChange}
-            />
-            <Button
-              type="button"
-              variant="ghost"
-              icon
-              size="sm"
-              className={S.attachButton}
-              aria-label="Attach file"
-              disabled={disabled}
-              onClick={e => {
-                e.preventDefault();
-                fileInputRef.current?.click();
-              }}
-            >
-              <PaperclipIcon size={16} />
-            </Button>
-          </>
-        ) : null}
-
-        <Input
-          ref={inputRef}
-          type="textarea"
-          rows={1}
-          value={message}
-          onChange={e => setMessage(e.target.value)}
-          placeholder={placeholder || 'Type a message...'}
-          className={cn(S.input)}
-        />
-
-        <div className={S.submitColumn}>
-          <Button
-            type="submit"
-            size="sm"
-            disabled={disabled || (!message.trim() && attachments.length === 0)}
-          >
-            <SendHorizontalIcon size={16} />
-          </Button>
-        </div>
-      </div>
-
+      <ChatPromptComposer
+        editor={editor}
+        disabled={disabled}
+        trimmedMessage={trimmedMessage}
+        attachments={attachments}
+        attachmentAccept={attachmentAccept}
+        onAttachmentFiles={onAttachmentFiles}
+        onComposerKeyDown={handleComposerKeyDown}
+      />
       {footer}
     </form>
   );

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

@@ -0,0 +1,93 @@
+import {
+  type ChangeEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  useCallback,
+  useRef,
+} from 'react';
+
+import type { Editor } from '@tiptap/core';
+import { EditorContent } from '@tiptap/react';
+import { PaperclipIcon, SendHorizontalIcon } from 'lucide-react';
+
+import { Button } from '../../Button';
+import type { ChatAttachmentDropItem } from '../Chat.types';
+import S from './ChatPrompt.styl';
+
+export type ChatPromptComposerProps = {
+  editor: Editor;
+  disabled: boolean;
+  trimmedMessage: string;
+  attachments: ChatAttachmentDropItem[];
+  attachmentAccept?: string;
+  onAttachmentFiles?: (files: File[]) => void;
+  onComposerKeyDown: (event: ReactKeyboardEvent) => void;
+};
+
+export function ChatPromptComposer({
+  editor,
+  disabled,
+  trimmedMessage,
+  attachments,
+  attachmentAccept,
+  onAttachmentFiles,
+  onComposerKeyDown,
+}: ChatPromptComposerProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const showAttachButton = Boolean(attachmentAccept && onAttachmentFiles);
+
+  const handleFileInputChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(e.target.files ?? []);
+      e.target.value = '';
+      if (files.length > 0) {
+        onAttachmentFiles?.(files);
+      }
+    },
+    [onAttachmentFiles],
+  );
+
+  const canSubmit = Boolean(trimmedMessage || attachments.length > 0);
+
+  return (
+    <div className={S.composer}>
+      {showAttachButton ? (
+        <>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={attachmentAccept}
+            multiple
+            className={S.fileInput}
+            disabled={disabled}
+            onChange={handleFileInputChange}
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            icon
+            size="sm"
+            className={S.attachButton}
+            aria-label="Attach file"
+            disabled={disabled}
+            onClick={e => {
+              e.preventDefault();
+              fileInputRef.current?.click();
+            }}
+          >
+            <PaperclipIcon size={16} />
+          </Button>
+        </>
+      ) : null}
+
+      <div className={S.editorWrap} onKeyDown={onComposerKeyDown}>
+        <EditorContent editor={editor} className={S.editorMount} />
+      </div>
+
+      <div className={S.submitColumn}>
+        <Button type="submit" size="sm" disabled={disabled || !canSubmit}>
+          <SendHorizontalIcon size={16} />
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import type { JSONContent } from '@tiptap/core';
+
+export const CHAT_PROMPT_EMPTY_DOC: JSONContent = {
+  type: 'doc',
+  content: [{ type: 'paragraph' }],
+};
+
+export function chatPromptParagraphDoc(text: string): JSONContent {
+  return {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: text ? [{ type: 'text', text }] : [],
+      },
+    ],
+  };
+}

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

@@ -0,0 +1,214 @@
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  DEFAULT_CHAT_SLASH_ITEMS,
+  createSlashMentionExtension,
+} from '#uilib/tiptap/slash-mention';
+import type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
+import type { AnyExtension, Editor } from '@tiptap/core';
+import { Placeholder } from '@tiptap/extensions';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+
+import {
+  chatPromptSafeEditorDom,
+  syncChatPromptComposerHeight,
+} from './ChatPrompt.helpers';
+import { CHAT_PROMPT_EMPTY_DOC, chatPromptParagraphDoc } from './chatPromptDoc';
+
+export type UseChatPromptEditorOptions = {
+  disabled: boolean;
+  placeholder?: string;
+  slashCommandItems?: SlashCommandItem[];
+  prefillMessage?: string | null;
+  /** Staged attachment count — Enter-to-send when text empty but files present. */
+  attachmentsCount?: number;
+  /** Called when user presses Enter to send (after guards). */
+  onEnterSubmit: () => void;
+};
+
+export type UseChatPromptEditorResult = {
+  editor: Editor | null;
+  trimmedMessage: string;
+  resetAfterSend: () => void;
+  handleComposerKeyDown: (event: ReactKeyboardEvent) => void;
+};
+
+export function useChatPromptEditor({
+  disabled,
+  placeholder,
+  slashCommandItems,
+  prefillMessage,
+  attachmentsCount = 0,
+  onEnterSubmit,
+}: UseChatPromptEditorOptions): UseChatPromptEditorResult {
+  const slashOpenRef = useRef(false);
+  const suggestionActiveUpdater = useCallback((active: boolean) => {
+    slashOpenRef.current = active;
+  }, []);
+
+  const slashFinger = JSON.stringify(slashCommandItems ?? null);
+  const slashItemsStable = useMemo(() => {
+    return slashCommandItems ?? DEFAULT_CHAT_SLASH_ITEMS;
+  }, [slashCommandItems, slashFinger]);
+
+  const placeholderText = useMemo(() => {
+    if (placeholder === undefined || placeholder === null) {
+      return 'Type a message…';
+    }
+    const t = String(placeholder).trim();
+    return t === '' ? 'Type a message…' : t;
+  }, [placeholder]);
+
+  const ariaLabelComposer = useMemo(() => {
+    if (placeholder === undefined || placeholder === null) return 'Message';
+    const t = String(placeholder).trim();
+    return t === '' ? 'Message' : t;
+  }, [placeholder]);
+
+  const extensions = useMemo(() => {
+    const exts: AnyExtension[] = [
+      StarterKit.configure({
+        heading: false,
+        bulletList: false,
+        orderedList: false,
+        blockquote: false,
+        codeBlock: false,
+        horizontalRule: false,
+      }),
+      Placeholder.configure({
+        placeholder: placeholderText,
+        showOnlyWhenEditable: true,
+        showOnlyCurrent: false,
+      }),
+    ];
+    if (slashItemsStable.length > 0) {
+      exts.push(
+        createSlashMentionExtension({
+          items: slashItemsStable,
+          onSuggestionUiActiveChange: suggestionActiveUpdater,
+        }),
+      );
+    }
+    return exts;
+  }, [slashItemsStable, placeholderText, suggestionActiveUpdater]);
+
+  const [plainDraft, setPlainDraft] = useState('');
+
+  const editorDomRef = useRef<HTMLElement | null>(null);
+
+  const bindEditorDom = useCallback(({ editor }: { editor: Editor }) => {
+    setPlainDraft(editor.getText());
+    queueMicrotask(() => {
+      const dom = chatPromptSafeEditorDom(editor);
+      if (!dom) return;
+      editorDomRef.current = dom;
+      syncChatPromptComposerHeight(dom, editor.getText());
+    });
+  }, []);
+
+  const trimmedMessage = plainDraft.trim();
+
+  const editor = useEditor(
+    {
+      extensions,
+      content: CHAT_PROMPT_EMPTY_DOC,
+      editable: !disabled,
+      immediatelyRender: true,
+      editorProps: {
+        attributes: {
+          spellcheck: 'true',
+          'aria-label': ariaLabelComposer,
+        },
+      },
+      onTransaction: ({ editor: ed }) => {
+        const dom = chatPromptSafeEditorDom(ed);
+        if (dom) {
+          syncChatPromptComposerHeight(dom, ed.getText());
+        }
+        setPlainDraft(ed.getText());
+      },
+      onCreate: bindEditorDom,
+    },
+    [extensions, disabled, bindEditorDom, ariaLabelComposer],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(!disabled);
+  }, [editor, disabled]);
+
+  useEffect(() => {
+    if (!editor) return;
+    const bind = () => {
+      editorDomRef.current = chatPromptSafeEditorDom(editor);
+    };
+    bind();
+    let rafId: number | null = null;
+    if (typeof window !== 'undefined') {
+      rafId = window.requestAnimationFrame(bind);
+    }
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+    };
+  }, [editor]);
+
+  useEffect(() => {
+    if (!editor || prefillMessage == null || prefillMessage === '') return;
+    editor.commands.setContent(chatPromptParagraphDoc(prefillMessage));
+    const t = editor.getText();
+    setPlainDraft(t);
+    queueMicrotask(() => {
+      const dom = chatPromptSafeEditorDom(editor);
+      if (dom) syncChatPromptComposerHeight(dom, t);
+    });
+  }, [editor, prefillMessage]);
+
+  useLayoutEffect(() => {
+    if (!editor) return;
+    const dom = chatPromptSafeEditorDom(editor);
+    if (!dom) return;
+    syncChatPromptComposerHeight(dom, plainDraft);
+  }, [editor, plainDraft]);
+
+  const onEnterSubmitRef = useRef(onEnterSubmit);
+  onEnterSubmitRef.current = onEnterSubmit;
+
+  const resetAfterSend = useCallback(() => {
+    if (!editor) return;
+    editor.commands.clearContent();
+    queueMicrotask(() => {
+      const dom = chatPromptSafeEditorDom(editor);
+      if (dom) syncChatPromptComposerHeight(dom, '');
+    });
+    setPlainDraft('');
+  }, [editor]);
+
+  const handleComposerKeyDown = useCallback(
+    (e: ReactKeyboardEvent) => {
+      if (!(e.key === 'Enter' && !e.shiftKey && !e.metaKey && !e.ctrlKey))
+        return;
+      if (!editorDomRef.current?.contains(e.target as Node)) return;
+      if (slashOpenRef.current) return;
+      if (!trimmedMessage && attachmentsCount === 0) return;
+      e.preventDefault();
+      onEnterSubmitRef.current();
+    },
+    [attachmentsCount, trimmedMessage],
+  );
+
+  return {
+    editor,
+    trimmedMessage,
+    resetAfterSend,
+    handleComposerKeyDown,
+  };
+}

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

@@ -40,4 +40,5 @@ export type {
   UserTextFileAttachment,
 } from './Chat.types';
 export { MessageRole } from './Chat.types';
+export type { SlashCommandItem } from '#uilib/tiptap/slash-mention/types';
 export { CsvIcon } from '../../icons/CsvIcon/CsvIcon';

package/src/components/ui/Tooltip/Tooltip.styl

@@ -3,6 +3,7 @@
 .tooltipContent
   z-index 50
   width fit-content
+  min-width 100%
   padding 6px 12px
   border-radius var(--p-3)
   background-color var(--popover)

package/src/components/ui/Tooltip/Tooltip.tsx

@@ -129,7 +129,7 @@ function applyOverTriggerStyles(
   wrapper.style.setProperty('min-width', '0', 'important');
   wrapper.style.setProperty(
     'width',
-    `${rect.width + paddingLeft + paddingRight + borderLeft + borderRight + 20}px`,
+    `${rect.width + paddingLeft + paddingRight + borderLeft + borderRight}px`,
     'important',
   );
 

package/src/docs/pages/ChatSlashCommandsPage.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+  ChatChrome,
+  Message,
+  MessageRole,
+  type SlashCommandItem,
+} from '#uilib/components/ui/Chat';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { ScrollRef } from '@homecode/ui';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const NO_QUICK_REPLY_KEYS: ReadonlySet<string> = new Set();
+
+/** 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',
+    description:
+      'Demo only — define `slashCommandItems` in your app to list real commands.',
+  },
+];
+
+const ASSISTANT_REPLY_TEXT =
+  'Demo reply. Picked slash text is `/sample-command` via TipTap Mention (plain-text round-trip with renderText).';
+
+function makeMessage(role: MessageRole, text: string): Message {
+  return {
+    id: crypto.randomUUID(),
+    role,
+    text,
+    timestamp: Date.now(),
+  };
+}
+
+export default function ChatSlashCommandsPage() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const replyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const scrollRef = useRef<ScrollRef>(null);
+
+  useEffect(() => {
+    return () => {
+      if (replyTimeoutRef.current != null) {
+        clearTimeout(replyTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const isEmpty = messages.length === 0 && !isLoading;
+  const isLastMessageFromUser =
+    messages.length > 0 &&
+    messages[messages.length - 1]?.role === MessageRole.USER;
+
+  const onSubmit = useCallback(
+    (raw: string) => {
+      const text = raw.trim();
+      if (!text || isLoading) return;
+
+      setMessages(prev => [...prev, makeMessage(MessageRole.USER, text)]);
+      setIsLoading(true);
+
+      if (replyTimeoutRef.current != null) {
+        clearTimeout(replyTimeoutRef.current);
+      }
+      replyTimeoutRef.current = setTimeout(() => {
+        replyTimeoutRef.current = null;
+        setMessages(prev => [
+          ...prev,
+          makeMessage(MessageRole.ASSISTANT, ASSISTANT_REPLY_TEXT),
+        ]);
+        setIsLoading(false);
+      }, 900);
+    },
+    [isLoading],
+  );
+
+  return (
+    <>
+      <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).`}
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <p style={{ marginBottom: 16, fontSize: 14, lineHeight: 1.5 }}>
+          Same{' '}
+          <Link className="underline underline-offset-2" to="/docs/chat">
+            Chat
+          </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.
+        </p>
+        <ChatChrome
+          showResizeHandle={false}
+          resizeHandle={undefined}
+          onClose={undefined}
+          isEmpty={isEmpty}
+          renderPresets={() => null}
+          messages={messages}
+          onQuickReply={() => {}}
+          suppressedQuickReplyKeys={NO_QUICK_REPLY_KEYS}
+          isLoading={isLoading}
+          scriptContinueLabel={undefined}
+          onScriptContinue={undefined}
+          showBranchActionsRow={false}
+          showSyntheticBranchButtons={false}
+          unusedBranchKeys={[]}
+          isScriptComplete={false}
+          onGenerateDashboard={undefined}
+          generatingDashboard={false}
+          onGenerateDashboardClick={() => {}}
+          showInlinePresets={false}
+          isLastMessageFromUser={isLastMessageFromUser}
+          scrollRef={scrollRef}
+          effectiveScopeId="docs-chat-slash-inline"
+          onPromptSubmit={onSubmit}
+          onChatDeleted={() => {}}
+          slashCommandItems={DOCS_SAMPLE_SLASH_ITEMS}
+          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.',
+            additionalContent: (
+              <p>Optional empty-state slot via additionalContent.</p>
+            ),
+          }}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/TooltipPage.tsx

@@ -41,7 +41,7 @@ export default function TooltipPage() {
         <p style={{ margin: '0 0 8px', fontWeight: 600 }}>Over trigger</p>
         <div
           style={{
-            maxWidth: 280,
+            maxWidth: 500,
             border: '1px dashed var(--border)',
             padding: 8,
           }}