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

package/dist/index.js

@@ -506,8 +506,10 @@ var DEFAULT_UI_STRINGS = {
   newChat: "New chat",
   collapse: "Collapse",
   expand: "Expand",
+  toggleTheme: "Toggle theme",
   conversation: "Conversation",
   thinking: "Assistant is thinking\u2026",
+  thoughts: "Thoughts",
   stopped: "\u23F9 Stopped",
   connectionLost: "Connection lost",
   noResult: "No result returned.",
@@ -519,6 +521,10 @@ var DEFAULT_UI_STRINGS = {
   send: "Send",
   stop: "Stop",
   attachFiles: "Attach files",
+  recordVoice: "Record voice",
+  stopRecording: "Stop recording",
+  transcribing: "Transcribing\u2026",
+  transcriptionFailed: "Transcription failed",
   toolRunning: "running\u2026",
   toolDone: "\u2713 done",
   toolError: "\u26A0 error",
@@ -4018,6 +4024,69 @@ var STYLES = `
   }
 }
 
+/* \u2500\u2500 Thoughts region (THINK-1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   A muted, collapsible chain-of-thought at the top of the answer group: open
+   while the model reasons, folded once the answer text starts. */
+.thoughts {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--ag-ui-muted);
+}
+
+.thoughts-toggle {
+  align-self: flex-start;
+  border: none;
+  padding: 0;
+  background: none;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ag-ui-muted);
+  cursor: pointer;
+}
+
+.thoughts-toggle::before {
+  content: "\u25BE ";
+}
+
+.thoughts-toggle[aria-expanded="false"]::before {
+  content: "\u25B8 ";
+}
+
+/* A gentle pulse on the label while reasoning is still streaming. */
+.thoughts[data-streaming] .thoughts-label {
+  animation: ag-ui-thoughts-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes ag-ui-thoughts-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+.thoughts-body {
+  margin: 0;
+  padding: 4px 0 4px 10px;
+  border-left: 2px solid var(--ag-ui-border);
+  max-height: 220px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: inherit;
+}
+
+.thoughts-body[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .thoughts[data-streaming] .thoughts-label {
+    animation: none;
+  }
+}
+
 .tool-call {
   align-self: flex-start;
   max-width: 80%;
@@ -4226,6 +4295,49 @@ var STYLES = `
   display: none;
 }
 
+/* The \u{1F3A4} mic button (VOICE-1); shown only once #wireVoice mounts it. */
+.voice-slot {
+  display: contents;
+}
+
+.voice-btn {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 8px;
+  padding: 0 10px;
+  background: var(--ag-ui-input-bg);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.voice-btn:hover {
+  border-color: var(--ag-ui-accent);
+}
+
+.voice-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+/* Recording: a red tint + a gentle pulse so it's clearly "live". */
+.voice-btn[data-state="recording"] {
+  border-color: var(--ag-ui-danger);
+  background: var(--ag-ui-danger);
+  color: #ffffff;
+  animation: ag-ui-voice-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes ag-ui-voice-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .voice-btn[data-state="recording"] {
+    animation: none;
+  }
+}
+
 /* Pending-attachments tray, above the input row; collapses (hidden) when empty. */
 .attachment-slot {
   display: contents;
@@ -4640,6 +4752,62 @@ var STYLES = `
 }
 `;
 
+// src/ui/thoughts_block.ts
+var ThoughtsBlock = class {
+  /** The block's root element; insert this at the top of the answer group. */
+  element;
+  #label;
+  #body;
+  #toggle;
+  #strings;
+  #collapsed = false;
+  constructor(strings = DEFAULT_UI_STRINGS) {
+    this.#strings = strings;
+    this.element = document.createElement("div");
+    this.element.className = "thoughts";
+    this.element.setAttribute("part", "thoughts");
+    this.element.setAttribute("data-streaming", "");
+    this.#toggle = document.createElement("button");
+    this.#toggle.type = "button";
+    this.#toggle.className = "thoughts-toggle";
+    this.#toggle.setAttribute("part", "thoughts-toggle");
+    this.#toggle.setAttribute("aria-expanded", "true");
+    this.#label = document.createElement("span");
+    this.#label.className = "thoughts-label";
+    this.#label.textContent = strings.thinking;
+    this.#toggle.append(this.#label);
+    this.#body = document.createElement("pre");
+    this.#body.className = "thoughts-body";
+    this.#body.setAttribute("part", "thoughts-body");
+    this.#toggle.addEventListener("click", () => {
+      this.#setCollapsed(!this.#collapsed);
+    });
+    this.element.append(this.#toggle, this.#body);
+  }
+  /** Replace the reasoning body with the running buffer (the full text so far). */
+  stream(buffer) {
+    this.#body.textContent = buffer;
+  }
+  /**
+   * Fold the region away — called when the answer's first text token arrives.
+   * Idempotent (the per-token text handler calls it repeatedly) and flips the
+   * header label from "thinking…" to the settled "Thoughts" affordance.
+   */
+  collapse() {
+    if (this.#collapsed) {
+      return;
+    }
+    this.element.removeAttribute("data-streaming");
+    this.#label.textContent = this.#strings.thoughts;
+    this.#setCollapsed(true);
+  }
+  #setCollapsed(collapsed) {
+    this.#collapsed = collapsed;
+    this.#body.hidden = collapsed;
+    this.#toggle.setAttribute("aria-expanded", String(!collapsed));
+  }
+};
+
 // src/ui/relative_time.ts
 function relativeTime(timestamp, now = Date.now(), strings = DEFAULT_UI_STRINGS) {
   const seconds = Math.round((now - timestamp) / 1e3);
@@ -4943,6 +5111,115 @@ ${text2}`;
   }
 };
 
+// src/ui/voice_input.ts
+var VoiceInput = class {
+  /** The mic button; mount this in the composer. */
+  element;
+  #transcribe;
+  #onText;
+  #strings;
+  #state = "idle";
+  #recorder = null;
+  #stream = null;
+  #chunks = [];
+  constructor(options) {
+    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 = "\u{1F3A4}";
+    this.#setState("idle");
+    this.element.addEventListener("click", () => {
+      void this.toggle();
+    });
+  }
+  /** Start recording when idle, stop (and transcribe) when recording. */
+  async toggle() {
+    if (this.#state === "recording") {
+      this.#stop();
+      return;
+    }
+    if (this.#state === "transcribing") {
+      return;
+    }
+    await this.#start();
+  }
+  async #start() {
+    let stream;
+    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() {
+    this.#recorder?.stop();
+  }
+  async #finish(mimeType) {
+    this.#releaseStream();
+    this.#setState("transcribing");
+    const audio = new Blob(this.#chunks, { type: mimeType || "audio/webm" });
+    try {
+      const text2 = await this.#transcribe(audio);
+      this.#setState("idle");
+      if (text2 !== "") {
+        this.#onText(text2);
+      }
+    } 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() {
+    for (const track of this.#stream?.getTracks() ?? []) {
+      track.stop();
+    }
+    this.#stream = null;
+  }
+  #fail(message) {
+    this.#releaseStream();
+    this.#recorder = null;
+    this.#setState("idle");
+    this.element.title = message;
+  }
+  #setState(state) {
+    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"));
+    this.element.disabled = state === "transcribing";
+  }
+  #labelFor(state) {
+    if (state === "recording") {
+      return this.#strings.stopRecording;
+    }
+    if (state === "transcribing") {
+      return this.#strings.transcribing;
+    }
+    return this.#strings.recordVoice;
+  }
+};
+
 // src/core/agui_client.ts
 import { randomUUID as randomUUID2 } from "@ag-ui/client";
 var ConnectionLostError = class extends Error {
@@ -5114,6 +5391,18 @@ var AgUiClient = class {
       onToolCallResultEvent({ event }) {
         h.onToolResult(event.toolCallId, event.content);
       },
+      // Reasoning (THINK-1). `@ag-ui/client` already maps the deprecated
+      // THINKING_* events onto these REASONING_* callbacks, so handling the
+      // reasoning family alone covers both protocol versions.
+      onReasoningStartEvent() {
+        h.onReasoningStart();
+      },
+      onReasoningMessageContentEvent({ reasoningMessageBuffer }) {
+        h.onReasoningDelta(reasoningMessageBuffer);
+      },
+      onReasoningEndEvent() {
+        h.onReasoningEnd();
+      },
       onRunErrorEvent({ event }) {
         runState.terminal = true;
         h.onError(event.message);
@@ -5390,6 +5679,35 @@ var RemoteConversationStore = class {
   }
 };
 
+// src/core/transcribe_audio.ts
+async function transcribeAudio(audio, options) {
+  const form = new FormData();
+  form.append("audio", audio, "recording.webm");
+  const response = await fetch(options.url, {
+    method: "POST",
+    headers: { ...options.headers ?? {} },
+    body: form
+  });
+  if (!response.ok) {
+    throw new Error(await errorMessage(response));
+  }
+  const body = await response.json();
+  if (typeof body === "object" && body !== null && typeof body.text === "string") {
+    return body.text;
+  }
+  throw new Error("transcription returned an unreadable response");
+}
+async function errorMessage(response) {
+  try {
+    const body = await response.json();
+    if (typeof body.error === "string") {
+      return body.error;
+    }
+  } catch {
+  }
+  return `transcription failed (${response.status})`;
+}
+
 // src/core/upload_attachment.ts
 function uploadAttachment(file, options) {
   return new Promise((resolve, reject) => {
@@ -5416,7 +5734,7 @@ function uploadAttachment(file, options) {
           reject(new Error("upload returned an unreadable response"));
         }
       } else {
-        reject(new Error(errorMessage(xhr)));
+        reject(new Error(errorMessage2(xhr)));
       }
     });
     xhr.addEventListener("error", () => reject(new Error("upload failed")));
@@ -5443,7 +5761,7 @@ function parseRef(body) {
   }
   return typeof url === "string" ? { id, name, mime, size, url } : { id, name, mime, size };
 }
-function errorMessage(xhr) {
+function errorMessage2(xhr) {
   try {
     const body = JSON.parse(xhr.responseText);
     if (typeof body.error === "string") {
@@ -5456,6 +5774,7 @@ function errorMessage(xhr) {
 
 // src/core/ag_ui_chat.ts
 var COLLAPSED_KEY = "ag-ui-chat:collapsed";
+var THEME_KEY = "ag-ui-chat:theme";
 var AgUiChat = class extends HTMLElement {
   /** Agent factory; override to inject a custom or fake agent (tests). */
   agentFactory = createHttpAgent;
@@ -5533,6 +5852,15 @@ var AgUiChat = class extends HTMLElement {
    * with no `data-attachments-url`; the handler owns its own endpoint + headers.
    */
   uploadHandler = null;
+  /**
+   * How recorded voice clips are transcribed. `null` (default) POSTs the clip
+   * to `data-transcribe-url` (django-ag-ui's `TranscribeView`). Set a custom
+   * {@link TranscribeHandler} — `(audio: Blob) => Promise<string>` — to swap the
+   * transport (a different STT endpoint, a browser Web Speech adapter) without
+   * touching the mic button. When set, the 🎤 affordance appears even with no
+   * `data-transcribe-url`.
+   */
+  transcribeHandler = null;
   /**
    * Builds the tool result a navigating tool resumes with after the page
    * reloads. Defaults to the landed URL; a host (e.g. the admin package) can
@@ -5601,12 +5929,18 @@ var AgUiChat = class extends HTMLElement {
   #attachButton;
   #fileInput;
   #attachSlot;
+  /** Optional built-in header theme toggle (THEME-1); shown only with `data-theme-toggle`. */
+  #themeToggle;
   /** The collapsed-sidebar rail (an expand affordance; shown only for `placement="sidebar"`). */
   #rail;
   /** Empty-state region at the top of the message list; hidden once anything renders. */
   #emptyWrap;
   /** Upload tray; created on connect only when `data-attachments-url` is set. */
   #attachTray = null;
+  /** Mic button mount point (input row); the control mounts on connect when enabled. */
+  #voiceSlot;
+  /** Voice-input control; created on connect when transcription is available. */
+  #voice = null;
   /** Refs attached to the message currently being sent (the context manifest). */
   #runAttachments = [];
   #client = null;
@@ -5630,6 +5964,10 @@ var AgUiChat = class extends HTMLElement {
   // frontend-tool loop (which is several AG-UI runs), not one run. `null`
   // between turns; user bubbles never enter it.
   #currentGroup = null;
+  // The current turn's streamed-reasoning region (THINK-1), shown at the top of
+  // the answer group while a reasoning model thinks and collapsed once the
+  // answer's first text token arrives. `null` outside a reasoning turn.
+  #thoughts = null;
   #threadId = "";
   #initialMessages = [];
   // Skill catalog by source; merged backend → embed → client (later wins).
@@ -5648,6 +5986,8 @@ var AgUiChat = class extends HTMLElement {
     this.#attachButton = document.createElement("button");
     this.#fileInput = document.createElement("input");
     this.#attachSlot = document.createElement("div");
+    this.#voiceSlot = document.createElement("span");
+    this.#themeToggle = document.createElement("button");
     this.#rail = document.createElement("button");
     this.#emptyWrap = document.createElement("div");
     this.#skillsMenu = new SkillsMenu((skill) => this.#applySkill(skill));
@@ -5773,6 +6113,12 @@ var AgUiChat = class extends HTMLElement {
   }
   connectedCallback() {
     this.#strings = mergeUiStrings({ ...this.#readStringOverrides(), ...this.strings });
+    if (this.getAttribute("data-theme-toggle") !== null) {
+      const saved = sessionStorage.getItem(THEME_KEY);
+      if (saved !== null) {
+        this.setAttribute("theme", saved);
+      }
+    }
     this.#render();
     this.#drawer.setStrings(this.#strings);
     if (sessionStorage.getItem(COLLAPSED_KEY) === "1") {
@@ -5783,6 +6129,7 @@ var AgUiChat = class extends HTMLElement {
     void this.#fetchToolCatalog();
     this.#wireThreadStore();
     this.#wireAttachments();
+    this.#wireVoice();
     this.#threadId = this.conversationStore.threadId();
     void this.#rehydrate();
   }
@@ -5833,6 +6180,40 @@ var AgUiChat = class extends HTMLElement {
     }
     return (file, onProgress) => uploadAttachment(file, { url, headers: this.headers, onProgress });
   }
+  /**
+   * Reveal the composer's 🎤 mic button when transcription is possible — either
+   * a custom {@link transcribeHandler} is set or `data-transcribe-url` provides
+   * the built-in POST endpoint. The control records via `MediaRecorder` and
+   * drops the transcript into the composer; with neither configured the mic
+   * stays hidden and the chat is text-only.
+   */
+  #wireVoice() {
+    const url = this.getAttribute("data-transcribe-url");
+    const transcribe = this.transcribeHandler ?? this.#defaultTranscribeHandler(url);
+    if (transcribe === null) {
+      return;
+    }
+    this.#voice = new VoiceInput({
+      transcribe,
+      onText: (text2) => this.#insertVoiceText(text2),
+      strings: this.#strings
+    });
+    this.#voiceSlot.appendChild(this.#voice.element);
+  }
+  /** The built-in transcription handler for `data-transcribe-url`, or `null`. */
+  #defaultTranscribeHandler(url) {
+    if (url === null) {
+      return null;
+    }
+    return (audio) => transcribeAudio(audio, { url, headers: this.headers });
+  }
+  /** Drop a voice transcript into the composer (appended to any typed text). */
+  #insertVoiceText(text2) {
+    const current = this.#input.value.trim();
+    this.#input.value = current === "" ? text2 : `${current} ${text2}`;
+    this.#onInput();
+    this.#input.focus();
+  }
   /** The client-side upload size cap from `data-attachment-max-bytes`. */
   #attachmentMaxBytes() {
     const attr = this.getAttribute("data-attachment-max-bytes");
@@ -6015,6 +6396,23 @@ Use the read_attachment tool with an id to read a file's contents.`
   toggleCollapsed() {
     this.setCollapsed(!this.collapsed);
   }
+  /**
+   * Flip the `theme` attribute between `light` and `dark` and persist the choice
+   * per tab. Bound to the optional built-in header theme toggle
+   * (`data-theme-toggle`); any non-dark theme (incl. `auto` / `code`) flips to
+   * `dark` first.
+   */
+  toggleTheme() {
+    const next = this.getAttribute("theme") === "dark" ? "light" : "dark";
+    this.setAttribute("theme", next);
+    sessionStorage.setItem(THEME_KEY, next);
+    this.#syncThemeGlyph();
+  }
+  /** Reflect the current theme on the toggle: show the destination's glyph. */
+  #syncThemeGlyph() {
+    const dark = this.getAttribute("theme") === "dark";
+    this.#themeToggle.textContent = dark ? "\u2600\uFE0F" : "\u{1F319}";
+  }
   /**
    * Start a fresh conversation: forget the persisted history, drop the
    * in-memory run state, clear the transcript, and mint a new thread id.
@@ -6031,6 +6429,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#client = null;
     this.#streamingBubble = null;
     this.#currentGroup = null;
+    this.#thoughts = null;
     this.#hidePending();
     this.#toolCards.clear();
     this.#serverSettled.clear();
@@ -6230,7 +6629,18 @@ Use the read_attachment tool with an id to read a file's contents.`
     newChat.addEventListener("click", () => this.newChat());
     const collapse = this.#headerButton("collapse", this.#strings.collapse, "\u2014");
     collapse.addEventListener("click", () => this.toggleCollapsed());
-    controls.append(history, newChat, collapse);
+    controls.append(history, newChat);
+    if (this.getAttribute("data-theme-toggle") !== null) {
+      this.#themeToggle.type = "button";
+      this.#themeToggle.className = "header-btn header-btn--theme";
+      this.#themeToggle.setAttribute("part", "header-button theme-toggle");
+      this.#themeToggle.title = this.#strings.toggleTheme;
+      this.#themeToggle.setAttribute("aria-label", this.#strings.toggleTheme);
+      this.#themeToggle.addEventListener("click", () => this.toggleTheme());
+      this.#syncThemeGlyph();
+      controls.append(this.#themeToggle);
+    }
+    controls.append(collapse);
     header.append(title, headerActions, controls);
     this.#messages.className = "messages";
     this.#messages.setAttribute("part", "messages");
@@ -6282,9 +6692,10 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#fileInput.hidden = true;
     this.#fileInput.addEventListener("change", () => this.#onFilesPicked());
     this.#attachSlot.className = "attachment-slot";
+    this.#voiceSlot.className = "voice-slot";
     const footer = document.createElement("slot");
     footer.name = "footer";
-    inputRow.append(this.#attachButton, this.#input, this.#send, this.#fileInput);
+    inputRow.append(this.#attachButton, this.#voiceSlot, this.#input, this.#send, this.#fileInput);
     this.#chat.append(
       header,
       this.#messages,
@@ -6509,8 +6920,18 @@ Use the read_attachment tool with an id to read a file's contents.`
         this.#ensureGroup();
         this.#showPending();
       },
+      onReasoningStart: () => {
+        this.#hidePending();
+        this.#showThoughts();
+      },
+      onReasoningDelta: (buffer) => {
+        this.#showThoughts().stream(buffer);
+      },
+      onReasoningEnd: () => {
+      },
       onTextDelta: (buffer) => {
         this.#hidePending();
+        this.#thoughts?.collapse();
         this.#streamInto(buffer);
         this.#streamDeltas += 1;
       },
@@ -6562,6 +6983,7 @@ Use the read_attachment tool with an id to read a file's contents.`
           this.#updateEmptyState();
         }
         this.#currentGroup = null;
+        this.#thoughts = null;
       }
     };
   }
@@ -6605,6 +7027,21 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#pending?.remove();
     this.#pending = null;
   }
+  /**
+   * The current turn's thoughts region, creating it (at the top of the answer
+   * group, above any streamed text or tool cards) on first sight. Idempotent
+   * across a turn's reasoning tokens.
+   */
+  #showThoughts() {
+    if (this.#thoughts === null) {
+      this.#thoughts = new ThoughtsBlock(this.#strings);
+      const group = this.#ensureGroup();
+      group.insertBefore(this.#thoughts.element, group.firstChild);
+      this.#updateEmptyState();
+      this.#messages.scrollTop = this.#messages.scrollHeight;
+    }
+    return this.#thoughts;
+  }
   #streamInto(buffer) {
     if (this.#streamingBubble === null) {
       this.#streamingBubble = this.appendMessage(MESSAGE_ROLE.ASSISTANT, "");
@@ -6676,7 +7113,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.8.1";
+var VERSION = "0.9.0";
 export {
   AgUiChat,
   AgUiClient,
@@ -6728,6 +7165,7 @@ export {
   setNativeValue,
   toggleCheckbox,
   toggleControl,
+  transcribeAudio,
   typeInto,
   uploadAttachment
 };