glirastes 0.3.2 → 0.5.0

package/dist/cjs/react/components/chat-window.js

@@ -5,16 +5,72 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
 const use_drag_resize_panel_js_1 = require("../hooks/use-drag-resize-panel.js");
+const use_sidebar_resize_js_1 = require("../hooks/use-sidebar-resize.js");
 const chat_context_js_1 = require("../provider/chat-context.js");
-function ChatWindow({ children, title = 'Assistant', closeChatAriaLabel, className, headerClassName, bodyClassName, portal = true, open, defaultOpen = true, onOpenChange, draggable = true, resizable = true, constrainToViewport = true, width = 420, height = 640, minWidth = 320, minHeight = 420, maxWidth, maxHeight, initialPosition, snapToCenter, snapRadius, edgeThreshold, persistDimensions, header, headerActions, headerTitle, renderHeader, onPositionChange, onDimensionChange, resizeHandleClassName, snapIndicatorClassName, }) {
+const chat_window_visibility_js_1 = require("./chat-window-visibility.js");
+function ChatWindow({ children, title = 'Assistant', closeChatAriaLabel, className, headerClassName, bodyClassName, portal = true, mode, defaultMode = 'floating', onModeChange, layoutControls = false, collapsed, onCollapsedChange, sidebarWidth = 420, minSidebarWidth = 320, maxSidebarWidth = 800, onSidebarWidthChange, layoutLabels, open, keepMounted = false, defaultOpen = true, onOpenChange, draggable = true, resizable = true, constrainToViewport = true, width = 420, height = 640, minWidth = 320, minHeight = 420, maxWidth, maxHeight, initialPosition, snapToCenter, snapRadius, edgeThreshold, persistDimensions, persistSidebarWidth = true, header, headerActions, headerTitle, renderHeader, onPositionChange, onDimensionChange, resizeHandleClassName, snapIndicatorClassName, }) {
     const [uncontrolledOpen, setUncontrolledOpen] = (0, react_1.useState)(defaultOpen);
     const isOpen = open ?? uncontrolledOpen;
+    const [uncontrolledMode, setUncontrolledMode] = (0, react_1.useState)(defaultMode);
+    const [uncontrolledCollapsed, setUncontrolledCollapsed] = (0, react_1.useState)(false);
+    const currentMode = mode ?? uncontrolledMode;
+    const isSidebar = currentMode === 'sidebar';
+    const isCollapsed = isSidebar && (collapsed ?? uncontrolledCollapsed);
+    const labels = {
+        dock: 'Dock chat', float: 'Float chat', collapse: 'Collapse chat',
+        expand: 'Expand chat', resize: 'Resize chat sidebar', ...layoutLabels,
+    };
+    const updateCollapsed = (value) => {
+        if (collapsed === undefined)
+            setUncontrolledCollapsed(value);
+        onCollapsedChange?.(value);
+    };
+    const toggleMode = () => {
+        const next = isSidebar ? 'floating' : 'sidebar';
+        if (mode === undefined)
+            setUncontrolledMode(next);
+        onModeChange?.(next);
+    };
     // Read theme vars from context if mounted inside a provider. ChatWindow
     // can be used standalone, so fall back to an empty object.
     const ctx = (0, react_1.useContext)(chat_context_js_1.ChatContext);
     const themeVars = ctx?.themeVars ?? {};
     const themeEffect = ctx?.themeEffect;
+    const unstyled = ctx?.unstyled ?? false;
     const panelRef = (0, react_1.useRef)(null);
+    const wasOpen = (0, react_1.useRef)(isOpen);
+    (0, react_1.useEffect)(() => {
+        const opening = isOpen && !wasOpen.current;
+        wasOpen.current = isOpen;
+        if (!opening || isCollapsed)
+            return;
+        panelRef.current?.querySelector('[data-component="chat-window-body"] :is(input:not([disabled]), textarea:not([disabled]), [contenteditable="true"])')?.focus();
+    }, [isOpen, isCollapsed]);
+    const wasCollapsed = (0, react_1.useRef)(isCollapsed);
+    (0, react_1.useEffect)(() => {
+        if (wasCollapsed.current === isCollapsed)
+            return;
+        wasCollapsed.current = isCollapsed;
+        const panel = panelRef.current;
+        if (!panel || !isOpen)
+            return;
+        const active = document.activeElement;
+        // The expanded rail button is removed; browsers then focus body. Never
+        // interrupt an unrelated, still-focused app control on controlled changes.
+        if (!panel.contains(active) && !(active === document.body && !isCollapsed))
+            return;
+        const target = isCollapsed
+            ? panel.querySelector('[data-action="expand"]')
+            : panel.querySelector('[data-component="chat-window-body"] :is(input:not([disabled]), textarea:not([disabled]), [contenteditable="true"], button:not([disabled]))')
+                ?? panel.querySelector('[data-component="chat-window-header-slot"] button');
+        target?.focus();
+    }, [isCollapsed, isOpen]);
+    const sidebar = (0, use_sidebar_resize_js_1.useSidebarResize)({
+        active: isOpen && isSidebar && !isCollapsed && resizable,
+        width: sidebarWidth, minWidth: minSidebarWidth, maxWidth: maxSidebarWidth,
+        storageKey: persistDimensions && persistSidebarWidth ? `${persistDimensions === true ? 'chat-panel' : persistDimensions}-sidebar-width` : undefined,
+        onWidthChange: onSidebarWidthChange,
+    });
     const { position, size, isDragging, isResizing, activeEdge, isNearSnapZone, nearEdge, handlers, } = (0, use_drag_resize_panel_js_1.useDragResizePanel)({
         panelRef,
         width,
@@ -28,8 +84,9 @@ function ChatWindow({ children, title = 'Assistant', closeChatAriaLabel, classNa
         snapRadius,
         edgeThreshold,
         persistDimensions,
-        draggable,
-        resizable,
+        draggable: isOpen && !isSidebar && draggable,
+        resizable: isOpen && !isSidebar && resizable,
+        constrainToViewport,
     });
     // ---------------------------------------------------------------------------
     // Notify position/dimension changes
@@ -50,7 +107,11 @@ function ChatWindow({ children, title = 'Assistant', closeChatAriaLabel, classNa
         onOpenChange?.(nextOpen);
     }, [onOpenChange, open]);
     const handleClose = (0, react_1.useCallback)(() => updateOpen(false), [updateOpen]);
-    if (!isOpen)
+    const handleHeaderDoubleClick = () => {
+        if (isOpen && !isSidebar)
+            handlers.onDoubleClickHeader();
+    };
+    if (!isOpen && !keepMounted)
         return null;
     // ---------------------------------------------------------------------------
     // Position style — always use translate(-50%, 0) so x means "center"
@@ -62,71 +123,77 @@ function ChatWindow({ children, title = 'Assistant', closeChatAriaLabel, classNa
     // Header rendering
     // ---------------------------------------------------------------------------
     let headerContent;
+    const controls = layoutControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "data-action": "layout", onClick: toggleMode, "aria-label": isSidebar ? labels.float : labels.dock, title: isSidebar ? labels.float : labels.dock, children: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: isSidebar ? 'M8 9h8v6H8z' : 'M15 4v16' })] }) }), isSidebar && (0, jsx_runtime_1.jsx)("button", { type: "button", "data-action": "layout", onClick: () => updateCollapsed(true), "aria-label": labels.collapse, title: labels.collapse, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m9 6 6 6-6 6" }) }) })] })) : null;
     if (renderHeader) {
         headerContent = renderHeader({
+            layoutControls: controls,
             onClose: handleClose,
             isDragging,
             onDragStart: handlers.onDragStart,
-            onDoubleClick: handlers.onDoubleClickHeader,
+            onDoubleClick: handleHeaderDoubleClick,
         });
     }
     else {
-        headerContent = ((0, jsx_runtime_1.jsx)("header", { className: headerClassName, "data-component": "chat-window-header", onMouseDown: handlers.onDragStart, onDoubleClick: handlers.onDoubleClickHeader, children: header ?? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "title-wrap", children: headerTitle ?? (0, jsx_runtime_1.jsx)("strong", { "data-element": "title", children: title }) }), (0, jsx_runtime_1.jsxs)("div", { "data-element": "actions", children: [headerActions, (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClose, "data-action": "close", "aria-label": closeChatAriaLabel ?? 'Close chat', title: closeChatAriaLabel ?? 'Close chat', children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] })) }));
+        headerContent = ((0, jsx_runtime_1.jsx)("header", { className: headerClassName, "data-component": "chat-window-header", onMouseDown: handlers.onDragStart, onDoubleClick: handleHeaderDoubleClick, children: header ?? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "title-wrap", children: headerTitle ?? (0, jsx_runtime_1.jsx)("strong", { "data-element": "title", children: title }) }), (0, jsx_runtime_1.jsxs)("div", { "data-element": "actions", children: [controls, headerActions, (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClose, "data-action": "close", "aria-label": closeChatAriaLabel ?? 'Close chat', title: closeChatAriaLabel ?? 'Close chat', children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] })) }));
     }
     // ---------------------------------------------------------------------------
     // Content
     // ---------------------------------------------------------------------------
-    const content = ((0, jsx_runtime_1.jsxs)("section", { ref: panelRef, className: className, "data-component": "chat-window", "data-theme-effect": themeEffect, style: {
-            ...themeVars,
-            ...positionStyle,
-            width: size.width,
-            height: size.height,
-        }, onMouseMove: handlers.onPanelMouseMove, onMouseLeave: handlers.onPanelMouseLeave, children: [resizable && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-resize-handle", "data-edge": "top", className: resizeHandleClassName, style: {
-                            position: 'absolute',
-                            top: -4,
-                            left: 16,
-                            right: 16,
-                            height: 12,
-                            cursor: 'ns-resize',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            opacity: nearEdge.top || activeEdge === 'top' ? 1 : 0,
-                            transition: 'opacity 150ms',
-                            zIndex: 10,
-                        }, onMouseDown: handlers.onEdgeResizeStart('top') }), (0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-resize-handle", "data-edge": "left", className: resizeHandleClassName, style: {
-                            position: 'absolute',
-                            left: -4,
-                            top: 16,
-                            bottom: 16,
-                            width: 12,
-                            cursor: 'ew-resize',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            opacity: nearEdge.left || activeEdge === 'left' ? 1 : 0,
-                            transition: 'opacity 150ms',
-                            zIndex: 10,
-                        }, onMouseDown: handlers.onEdgeResizeStart('left') }), (0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-resize-handle", "data-edge": "right", className: resizeHandleClassName, style: {
-                            position: 'absolute',
-                            right: -4,
-                            top: 16,
-                            bottom: 16,
-                            width: 12,
-                            cursor: 'ew-resize',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            opacity: nearEdge.right || activeEdge === 'right' ? 1 : 0,
-                            transition: 'opacity 150ms',
-                            zIndex: 10,
-                        }, onMouseDown: handlers.onEdgeResizeStart('right') })] })), isDragging && isNearSnapZone && ((0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-snap-indicator", className: snapIndicatorClassName, style: {
-                    position: 'absolute',
-                    inset: 0,
-                    borderRadius: 'inherit',
-                    pointerEvents: 'none',
-                    boxShadow: '0 0 0 3px rgba(99, 102, 241, 0.5)',
-                } })), headerContent, (0, jsx_runtime_1.jsx)("div", { className: bodyClassName, "data-component": "chat-window-body", children: children })] }));
+    const content = ((0, jsx_runtime_1.jsx)(chat_window_visibility_js_1.ChatWindowVisibilityContext.Provider, { value: isOpen && !isCollapsed, children: (0, jsx_runtime_1.jsxs)("section", { ref: panelRef, className: className, "data-component": "chat-window", "data-mode": currentMode, "data-collapsed": isCollapsed || undefined, "data-theme-effect": themeEffect, "data-unstyled": unstyled || undefined, hidden: !isOpen, inert: !isOpen, style: {
+                ...themeVars,
+                ...(isSidebar
+                    ? { position: portal ? 'fixed' : 'relative', right: portal ? 0 : undefined,
+                        top: portal ? 0 : undefined, transform: 'none', flexShrink: 0, minHeight: 0, maxWidth: '100%' }
+                    : positionStyle),
+                width: isSidebar ? (isCollapsed ? 44 : sidebar.width) : size.width,
+                height: isSidebar ? (portal ? '100dvh' : '100%') : size.height,
+                display: isOpen ? undefined : 'none',
+            }, onMouseMove: handlers.onPanelMouseMove, onMouseLeave: handlers.onPanelMouseLeave, children: [resizable && isSidebar && !isCollapsed && (0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-sidebar-resize", role: "separator", tabIndex: 0, "aria-label": labels.resize, "aria-orientation": "vertical", "aria-valuemin": sidebar.minimum, "aria-valuemax": sidebar.maximum, "aria-valuenow": sidebar.width, onPointerDown: sidebar.onPointerDown, onKeyDown: sidebar.onKeyDown, onDoubleClick: sidebar.onDoubleClick }), resizable && !isSidebar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-resize-handle", "data-edge": "top", className: resizeHandleClassName, style: {
+                                position: 'absolute',
+                                top: -4,
+                                left: 16,
+                                right: 16,
+                                height: 12,
+                                cursor: 'ns-resize',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                opacity: nearEdge.top || activeEdge === 'top' ? 1 : 0,
+                                transition: 'opacity 150ms',
+                                zIndex: 10,
+                            }, onMouseDown: handlers.onEdgeResizeStart('top') }), (0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-resize-handle", "data-edge": "left", className: resizeHandleClassName, style: {
+                                position: 'absolute',
+                                left: -4,
+                                top: 16,
+                                bottom: 16,
+                                width: 12,
+                                cursor: 'ew-resize',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                opacity: nearEdge.left || activeEdge === 'left' ? 1 : 0,
+                                transition: 'opacity 150ms',
+                                zIndex: 10,
+                            }, onMouseDown: handlers.onEdgeResizeStart('left') }), (0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-resize-handle", "data-edge": "right", className: resizeHandleClassName, style: {
+                                position: 'absolute',
+                                right: -4,
+                                top: 16,
+                                bottom: 16,
+                                width: 12,
+                                cursor: 'ew-resize',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                opacity: nearEdge.right || activeEdge === 'right' ? 1 : 0,
+                                transition: 'opacity 150ms',
+                                zIndex: 10,
+                            }, onMouseDown: handlers.onEdgeResizeStart('right') })] })), isDragging && isNearSnapZone && ((0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-snap-indicator", className: snapIndicatorClassName, style: {
+                        position: 'absolute',
+                        inset: 0,
+                        borderRadius: 'inherit',
+                        pointerEvents: 'none',
+                        boxShadow: '0 0 0 3px rgba(99, 102, 241, 0.5)',
+                    } })), isCollapsed && (0, jsx_runtime_1.jsxs)("div", { "data-component": "chat-window-rail", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "data-action": "expand", onClick: () => updateCollapsed(false), "aria-label": labels.expand, title: labels.expand, children: "\u2039" }), (0, jsx_runtime_1.jsx)("span", { children: title }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClose, "aria-label": closeChatAriaLabel ?? 'Close chat', title: closeChatAriaLabel ?? 'Close chat', children: "\u00D7" })] }), (0, jsx_runtime_1.jsx)("div", { "data-component": "chat-window-header-slot", hidden: isCollapsed, inert: isCollapsed, style: { display: isCollapsed ? 'none' : 'contents' }, children: headerContent }), (0, jsx_runtime_1.jsx)("div", { className: bodyClassName, "data-component": "chat-window-body", hidden: isCollapsed, inert: isCollapsed, style: isCollapsed ? { display: 'none' } : undefined, children: children })] }) }));
     if (portal && typeof document !== 'undefined') {
         return (0, react_dom_1.createPortal)(content, document.body);
     }

package/dist/cjs/react/components/clarification-card.d.ts

@@ -0,0 +1,10 @@
+import type { ClarificationCardProps } from '../types.js';
+/**
+ * Structured clarification: concrete options plus an optional free-text
+ * answer. Answering sends one user message that resumes the original task.
+ *
+ * `data-state`: `open` while answerable, `answered` once an answer exists
+ * (clicked here or already in the conversation), `disabled` while it cannot
+ * be answered yet (the turn is still running or a newer message exists).
+ */
+export declare function ClarificationCard({ toolCallId, request, interactive, onAnswer, className, }: ClarificationCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/clarification-card.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClarificationCard = ClarificationCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const clarification_js_1 = require("../utils/clarification.js");
+/**
+ * Structured clarification: concrete options plus an optional free-text
+ * answer. Answering sends one user message that resumes the original task.
+ *
+ * `data-state`: `open` while answerable, `answered` once an answer exists
+ * (clicked here or already in the conversation), `disabled` while it cannot
+ * be answered yet (the turn is still running or a newer message exists).
+ */
+function ClarificationCard({ toolCallId, request, interactive, onAnswer, className, }) {
+    const { classNames, locale, messages } = (0, chat_context_js_1.useChatContext)();
+    const questionId = (0, react_1.useId)();
+    const [draft, setDraft] = (0, react_1.useState)('');
+    const [answeredHere, setAnsweredHere] = (0, react_1.useState)(false);
+    const answered = answeredHere || (0, clarification_js_1.isClarificationAnswered)(messages, toolCallId);
+    const enabled = interactive && !answered;
+    const answer = (text, optionId) => {
+        const trimmed = text.trim();
+        if (!enabled || !trimmed)
+            return;
+        setAnsweredHere(true);
+        onAnswer(optionId === undefined ? { text: trimmed } : { text: trimmed, optionId });
+    };
+    const submitFreeText = (event) => {
+        event.preventDefault();
+        answer(draft);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className ?? classNames.clarificationCard, "data-component": "clarification-card", "data-state": enabled ? 'open' : answered ? 'answered' : 'disabled', "data-tool-call-id": toolCallId, role: "group", "aria-labelledby": questionId, children: [(0, jsx_runtime_1.jsx)("p", { id: questionId, "data-element": "question", children: request.question }), request.options.length > 0 && ((0, jsx_runtime_1.jsx)("div", { "data-element": "options", children: request.options.map((option) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", "data-action": "answer-option", "data-option-id": option.id, disabled: !enabled, onClick: () => answer(option.label, option.id), children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "label", children: option.label }), option.description && ((0, jsx_runtime_1.jsx)("span", { "data-element": "description", children: option.description }))] }, option.id))) })), request.allowFreeText && enabled && ((0, jsx_runtime_1.jsxs)("form", { "data-element": "free-text", onSubmit: submitFreeText, children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: draft, maxLength: 500, "aria-label": locale.clarificationInputLabel, placeholder: locale.clarificationInputLabel, onChange: (event) => setDraft(event.target.value) }), (0, jsx_runtime_1.jsx)("button", { type: "submit", "data-action": "answer-free-text", disabled: !draft.trim(), children: locale.clarificationSubmitButton })] }))] }));
+}

package/dist/cjs/react/components/command-arguments-form.d.ts

@@ -0,0 +1,10 @@
+import type { CommandArgumentsFormProps } from '../types.js';
+/**
+ * Asks for the arguments a `/` command or entity action still needs, then
+ * runs it without the model. Entity arguments search like `@`; closed sets
+ * are a select; everything else is text. Escape cancels. Run checks the
+ * required values itself: it names what is missing, focuses the first such
+ * field and keeps what was typed, and it refuses text typed into a person
+ * field that was never picked (the command would silently run without it).
+ */
+export declare function CommandArgumentsForm({ pending, onSubmit, onCancel }: CommandArgumentsFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/command-arguments-form.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandArgumentsForm = CommandArgumentsForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chat_interactions_js_1 = require("../../contracts/chat-interactions.js");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const SEARCH_DEBOUNCE_MS = 120;
+const NO_ITEMS = [];
+/** ARIA 1.2 combobox over one entity type's search. */
+function EntityField({ id, label, arg, value, valueLabel, invalid, describedBy, onChange, onText }) {
+    const { interactions, locale } = (0, chat_context_js_1.useChatContext)();
+    const [query, setQuery] = (0, react_1.useState)(valueLabel || value);
+    // The hits are only valid for the query they were searched with: while a newer
+    // query is still being searched nothing may be shown or picked from the old list.
+    const [results, setResults] = (0, react_1.useState)();
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [active, setActive] = (0, react_1.useState)(0);
+    const listId = `${id}-list`;
+    const trimmed = query.trim();
+    const settled = results !== undefined && results.query === trimmed;
+    const items = settled ? results.items : NO_ITEMS;
+    (0, react_1.useEffect)(() => {
+        if (!open || !interactions || !arg.entity)
+            return undefined;
+        const controller = new AbortController();
+        const timer = setTimeout(() => {
+            void interactions.searchEntity(arg.entity, query.trim(), controller.signal).then((found) => {
+                if (controller.signal.aborted)
+                    return;
+                setResults({ query: query.trim(), items: found });
+                setActive(0);
+            });
+        }, SEARCH_DEBOUNCE_MS);
+        return () => {
+            clearTimeout(timer);
+            controller.abort();
+        };
+    }, [open, query, interactions, arg.entity]);
+    const pick = (item) => {
+        onChange(item.id, item.label);
+        setQuery(item.label);
+        setOpen(false);
+    };
+    const expanded = open && items.length > 0;
+    const onKeyDown = (event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (!open)
+                setOpen(true);
+            else if (items.length > 0)
+                setActive((previous) => (previous + 1) % items.length);
+            return;
+        }
+        if (event.key === 'ArrowUp' && open && items.length > 0) {
+            event.preventDefault();
+            setActive((previous) => (previous - 1 + items.length) % items.length);
+            return;
+        }
+        if (event.key === 'Enter' && expanded && items[active]) {
+            event.preventDefault();
+            pick(items[active]);
+            return;
+        }
+        // The list for what was just typed is still loading: Enter neither picks nor submits the form.
+        if (event.key === 'Enter' && open && interactions && trimmed && !settled) {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Escape' && expanded) {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-element": "field", "data-kind": "entity", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: id, children: [label, arg.required ? ' *' : ''] }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-expanded": expanded, "aria-controls": listId, "aria-activedescendant": expanded ? `${listId}-${active}` : undefined, "aria-required": arg.required ? true : undefined, "aria-invalid": invalid ? true : undefined, "aria-describedby": describedBy, "data-argument": arg.name, value: query, onChange: (event) => {
+                    setQuery(event.target.value);
+                    setActive(0);
+                    setOpen(true);
+                    onText(event.target.value);
+                    if (value)
+                        onChange('', '');
+                }, onFocus: () => setOpen(true), onBlur: () => setOpen(false), onKeyDown: onKeyDown }), (0, jsx_runtime_1.jsx)("ul", { id: listId, role: "listbox", "aria-label": label, hidden: !expanded, "data-element": "options", children: items.map((item, index) => ((0, jsx_runtime_1.jsxs)("li", { id: `${listId}-${index}`, role: "option", "aria-selected": index === active, "data-selected": index === active ? 'true' : 'false', onMouseDown: (event) => event.preventDefault(), onClick: () => pick(item), children: [item.label, item.description && (0, jsx_runtime_1.jsx)("span", { "data-element": "description", children: item.description })] }, item.id))) }), open && settled && trimmed && items.length === 0 && ((0, jsx_runtime_1.jsx)("span", { "data-element": "empty", children: locale.commandArgumentsNoMatches }))] }));
+}
+/**
+ * Asks for the arguments a `/` command or entity action still needs, then
+ * runs it without the model. Entity arguments search like `@`; closed sets
+ * are a select; everything else is text. Escape cancels. Run checks the
+ * required values itself: it names what is missing, focuses the first such
+ * field and keeps what was typed, and it refuses text typed into a person
+ * field that was never picked (the command would silently run without it).
+ */
+function CommandArgumentsForm({ pending, onSubmit, onCancel }) {
+    const { interactions, locale } = (0, chat_context_js_1.useChatContext)();
+    const formId = (0, react_1.useId)();
+    const formRef = (0, react_1.useRef)(null);
+    const [values, setValues] = (0, react_1.useState)(() => ({ ...pending.values }));
+    const [labels, setLabels] = (0, react_1.useState)(() => ({ ...pending.valueLabels }));
+    const [texts, setTexts] = (0, react_1.useState)({});
+    const [incomplete, setIncomplete] = (0, react_1.useState)([]);
+    const language = interactions?.locale ?? 'en';
+    const errorId = `${formId}-incomplete`;
+    // Start at the first required field still empty (e.g. the person when the task came from `@`).
+    (0, react_1.useEffect)(() => {
+        const fields = [...(formRef.current?.querySelectorAll('input, select') ?? [])];
+        const required = (field) => field.required || field.getAttribute('aria-required') === 'true';
+        (fields.find((field) => field.value === '' && required(field))
+            ?? fields.find((field) => field.value === '')
+            ?? fields[0])?.focus();
+    }, []);
+    const set = (name, value, label) => {
+        setValues((previous) => ({ ...previous, [name]: value }));
+        if (label !== undefined)
+            setLabels((previous) => ({ ...previous, [name]: label }));
+        if (value.trim())
+            setIncomplete((previous) => (previous.includes(name) ? previous.filter((other) => other !== name) : previous));
+    };
+    const submit = (event) => {
+        event.preventDefault();
+        const missing = pending.args.filter((arg) => !values[arg.name]?.trim()
+            && (arg.required || (arg.entity !== undefined && Boolean(texts[arg.name]?.trim()))));
+        if (missing.length > 0) {
+            setIncomplete(missing.map((arg) => arg.name));
+            [...(formRef.current?.querySelectorAll('[data-argument]') ?? [])]
+                .find((field) => field.dataset.argument === missing[0].name)
+                ?.focus();
+            return;
+        }
+        setIncomplete([]);
+        onSubmit(values, labels);
+    };
+    const incompleteLabels = pending.args
+        .filter((arg) => incomplete.includes(arg.name))
+        .map((arg) => (0, chat_interactions_js_1.chatText)(arg.label, language));
+    return ((0, jsx_runtime_1.jsxs)("form", { ref: formRef, "data-component": "command-arguments", "aria-label": locale.commandArgumentsLabel.replace('{command}', () => pending.label), noValidate: true, onSubmit: submit, onKeyDown: (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                onCancel();
+            }
+        }, children: [(0, jsx_runtime_1.jsx)("p", { "data-element": "title", children: `/${pending.label}` }), pending.error && (0, jsx_runtime_1.jsx)("p", { role: "alert", "data-element": "error", children: locale.commandArgumentsInvalid }), incompleteLabels.length > 0 && ((0, jsx_runtime_1.jsx)("p", { id: errorId, role: "alert", "data-element": "error", children: locale.commandArgumentsIncomplete.replace('{fields}', () => incompleteLabels.join(', ')) })), pending.args.map((arg, index) => {
+                const id = `${formId}-${index}`;
+                const label = (0, chat_interactions_js_1.chatText)(arg.label, language);
+                const invalid = incomplete.includes(arg.name);
+                const describedBy = invalid ? errorId : undefined;
+                if (arg.entity) {
+                    return ((0, jsx_runtime_1.jsx)(EntityField, { id: id, label: label, arg: arg, value: values[arg.name] ?? '', valueLabel: labels[arg.name] ?? '', invalid: invalid, describedBy: describedBy, onChange: (value, valueLabel) => set(arg.name, value, valueLabel), onText: (text) => setTexts((previous) => ({ ...previous, [arg.name]: text })) }, arg.name));
+                }
+                if (arg.options) {
+                    return ((0, jsx_runtime_1.jsxs)("div", { "data-element": "field", "data-kind": "options", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: id, children: [label, arg.required ? ' *' : ''] }), (0, jsx_runtime_1.jsxs)("select", { id: id, value: values[arg.name] ?? '', required: arg.required, "aria-invalid": invalid ? true : undefined, "aria-describedby": describedBy, "data-argument": arg.name, onChange: (event) => set(arg.name, event.target.value), children: [!arg.required || !values[arg.name] ? (0, jsx_runtime_1.jsx)("option", { value: "", children: locale.commandArgumentsAnyOption }) : null, arg.options.map((option) => (0, jsx_runtime_1.jsx)("option", { value: option, children: option }, option))] })] }, arg.name));
+                }
+                return ((0, jsx_runtime_1.jsxs)("div", { "data-element": "field", "data-kind": "text", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: id, children: [label, arg.required ? ' *' : ''] }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", value: values[arg.name] ?? '', required: arg.required, "aria-invalid": invalid ? true : undefined, "aria-describedby": describedBy, "data-argument": arg.name, maxLength: 500, onChange: (event) => set(arg.name, event.target.value) })] }, arg.name));
+            }), (0, jsx_runtime_1.jsxs)("div", { "data-element": "actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "submit", "data-action": "run", children: locale.commandArgumentsSubmit }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-action": "cancel", onClick: onCancel, children: locale.cancelButton })] })] }));
+}

package/dist/cjs/react/components/confirm-dialog.js

@@ -39,7 +39,7 @@ function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm', cancelL
         return null;
     if (typeof document === 'undefined')
         return null;
-    const dialog = ((0, jsx_runtime_1.jsx)("div", { "data-component": "confirm-dialog-backdrop", style: themeVars, onClick: (e) => {
+    const dialog = ((0, jsx_runtime_1.jsx)("div", { "data-component": "confirm-dialog-backdrop", "data-unstyled": ctx?.unstyled || undefined, style: themeVars, onClick: (e) => {
             // Only close when clicking the backdrop itself, not the panel
             if (e.target === e.currentTarget)
                 onCancel();

package/dist/cjs/react/components/floating-chat-ui.d.ts

@@ -1,7 +1,7 @@
 import '../styles.css';
 import { type ReactNode } from 'react';
-import type { ChatSize } from '../types.js';
-export interface FloatingChatUIProps {
+import type { ChatSize, ChatWindowProps } from '../types.js';
+export interface FloatingChatUIProps extends Pick<ChatWindowProps, 'portal' | 'mode' | 'defaultMode' | 'onModeChange' | 'layoutControls' | 'collapsed' | 'onCollapsedChange' | 'sidebarWidth' | 'minSidebarWidth' | 'maxSidebarWidth' | 'onSidebarWidthChange' | 'layoutLabels' | 'keepMounted' | 'persistDimensions' | 'persistSidebarWidth'> {
     /** Window header title. Default: "AI Assistant" */
     title?: string;
     /**
@@ -87,4 +87,4 @@ export interface FloatingChatUIProps {
  * window that opens when the pill is clicked. Must be mounted inside an
  * `<AiChatProvider>`.
  */
-export declare function FloatingChatUI({ title, open: controlledOpen, onOpenChange, defaultOpen, draggable, resizable, size, hideTriggerWhenOpen, shortcut, showClearButton, confirmClear, showSessionSwitcher, headerActions, triggerIcon, showMic, welcomeMessage, }?: FloatingChatUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatingChatUI({ title, open: controlledOpen, onOpenChange, defaultOpen, draggable, resizable, size, hideTriggerWhenOpen, shortcut, showClearButton, confirmClear, showSessionSwitcher, headerActions, triggerIcon, showMic, welcomeMessage, portal, mode: controlledMode, defaultMode, onModeChange, layoutControls, collapsed: controlledCollapsed, onCollapsedChange, sidebarWidth, minSidebarWidth, maxSidebarWidth, onSidebarWidthChange, layoutLabels, keepMounted, persistDimensions, persistSidebarWidth, }?: FloatingChatUIProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/floating-chat-ui.js

@@ -10,6 +10,7 @@ const chat_window_js_1 = require("./chat-window.js");
 const ai_chat_panel_js_1 = require("./ai-chat-panel.js");
 const session_switcher_js_1 = require("./session-switcher.js");
 const confirm_dialog_js_1 = require("./confirm-dialog.js");
+const chat_window_visibility_js_1 = require("./chat-window-visibility.js");
 const chat_context_js_1 = require("../provider/chat-context.js");
 const use_keyboard_shortcut_js_1 = require("../hooks/use-keyboard-shortcut.js");
 // ---------------------------------------------------------------------------
@@ -95,13 +96,27 @@ function useViewportSize() {
  * window that opens when the pill is clicked. Must be mounted inside an
  * `<AiChatProvider>`.
  */
-function FloatingChatUI({ title, open: controlledOpen, onOpenChange, defaultOpen = false, draggable = true, resizable = true, size, hideTriggerWhenOpen = true, shortcut = 'mod+i', showClearButton = true, confirmClear = true, showSessionSwitcher = 'auto', headerActions, triggerIcon, showMic, welcomeMessage, } = {}) {
+function FloatingChatUI({ title, open: controlledOpen, onOpenChange, defaultOpen = false, draggable = true, resizable = true, size, hideTriggerWhenOpen = true, shortcut = 'mod+i', showClearButton = true, confirmClear = true, showSessionSwitcher = 'auto', headerActions, triggerIcon, showMic, welcomeMessage, portal, mode: controlledMode, defaultMode = 'floating', onModeChange, layoutControls, collapsed: controlledCollapsed, onCollapsedChange, sidebarWidth, minSidebarWidth, maxSidebarWidth, onSidebarWidthChange, layoutLabels, keepMounted, persistDimensions, persistSidebarWidth, } = {}) {
     const { classNames, locale, voice, sessionsSupported } = (0, chat_context_js_1.useChatContext)();
     const { vw, vh } = useViewportSize();
     const resolvedSize = resolveSize(size, vw, vh);
     const [uncontrolledOpen, setUncontrolledOpen] = (0, react_1.useState)(defaultOpen);
     const isControlled = controlledOpen !== undefined;
     const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const [localMode, setLocalMode] = (0, react_1.useState)(defaultMode);
+    const [localCollapsed, setLocalCollapsed] = (0, react_1.useState)(false);
+    const mode = controlledMode ?? localMode;
+    const collapsed = controlledCollapsed ?? localCollapsed;
+    const setMode = (next) => {
+        if (controlledMode === undefined)
+            setLocalMode(next);
+        onModeChange?.(next);
+    };
+    const setCollapsed = (next) => {
+        if (controlledCollapsed === undefined)
+            setLocalCollapsed(next);
+        onCollapsedChange?.(next);
+    };
     const setOpen = (0, react_1.useCallback)((next) => {
         const resolved = typeof next === 'function'
             ? next(open)
@@ -111,7 +126,15 @@ function FloatingChatUI({ title, open: controlledOpen, onOpenChange, defaultOpen
         onOpenChange?.(resolved);
     }, [isControlled, onOpenChange, open]);
     const noop = (0, react_1.useCallback)(() => { }, []);
-    (0, use_keyboard_shortcut_js_1.useKeyboardShortcut)(shortcut, () => setOpen((v) => !v));
+    (0, use_keyboard_shortcut_js_1.useKeyboardShortcut)(shortcut, () => {
+        if (mode === 'sidebar' && collapsed) {
+            setCollapsed(false);
+            if (!open)
+                setOpen(true);
+        }
+        else
+            setOpen((v) => !v);
+    });
     (0, use_keyboard_shortcut_js_1.useKeyboardShortcut)('escape', () => setOpen(false), { enabled: open });
     // Was the title prop explicitly set by the consumer? (vs using the
     // locale fallback.) Drives the "title + switcher coexist" branch.
@@ -126,7 +149,7 @@ function FloatingChatUI({ title, open: controlledOpen, onOpenChange, defaultOpen
     // Auto-hide the mic when the consumer didn't opt into voice. Explicit
     // `showMic` prop always wins.
     const effectiveShowMic = showMic ?? Boolean(voice?.enabled);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!hideTriggerWhenOpen || !open) && ((0, jsx_runtime_1.jsx)(ai_trigger_button_js_1.AiTriggerButton, { onClickChat: () => setOpen(true), onClickMic: noop, showMic: effectiveShowMic, icon: triggerIcon, className: classNames.trigger, buttonClassName: classNames.triggerPill, ariaLabel: locale.triggerAriaLabel, micAriaLabel: locale.micAriaLabel, stopAriaLabel: locale.stopRecordingAriaLabel, cancelAriaLabel: locale.cancelRecordingAriaLabel })), (0, jsx_runtime_1.jsx)(chat_window_js_1.ChatWindow, { open: open, onOpenChange: setOpen, title: resolvedTitle, closeChatAriaLabel: locale.closeChatAriaLabel, draggable: draggable && !resolvedSize.fullscreen, resizable: resizable && !resolvedSize.fullscreen, width: resolvedSize.width, height: resolvedSize.height, className: classNames.window, headerClassName: classNames.windowHeader, bodyClassName: classNames.windowBody, headerTitle: renderSwitcherInActions ? ((0, jsx_runtime_1.jsx)("strong", { "data-element": "title", children: resolvedTitle })) : ((0, jsx_runtime_1.jsx)(FloatingHeaderTitle, { fallback: resolvedTitle, showSessionSwitcher: showSessionSwitcher, className: classNames.switcher })), headerActions: headerActions ?? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderSwitcherInActions && ((0, jsx_runtime_1.jsx)(session_switcher_js_1.SessionSwitcher, { className: classNames.switcher })), (0, jsx_runtime_1.jsx)(FloatingHeaderActions, { showClearButton: showClearButton, confirmClear: confirmClear })] })), children: (0, jsx_runtime_1.jsx)(ai_chat_panel_js_1.AiChatPanel, { welcomeMessage: welcomeMessage }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!hideTriggerWhenOpen || !open) && ((0, jsx_runtime_1.jsx)(ai_trigger_button_js_1.AiTriggerButton, { onClickChat: () => setOpen(true), onClickMic: noop, showMic: effectiveShowMic, icon: triggerIcon, className: classNames.trigger, buttonClassName: classNames.triggerPill, ariaLabel: locale.triggerAriaLabel, micAriaLabel: locale.micAriaLabel, stopAriaLabel: locale.stopRecordingAriaLabel, cancelAriaLabel: locale.cancelRecordingAriaLabel })), (0, jsx_runtime_1.jsx)(chat_window_js_1.ChatWindow, { portal: portal, mode: mode, onModeChange: setMode, collapsed: collapsed, onCollapsedChange: setCollapsed, layoutControls: layoutControls, sidebarWidth: sidebarWidth, minSidebarWidth: minSidebarWidth, maxSidebarWidth: maxSidebarWidth, onSidebarWidthChange: onSidebarWidthChange, layoutLabels: layoutLabels, keepMounted: keepMounted, persistDimensions: persistDimensions, persistSidebarWidth: persistSidebarWidth, open: open, onOpenChange: setOpen, title: resolvedTitle, closeChatAriaLabel: locale.closeChatAriaLabel, draggable: draggable && !resolvedSize.fullscreen, resizable: resizable && !resolvedSize.fullscreen, width: resolvedSize.width, height: resolvedSize.height, className: classNames.window, headerClassName: classNames.windowHeader, bodyClassName: classNames.windowBody, headerTitle: renderSwitcherInActions ? ((0, jsx_runtime_1.jsx)("strong", { "data-element": "title", children: resolvedTitle })) : ((0, jsx_runtime_1.jsx)(FloatingHeaderTitle, { fallback: resolvedTitle, showSessionSwitcher: showSessionSwitcher, className: classNames.switcher })), headerActions: headerActions ?? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderSwitcherInActions && ((0, jsx_runtime_1.jsx)(session_switcher_js_1.SessionSwitcher, { className: classNames.switcher })), (0, jsx_runtime_1.jsx)(FloatingHeaderActions, { showClearButton: showClearButton, confirmClear: confirmClear })] })), children: (0, jsx_runtime_1.jsx)(ai_chat_panel_js_1.AiChatPanel, { welcomeMessage: welcomeMessage }) })] }));
 }
 // ---------------------------------------------------------------------------
 // Header sub-components — must live inside the provider so they can read
@@ -143,7 +166,10 @@ function FloatingHeaderTitle({ fallback, showSessionSwitcher, className, }) {
 }
 function FloatingHeaderActions({ showClearButton, confirmClear, }) {
     const { clear, messages, locale } = (0, chat_context_js_1.useChatContext)();
+    const visible = (0, react_1.useContext)(chat_window_visibility_js_1.ChatWindowVisibilityContext);
     const [confirmOpen, setConfirmOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => { if (!visible)
+        setConfirmOpen(false); }, [visible]);
     if (!showClearButton)
         return null;
     const disabled = messages.length === 0;
@@ -156,7 +182,7 @@ function FloatingHeaderActions({ showClearButton, confirmClear, }) {
         }
         clear();
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, "data-action": "clear", "aria-label": locale.clearChatAriaLabel, title: locale.clearChatAriaLabel, disabled: disabled, children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "3 6 5 6 21 6" }), (0, jsx_runtime_1.jsx)("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 11v6" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 11v6" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })] }) }), (0, jsx_runtime_1.jsx)(confirm_dialog_js_1.ConfirmDialog, { open: confirmOpen, title: locale.confirmClearPrompt, confirmLabel: locale.clearButton, cancelLabel: locale.cancelButton, destructive: true, onConfirm: () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, "data-action": "clear", "aria-label": locale.clearChatAriaLabel, title: locale.clearChatAriaLabel, disabled: disabled, children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "3 6 5 6 21 6" }), (0, jsx_runtime_1.jsx)("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 11v6" }), (0, jsx_runtime_1.jsx)("path", { d: "M14 11v6" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })] }) }), (0, jsx_runtime_1.jsx)(confirm_dialog_js_1.ConfirmDialog, { open: visible && confirmOpen, title: locale.confirmClearPrompt, confirmLabel: locale.clearButton, cancelLabel: locale.cancelButton, destructive: true, onConfirm: () => {
                     setConfirmOpen(false);
                     clear();
                 }, onCancel: () => setConfirmOpen(false) })] }));

package/dist/cjs/react/components/mention-input.d.ts

@@ -1,8 +1,9 @@
 import type { MentionInputProps } from '../types.js';
 /**
- * Chat input with mention autocomplete support.
+ * Chat input with `@` mention and `/` command autocomplete.
  *
- * Uses `RichMentionInput` for editing, provides autocomplete for `@` and `/`,
- * and keeps selected mentions in provider state for serialization on send.
+ * With `completionProviders` the editor searches the providers directly
+ * (debounced, arrow keys, Tab/Enter, Escape) and submits structured ids.
+ * Without them the legacy `mentions` flow is unchanged.
  */
-export declare function MentionInput({ className, onSubmit }: MentionInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function MentionInput(props: MentionInputProps): import("react/jsx-runtime").JSX.Element;