glirastes 0.2.1 → 0.3.1

package/dist/cjs/react/bridges/rest-session-bridge.js

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRestSessionBridge = createRestSessionBridge;
+// ---------------------------------------------------------------------------
+// Defaults
+// ---------------------------------------------------------------------------
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function pickString(row, ...keys) {
+    for (const key of keys) {
+        const v = row[key];
+        if (typeof v === 'string')
+            return v;
+    }
+    return undefined;
+}
+function pickDate(row, ...keys) {
+    for (const key of keys) {
+        const v = row[key];
+        if (typeof v === 'string' || typeof v === 'number')
+            return v;
+    }
+    return undefined;
+}
+function pickNumber(row, ...keys) {
+    for (const key of keys) {
+        const v = row[key];
+        if (typeof v === 'number')
+            return v;
+    }
+    return undefined;
+}
+function defaultMapSession(row) {
+    if (!isRecord(row)) {
+        return { id: '', title: 'Untitled' };
+    }
+    const id = pickString(row, 'id', 'sessionId', 'session_id') ?? '';
+    const title = pickString(row, 'title', 'name') ?? 'New chat';
+    const createdAt = pickDate(row, 'createdAt', 'created_at');
+    const updatedAt = pickDate(row, 'updatedAt', 'updated_at');
+    const messageCount = pickNumber(row, 'messageCount', 'message_count');
+    const status = pickString(row, 'status');
+    return {
+        id,
+        title,
+        createdAt,
+        updatedAt,
+        messageCount,
+        status: status === 'active' || status === 'archived' ? status : status,
+    };
+}
+function defaultMapMessage(row) {
+    if (!isRecord(row))
+        return null;
+    const id = pickString(row, 'id') ?? '';
+    const role = (pickString(row, 'role') ?? 'user');
+    const content = pickString(row, 'content', 'text') ?? null;
+    const createdAtRaw = row.createdAt ?? row.created_at;
+    return {
+        id,
+        role,
+        content,
+        createdAt: typeof createdAtRaw === 'string' ||
+            typeof createdAtRaw === 'number' ||
+            createdAtRaw instanceof Date
+            ? createdAtRaw
+            : undefined,
+    };
+}
+async function resolveHeaders(headers) {
+    if (!headers)
+        return {};
+    if (typeof headers === 'function')
+        return await headers();
+    return headers;
+}
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+/**
+ * Build a `SessionConfig` from a standard REST chat backend.
+ *
+ * The factory wires the five session hooks (`list`, `load`, `create`,
+ * `remove`, `rename`) to a conventional REST layout:
+ *
+ * | Hook     | Request                                    |
+ * |----------|--------------------------------------------|
+ * | `list`   | `GET    {baseUrl}`                         |
+ * | `load`   | `GET    {baseUrl}/{id}{messagesPath}`      |
+ * | `create` | `POST   {baseUrl}` with `createBody(opts)` |
+ * | `remove` | `DELETE {baseUrl}/{id}` (or PATCH via `removeRequest`) |
+ * | `rename` | `PATCH  {baseUrl}/{id}` with `{ title }`   |
+ *
+ * All field-name mapping is done through `mapSession` / `mapMessage`,
+ * which have defaults that tolerate both `snake_case` and `camelCase`.
+ * For anything exotic (different status codes, non-JSON bodies, etc.),
+ * pass `request` and take over the transport entirely.
+ *
+ * @example
+ * ```ts
+ * // Chaingrow — uses archive-instead-of-delete and a non-standard create body
+ * export const chainGrowSessions = createRestSessionBridge({
+ *   baseUrl: `${API_URL}/chat/sessions`,
+ *   headers: () => ({ Authorization: `Bearer ${authStore.getState().token}` }),
+ *   createBody: () => ({ execution_types: ['chat'] }),
+ *   removeRequest: () => ({ method: 'PATCH', body: { status: 'archived' } }),
+ * });
+ * ```
+ */
+function createRestSessionBridge(options) {
+    const { baseUrl, headers, credentials = 'same-origin', fetchFn, request: customRequest, createBody = ({ title }) => (title ? { title } : {}), removeRequest = () => ({
+        method: 'DELETE',
+        body: undefined,
+    }), messagesPath = '/messages', mapSession = defaultMapSession, mapMessage = defaultMapMessage, listQuery, } = options;
+    const doFetch = fetchFn ??
+        (typeof globalThis !== 'undefined' && globalThis.fetch);
+    const request = customRequest
+        ? customRequest
+        : async ({ method, url, body, }) => {
+            if (!doFetch) {
+                throw new Error('[createRestSessionBridge] No `fetch` available. Pass `fetchFn` or `request`.');
+            }
+            const mergedHeaders = {
+                Accept: 'application/json',
+                ...(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
+                ...(await resolveHeaders(headers)),
+            };
+            const res = await doFetch(url, {
+                method,
+                credentials,
+                headers: mergedHeaders,
+                ...(body !== undefined ? { body: JSON.stringify(body) } : {}),
+            });
+            if (!res.ok) {
+                throw new Error(`[createRestSessionBridge] ${method} ${url} → HTTP ${res.status}`);
+            }
+            if (res.status === 204)
+                return undefined;
+            const text = await res.text();
+            if (!text)
+                return undefined;
+            try {
+                return JSON.parse(text);
+            }
+            catch {
+                return text;
+            }
+        };
+    const buildListUrl = () => {
+        if (!listQuery)
+            return baseUrl;
+        const params = listQuery();
+        const entries = Object.entries(params).filter(([, v]) => v !== undefined);
+        if (entries.length === 0)
+            return baseUrl;
+        const qs = entries
+            .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(String(v))}`)
+            .join('&');
+        const sep = baseUrl.includes('?') ? '&' : '?';
+        return `${baseUrl}${sep}${qs}`;
+    };
+    return {
+        list: async () => {
+            const rows = await request({ method: 'GET', url: buildListUrl() });
+            if (!Array.isArray(rows))
+                return [];
+            return rows.map(mapSession);
+        },
+        load: async (id) => {
+            const rows = await request({
+                method: 'GET',
+                url: `${baseUrl}/${encodeURIComponent(id)}${messagesPath}`,
+            });
+            // Some APIs wrap messages in `{ messages: [...] }`; unwrap if needed.
+            const list = Array.isArray(rows)
+                ? rows
+                : isRecord(rows) && Array.isArray(rows.messages)
+                    ? rows.messages
+                    : [];
+            return list
+                .map(mapMessage)
+                .filter((m) => m !== null);
+        },
+        create: async (opts = {}) => {
+            const created = await request({
+                method: 'POST',
+                url: baseUrl,
+                body: createBody(opts),
+            });
+            return mapSession(created);
+        },
+        remove: async (id) => {
+            const { method, body } = removeRequest(id);
+            await request({
+                method,
+                url: `${baseUrl}/${encodeURIComponent(id)}`,
+                body,
+            });
+        },
+        rename: async (id, title) => {
+            await request({
+                method: 'PATCH',
+                url: `${baseUrl}/${encodeURIComponent(id)}`,
+                body: { title },
+            });
+        },
+    };
+}

package/dist/cjs/react/components/ai-chat-panel.d.ts

@@ -0,0 +1,12 @@
+import '../styles.css';
+import type { AiChatPanelProps } from '../types.js';
+/**
+ * Batteries-included chat panel.
+ *
+ * Composes MessageList, ChatInput/MentionInput, SuggestionBar,
+ * approval cards, truncation banner, and typing indicator
+ * into a complete chat UI.
+ *
+ * Uses configuration from the parent `<AiChatProvider>`.
+ */
+export declare function AiChatPanel({ className, welcomeMessage }: AiChatPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/ai-chat-panel.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiChatPanel = AiChatPanel;
+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 message_list_js_1 = require("./message-list.js");
+const chat_input_js_1 = require("./chat-input.js");
+const mention_input_js_1 = require("./mention-input.js");
+const suggestion_bar_js_1 = require("./suggestion-bar.js");
+const approval_card_js_1 = require("./approval-card.js");
+const bulk_approval_card_js_1 = require("./bulk-approval-card.js");
+const pipeline_timeline_js_1 = require("./pipeline-timeline.js");
+/**
+ * Batteries-included chat panel.
+ *
+ * Composes MessageList, ChatInput/MentionInput, SuggestionBar,
+ * approval cards, truncation banner, and typing indicator
+ * into a complete chat UI.
+ *
+ * Uses configuration from the parent `<AiChatProvider>`.
+ */
+function AiChatPanel({ className, welcomeMessage }) {
+    const { classNames, hasMentions, locale, isLoading, stop, error, messages, pipelineSteps, pipelineState, pendingApprovals, approve, reject, isProcessingApproval, truncation, continueTruncation, dismissTruncation, components, themeVars, themeEffect, } = (0, chat_context_js_1.useChatContext)();
+    const ApprovalCardComponent = components.ApprovalCard ?? approval_card_js_1.ApprovalCard;
+    const BulkApprovalCardComponent = components.BulkApprovalCard ?? bulk_approval_card_js_1.BulkApprovalCard;
+    const PipelineTimelineComponent = components.PipelineTimeline ?? pipeline_timeline_js_1.PipelineTimeline;
+    const InputComponent = components.ChatInput ?? (hasMentions ? mention_input_js_1.MentionInput : chat_input_js_1.ChatInput);
+    // Group approvals by tool name for bulk operations
+    const { singleApprovals, bulkGroups } = (0, react_1.useMemo)(() => {
+        const groups = new Map();
+        for (const approval of pendingApprovals) {
+            const existing = groups.get(approval.toolName) ?? [];
+            existing.push(approval);
+            groups.set(approval.toolName, existing);
+        }
+        const singles = [];
+        const bulks = [];
+        for (const [, approvals] of groups) {
+            if (approvals.length === 1) {
+                singles.push(approvals[0]);
+            }
+            else {
+                bulks.push(approvals);
+            }
+        }
+        return { singleApprovals: singles, bulkGroups: bulks };
+    }, [pendingApprovals]);
+    // Check if last assistant message has visible text (for typing indicator)
+    const showTypingIndicator = (0, react_1.useMemo)(() => {
+        if (!isLoading)
+            return false;
+        const lastAssistant = [...messages].reverse().find(m => m.role === 'assistant');
+        if (!lastAssistant)
+            return true;
+        const hasText = lastAssistant.parts.some(p => 'text' in p && typeof p.text === 'string' && p.text.trim().length > 0);
+        return !hasText;
+    }, [isLoading, messages]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className ?? classNames.panel, "data-component": "ai-chat-panel", "data-state": isLoading ? 'loading' : 'idle', "data-theme-effect": themeEffect, style: themeVars, children: [error && ((0, jsx_runtime_1.jsx)("div", { "data-component": "error-banner", role: "alert", children: locale.errorMessage })), (0, jsx_runtime_1.jsx)(PipelineTimelineComponent, { steps: pipelineSteps, pipelineState: pipelineState, isLoading: isLoading, onStop: stop }), messages.length > 0 ? ((0, jsx_runtime_1.jsx)(message_list_js_1.MessageList, {})) : welcomeMessage ? ((0, jsx_runtime_1.jsx)("div", { "data-component": "message-list", children: (0, jsx_runtime_1.jsx)("div", { "data-component": "message-bubble", "data-role": "assistant", children: (0, jsx_runtime_1.jsx)("div", { "data-element": "content", children: welcomeMessage }) }) })) : ((0, jsx_runtime_1.jsx)("div", { "data-component": "empty-state", children: locale.emptyState })), singleApprovals.map((approval) => ((0, jsx_runtime_1.jsx)(ApprovalCardComponent, { approval: approval, onApprove: approve, onReject: reject, isProcessing: isProcessingApproval }, approval.id))), bulkGroups.map((group) => ((0, jsx_runtime_1.jsx)(BulkApprovalCardComponent, { toolName: group[0].toolName, approvals: group, onApproveAll: () => {
+                    for (const a of group)
+                        approve(a.id);
+                }, onRejectAll: () => {
+                    for (const a of group)
+                        reject(a.id);
+                }, isProcessing: isProcessingApproval }, `bulk-${group[0].toolName}`))), showTypingIndicator && ((0, jsx_runtime_1.jsxs)("div", { "data-component": "typing-indicator", children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "dot" }), (0, jsx_runtime_1.jsx)("span", { "data-element": "dot" }), (0, jsx_runtime_1.jsx)("span", { "data-element": "dot" })] })), truncation && !isLoading && ((0, jsx_runtime_1.jsxs)("div", { "data-component": "truncation-banner", children: [(0, jsx_runtime_1.jsx)("p", { "data-element": "message", children: truncation.message }), (0, jsx_runtime_1.jsxs)("div", { "data-element": "actions", children: [(0, jsx_runtime_1.jsx)("button", { onClick: continueTruncation, "data-action": "continue", children: locale.continueButton }), (0, jsx_runtime_1.jsx)("button", { onClick: dismissTruncation, "data-action": "dismiss", children: locale.dismissButton })] })] })), !isLoading && !showTypingIndicator && (0, jsx_runtime_1.jsx)(suggestion_bar_js_1.SuggestionBar, {}), (0, jsx_runtime_1.jsx)(InputComponent, {})] }));
+}

package/dist/cjs/react/components/ai-trigger-button.d.ts

@@ -0,0 +1,2 @@
+import type { AiTriggerButtonProps } from '../types.js';
+export declare function AiTriggerButton({ onClickChat, onClickMic, isRecording, isConnecting, onStopRecording, onCancelRecording, portal, className, buttonClassName, renderWrapper, draggable, persistPosition, ariaLabel, micAriaLabel, stopAriaLabel, cancelAriaLabel, showMic, icon, }: AiTriggerButtonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/react/components/ai-trigger-button.js

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiTriggerButton = AiTriggerButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const recording_controls_js_1 = require("./recording-controls.js");
+const use_draggable_position_js_1 = require("../hooks/use-draggable-position.js");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const wavesurfer_loader_js_1 = require("./wavesurfer-loader.js");
+// ---------------------------------------------------------------------------
+// Inline SVG icons (no lucide-react dependency)
+// ---------------------------------------------------------------------------
+function SparklesIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("path", { d: "M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" }), (0, jsx_runtime_1.jsx)("path", { d: "M20 3v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 5h-4" })] }));
+}
+function MicIcon() {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/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)("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "12", y1: "19", y2: "22" })] }));
+}
+// ---------------------------------------------------------------------------
+// Inline styles — SDK must not depend on consumer's Tailwind config
+// ---------------------------------------------------------------------------
+const WRAPPER_STYLE = {
+    position: 'fixed',
+    bottom: '1rem',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    zIndex: 9999,
+    pointerEvents: 'none',
+};
+const WRAPPER_POSITIONED_STYLE = {
+    position: 'fixed',
+    zIndex: 9999,
+    pointerEvents: 'none',
+};
+const PILL_BASE_STYLE = {
+    pointerEvents: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    borderRadius: '9999px',
+    paddingLeft: '0.75rem',
+    paddingRight: '0.5rem',
+    paddingTop: '0.375rem',
+    paddingBottom: '0.375rem',
+};
+const RECORDING_PILL_STYLE = {
+    ...PILL_BASE_STYLE,
+    paddingLeft: '0.5rem',
+    minWidth: '12rem',
+};
+const SPARKLE_STYLE = {
+    position: 'relative',
+    zIndex: 10,
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    padding: '0.25rem',
+};
+const MIC_BUTTON_STYLE = {
+    position: 'relative',
+    zIndex: 10,
+    height: '1.75rem',
+    width: '1.75rem',
+    borderRadius: '9999px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    padding: 0,
+};
+const WAVEFORM_CONTAINER_STYLE = {
+    flex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 0,
+};
+const DOT_STYLE = {
+    height: '0.375rem',
+    width: '0.375rem',
+    borderRadius: '9999px',
+    backgroundColor: 'currentColor',
+    opacity: 0.6,
+};
+// ---------------------------------------------------------------------------
+// CSS keyframes injected once for bounce animation
+// ---------------------------------------------------------------------------
+let stylesInjected = false;
+function injectStyles() {
+    if (stylesInjected || typeof document === 'undefined')
+        return;
+    stylesInjected = true;
+    const style = document.createElement('style');
+    style.textContent = `
+    @keyframes ai-trigger-bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-25%); }
+    }
+    [data-component="ai-trigger-button"] [data-dot] {
+      animation: ai-trigger-bounce 1.4s ease-in-out infinite;
+    }
+    [data-component="ai-trigger-button"] [data-dot="2"] {
+      animation-delay: 0.15s;
+    }
+    [data-component="ai-trigger-button"] [data-dot="3"] {
+      animation-delay: 0.3s;
+    }
+  `;
+    document.head.appendChild(style);
+}
+// ---------------------------------------------------------------------------
+// ConnectingDots — shown while connecting or as wavesurfer fallback
+// ---------------------------------------------------------------------------
+function ConnectingDots() {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: WAVEFORM_CONTAINER_STYLE, "data-element": "connecting-indicator", children: [(0, jsx_runtime_1.jsx)("span", { "data-dot": "1", style: DOT_STYLE }), (0, jsx_runtime_1.jsx)("span", { "data-dot": "2", style: { ...DOT_STYLE, marginLeft: '0.375rem' } }), (0, jsx_runtime_1.jsx)("span", { "data-dot": "3", style: { ...DOT_STYLE, marginLeft: '0.375rem' } })] }));
+}
+// ---------------------------------------------------------------------------
+// TriggerLiveWave — real-time mic waveform via WaveSurfer.js
+// ---------------------------------------------------------------------------
+function TriggerLiveWave() {
+    const containerRef = (0, react_1.useRef)(null);
+    const [loadFailed, setLoadFailed] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        let disposed = false;
+        const cleanupRef = { current: () => { } };
+        // Lazy-load the optional wavesurfer.js peer dep at runtime — see wavesurfer-loader.ts.
+        (0, wavesurfer_loader_js_1.loadWaveSurfer)()
+            .then(({ WaveSurfer, RecordPlugin }) => {
+            if (disposed)
+                return;
+            const ws = WaveSurfer.create({
+                container: el,
+                waveColor: '#000000',
+                height: 24,
+                barWidth: 2,
+                barGap: 1,
+                barRadius: 2,
+                cursorWidth: 0,
+                interact: false,
+                normalize: true,
+            });
+            const record = ws.registerPlugin(RecordPlugin.create({
+                scrollingWaveform: true,
+                scrollingWaveformWindow: 5,
+                renderRecordedAudio: false,
+            }));
+            record.startMic().catch((err) => {
+                console.warn('[AiTriggerButton] Failed to start waveform mic:', err);
+            });
+            cleanupRef.current = () => {
+                record.stopMic();
+                record.destroy();
+                ws.destroy();
+            };
+        })
+            .catch((err) => {
+            console.warn('[AiTriggerButton] wavesurfer.js is not installed — waveform visualization disabled. Install it with: npm install wavesurfer.js', err);
+            if (!disposed)
+                setLoadFailed(true);
+        });
+        return () => {
+            disposed = true;
+            cleanupRef.current();
+        };
+    }, []);
+    if (loadFailed) {
+        return (0, jsx_runtime_1.jsx)(ConnectingDots, {});
+    }
+    return (0, jsx_runtime_1.jsx)("div", { ref: containerRef, "data-element": "waveform", style: { flex: 1, minWidth: 0 } });
+}
+// ---------------------------------------------------------------------------
+// AiTriggerButton
+// ---------------------------------------------------------------------------
+function AiTriggerButton({ onClickChat, onClickMic, isRecording, isConnecting, onStopRecording, onCancelRecording, portal = true, className, buttonClassName, renderWrapper, draggable = true, persistPosition = 'ai-trigger-btn', ariaLabel = 'AI Assistant', micAriaLabel = 'Start recording', stopAriaLabel = 'Stop recording', cancelAriaLabel = 'Cancel recording', showMic = true, icon, }) {
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    // Theme vars from the provider (standalone use is allowed — fall back).
+    const themeVars = (0, react_1.useContext)(chat_context_js_1.ChatContext)?.themeVars ?? {};
+    const { position, isDragging, onMouseDown, wasDragged, resetPosition } = (0, use_draggable_position_js_1.useDraggablePosition)({
+        enabled: draggable,
+        persistKey: persistPosition || false,
+    });
+    (0, react_1.useEffect)(() => {
+        injectStyles();
+        setIsMounted(true);
+    }, []);
+    if (!isMounted)
+        return null;
+    const state = isRecording ? 'recording' : isConnecting ? 'connecting' : 'idle';
+    // Wrapper: use className if provided (consumer controls styling), otherwise inline styles.
+    // Theme CSS variables are always spread so the pill inherits the active palette.
+    const wrapperStyle = className
+        ? { ...themeVars }
+        : {
+            ...themeVars,
+            ...(position
+                ? { ...WRAPPER_POSITIONED_STYLE, left: position.x, top: position.y }
+                : WRAPPER_STYLE),
+        };
+    const wrapperClassName = className ?? undefined;
+    // ---- Recording / connecting state ----
+    if (isRecording || isConnecting) {
+        const content = ((0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, style: wrapperStyle, "data-component": "ai-trigger-button", "data-state": state, children: (0, jsx_runtime_1.jsxs)("div", { className: buttonClassName ?? undefined, style: RECORDING_PILL_STYLE, "aria-label": stopAriaLabel, children: [(0, jsx_runtime_1.jsx)(recording_controls_js_1.CancelButton, { onClick: onCancelRecording, ariaLabel: cancelAriaLabel }), (0, jsx_runtime_1.jsx)("div", { style: WAVEFORM_CONTAINER_STYLE, "data-element": "waveform-container", children: isConnecting ? (0, jsx_runtime_1.jsx)(ConnectingDots, {}) : (0, jsx_runtime_1.jsx)(TriggerLiveWave, {}) }), (0, jsx_runtime_1.jsx)(recording_controls_js_1.StopButton, { onClick: onStopRecording, ariaLabel: stopAriaLabel })] }) }));
+        return portal ? (0, react_dom_1.createPortal)(content, document.body) : content;
+    }
+    // ---- Default (idle) state ----
+    const button = ((0, jsx_runtime_1.jsxs)("div", { role: "button", tabIndex: 0, onMouseDown: onMouseDown, onClick: () => {
+            if (!wasDragged)
+                onClickChat();
+        }, onDoubleClick: () => {
+            if (position)
+                resetPosition();
+        }, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClickChat();
+            }
+        }, className: buttonClassName ?? undefined, style: {
+            ...PILL_BASE_STYLE,
+            cursor: isDragging ? 'grabbing' : 'pointer',
+            // When the mic is hidden, balance the padding so the single
+            // icon sits centered instead of off-to-the-left.
+            ...(showMic ? {} : { paddingRight: '0.75rem' }),
+        }, "data-element": "button-pill", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)("span", { style: SPARKLE_STYLE, "data-element": "chat-trigger", "aria-hidden": "true", children: icon ?? (0, jsx_runtime_1.jsx)(SparklesIcon, {}) }), showMic && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    if (!wasDragged)
+                        onClickMic();
+                }, style: MIC_BUTTON_STYLE, "data-element": "mic-trigger", "aria-label": micAriaLabel, children: (0, jsx_runtime_1.jsx)(MicIcon, {}) }))] }));
+    const wrapped = renderWrapper ? renderWrapper(button) : button;
+    const content = ((0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, style: wrapperStyle, "data-component": "ai-trigger-button", "data-state": "idle", "data-dragging": isDragging || undefined, children: wrapped }));
+    return portal ? (0, react_dom_1.createPortal)(content, document.body) : content;
+}

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

@@ -0,0 +1,9 @@
+import type { ApprovalCardProps } from '../types.js';
+/**
+ * Single tool approval card with rich detail display.
+ *
+ * Structure: header → details (label/value pairs) → actions (cancel/confirm).
+ * Uses `data-state` attribute for styling pending/processing states.
+ * Detail lines containing a colon are split into label + value.
+ */
+export declare function ApprovalCard({ approval, onApprove, onReject, className, isProcessing, }: ApprovalCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApprovalCard = ApprovalCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chat_context_js_1 = require("../provider/chat-context.js");
+/**
+ * Single tool approval card with rich detail display.
+ *
+ * Structure: header → details (label/value pairs) → actions (cancel/confirm).
+ * Uses `data-state` attribute for styling pending/processing states.
+ * Detail lines containing a colon are split into label + value.
+ */
+function ApprovalCard({ approval, onApprove, onReject, className, isProcessing, }) {
+    const { classNames, locale } = (0, chat_context_js_1.useChatContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className ?? classNames.approvalCard, "data-component": "approval-card", "data-tool": approval.toolName, "data-state": isProcessing ? 'processing' : 'pending', children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "header", children: (0, jsx_runtime_1.jsx)("span", { "data-element": "description", children: approval.description ?? approval.toolName }) }), approval.details && approval.details.length > 0 && ((0, jsx_runtime_1.jsx)("div", { "data-element": "details", children: approval.details.map((detail, i) => {
+                    const colonIndex = detail.indexOf(':');
+                    if (colonIndex === -1) {
+                        return ((0, jsx_runtime_1.jsx)("div", { "data-element": "detail-line", children: detail }, i));
+                    }
+                    const label = detail.substring(0, colonIndex);
+                    const value = detail.substring(colonIndex + 1).trim();
+                    return ((0, jsx_runtime_1.jsxs)("div", { "data-element": "detail-line", children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "detail-label", children: label }), (0, jsx_runtime_1.jsx)("span", { "data-element": "detail-value", children: value })] }, i));
+                }) })), (0, jsx_runtime_1.jsxs)("div", { "data-element": "actions", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => onReject(approval.id), disabled: isProcessing, "data-action": "reject", children: ['\u2715', " ", locale.cancelButton] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => onApprove(approval.id), disabled: isProcessing, "data-action": "approve", children: ['\u2713', " ", approval.confirmText ?? locale.confirmButton] })] })] }));
+}

package/dist/cjs/react/components/bulk-approval-card.d.ts

@@ -0,0 +1,9 @@
+import type { BulkApprovalCardProps } from '../types.js';
+/**
+ * Grouped approval card for 2+ tool calls of the same type.
+ *
+ * Shows one primary detail (first value) per approval for a compact overview.
+ * Remaining approvals are hidden behind an expandable "+N more" toggle.
+ * Uses `toolLabels` from context for human-readable tool action names.
+ */
+export declare function BulkApprovalCard({ toolName, approvals, onApproveAll, onRejectAll, className, isProcessing, }: BulkApprovalCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/bulk-approval-card.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkApprovalCard = BulkApprovalCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+/**
+ * Grouped approval card for 2+ tool calls of the same type.
+ *
+ * Shows one primary detail (first value) per approval for a compact overview.
+ * Remaining approvals are hidden behind an expandable "+N more" toggle.
+ * Uses `toolLabels` from context for human-readable tool action names.
+ */
+function BulkApprovalCard({ toolName, approvals, onApproveAll, onRejectAll, className, isProcessing, }) {
+    const { classNames, locale, toolLabels } = (0, chat_context_js_1.useChatContext)();
+    const [expanded, setExpanded] = (0, react_1.useState)(false);
+    const count = approvals.length;
+    const labels = toolLabels.labels?.[toolName] ?? { singular: toolName, plural: toolName };
+    const actionLabel = count === 1 ? labels.singular : labels.plural;
+    // Extract one primary detail per approval (first detail value = typically the title)
+    const primaryDetails = [];
+    for (const approval of approvals) {
+        if (approval.details && approval.details.length > 0) {
+            const first = approval.details[0];
+            const colonIndex = first.indexOf(':');
+            const value = colonIndex > -1 ? first.substring(colonIndex + 1).trim() : first;
+            if (value)
+                primaryDetails.push(value);
+        }
+    }
+    const maxVisible = 3;
+    const visibleDetails = expanded ? primaryDetails : primaryDetails.slice(0, maxVisible);
+    const remainingCount = primaryDetails.length - maxVisible;
+    const allCountText = (locale.allCountLabel ?? 'All {count}').replace('{count}', String(count));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className ?? classNames.bulkApprovalCard, "data-component": "bulk-approval-card", "data-tool": toolName, "data-count": count, "data-state": isProcessing ? 'processing' : 'pending', children: [(0, jsx_runtime_1.jsxs)("div", { "data-element": "header", children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "tool-icon" }), (0, jsx_runtime_1.jsxs)("span", { "data-element": "description", children: [count, " ", actionLabel, "?"] })] }), visibleDetails.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "details", children: [visibleDetails.map((detail, i) => ((0, jsx_runtime_1.jsxs)("div", { "data-element": "detail-line", children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "detail-bullet" }), (0, jsx_runtime_1.jsx)("span", { "data-element": "detail-value", children: detail })] }, i))), remainingCount > 0 && !expanded && ((0, jsx_runtime_1.jsxs)("button", { type: "button", "data-element": "detail-overflow", onClick: () => setExpanded(true), children: ["+", remainingCount, " ", locale.moreItemsLabel] }))] })), (0, jsx_runtime_1.jsxs)("div", { "data-element": "actions", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: onRejectAll, disabled: isProcessing, "data-action": "reject", children: ['\u2715', " ", locale.cancelButton] }), (0, jsx_runtime_1.jsxs)("button", { onClick: onApproveAll, disabled: isProcessing, "data-action": "approve", children: ['\u2713', " ", count === 1 ? (locale.confirmButton) : allCountText] })] })] }));
+}

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

@@ -0,0 +1,10 @@
+import type { ChatInputProps } from '../types.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.
+ */
+export declare function ChatInput({ className, onSubmit }: ChatInputProps): import("react/jsx-runtime").JSX.Element;