glirastes 0.3.0 → 0.3.2

package/dist/cjs/react/components/session-switcher.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SessionSwitcher = SessionSwitcher;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const confirm_dialog_js_1 = require("./confirm-dialog.js");
+function defaultFormatTimestamp(value) {
+    if (value === undefined || value === null || value === '')
+        return '';
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return '';
+    return d.toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+    });
+}
+/**
+ * Compact dropdown that lists all chat sessions, lets the user switch
+ * between them, create new ones, and delete existing ones. Reads
+ * everything from `useChatContext()` — requires an `<AiChatProvider>`
+ * ancestor whose `session` config exposes `list`, `create`, and `remove`.
+ */
+function SessionSwitcher({ fallbackTitle, formatTimestamp = defaultFormatTimestamp, className, } = {}) {
+    const { sessions, activeSessionId, sessionsSupported, isSessionsLoading, switchSession, createSession, removeSession, renameSession, locale, } = (0, chat_context_js_1.useChatContext)();
+    const resolvedFallback = fallbackTitle ?? locale.newChatLabel;
+    const [editingId, setEditingId] = (0, react_1.useState)(null);
+    const [editDraft, setEditDraft] = (0, react_1.useState)('');
+    const editInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (editingId && editInputRef.current) {
+            editInputRef.current.focus();
+            editInputRef.current.select();
+        }
+    }, [editingId]);
+    const beginEdit = (0, react_1.useCallback)((e, id, title) => {
+        e.stopPropagation();
+        setEditingId(id);
+        setEditDraft(title);
+    }, []);
+    const cancelEdit = (0, react_1.useCallback)(() => {
+        setEditingId(null);
+        setEditDraft('');
+    }, []);
+    const commitEdit = (0, react_1.useCallback)(async () => {
+        const id = editingId;
+        const next = editDraft.trim();
+        setEditingId(null);
+        setEditDraft('');
+        if (!id)
+            return;
+        const current = sessions.find((s) => s.id === id)?.title ?? '';
+        if (!next || next === current)
+            return;
+        await renameSession(id, next);
+    }, [editingId, editDraft, renameSession, sessions]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [pendingDeleteId, setPendingDeleteId] = (0, react_1.useState)(null);
+    const rootRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const handler = (e) => {
+            if (!rootRef.current)
+                return;
+            if (!(e.target instanceof Node))
+                return;
+            if (rootRef.current.contains(e.target))
+                return;
+            setOpen(false);
+        };
+        window.addEventListener('mousedown', handler);
+        return () => window.removeEventListener('mousedown', handler);
+    }, [open]);
+    const onNew = (0, react_1.useCallback)(async () => {
+        setOpen(false);
+        await createSession({ title: locale.newChatLabel });
+    }, [createSession, locale.newChatLabel]);
+    const onPick = (0, react_1.useCallback)(async (id) => {
+        setOpen(false);
+        if (id === activeSessionId)
+            return;
+        await switchSession(id);
+    }, [switchSession, activeSessionId]);
+    const onDelete = (0, react_1.useCallback)((e, id) => {
+        e.stopPropagation();
+        setPendingDeleteId(id);
+    }, []);
+    const confirmDelete = (0, react_1.useCallback)(async () => {
+        const id = pendingDeleteId;
+        setPendingDeleteId(null);
+        if (!id)
+            return;
+        await removeSession(id);
+    }, [pendingDeleteId, removeSession]);
+    const cancelDelete = (0, react_1.useCallback)(() => {
+        setPendingDeleteId(null);
+    }, []);
+    if (!sessionsSupported) {
+        return (0, jsx_runtime_1.jsx)("strong", { "data-element": "title", children: resolvedFallback });
+    }
+    const sorted = [...sessions].sort((a, b) => {
+        const av = Number(new Date(a.updatedAt ?? a.createdAt ?? 0).getTime()) || 0;
+        const bv = Number(new Date(b.updatedAt ?? b.createdAt ?? 0).getTime()) || 0;
+        return bv - av;
+    });
+    const current = sorted.find((s) => s.id === activeSessionId);
+    const currentTitle = current?.title ?? resolvedFallback;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: className, "data-component": "session-switcher", "data-open": open || undefined, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "data-element": "trigger", onMouseDown: (e) => e.stopPropagation(), onClick: () => setOpen((v) => !v), "aria-haspopup": "listbox", "aria-expanded": open, children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "trigger-title", children: currentTitle }), (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("polyline", { points: "6 9 12 15 18 9" }) })] }), open && ((0, jsx_runtime_1.jsxs)("div", { "data-element": "popover", role: "listbox", onMouseDown: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "data-element": "new-session", onClick: onNew, disabled: isSessionsLoading, children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "plus", "aria-hidden": "true", children: "+" }), locale.newChatLabel] }), (0, jsx_runtime_1.jsx)("div", { "data-element": "session-list", children: sorted.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { "data-element": "empty", children: isSessionsLoading ? locale.sessionsLoadingLabel : locale.noSessionsLabel })) : (sorted.map((s) => {
+                            const isActive = s.id === activeSessionId;
+                            const ts = formatTimestamp(s.updatedAt ?? s.createdAt);
+                            const isEditing = editingId === s.id;
+                            return ((0, jsx_runtime_1.jsxs)("div", { role: "option", "aria-selected": isActive, "data-element": "session-row", "data-active": isActive || undefined, "data-editing": isEditing || undefined, onClick: () => {
+                                    if (isEditing)
+                                        return;
+                                    void onPick(s.id);
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { "data-element": "row-main", children: [isEditing ? ((0, jsx_runtime_1.jsx)("input", { ref: editInputRef, type: "text", "data-element": "row-title-input", value: editDraft, placeholder: locale.renameSessionPlaceholder, onChange: (e) => setEditDraft(e.target.value), onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                                                    if (e.key === 'Enter') {
+                                                        e.preventDefault();
+                                                        void commitEdit();
+                                                    }
+                                                    else if (e.key === 'Escape') {
+                                                        e.preventDefault();
+                                                        cancelEdit();
+                                                    }
+                                                }, onBlur: () => void commitEdit() })) : ((0, jsx_runtime_1.jsx)("div", { "data-element": "row-title", children: s.title || 'Untitled' })), ts && !isEditing && ((0, jsx_runtime_1.jsx)("div", { "data-element": "row-subtitle", children: ts }))] }), !isEditing && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", "data-element": "row-edit", "aria-label": locale.renameSessionAriaLabel, title: locale.renameSessionAriaLabel, onClick: (e) => beginEdit(e, s.id, s.title || ''), onMouseDown: (e) => e.stopPropagation(), 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)("path", { d: "M12 20h9" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z" })] }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-element": "row-delete", "aria-label": locale.deleteSessionAriaLabel, title: locale.deleteSessionAriaLabel, onClick: (e) => void onDelete(e, s.id), onMouseDown: (e) => e.stopPropagation(), 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" })] }) })] }))] }, s.id));
+                        })) })] })), (0, jsx_runtime_1.jsx)(confirm_dialog_js_1.ConfirmDialog, { open: pendingDeleteId !== null, title: locale.confirmDeleteSessionPrompt, message: sessions.find((s) => s.id === pendingDeleteId)?.title
+                    ? `"${sessions.find((s) => s.id === pendingDeleteId)?.title}" will be archived.`
+                    : undefined, confirmLabel: locale.deleteSessionAriaLabel, cancelLabel: locale.cancelButton, destructive: true, onConfirm: () => void confirmDelete(), onCancel: cancelDelete })] }));
+}

package/dist/cjs/react/components/suggestion-bar.d.ts

@@ -0,0 +1,9 @@
+import type { SuggestionBarProps } from '../types.js';
+/**
+ * Suggestion bar with rotation/fade animation.
+ *
+ * Shows one suggestion at a time, rotating through the list
+ * with a configurable interval and fade transition.
+ * Pauses on hover.
+ */
+export declare function SuggestionBar({ className }: SuggestionBarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/react/components/suggestion-bar.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuggestionBar = SuggestionBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const suggestion_chip_js_1 = require("./suggestion-chip.js");
+const FADE_DURATION = 300;
+/**
+ * Suggestion bar with rotation/fade animation.
+ *
+ * Shows one suggestion at a time, rotating through the list
+ * with a configurable interval and fade transition.
+ * Pauses on hover.
+ */
+function SuggestionBar({ className }) {
+    const { suggestionChips, selectSuggestion, classNames, suggestions, components } = (0, chat_context_js_1.useChatContext)();
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    const [isPaused, setIsPaused] = (0, react_1.useState)(false);
+    const rotationInterval = suggestions.rotationInterval ?? 4000;
+    const SuggestionChipComponent = components.SuggestionChip ?? suggestion_chip_js_1.SuggestionChip;
+    // Reset index when chips change
+    (0, react_1.useEffect)(() => {
+        setCurrentIndex(0);
+        setIsVisible(true);
+    }, [suggestionChips]);
+    // Rotation timer
+    (0, react_1.useEffect)(() => {
+        if (isPaused || suggestionChips.length <= 1)
+            return;
+        const interval = setInterval(() => {
+            setIsVisible(false);
+            setTimeout(() => {
+                setCurrentIndex((prev) => (prev + 1) % suggestionChips.length);
+                setIsVisible(true);
+            }, FADE_DURATION);
+        }, rotationInterval);
+        return () => clearInterval(interval);
+    }, [isPaused, suggestionChips.length, rotationInterval]);
+    const handleClick = (0, react_1.useCallback)(() => {
+        selectSuggestion(suggestionChips[currentIndex]);
+    }, [selectSuggestion, suggestionChips, currentIndex]);
+    if (suggestionChips.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("div", { className: className ?? classNames.suggestionChip, "data-component": "suggestion-bar", onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), children: (0, jsx_runtime_1.jsx)(SuggestionChipComponent, { label: suggestionChips[currentIndex], onClick: handleClick, isVisible: isVisible }) }));
+}

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

@@ -0,0 +1,9 @@
+import type { SuggestionChipProps } from '../types.js';
+/**
+ * Single suggestion chip button.
+ *
+ * Supports `disabled` and `isVisible` for fade animation.
+ * The opacity transition is the only inline style — all other
+ * styling is driven via data-* attributes.
+ */
+export declare function SuggestionChip({ label, onClick, className, disabled, isVisible, }: SuggestionChipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuggestionChip = SuggestionChip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Single suggestion chip button.
+ *
+ * Supports `disabled` and `isVisible` for fade animation.
+ * The opacity transition is the only inline style — all other
+ * styling is driven via data-* attributes.
+ */
+function SuggestionChip({ label, onClick, className, disabled, isVisible = true, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { className: className, onClick: onClick, disabled: disabled, "data-component": "suggestion-chip", "data-visible": isVisible, style: { opacity: isVisible ? 1 : 0, transition: 'opacity 300ms' }, children: label }));
+}

package/dist/cjs/react/components/voice-input-addon.d.ts

@@ -0,0 +1,13 @@
+interface VoiceInputAddonProps {
+    disabled: boolean;
+    language: string;
+    baseUrl?: string;
+    /** Returns the current auth token for WebSocket authentication */
+    getToken?: () => string | null | undefined;
+    onTranscript: (text: string) => void;
+    onError?: (error: string) => void;
+    showRecordingBar?: boolean;
+    recordingBarVariant?: 'trigger' | 'inline';
+}
+export declare function VoiceInputAddon({ disabled, language, baseUrl, getToken, onTranscript, onError, showRecordingBar, recordingBarVariant, }: VoiceInputAddonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/react/components/voice-input-addon.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VoiceInputAddon = VoiceInputAddon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_deepgram_transcription_js_1 = require("../hooks/use-deepgram-transcription.js");
+const recording_bar_js_1 = require("./recording-bar.js");
+function VoiceInputAddon({ disabled, language, baseUrl, getToken, onTranscript, onError, showRecordingBar = true, recordingBarVariant = 'inline', }) {
+    const { isRecording, isConnecting, startRecording, stopRecording, } = (0, use_deepgram_transcription_js_1.useDeepgramTranscription)({
+        language,
+        baseUrl,
+        getToken,
+        onError,
+    });
+    const stopAndSubmit = (0, react_1.useCallback)(() => {
+        const transcript = stopRecording().trim();
+        if (transcript.length > 0) {
+            onTranscript(transcript);
+        }
+    }, [onTranscript, stopRecording]);
+    const handleClick = (0, react_1.useCallback)(async () => {
+        if (isRecording) {
+            stopAndSubmit();
+            return;
+        }
+        await startRecording();
+    }, [isRecording, startRecording, stopAndSubmit]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                    void handleClick();
+                }, disabled: disabled || isConnecting, "data-component": "voice-input-addon", "data-state": isConnecting ? 'connecting' : isRecording ? 'recording' : 'idle', children: isRecording ? 'stop' : 'mic' }), showRecordingBar && isRecording && ((0, jsx_runtime_1.jsx)(recording_bar_js_1.RecordingBar, { isConnecting: isConnecting, onCancel: stopRecording, onStop: stopAndSubmit, variant: recordingBarVariant }))] }));
+}

package/dist/cjs/react/components/voice-input-button.d.ts

@@ -0,0 +1,2 @@
+import type { VoiceInputButtonProps } from '../types.js';
+export declare function VoiceInputButton({ onTranscript, disabled, className, language, baseUrl, getToken, onError, }: VoiceInputButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/voice-input-button.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VoiceInputButton = VoiceInputButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_deepgram_transcription_js_1 = require("../hooks/use-deepgram-transcription.js");
+const PULSE_STYLE_ID = 'glirastes-voice-pulse-style';
+const PULSE_CSS = `@keyframes glirastes-voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }`;
+function useInjectPulseStyle() {
+    (0, react_1.useEffect)(() => {
+        if (typeof document === 'undefined')
+            return;
+        if (document.getElementById(PULSE_STYLE_ID))
+            return;
+        const style = document.createElement('style');
+        style.id = PULSE_STYLE_ID;
+        style.textContent = PULSE_CSS;
+        document.head.appendChild(style);
+    }, []);
+}
+function joinClassNames(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function StopIcon() {
+    return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", "data-part": "stop", style: {
+            display: 'inline-block',
+            width: 12,
+            height: 12,
+            borderRadius: 2,
+            background: 'currentColor',
+            animation: 'glirastes-voice-pulse 1.5s ease-in-out infinite',
+        } }));
+}
+function VoiceInputButton({ onTranscript, disabled = false, className, language = 'de', baseUrl, getToken, onError, }) {
+    useInjectPulseStyle();
+    const { isRecording, isConnecting, startRecording, stopRecording } = (0, use_deepgram_transcription_js_1.useDeepgramTranscription)({
+        language,
+        baseUrl,
+        getToken,
+        onError,
+    });
+    const handleClick = (0, react_1.useCallback)(async () => {
+        if (isRecording) {
+            const finalText = stopRecording();
+            if (finalText.trim()) {
+                onTranscript(finalText);
+            }
+            return;
+        }
+        await startRecording();
+    }, [isRecording, onTranscript, startRecording, stopRecording]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+            void handleClick();
+        }, disabled: disabled || isConnecting, className: joinClassNames('glirastes-voice-input-button', className), "data-component": "voice-input-button", "data-state": isConnecting ? 'connecting' : isRecording ? 'recording' : 'idle', title: isRecording ? 'Aufnahme stoppen' : 'Spracheingabe starten', "aria-label": isRecording ? 'Aufnahme stoppen' : 'Spracheingabe starten', children: isConnecting ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", "data-part": "spinner", children: "..." })) : isRecording ? ((0, jsx_runtime_1.jsx)(StopIcon, {})) : ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", "data-part": "icon", children: "mic" })) }));
+}

package/dist/cjs/react/components/wavesurfer-loader.d.ts

@@ -0,0 +1,5 @@
+export interface WaveSurferModule {
+    WaveSurfer: any;
+    RecordPlugin: any;
+}
+export declare function loadWaveSurfer(): Promise<WaveSurferModule>;

package/dist/cjs/react/components/wavesurfer-loader.js

@@ -0,0 +1,36 @@
+"use strict";
+// Runtime loader for the optional `wavesurfer.js` peer dependency.
+//
+// `wavesurfer.js` is only needed for the live waveform during voice input.
+// A plain dynamic `import('wavesurfer.js')` would be statically analysed by
+// browser-side bundlers (Webpack, Turbopack, Vite, esbuild) — even though
+// the import only executes when the user clicks the mic, the bundler tries
+// to resolve the specifier at *build* time and fails when the peer isn't
+// installed.
+//
+// To make the optional peer truly optional, we hide the specifier behind a
+// runtime-constructed function. Bundlers can't follow a string passed to
+// `Function('s', 'return import(s)')`, so they don't try to resolve it.
+//
+// Trade-offs:
+// - **CSP:** Pages with a strict Content-Security-Policy that disallows
+//   `unsafe-eval` will block the `Function` constructor. If you ship under
+//   such a CSP, install `wavesurfer.js` unconditionally — the bundler will
+//   then resolve the static path and the runtime trick is bypassed for free.
+// - **Tree-shaking:** Bundlers can't tree-shake calls behind this function,
+//   but the loader itself is tiny and only the components that opt into
+//   voice (`AiTriggerButton`, `RecordingBar`) reach this path.
+//
+// If your deployment forbids `Function`/`eval` AND you don't want
+// `wavesurfer.js` installed, build a Glirastes app without the `<showMic>`
+// option — the voice components are then never mounted and `loadWaveSurfer`
+// is never called.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadWaveSurfer = loadWaveSurfer;
+const runtimeImport = new Function('s', 'return import(s)');
+function loadWaveSurfer() {
+    return Promise.all([
+        runtimeImport('wavesurfer.js').then((m) => m.default),
+        runtimeImport('wavesurfer.js/dist/plugins/record.esm.js').then((m) => m.default),
+    ]).then(([WaveSurfer, RecordPlugin]) => ({ WaveSurfer, RecordPlugin }));
+}

package/dist/cjs/react/hooks/use-ai-chat.d.ts

@@ -0,0 +1,22 @@
+import type { UseAiChatReturn } from '../types.js';
+/**
+ * Hook for accessing the core chat functionality.
+ *
+ * Must be used within an `<AiChatProvider>`.
+ *
+ * @example
+ * ```tsx
+ * function MyChat() {
+ *   const { messages, send, isLoading, clear } = useAiChat();
+ *
+ *   return (
+ *     <div>
+ *       {messages.map(m => <div key={m.id}>{m.parts[0]?.text}</div>)}
+ *       <button onClick={() => send('hello')}>Send</button>
+ *       <button onClick={clear}>Clear</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useAiChat(): UseAiChatReturn;

package/dist/cjs/react/hooks/use-ai-chat.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAiChat = useAiChat;
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+/**
+ * Hook for accessing the core chat functionality.
+ *
+ * Must be used within an `<AiChatProvider>`.
+ *
+ * @example
+ * ```tsx
+ * function MyChat() {
+ *   const { messages, send, isLoading, clear } = useAiChat();
+ *
+ *   return (
+ *     <div>
+ *       {messages.map(m => <div key={m.id}>{m.parts[0]?.text}</div>)}
+ *       <button onClick={() => send('hello')}>Send</button>
+ *       <button onClick={clear}>Clear</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useAiChat() {
+    const ctx = (0, chat_context_js_1.useChatContext)();
+    return (0, react_1.useMemo)(() => ({
+        messages: ctx.messages,
+        send: ctx.send,
+        stop: ctx.stop,
+        isLoading: ctx.isLoading,
+        error: ctx.error,
+        loadMore: ctx.loadMore,
+        hasMore: ctx.hasMore,
+        clear: ctx.clear,
+        pipelineSteps: ctx.pipelineSteps,
+        pipelineState: ctx.pipelineState,
+    }), [
+        ctx.messages,
+        ctx.send,
+        ctx.stop,
+        ctx.isLoading,
+        ctx.error,
+        ctx.loadMore,
+        ctx.hasMore,
+        ctx.clear,
+        ctx.pipelineSteps,
+        ctx.pipelineState,
+    ]);
+}

package/dist/cjs/react/hooks/use-approvals.d.ts

@@ -0,0 +1,23 @@
+import type { UseApprovalsReturn } from '../types.js';
+/**
+ * Hook for managing tool call approvals.
+ *
+ * Provides pending approvals, grouped by tool name for bulk operations,
+ * and approve/reject actions (single and bulk).
+ *
+ * @example
+ * ```tsx
+ * function ApprovalList() {
+ *   const { pending, approve, reject, grouped, isProcessing } = useApprovals();
+ *
+ *   return pending.map(a => (
+ *     <div key={a.id}>
+ *       <span>{a.toolName}</span>
+ *       <button onClick={() => approve(a.id)} disabled={isProcessing}>Approve</button>
+ *       <button onClick={() => reject(a.id)} disabled={isProcessing}>Reject</button>
+ *     </div>
+ *   ));
+ * }
+ * ```
+ */
+export declare function useApprovals(): UseApprovalsReturn;

package/dist/cjs/react/hooks/use-approvals.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useApprovals = useApprovals;
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+/**
+ * Hook for managing tool call approvals.
+ *
+ * Provides pending approvals, grouped by tool name for bulk operations,
+ * and approve/reject actions (single and bulk).
+ *
+ * @example
+ * ```tsx
+ * function ApprovalList() {
+ *   const { pending, approve, reject, grouped, isProcessing } = useApprovals();
+ *
+ *   return pending.map(a => (
+ *     <div key={a.id}>
+ *       <span>{a.toolName}</span>
+ *       <button onClick={() => approve(a.id)} disabled={isProcessing}>Approve</button>
+ *       <button onClick={() => reject(a.id)} disabled={isProcessing}>Reject</button>
+ *     </div>
+ *   ));
+ * }
+ * ```
+ */
+function useApprovals() {
+    const ctx = (0, chat_context_js_1.useChatContext)();
+    const grouped = (0, react_1.useMemo)(() => {
+        const map = new Map();
+        for (const approval of ctx.pendingApprovals) {
+            const existing = map.get(approval.toolName) ?? [];
+            existing.push(approval);
+            map.set(approval.toolName, existing);
+        }
+        return map;
+    }, [ctx.pendingApprovals]);
+    const approveGroup = (0, react_1.useMemo)(() => (toolName) => {
+        const group = grouped.get(toolName);
+        if (group) {
+            for (const approval of group) {
+                ctx.approve(approval.id);
+            }
+        }
+    }, [grouped, ctx.approve]);
+    const rejectGroup = (0, react_1.useMemo)(() => (toolName) => {
+        const group = grouped.get(toolName);
+        if (group) {
+            for (const approval of group) {
+                ctx.reject(approval.id);
+            }
+        }
+    }, [grouped, ctx.reject]);
+    return (0, react_1.useMemo)(() => ({
+        pending: ctx.pendingApprovals,
+        approve: ctx.approve,
+        reject: ctx.reject,
+        grouped,
+        approveGroup,
+        rejectGroup,
+        isProcessing: ctx.isProcessingApproval,
+    }), [ctx.pendingApprovals, ctx.approve, ctx.reject, grouped, approveGroup, rejectGroup, ctx.isProcessingApproval]);
+}

package/dist/cjs/react/hooks/use-deepgram-transcription.d.ts

@@ -0,0 +1,2 @@
+import type { UseDeepgramTranscriptionOptions, UseDeepgramTranscriptionReturn } from '../types.js';
+export declare function useDeepgramTranscription(options?: UseDeepgramTranscriptionOptions): UseDeepgramTranscriptionReturn;