glirastes 0.4.0 → 0.5.0

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

@@ -3,18 +3,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MentionInput = MentionInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const command_arguments_form_js_1 = require("./command-arguments-form.js");
 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.
+ * Chat input with `@` mention and `/` command autocomplete.
  *
- * Uses `RichMentionInput` for editing, provides autocomplete for `@` and `/`,
- * and keeps selected mentions in provider state for serialization on send.
+ * With `completionProviders` the editor searches the providers directly
+ * (debounced, arrow keys, Tab/Enter, Escape) and submits structured ids.
+ * Without them the legacy `mentions` flow is unchanged.
  */
-function MentionInput({ className, onSubmit }) {
+function MentionInput(props) {
+    const { completionSearch } = (0, chat_context_js_1.useChatContext)();
+    return completionSearch
+        ? (0, jsx_runtime_1.jsx)(ProviderMentionInput, { ...props })
+        : (0, jsx_runtime_1.jsx)(LegacyMentionInput, { ...props });
+}
+function ProviderMentionInput({ className, onSubmit }) {
+    const { send, stop, isLoading, classNames, locale, components, completionSearch, voice, runEntityAction, composerMentions, consumeComposerMentions, pendingCommand, submitPendingCommand, cancelPendingCommand, } = (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 ArgumentsForm = components.CommandArgumentsForm ?? command_arguments_form_js_1.CommandArgumentsForm;
+    // References added from outside the composer (`mentionEntity`).
+    (0, react_1.useEffect)(() => {
+        const handle = inputRef.current;
+        if (!handle || composerMentions.length === 0)
+            return;
+        for (const mention of composerMentions)
+            handle.addMention(mention);
+        consumeComposerMentions();
+        setValue(handle.getValue());
+    }, [composerMentions, consumeComposerMentions]);
+    const submit = (0, react_1.useCallback)((text, mentions) => {
+        const trimmed = text.trim();
+        if (!trimmed || isLoading)
+            return false;
+        if (onSubmit) {
+            onSubmit(trimmed);
+        }
+        else if (!send(trimmed, { mentions })) {
+            return false;
+        }
+        setValue('');
+        return true;
+    }, [isLoading, onSubmit, send]);
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-component": "mention-input", "data-mode": "providers", children: [pendingCommand && ((0, jsx_runtime_1.jsx)(ArgumentsForm, { pending: pendingCommand, onSubmit: (values, valueLabels) => {
+                    // Back to the editor only once the form is gone; while it keeps asking, focus stays in it.
+                    if (submitPendingCommand(values, valueLabels))
+                        inputRef.current?.focus();
+                }, onCancel: () => {
+                    cancelPendingCommand();
+                    inputRef.current?.focus();
+                } }, `${pendingCommand.commandId}:${JSON.stringify(pendingCommand.values)}:${pendingCommand.error ?? ''}`)), (0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+                    event.preventDefault();
+                    const handle = inputRef.current;
+                    if (handle && submit(handle.getValue(), handle.getMentions()))
+                        handle.clear();
+                }, className: className ?? classNames.input, children: [(0, jsx_runtime_1.jsx)(rich_mention_input_js_1.RichMentionInput, { ref: inputRef, onChange: setValue, onSubmit: (text, mentions) => { submit(text, mentions); }, onSearch: completionSearch, placeholder: locale.placeholder, disabled: isLoading, onEntityAction: (result, actionId) => runEntityAction({ type: result.type, id: result.id, label: result.label }, actionId), listLabel: locale.completionListLabel, resultsLabel: locale.completionResultsLabel }), 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 handle = inputRef.current;
+                            if (!handle)
+                                return;
+                            const current = handle.getValue();
+                            handle.setValue(current ? `${current} ${text}` : text, handle.getMentions());
+                        }, 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 }))] })] }));
+}
+function LegacyMentionInput({ 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);
@@ -46,8 +103,8 @@ function MentionInput({ className, onSubmit }) {
         if (onSubmit) {
             onSubmit(trimmed);
         }
-        else {
-            send(trimmed);
+        else if (!send(trimmed)) {
+            return;
         }
         setValue('');
         clearMentionSearch();
@@ -111,7 +168,7 @@ function MentionInput({ className, onSubmit }) {
                         })), 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: () => {
+                        }, 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 }))] }), 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.js

@@ -39,6 +39,16 @@ 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 followup_suggestions_js_1 = require("../utils/followup-suggestions.js");
+const clarification_js_1 = require("../utils/clarification.js");
+const clarification_card_js_1 = require("./clarification-card.js");
+const activity_log_js_1 = require("./activity-log.js");
+const plan_checklist_js_1 = require("./plan-checklist.js");
+const activity_js_1 = require("../utils/activity.js");
+const plan_js_1 = require("../../contracts/plan.js");
+const renderer_boundary_js_1 = require("../tool-renderers/renderer-boundary.js");
+const clarification_js_2 = require("../../contracts/clarification.js");
+const chat_command_js_1 = require("../../contracts/chat-command.js");
 const ReactMarkdown = (0, react_1.lazy)(async () => {
     try {
         const mod = await Promise.resolve().then(() => __importStar(require('react-markdown')));
@@ -56,12 +66,35 @@ function isRecord(value) {
     return typeof value === 'object' && value !== null;
 }
 function shouldRenderToolResult(toolName, mode, allowlist) {
+    // Follow-up registration is consumed by the suggestion system, not exposed
+    // as a raw tool result in either supported message-part format.
+    if (toolName === 'suggest_followups')
+        return false;
+    // Clarifications render as an answerable card, never as raw output.
+    if (toolName === clarification_js_2.CLARIFICATION_TOOL_NAME)
+        return false;
+    // The plan renders as a checklist.
+    if (toolName === plan_js_1.PLAN_TOOL_NAME)
+        return false;
     if (mode === 'hidden')
         return false;
     if (mode === 'allowlist')
         return allowlist.includes(toolName);
     return true;
 }
+/** Stop or failure of the latest turn, shown as the last activity line. */
+function pipelineNotice(state, locale) {
+    switch (state?.status) {
+        case 'safety-stop':
+            return locale.pipelineSafetyStopLabel;
+        case 'aborted':
+            return locale.pipelineAbortedLabel;
+        case 'error':
+            return locale.pipelineErrorLabel;
+        default:
+            return undefined;
+    }
+}
 function isTextPart(part) {
     return isRecord(part) && part.type === 'text' && typeof part.text === 'string';
 }
@@ -75,17 +108,38 @@ function isTextPart(part) {
  * Uses `data-role` attribute for styling (user/assistant/system).
  */
 function MessageBubble({ message, className }) {
-    const { classNames, components, toolResults } = (0, chat_context_js_1.useChatContext)();
+    const { classNames, components, toolResults, toolRendererRegistry, messages, send, isLoading, locale, pipelineState, } = (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 ClarificationComponent = components.ClarificationCard ?? clarification_card_js_1.ClarificationCard;
+    const isLatestMessage = messages?.[messages.length - 1]?.id === message.id;
+    const renderToolResult = (key, toolName, result) => {
+        const fallback = (0, jsx_runtime_1.jsx)(ToolResultComponent, { toolName: toolName, result: result }, key);
+        const resolved = toolRendererRegistry?.resolve(toolName, result);
+        if (!resolved)
+            return fallback;
+        const Renderer = resolved.renderer.component;
+        return ((0, jsx_runtime_1.jsx)(renderer_boundary_js_1.RendererBoundary, { fallback: (0, jsx_runtime_1.jsx)(ToolResultComponent, { toolName: toolName, result: result }), children: (0, jsx_runtime_1.jsx)("div", { "data-component": "tool-result", "data-tool": toolName, "data-renderer": resolved.renderer.definitionId, "data-schema-version": resolved.renderer.schemaVersion, children: (0, jsx_runtime_1.jsx)(Renderer, { definitionId: resolved.renderer.definitionId, toolName: toolName, schemaVersion: resolved.renderer.schemaVersion, output: resolved.output }) }) }, `${key}@${resolved.renderer.schemaVersion}`));
+    };
     const mode = toolResults.mode ?? 'default';
     const allowlist = toolResults.allowlist ?? [];
+    const isAssistant = message.role === 'assistant';
+    const activitySteps = isAssistant
+        ? (0, activity_js_1.readActivitySteps)(message.parts, (toolName) => shouldRenderToolResult(toolName, mode, allowlist))
+        : [];
+    const planItems = isAssistant ? (0, activity_js_1.readLatestPlan)(message.parts) : null;
+    const hasPlan = (planItems?.length ?? 0) >= 2;
+    const turnActive = isLatestMessage && isLoading;
+    const notice = isLatestMessage ? pipelineNotice(pipelineState, locale) : undefined;
     // 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));
+        .map((p) => (0, chat_command_js_1.stripChatCommandMarkers)((0, clarification_js_2.stripClarificationMarkers)((0, mention_markup_js_1.stripContextBlocks)(p.text))))
+        .map((text) => (message.role === 'assistant'
+        ? (0, followup_suggestions_js_1.extractTrailingFollowupSuggestions)(text).text
+        : text));
     const hasTextContent = cleanTextParts.some((text) => text.trim().length > 0);
     // Build fallback summary from tool outputs
     let fallbackSummary = '';
@@ -97,12 +151,17 @@ function MessageBubble({ message, className }) {
             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') {
+                const toolName = partType.replace('tool-', '');
+                if (shouldRenderToolResult(toolName, mode, allowlist)
+                    && typeof part.output.message === 'string') {
                     summaries.push(part.output.message);
                 }
             }
             // Handle tool-result parts
-            if (partType === 'tool-result' && isRecord(part.result)) {
+            if (partType === 'tool-result'
+                && typeof part.toolName === 'string'
+                && shouldRenderToolResult(part.toolName, mode, allowlist)
+                && isRecord(part.result)) {
                 if (typeof part.result.message === 'string') {
                     summaries.push(part.result.message);
                 }
@@ -111,17 +170,29 @@ function MessageBubble({ message, className }) {
         fallbackSummary = summaries[0] ?? '';
     }
     // Skip truly empty assistant messages
-    if (message.role === 'assistant' && !hasTextContent && !fallbackSummary) {
-        const hasToolOutput = message.parts.some(p => {
+    if (message.role === 'assistant'
+        && !hasTextContent
+        && !fallbackSummary
+        && activitySteps.length === 0
+        && !hasPlan) {
+        const hasVisibleToolOutput = message.parts.some(p => {
+            if ((0, clarification_js_1.readClarificationPart)(p))
+                return true;
             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 (t.startsWith('tool-') && p.state === 'output-available') {
+                const toolName = t.replace('tool-', '');
+                return shouldRenderToolResult(toolName, mode, allowlist);
+            }
+            return (t === 'tool-result'
+                && typeof p.toolName === 'string'
+                && shouldRenderToolResult(p.toolName, mode, allowlist));
         });
-        if (!hasToolOutput)
+        if (!hasVisibleToolOutput)
             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) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className ?? classNames.messageBubble, "data-component": "message-bubble", "data-role": message.role, children: [hasPlan && (0, jsx_runtime_1.jsx)(plan_checklist_js_1.PlanChecklist, { items: planItems, active: turnActive }), (0, jsx_runtime_1.jsx)(activity_log_js_1.ActivityLog, { steps: activitySteps, active: turnActive, notice: notice }), cleanTextParts.map((text, i) => {
                 const segments = (0, mention_markup_js_1.parseMentionSegments)(text);
                 const hasMention = segments.some((segment) => segment.kind === 'mention');
                 if (!hasMention) {
@@ -138,23 +209,28 @@ function MessageBubble({ message, className }) {
                         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) => {
+                const clarification = (0, clarification_js_1.readClarificationPart)(part);
+                if (clarification) {
+                    return ((0, jsx_runtime_1.jsx)(ClarificationComponent, { toolCallId: clarification.toolCallId, request: clarification.request, interactive: clarification.ready && isLatestMessage && !isLoading, onAnswer: (answer) => send((0, clarification_js_1.clarificationAnswerMessage)({
+                            toolCallId: clarification.toolCallId,
+                            answer: answer.text,
+                            ...(answer.optionId ? { optionId: answer.optionId } : {}),
+                        })) }, `clarification-${clarification.toolCallId}`));
+                }
                 // 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}`));
+                    return renderToolResult(`tool-${i}`, part.toolName, part.result);
                 }
                 // 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 renderToolResult(`tool-${i}`, toolName, part.output);
                     }
                 }
                 return null;

package/dist/cjs/react/components/plan-checklist.d.ts

@@ -0,0 +1,14 @@
+import type { PlanItem } from '../../contracts/plan.js';
+export interface PlanChecklistProps {
+    items: ReadonlyArray<PlanItem>;
+    /** True while this message's turn still runs; only then does an item spin. */
+    active: boolean;
+    className?: string;
+}
+/**
+ * Task list the model records with the built-in `update_plan` tool for a
+ * request with several distinct actions. Renders nothing below two items.
+ *
+ * Keeps styling neutral via `data-*` attributes.
+ */
+export declare function PlanChecklist({ items, active, className }: PlanChecklistProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/react/components/plan-checklist.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlanChecklist = PlanChecklist;
+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");
+/**
+ * Task list the model records with the built-in `update_plan` tool for a
+ * request with several distinct actions. Renders nothing below two items.
+ *
+ * Keeps styling neutral via `data-*` attributes.
+ */
+function PlanChecklist({ items, active, className }) {
+    const { locale } = (0, chat_context_js_1.useChatContext)();
+    if (items.length < 2)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("section", { className: className, "data-component": "plan-checklist", children: [(0, jsx_runtime_1.jsx)("strong", { "data-element": "title", children: locale.planTitle }), (0, jsx_runtime_1.jsx)("ol", { "data-element": "plan-items", children: items.map((item, index) => ((0, jsx_runtime_1.jsxs)("li", { "data-element": "plan-item", "data-status": item.status, children: [(0, jsx_runtime_1.jsx)(status_icon_js_1.StatusIcon, { icon: item.status === 'completed'
+                                ? 'check'
+                                : item.status === 'in_progress' && active ? 'spinner' : 'pending' }), (0, jsx_runtime_1.jsx)("span", { "data-element": "label", children: item.title })] }, `${index}-${item.title}`))) })] }));
+}

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

@@ -4,78 +4,64 @@ exports.RecordingBar = RecordingBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
+const chat_context_js_1 = require("../provider/chat-context.js");
 const recording_controls_js_1 = require("./recording-controls.js");
-const wavesurfer_loader_js_1 = require("./wavesurfer-loader.js");
+const stream_waveform_js_1 = require("./stream-waveform.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 MAX_VISIBLE_TRANSCRIPT = 80;
+/** First strong letter decides the script direction, like `dir="auto"`. */
+const STARTS_RIGHT_TO_LEFT = /^[^\p{L}]*[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana}]/u;
+/**
+ * Shows the newest words; the full text stays available as a tooltip.
+ *
+ * The slot can be narrower than the 80-character window, and `overflow:
+ * hidden` keeps the start of a line. The box therefore runs opposite to the
+ * script and the text sits in an isolated child of its own direction: the
+ * clipped side and the ellipsis land on the oldest words, the newest stay
+ * visible, and punctuation keeps its place.
+ */
+function InterimTranscript({ text }) {
+    const trimmed = text?.trim() ?? '';
+    if (!trimmed)
+        return null;
+    const visible = trimmed.length > MAX_VISIBLE_TRANSCRIPT
+        ? `…${trimmed.slice(-(MAX_VISIBLE_TRANSCRIPT - 1))}`
+        : trimmed;
+    const rtlScript = STARTS_RIGHT_TO_LEFT.test(visible);
+    return ((0, jsx_runtime_1.jsx)("span", { "data-part": "interim-transcript", "aria-live": "polite", title: trimmed, style: {
+            // Most of the bar goes to the words, not to the waveform.
+            flex: '4 1 0',
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            direction: rtlScript ? 'ltr' : 'rtl',
+            textAlign: 'left',
+            fontSize: '0.8125rem',
+            opacity: 0.85,
+        }, children: (0, jsx_runtime_1.jsx)("bdi", { dir: rtlScript ? 'rtl' : 'ltr', children: visible }) }));
+}
+function RecordingBarInner({ isConnecting, stream, transcript, 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" })] }));
+    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' ? { width: '100%', 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)(stream_waveform_js_1.StreamWaveform, { stream: stream }) }), (0, jsx_runtime_1.jsx)(InterimTranscript, { text: transcript }), (0, jsx_runtime_1.jsx)(recording_controls_js_1.StopButton, { onClick: handleStop, ariaLabel: "Aufnahme stoppen", title: "Aufnahme stoppen" })] }));
 }
 function RecordingBar(props) {
+    const unstyled = (0, react_1.useContext)(chat_context_js_1.ChatContext)?.unstyled ?? false;
     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, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { "data-component": "recording-bar-portal", "data-unstyled": unstyled || undefined, children: (0, jsx_runtime_1.jsx)(RecordingBarInner, { ...props }) }), document.body);
     }
     return (0, jsx_runtime_1.jsx)(RecordingBarInner, { ...props });
 }