@columenlabs/lumen-ui 0.1.282 → 0.1.283

package/dist/assistant/lumen-assistant.d.ts

@@ -108,7 +108,9 @@ export declare function readAssistantImage(file: File): Promise<AssistantImage |
  * triggers list what can follow them as it is typed: `/` at the start a command, `@` a thing to
  * point at (the `sources`), `#` a tier for this message; a picked tier or thing shows as a chip.
  */
-export declare function LumenComposer({ name, busy, queued, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, modes, onSend, onStop, meter, }: {
+export declare function LumenComposer({ name, busy, queued, queue, canSteer, onSteerQueued, onUnqueue, disabled, commands, tiers, sources, page, images: canAttach, modes, onSend, onStop, meter, voice, }: {
+    /** A mic beside Send that types what the person says (`VoiceButton`); hidden where the browser can't. */
+    voice?: boolean;
     /** Drawn in the icon row after the paperclip and the modes: `LumenAssistant` puts its context donut here. */
     meter?: ReactNode;
     /** Toggles beside the paperclip (`LumenAssistant` `modes`). */

package/dist/assistant/lumen-assistant.js

@@ -24,6 +24,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../ui/colla
 import { InputGroup, InputGroupAddon, InputGroupTextarea } from '../ui/input-group.js';
 import { Spinner } from '../ui/spinner.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip.js';
+import { VoiceButton } from '../voice-input.js';
 import { ChatImage } from './chat-image.js';
 import { chatMarkdown, chatTurns, copyMarkdown, turnMarkdown } from './copy.js';
 import { ImageCard, ImagePending, toolIs } from './image-card.js';
@@ -580,7 +581,7 @@ const imageUrl = (i) => `data:${i.media_type};base64,${i.data}`;
  * triggers list what can follow them as it is typed: `/` at the start a command, `@` a thing to
  * point at (the `sources`), `#` a tier for this message; a picked tier or thing shows as a chip.
  */
-export function LumenComposer({ name, busy, queued, queue, canSteer = false, onSteerQueued, onUnqueue, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, modes = [], onSend, onStop, meter, }) {
+export function LumenComposer({ name, busy, queued, queue, canSteer = false, onSteerQueued, onUnqueue, disabled, commands = [], tiers = [], sources = [], page, images: canAttach = false, modes = [], onSend, onStop, meter, voice = true, }) {
     const [text, setText] = useState('');
     const [caret, setCaret] = useState(0);
     const [closed, setClosed] = useState(null);
@@ -903,7 +904,7 @@ export function LumenComposer({ name, busy, queued, queue, canSteer = false, onS
                                             if (e.target.files)
                                                 attach(e.target.files);
                                             e.target.value = '';
-                                        } })] })), modes.map((md) => (_jsx(IconButton, { icon: md.icon, label: md.label, size: "icon-xs", variant: use === md.id ? 'secondary' : 'ghost', "aria-pressed": use === md.id, className: cn(use === md.id && 'text-primary'), disabled: disabled, onClick: () => setUse((u) => (u === md.id ? null : md.id)) }, md.id))), meter, _jsx("div", { className: "ml-auto", children: busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : busy ? (_jsxs("span", { className: "flex gap-1", children: [_jsx(IconButton, { icon: ListPlusIcon, label: canSteer ? 'Queue for after (⌥↩)' : 'Queue for after (↩)', variant: canSteer ? 'outline' : 'default', size: "icon-xs", disabled: disabled, onClick: () => send('queue') }), canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now (\u21A9)", variant: "default", size: "icon-xs", disabled: disabled, onClick: () => send('steer') }))] })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: "Send", variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: () => send() })) })] })] })] }));
+                                        } })] })), modes.map((md) => (_jsx(IconButton, { icon: md.icon, label: md.label, size: "icon-xs", variant: use === md.id ? 'secondary' : 'ghost', "aria-pressed": use === md.id, className: cn(use === md.id && 'text-primary'), disabled: disabled, onClick: () => setUse((u) => (u === md.id ? null : md.id)) }, md.id))), meter, _jsxs("div", { className: "ml-auto flex items-center gap-0.5", children: [voice && (_jsx(VoiceButton, { value: text, onChange: setText, size: "icon-xs", disabled: disabled })), busy && !text.trim() ? (_jsx(IconButton, { icon: SquareIcon, label: "Stop", variant: "outline", size: "icon-xs", onClick: onStop })) : busy ? (_jsxs("span", { className: "flex gap-1", children: [_jsx(IconButton, { icon: ListPlusIcon, label: canSteer ? 'Queue for after (⌥↩)' : 'Queue for after (↩)', variant: canSteer ? 'outline' : 'default', size: "icon-xs", disabled: disabled, onClick: () => send('queue') }), canSteer && (_jsx(IconButton, { icon: CornerDownRightIcon, label: "Steer now (\u21A9)", variant: "default", size: "icon-xs", disabled: disabled, onClick: () => send('steer') }))] })) : (_jsx(IconButton, { icon: ArrowUpIcon, label: "Send", variant: "default", size: "icon-xs", disabled: !text.trim() || disabled, onClick: () => send() }))] })] })] })] }));
 }
 /**
  * What waits above the box while an answer runs: steering messages until the answer reads them,

package/dist/index.d.ts

@@ -79,6 +79,7 @@ export { NotificationsSettings } from './notifications.js';
 export { type TasksConfig, TasksButton, TasksProvider, useTaskFor, useTasks } from './tasks.js';
 export { type McpServer, McpSettings } from './mcp-settings.js';
 export { lumenToast } from './lumen-toast.js';
+export { useVoiceInput, VoiceButton, type VoiceButtonProps, type VoiceInputOptions, voiceSupported, } from './voice-input.js';
 export { LumenShell, type LumenShellProps, type ShellUser, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
 export { API_TIMEOUT_MS, apiJson } from './api-fetch.js';
 export { FETCH_MS, fetchWithin } from './fetch-within.js';

package/dist/index.js

@@ -86,6 +86,7 @@ export { NotificationsSettings } from './notifications.js';
 export { TasksButton, TasksProvider, useTaskFor, useTasks } from './tasks.js';
 export { McpSettings } from './mcp-settings.js';
 export { lumenToast } from './lumen-toast.js';
+export { useVoiceInput, VoiceButton, voiceSupported, } from './voice-input.js';
 export { LumenShell, StatusItem, firstName, initials, maskAmount, useAmountsHidden, useApp, useShell, } from './shell.js';
 export { API_TIMEOUT_MS, apiJson } from './api-fetch.js';
 export { FETCH_MS, fetchWithin } from './fetch-within.js';

package/dist/voice-input.d.ts

@@ -0,0 +1,34 @@
+/** True where the browser can turn speech into text. */
+export declare const voiceSupported: () => boolean;
+export type VoiceInputOptions = {
+    /** The box's text now. Speech joins the end of it. */
+    value: string;
+    /** Gets the box's whole new text: what was there plus what was said, the words still being heard included. */
+    onChange: (value: string) => void;
+    /** Recognition language as a BCP 47 tag; the browser's language by default. */
+    lang?: string;
+};
+/**
+ * Speech to text into a text box: `listening`, `supported` and `toggle()`. While listening, each word
+ * heard goes into the box as `onChange(text)` (live, then settled). If the person types while it
+ * listens, what they typed is kept and later speech joins after it.
+ */
+export declare function useVoiceInput({ value, onChange, lang }: VoiceInputOptions): {
+    supported: boolean;
+    listening: boolean;
+    start: () => void;
+    stop: () => void | undefined;
+    toggle: () => void;
+};
+export type VoiceButtonProps = VoiceInputOptions & {
+    /** `icon-xs` beside a composer's other tools; `icon-sm` by default. */
+    size?: 'icon-xs' | 'icon-sm' | 'icon';
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * The mic beside a text box: tap to talk, tap again to stop. While it listens the icon turns into a
+ * red dot and the words appear in the box as they are heard. Draws nothing where the browser has no
+ * speech to text.
+ */
+export declare function VoiceButton({ size, disabled, className, ...options }: VoiceButtonProps): import("react").JSX.Element | null;

package/dist/voice-input.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// VoiceButton: talk instead of type. A mic beside any text box that writes what the person says into
+// it as they speak, through the browser's own speech recognition (Web Speech API): no server of ours,
+// no cost. Tap to start, tap to stop; the words join what is already in the box, never replace it.
+// Where the browser has no speech recognition (Firefox) the button is not drawn.
+import { MicIcon } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { IconButton } from './icon-button.js';
+import { cn } from './lib/utils.js';
+import { lumenToast } from './lumen-toast.js';
+const recognitionClass = () => {
+    if (typeof window === 'undefined')
+        return undefined;
+    const w = window;
+    return w.SpeechRecognition ?? w.webkitSpeechRecognition;
+};
+/** True where the browser can turn speech into text. */
+export const voiceSupported = () => !!recognitionClass();
+/** What each recognition error means, in plain words. Errors left out (`aborted`, `no-speech`) say nothing. */
+const ERRORS = {
+    'not-allowed': "The microphone is blocked. Allow it for this site in your browser's settings, then tap the mic again.",
+    'service-not-allowed': 'This browser does not allow speech to text here. Try Chrome, Edge or Safari, or type instead.',
+    'audio-capture': 'No microphone was found. Connect one, then tap the mic again.',
+    network: 'Speech to text needs an internet connection. Check it, then tap the mic again.',
+    'language-not-supported': "Speech to text doesn't support your browser's language yet.",
+};
+/** `base` and `spoken` joined by one space, unless either side already has it. */
+const join = (base, spoken) => {
+    const s = spoken.trim();
+    if (!s)
+        return base;
+    if (!base || /\s$/.test(base))
+        return base + s;
+    return `${base} ${s}`;
+};
+/**
+ * Speech to text into a text box: `listening`, `supported` and `toggle()`. While listening, each word
+ * heard goes into the box as `onChange(text)` (live, then settled). If the person types while it
+ * listens, what they typed is kept and later speech joins after it.
+ */
+export function useVoiceInput({ value, onChange, lang }) {
+    const supported = useSyncExternalStore(noop, voiceSupported, () => false);
+    const [listening, setListening] = useState(false);
+    const rec = useRef(null);
+    // Latest props, read from the recognition's callbacks.
+    const latest = useRef({ value, onChange });
+    latest.current = { value, onChange };
+    // The text before this stretch of speech, the first result that belongs to it, and what was last written.
+    const base = useRef('');
+    const from = useRef(0);
+    // Every text written this stretch: the box may not have re-rendered with the last one yet.
+    const wrote = useRef(new Set());
+    const stop = useCallback(() => rec.current?.stop(), []);
+    // Leaving the page (or the box) ends listening, so the mic is never left on.
+    useEffect(() => () => rec.current?.abort(), []);
+    const start = useCallback(() => {
+        const Class = recognitionClass();
+        if (!Class || rec.current)
+            return;
+        const r = new Class();
+        r.lang = lang ?? (typeof navigator !== 'undefined' ? navigator.language : '') ?? '';
+        r.continuous = true;
+        r.interimResults = true;
+        base.current = latest.current.value;
+        from.current = 0;
+        wrote.current.clear();
+        r.onresult = (e) => {
+            const now = latest.current.value;
+            // Typed into the box since the last words: keep that text and start the next words after it.
+            if (wrote.current.size && !wrote.current.has(now)) {
+                base.current = now;
+                from.current = e.resultIndex;
+                wrote.current.clear();
+            }
+            let spoken = '';
+            for (let i = from.current; i < e.results.length; i++) {
+                spoken += ` ${e.results[i]?.[0]?.transcript ?? ''}`;
+            }
+            const next = join(base.current, spoken.replace(/\s+/g, ' '));
+            wrote.current.add(next);
+            if (next !== now)
+                latest.current.onChange(next);
+        };
+        r.onerror = (e) => {
+            const message = ERRORS[e.error];
+            if (message)
+                lumenToast.error(message, { id: 'lumen-voice' });
+        };
+        r.onend = () => {
+            rec.current = null;
+            setListening(false);
+        };
+        rec.current = r;
+        try {
+            r.start();
+            setListening(true);
+        }
+        catch {
+            rec.current = null;
+            lumenToast.error('Speech to text could not start. Try again.', { id: 'lumen-voice' });
+        }
+    }, [lang]);
+    const toggle = useCallback(() => (rec.current ? stop() : start()), [start, stop]);
+    return { supported, listening, start, stop, toggle };
+}
+const noop = () => () => { };
+/**
+ * The mic beside a text box: tap to talk, tap again to stop. While it listens the icon turns into a
+ * red dot and the words appear in the box as they are heard. Draws nothing where the browser has no
+ * speech to text.
+ */
+export function VoiceButton({ size = 'icon-sm', disabled, className, ...options }) {
+    const { supported, listening, toggle, stop } = useVoiceInput(options);
+    useEffect(() => {
+        if (disabled && listening)
+            stop();
+    }, [disabled, listening, stop]);
+    if (!supported)
+        return null;
+    return (_jsx(IconButton, { icon: listening ? ListeningDot : MicIcon, label: listening ? 'Stop listening' : 'Talk to type', size: size, variant: "ghost", 
+        // Inside a form it must not send it.
+        type: "button", "aria-pressed": listening, "data-voice": listening ? 'listening' : 'idle', disabled: disabled, className: cn(listening && 'text-destructive', className), onClick: toggle }));
+}
+/** A red dot that pulses while the mic listens. */
+function ListeningDot({ className }) {
+    return (_jsx("span", { className: cn('grid size-4 place-items-center', className), "aria-hidden": true, children: _jsx("span", { className: "size-2.5 animate-pulse rounded-full bg-destructive" }) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.282",
+  "version": "0.1.283",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.282",
+    "@columenlabs/lumen-ui-types": "0.1.283",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",