@artooi/ag-ui-web-component 0.20.1 → 0.22.0

package/src/ui/ui_strings.ts

@@ -24,8 +24,15 @@ export interface UiStrings {
   newChat: string;
   /** Collapse button. */
   collapse: string;
-  /** Expand affordance (the sidebar rail toggle). */
+  /** Expand affordance (the launcher, and the sidebar rail). */
   expand: string;
+  /**
+   * The launcher's label while unread answers are waiting behind it, with
+   * `{count}` replaced by how many. It replaces {@link expand} rather than
+   * appending to it, so a translation can order the two parts as its language
+   * needs.
+   */
+  expandUnread: string;
   /** Built-in header theme toggle (light ⇄ dark). */
   toggleTheme: string;
 
@@ -204,6 +211,7 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   newChat: "New chat",
   collapse: "Collapse",
   expand: "Expand",
+  expandUnread: "Expand — {count} unread",
   toggleTheme: "Toggle theme",
   copyCode: "Copy",
   copied: "Copied",

package/src/ui/voice_input.ts

@@ -1,3 +1,4 @@
+import { ICON_VOICE } from "../constants.js";
 import type { TranscribeHandler } from "../core/transcribe_audio.js";
 import { DEFAULT_UI_STRINGS, type UiStrings } from "./ui_strings.js";
 
@@ -49,7 +50,12 @@ export class VoiceInput {
     this.element.type = "button";
     this.element.className = "voice-btn";
     this.element.setAttribute("part", "voice-button");
-    this.element.textContent = "🎤";
+    // The mic glyph, in a slot so a host can project its own mark. Author-written
+    // constant markup, never user or server data.
+    const glyph = document.createElement("slot");
+    glyph.name = "icon-voice";
+    glyph.innerHTML = ICON_VOICE;
+    this.element.append(glyph);
     this.#setState("idle");
     this.element.addEventListener("click", () => {
       void this.toggle();

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.20.1";
+export const VERSION: string = "0.22.0";