@homecode/ui 5.1.18 → 5.3.1

package/dist/esm/index.js

@@ -33,6 +33,9 @@ export { Portal } from './src/components/Portal/Portal.js';
 export { PopupMenu } from './src/components/PopupMenu/PopupMenu.js';
 export { Progress } from './src/components/Progress/Progress.js';
 export { ProgressCircular } from './src/components/ProgressCircular/ProgressCircular.js';
+export { PromptComposer } from './src/components/PromptComposer/PromptComposer.js';
+export { usePromptComposerEditor } from './src/components/PromptComposer/usePromptComposerEditor.js';
+export { PROMPT_COMPOSER_COMMAND_CHIP_CLASS, createPromptComposerHandle, getPromptComposerTokenRangeBeforePos, insertPromptComposerContentAtCaret, promptComposerChipHtml, promptComposerMentionNode } from './src/components/PromptComposer/promptComposerInsert.js';
 export { RadioButton } from './src/components/RadioButton/RadioButton.js';
 export { RadioGroup } from './src/components/RadioGroup/RadioGroup.js';
 export { Router, RouterContext, RouterStore } from './src/components/Router/Router.js';
@@ -57,6 +60,8 @@ export { default as VirtualizedListScroll } from './src/components/Virtualized/L
 import * as Virtualized_types from './src/components/Virtualized/Virtualized.types.js';
 export { Virtualized_types as VirtualizedTypes };
 export { Toggle } from './src/components/Toggle/Toggle.js';
+export { DEFAULT_CHAT_SLASH_ITEMS, filterSlashItems } from './src/tiptap/slash-mention/defaultChatSlashItems.js';
+export { createSlashMentionExtension, slashMentionSuggestionRender } from './src/tiptap/slash-mention/createSlashMentionExtension.js';
 import * as i18n from './src/services/i18n.js';
 export { i18n };
 import * as env from './src/tools/env.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -46,6 +46,7 @@ import '../Gallery/Gallery.styl.js';
 import '../Heading/Heading.js';
 import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
+import '../../tiptap/slash-mention/createSlashMentionExtension.js';
 import '../../services/i18n.js';
 import '../Portal/Portal.js';
 import '../Paranja/Paranja.styl.js';
@@ -56,6 +57,10 @@ import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
+import '../PromptComposer/PromptComposer.js';
+import '@tiptap/extensions';
+import '@tiptap/react';
+import '@tiptap/starter-kit';
 import '../RadioGroup/RadioGroupContext.js';
 import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';
@@ -162,6 +167,8 @@ function Autocomplete(props) {
         return true;
     };
     const handleSelect = (option) => {
+        if (!option)
+            return;
         if (selectable) {
             setSelectedId(option.id);
             setSelectedLabel(option.label);
@@ -191,7 +198,12 @@ function Autocomplete(props) {
     const { focusedIndex, setFocusedIndex } = useListKeyboardControl({
         isActive: isPopupOpenForInput,
         itemsCount: displayItems.length,
-        onSelect: index => handleSelect(displayItems[index]),
+        onSelect: index => {
+            const option = displayItems[index];
+            if (!option)
+                return;
+            handleSelect(option);
+        },
     });
     const fetchOptionsCore = useCallback(async (filter, offset) => {
         const requestKey = `${filter}:${offset}`;

package/dist/esm/src/components/InputFile/InputFile.js

@@ -55,6 +55,11 @@ import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
+import '../PromptComposer/PromptComposer.js';
+import '@tiptap/extensions';
+import '@tiptap/react';
+import '@tiptap/starter-kit';
+import '../../tiptap/slash-mention/createSlashMentionExtension.js';
 import '../RadioGroup/RadioGroupContext.js';
 import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';

package/dist/esm/src/components/PromptComposer/PromptComposer.helpers.js

@@ -0,0 +1,44 @@
+/** Keep in sync with `PromptComposer.styl` max/min heights. */
+const PROMPT_COMPOSER_MAX_HEIGHT_PX = 200;
+const PROMPT_COMPOSER_MIN_HEIGHT_PX = 40;
+function promptComposerSafeEditorDom(editor) {
+    if (!editor || editor.isDestroyed)
+        return null;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const dom = editor.view?.dom;
+        return dom instanceof HTMLElement ? dom : null;
+    }
+    catch {
+        return null;
+    }
+}
+function promptComposerFloorPx(cs) {
+    const padY = (Number.parseFloat(cs.paddingTop) || 0) +
+        (Number.parseFloat(cs.paddingBottom) || 0);
+    const fs = Number.parseFloat(cs.fontSize) || 14;
+    const linePx = cs.lineHeight === 'normal'
+        ? fs * 1.25
+        : Number.parseFloat(cs.lineHeight) || fs * 1.25;
+    return Math.max(PROMPT_COMPOSER_MIN_HEIGHT_PX, Math.ceil(linePx + padY));
+}
+/** Autosize `.ProseMirror` root: empty -> floor, text -> measured height with clamp. */
+function syncPromptComposerHeight(el, text) {
+    const floor = promptComposerFloorPx(getComputedStyle(el));
+    el.style.overflowY = 'hidden';
+    let contentHeight;
+    const empty = text.trim() === '';
+    if (empty) {
+        contentHeight = floor;
+    }
+    else {
+        el.style.height = '0';
+        contentHeight = el.scrollHeight;
+    }
+    const h = Math.min(Math.max(contentHeight, floor), PROMPT_COMPOSER_MAX_HEIGHT_PX);
+    el.style.height = `${h}px`;
+    el.style.overflowY =
+        contentHeight > PROMPT_COMPOSER_MAX_HEIGHT_PX ? 'auto' : 'hidden';
+}
+
+export { PROMPT_COMPOSER_MAX_HEIGHT_PX, PROMPT_COMPOSER_MIN_HEIGHT_PX, promptComposerSafeEditorDom, syncPromptComposerHeight };

package/dist/esm/src/components/PromptComposer/PromptComposer.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { forwardRef, useMemo, useImperativeHandle } from 'react';
+import { EditorContent } from '@tiptap/react';
+import S from './PromptComposer.styl.js';
+import { createPromptComposerHandle } from './promptComposerInsert.js';
+import { usePromptComposerEditor } from './usePromptComposerEditor.js';
+
+const PromptComposer = forwardRef(function PromptComposer({ disabled = false, placeholder, className, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit = true, onSubmit, onChange, }, ref) {
+    const { editor } = usePromptComposerEditor({
+        disabled,
+        placeholder,
+        slashCommandItems,
+        onSlashItemCommand,
+        prefillMessage,
+        attachmentsCount,
+        allowEnterSubmit,
+        onSubmit,
+        onChange,
+    });
+    const unavailableHandle = useMemo(() => ({
+        insertAtCaret: () => undefined,
+        focus: () => undefined,
+        reset: () => undefined,
+        setContent: () => undefined,
+        getText: () => '',
+        getEditor: () => {
+            throw new Error('PromptComposer editor is not ready yet');
+        },
+    }), []);
+    useImperativeHandle(ref, () => (editor ? createPromptComposerHandle(editor) : unavailableHandle), [editor, unavailableHandle]);
+    return (jsx("div", { className: cn(S.root, className), "data-disabled": disabled ? 'true' : 'false', children: jsx(EditorContent, { editor: editor, className: S.editorMount }) }));
+});
+
+export { PromptComposer };

package/dist/esm/src/components/PromptComposer/PromptComposer.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".PromptComposer_root__gfdXN{width:100%}.PromptComposer_editorMount__B9G-o{background:transparent;border:none;border-radius:0!important;box-shadow:none!important;display:flex;flex:1;flex-direction:column;max-height:200px;min-height:40px;min-width:0;padding:0!important}.PromptComposer_editorMount__B9G-o:focus-within{box-shadow:none!important}.PromptComposer_editorMount__B9G-o .promptComposerEditor{border:none!important;box-shadow:none!important;flex:1;margin:0;max-height:200px!important;min-height:40px!important;outline:none!important;overflow-x:hidden!important;overflow-y:auto!important;padding:var(--p-2) 0 0!important;resize:none!important;white-space:pre-wrap;word-break:break-word}.PromptComposer_editorMount__B9G-o .promptComposerEmptyEditor .promptComposerEmptyNode:before{color:var(--muted-foreground);content:attr(data-placeholder);float:left;height:0;pointer-events:none}";
+var S = {"root":"PromptComposer_root__gfdXN","editorMount":"PromptComposer_editorMount__B9G-o"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/PromptComposer/promptComposerDoc.js

@@ -0,0 +1,17 @@
+const PROMPT_COMPOSER_EMPTY_DOC = {
+    type: 'doc',
+    content: [{ type: 'paragraph' }],
+};
+function promptComposerParagraphDoc(text) {
+    return {
+        type: 'doc',
+        content: [
+            {
+                type: 'paragraph',
+                content: text ? [{ type: 'text', text }] : [],
+            },
+        ],
+    };
+}
+
+export { PROMPT_COMPOSER_EMPTY_DOC, promptComposerParagraphDoc };

package/dist/esm/src/components/PromptComposer/promptComposerInsert.js

@@ -0,0 +1,101 @@
+import { promptComposerParagraphDoc } from './promptComposerDoc.js';
+
+const PROMPT_COMPOSER_COMMAND_CHIP_CLASS = 'prompt-composer-command-chip';
+function getPromptComposerTokenRangeBeforePos(editor, pos) {
+    const $pos = editor.state.doc.resolve(pos);
+    const textBefore = $pos.parent.textBetween(0, $pos.parentOffset, undefined, '\ufffc');
+    const token = textBefore.match(/[^\s]*$/)?.[0] ?? '';
+    return { from: pos - token.length, to: pos };
+}
+function escapeHtml(text) {
+    return text
+        .replaceAll('&', '&')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;')
+        .replaceAll('"', '&quot;');
+}
+function promptComposerChipHtml(text, className = PROMPT_COMPOSER_COMMAND_CHIP_CLASS) {
+    const cls = className ? ` class="${className}"` : '';
+    return `<span${cls} data-prompt-composer-chip="true">${escapeHtml(text)}</span>`;
+}
+function promptComposerMentionNode(input) {
+    const { id, label = id, className = null, color = null, slashChar = '/', } = input;
+    return {
+        type: 'mention',
+        attrs: {
+            id,
+            label,
+            mentionSuggestionChar: slashChar,
+            className,
+            color,
+        },
+    };
+}
+function insertPromptComposerContentAtCaret(editor, content, options) {
+    if (editor.isDestroyed)
+        return;
+    const { replaceRange, replaceTriggerToken = true, trailingSpace = true, } = options ?? {};
+    const { from: selFrom, to: selTo } = editor.state.selection;
+    let from;
+    let to;
+    if (replaceRange) {
+        from = replaceRange.from;
+        to = replaceRange.to;
+    }
+    else if (replaceTriggerToken) {
+        ({ from, to } = getPromptComposerTokenRangeBeforePos(editor, selFrom));
+    }
+    else {
+        from = selFrom;
+        to = selTo;
+    }
+    const chain = editor.chain().focus().deleteRange({ from, to });
+    if (typeof content === 'string') {
+        chain.insertContentAt(from, trailingSpace ? `${content} ` : content);
+    }
+    else {
+        chain.insertContentAt(from, content);
+        if (trailingSpace) {
+            chain.insertContent(' ');
+        }
+    }
+    chain.run();
+    queueMicrotask(() => {
+        editor.view.dom.ownerDocument?.defaultView
+            ?.getSelection?.()
+            ?.collapseToEnd();
+    });
+}
+function setPromptComposerEditorText(editor, text, options) {
+    if (editor.isDestroyed)
+        return;
+    editor.commands.setContent(promptComposerParagraphDoc(text));
+    if (options?.focus) {
+        editor.commands.focus(options.atEnd === false ? 'start' : 'end');
+    }
+    else if (options?.atEnd !== false) {
+        queueMicrotask(() => {
+            editor.view.dom.ownerDocument?.defaultView
+                ?.getSelection?.()
+                ?.collapseToEnd();
+        });
+    }
+}
+function createPromptComposerHandle(editor) {
+    return {
+        insertAtCaret: (content, options) => insertPromptComposerContentAtCaret(editor, content, options),
+        focus: () => {
+            editor.commands.focus();
+        },
+        reset: () => {
+            editor.chain().clearContent().focus().run();
+        },
+        getText: () => editor.getText(),
+        setContent: (text, options) => {
+            setPromptComposerEditorText(editor, text, options);
+        },
+        getEditor: () => editor,
+    };
+}
+
+export { PROMPT_COMPOSER_COMMAND_CHIP_CLASS, createPromptComposerHandle, getPromptComposerTokenRangeBeforePos, insertPromptComposerContentAtCaret, promptComposerChipHtml, promptComposerMentionNode };

package/dist/esm/src/components/PromptComposer/usePromptComposerEditor.js

@@ -0,0 +1,192 @@
+import { useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from 'react';
+import { Placeholder } from '@tiptap/extensions';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { DEFAULT_CHAT_SLASH_ITEMS } from '../../tiptap/slash-mention/defaultChatSlashItems.js';
+import { createSlashMentionExtension } from '../../tiptap/slash-mention/createSlashMentionExtension.js';
+import { promptComposerSafeEditorDom, syncPromptComposerHeight } from './PromptComposer.helpers.js';
+import { PROMPT_COMPOSER_EMPTY_DOC, promptComposerParagraphDoc } from './promptComposerDoc.js';
+
+const PROMPT_COMPOSER_EDITOR_CLASS = 'promptComposerEditor';
+const PROMPT_COMPOSER_EMPTY_EDITOR_CLASS = 'promptComposerEmptyEditor';
+const PROMPT_COMPOSER_EMPTY_NODE_CLASS = 'promptComposerEmptyNode';
+function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount = 0, allowEnterSubmit, onSubmit, onChange, }) {
+    const slashOpenRef = useRef(false);
+    const onSlashItemCommandRef = useRef(onSlashItemCommand);
+    onSlashItemCommandRef.current = onSlashItemCommand;
+    const onSubmitRef = useRef(onSubmit);
+    onSubmitRef.current = onSubmit;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const editorRef = useRef(null);
+    const suggestionActiveUpdater = useCallback((active) => {
+        slashOpenRef.current = active;
+    }, []);
+    const slashItemsFingerprint = JSON.stringify(slashCommandItems ?? null);
+    const slashItemsStable = useMemo(() => slashCommandItems ?? DEFAULT_CHAT_SLASH_ITEMS, [slashCommandItems, slashItemsFingerprint]);
+    const placeholderText = useMemo(() => {
+        if (placeholder === undefined || placeholder === null) {
+            return 'Type a message...';
+        }
+        const text = String(placeholder).trim();
+        return text === '' ? 'Type a message...' : text;
+    }, [placeholder]);
+    const ariaLabelComposer = useMemo(() => {
+        if (placeholder === undefined || placeholder === null)
+            return 'Message';
+        const text = String(placeholder).trim();
+        return text === '' ? 'Message' : text;
+    }, [placeholder]);
+    const extensions = useMemo(() => {
+        const exts = [
+            StarterKit.configure({
+                heading: false,
+                bulletList: false,
+                orderedList: false,
+                blockquote: false,
+                codeBlock: false,
+                horizontalRule: false,
+            }),
+            Placeholder.configure({
+                placeholder: placeholderText,
+                showOnlyWhenEditable: true,
+                emptyEditorClass: PROMPT_COMPOSER_EMPTY_EDITOR_CLASS,
+                emptyNodeClass: PROMPT_COMPOSER_EMPTY_NODE_CLASS,
+            }),
+        ];
+        if (slashItemsStable.length > 0) {
+            exts.push(createSlashMentionExtension({
+                items: slashItemsStable,
+                suggestionPlacement: 'above',
+                onSuggestionUiActiveChange: suggestionActiveUpdater,
+                onItemCommand: ctx => onSlashItemCommandRef.current?.(ctx) === true,
+            }));
+        }
+        return exts;
+    }, [placeholderText, slashItemsStable, suggestionActiveUpdater]);
+    const [text, setText] = useState('');
+    const editorDomRef = useRef(null);
+    const bindEditorDom = useCallback(({ editor }) => {
+        const nextText = editor.getText();
+        setText(nextText);
+        queueMicrotask(() => {
+            const dom = promptComposerSafeEditorDom(editor);
+            if (!dom)
+                return;
+            editorDomRef.current = dom;
+            syncPromptComposerHeight(dom, nextText);
+        });
+    }, []);
+    const trimmedText = text.trim();
+    const trimmedTextRef = useRef(trimmedText);
+    trimmedTextRef.current = trimmedText;
+    const attachmentsCountRef = useRef(attachmentsCount);
+    attachmentsCountRef.current = attachmentsCount;
+    const allowEnterSubmitRef = useRef(allowEnterSubmit);
+    allowEnterSubmitRef.current = allowEnterSubmit;
+    const handleEditorKeyDown = useCallback((_view, event) => {
+        if (!(event.key === 'Enter' &&
+            !event.shiftKey &&
+            !event.metaKey &&
+            !event.ctrlKey)) {
+            return false;
+        }
+        if (!allowEnterSubmitRef.current)
+            return false;
+        if (slashOpenRef.current)
+            return false;
+        if (!trimmedTextRef.current && attachmentsCountRef.current === 0) {
+            return false;
+        }
+        event.preventDefault();
+        const activeEditor = editorRef.current;
+        if (!activeEditor)
+            return true;
+        onSubmitRef.current?.(activeEditor.getText(), activeEditor);
+        return true;
+    }, []);
+    const editor = useEditor({
+        extensions,
+        content: PROMPT_COMPOSER_EMPTY_DOC,
+        editable: !disabled,
+        immediatelyRender: true,
+        editorProps: {
+            attributes: {
+                spellcheck: 'true',
+                'aria-label': ariaLabelComposer,
+                class: PROMPT_COMPOSER_EDITOR_CLASS,
+            },
+            handleKeyDown: handleEditorKeyDown,
+        },
+        onTransaction: ({ editor: activeEditor }) => {
+            const dom = promptComposerSafeEditorDom(activeEditor);
+            const nextText = activeEditor.getText();
+            if (dom) {
+                syncPromptComposerHeight(dom, nextText);
+            }
+            setText(nextText);
+            onChangeRef.current?.(nextText, activeEditor);
+        },
+        onCreate: bindEditorDom,
+    }, [extensions, bindEditorDom, ariaLabelComposer, handleEditorKeyDown]);
+    editorRef.current = editor;
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setEditable(!disabled);
+    }, [editor, disabled]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const bind = () => {
+            editorDomRef.current = promptComposerSafeEditorDom(editor);
+        };
+        bind();
+        let rafId = null;
+        if (typeof window !== 'undefined') {
+            rafId = window.requestAnimationFrame(bind);
+        }
+        return () => {
+            if (rafId != null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [editor]);
+    useEffect(() => {
+        if (!editor || prefillMessage == null)
+            return;
+        const current = editor.getText();
+        const next = prefillMessage;
+        if (current === next)
+            return;
+        if (next === '') {
+            editor.commands.setContent(PROMPT_COMPOSER_EMPTY_DOC);
+        }
+        else {
+            editor.commands.setContent(promptComposerParagraphDoc(next));
+        }
+        setText(editor.getText());
+        queueMicrotask(() => {
+            const dom = promptComposerSafeEditorDom(editor);
+            if (dom)
+                syncPromptComposerHeight(dom, editor.getText());
+            if (!disabled && !editor.isDestroyed) {
+                editor.chain().focus('end').run();
+            }
+        });
+    }, [editor, prefillMessage, disabled]);
+    useLayoutEffect(() => {
+        if (!editor)
+            return;
+        const dom = promptComposerSafeEditorDom(editor);
+        if (!dom)
+            return;
+        syncPromptComposerHeight(dom, text);
+    }, [editor, text]);
+    return {
+        editor,
+        text,
+        trimmedText,
+    };
+}
+
+export { usePromptComposerEditor };

package/dist/esm/src/hooks/useListKeyboardControl.js

@@ -26,7 +26,11 @@ const useListKeyboardControl = ({ isActive, itemsCount, onSelect, }) => {
             return;
         }
         if (e.key === 'Enter') {
-            onSelect(newIndex);
+            if (newIndex < 0 || newIndex >= itemsCount)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect?.(newIndex);
             return;
         }
     }, [focusedIndex, itemsCount, onSelect]);
@@ -37,10 +41,14 @@ const useListKeyboardControl = ({ isActive, itemsCount, onSelect, }) => {
         isActive,
     });
     useEffect(() => {
-        if (itemsCount < focusedIndex) {
+        if (itemsCount <= 0) {
+            setFocusedIndex(-1);
+            return;
+        }
+        if (focusedIndex >= itemsCount) {
             setFocusedIndex(itemsCount - 1);
         }
-    }, [itemsCount]);
+    }, [itemsCount, focusedIndex]);
     return {
         focusedIndex,
         setFocusedIndex,

package/dist/esm/src/tiptap/slash-mention/SlashSuggestionList.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useEffect, useCallback, useImperativeHandle } from 'react';
+import { Menu } from '../../components/Menu/Menu.js';
+import S from './SlashSuggestionList.styl.js';
+
+function SlashSuggestionListInner({ items, command, listHandleRef, }) {
+    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) => {
+        const item = items[index];
+        if (!item)
+            return;
+        command(item);
+    }, [command, items]);
+    const onKeyboardEvent = useCallback((event) => {
+        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;
+        }
+        if (event.key === 'Escape') {
+            return false;
+        }
+        return false;
+    }, [command, items, selected]);
+    useImperativeHandle(listHandleRef, () => ({ onKeyboardEvent }), [
+        onKeyboardEvent,
+    ]);
+    return (jsx("div", { className: S.root, children: jsx(Menu, { className: S.menu, role: "listbox", "aria-label": "Slash commands", children: items.map((item, idx) => (jsxs(Menu.Item, { role: "option", "aria-selected": idx === safeSel, className: cn(S.item, idx === safeSel && S.itemHighlighted), onMouseDown: e => e.preventDefault(), onMouseEnter: () => setSelected(idx), onClick: () => onPick(idx), textOverflow: true, children: [jsxs("span", { className: S.itemLabel, children: ["/", item.label] }), item.description ? (jsx("span", { className: S.itemDesc, children: item.description })) : null] }, `${item.id}-${idx}`))) }) }));
+}
+function SlashSuggestionList(props) {
+    if (props.items.length === 0)
+        return null;
+    return (jsx(SlashSuggestionListInner, { items: props.items, command: props.command, listHandleRef: props.listHandleRef }));
+}
+
+export { SlashSuggestionList };

package/dist/esm/src/tiptap/slash-mention/SlashSuggestionList.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".SlashSuggestionList_root__9KCb1{background-color:var(--decent-color);border-radius:8px;border-radius:var(--radius-lg,8px);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 8px 24px rgba(0,0,0,.2);color:var(--foreground);max-width:90vw;min-width:220px;overflow:hidden;position:relative}.SlashSuggestionList_root__9KCb1:before{background-color:var(--accent-color-alpha-50);bottom:0;content:\"\";left:0;pointer-events:none;position:absolute;right:0;top:0}.dark .SlashSuggestionList_root__9KCb1{box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50),0 8px 24px rgba(0,0,0,.5)}.SlashSuggestionList_menu__s-jK3{margin:0;max-height:40vh}.SlashSuggestionList_item__9JBeY{align-items:flex-start;border-radius:var(--p-2);display:flex;flex-direction:column;height:auto!important;justify-content:center;min-height:0;overflow:visible!important;padding:var(--p-1) var(--p-2)!important;position:relative;text-overflow:clip!important;white-space:normal!important;width:100%}.SlashSuggestionList_itemHighlighted__cStZr,.SlashSuggestionList_item__9JBeY:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.SlashSuggestionList_itemLabel__OMaov{font-weight:600}.SlashSuggestionList_itemDesc__fAdcA{color:var(--muted-foreground);font-size:80%;white-space:normal}.SlashSuggestionList_mention__aT45p{align-items:center;background:var(--muted);border-radius:var(--p-1);display:inline-flex;line-height:1.4;margin:0 var(--p-1);padding:0 var(--p-1);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}";
+var S = {"root":"SlashSuggestionList_root__9KCb1","menu":"SlashSuggestionList_menu__s-jK3","item":"SlashSuggestionList_item__9JBeY","itemHighlighted":"SlashSuggestionList_itemHighlighted__cStZr","itemLabel":"SlashSuggestionList_itemLabel__OMaov","itemDesc":"SlashSuggestionList_itemDesc__fAdcA","mention":"SlashSuggestionList_mention__aT45p"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/tiptap/slash-mention/createSlashMentionExtension.js

@@ -0,0 +1,202 @@
+import { mergeAttributes } from '@tiptap/core';
+import Mention from '@tiptap/extension-mention';
+import { ReactRenderer } from '@tiptap/react';
+import { SlashSuggestionList } from './SlashSuggestionList.js';
+import S from './SlashSuggestionList.styl.js';
+import { filterSlashItems } from './defaultChatSlashItems.js';
+
+const SlashMention = Mention.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            className: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-slash-class'),
+                renderHTML: attributes => {
+                    if (!attributes.className)
+                        return {};
+                    return { 'data-slash-class': attributes.className };
+                },
+            },
+            color: {
+                default: null,
+                parseHTML: element => element.getAttribute('data-slash-color'),
+                renderHTML: attributes => {
+                    if (!attributes.color)
+                        return {};
+                    return { 'data-slash-color': attributes.color };
+                },
+            },
+        };
+    },
+});
+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;
+        placeSlashSuggestionPopup(popup.element, props.clientRect?.() ?? null, placement);
+    };
+    return {
+        onStart: props => {
+            uiRef.current = null;
+            popup?.destroy?.();
+            popup = new ReactRenderer(SlashSuggestionList, {
+                editor: props.editor,
+                props: {
+                    items: props.items,
+                    command: props.command,
+                    listHandleRef: uiRef,
+                },
+            });
+            popup.element.style.position = 'fixed';
+            popup.element.style.margin = '0';
+            popup.element.style.zIndex = '10002';
+            document.body.append(popup.element);
+            place(props);
+            requestAnimationFrame(() => place(props));
+        },
+        onUpdate: props => {
+            if (!popup)
+                return;
+            popup.updateProps({
+                items: props.items,
+                command: props.command,
+                listHandleRef: uiRef,
+            });
+            place(props);
+            requestAnimationFrame(() => place(props));
+        },
+        onExit: () => {
+            popup?.destroy();
+            popup?.element?.remove?.();
+            popup = null;
+            uiRef.current = null;
+        },
+        onKeyDown: ({ event }) => uiRef.current?.onKeyboardEvent(event) ?? false,
+    };
+}
+function slashMentionChipStyle(color) {
+    if (!color)
+        return undefined;
+    return `color: ${color}; background-color: color-mix(in srgb, ${color} 30%, transparent);`;
+}
+function insertDefaultMention(editor, range, item, slashChar) {
+    const nodeAfter = editor.view.state.selection.$to.nodeAfter;
+    const extend = nodeAfter?.text?.startsWith(' ') ? 1 : 0;
+    const adjusted = extend ? { ...range, to: range.to + extend } : range;
+    editor
+        .chain()
+        .focus()
+        .insertContentAt(adjusted, [
+        {
+            type: 'mention',
+            attrs: {
+                id: item.id,
+                label: item.label,
+                mentionSuggestionChar: slashChar,
+                className: item.className ?? null,
+                color: item.color ?? null,
+            },
+        },
+        { type: 'text', text: ' ' },
+    ])
+        .run();
+    queueMicrotask(() => {
+        editor.view.dom.ownerDocument?.defaultView
+            ?.getSelection?.()
+            ?.collapseToEnd();
+    });
+}
+function allowSlashTrigger({ state, range, }) {
+    const type = state.schema.nodes['mention'];
+    const $from = state.doc.resolve(range.from);
+    if (!type || !$from.parent.type.contentMatch.matchType(type))
+        return false;
+    if ($from.parentOffset === 0)
+        return true;
+    const before = state.doc.textBetween(range.from - 1, range.from);
+    return /\s/.test(before);
+}
+function createSlashMentionExtension({ items: resolvedItems, slashChar = '/', pluginKey, onItemCommand, suggestionPlacement = 'below', onSuggestionUiActiveChange, }) {
+    const uiRef = {
+        current: null,
+    };
+    return SlashMention.configure({
+        renderText({ node }) {
+            return `/${node.attrs.id}`;
+        },
+        renderHTML({ options, node }) {
+            const id = typeof node.attrs.id === 'string'
+                ? node.attrs.id
+                : String(node.attrs.id ?? '');
+            const label = typeof node.attrs.label === 'string' && node.attrs.label.trim() !== ''
+                ? node.attrs.label
+                : id;
+            const color = typeof node.attrs.color === 'string' ? node.attrs.color : null;
+            const className = [S.mention, node.attrs.className]
+                .filter(Boolean)
+                .join(' ');
+            const chipStyle = slashMentionChipStyle(color);
+            return [
+                'span',
+                mergeAttributes({
+                    'data-type': 'mention',
+                    'data-slash-command': id,
+                    class: className,
+                    ...(chipStyle ? { style: chipStyle } : {}),
+                }, options.HTMLAttributes),
+                label,
+            ];
+        },
+        suggestion: {
+            char: slashChar,
+            pluginKey,
+            allowedPrefixes: [' ', '\n', '\t', '\r'],
+            allow: props => allowSlashTrigger(props),
+            items: ({ query }) => Promise.resolve(filterSlashItems(resolvedItems, query)),
+            command: ({ editor, range, props }) => {
+                const item = props;
+                if (onItemCommand?.({ editor, range, item }) === true) {
+                    return null;
+                }
+                insertDefaultMention(editor, range, item, slashChar);
+                return null;
+            },
+            render: () => {
+                const menu = slashMentionSuggestionRender(uiRef, suggestionPlacement);
+                return {
+                    ...menu,
+                    onStart: props => {
+                        onSuggestionUiActiveChange?.(true);
+                        menu.onStart?.(props);
+                    },
+                    onExit: props => {
+                        menu.onExit?.(props);
+                        onSuggestionUiActiveChange?.(false);
+                    },
+                };
+            },
+        },
+    });
+}
+
+export { createSlashMentionExtension, slashMentionSuggestionRender };

package/dist/esm/src/tiptap/slash-mention/defaultChatSlashItems.js

@@ -0,0 +1,12 @@
+/** Empty default; app passes slashCommandItems to enable menu. */
+const DEFAULT_CHAT_SLASH_ITEMS = [];
+function filterSlashItems(items, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return items;
+    return items.filter(item => item.id.toLowerCase().includes(q) ||
+        item.label.toLowerCase().includes(q) ||
+        (item.description?.toLowerCase().includes(q) ?? false));
+}
+
+export { DEFAULT_CHAT_SLASH_ITEMS, filterSlashItems };

package/dist/esm/types/node_modules/@tiptap/pm/state/index.d.ts

@@ -0,0 +1 @@
+export * from 'prosemirror-state';

package/dist/esm/types/src/components/PromptComposer/PromptComposer.d.ts

@@ -0,0 +1,13 @@
+import { type PromptComposerHandle } from './promptComposerInsert';
+export type { PromptComposerHandle, PromptComposerInsertOptions, } from './promptComposerInsert';
+export declare const PromptComposer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean;
+    placeholder?: string;
+    slashCommandItems?: import(".").SlashCommandItem[];
+    onSlashItemCommand?: import(".").SlashOnItemCommand;
+    prefillMessage?: string;
+    attachmentsCount?: number;
+    allowEnterSubmit?: boolean;
+    onSubmit?: (text: string, editor: import("@tiptap/core").Editor) => void;
+    onChange?: (text: string, editor: import("@tiptap/core").Editor) => void;
+} & import("react").RefAttributes<PromptComposerHandle>>;

package/dist/esm/types/src/components/PromptComposer/PromptComposer.helpers.d.ts

@@ -0,0 +1,8 @@
+/** Keep in sync with `PromptComposer.styl` max/min heights. */
+export declare const PROMPT_COMPOSER_MAX_HEIGHT_PX = 200;
+export declare const PROMPT_COMPOSER_MIN_HEIGHT_PX = 40;
+export declare function promptComposerSafeEditorDom(editor: {
+    readonly isDestroyed?: boolean;
+} | null | undefined): HTMLElement | null;
+/** Autosize `.ProseMirror` root: empty -> floor, text -> measured height with clamp. */
+export declare function syncPromptComposerHeight(el: HTMLElement, text: string): void;

package/dist/esm/types/src/components/PromptComposer/PromptComposer.types.d.ts

@@ -0,0 +1,19 @@
+import type { Editor } from '@tiptap/core';
+import type { HTMLAttributes } from 'react';
+import type { SlashCommandItem, SlashOnItemCommand } from '../../tiptap/slash-mention';
+export type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean;
+    placeholder?: string;
+    slashCommandItems?: SlashCommandItem[];
+    onSlashItemCommand?: SlashOnItemCommand;
+    prefillMessage?: string | null;
+    /** Staged attachment count - Enter can submit even when text empty. */
+    attachmentsCount?: number;
+    /** Mobile usually sets false so Enter inserts newline. */
+    allowEnterSubmit?: boolean;
+    /** Called when user presses Enter to submit. */
+    onSubmit?: (text: string, editor: Editor) => void;
+    /** Called on every transaction with plain text value. */
+    onChange?: (text: string, editor: Editor) => void;
+};
+export type PromptComposerProps = Props;

package/dist/esm/types/src/components/PromptComposer/index.d.ts

@@ -0,0 +1,7 @@
+export { PromptComposer } from './PromptComposer';
+export type { PromptComposerProps } from './PromptComposer.types';
+export { usePromptComposerEditor } from './usePromptComposerEditor';
+export type { UsePromptComposerEditorOptions } from './usePromptComposerEditor';
+export { getPromptComposerTokenRangeBeforePos, createPromptComposerHandle, insertPromptComposerContentAtCaret, promptComposerChipHtml, promptComposerMentionNode, PROMPT_COMPOSER_COMMAND_CHIP_CLASS, } from './promptComposerInsert';
+export type { PromptComposerHandle, PromptComposerInsertOptions, PromptComposerMentionNodeInput, } from './promptComposerInsert';
+export type { SlashCommandItem, SlashItemCommandContext, SlashOnItemCommand, SlashSuggestionPlacement, } from '../../tiptap/slash-mention';

package/dist/esm/types/src/components/PromptComposer/promptComposerDoc.d.ts

@@ -0,0 +1,3 @@
+import type { JSONContent } from '@tiptap/core';
+export declare const PROMPT_COMPOSER_EMPTY_DOC: JSONContent;
+export declare function promptComposerParagraphDoc(text: string): JSONContent;

package/dist/esm/types/src/components/PromptComposer/promptComposerInsert.d.ts

@@ -0,0 +1,42 @@
+import type { Editor, JSONContent } from '@tiptap/core';
+export type PromptComposerInsertOptions = {
+    /** Explicit document range to replace before insert. */
+    replaceRange?: {
+        from: number;
+        to: number;
+    };
+    /**
+     * If no replaceRange, delete token before caret back to whitespace/start.
+     * Default true.
+     */
+    replaceTriggerToken?: boolean;
+    /** Add whitespace after inserted content. Default true. */
+    trailingSpace?: boolean;
+};
+export declare const PROMPT_COMPOSER_COMMAND_CHIP_CLASS = "prompt-composer-command-chip";
+export type PromptComposerHandle = {
+    insertAtCaret: (content: string | JSONContent, options?: PromptComposerInsertOptions) => void;
+    focus: () => void;
+    reset: () => void;
+    getText: () => string;
+    setContent: (text: string, options?: {
+        focus?: boolean;
+        atEnd?: boolean;
+    }) => void;
+    getEditor: () => Editor;
+};
+export declare function getPromptComposerTokenRangeBeforePos(editor: Editor, pos: number): {
+    from: number;
+    to: number;
+};
+export declare function promptComposerChipHtml(text: string, className?: string): string;
+export type PromptComposerMentionNodeInput = {
+    id: string;
+    label?: string;
+    className?: string | null;
+    color?: string | null;
+    slashChar?: string;
+};
+export declare function promptComposerMentionNode(input: PromptComposerMentionNodeInput): JSONContent;
+export declare function insertPromptComposerContentAtCaret(editor: Editor, content: string | JSONContent, options?: PromptComposerInsertOptions): void;
+export declare function createPromptComposerHandle(editor: Editor): PromptComposerHandle;

package/dist/esm/types/src/components/PromptComposer/usePromptComposerEditor.d.ts

@@ -0,0 +1,19 @@
+import { type Editor } from '@tiptap/core';
+import type { SlashCommandItem, SlashOnItemCommand } from '../../tiptap/slash-mention';
+export type UsePromptComposerEditorOptions = {
+    disabled: boolean;
+    placeholder?: string;
+    slashCommandItems?: SlashCommandItem[];
+    onSlashItemCommand?: SlashOnItemCommand;
+    prefillMessage?: string | null;
+    attachmentsCount?: number;
+    allowEnterSubmit: boolean;
+    onSubmit?: (text: string, editor: Editor) => void;
+    onChange?: (text: string, editor: Editor) => void;
+};
+export type UsePromptComposerEditorResult = {
+    editor: Editor | null;
+    text: string;
+    trimmedText: string;
+};
+export declare function usePromptComposerEditor({ disabled, placeholder, slashCommandItems, onSlashItemCommand, prefillMessage, attachmentsCount, allowEnterSubmit, onSubmit, onChange, }: UsePromptComposerEditorOptions): UsePromptComposerEditorResult;

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

@@ -33,6 +33,7 @@ export * from './Portal/Portal';
 export * from './PopupMenu/PopupMenu';
 export * from './Progress/Progress';
 export * from './ProgressCircular/ProgressCircular';
+export * from './PromptComposer';
 export * from './RadioButton/RadioButton';
 export * from './RadioGroup/RadioGroup';
 export * from './Router/Router';

package/dist/esm/types/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './tiptap/slash-mention';
 export * from './services';
 export * from './tools';
 export * from './hooks';

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

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+import type { SlashCommandItem } from './types';
+export type SlashSuggestionListHandle = {
+    onKeyboardEvent: (event: KeyboardEvent) => boolean;
+};
+export type SlashSuggestionListProps = {
+    items: SlashCommandItem[];
+    command: (item: SlashCommandItem) => void;
+    listHandleRef: RefObject<SlashSuggestionListHandle | null>;
+};
+export declare function SlashSuggestionList(props: SlashSuggestionListProps): JSX.Element;

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

@@ -0,0 +1,21 @@
+import type { MutableRefObject } from 'react';
+import type { SuggestionProps } from '@tiptap/suggestion';
+import { type SlashSuggestionListHandle } from './SlashSuggestionList';
+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;
+    onKeyDown?: (p: {
+        view: unknown;
+        event: KeyboardEvent;
+        range: {
+            from: number;
+            to: number;
+        };
+    }) => boolean;
+};
+export type CreateSlashMentionExtensionConfiguredOptions = CreateSlashMentionExtensionOptions & {
+    onSuggestionUiActiveChange?: (active: boolean) => void;
+};
+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/defaultChatSlashItems.d.ts

@@ -0,0 +1,4 @@
+import type { SlashCommandItem } from './types';
+/** Empty default; app passes slashCommandItems to enable menu. */
+export declare const DEFAULT_CHAT_SLASH_ITEMS: SlashCommandItem[];
+export declare function filterSlashItems(items: SlashCommandItem[], query: string): SlashCommandItem[];

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

@@ -0,0 +1,5 @@
+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';
+export type { SlashSuggestionListHandle } from './SlashSuggestionList';

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

@@ -0,0 +1,28 @@
+import type { Editor, Range } from '@tiptap/core';
+export type SlashCommandItem = {
+    id: string;
+    label: string;
+    description?: string;
+    /** Extra class on inserted mention chip (merged with `slash-mention`). */
+    className?: string;
+    /** CSS color for chip text; background uses 30% color blend. */
+    color?: string;
+};
+export type SlashItemCommandContext = {
+    item: SlashCommandItem;
+    /** Present when picked from slash menu; omitted on submit match. */
+    editor?: Editor;
+    range?: Range;
+};
+/**
+ * Return true to skip default mention insert and handle command in app.
+ */
+export type SlashOnItemCommand = (ctx: SlashItemCommandContext) => boolean;
+export type SlashSuggestionPlacement = 'below' | 'above' | 'auto';
+export type CreateSlashMentionExtensionOptions = {
+    items: SlashCommandItem[];
+    slashChar?: string;
+    pluginKey?: import('@tiptap/pm/state').PluginKey;
+    onItemCommand?: SlashOnItemCommand;
+    suggestionPlacement?: SlashSuggestionPlacement;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.1.18",
+  "version": "5.3.1",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",
@@ -60,6 +60,13 @@
     "@homecode/ui": "^4.17.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@tiptap/core": "^3.22.1",
+    "@tiptap/extension-mention": "^3.22.1",
+    "@tiptap/extensions": "^3.22.1",
+    "@tiptap/pm": "^3.22.1",
+    "@tiptap/react": "^3.22.1",
+    "@tiptap/starter-kit": "^3.22.1",
+    "@tiptap/suggestion": "^3.22.1",
     "@svgr/webpack": "^8.1.0",
     "classnames": "^2.3.2",
     "compareq": "^1.2.2",