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

package/src/ui/thread_drawer.ts

@@ -37,6 +37,8 @@ export class ThreadDrawer {
   #strings: UiStrings;
   #threads: readonly ThreadMeta[] = [];
   #activeId = "";
+  /** The element focused before the drawer opened, restored on close. */
+  #lastFocused: HTMLElement | null = null;
 
   constructor(callbacks: ThreadDrawerCallbacks, strings: UiStrings = DEFAULT_UI_STRINGS) {
     this.#callbacks = callbacks;
@@ -56,7 +58,10 @@ export class ThreadDrawer {
     this.#panel.className = "drawer-panel";
     this.#panel.setAttribute("part", "drawer-panel");
     this.#panel.setAttribute("role", "dialog");
+    this.#panel.setAttribute("aria-modal", "true");
     this.#panel.setAttribute("aria-label", strings.chatHistory);
+    // Escape closes the drawer; Tab is trapped within the panel while it's open.
+    this.#panel.addEventListener("keydown", (event) => this.#onPanelKeydown(event));
 
     const header = document.createElement("div");
     header.className = "drawer-header";
@@ -98,15 +103,61 @@ export class ThreadDrawer {
   }
 
   open(): void {
+    if (this.isOpen()) {
+      return;
+    }
+    // Remember what had focus so it's restored on close, then move focus into
+    // the panel (its first control) so keyboard users land inside the dialog.
+    this.#lastFocused = this.#activeElement() as HTMLElement | null;
     this.element.hidden = false;
+    this.#newButton.focus();
   }
 
   close(): void {
+    if (!this.isOpen()) {
+      return;
+    }
     this.element.hidden = true;
+    this.#lastFocused?.focus();
+    this.#lastFocused = null;
   }
 
   toggle(): void {
-    this.element.hidden = !this.element.hidden;
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  /** The currently-focused element within the drawer's root (shadow-aware). */
+  #activeElement(): Element | null {
+    return (this.element.getRootNode() as Document | ShadowRoot).activeElement;
+  }
+
+  /** Escape-to-close and a Tab focus trap while the dialog is open. */
+  #onPanelKeydown(event: KeyboardEvent): void {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+    if (event.key !== "Tab") {
+      return;
+    }
+    const focusables = Array.from(
+      this.#panel.querySelectorAll<HTMLElement>("button, input, [tabindex]"),
+    ).filter((el) => !el.hidden);
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = this.#activeElement();
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
   }
 
   /** Render the rows (or the empty state), highlighting the active thread. */
@@ -145,12 +196,15 @@ export class ThreadDrawer {
     select.setAttribute("part", "drawer-row-select");
     const title = document.createElement("span");
     title.className = "drawer-row-title";
+    title.setAttribute("part", "drawer-row-title");
     title.textContent = meta.title;
     const time = document.createElement("span");
     time.className = "drawer-row-time";
+    time.setAttribute("part", "drawer-row-time");
     time.textContent = relativeTime(meta.updatedAt, undefined, this.#strings);
     const preview = document.createElement("span");
     preview.className = "drawer-row-preview";
+    preview.setAttribute("part", "drawer-row-preview");
     preview.textContent = meta.preview;
     select.append(title, time, preview);
     select.addEventListener("click", () => {
@@ -161,6 +215,7 @@ export class ThreadDrawer {
     const rename = document.createElement("button");
     rename.type = "button";
     rename.className = "drawer-row-rename";
+    rename.setAttribute("part", "drawer-row-rename");
     rename.title = this.#strings.rename;
     rename.setAttribute("aria-label", this.#strings.renameConversation);
     rename.textContent = "✎";
@@ -169,6 +224,7 @@ export class ThreadDrawer {
     const remove = document.createElement("button");
     remove.type = "button";
     remove.className = "drawer-row-delete";
+    remove.setAttribute("part", "drawer-row-delete");
     remove.title = this.#strings.delete;
     remove.setAttribute("aria-label", this.#strings.deleteConversation);
     remove.textContent = "🗑";
@@ -176,30 +232,55 @@ export class ThreadDrawer {
 
     const actions = document.createElement("div");
     actions.className = "drawer-row-actions";
+    actions.setAttribute("part", "drawer-row-actions");
     actions.append(rename, remove);
 
     row.append(select, actions);
     return row;
   }
 
-  /** Swap a row for an inline rename input; Enter commits, Escape cancels. */
+  /** Swap a row for an inline rename input; Enter/blur commits, Escape cancels. */
   #startRename(row: HTMLDivElement, meta: ThreadMeta): void {
     const input = document.createElement("input");
     input.type = "text";
     input.className = "drawer-rename-input";
+    input.setAttribute("part", "drawer-rename-input");
     input.value = meta.title;
+    // One-shot: Enter, Escape, and blur can all fire for a single edit (Enter
+    // commits and re-renders, which blurs the detached input); the flag makes
+    // the later events no-ops so a rename isn't submitted twice.
+    let done = false;
+    const commit = (): void => {
+      if (done) {
+        return;
+      }
+      done = true;
+      const value = input.value.trim();
+      if (value === "" || value === meta.title) {
+        this.#renderList();
+      } else {
+        this.#callbacks.onRename(meta.threadId, value);
+      }
+    };
+    const cancel = (): void => {
+      if (done) {
+        return;
+      }
+      done = true;
+      this.#renderList();
+    };
     input.addEventListener("keydown", (event) => {
       if (event.key === "Enter") {
-        const value = input.value.trim();
-        if (value === "") {
-          this.#renderList();
-        } else {
-          this.#callbacks.onRename(meta.threadId, value);
-        }
+        event.preventDefault();
+        commit();
       } else if (event.key === "Escape") {
-        this.#renderList();
+        // Stop the panel's Escape handler from also closing the drawer.
+        event.preventDefault();
+        event.stopPropagation();
+        cancel();
       }
     });
+    input.addEventListener("blur", () => commit());
     row.replaceChildren(input);
     input.focus();
     input.select();
@@ -209,17 +290,21 @@ export class ThreadDrawer {
   #confirmDelete(row: HTMLDivElement, meta: ThreadMeta): void {
     const confirm = document.createElement("div");
     confirm.className = "drawer-confirm";
+    confirm.setAttribute("part", "drawer-confirm");
     const label = document.createElement("span");
     label.className = "drawer-confirm-label";
+    label.setAttribute("part", "drawer-confirm-label");
     label.textContent = this.#strings.deletePrompt;
     const yes = document.createElement("button");
     yes.type = "button";
     yes.className = "drawer-confirm-yes";
+    yes.setAttribute("part", "drawer-confirm-yes");
     yes.textContent = this.#strings.delete;
     yes.addEventListener("click", () => this.#callbacks.onDelete(meta.threadId));
     const no = document.createElement("button");
     no.type = "button";
     no.className = "drawer-confirm-no";
+    no.setAttribute("part", "drawer-confirm-no");
     no.textContent = this.#strings.cancel;
     no.addEventListener("click", () => this.#renderList());
     confirm.append(label, yes, no);

package/src/ui/tool_call_card.ts

@@ -126,6 +126,12 @@ export class ToolCallCard {
    * `inline`), or the args + result together (`compact`).
    */
   settle(status: SettledStatus, text: string): void {
+    // Idempotent: a duplicate `TOOL_CALL_RESULT`, or a replayed tool message
+    // for an already-settled card, must not append a second toggle+body. The
+    // first settle wins; later calls are ignored.
+    if (this.#settled) {
+      return;
+    }
     this.#settled = true;
     this.element.setAttribute("data-status", status);
     this.#status.textContent = statusLabels(this.#strings)[status];

package/src/ui/ui_strings.ts

@@ -98,6 +98,26 @@ export interface UiStrings {
   /** Cancel button (confirmation + delete confirm). */
   cancel: string;
 
+  // ── Approval card (server-side tool gate) ───────────────────────────────────
+  /** `aria-label` of the inline server-side-tool approval card. */
+  approveAction: string;
+  /** Fallback approval prompt when the interrupt carries no message. */
+  approvalPrompt: string;
+  /** Approve button (runs the gated server-side tool). */
+  approve: string;
+  /** Deny button (declines the gated server-side tool). */
+  deny: string;
+
+  // ── Question card (the `ask_user` frontend tool) ────────────────────────────
+  /** `aria-label` of the inline question card. */
+  askUserAction: string;
+  /** Radio label for the free-text "other" choice (when custom answers are allowed). */
+  otherOption: string;
+  /** Placeholder for the free-text answer field. */
+  answerPlaceholder: string;
+  /** Submit button for the question card. */
+  submit: string;
+
   // ── Chat-history drawer ─────────────────────────────────────────────────────
   /** Drawer heading. */
   chats: string;
@@ -186,6 +206,16 @@ export const DEFAULT_UI_STRINGS: UiStrings = {
   confirm: "Confirm",
   cancel: "Cancel",
 
+  approveAction: "Approve action",
+  approvalPrompt: "Approve this action?",
+  approve: "Approve",
+  deny: "Deny",
+
+  askUserAction: "Question",
+  otherOption: "Other…",
+  answerPlaceholder: "Type your answer…",
+  submit: "Submit",
+
   chats: "Chats",
   noConversations: "No conversations yet.",
   rename: "Rename",

package/src/ui/voice_input.ts

@@ -15,7 +15,7 @@ export interface VoiceInputOptions {
 }
 
 /**
- * The composer's voice-input control (VOICE-1): a mic button that records via
+ * 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`.
  *
@@ -38,6 +38,7 @@ export class VoiceInput {
   #recorder: MediaRecorder | null = null;
   #stream: MediaStream | null = null;
   #chunks: Blob[] = [];
+  #disposed = false;
 
   constructor(options: VoiceInputOptions) {
     this.#transcribe = options.transcribe;
@@ -94,7 +95,26 @@ export class VoiceInput {
     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" });

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.9.0";
+export const VERSION: string = "0.11.0";