glirastes 0.3.2 → 0.5.0

package/dist/cjs/react/assistant/assistant-shell.d.ts

@@ -0,0 +1,132 @@
+import '../styles.css';
+import { type CSSProperties, type ReactNode } from 'react';
+import { type ChatShortcutMap } from '../hooks/use-chat-shortcuts.js';
+/** A built-in button of the shell, for `renderButton`. */
+export type AssistantShellAction = 'bubble' | 'toggle' | 'detach' | 'dock' | 'collapse' | 'clear' | 'close';
+export interface AssistantShellButtonProps {
+    action: AssistantShellAction;
+    /** Accessible name. */
+    label: string;
+    /** Tooltip, with the shortcut where there is one. */
+    title: string;
+    pressed?: boolean;
+    onClick(): void;
+    /** The icon, plus the visible label for `toggle`. */
+    children: ReactNode;
+    className?: string;
+}
+export interface AssistantShellIcons {
+    assistant: ReactNode;
+    detach: ReactNode;
+    dock: ReactNode;
+    collapse: ReactNode;
+    clear: ReactNode;
+    close: ReactNode;
+}
+export interface AssistantShellLabels {
+    /** Name of the assistant: landmark, bubble and the collapsed rail. */
+    title: string;
+    /** Label of `AssistantToggle`. */
+    toggle: string;
+    expand: string;
+    collapse: string;
+    detach: string;
+    dock: string;
+    clear: string;
+    close: string;
+    resize: string;
+    /** Accessible name of the draggable header of the detached window. */
+    windowHeader: string;
+}
+export interface AssistantShellClassNames {
+    root: string;
+    sidebar: string;
+    floating: string;
+    header: string;
+    body: string;
+    button: string;
+    bubble: string;
+    toggle: string;
+    rail: string;
+    railExpand: string;
+    resizeHandle: string;
+    windowHandle: string;
+}
+export declare const DEFAULT_ASSISTANT_SHELL_LABELS: AssistantShellLabels;
+export declare const DE_ASSISTANT_SHELL_LABELS: AssistantShellLabels;
+/** The built-in labels for the language of the page; an app's own `labels` still override them. */
+export declare function assistantShellLabelsFor(language: string | null | undefined): AssistantShellLabels;
+export declare const DEFAULT_ASSISTANT_SHELL_ICONS: AssistantShellIcons;
+export interface AssistantShellWindowOptions {
+    /** Default: the sidebar width. */
+    width?: number;
+    /** Default: 600, at most the viewport height minus 88. */
+    height?: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    /** Gap to the right and bottom edge where the window first opens. Default: 16 and 72. */
+    right?: number;
+    bottom?: number;
+    /** localStorage key for position and size; `null` keeps them in memory. Default: `glirastes:assistant-window:v1`. */
+    storageKey?: string | null;
+}
+export interface AssistantShellProps {
+    /** The conversation, usually an `AiChatPanel` or the app's own chat. */
+    children: ReactNode;
+    /** Before the title, e.g. the app's navigation button on phones. */
+    headerStart?: ReactNode;
+    /** Replaces the plain title, e.g. with a session switcher. */
+    headerTitle?: ReactNode;
+    /** Extra buttons before the built-in ones. */
+    headerActions?: ReactNode;
+    icons?: Partial<AssistantShellIcons>;
+    labels?: Partial<AssistantShellLabels>;
+    classNames?: Partial<AssistantShellClassNames>;
+    style?: CSSProperties;
+    /** Render every built-in button with the app's own button component. */
+    renderButton?: (props: AssistantShellButtonProps) => ReactNode;
+    /** Round button bottom right that opens the detached window. Default: true. */
+    showBubble?: boolean;
+    showClearButton?: boolean;
+    /** Default: `clear()` of the surrounding chat provider. */
+    onClear?: () => void;
+    /** Handler of the new-chat shortcut. Default: a new chat when the chat keeps several, otherwise the shortcut stays off. */
+    onNewChat?: () => void;
+    /** The app's own key combinations; see `DEFAULT_CHAT_SHORTCUTS`. */
+    shortcuts?: ChatShortcutMap;
+    /** Return true to let a key press pass, e.g. while a dialog owns the keyboard. */
+    shouldIgnoreShortcut?: (event: KeyboardEvent) => boolean;
+    window?: AssistantShellWindowOptions;
+    /**
+     * Sibling of the shell that holds the page. On narrow screens the docked
+     * assistant hides it and takes the whole row. Default: `[data-assistant-main]`.
+     */
+    mainSelector?: string;
+    /** CSS custom property on `<html>` with the width the docked assistant covers; `false` sets none. */
+    insetProperty?: string | false;
+    /** Remaining row width below which the docked assistant fills the row. Default: 840. */
+    narrowWidth?: number;
+    /** Width of the collapsed rail. Default: 44. */
+    railWidth?: number;
+}
+/** Opens and closes the assistant, e.g. from the app's top bar. */
+export declare function AssistantToggle({ icon, label, className, showLabel, renderButton }: {
+    icon?: ReactNode;
+    label?: string;
+    className?: string;
+    /** Visible text next to the icon. Default: true. */
+    showLabel?: boolean;
+    renderButton?: (props: AssistantShellButtonProps) => ReactNode;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+/**
+ * The assistant as a right sidebar that takes its share of the page row,
+ * or as a detached window that is moved by its header and resized from
+ * every edge. Layout, width and window position persist. Place it as the
+ * last child of the row that holds the page (`[data-assistant-main]`),
+ * inside an `AssistantLayoutProvider`. Every icon, label, class and button
+ * can be replaced; the shipped look follows the chat theme and switches
+ * off with the provider's `unstyled`.
+ */
+export declare function AssistantShell({ children, headerStart, headerTitle, headerActions, icons: iconOverrides, labels: labelOverrides, classNames, style, renderButton, showBubble, showClearButton, onClear, onNewChat, shortcuts: shortcutOverrides, shouldIgnoreShortcut, window: windowOptions, mainSelector, insetProperty, narrowWidth, railWidth, }: AssistantShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/assistant/assistant-shell.js

@@ -0,0 +1,267 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_ASSISTANT_SHELL_ICONS = exports.DE_ASSISTANT_SHELL_LABELS = exports.DEFAULT_ASSISTANT_SHELL_LABELS = void 0;
+exports.assistantShellLabelsFor = assistantShellLabelsFor;
+exports.AssistantToggle = AssistantToggle;
+exports.AssistantShell = AssistantShell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("../styles.css");
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const use_chat_shortcuts_js_1 = require("../hooks/use-chat-shortcuts.js");
+const use_floating_panel_js_1 = require("../hooks/use-floating-panel.js");
+const tool_presentation_js_1 = require("../utils/tool-presentation.js");
+const session_switcher_js_1 = require("../components/session-switcher.js");
+const assistant_layout_js_1 = require("./assistant-layout.js");
+exports.DEFAULT_ASSISTANT_SHELL_LABELS = Object.freeze({
+    title: 'AI assistant',
+    toggle: 'Ask AI',
+    expand: 'Expand AI assistant',
+    collapse: 'Collapse',
+    detach: 'Detach as window',
+    dock: 'Dock right',
+    clear: 'Clear chat',
+    close: 'Close',
+    resize: 'AI assistant width',
+    windowHeader: 'Chat window: arrow keys move, Alt and arrow keys resize, double click resets',
+});
+exports.DE_ASSISTANT_SHELL_LABELS = Object.freeze({
+    title: 'KI-Assistent',
+    toggle: 'KI fragen',
+    expand: 'KI-Assistent ausklappen',
+    collapse: 'Einklappen',
+    detach: 'Als Fenster lösen',
+    dock: 'Rechts andocken',
+    clear: 'Chatverlauf löschen',
+    close: 'Schließen',
+    resize: 'Breite des KI-Assistenten',
+    windowHeader: 'Chatfenster: Pfeiltasten verschieben, Alt und Pfeiltasten ändern die Größe, Doppelklick setzt zurück',
+});
+/** The built-in labels for the language of the page; an app's own `labels` still override them. */
+function assistantShellLabelsFor(language) {
+    return (0, tool_presentation_js_1.isGerman)(language) ? exports.DE_ASSISTANT_SHELL_LABELS : exports.DEFAULT_ASSISTANT_SHELL_LABELS;
+}
+const svg = (children) => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: children }));
+exports.DEFAULT_ASSISTANT_SHELL_ICONS = {
+    assistant: svg((0, jsx_runtime_1.jsx)("path", { d: "M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z" })),
+    detach: svg((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M15 3h6v6" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 14 21 3" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })] })),
+    dock: svg((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 3v18" })] })),
+    collapse: svg((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 3v18" }), (0, jsx_runtime_1.jsx)("path", { d: "m8 9 3 3-3 3" })] })),
+    clear: svg((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 6h18" }), (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: "M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" })] })),
+    close: svg((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M18 6 6 18" }), (0, jsx_runtime_1.jsx)("path", { d: "m6 6 12 12" })] })),
+};
+const WINDOW_EDGES = ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'];
+const EDGE_CURSOR = { n: 'ns-resize', s: 'ns-resize', e: 'ew-resize', w: 'ew-resize', ne: 'nesw-resize', sw: 'nesw-resize', nw: 'nwse-resize', se: 'nwse-resize' };
+/** Inline, so the handles work in unstyled mode too. Edges leave the corners free. */
+function edgeStyle(edge) {
+    const style = { position: 'absolute', zIndex: 2, touchAction: 'none', cursor: EDGE_CURSOR[edge] };
+    if (edge === 'n' || edge === 's')
+        Object.assign(style, { left: 12, right: 12, height: 8 });
+    else if (edge === 'e' || edge === 'w')
+        Object.assign(style, { top: 12, bottom: 12, width: 8 });
+    else
+        Object.assign(style, { width: 16, height: 16 });
+    if (edge.includes('n'))
+        style.top = -4;
+    if (edge.includes('s'))
+        style.bottom = -4;
+    if (edge.includes('e'))
+        style.right = -4;
+    if (edge.includes('w'))
+        style.left = -4;
+    return style;
+}
+const withShortcut = (label, combo) => combo ? `${label} (${(0, use_chat_shortcuts_js_1.formatShortcut)(combo)})` : label;
+const cx = (...names) => names.filter(Boolean).join(' ') || undefined;
+function defaultButton(unstyled) {
+    return function DefaultButton({ action, label, title, pressed, onClick, children, className }) {
+        // Bubble and toggle live outside the shell, so they carry their own component name and styling switch.
+        const standalone = action === 'bubble' || action === 'toggle';
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-component": standalone ? `assistant-${action}` : undefined, "data-action": standalone ? undefined : action, "data-unstyled": (standalone && unstyled) || undefined, className: className, "aria-label": label, title: title, "aria-pressed": pressed, onClick: onClick, children: children }));
+    };
+}
+/** Opens and closes the assistant, e.g. from the app's top bar. */
+function AssistantToggle({ icon, label, className, showLabel = true, renderButton }) {
+    const layout = (0, assistant_layout_js_1.useAssistantLayout)();
+    const unstyled = (0, react_1.useContext)(chat_context_js_1.ChatContext)?.unstyled;
+    const text = label ?? assistantShellLabelsFor((0, tool_presentation_js_1.usePageLanguage)()).toggle;
+    return (renderButton ?? defaultButton(unstyled))({
+        action: 'toggle', label: text, title: text, pressed: layout.open, onClick: layout.toggleChat, className,
+        children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon ?? exports.DEFAULT_ASSISTANT_SHELL_ICONS.assistant, showLabel && (0, jsx_runtime_1.jsx)("span", { "data-element": "label", children: text })] }),
+    });
+}
+/** Sidebar width handle; the gesture writes to the DOM and commits once at the end. */
+function SidebarResizeHandle({ label, width, min, max, defaultWidth, className, onCommit, onPreview }) {
+    const cleanup = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => () => cleanup.current?.(), []);
+    const clamp = (value) => Math.max(min, Math.min(max, value));
+    return (0, jsx_runtime_1.jsx)("div", { role: "separator", tabIndex: 0, "aria-label": label, "aria-orientation": "vertical", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": width, "data-component": "assistant-shell-resize", className: className, 
+        // An app class owns the handle completely; without one it is placed inline, also when unstyled.
+        style: className ? undefined : { position: 'absolute', top: 0, bottom: 0, left: -4, width: 8, zIndex: 2, cursor: 'col-resize', touchAction: 'none' }, onDoubleClick: () => onCommit(defaultWidth), onKeyDown: event => {
+            if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+                return;
+            event.preventDefault();
+            onCommit(event.key === 'Home' ? min : event.key === 'End' ? max : clamp(width + (event.key === 'ArrowLeft' ? 20 : -20)));
+        }, onPointerDown: event => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            cleanup.current?.();
+            const handle = event.currentTarget;
+            const startX = event.clientX;
+            let next = width, frame = 0;
+            const cursor = document.body.style.cursor, selection = document.body.style.userSelect;
+            document.body.style.cursor = 'col-resize';
+            document.body.style.userSelect = 'none';
+            document.body.dataset.panelResizing = 'true';
+            handle.dataset.dragging = 'true';
+            const move = (e) => {
+                next = clamp(width + startX - e.clientX);
+                if (!frame)
+                    frame = requestAnimationFrame(() => { frame = 0; onPreview(next); handle.setAttribute('aria-valuenow', String(next)); });
+            };
+            const finish = () => {
+                cancelAnimationFrame(frame);
+                delete handle.dataset.dragging;
+                delete document.body.dataset.panelResizing;
+                document.body.style.cursor = cursor;
+                document.body.style.userSelect = selection;
+                window.removeEventListener('pointermove', move);
+                window.removeEventListener('pointerup', finish);
+                window.removeEventListener('pointercancel', finish);
+                window.removeEventListener('blur', finish);
+                cleanup.current = null;
+                onPreview(next);
+                onCommit(next);
+            };
+            cleanup.current = finish;
+            window.addEventListener('pointermove', move);
+            window.addEventListener('pointerup', finish);
+            window.addEventListener('pointercancel', finish);
+            window.addEventListener('blur', finish);
+        } });
+}
+/**
+ * The assistant as a right sidebar that takes its share of the page row,
+ * or as a detached window that is moved by its header and resized from
+ * every edge. Layout, width and window position persist. Place it as the
+ * last child of the row that holds the page (`[data-assistant-main]`),
+ * inside an `AssistantLayoutProvider`. Every icon, label, class and button
+ * can be replaced; the shipped look follows the chat theme and switches
+ * off with the provider's `unstyled`.
+ */
+function AssistantShell({ children, headerStart, headerTitle, headerActions, icons: iconOverrides, labels: labelOverrides, classNames = {}, style, renderButton, showBubble = true, showClearButton = true, onClear, onNewChat, shortcuts: shortcutOverrides, shouldIgnoreShortcut, window: windowOptions = {}, mainSelector = '[data-assistant-main]', insetProperty = '--assistant-right-inset', narrowWidth = 840, railWidth = 44, }) {
+    const ui = (0, assistant_layout_js_1.useAssistantLayout)();
+    const chat = (0, react_1.useContext)(chat_context_js_1.ChatContext);
+    const icons = { ...exports.DEFAULT_ASSISTANT_SHELL_ICONS, ...iconOverrides };
+    const labels = { ...assistantShellLabelsFor((0, tool_presentation_js_1.usePageLanguage)()), ...labelOverrides };
+    const sessionsSupported = (0, react_1.useContext)(chat_context_js_1.ChatContext)?.sessionsSupported === true;
+    const render = renderButton ?? defaultButton(chat?.unstyled);
+    const button = (props) => render({ ...props, className: props.action === 'bubble' ? classNames.bubble : classNames.button });
+    const { minWidth, maxWidth, defaultWidth } = ui.limits;
+    const [available, setAvailable] = (0, react_1.useState)(maxWidth);
+    const [narrow, setNarrow] = (0, react_1.useState)(false);
+    const sidebar = ui.mode === 'sidebar';
+    const width = Math.min(ui.width, available);
+    const floatingWidth = windowOptions.width ?? ui.width;
+    const floatingHeight = windowOptions.height ?? 600;
+    const right = windowOptions.right ?? 16;
+    const bottom = windowOptions.bottom ?? 72;
+    const { ref: shell, style: windowStyle, dragHandleProps, getResizeHandleProps } = (0, use_floating_panel_js_1.useFloatingPanel)({
+        enabled: ui.open && !sidebar,
+        defaultRect: (0, react_1.useCallback)(() => {
+            const height = Math.min(floatingHeight, window.innerHeight - 88);
+            return { width: floatingWidth, height, x: window.innerWidth - floatingWidth - right, y: window.innerHeight - height - bottom };
+        }, [floatingWidth, floatingHeight, right, bottom]),
+        minWidth: windowOptions.minWidth ?? 320,
+        minHeight: windowOptions.minHeight ?? 320,
+        maxWidth: windowOptions.maxWidth ?? 960,
+        maxHeight: windowOptions.maxHeight ?? 1200,
+        storageKey: windowOptions.storageKey === null ? undefined : windowOptions.storageKey ?? 'glirastes:assistant-window:v1',
+    });
+    // On narrow screens the main area is hidden, so the panel takes its whole row.
+    const fillsRow = sidebar && narrow && !ui.collapsed;
+    const inset = ui.open && sidebar ? ui.collapsed ? railWidth : fillsRow ? 0 : width : 0;
+    (0, react_1.useEffect)(() => {
+        const measure = () => {
+            const row = shell.current?.parentElement;
+            const main = row?.querySelector(mainSelector);
+            const rowWidth = row?.clientWidth || window.innerWidth;
+            const siblings = row ? Array.from(row.children) : [];
+            const leftWidth = main ? siblings.slice(0, siblings.indexOf(main)).reduce((sum, element) => sum + (getComputedStyle(element).position === 'fixed' ? 0 : element.getBoundingClientRect().width), 0) : 0;
+            const remaining = rowWidth - leftWidth;
+            setNarrow(remaining < narrowWidth);
+            setAvailable(Math.max(minWidth, Math.min(maxWidth, remaining)));
+        };
+        measure();
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
+        if (shell.current?.parentElement)
+            observer?.observe(shell.current.parentElement);
+        const main = shell.current?.parentElement?.querySelector(mainSelector);
+        if (main)
+            observer?.observe(main);
+        window.addEventListener('resize', measure);
+        return () => { observer?.disconnect(); window.removeEventListener('resize', measure); };
+    }, [shell, mainSelector, narrowWidth, minWidth, maxWidth]);
+    (0, react_1.useEffect)(() => {
+        if (insetProperty)
+            document.documentElement.style.setProperty(insetProperty, `${inset}px`);
+        const main = shell.current?.parentElement?.querySelector(mainSelector);
+        // On phones the docked assistant uses the whole row rather than a tiny slice of it.
+        if (main)
+            main.hidden = Boolean(narrow && sidebar && ui.open && !ui.collapsed);
+        return () => { if (insetProperty)
+            document.documentElement.style.removeProperty(insetProperty); if (main)
+            main.hidden = false; };
+    }, [inset, narrow, sidebar, ui.open, ui.collapsed, shell, mainSelector, insetProperty]);
+    const focusComposer = (0, react_1.useCallback)(() => {
+        const composer = shell.current?.querySelector('[contenteditable="true"],[contenteditable=""],textarea');
+        (composer ?? shell.current?.querySelector('button'))?.focus();
+    }, [shell]);
+    (0, react_1.useEffect)(() => {
+        if (!ui.open)
+            return;
+        const previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const frame = requestAnimationFrame(() => {
+            if (!ui.collapsed || ui.mode === 'floating')
+                focusComposer();
+            else
+                shell.current?.querySelector('button')?.focus();
+        });
+        return () => { cancelAnimationFrame(frame); if (previous?.isConnected)
+            previous.focus(); };
+    }, [ui.open, ui.collapsed, ui.mode, focusComposer, shell]);
+    // A chat that keeps several conversations starts a new one by itself.
+    const newChat = onNewChat ?? (sessionsSupported && chat?.createSession ? () => { void chat.createSession(); } : undefined);
+    const shortcuts = (0, use_chat_shortcuts_js_1.useChatShortcuts)({
+        toggle: ui.toggleChat,
+        toggleLayout: () => { if (ui.open)
+            ui.setMode(sidebar ? 'floating' : 'sidebar'); },
+        toggleCollapse: () => { if (ui.open && sidebar)
+            ui.toggleCollapsed(); },
+        ...(newChat ? { newChat: () => { ui.openChat(); newChat(); } } : {}),
+        focusInput: () => { ui.openChat(); focusComposer(); requestAnimationFrame(focusComposer); },
+    }, { shortcuts: shortcutOverrides, shouldIgnore: shouldIgnoreShortcut });
+    const clear = onClear ?? chat?.clear;
+    const placement = sidebar
+        ? (fillsRow ? { flex: '1 1 0%', minWidth: 0 } : { width: ui.collapsed ? railWidth : width })
+        // Before the window is measured it opens bottom right, as it will afterwards.
+        : windowStyle ?? { position: 'fixed', width: floatingWidth, height: floatingHeight, right: `min(${right}px, max(0px, calc((100vw - 500px) / 2)))`, bottom };
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!sidebar && showBubble && button({ action: 'bubble', label: labels.title, title: withShortcut(labels.title, shortcuts.toggle), pressed: ui.open, onClick: ui.toggleChat, children: icons.assistant }), (0, jsx_runtime_1.jsxs)("aside", { ref: shell, "aria-label": labels.title, "data-component": "assistant-shell", "data-assistant-shell": true, "data-mode": ui.mode, "data-collapsed": (sidebar && ui.collapsed) || undefined, "data-unstyled": chat?.unstyled || undefined, className: cx(classNames.root, sidebar ? classNames.sidebar : classNames.floating), style: {
+                    ...chat?.themeVars, ...style,
+                    display: ui.open ? 'flex' : 'none', flexDirection: 'column', maxWidth: '100vw',
+                    ...(sidebar ? { position: 'relative', flexShrink: 0, height: '100%', maxHeight: '100%' } : { position: 'fixed', maxHeight: '100dvh' }),
+                    ...placement,
+                }, children: [sidebar && !ui.collapsed && !fillsRow && (0, jsx_runtime_1.jsx)(SidebarResizeHandle, { label: labels.resize, width: width, min: minWidth, max: maxWidth, defaultWidth: defaultWidth, className: classNames.resizeHandle, onCommit: ui.setWidth, onPreview: value => {
+                            if (shell.current)
+                                shell.current.style.width = `${value}px`;
+                            if (insetProperty)
+                                document.documentElement.style.setProperty(insetProperty, `${value}px`);
+                        } }), !sidebar && WINDOW_EDGES.map(edge => (0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, "data-component": "assistant-shell-window-handle", className: classNames.windowHandle, style: edgeStyle(edge), ...getResizeHandleProps(edge) }, edge)), sidebar && ui.collapsed && (0, jsx_runtime_1.jsxs)("div", { "data-element": "rail", className: classNames.rail, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "data-action": "expand", className: classNames.railExpand, "aria-label": labels.expand, title: withShortcut(labels.expand, shortcuts.toggleCollapse), onClick: () => ui.setCollapsed(false), children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "icon", children: icons.assistant }), (0, jsx_runtime_1.jsx)("span", { "data-element": "rail-title", style: { writingMode: 'vertical-rl' }, children: labels.title })] }), button({ action: 'close', label: labels.close, title: labels.close, onClick: ui.closeChat, children: icons.close })] }), (0, jsx_runtime_1.jsxs)("div", { "data-element": "frame", style: { display: sidebar && ui.collapsed ? 'none' : 'flex', flexDirection: 'column', flex: '1 1 0%', minHeight: 0 }, children: [(0, jsx_runtime_1.jsxs)("header", { "data-element": "header", className: classNames.header, style: sidebar ? undefined : { cursor: 'grab', touchAction: 'none' }, ...(sidebar ? {} : { tabIndex: 0, 'aria-label': labels.windowHeader, ...dragHandleProps }), children: [headerStart, (0, jsx_runtime_1.jsx)("span", { "data-element": "icon", children: icons.assistant }), headerTitle ?? (sessionsSupported
+                                        // A chat that keeps several conversations lists them where the title would be.
+                                        ? (0, jsx_runtime_1.jsx)(session_switcher_js_1.SessionSwitcher, { fallbackTitle: labels.title })
+                                        : (0, jsx_runtime_1.jsx)("span", { "data-element": "title", children: labels.title })), headerActions, sidebar && button({ action: 'detach', label: labels.detach, title: withShortcut(labels.detach, shortcuts.toggleLayout), onClick: () => ui.setMode('floating'), children: icons.detach }), showClearButton && clear && button({ action: 'clear', label: labels.clear, title: labels.clear, onClick: clear, children: icons.clear }), sidebar
+                                        ? button({ action: 'collapse', label: labels.collapse, title: withShortcut(labels.collapse, shortcuts.toggleCollapse), onClick: () => ui.setCollapsed(true), children: icons.collapse })
+                                        : button({ action: 'dock', label: labels.dock, title: withShortcut(labels.dock, shortcuts.toggleLayout), onClick: () => ui.setMode('sidebar'), children: icons.dock }), button({ action: 'close', label: labels.close, title: withShortcut(labels.close, shortcuts.toggle), onClick: ui.closeChat, children: icons.close })] }), (0, jsx_runtime_1.jsx)("div", { "data-element": "body", className: classNames.body, style: { display: 'flex', flexDirection: 'column', flex: '1 1 0%', minHeight: 0 }, children: children })] })] })] });
+}

package/dist/cjs/react/assistant/assistant-shortcut-list.d.ts

@@ -0,0 +1,24 @@
+import { type ChatShortcutAction, type ChatShortcutMap } from '../hooks/use-chat-shortcuts.js';
+export type AssistantShortcutLabels = Record<ChatShortcutAction, string>;
+export declare const DEFAULT_ASSISTANT_SHORTCUT_LABELS: AssistantShortcutLabels;
+export declare const DE_ASSISTANT_SHORTCUT_LABELS: AssistantShortcutLabels;
+export interface AssistantShortcutEntry {
+    action: ChatShortcutAction;
+    /** The combination as configured, such as `mod+i`. */
+    combo: string;
+    /** The combination for display: `⌘I` on Apple platforms, `Ctrl+I` elsewhere. */
+    keys: string;
+    label: string;
+}
+export interface AssistantShortcutListOptions {
+    /** The same overrides the app passes to the assistant. */
+    shortcuts?: ChatShortcutMap;
+    /** Page language; German pages get the German labels. */
+    language?: string | null;
+    labels?: Partial<AssistantShortcutLabels>;
+}
+/**
+ * The assistant's active shortcuts with their labels, in a fixed order, for
+ * an app's shortcut overview or help dialog. Switched-off actions are left out.
+ */
+export declare function assistantShortcutList(options?: AssistantShortcutListOptions): AssistantShortcutEntry[];

package/dist/cjs/react/assistant/assistant-shortcut-list.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DE_ASSISTANT_SHORTCUT_LABELS = exports.DEFAULT_ASSISTANT_SHORTCUT_LABELS = void 0;
+exports.assistantShortcutList = assistantShortcutList;
+const use_chat_shortcuts_js_1 = require("../hooks/use-chat-shortcuts.js");
+const tool_presentation_js_1 = require("../utils/tool-presentation.js");
+exports.DEFAULT_ASSISTANT_SHORTCUT_LABELS = Object.freeze({
+    toggle: 'Open or close the assistant',
+    toggleLayout: 'Dock or detach',
+    toggleCollapse: 'Collapse or expand',
+    newChat: 'New chat',
+    focusInput: 'Focus the input',
+    close: 'Close the assistant',
+});
+exports.DE_ASSISTANT_SHORTCUT_LABELS = Object.freeze({
+    toggle: 'Assistent öffnen oder schließen',
+    toggleLayout: 'Andocken oder ablösen',
+    toggleCollapse: 'Ein- oder ausklappen',
+    newChat: 'Neuer Chat',
+    focusInput: 'Eingabefeld fokussieren',
+    close: 'Assistent schließen',
+});
+const ORDER = ['toggle', 'toggleLayout', 'toggleCollapse', 'newChat', 'focusInput', 'close'];
+/**
+ * The assistant's active shortcuts with their labels, in a fixed order, for
+ * an app's shortcut overview or help dialog. Switched-off actions are left out.
+ */
+function assistantShortcutList(options = {}) {
+    const combos = (0, use_chat_shortcuts_js_1.resolveChatShortcuts)(options.shortcuts);
+    const labels = { ...((0, tool_presentation_js_1.isGerman)(options.language) ? exports.DE_ASSISTANT_SHORTCUT_LABELS : exports.DEFAULT_ASSISTANT_SHORTCUT_LABELS), ...options.labels };
+    return ORDER.flatMap((action) => {
+        const combo = combos[action];
+        return combo ? [{ action, combo, keys: (0, use_chat_shortcuts_js_1.formatShortcut)(combo), label: labels[action] }] : [];
+    });
+}

package/dist/cjs/react/assistant/assistant-workspace.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import { type AssistantLayoutProviderProps } from './assistant-layout.js';
+import { type AssistantShellProps } from './assistant-shell.js';
+export interface AssistantWorkspaceProps extends Omit<AssistantShellProps, 'children' | 'mainSelector'>, Omit<AssistantLayoutProviderProps, 'children'> {
+    /** The page. Put an `AssistantToggle` wherever it belongs, e.g. in the top bar. */
+    children: ReactNode;
+    /** The conversation, usually `<AiChatPanel />`. */
+    chat: ReactNode;
+    /** Class of the row that holds page and docked assistant. It fills its parent by default. */
+    className?: string;
+    /** Class of the page area next to the assistant. */
+    mainClassName?: string;
+}
+/**
+ * The assistant in one component: the page, and next to it the chat docked
+ * on the right or detached as a window, with layout, width and position
+ * remembered. Wrap the app's content in it inside the chat provider:
+ *
+ *   <AiChatProvider ...>
+ *     <AssistantWorkspace chat={<AiChatPanel />}>
+ *       <header>… <AssistantToggle /></header>
+ *       <main>…</main>
+ *     </AssistantWorkspace>
+ *   </AiChatProvider>
+ *
+ * Every option of `AssistantShell` (icons, labels, classNames, renderButton,
+ * header slots, shortcuts, window) and of `AssistantLayoutProvider`
+ * (storageKey, defaultMode, widths) can be given here. An app that already
+ * has an `AssistantLayoutProvider` higher up keeps using that one.
+ */
+export declare function AssistantWorkspace({ children, chat, className, mainClassName, storageKey, minWidth, maxWidth, defaultWidth, defaultMode, ...shell }: AssistantWorkspaceProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/assistant/assistant-workspace.js

@@ -0,0 +1,33 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssistantWorkspace = AssistantWorkspace;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const assistant_layout_js_1 = require("./assistant-layout.js");
+const assistant_shell_js_1 = require("./assistant-shell.js");
+const ROW = { display: 'flex', width: '100%', height: '100%', minHeight: 0 };
+const MAIN = { flex: '1 1 0%', minWidth: 0, minHeight: 0, overflow: 'auto' };
+/**
+ * The assistant in one component: the page, and next to it the chat docked
+ * on the right or detached as a window, with layout, width and position
+ * remembered. Wrap the app's content in it inside the chat provider:
+ *
+ *   <AiChatProvider ...>
+ *     <AssistantWorkspace chat={<AiChatPanel />}>
+ *       <header>… <AssistantToggle /></header>
+ *       <main>…</main>
+ *     </AssistantWorkspace>
+ *   </AiChatProvider>
+ *
+ * Every option of `AssistantShell` (icons, labels, classNames, renderButton,
+ * header slots, shortcuts, window) and of `AssistantLayoutProvider`
+ * (storageKey, defaultMode, widths) can be given here. An app that already
+ * has an `AssistantLayoutProvider` higher up keeps using that one.
+ */
+function AssistantWorkspace({ children, chat, className, mainClassName, storageKey, minWidth, maxWidth, defaultWidth, defaultMode, ...shell }) {
+    const existing = (0, assistant_layout_js_1.useOptionalAssistantLayout)();
+    const row = (0, jsx_runtime_1.jsxs)("div", { "data-component": "assistant-workspace", className: className, style: className ? undefined : ROW, children: [(0, jsx_runtime_1.jsx)("div", { "data-assistant-main": true, className: mainClassName, style: mainClassName ? undefined : MAIN, children: children }), (0, jsx_runtime_1.jsx)(assistant_shell_js_1.AssistantShell, { ...shell, children: chat })] });
+    if (existing)
+        return row;
+    return (0, jsx_runtime_1.jsx)(assistant_layout_js_1.AssistantLayoutProvider, { storageKey: storageKey, minWidth: minWidth, maxWidth: maxWidth, defaultWidth: defaultWidth, defaultMode: defaultMode, children: row });
+}

package/dist/cjs/react/completions/completion-search.d.ts

@@ -0,0 +1,21 @@
+import type { ChatCompletionProvider, CompletionPermissionContext, MentionResult } from '../types.js';
+export interface CompletionSearchOptions {
+    /** Passed to every provider; it only hides entries, the server authorizes. */
+    context?: CompletionPermissionContext;
+    /** Per-provider cap (default 8, max 20). */
+    limitPerProvider?: number;
+    /** Overall cap across providers (default 12, max 50). */
+    maxResults?: number;
+    /** A provider slower than this contributes nothing (default 3000 ms). */
+    timeoutMs?: number;
+    onProviderError?: (providerId: string, error: unknown) => void;
+}
+/** Compatible with `RichMentionInput`'s `onSearch`. */
+export type CompletionSearch = (query: string, trigger: string) => Promise<MentionResult[]>;
+/**
+ * Merges `/` and `@` providers into one async search. Item ids stay the
+ * app's ids (they reach the model through mention markers); `key` is the
+ * stable list identity `providerId:type:itemId`. A newer search aborts the older
+ * one, and a failing or slow provider never empties the others.
+ */
+export declare function createCompletionSearch(providers: ReadonlyArray<ChatCompletionProvider>, options?: CompletionSearchOptions): CompletionSearch;