glirastes 0.2.1 → 0.3.1

package/dist/cjs/react/components/rich-mention-input.js

@@ -0,0 +1,571 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichMentionInput = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mention_markup_js_1 = require("../utils/mention-markup.js");
+const DEFAULT_TRIGGERS = ['@', '/'];
+const SEARCH_DEBOUNCE_MS = 100;
+function normalizeInputValue(text) {
+    return text.replace(/\u00A0/g, ' ');
+}
+// ---------------------------------------------------------------------------
+// Default dropdown item (data-attribute driven, no hardcoded styles)
+// ---------------------------------------------------------------------------
+function DefaultDropdownItem({ result, isSelected, onClick }) {
+    const itemRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (isSelected && itemRef.current) {
+            itemRef.current.scrollIntoView({ block: 'nearest' });
+        }
+    }, [isSelected]);
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: itemRef, type: "button", onClick: onClick, "data-component": "mention-dropdown-item", "data-mention-type": result.type, "data-selected": isSelected ? 'true' : 'false', children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "label", children: result.label }), result.description && ((0, jsx_runtime_1.jsx)("span", { "data-element": "description", children: result.description }))] }));
+}
+// ---------------------------------------------------------------------------
+// RichMentionInput
+// ---------------------------------------------------------------------------
+exports.RichMentionInput = (0, react_1.forwardRef)(function RichMentionInput({ value, defaultValue = '', placeholder, disabled = false, className, onChange, onSubmit, onSearch, initialMentions, triggers = DEFAULT_TRIGGERS, components, }, ref) {
+    const hasMentionSupport = typeof onSearch === 'function';
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue);
+    const editableRef = (0, react_1.useRef)(null);
+    const dropdownRef = (0, react_1.useRef)(null);
+    // Mention autocomplete state
+    const [mentions, setMentions] = (0, react_1.useState)([]);
+    const [dropdownOpen, setDropdownOpen] = (0, react_1.useState)(false);
+    const [searchResults, setSearchResults] = (0, react_1.useState)([]);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const [isSearching, setIsSearching] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    // Refs for stale-closure avoidance and debounce
+    const searchTimeoutRef = (0, react_1.useRef)(undefined);
+    const searchVersionRef = (0, react_1.useRef)(0);
+    const isInitializedRef = (0, react_1.useRef)(false);
+    const DropdownItem = components?.DropdownItem ?? DefaultDropdownItem;
+    const currentValue = isControlled ? value : internalValue;
+    // -----------------------------------------------------------------------
+    // Shared helpers
+    // -----------------------------------------------------------------------
+    const setValue = (0, react_1.useCallback)((nextValue) => {
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        onChange?.(nextValue);
+    }, [isControlled, onChange]);
+    // -----------------------------------------------------------------------
+    // Plain-mode: sync controlled value to DOM
+    // -----------------------------------------------------------------------
+    (0, react_1.useEffect)(() => {
+        if (hasMentionSupport)
+            return;
+        if (!editableRef.current)
+            return;
+        const nextText = currentValue ?? '';
+        if (editableRef.current.textContent !== nextText) {
+            editableRef.current.textContent = nextText;
+        }
+    }, [currentValue, hasMentionSupport]);
+    // -----------------------------------------------------------------------
+    // Mention-mode helpers
+    // -----------------------------------------------------------------------
+    /** Extract plain text from contentEditable, skipping chip elements. */
+    const getTextContent = (0, react_1.useCallback)(() => {
+        if (!editableRef.current)
+            return '';
+        let text = '';
+        for (const node of editableRef.current.childNodes) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                text += node.textContent || '';
+            }
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (!el.dataset.mentionId) {
+                    text += el.textContent || '';
+                }
+            }
+        }
+        return text.replace(/\u200B/g, '');
+    }, []);
+    /** Build full value including `prefix+slug` tokens for each chip. */
+    const getFullValue = (0, react_1.useCallback)(() => {
+        if (!editableRef.current)
+            return '';
+        let result = '';
+        for (const node of editableRef.current.childNodes) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                result += node.textContent || '';
+            }
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.dataset.mentionId && el.dataset.mentionPrefix && el.dataset.mentionSlug) {
+                    result += `${el.dataset.mentionPrefix}${el.dataset.mentionSlug}`;
+                }
+                else {
+                    result += el.textContent || '';
+                }
+            }
+        }
+        return result.replace(/\u200B/g, '').replace(/\s+/g, ' ').trim();
+    }, []);
+    /** Read structured mention data from DOM chip elements. */
+    const getMentionsFromDOM = (0, react_1.useCallback)(() => {
+        if (!editableRef.current)
+            return [];
+        const result = [];
+        for (const node of editableRef.current.childNodes) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                if (el.dataset.mentionId && el.dataset.mentionType) {
+                    result.push({
+                        id: el.dataset.mentionId,
+                        type: el.dataset.mentionType,
+                        label: el.dataset.mentionLabel || el.dataset.mentionId,
+                        slug: el.dataset.mentionSlug,
+                        prefix: el.dataset.mentionPrefix,
+                        displayName: el.dataset.mentionLabel,
+                    });
+                }
+            }
+        }
+        return result;
+    }, []);
+    /**
+     * Create a DOM `<span>` chip element for a mention.
+     *
+     * The element mirrors the data-attribute structure of `<MentionChip>`
+     * so the same CSS selectors work for both inline and standalone chips.
+     */
+    const createChipElement = (0, react_1.useCallback)((mention) => {
+        const prefix = typeof mention.prefix === 'string'
+            ? mention.prefix
+            : (0, mention_markup_js_1.inferMentionPrefix)(mention.type);
+        const slug = typeof mention.slug === 'string' && mention.slug.trim().length > 0
+            ? mention.slug.trim()
+            : (0, mention_markup_js_1.normalizeMentionSlug)(mention.label);
+        const displayName = typeof mention.displayName === 'string'
+            ? mention.displayName
+            : mention.label;
+        const chip = document.createElement('span');
+        chip.contentEditable = 'false';
+        chip.dataset.component = 'mention-chip';
+        chip.dataset.mentionType = mention.type;
+        chip.dataset.mentionId = mention.id;
+        chip.dataset.mentionSlug = slug;
+        chip.dataset.mentionLabel = displayName;
+        chip.dataset.mentionPrefix = prefix;
+        chip.dataset.size = 'inline';
+        const prefixSpan = document.createElement('span');
+        prefixSpan.dataset.element = 'prefix';
+        prefixSpan.textContent = prefix;
+        const nameSpan = document.createElement('span');
+        nameSpan.dataset.element = 'display-name';
+        nameSpan.textContent = displayName;
+        const removeBtn = document.createElement('span');
+        removeBtn.dataset.action = 'remove-mention';
+        removeBtn.dataset.mentionId = mention.id;
+        removeBtn.textContent = '\u00D7';
+        removeBtn.style.cursor = 'pointer';
+        chip.appendChild(prefixSpan);
+        chip.appendChild(nameSpan);
+        chip.appendChild(removeBtn);
+        return chip;
+    }, []);
+    // -----------------------------------------------------------------------
+    // Dropdown helpers
+    // -----------------------------------------------------------------------
+    const closeDropdown = (0, react_1.useCallback)(() => {
+        searchVersionRef.current++;
+        setDropdownOpen(false);
+        setSearchResults([]);
+        setSelectedIndex(0);
+    }, []);
+    const performSearch = (0, react_1.useCallback)(async (query, trigger) => {
+        if (!onSearch)
+            return;
+        const version = ++searchVersionRef.current;
+        setIsSearching(true);
+        try {
+            const results = await onSearch(query, trigger);
+            if (searchVersionRef.current !== version)
+                return;
+            setSearchResults(results);
+            setSelectedIndex(0);
+            setDropdownOpen(results.length > 0);
+        }
+        catch {
+            if (searchVersionRef.current !== version)
+                return;
+            setSearchResults([]);
+            setDropdownOpen(false);
+        }
+        finally {
+            if (searchVersionRef.current === version) {
+                setIsSearching(false);
+            }
+        }
+    }, [onSearch]);
+    /**
+     * Detect a trigger character before the cursor in the current text node.
+     * Returns trigger, query, and position, or null if no trigger is active.
+     */
+    const detectTrigger = (0, react_1.useCallback)(() => {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return null;
+        const range = selection.getRangeAt(0);
+        if (!range.collapsed || range.startContainer.nodeType !== Node.TEXT_NODE)
+            return null;
+        const textNode = range.startContainer;
+        const text = textNode.textContent || '';
+        const cursorPos = range.startOffset;
+        const before = text.slice(0, cursorPos);
+        for (let i = before.length - 1; i >= 0; i--) {
+            const char = before[i];
+            if (char === ' ' || char === '\n')
+                break;
+            if (triggers.includes(char)) {
+                if (i === 0 || before[i - 1] === ' ' || before[i - 1] === '\n') {
+                    return { trigger: char, query: before.slice(i + 1), triggerPos: i };
+                }
+            }
+        }
+        return null;
+    }, [triggers]);
+    // -----------------------------------------------------------------------
+    // Mention insertion
+    // -----------------------------------------------------------------------
+    const insertMention = (0, react_1.useCallback)((result) => {
+        if (!editableRef.current)
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        if (range.startContainer.nodeType !== Node.TEXT_NODE)
+            return;
+        const textNode = range.startContainer;
+        const text = textNode.textContent || '';
+        const cursorPos = range.startOffset;
+        // Find the trigger position backward from cursor
+        let triggerPos = -1;
+        for (let i = cursorPos - 1; i >= 0; i--) {
+            const char = text[i];
+            if (char === ' ' || char === '\n')
+                break;
+            if (triggers.includes(char)) {
+                if (i === 0 || text[i - 1] === ' ' || text[i - 1] === '\n') {
+                    triggerPos = i;
+                    break;
+                }
+            }
+        }
+        if (triggerPos === -1)
+            return;
+        const prefix = (0, mention_markup_js_1.inferMentionPrefix)(result.type);
+        const slug = (0, mention_markup_js_1.normalizeMentionSlug)(result.label);
+        const mentionData = {
+            id: result.id,
+            type: result.type,
+            label: result.label,
+            displayName: result.label,
+            slug,
+            prefix,
+        };
+        // For command type: insert as text, no chip
+        if (result.type === 'command') {
+            const beforeText = text.slice(0, triggerPos);
+            const afterText = text.slice(cursorPos);
+            const token = `${prefix}${slug} `;
+            textNode.textContent = beforeText + token + afterText;
+            requestAnimationFrame(() => {
+                const newRange = document.createRange();
+                newRange.setStart(textNode, (beforeText + token).length);
+                newRange.collapse(true);
+                selection.removeAllRanges();
+                selection.addRange(newRange);
+            });
+            setMentions((prev) => [...prev, mentionData]);
+            closeDropdown();
+            requestAnimationFrame(() => {
+                onChange?.(getFullValue());
+            });
+            return;
+        }
+        // Non-command: insert chip element
+        const chip = createChipElement(mentionData);
+        const beforeText = text.slice(0, triggerPos);
+        const afterText = text.slice(cursorPos);
+        const parent = textNode.parentNode;
+        if (!parent)
+            return;
+        const beforeNode = document.createTextNode(beforeText);
+        const afterNode = document.createTextNode(' ' + afterText);
+        parent.insertBefore(beforeNode, textNode);
+        parent.insertBefore(chip, textNode);
+        parent.insertBefore(afterNode, textNode);
+        parent.removeChild(textNode);
+        requestAnimationFrame(() => {
+            const newRange = document.createRange();
+            newRange.setStart(afterNode, 1);
+            newRange.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+            editableRef.current?.focus();
+        });
+        setMentions((prev) => [...prev, mentionData]);
+        closeDropdown();
+        requestAnimationFrame(() => {
+            onChange?.(getFullValue());
+        });
+    }, [triggers, createChipElement, closeDropdown, onChange, getFullValue]);
+    // -----------------------------------------------------------------------
+    // Event handlers
+    // -----------------------------------------------------------------------
+    const handleInput = (0, react_1.useCallback)(() => {
+        if (!hasMentionSupport) {
+            const nextValue = normalizeInputValue(editableRef.current?.innerText ?? '');
+            setValue(nextValue);
+            return;
+        }
+        // Mention mode: detect trigger and schedule search
+        const triggerState = detectTrigger();
+        if (triggerState) {
+            clearTimeout(searchTimeoutRef.current);
+            searchTimeoutRef.current = setTimeout(() => {
+                void performSearch(triggerState.query, triggerState.trigger);
+            }, SEARCH_DEBOUNCE_MS);
+        }
+        else {
+            clearTimeout(searchTimeoutRef.current);
+            closeDropdown();
+        }
+        onChange?.(getFullValue());
+    }, [hasMentionSupport, setValue, detectTrigger, performSearch, closeDropdown, onChange, getFullValue]);
+    const submit = (0, react_1.useCallback)(() => {
+        if (disabled)
+            return;
+        const text = hasMentionSupport
+            ? getFullValue()
+            : normalizeInputValue((editableRef.current?.innerText ?? '').trim());
+        if (!text)
+            return;
+        onSubmit?.(text);
+        setValue('');
+        if (hasMentionSupport) {
+            setMentions([]);
+        }
+        if (editableRef.current) {
+            editableRef.current.innerHTML = '';
+        }
+    }, [disabled, hasMentionSupport, getFullValue, onSubmit, setValue]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        // Dropdown navigation (mention mode only)
+        if (hasMentionSupport && dropdownOpen && searchResults.length > 0) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setSelectedIndex((prev) => (prev + 1) % searchResults.length);
+                return;
+            }
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setSelectedIndex((prev) => (prev - 1 + searchResults.length) % searchResults.length);
+                return;
+            }
+            if (event.key === 'Tab' || (event.key === 'Enter' && !event.shiftKey)) {
+                event.preventDefault();
+                const selected = searchResults[selectedIndex];
+                if (selected) {
+                    insertMention(selected);
+                }
+                return;
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                closeDropdown();
+                return;
+            }
+        }
+        // Submit on Enter (both modes)
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            submit();
+            return;
+        }
+        // Backspace: delete chip at cursor boundary (mention mode)
+        if (hasMentionSupport && event.key === 'Backspace') {
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                if (range.collapsed && range.startOffset === 0) {
+                    let prevNode = range.startContainer;
+                    if (prevNode.nodeType === Node.TEXT_NODE) {
+                        prevNode = prevNode.previousSibling;
+                    }
+                    if (prevNode && prevNode.dataset?.mentionId) {
+                        event.preventDefault();
+                        const mentionId = prevNode.dataset.mentionId;
+                        setMentions((prev) => prev.filter((m) => m.id !== mentionId));
+                        prevNode.parentNode?.removeChild(prevNode);
+                        onChange?.(getFullValue());
+                    }
+                }
+            }
+        }
+    }, [
+        hasMentionSupport,
+        dropdownOpen,
+        searchResults,
+        selectedIndex,
+        insertMention,
+        closeDropdown,
+        submit,
+        onChange,
+        getFullValue,
+    ]);
+    /** Strip formatting on paste — insert plain text only. */
+    const handlePaste = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        const plainText = e.clipboardData.getData('text/plain');
+        if (!plainText)
+            return;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        const textNode = document.createTextNode(plainText);
+        range.insertNode(textNode);
+        range.setStartAfter(textNode);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        onChange?.(getFullValue());
+    }, [onChange, getFullValue]);
+    // -----------------------------------------------------------------------
+    // Side effects (mention mode)
+    // -----------------------------------------------------------------------
+    // Close dropdown on outside click
+    (0, react_1.useEffect)(() => {
+        if (!dropdownOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (dropdownRef.current &&
+                !dropdownRef.current.contains(e.target) &&
+                editableRef.current &&
+                !editableRef.current.contains(e.target)) {
+                closeDropdown();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [dropdownOpen, closeDropdown]);
+    // Chip removal via click delegation on the editable
+    (0, react_1.useEffect)(() => {
+        if (!hasMentionSupport)
+            return;
+        const el = editableRef.current;
+        if (!el)
+            return;
+        const handleClick = (e) => {
+            const target = e.target;
+            const removeBtn = target.closest('[data-action="remove-mention"]');
+            if (removeBtn?.dataset.mentionId) {
+                e.preventDefault();
+                e.stopPropagation();
+                const mentionId = removeBtn.dataset.mentionId;
+                setMentions((prev) => prev.filter((m) => m.id !== mentionId));
+                el.querySelector(`[data-mention-id="${CSS.escape(mentionId)}"]`)?.remove();
+                onChange?.(getFullValue());
+            }
+        };
+        el.addEventListener('click', handleClick);
+        return () => el.removeEventListener('click', handleClick);
+    }, [hasMentionSupport, onChange, getFullValue]);
+    // Initialise with pre-filled mentions
+    (0, react_1.useEffect)(() => {
+        if (!hasMentionSupport ||
+            isInitializedRef.current ||
+            !editableRef.current ||
+            !initialMentions?.length)
+            return;
+        isInitializedRef.current = true;
+        const batch = [];
+        for (const mention of initialMentions) {
+            const chip = createChipElement(mention);
+            editableRef.current.appendChild(chip);
+            batch.push(mention);
+        }
+        setMentions((prev) => [...prev, ...batch]);
+        const space = document.createTextNode(' ');
+        editableRef.current.appendChild(space);
+        requestAnimationFrame(() => {
+            if (editableRef.current) {
+                const range = document.createRange();
+                const selection = window.getSelection();
+                range.selectNodeContents(editableRef.current);
+                range.collapse(false);
+                selection?.removeAllRanges();
+                selection?.addRange(range);
+            }
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- createChipElement is stable
+    }, [hasMentionSupport, initialMentions, createChipElement]);
+    // Cleanup debounce timer on unmount
+    (0, react_1.useEffect)(() => () => {
+        clearTimeout(searchTimeoutRef.current);
+    }, []);
+    // -----------------------------------------------------------------------
+    // Imperative handle
+    // -----------------------------------------------------------------------
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        focus: () => editableRef.current?.focus(),
+        clear: () => {
+            if (editableRef.current) {
+                editableRef.current.innerHTML = '';
+            }
+            if (hasMentionSupport) {
+                setMentions([]);
+                closeDropdown();
+            }
+            setValue('');
+        },
+        getValue: () => hasMentionSupport
+            ? getFullValue()
+            : normalizeInputValue(editableRef.current?.innerText ?? ''),
+        setValue: (nextValue) => {
+            if (!editableRef.current)
+                return;
+            if (hasMentionSupport) {
+                editableRef.current.innerHTML = '';
+                setMentions([]);
+            }
+            editableRef.current.textContent = nextValue;
+            setValue(nextValue);
+        },
+        getMentions: () => (hasMentionSupport ? getMentionsFromDOM() : []),
+        addMention: (mention) => {
+            if (!hasMentionSupport || !editableRef.current)
+                return;
+            const chip = createChipElement(mention);
+            editableRef.current.insertBefore(chip, editableRef.current.firstChild);
+            const space = document.createTextNode(' ');
+            chip.after(space);
+            setMentions((prev) => [...prev, mention]);
+        },
+    }), [hasMentionSupport, setValue, getFullValue, getMentionsFromDOM, createChipElement, closeDropdown]);
+    // -----------------------------------------------------------------------
+    // Render
+    // -----------------------------------------------------------------------
+    const dataPlaceholder = (0, react_1.useMemo)(() => placeholder ?? '', [placeholder]);
+    // Plain mode — render exactly the same DOM as before
+    if (!hasMentionSupport) {
+        return ((0, jsx_runtime_1.jsx)("div", { ref: editableRef, className: className, contentEditable: !disabled, role: "textbox", tabIndex: 0, "data-component": "rich-mention-input", "data-placeholder": dataPlaceholder, "data-state": disabled ? 'disabled' : 'idle', "aria-disabled": disabled, "aria-label": placeholder ?? 'Message input', onInput: handleInput, onKeyDown: handleKeyDown, suppressContentEditableWarning: true }));
+    }
+    // Mention mode — wrapper with editor + dropdown
+    const isEmpty = !isFocused && getTextContent() === '' && mentions.length === 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-component": "rich-mention-input", "data-state": disabled
+            ? 'disabled'
+            : dropdownOpen
+                ? 'dropdown-open'
+                : 'idle', children: [(0, jsx_runtime_1.jsx)("div", { ref: editableRef, className: className, contentEditable: !disabled, role: "textbox", tabIndex: 0, "data-element": "editor", "aria-disabled": disabled, "aria-label": placeholder ?? 'Message input', onInput: handleInput, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), suppressContentEditableWarning: true }), isEmpty && placeholder && ((0, jsx_runtime_1.jsx)("div", { "data-element": "placeholder", "aria-hidden": true, children: placeholder })), dropdownOpen && searchResults.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: dropdownRef, "data-component": "mention-dropdown", "data-state": isSearching ? 'searching' : 'idle', children: searchResults.map((result, index) => ((0, jsx_runtime_1.jsx)(DropdownItem, { result: result, isSelected: index === selectedIndex, onClick: () => insertMention(result) }, result.id))) }))] }));
+});

package/dist/cjs/react/components/session-switcher.d.ts

@@ -0,0 +1,14 @@
+export interface SessionSwitcherProps {
+    /** Shown when no sessions exist yet. */
+    fallbackTitle?: string;
+    /** Format the per-row subtitle. Default: `updatedAt` or `createdAt` as locale date. */
+    formatTimestamp?: (value: string | number | undefined) => string;
+    className?: string;
+}
+/**
+ * Compact dropdown that lists all chat sessions, lets the user switch
+ * between them, create new ones, and delete existing ones. Reads
+ * everything from `useChatContext()` — requires an `<AiChatProvider>`
+ * ancestor whose `session` config exposes `list`, `create`, and `remove`.
+ */
+export declare function SessionSwitcher({ fallbackTitle, formatTimestamp, className, }?: SessionSwitcherProps): import("react/jsx-runtime").JSX.Element;