glirastes 0.3.0 → 0.3.1

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

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MentionInput = MentionInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mention_chip_js_1 = require("./mention-chip.js");
+const rich_mention_input_js_1 = require("./rich-mention-input.js");
+const voice_input_addon_js_1 = require("./voice-input-addon.js");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const mention_markup_js_1 = require("../utils/mention-markup.js");
+/**
+ * Chat input with mention autocomplete support.
+ *
+ * Uses `RichMentionInput` for editing, provides autocomplete for `@` and `/`,
+ * and keeps selected mentions in provider state for serialization on send.
+ */
+function MentionInput({ className, onSubmit }) {
+    const { send, stop, isLoading, classNames, locale, components, mentionResults, setMentionSearch, clearMentionSearch, isMentionSearching, hasMentions, mentionConfig, addActiveMention, removeActiveMention, clearActiveMentions, activeMentions, voice, } = (0, chat_context_js_1.useChatContext)();
+    const [value, setValue] = (0, react_1.useState)('');
+    const inputRef = (0, react_1.useRef)(null);
+    const InputExtra = components.InputExtra;
+    const detectMentionQuery = (0, react_1.useCallback)((text) => {
+        const match = text.match(/(?:^|\s)([@/])([a-zA-Z0-9._-]{1,80})$/);
+        if (!match)
+            return null;
+        return {
+            trigger: match[1],
+            query: match[2] ?? '',
+        };
+    }, []);
+    const updateValue = (0, react_1.useCallback)((nextValue) => {
+        setValue(nextValue);
+        if (!hasMentions)
+            return;
+        const mentionState = detectMentionQuery(nextValue);
+        if (mentionState && mentionState.query.length > 0) {
+            setMentionSearch(mentionState.query, mentionState.trigger);
+            return;
+        }
+        clearMentionSearch();
+    }, [clearMentionSearch, detectMentionQuery, hasMentions, setMentionSearch]);
+    const handleSubmit = (0, react_1.useCallback)((message) => {
+        const trimmed = message.trim();
+        if (!trimmed || isLoading)
+            return;
+        if (onSubmit) {
+            onSubmit(trimmed);
+        }
+        else {
+            send(trimmed);
+        }
+        setValue('');
+        clearMentionSearch();
+        clearActiveMentions();
+    }, [clearActiveMentions, clearMentionSearch, isLoading, onSubmit, send]);
+    const selectedMentionIds = (0, react_1.useMemo)(() => new Set(activeMentions.map((mention) => String(mention.id))), [activeMentions]);
+    const applyMention = (0, react_1.useCallback)(async (result) => {
+        const mentionState = detectMentionQuery(value);
+        const prefix = mentionState?.trigger ?? (0, mention_markup_js_1.inferMentionPrefix)(result.type);
+        const explicitSlug = result.slug;
+        const slug = typeof explicitSlug === 'string' && explicitSlug.trim().length > 0
+            ? explicitSlug.trim()
+            : (0, mention_markup_js_1.normalizeMentionSlug)(result.label);
+        const token = `${prefix}${slug}`;
+        const replaced = value.replace(/(^|\s)([@/])[a-zA-Z0-9._-]*$/, `$1${token} `);
+        const nextValue = replaced === value
+            ? `${value.trimEnd()} ${token} `.trimStart()
+            : replaced;
+        let resolved = {};
+        if (mentionConfig?.resolve) {
+            try {
+                resolved = await mentionConfig.resolve(result.id, result.type);
+            }
+            catch {
+                resolved = {};
+            }
+        }
+        addActiveMention({
+            ...resolved,
+            id: result.id,
+            type: result.type,
+            label: result.label,
+            displayName: typeof resolved.displayName === 'string' ? resolved.displayName : result.label,
+            slug,
+            prefix,
+        });
+        updateValue(nextValue);
+        clearMentionSearch();
+        inputRef.current?.focus();
+    }, [
+        addActiveMention,
+        clearMentionSearch,
+        detectMentionQuery,
+        mentionConfig,
+        updateValue,
+        value,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-component": "mention-input", children: [(0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                    event.preventDefault();
+                    handleSubmit(value);
+                }, className: className ?? classNames.input, children: [(0, jsx_runtime_1.jsx)(mention_chip_js_1.MentionChipList, { mentions: activeMentions.map((mention) => ({
+                            id: String(mention.id),
+                            type: String(mention.type),
+                            displayName: typeof mention.displayName === 'string'
+                                ? mention.displayName
+                                : typeof mention.label === 'string'
+                                    ? mention.label
+                                    : String(mention.id),
+                            slug: typeof mention.slug === 'string' ? mention.slug : undefined,
+                            prefix: typeof mention.prefix === 'string' ? mention.prefix : undefined,
+                        })), onRemove: removeActiveMention }), (0, jsx_runtime_1.jsx)(rich_mention_input_js_1.RichMentionInput, { ref: inputRef, value: value, onChange: updateValue, onSubmit: handleSubmit, placeholder: locale.placeholder, disabled: isLoading }), 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) => {
+                            const nextValue = value.length > 0 ? `${value} ${text}` : text;
+                            updateValue(nextValue);
+                        }, 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 }))] }), hasMentions && mentionResults.length > 0 && ((0, jsx_runtime_1.jsx)("div", { "data-component": "mention-dropdown", "data-state": isMentionSearching ? 'searching' : 'idle', children: mentionResults.map((result) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => {
+                        void applyMention(result);
+                    }, "data-mention-type": result.type, "data-selected": selectedMentionIds.has(result.id) ? 'true' : 'false', children: [result.label, result.description && ((0, jsx_runtime_1.jsx)("span", { "data-element": "description", children: result.description }))] }, result.id))) }))] }));
+}

package/dist/cjs/react/components/message-bubble.d.ts

@@ -0,0 +1,11 @@
+import type { MessageBubbleProps } from '../types.js';
+/**
+ * Single message bubble.
+ *
+ * Renders text parts via Markdown component, mention markers as chips,
+ * tool results via ToolResultBlock, and handles AI SDK 5.x/6.x tool part
+ * format (`type: 'tool-{name}'`).
+ *
+ * Uses `data-role` attribute for styling (user/assistant/system).
+ */
+export declare function MessageBubble({ message, className }: MessageBubbleProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/react/components/message-bubble.js

@@ -0,0 +1,171 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageBubble = MessageBubble;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mention_chip_js_1 = require("./mention-chip.js");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const mention_markup_js_1 = require("../utils/mention-markup.js");
+const ReactMarkdown = (0, react_1.lazy)(async () => {
+    try {
+        const mod = await Promise.resolve().then(() => __importStar(require('react-markdown')));
+        return { default: mod.default };
+    }
+    catch {
+        if (typeof console !== 'undefined') {
+            console.warn('[MessageBubble] react-markdown is not installed — falling back to plain text. Install it with: npm install react-markdown');
+        }
+        const Fallback = (({ children }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof children === 'string' ? children : '' })));
+        return { default: Fallback };
+    }
+});
+function isRecord(value) {
+    return typeof value === 'object' && value !== null;
+}
+function shouldRenderToolResult(toolName, mode, allowlist) {
+    if (mode === 'hidden')
+        return false;
+    if (mode === 'allowlist')
+        return allowlist.includes(toolName);
+    return true;
+}
+function isTextPart(part) {
+    return isRecord(part) && part.type === 'text' && typeof part.text === 'string';
+}
+/**
+ * Single message bubble.
+ *
+ * Renders text parts via Markdown component, mention markers as chips,
+ * tool results via ToolResultBlock, and handles AI SDK 5.x/6.x tool part
+ * format (`type: 'tool-{name}'`).
+ *
+ * Uses `data-role` attribute for styling (user/assistant/system).
+ */
+function MessageBubble({ message, className }) {
+    const { classNames, components, toolResults } = (0, chat_context_js_1.useChatContext)();
+    const MarkdownComponent = components.Markdown ?? DefaultMarkdown;
+    const ToolResultComponent = components.ToolResultBlock ?? DefaultToolResult;
+    const MentionChipComponent = components.MentionChip ?? mention_chip_js_1.MentionChip;
+    const mode = toolResults.mode ?? 'default';
+    const allowlist = toolResults.allowlist ?? [];
+    // Extract tool result summaries as fallback text when no text parts exist
+    const cleanTextParts = message.parts
+        .filter(isTextPart)
+        .filter((p) => p.text.trim())
+        .map((p) => (0, mention_markup_js_1.stripContextBlocks)(p.text));
+    const hasTextContent = cleanTextParts.some((text) => text.trim().length > 0);
+    // Build fallback summary from tool outputs
+    let fallbackSummary = '';
+    if (!hasTextContent && message.role === 'assistant') {
+        const summaries = [];
+        for (const part of message.parts) {
+            if (!isRecord(part))
+                continue;
+            const partType = typeof part.type === 'string' ? part.type : '';
+            // Handle tool-{name} parts (AI SDK 5.x/6.x format)
+            if (partType.startsWith('tool-') && part.state === 'output-available' && isRecord(part.output)) {
+                if (typeof part.output.message === 'string') {
+                    summaries.push(part.output.message);
+                }
+            }
+            // Handle tool-result parts
+            if (partType === 'tool-result' && isRecord(part.result)) {
+                if (typeof part.result.message === 'string') {
+                    summaries.push(part.result.message);
+                }
+            }
+        }
+        fallbackSummary = summaries[0] ?? '';
+    }
+    // Skip truly empty assistant messages
+    if (message.role === 'assistant' && !hasTextContent && !fallbackSummary) {
+        const hasToolOutput = message.parts.some(p => {
+            if (!isRecord(p))
+                return false;
+            const t = typeof p.type === 'string' ? p.type : '';
+            return (t.startsWith('tool-') && p.state === 'output-available') || t === 'tool-result';
+        });
+        if (!hasToolOutput)
+            return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className ?? classNames.messageBubble, "data-component": "message-bubble", "data-role": message.role, children: [cleanTextParts.map((text, i) => {
+                const segments = (0, mention_markup_js_1.parseMentionSegments)(text);
+                const hasMention = segments.some((segment) => segment.kind === 'mention');
+                if (!hasMention) {
+                    if (!text.trim())
+                        return null;
+                    return ((0, jsx_runtime_1.jsx)(MarkdownComponent, { content: text }, `text-${i}`));
+                }
+                return ((0, jsx_runtime_1.jsx)("div", { "data-component": "message-rich-text", children: segments.map((segment, index) => {
+                        if (segment.kind === 'text') {
+                            if (!segment.text)
+                                return null;
+                            return ((0, jsx_runtime_1.jsx)("span", { "data-component": "message-rich-text-part", children: segment.text }, `segment-text-${index}`));
+                        }
+                        return ((0, jsx_runtime_1.jsx)(MentionChipComponent, { mention: segment.mention, inline: true }, `segment-mention-${index}`));
+                    }) }, `mention-text-${i}`));
+            }), !hasTextContent && fallbackSummary && ((0, jsx_runtime_1.jsx)(MarkdownComponent, { content: fallbackSummary })), message.parts.map((part, i) => {
+                // Standard ToolResultPart
+                if ('toolName' in part && 'result' in part && part.result !== undefined) {
+                    if (!shouldRenderToolResult(part.toolName, mode, allowlist))
+                        return null;
+                    return ((0, jsx_runtime_1.jsx)(ToolResultComponent, { toolName: part.toolName, result: part.result }, `tool-${i}`));
+                }
+                // AI SDK 5.x/6.x tool-{name} parts with output
+                if (isRecord(part)) {
+                    const partType = typeof part.type === 'string' ? part.type : '';
+                    if (partType.startsWith('tool-') && part.state === 'output-available' && part.output !== undefined) {
+                        const toolName = partType.replace('tool-', '');
+                        // Skip suggest_followups — handled by suggestion system
+                        if (toolName === 'suggest_followups')
+                            return null;
+                        if (!shouldRenderToolResult(toolName, mode, allowlist))
+                            return null;
+                        return ((0, jsx_runtime_1.jsx)(ToolResultComponent, { toolName: toolName, result: part.output }, `tool-${i}`));
+                    }
+                }
+                return null;
+            })] }));
+}
+function DefaultMarkdown({ content, className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, "data-component": "markdown", children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content }), children: (0, jsx_runtime_1.jsx)(ReactMarkdown, { children: content }) }) }));
+}
+function DefaultToolResult({ toolName, result, className, }) {
+    if (isRecord(result) && typeof result.message === 'string' && result.message.trim().length > 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: className, "data-component": "tool-result", "data-tool": toolName, children: result.message }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("details", { className: className, "data-component": "tool-result", "data-tool": toolName, children: [(0, jsx_runtime_1.jsx)("summary", { children: toolName }), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(result, null, 2) })] }));
+}

package/dist/cjs/react/components/message-list.d.ts

@@ -0,0 +1,8 @@
+import type { MessageListProps } from '../types.js';
+/**
+ * Scrollable message list with auto-scroll and pagination.
+ *
+ * Uses the `MessageBubble` component from provider config or the default.
+ * Supports `loadMore` for infinite scroll upwards.
+ */
+export declare function MessageList({ className }: MessageListProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/react/components/message-list.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageList = MessageList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+const message_bubble_js_1 = require("./message-bubble.js");
+/**
+ * Scrollable message list with auto-scroll and pagination.
+ *
+ * Uses the `MessageBubble` component from provider config or the default.
+ * Supports `loadMore` for infinite scroll upwards.
+ */
+function MessageList({ className }) {
+    const { messages, isLoading, hasMore, loadMore, classNames, components, locale } = (0, chat_context_js_1.useChatContext)();
+    const endRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const userScrolledRef = (0, react_1.useRef)(false);
+    const BubbleComponent = components.MessageBubble ?? message_bubble_js_1.MessageBubble;
+    // New message: reset user-scroll and force scroll to bottom.
+    (0, react_1.useEffect)(() => {
+        userScrolledRef.current = false;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const id = requestAnimationFrame(() => { el.scrollTop = el.scrollHeight; });
+        return () => cancelAnimationFrame(id);
+    }, [messages.length]);
+    // Streaming chunks & loading-state changes: keep at bottom unless user scrolled up.
+    (0, react_1.useEffect)(() => {
+        if (userScrolledRef.current)
+            return;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const id = requestAnimationFrame(() => { el.scrollTop = el.scrollHeight; });
+        return () => cancelAnimationFrame(id);
+    }, [messages, isLoading]);
+    // Detect user scroll: programmatic scroll lands at scrollHeight (dist ≈ 0),
+    // user scroll-up moves away from bottom (dist > 80).
+    const handleScroll = (0, react_1.useCallback)(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const dist = el.scrollHeight - el.scrollTop - el.clientHeight;
+        if (dist <= 2)
+            userScrolledRef.current = false;
+        else if (dist > 80)
+            userScrolledRef.current = true;
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, onScroll: handleScroll, className: className ?? classNames.messageList, "data-component": "message-list", children: [hasMore && ((0, jsx_runtime_1.jsx)("button", { onClick: loadMore, "data-action": "load-more", children: locale.loadMoreButton ?? 'Load more' })), messages.map((message) => ((0, jsx_runtime_1.jsx)(BubbleComponent, { message: message }, message.id))), (0, jsx_runtime_1.jsx)("div", { ref: endRef })] }));
+}

package/dist/cjs/react/components/pipeline-timeline.d.ts

@@ -0,0 +1,7 @@
+import type { PipelineTimelineProps } from '../types.js';
+/**
+ * Vertical step timeline for the streamed pipeline report.
+ *
+ * Keeps styling neutral via `data-*` attributes.
+ */
+export declare function PipelineTimeline({ steps, pipelineState, isLoading, onStop, className, }: PipelineTimelineProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/react/components/pipeline-timeline.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PipelineTimeline = PipelineTimeline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const chat_context_js_1 = require("../provider/chat-context.js");
+function statusLabel(status, labels) {
+    switch (status) {
+        case 'running':
+            return labels.running;
+        case 'completed':
+            return labels.completed;
+        case 'safety-stop':
+            return labels.safetyStop;
+        case 'aborted':
+            return labels.aborted;
+        case 'error':
+            return labels.error;
+        default:
+            return labels.running;
+    }
+}
+/**
+ * Vertical step timeline for the streamed pipeline report.
+ *
+ * Keeps styling neutral via `data-*` attributes.
+ */
+function PipelineTimeline({ steps, pipelineState, isLoading, onStop, className, }) {
+    const { classNames, locale, toolLabels, pipelineMessageTranslator, stepSummaryFormatter } = (0, chat_context_js_1.useChatContext)();
+    /** Translate a raw tool name via toolLabels (singular/plural). */
+    const translateToolCalls = (toolCalls) => {
+        const labelMap = toolLabels.labels;
+        if (!labelMap)
+            return toolCalls.join(', ');
+        return toolCalls
+            .map((name) => {
+            const entry = labelMap[name];
+            return entry ? entry.singular : name;
+        })
+            .join(', ');
+    };
+    const currentStatus = pipelineState?.status ?? (isLoading ? 'running' : null);
+    const labels = (0, react_1.useMemo)(() => ({
+        running: locale.pipelineRunningLabel ?? 'Running',
+        completed: locale.pipelineCompletedLabel ?? 'Completed',
+        safetyStop: locale.pipelineSafetyStopLabel ?? 'Safety stop',
+        aborted: locale.pipelineAbortedLabel ?? 'Stopped',
+        error: locale.pipelineErrorLabel ?? 'Error',
+        step: locale.pipelineStepLabel ?? 'Step',
+        approvalPending: locale.pipelineApprovalPendingLabel ?? 'Approval pending',
+    }), [locale]);
+    const [collapsed, setCollapsed] = (0, react_1.useState)(true);
+    const scrollRef = (0, react_1.useRef)(null);
+    // Auto-scroll to bottom when new steps arrive
+    (0, react_1.useEffect)(() => {
+        if (!collapsed && scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+    }, [steps.length, collapsed]);
+    const hasContent = steps.length > 0 || currentStatus !== null;
+    if (!hasContent)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("section", { className: className ?? classNames.pipelineTimeline, "data-component": "pipeline-timeline", "data-state": currentStatus ?? 'idle', "data-collapsed": collapsed ? 'true' : 'false', children: [(0, jsx_runtime_1.jsxs)("div", { "data-element": "header", onClick: () => setCollapsed(c => !c), role: "button", tabIndex: 0, onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    setCollapsed(c => !c);
+                } }, children: [(0, jsx_runtime_1.jsxs)("div", { "data-element": "header-left", children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "chevron", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("strong", { children: locale.pipelineTitle ?? 'Pipeline' }), collapsed && steps.length > 0 && ((0, jsx_runtime_1.jsx)("span", { "data-element": "step-count", children: steps.length }))] }), (0, jsx_runtime_1.jsxs)("div", { "data-element": "header-right", children: [currentStatus && ((0, jsx_runtime_1.jsx)("span", { "data-element": "status", children: statusLabel(currentStatus, labels) })), isLoading && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => { e.stopPropagation(); onStop?.(); }, "data-action": "stop-pipeline", children: locale.stopButton }))] })] }), !collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("ol", { "data-element": "steps", ref: scrollRef, children: steps.map((step) => {
+                            const summary = stepSummaryFormatter ? stepSummaryFormatter(step) : step.summary;
+                            return ((0, jsx_runtime_1.jsxs)("li", { "data-element": "step", "data-status": step.requiresApproval ? 'approval-pending' : 'completed', title: summary, children: [(0, jsx_runtime_1.jsx)("span", { "data-element": "title", children: step.stepNumber + 1 }), step.toolCalls.length > 0 ? ((0, jsx_runtime_1.jsx)("span", { "data-element": "tools", children: translateToolCalls(step.toolCalls) })) : ((0, jsx_runtime_1.jsx)("span", { "data-element": "summary", children: summary })), step.requiresApproval && ((0, jsx_runtime_1.jsx)("span", { "data-element": "approval", children: labels.approvalPending }))] }, `step-${step.stepNumber}`));
+                        }) }), pipelineState?.message && ((0, jsx_runtime_1.jsx)("p", { "data-element": "message", children: pipelineMessageTranslator
+                            ? pipelineMessageTranslator(pipelineState.message)
+                            : pipelineState.message }))] }))] }));
+}

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

@@ -0,0 +1,2 @@
+import type { RecordingBarProps } from '../types.js';
+export declare function RecordingBar(props: RecordingBarProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecordingBar = RecordingBar;
+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 wavesurfer_loader_js_1 = require("./wavesurfer-loader.js");
+function joinClassNames(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function LiveWave({ className }) {
+    const containerRef = (0, react_1.useRef)(null);
+    const [loadFailed, setLoadFailed] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const container = containerRef.current;
+        if (!container)
+            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,
+                waveColor: '#000000',
+                height: 28,
+                barWidth: 2,
+                barGap: 1,
+                barRadius: 2,
+                cursorWidth: 0,
+                interact: false,
+                normalize: true,
+            });
+            const record = ws.registerPlugin(RecordPlugin.create({
+                scrollingWaveform: true,
+                scrollingWaveformWindow: 5,
+                renderRecordedAudio: false,
+            }));
+            void record.startMic().catch(() => {
+                // Ignore: mic permissions may be handled by the transcription hook.
+            });
+            cleanupRef.current = () => {
+                record.stopMic();
+                record.destroy();
+                ws.destroy();
+            };
+        })
+            .catch((err) => {
+            console.warn('[RecordingBar] 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)(LoadingDots, {});
+    }
+    return (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: joinClassNames('glirastes-recording-wave', className) });
+}
+function LoadingDots() {
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-part": "loading-dots", style: { display: 'flex', gap: '4px', alignItems: 'center', justifyContent: 'center' }, children: [(0, jsx_runtime_1.jsx)("span", { "data-dot": "1", style: { width: '6px', height: '6px', borderRadius: '50%', background: 'currentColor', animation: 'dot-pulse 1.4s ease-in-out infinite' } }), (0, jsx_runtime_1.jsx)("span", { "data-dot": "2", style: { width: '6px', height: '6px', borderRadius: '50%', background: 'currentColor', animation: 'dot-pulse 1.4s ease-in-out 0.2s infinite' } }), (0, jsx_runtime_1.jsx)("span", { "data-dot": "3", style: { width: '6px', height: '6px', borderRadius: '50%', background: 'currentColor', animation: 'dot-pulse 1.4s ease-in-out 0.4s infinite' } })] }));
+}
+function RecordingBarInner({ isConnecting, onCancel, onStop, variant, className, }) {
+    const handleCancel = (0, react_1.useCallback)(() => onCancel(), [onCancel]);
+    const handleStop = (0, react_1.useCallback)(() => onStop(), [onStop]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: joinClassNames('glirastes-recording-bar', variant === 'trigger' ? 'glirastes-recording-bar-trigger' : 'glirastes-recording-bar-inline', className), "data-component": "recording-bar", "data-variant": variant, style: { display: 'flex', alignItems: 'center', gap: '8px', ...(variant === 'inline' ? { height: '36px' } : {}) }, children: [(0, jsx_runtime_1.jsx)(recording_controls_js_1.CancelButton, { onClick: handleCancel, ariaLabel: "Aufnahme abbrechen", title: "Aufnahme abbrechen" }), (0, jsx_runtime_1.jsx)("div", { "data-part": "wave-container", style: { flex: 1, minWidth: 0, display: 'flex', alignItems: 'center' }, children: isConnecting ? (0, jsx_runtime_1.jsx)(LoadingDots, {}) : (0, jsx_runtime_1.jsx)(LiveWave, {}) }), (0, jsx_runtime_1.jsx)(recording_controls_js_1.StopButton, { onClick: handleStop, ariaLabel: "Aufnahme stoppen", title: "Aufnahme stoppen" })] }));
+}
+function RecordingBar(props) {
+    if (props.variant === 'trigger') {
+        if (typeof document === 'undefined')
+            return null;
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { "data-component": "recording-bar-portal", children: (0, jsx_runtime_1.jsx)(RecordingBarInner, { ...props }) }), document.body);
+    }
+    return (0, jsx_runtime_1.jsx)(RecordingBarInner, { ...props });
+}

package/dist/cjs/react/components/recording-controls.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Shared cancel / stop buttons used by both AiTriggerButton and RecordingBar.
+ * All styling is done via inline styles so the buttons render identically
+ * regardless of the host CSS context (portal, chat panel, etc.).
+ */
+interface CancelButtonProps {
+    onClick: () => void;
+    ariaLabel?: string;
+    title?: string;
+}
+export declare function CancelButton({ onClick, ariaLabel, title }: CancelButtonProps): import("react/jsx-runtime").JSX.Element;
+interface StopButtonProps {
+    onClick: () => void;
+    ariaLabel?: string;
+    title?: string;
+}
+export declare function StopButton({ onClick, ariaLabel, title }: StopButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/react/components/recording-controls.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CancelButton = CancelButton;
+exports.StopButton = StopButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function CancelButton({ onClick, ariaLabel = 'Cancel recording', title }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, "aria-label": ariaLabel, title: title, "data-element": "cancel-button", style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '28px',
+            height: '28px',
+            borderRadius: '9999px',
+            flexShrink: 0,
+            border: 'none',
+            background: 'transparent',
+            color: 'inherit',
+            cursor: 'pointer',
+            position: 'relative',
+            zIndex: 10,
+            padding: 0,
+        }, children: (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: "M18 6 6 18" }), (0, jsx_runtime_1.jsx)("path", { d: "m6 6 12 12" })] }) }));
+}
+function StopButton({ onClick, ariaLabel = 'Stop recording', title }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, "aria-label": ariaLabel, title: title, "data-element": "stop-button", style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '28px',
+            height: '28px',
+            borderRadius: '9999px',
+            flexShrink: 0,
+            border: 'none',
+            backgroundColor: 'hsl(0 84% 60%)',
+            cursor: 'pointer',
+            padding: 0,
+        }, children: (0, jsx_runtime_1.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "white", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("rect", { x: "0", y: "0", width: "10", height: "10", rx: "2" }) }) }));
+}

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

@@ -0,0 +1,2 @@
+import type { RichMentionInputHandle, RichMentionInputProps } from '../types.js';
+export declare const RichMentionInput: import("react").ForwardRefExoticComponent<RichMentionInputProps & import("react").RefAttributes<RichMentionInputHandle>>;