glirastes 0.4.0 → 0.5.0

package/dist/cjs/react/completions/completion-search.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCompletionSearch = createCompletionSearch;
+const mention_markup_js_1 = require("../utils/mention-markup.js");
+const PROVIDER_ID = /^[a-z0-9][a-z0-9-]{0,39}$/;
+function clamp(value, fallback, max) {
+    if (value === undefined || !Number.isFinite(value))
+        return fallback;
+    return Math.min(Math.max(Math.trunc(value), 1), max);
+}
+const ACTION_ID = /^[A-Za-z0-9][A-Za-z0-9._-]{0,199}$/;
+function isActions(value) {
+    return value === undefined || (Array.isArray(value) && value.length <= 20 && value.every((action) => (typeof action === 'object' && action !== null
+        && typeof action.id === 'string' && ACTION_ID.test(action.id)
+        && typeof action.label === 'string'
+        && action.label.trim().length > 0 && action.label.length <= 200)));
+}
+function isItem(value) {
+    if (typeof value !== 'object' || value === null)
+        return false;
+    const item = value;
+    return typeof item.id === 'string' && item.id.length > 0 && item.id.length <= 200
+        && !/[:}]/.test(item.id)
+        && typeof item.type === 'string' && /^[a-z][a-z0-9_-]{0,39}$/.test(item.type)
+        && typeof item.label === 'string' && item.label.trim().length > 0
+        && (item.definitionId === undefined && item.args === undefined
+            || (0, mention_markup_js_1.describeToolReference)(item.definitionId, item.args) !== undefined)
+        && isActions(item.actions);
+}
+function withTimeout(work, timeoutMs) {
+    let timer;
+    return Promise.race([
+        work,
+        new Promise((_resolve, reject) => {
+            timer = setTimeout(() => reject(new Error('Completion provider timed out')), timeoutMs);
+        }),
+    ]).finally(() => clearTimeout(timer));
+}
+/**
+ * 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.
+ */
+function createCompletionSearch(providers, options = {}) {
+    const ids = new Set();
+    for (const provider of providers) {
+        if (!PROVIDER_ID.test(provider.id)) {
+            throw new Error(`Invalid completion provider id: ${provider.id}`);
+        }
+        if (ids.has(provider.id)) {
+            throw new Error(`Duplicate completion provider id: ${provider.id}`);
+        }
+        ids.add(provider.id);
+    }
+    const limit = clamp(options.limitPerProvider, 8, 20);
+    const maxResults = clamp(options.maxResults, 12, 50);
+    const timeoutMs = clamp(options.timeoutMs, 3_000, 30_000);
+    const context = Object.freeze({ ...(options.context ?? {}) });
+    let current = null;
+    return async (query, trigger) => {
+        current?.abort();
+        const controller = new AbortController();
+        current = controller;
+        const settled = await Promise.all(providers
+            .filter((provider) => provider.trigger === trigger)
+            .map(async (provider) => {
+            try {
+                const items = await withTimeout(Promise.resolve(provider.search({
+                    query, trigger, signal: controller.signal, context, limit,
+                })), timeoutMs);
+                return { provider, items: Array.isArray(items) ? items.slice(0, limit) : [] };
+            }
+            catch (error) {
+                if (!controller.signal.aborted)
+                    options.onProviderError?.(provider.id, error);
+                return { provider, items: [] };
+            }
+        }));
+        if (controller.signal.aborted)
+            return [];
+        if (current === controller)
+            current = null;
+        const seen = new Set();
+        const results = [];
+        for (const { provider, items } of settled) {
+            for (const item of items) {
+                if (!isItem(item))
+                    continue;
+                const identity = `${item.type}:${item.id}`;
+                if (seen.has(identity))
+                    continue;
+                seen.add(identity);
+                results.push({
+                    id: item.id,
+                    key: `${provider.id}:${item.type}:${item.id}`,
+                    type: item.type,
+                    label: item.label.trim(),
+                    ...(item.description ? { description: item.description } : {}),
+                    ...(item.slug ? { slug: item.slug } : {}),
+                    ...(item.definitionId ? { definitionId: item.definitionId } : {}),
+                    ...(item.args ? { args: item.args } : {}),
+                    ...(item.actions?.length ? { actions: item.actions.map(({ id, label }) => ({ id, label: label.trim() })) } : {}),
+                });
+                if (results.length >= maxResults)
+                    return results;
+            }
+        }
+        return results;
+    };
+}

package/dist/cjs/react/completions/ui-tool-command-provider.d.ts

@@ -0,0 +1,15 @@
+import type { ChatCompletionProvider, UiToolCommandSource } from '../types.js';
+/**
+ * Built-in `/` command provider over the catalog's UI tools (navigation,
+ * filters, dialogs). Role filtering only hides commands; executing one still
+ * goes through the model, the turn snapshot and the app's own checks.
+ *
+ * The item id is the tool's `commandId` (default `definitionId`). A command
+ * whose id is not the definition id, or that has fixed `args`, also carries
+ * `definitionId` and `args` so the model learns which definition to run.
+ * Creation throws on an invalid or duplicate command id.
+ */
+export declare function createUiToolCommandProvider(options: {
+    tools: ReadonlyArray<UiToolCommandSource>;
+    id?: string;
+}): ChatCompletionProvider;

package/dist/cjs/react/completions/ui-tool-command-provider.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createUiToolCommandProvider = createUiToolCommandProvider;
+const mention_markup_js_1 = require("../utils/mention-markup.js");
+function fold(value) {
+    return value.normalize('NFKD').replace(/\p{M}+/gu, '').toLowerCase().trim();
+}
+function rank(command, needle) {
+    if (!needle)
+        return 0;
+    const { tool } = command;
+    const label = fold(tool.label);
+    if (label.startsWith(needle))
+        return 0;
+    if (label.split(/[^\p{L}\p{N}]+/u).some((word) => word.startsWith(needle)))
+        return 1;
+    if (label.includes(needle))
+        return 2;
+    if ([command.commandId, tool.definitionId].some((id) => fold(id).includes(needle)))
+        return 3;
+    if ((tool.keywords ?? []).some((keyword) => fold(keyword).includes(needle)))
+        return 4;
+    return undefined;
+}
+function toCommand(tool) {
+    const commandId = tool.commandId ?? tool.definitionId;
+    if (!commandId.trim() || commandId.length > 200 || /[:}]/.test(commandId)) {
+        throw new Error(`Invalid UI tool command id ${JSON.stringify(commandId)} `
+            + '(non-blank, max 200 characters, no ":" or "}")');
+    }
+    const args = tool.args && Object.keys(tool.args).length > 0 ? tool.args : undefined;
+    const carriesTool = commandId !== tool.definitionId || args !== undefined;
+    if (carriesTool && (0, mention_markup_js_1.describeToolReference)(tool.definitionId, args) === undefined) {
+        throw new Error(`UI tool command ${commandId} has a definition id or arguments the model cannot be given `
+            + '(definition id [A-Za-z0-9_.-] up to 200 characters, arguments a JSON object up to 2000 characters)');
+    }
+    return { tool, commandId, args, carriesTool };
+}
+/**
+ * Built-in `/` command provider over the catalog's UI tools (navigation,
+ * filters, dialogs). Role filtering only hides commands; executing one still
+ * goes through the model, the turn snapshot and the app's own checks.
+ *
+ * The item id is the tool's `commandId` (default `definitionId`). A command
+ * whose id is not the definition id, or that has fixed `args`, also carries
+ * `definitionId` and `args` so the model learns which definition to run.
+ * Creation throws on an invalid or duplicate command id.
+ */
+function createUiToolCommandProvider(options) {
+    const commands = options.tools
+        .filter((tool) => tool.definitionId.trim() && tool.label.trim())
+        .map(toCommand);
+    const commandIds = new Set();
+    for (const { commandId } of commands) {
+        if (commandIds.has(commandId)) {
+            throw new Error(`Duplicate UI tool command id: ${commandId}`);
+        }
+        commandIds.add(commandId);
+    }
+    return {
+        id: options.id ?? 'ui-tools',
+        trigger: '/',
+        search({ query, context, limit }) {
+            const roles = new Set(context.roles ?? []);
+            const needle = fold(query);
+            return commands
+                .filter(({ tool }) => !tool.allowedRoles?.length
+                || tool.allowedRoles.some((role) => roles.has(role)))
+                .map((command) => ({ command, rank: rank(command, needle) }))
+                .filter((candidate) => candidate.rank !== undefined)
+                .sort((left, right) => left.rank - right.rank
+                || left.command.tool.label.localeCompare(right.command.tool.label))
+                .slice(0, limit)
+                .map(({ command: { tool, commandId, args, carriesTool } }) => ({
+                id: commandId,
+                type: 'command',
+                label: tool.label,
+                ...(tool.description ? { description: tool.description } : {}),
+                ...(carriesTool ? { definitionId: tool.definitionId } : {}),
+                ...(args ? { args } : {}),
+            }));
+        },
+    };
+}

package/dist/cjs/react/components/activity-log.d.ts

@@ -0,0 +1,17 @@
+import type { ActivityStep } from '../utils/activity.js';
+export interface ActivityLogProps {
+    steps: ActivityStep[];
+    /** True while this message's turn still runs. */
+    active: boolean;
+    /** Pipeline stop or error text shown as the last line. */
+    notice?: string;
+    className?: string;
+}
+/**
+ * Collapsible work log of one assistant turn, modelled on how Claude Code
+ * shows tool calls: one line with a spinner while the turn runs, then a
+ * summary that expands to the steps in the order they ran.
+ *
+ * Keeps styling neutral via `data-*` attributes.
+ */
+export declare function ActivityLog({ steps, active, notice, className }: ActivityLogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/react/components/activity-log.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActivityLog = ActivityLog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const status_icon_js_1 = require("./status-icon.js");
+const STEP_ICONS = {
+    done: 'check',
+    error: 'error',
+    running: 'spinner',
+    waiting: 'pending',
+};
+/**
+ * The same tool run several times in a row with the same outcome reads as
+ * one line with its count. A step with its own detail text stays a line.
+ */
+function foldRepeatedSteps(steps) {
+    const lines = [];
+    for (const step of steps) {
+        const last = lines.at(-1);
+        if (last
+            && last.step.toolName === step.toolName
+            && last.step.status === step.status
+            && !last.step.detail
+            && !step.detail) {
+            last.count += 1;
+        }
+        else {
+            lines.push({ step, count: 1 });
+        }
+    }
+    return lines;
+}
+/**
+ * Collapsible work log of one assistant turn, modelled on how Claude Code
+ * shows tool calls: one line with a spinner while the turn runs, then a
+ * summary that expands to the steps in the order they ran.
+ *
+ * Keeps styling neutral via `data-*` attributes.
+ */
+function ActivityLog({ steps, active, notice, className }) {
+    const { locale, toolLabels } = (0, chat_context_js_1.useChatContext)();
+    if (steps.length === 0)
+        return null;
+    const label = (toolName) => toolLabels.labels?.[toolName]?.singular ?? toolName;
+    const running = steps.find((step) => step.status === 'running');
+    const failed = steps.filter((step) => step.status === 'error').length;
+    const waiting = steps.some((step) => step.status === 'waiting');
+    const state = running || active ? 'running' : waiting ? 'waiting' : failed > 0 ? 'error' : 'done';
+    let summaryIcon;
+    let summaryText;
+    if (state === 'running') {
+        summaryIcon = 'spinner';
+        summaryText = `${running ? label(running.toolName) : locale.activityWorkingLabel}…`;
+    }
+    else if (state === 'waiting') {
+        summaryIcon = 'pending';
+        summaryText = locale.activityWaitingLabel;
+    }
+    else {
+        summaryIcon = failed > 0 ? 'error' : 'check';
+        summaryText = steps.length === 1
+            ? locale.activityDoneOneLabel
+            : locale.activityDoneLabel.replace('{count}', String(steps.length));
+        if (failed > 0) {
+            summaryText += `, ${locale.activityFailedLabel.replace('{count}', String(failed))}`;
+        }
+    }
+    return ((0, jsx_runtime_1.jsxs)("details", { className: className, "data-component": "activity-log", "data-state": state, children: [(0, jsx_runtime_1.jsxs)("summary", { "data-element": "activity-summary", children: [(0, jsx_runtime_1.jsx)(status_icon_js_1.StatusIcon, { icon: summaryIcon }), (0, jsx_runtime_1.jsx)("span", { "data-element": "label", children: summaryText })] }), (0, jsx_runtime_1.jsx)("ol", { "data-element": "activity-steps", children: foldRepeatedSteps(steps).map(({ step, count }) => ((0, jsx_runtime_1.jsxs)("li", { "data-element": "activity-step", "data-status": step.status, children: [(0, jsx_runtime_1.jsx)(status_icon_js_1.StatusIcon, { icon: STEP_ICONS[step.status] }), (0, jsx_runtime_1.jsx)("span", { "data-element": "label", children: count > 1 ? toolLabels.labels?.[step.toolName]?.plural ?? label(step.toolName) : label(step.toolName) }), count > 1 && (0, jsx_runtime_1.jsxs)("span", { "data-element": "count", children: ["\u00D7", count] }), step.detail && (0, jsx_runtime_1.jsx)("span", { "data-element": "detail", children: step.detail })] }, step.id))) }), notice && (0, jsx_runtime_1.jsx)("p", { "data-element": "activity-notice", children: notice })] }));
+}

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

@@ -11,7 +11,7 @@ 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");
+const activity_js_1 = require("../utils/activity.js");
 /**
  * Batteries-included chat panel.
  *
@@ -22,11 +22,14 @@ const pipeline_timeline_js_1 = require("./pipeline-timeline.js");
  * 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 { classNames, hasMentions, hasCompletions, locale, isLoading, stop, error, messages, pipelineSteps, pipelineState, pendingApprovals, approvalReminder, approve, reject, isProcessingApproval, truncation, continueTruncation, dismissTruncation, components, themeVars, themeEffect, unstyled, } = (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);
+    // The work log lives in each assistant bubble; a pipeline bar only shows
+    // when the app supplies its own component.
+    const PipelineTimelineComponent = components.PipelineTimeline;
+    const InputComponent = components.ChatInput
+        ?? (hasMentions || hasCompletions ? 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();
@@ -54,14 +57,18 @@ function AiChatPanel({ className, welcomeMessage }) {
         const lastAssistant = [...messages].reverse().find(m => m.role === 'assistant');
         if (!lastAssistant)
             return true;
+        // The activity log already shows a spinner for running tools.
+        if ((0, activity_js_1.readActivitySteps)(lastAssistant.parts, () => false).length > 0
+            || ((0, activity_js_1.readLatestPlan)(lastAssistant.parts)?.length ?? 0) >= 2)
+            return false;
         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: () => {
+    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, "data-unstyled": unstyled || undefined, style: themeVars, children: [error && ((0, jsx_runtime_1.jsx)("div", { "data-component": "error-banner", role: "alert", children: locale.errorMessage })), PipelineTimelineComponent && ((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, {})] }));
+                }, isProcessing: isProcessingApproval }, `bulk-${group[0].toolName}`))), approvalReminder && pendingApprovals.length > 0 && ((0, jsx_runtime_1.jsx)("div", { "data-component": "approval-reminder", role: "status", children: locale.approvalPendingHint })), 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

@@ -1,2 +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;
+export declare function AiTriggerButton({ onClickChat, onClickMic, isRecording, isConnecting, recordingStream, recordingTranscript, 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

@@ -7,7 +7,7 @@ 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");
+const stream_waveform_js_1 = require("./stream-waveform.js");
 // ---------------------------------------------------------------------------
 // Inline SVG icons (no lucide-react dependency)
 // ---------------------------------------------------------------------------
@@ -101,88 +101,33 @@ function injectStyles() {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(-25%); }
     }
-    [data-component="ai-trigger-button"] [data-dot] {
+    [data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) [data-dot] {
       animation: ai-trigger-bounce 1.4s ease-in-out infinite;
     }
-    [data-component="ai-trigger-button"] [data-dot="2"] {
+    [data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) [data-dot="2"] {
       animation-delay: 0.15s;
     }
-    [data-component="ai-trigger-button"] [data-dot="3"] {
+    [data-component="ai-trigger-button"]:where(:not([data-unstyled], [data-unstyled] *)) [data-dot="3"] {
       animation-delay: 0.3s;
     }
   `;
     document.head.appendChild(style);
 }
 // ---------------------------------------------------------------------------
-// ConnectingDots — shown while connecting or as wavesurfer fallback
+// ConnectingDots — shown while the speech provider connects.
 // ---------------------------------------------------------------------------
 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, }) {
+function AiTriggerButton({ onClickChat, onClickMic, isRecording, isConnecting, recordingStream, recordingTranscript, 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 ctx = (0, react_1.useContext)(chat_context_js_1.ChatContext);
+    const themeVars = ctx?.themeVars ?? {};
+    const unstyled = ctx?.unstyled ?? false;
     const { position, isDragging, onMouseDown, wasDragged, resetPosition } = (0, use_draggable_position_js_1.useDraggablePosition)({
         enabled: draggable,
         persistKey: persistPosition || false,
@@ -207,7 +152,7 @@ function AiTriggerButton({ onClickChat, onClickMic, isRecording, isConnecting, o
     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 })] }) }));
+        const content = ((0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, style: wrapperStyle, "data-component": "ai-trigger-button", "data-state": state, "data-unstyled": unstyled || undefined, 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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(stream_waveform_js_1.StreamWaveform, { stream: recordingStream }), (0, jsx_runtime_1.jsx)("span", { "aria-live": "polite", style: { flex: 2, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: recordingTranscript || '…' })] })) }), (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 ----
@@ -234,6 +179,6 @@ function AiTriggerButton({ onClickChat, onClickMic, isRecording, isConnecting, o
                         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 }));
+    const content = ((0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, style: wrapperStyle, "data-component": "ai-trigger-button", "data-state": "idle", "data-unstyled": unstyled || undefined, "data-dragging": isDragging || undefined, children: wrapped }));
     return portal ? (0, react_dom_1.createPortal)(content, document.body) : content;
 }

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const chat_context_js_1 = require("../provider/chat-context.js");
 const voice_input_addon_js_1 = require("./voice-input-addon.js");
+const chat_window_visibility_js_1 = require("./chat-window-visibility.js");
 /**
  * Plain chat input field with submit handling.
  *
@@ -14,6 +15,7 @@ const voice_input_addon_js_1 = require("./voice-input-addon.js");
  * Toggles between send and stop button based on loading state.
  */
 function ChatInput({ className, onSubmit }) {
+    const visible = (0, react_1.useContext)(chat_window_visibility_js_1.ChatWindowVisibilityContext);
     const { send, stop, isLoading, classNames, locale, components, voice } = (0, chat_context_js_1.useChatContext)();
     const [value, setValue] = (0, react_1.useState)('');
     const InputExtra = components.InputExtra;
@@ -43,8 +45,8 @@ function ChatInput({ className, onSubmit }) {
         if (onSubmit) {
             onSubmit(trimmed);
         }
-        else {
-            send(trimmed);
+        else if (!send(trimmed)) {
+            return;
         }
         setValue('');
     }, [value, isLoading, onSubmit, send]);
@@ -54,7 +56,7 @@ function ChatInput({ className, onSubmit }) {
             handleSubmit(e);
         }
     }, [handleSubmit]);
-    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: className ?? classNames.input, "data-component": "chat-input", children: [(0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, autoFocus: true, value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: locale.placeholder, disabled: isLoading, rows: 1, "data-state": isLoading ? 'loading' : 'idle' }), voice.enabled && ((0, jsx_runtime_1.jsx)(voice_input_addon_js_1.VoiceInputAddon, { disabled: isLoading, language: voice.language ?? 'de', baseUrl: voice.baseUrl, getToken: voice.getToken, onTranscript: (text) => {
+    return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, className: className ?? classNames.input, "data-component": "chat-input", children: [(0, jsx_runtime_1.jsx)("textarea", { ref: textareaRef, autoFocus: visible, value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, placeholder: locale.placeholder, disabled: isLoading, rows: 1, "data-state": isLoading ? 'loading' : 'idle' }), voice.enabled && ((0, jsx_runtime_1.jsx)(voice_input_addon_js_1.VoiceInputAddon, { disabled: isLoading, language: voice.language ?? 'de', baseUrl: voice.baseUrl, getToken: voice.getToken, onTranscript: (text) => {
                     setValue((prev) => (prev.length > 0 ? `${prev} ${text}` : text));
-                }, onError: voice.onError, showRecordingBar: voice.recordingBar?.enabled ?? true, recordingBarVariant: voice.recordingBar?.variant ?? 'inline' })), InputExtra && (0, jsx_runtime_1.jsx)(InputExtra, {}), isLoading ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: stop, "data-action": "stop", children: locale.stopButton })) : ((0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !value.trim(), "data-action": "send", children: locale.sendButton }))] }));
+                }, onError: voice.onError, showRecordingBar: voice.recordingBar?.enabled ?? true, recordingBarVariant: voice.recordingBar?.variant ?? 'inline', adapter: voice.adapter, pushToTalk: voice.pushToTalk, routeKey: voice.routeKey })), InputExtra && (0, jsx_runtime_1.jsx)(InputExtra, {}), isLoading ? ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: stop, "data-action": "stop", children: locale.stopButton })) : ((0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: !value.trim(), "data-action": "send", children: locale.sendButton }))] }));
 }

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

@@ -0,0 +1,3 @@
+/** Internal presentation signal, not a second recording/session owner.
+ * Standalone components are visible unless a retained window hides them. */
+export declare const ChatWindowVisibilityContext: import("react").Context<boolean>;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatWindowVisibilityContext = void 0;
+const react_1 = require("react");
+/** Internal presentation signal, not a second recording/session owner.
+ * Standalone components are visible unless a retained window hides them. */
+exports.ChatWindowVisibilityContext = (0, react_1.createContext)(true);

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

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