@artooi/ag-ui-web-component 0.8.1 → 0.10.0

package/src/ui/ui_strings.ts

@@ -26,12 +26,17 @@ export interface UiStrings {
   collapse: string;
   /** Expand affordance (the sidebar rail toggle). */
   expand: string;
+  /** Built-in header theme toggle (light ⇄ dark). */
+  toggleTheme: string;
 
   // ── Messages region ─────────────────────────────────────────────────────────
   /** `aria-label` of the scrolling message log. */
   conversation: string;
-  /** `aria-label` of the "thinking" pending indicator. */
+  /** `aria-label` of the "thinking" pending indicator, and the thoughts region's
+   * header while the model is still reasoning. */
   thinking: string;
+  /** The thoughts region's header once reasoning has streamed (collapsed label). */
+  thoughts: string;
   /** The muted note after a cancelled run. */
   stopped: string;
   /** Error shown when the stream drops without a terminal AG-UI event. */
@@ -56,6 +61,14 @@ export interface UiStrings {
   stop: string;
   /** Attach-files button. */
   attachFiles: string;
+  /** Mic button while idle (start recording). */
+  recordVoice: string;
+  /** Mic button while recording (stop + transcribe). */
+  stopRecording: string;
+  /** Mic button while the clip is being transcribed. */
+  transcribing: string;
+  /** Mic button fallback message when transcription fails. */
+  transcriptionFailed: string;
 
   // ── Tool-call card ──────────────────────────────────────────────────────────
   /** Status pill while the call runs. */
@@ -137,9 +150,11 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   newChat: "New chat",
   collapse: "Collapse",
   expand: "Expand",
+  toggleTheme: "Toggle theme",
 
   conversation: "Conversation",
   thinking: "Assistant is thinking…",
+  thoughts: "Thoughts",
   stopped: "⏹ Stopped",
   connectionLost: "Connection lost",
   noResult: "No result returned.",
@@ -152,6 +167,10 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   send: "Send",
   stop: "Stop",
   attachFiles: "Attach files",
+  recordVoice: "Record voice",
+  stopRecording: "Stop recording",
+  transcribing: "Transcribing…",
+  transcriptionFailed: "Transcription failed",
 
   toolRunning: "running…",
   toolDone: "✓ done",

package/src/ui/voice_input.ts

@@ -0,0 +1,169 @@
+import type { TranscribeHandler } from "../core/transcribe_audio.js";
+import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
+
+/** Lifecycle of the mic button, reflected on its `data-state` for CSS. */
+type VoiceState = "idle" | "recording" | "transcribing";
+
+/** Construction options for {@link VoiceInput}. */
+export interface VoiceInputOptions {
+  /** Turns a recorded clip into text (the built-in or a custom transport). */
+  readonly transcribe: TranscribeHandler;
+  /** Called with the transcript when a recording transcribes successfully. */
+  readonly onText: (text: string) => void;
+  /** UI string table (labels/tooltips). */
+  readonly strings?: UiStrings;
+}
+
+/**
+ * The composer's voice-input control: a mic button that records via
+ * `MediaRecorder`, then POSTs the clip through a {@link TranscribeHandler} and
+ * hands the transcript back via `onText`.
+ *
+ * Click to start recording (browser mic permission prompt), click again to stop
+ * — the clip is transcribed and dropped into the composer. The button reflects
+ * its `idle` / `recording` / `transcribing` state on `data-state` for theming
+ * and is exposed as `part="voice-button"`. A capture or transcription failure
+ * returns the button to idle and surfaces the message on its tooltip.
+ *
+ * Pure DOM (no framework); the host mounts {@link element} in the input row.
+ */
+export class VoiceInput {
+  /** The mic button; mount this in the composer. */
+  readonly element: HTMLButtonElement;
+
+  readonly #transcribe: TranscribeHandler;
+  readonly #onText: (text: string) => void;
+  readonly #strings: UiStrings;
+  #state: VoiceState = "idle";
+  #recorder: MediaRecorder | null = null;
+  #stream: MediaStream | null = null;
+  #chunks: Blob[] = [];
+  #disposed = false;
+
+  constructor(options: VoiceInputOptions) {
+    this.#transcribe = options.transcribe;
+    this.#onText = options.onText;
+    this.#strings = options.strings ?? DEFAULT_UI_STRINGS;
+
+    this.element = document.createElement("button");
+    this.element.type = "button";
+    this.element.className = "voice-btn";
+    this.element.setAttribute("part", "voice-button");
+    this.element.textContent = "🎤";
+    this.#setState("idle");
+    this.element.addEventListener("click", () => {
+      void this.toggle();
+    });
+  }
+
+  /** Start recording when idle, stop (and transcribe) when recording. */
+  async toggle(): Promise<void> {
+    if (this.#state === "recording") {
+      this.#stop();
+      return;
+    }
+    if (this.#state === "transcribing") {
+      return;
+    }
+    await this.#start();
+  }
+
+  async #start(): Promise<void> {
+    let stream: MediaStream;
+    try {
+      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    } catch {
+      this.#fail(this.#strings.transcriptionFailed);
+      return;
+    }
+    this.#stream = stream;
+    this.#chunks = [];
+    const recorder = new MediaRecorder(stream);
+    recorder.addEventListener("dataavailable", (event) => {
+      this.#chunks.push(event.data);
+    });
+    recorder.addEventListener("stop", () => {
+      void this.#finish(recorder.mimeType);
+    });
+    this.#recorder = recorder;
+    recorder.start();
+    this.#setState("recording");
+  }
+
+  #stop(): void {
+    // ``stop`` flushes a final ``dataavailable`` then fires ``stop`` → #finish.
+    this.#recorder?.stop();
+  }
+
+  /**
+   * Tear the control down — the teardown path when the host element is removed
+   * mid-recording. Stops any live `MediaRecorder`, releases the mic tracks (so
+   * the browser's recording indicator clears), and suppresses the pending
+   * transcription: a disconnected control must not fire `onText` back into a
+   * detached element.
+   */
+  dispose(): void {
+    this.#disposed = true;
+    if (this.#recorder !== null && this.#recorder.state !== "inactive") {
+      this.#recorder.stop();
+    }
+    this.#recorder = null;
+    this.#releaseStream();
+  }
+
+  async #finish(mimeType: string): Promise<void> {
+    if (this.#disposed) {
+      return;
+    }
+    this.#releaseStream();
+    this.#setState("transcribing");
+    const audio = new Blob(this.#chunks, { type: mimeType || "audio/webm" });
+    try {
+      const text = await this.#transcribe(audio);
+      this.#setState("idle");
+      if (text !== "") {
+        this.#onText(text);
+      }
+    } catch (error) {
+      this.#fail(error instanceof Error ? error.message : this.#strings.transcriptionFailed);
+    } finally {
+      this.#recorder = null;
+    }
+  }
+
+  /** Stop the mic tracks so the browser's recording indicator clears. */
+  #releaseStream(): void {
+    for (const track of this.#stream?.getTracks() ?? []) {
+      track.stop();
+    }
+    this.#stream = null;
+  }
+
+  #fail(message: string): void {
+    this.#releaseStream();
+    this.#recorder = null;
+    this.#setState("idle");
+    this.element.title = message;
+  }
+
+  #setState(state: VoiceState): void {
+    this.#state = state;
+    this.element.dataset["state"] = state;
+    const label = this.#labelFor(state);
+    this.element.title = label;
+    this.element.setAttribute("aria-label", label);
+    this.element.setAttribute("aria-pressed", String(state === "recording"));
+    // The control is inert while a clip transcribes (no second recording yet).
+    this.element.disabled = state === "transcribing";
+  }
+
+  #labelFor(state: VoiceState): string {
+    if (state === "recording") {
+      return this.#strings.stopRecording;
+    }
+    if (state === "transcribing") {
+      return this.#strings.transcribing;
+    }
+    return this.#strings.recordVoice;
+  }
+}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.8.1";
+export const VERSION: string = "0.10.0";