@sybilion/uilib 1.3.33 → 1.3.36

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/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,
           }}

package/src/docs/registry.ts

@@ -109,6 +109,12 @@ export const DOC_REGISTRY: DocEntry[] = [
     section: 'Chat',
     load: () => import('./pages/ChatPage'),
   },
+  {
+    slug: 'chat-slash-commands',
+    title: 'Chat slash commands',
+    section: 'Chat',
+    load: () => import('./pages/ChatSlashCommandsPage'),
+  },
   {
     slug: 'chat-user-csv-attachment',
     title: 'Chat user CSV attachment',

package/src/index.ts

@@ -11,6 +11,7 @@ export { DEFAULT_THEME_ACTIVE_COLOR } from './docs/lib/theme';
 export * from './sybilion-auth';
 export * from './types/sybilionDatasetSnapshots';
 export * from './contexts/chat-context';
+export * from './tiptap/slash-mention';
 export * from './types/chat-api.types';
 export * from './components/ui/AnalysesSelector';
 export * from './components/ui/AnalysisLineIcon';

package/src/tiptap/slash-mention/SlashSuggestionList.styl

@@ -0,0 +1,48 @@
+@import 'lib/theme.styl';
+
+.root
+  display flex
+  flex-direction column
+  min-width 220px
+  max-width min(340px, 90vw)
+  max-height min(260px, 40vh)
+  overflow-y auto
+  padding var(--p-1)
+  margin 0
+  list-style none
+  background var(--popover, var(--card))
+  color var(--foreground)
+  border 1px solid var(--border)
+  border-radius var(--radius-lg, 8px)
+  box-shadow 0 8px 24px rgba(0, 0, 0, 0.12)
+  font-size var(--text-sm)
+
+  :global(.dark) &
+    box-shadow 0 8px 24px rgba(0, 0, 0, 0.5)
+
+.item
+  display flex
+  flex-direction column
+  align-items flex-start
+  width 100%
+  padding var(--p-1) var(--p-2)
+  margin 0
+  border none
+  border-radius var(--radius-md, 6px)
+  background transparent
+  color inherit
+  text-align left
+  cursor pointer
+
+  &:hover
+    background var(--muted)
+
+.itemHighlighted
+  background var(--muted)
+
+.itemLabel
+  font-weight 600
+
+.itemDesc
+  font-size var(--text-xs)
+  color var(--muted-foreground)

package/src/tiptap/slash-mention/SlashSuggestionList.styl.d.ts

@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'item': string;
+  'itemDesc': string;
+  'itemHighlighted': string;
+  'itemLabel': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/tiptap/slash-mention/SlashSuggestionList.tsx

@@ -0,0 +1,109 @@
+import cn from 'classnames';
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useImperativeHandle, useState } from 'react';
+
+import S from './SlashSuggestionList.styl';
+import type { SlashCommandItem } from './types';
+
+export type SlashSuggestionListHandle = {
+  onKeyboardEvent: (event: KeyboardEvent) => boolean;
+};
+
+type SlashSuggestionListInnerProps = {
+  items: SlashCommandItem[];
+  command: (item: SlashCommandItem) => void;
+  listHandleRef: RefObject<SlashSuggestionListHandle | null>;
+};
+
+function SlashSuggestionListInner({
+  items,
+  command,
+  listHandleRef,
+}: SlashSuggestionListInnerProps) {
+  const [selected, setSelected] = useState(0);
+
+  useEffect(() => {
+    setSelected(s => Math.min(s, Math.max(items.length - 1, 0)));
+  }, [items.length]);
+
+  const safeSel = Math.min(selected, Math.max(items.length - 1, 0));
+
+  const onPick = useCallback(
+    (index: number) => {
+      const item = items[index];
+      if (!item) return;
+      command(item);
+    },
+    [command, items],
+  );
+
+  const onKeyboardEvent = useCallback(
+    (event: KeyboardEvent): boolean => {
+      if (items.length === 0) return false;
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setSelected(s => Math.min(s + 1, items.length - 1));
+        return true;
+      }
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setSelected(s => Math.max(s - 1, 0));
+        return true;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        const max = Math.max(items.length - 1, 0);
+        const idx = Math.min(selected, max);
+        const item = items[idx];
+        if (item) command(item);
+        return true;
+      }
+      return false;
+    },
+    [command, items, selected],
+  );
+
+  useImperativeHandle(listHandleRef, () => ({ onKeyboardEvent }), [
+    onKeyboardEvent,
+  ]);
+
+  return (
+    <div className={S.root} role="listbox" aria-label="Slash commands">
+      {items.map((item, idx) => (
+        <button
+          key={`${item.id}-${idx}`}
+          type="button"
+          role="option"
+          aria-selected={idx === safeSel}
+          className={cn(S.item, idx === safeSel && S.itemHighlighted)}
+          onMouseDown={e => e.preventDefault()}
+          onMouseEnter={() => setSelected(idx)}
+          onClick={() => onPick(idx)}
+        >
+          <span className={S.itemLabel}>/{item.label}</span>
+          {item.description ? (
+            <span className={S.itemDesc}>{item.description}</span>
+          ) : null}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/** Props forwarded from Tiptap suggestion renderer + our wiring. */
+export type SlashSuggestionListProps = {
+  items: SlashCommandItem[];
+  command: (item: SlashCommandItem) => void;
+  listHandleRef: RefObject<SlashSuggestionListHandle | null>;
+};
+
+export function SlashSuggestionList(props: SlashSuggestionListProps) {
+  if (props.items.length === 0) return null;
+  return (
+    <SlashSuggestionListInner
+      items={props.items}
+      command={props.command}
+      listHandleRef={props.listHandleRef}
+    />
+  );
+}