glirastes 0.3.0 → 0.3.1

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatInput = ChatInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const voice_input_addon_js_1 = require("./voice-input-addon.js");
+/**
+ * Plain chat input field with submit handling.
+ *
+ * Submits on Enter (without Shift). Renders the InputExtra component
+ * from provider config if available (e.g., voice input button).
+ *
+ * Toggles between send and stop button based on loading state.
+ */
+function ChatInput({ className, onSubmit }) {
+    const { send, stop, isLoading, classNames, locale, components, voice } = (0, chat_context_js_1.useChatContext)();
+    const [value, setValue] = (0, react_1.useState)('');
+    const InputExtra = components.InputExtra;
+    const textareaRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        el.style.overflowY = 'hidden';
+        const borderY = el.offsetHeight - el.clientHeight;
+        const next = el.scrollHeight + borderY;
+        const max = parseFloat(getComputedStyle(el).maxHeight) || Infinity;
+        if (next > max) {
+            el.style.height = `${max}px`;
+            el.style.overflowY = 'auto';
+        }
+        else {
+            el.style.height = `${next}px`;
+        }
+    }, [value]);
+    const handleSubmit = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        const trimmed = value.trim();
+        if (!trimmed || isLoading)
+            return;
+        if (onSubmit) {
+            onSubmit(trimmed);
+        }
+        else {
+            send(trimmed);
+        }
+        setValue('');
+    }, [value, isLoading, onSubmit, send]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+    }, [handleSubmit]);
+    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: className ?? classNames.input, "data-component": "chat-input", children: [(0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, autoFocus: true, value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: locale.placeholder, disabled: isLoading, rows: 1, "data-state": isLoading ? 'loading' : 'idle' }), voice.enabled && ((0, jsx_runtime_1.jsx)(voice_input_addon_js_1.VoiceInputAddon, { disabled: isLoading, language: voice.language ?? 'de', baseUrl: voice.baseUrl, getToken: voice.getToken, onTranscript: (text) => {
+                    setValue((prev) => (prev.length > 0 ? `${prev} ${text}` : text));
+                }, onError: voice.onError, showRecordingBar: voice.recordingBar?.enabled ?? true, recordingBarVariant: voice.recordingBar?.variant ?? 'inline' })), InputExtra && (0, jsx_runtime_1.jsx)(InputExtra, {}), isLoading ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: stop, "data-action": "stop", children: locale.stopButton })) : ((0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !value.trim(), "data-action": "send", children: locale.sendButton }))] }));
+}

package/dist/cjs/react/components/chat-window.d.ts

@@ -0,0 +1,2 @@
+import type { ChatWindowProps } from '../types.js';
+export declare function ChatWindow({ children, title, closeChatAriaLabel, className, headerClassName, bodyClassName, portal, open, defaultOpen, onOpenChange, draggable, resizable, constrainToViewport, width, height, minWidth, minHeight, maxWidth, maxHeight, initialPosition, snapToCenter, snapRadius, edgeThreshold, persistDimensions, header, headerActions, headerTitle, renderHeader, onPositionChange, onDimensionChange, resizeHandleClassName, snapIndicatorClassName, }: ChatWindowProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatWindow = ChatWindow;
+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 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 [uncontrolledOpen, setUncontrolledOpen] = (0, react_1.useState)(defaultOpen);
+    const isOpen = open ?? uncontrolledOpen;
+    // 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 panelRef = (0, react_1.useRef)(null);
+    const { position, size, isDragging, isResizing, activeEdge, isNearSnapZone, nearEdge, handlers, } = (0, use_drag_resize_panel_js_1.useDragResizePanel)({
+        panelRef,
+        width,
+        height,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        initialPosition,
+        snapToCenter,
+        snapRadius,
+        edgeThreshold,
+        persistDimensions,
+        draggable,
+        resizable,
+    });
+    // ---------------------------------------------------------------------------
+    // Notify position/dimension changes
+    // ---------------------------------------------------------------------------
+    (0, react_1.useEffect)(() => {
+        onPositionChange?.(position);
+    }, [position, onPositionChange]);
+    (0, react_1.useEffect)(() => {
+        onDimensionChange?.(size);
+    }, [size, onDimensionChange]);
+    // ---------------------------------------------------------------------------
+    // Open/close
+    // ---------------------------------------------------------------------------
+    const updateOpen = (0, react_1.useCallback)((nextOpen) => {
+        if (open === undefined) {
+            setUncontrolledOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+    }, [onOpenChange, open]);
+    const handleClose = (0, react_1.useCallback)(() => updateOpen(false), [updateOpen]);
+    if (!isOpen)
+        return null;
+    // ---------------------------------------------------------------------------
+    // Position style — always use translate(-50%, 0) so x means "center"
+    // ---------------------------------------------------------------------------
+    const positionStyle = position !== null
+        ? { position: 'fixed', left: position.x, top: position.y, transform: 'translate(-50%, 0)' }
+        : { position: 'fixed', left: '50%', bottom: 16, transform: 'translate(-50%, 0)' };
+    // ---------------------------------------------------------------------------
+    // Header rendering
+    // ---------------------------------------------------------------------------
+    let headerContent;
+    if (renderHeader) {
+        headerContent = renderHeader({
+            onClose: handleClose,
+            isDragging,
+            onDragStart: handlers.onDragStart,
+            onDoubleClick: handlers.onDoubleClickHeader,
+        });
+    }
+    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" })] }) })] })] })) }));
+    }
+    // ---------------------------------------------------------------------------
+    // 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 })] }));
+    if (portal && typeof document !== 'undefined') {
+        return (0, react_dom_1.createPortal)(content, document.body);
+    }
+    return content;
+}

package/dist/cjs/react/components/confirm-dialog.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+export interface ConfirmDialogProps {
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Short title — bold, first line. */
+    title: ReactNode;
+    /** Body message — descriptive, second line. Optional. */
+    message?: ReactNode;
+    /** Label for the primary/confirm button. Default: `'Confirm'`. */
+    confirmLabel?: string;
+    /** Label for the cancel button. Default: `'Cancel'`. */
+    cancelLabel?: string;
+    /**
+     * When true, the confirm button is styled with the danger color —
+     * use for destructive actions like delete.
+     */
+    destructive?: boolean;
+    /** Disable the confirm button (e.g. while async work is in flight). */
+    confirmDisabled?: boolean;
+    /** Called when the user clicks Confirm or presses Enter. */
+    onConfirm: () => void;
+    /** Called when the user clicks Cancel, backdrop, or presses Escape. */
+    onCancel: () => void;
+}
+/**
+ * Themed confirmation dialog used by the built-in delete / clear flows.
+ * Replaces `window.confirm()` so the prompt matches the widget's palette
+ * and theme. Portal'd to `document.body`, keyboard-accessible (Enter to
+ * confirm, Escape to cancel), and inherits CSS theme vars from the
+ * nearest `<AiChatProvider>`.
+ */
+export declare function ConfirmDialog({ open, title, message, confirmLabel, cancelLabel, destructive, confirmDisabled, onConfirm, onCancel, }: ConfirmDialogProps): import("react").ReactPortal | null;

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfirmDialog = ConfirmDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const chat_context_js_1 = require("../provider/chat-context.js");
+/**
+ * Themed confirmation dialog used by the built-in delete / clear flows.
+ * Replaces `window.confirm()` so the prompt matches the widget's palette
+ * and theme. Portal'd to `document.body`, keyboard-accessible (Enter to
+ * confirm, Escape to cancel), and inherits CSS theme vars from the
+ * nearest `<AiChatProvider>`.
+ */
+function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm', cancelLabel = 'Cancel', destructive = false, confirmDisabled = false, onConfirm, onCancel, }) {
+    const ctx = (0, react_1.useContext)(chat_context_js_1.ChatContext);
+    const themeVars = ctx?.themeVars ?? {};
+    const confirmBtnRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        // Focus the confirm button so Enter commits without tabbing.
+        confirmBtnRef.current?.focus();
+        const onKey = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onCancel();
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (!confirmDisabled)
+                    onConfirm();
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [open, confirmDisabled, onConfirm, onCancel]);
+    if (!open)
+        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) => {
+            // Only close when clicking the backdrop itself, not the panel
+            if (e.target === e.currentTarget)
+                onCancel();
+        }, role: "presentation", children: (0, jsx_runtime_1.jsxs)("div", { "data-component": "confirm-dialog", "data-destructive": destructive || undefined, role: "alertdialog", "aria-modal": "true", "aria-labelledby": "confirm-dialog-title", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "title", id: "confirm-dialog-title", children: title }), message && (0, jsx_runtime_1.jsx)("div", { "data-element": "message", children: message }), (0, jsx_runtime_1.jsxs)("div", { "data-element": "actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "data-element": "cancel", onClick: onCancel, children: cancelLabel }), (0, jsx_runtime_1.jsx)("button", { ref: confirmBtnRef, type: "button", "data-element": "confirm", "data-destructive": destructive || undefined, disabled: confirmDisabled, onClick: onConfirm, children: confirmLabel })] })] }) }));
+    return (0, react_dom_1.createPortal)(dialog, document.body);
+}

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

@@ -0,0 +1,90 @@
+import '../styles.css';
+import { type ReactNode } from 'react';
+import type { ChatSize } from '../types.js';
+export interface FloatingChatUIProps {
+    /** Window header title. Default: "AI Assistant" */
+    title?: string;
+    /**
+     * Controlled open state. When provided, the component becomes a
+     * controlled component and `defaultOpen` is ignored. Pair with
+     * `onOpenChange` to drive the window from external state (e.g. a
+     * trigger button elsewhere in the page).
+     */
+    open?: boolean;
+    /**
+     * Called whenever the window wants to open or close itself — from the
+     * trigger pill, the close button, the Escape key, or the keyboard
+     * shortcut. Required to fully control `open`.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the window starts open. Default: false */
+    defaultOpen?: boolean;
+    /** Window is draggable by its header. Default: true */
+    draggable?: boolean;
+    /** Window is resizable. Default: true */
+    resizable?: boolean;
+    /**
+     * Window size — a preset (`'sm' | 'md' | 'lg' | 'xl' | 'full'`) or an
+     * explicit `{ width, height }` pair. Dimensions accept numbers (px)
+     * or CSS strings like `'40vw'`, `'70vh'`, `'32rem'` — viewport units
+     * are re-resolved on window resize.
+     *
+     * Default: `'md'` (420×640).
+     *
+     * ```tsx
+     * <LangGraphAiChat size="lg" />
+     * <LangGraphAiChat size={{ width: '40vw', height: '70vh' }} />
+     * ```
+     */
+    size?: ChatSize;
+    /**
+     * Hide the floating trigger pill while the chat window is open.
+     * Default: true. Set to false to keep both visible simultaneously.
+     */
+    hideTriggerWhenOpen?: boolean;
+    /**
+     * Global keyboard shortcut that toggles the window. Use `false` to
+     * disable. Defaults to `'mod+i'` (⌘I on Mac, Ctrl+I elsewhere).
+     */
+    shortcut?: string | false;
+    /** Show the built-in clear / trash button in the header. Default: true. */
+    showClearButton?: boolean;
+    /** Ask for confirmation before clearing. Default: true. */
+    confirmClear?: boolean;
+    /**
+     * Render the built-in session switcher in the header. Default: auto —
+     * shown when the provider's `session.list/create/remove` are all defined.
+     */
+    showSessionSwitcher?: boolean | 'auto';
+    /** Replace the default header actions with a custom node. */
+    headerActions?: ReactNode;
+    /**
+     * Replace the sparkle icon on the floating trigger pill with a custom
+     * node — typically a small logo or branded SVG. Default: built-in
+     * sparkle.
+     *
+     * ```tsx
+     * <LangGraphAiChat triggerIcon={<img src="/logo.svg" width={16} height={16} />} />
+     * ```
+     */
+    triggerIcon?: ReactNode;
+    /**
+     * Show the mic button on the trigger pill. When unset, the mic auto-
+     * shows only if `voice.enabled` is true on the provider config. Set
+     * to `false` to force-hide (renders a single-icon trigger) or `true`
+     * to force-show.
+     */
+    showMic?: boolean;
+    /**
+     * Ephemeral assistant greeting shown only while the current session
+     * has no messages. Not persisted — forwarded to `AiChatPanel`. See
+     * `AiChatPanelProps.welcomeMessage`.
+     */
+    welcomeMessage?: string;
+}
+/**
+ * Floating chat UI: a fixed trigger pill + a draggable, resizable chat
+ * 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;

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

@@ -0,0 +1,163 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingChatUI = FloatingChatUI;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("../styles.css");
+const react_1 = require("react");
+const ai_trigger_button_js_1 = require("./ai-trigger-button.js");
+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_context_js_1 = require("../provider/chat-context.js");
+const use_keyboard_shortcut_js_1 = require("../hooks/use-keyboard-shortcut.js");
+// ---------------------------------------------------------------------------
+// Size resolution
+// ---------------------------------------------------------------------------
+const SIZE_PRESETS = {
+    sm: { width: 360, height: 560 },
+    md: { width: 420, height: 640 },
+    lg: { width: 520, height: 720 },
+    xl: { width: 640, height: 820 },
+};
+/**
+ * Parse a single CSS length into a pixel count. Viewport-relative units
+ * are resolved against the supplied `vw`/`vh` values (typically from
+ * `window.innerWidth/innerHeight`). Unknown units fall back to the
+ * default.
+ */
+function parseDimension(value, axis, vw, vh, fallback) {
+    if (typeof value === 'number')
+        return value;
+    const trimmed = value.trim();
+    const match = trimmed.match(/^(-?[\d.]+)(px|vw|vh|%|em|rem)?$/);
+    if (!match)
+        return fallback;
+    const n = parseFloat(match[1]);
+    const unit = (match[2] ?? 'px');
+    switch (unit) {
+        case 'vw':
+            return (vw * n) / 100;
+        case 'vh':
+            return (vh * n) / 100;
+        case '%':
+            // `%` in this context means percentage of the relevant viewport axis.
+            return ((axis === 'w' ? vw : vh) * n) / 100;
+        case 'em':
+        case 'rem':
+            return n * 16;
+        case 'px':
+        default:
+            return n;
+    }
+}
+function resolveSize(size, vw, vh) {
+    if (size === undefined) {
+        return { ...SIZE_PRESETS.md, fullscreen: false };
+    }
+    if (size === 'full') {
+        return { width: vw, height: vh, fullscreen: true };
+    }
+    if (typeof size === 'string') {
+        const preset = SIZE_PRESETS[size] ?? SIZE_PRESETS.md;
+        return { ...preset, fullscreen: false };
+    }
+    return {
+        width: parseDimension(size.width, 'w', vw, vh, SIZE_PRESETS.md.width),
+        height: parseDimension(size.height, 'h', vw, vh, SIZE_PRESETS.md.height),
+        fullscreen: false,
+    };
+}
+/**
+ * Track `window.innerWidth`/`innerHeight` with a render on resize so
+ * viewport-relative sizes (`40vw`, `70vh`, `'full'`) re-resolve as the
+ * browser window changes shape.
+ */
+function useViewportSize() {
+    const [size, setSize] = (0, react_1.useState)(() => ({
+        vw: typeof window !== 'undefined' ? window.innerWidth : 1024,
+        vh: typeof window !== 'undefined' ? window.innerHeight : 768,
+    }));
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined')
+            return;
+        const onResize = () => {
+            setSize({ vw: window.innerWidth, vh: window.innerHeight });
+        };
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+    return size;
+}
+/**
+ * Floating chat UI: a fixed trigger pill + a draggable, resizable chat
+ * 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, } = {}) {
+    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 setOpen = (0, react_1.useCallback)((next) => {
+        const resolved = typeof next === 'function'
+            ? next(open)
+            : next;
+        if (!isControlled)
+            setUncontrolledOpen(resolved);
+        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)('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.
+    const hasConsumerTitle = title !== undefined;
+    const resolvedTitle = title ?? locale.chatTitle;
+    const switcherIsOn = showSessionSwitcher === true ||
+        (showSessionSwitcher === 'auto' && sessionsSupported);
+    // When both a consumer title AND a session switcher exist, the title
+    // holds the main header slot and the switcher moves into the actions
+    // strip so they don't fight for the same real estate.
+    const renderSwitcherInActions = hasConsumerTitle && switcherIsOn;
+    // 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 }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Header sub-components — must live inside the provider so they can read
+// the chat context (clear(), sessions, etc).
+// ---------------------------------------------------------------------------
+function FloatingHeaderTitle({ fallback, showSessionSwitcher, className, }) {
+    const ctx = (0, chat_context_js_1.useChatContext)();
+    const shouldShow = showSessionSwitcher === true ||
+        (showSessionSwitcher === 'auto' && ctx.sessionsSupported);
+    if (!shouldShow) {
+        return (0, jsx_runtime_1.jsx)("strong", { "data-element": "title", children: fallback });
+    }
+    return (0, jsx_runtime_1.jsx)(session_switcher_js_1.SessionSwitcher, { fallbackTitle: fallback, className: className });
+}
+function FloatingHeaderActions({ showClearButton, confirmClear, }) {
+    const { clear, messages, locale } = (0, chat_context_js_1.useChatContext)();
+    const [confirmOpen, setConfirmOpen] = (0, react_1.useState)(false);
+    if (!showClearButton)
+        return null;
+    const disabled = messages.length === 0;
+    const onClick = () => {
+        if (disabled)
+            return;
+        if (confirmClear) {
+            setConfirmOpen(true);
+            return;
+        }
+        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: () => {
+                    setConfirmOpen(false);
+                    clear();
+                }, onCancel: () => setConfirmOpen(false) })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { MentionChipProps, MentionChipListProps } from '../types.js';
+/**
+ * Inline mention chip for displaying referenced entities.
+ *
+ * Renders with data-attributes for styling by the host app:
+ * - `data-component="mention-chip"`
+ * - `data-mention-type` — the mention type (task, person, group, command, etc.)
+ * - `data-size` — "inline" | "compact" | "default"
+ *
+ * Sub-elements: icon, prefix, display-name, remove button.
+ */
+export declare function MentionChip({ mention, onRemove, className, compact, inline, }: MentionChipProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * List of mention chips wrapped in a container.
+ */
+export declare function MentionChipList({ mentions, onRemove, className, }: MentionChipListProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/react/components/mention-chip.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MentionChip = MentionChip;
+exports.MentionChipList = MentionChipList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Inline mention chip for displaying referenced entities.
+ *
+ * Renders with data-attributes for styling by the host app:
+ * - `data-component="mention-chip"`
+ * - `data-mention-type` — the mention type (task, person, group, command, etc.)
+ * - `data-size` — "inline" | "compact" | "default"
+ *
+ * Sub-elements: icon, prefix, display-name, remove button.
+ */
+function MentionChip({ mention, onRemove, className, compact = false, inline = false, }) {
+    const size = inline ? 'inline' : compact ? 'compact' : 'default';
+    const prefix = mention.prefix ?? (mention.type === 'task' || mention.type === 'command' ? '/' : '@');
+    return ((0, jsx_runtime_1.jsxs)("span", { className: className, "data-component": "mention-chip", "data-mention-type": mention.type, "data-size": size, children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "icon" }), (0, jsx_runtime_1.jsxs)("span", { "data-element": "display-name", children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "prefix", children: prefix }), mention.displayName] }), onRemove && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onRemove();
+                }, "data-action": "remove", children: ['\u00D7', (0, jsx_runtime_1.jsx)("span", { style: {
+                            position: 'absolute',
+                            width: 1,
+                            height: 1,
+                            padding: 0,
+                            margin: -1,
+                            overflow: 'hidden',
+                            clip: 'rect(0,0,0,0)',
+                            whiteSpace: 'nowrap',
+                            borderWidth: 0,
+                        }, children: "Remove" })] }))] }));
+}
+/**
+ * List of mention chips wrapped in a container.
+ */
+function MentionChipList({ mentions, onRemove, className, }) {
+    if (mentions.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, "data-component": "mention-chip-list", children: mentions.map((mention) => ((0, jsx_runtime_1.jsx)(MentionChip, { mention: mention, onRemove: onRemove ? () => onRemove(mention.id) : undefined }, mention.id))) }));
+}

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

@@ -0,0 +1,8 @@
+import type { MentionInputProps } from '../types.js';
+/**
+ * Chat input with mention autocomplete support.
+ *
+ * Uses `RichMentionInput` for editing, provides autocomplete for `@` and `/`,
+ * and keeps selected mentions in provider state for serialization on send.
+ */
+export declare function MentionInput({ className, onSubmit }: MentionInputProps): import("react/jsx-runtime").JSX.Element;