@artooi/ag-ui-web-component 0.39.0 → 0.41.0

package/src/ui/composer/composer_attachments.ts

@@ -57,8 +57,15 @@ export class ComposerAttachments {
    * built-in multipart endpoint: reveal the 📎 button, wire the hidden file
    * input + drag-and-drop, and mount the tray. With neither, the affordance
    * stays hidden and the chat degrades to text-only.
+   *
+   * Called on every connect, so it starts by taking down the tray the last
+   * connection mounted: that one was disposed when the element left, and the
+   * attributes that decide whether there is a tray at all may have changed
+   * since. The shell outlives a connection, so its listeners go under `signal`.
    */
-  wire(): void {
+  wire(signal: AbortSignal): void {
+    this.#tray?.element.remove();
+    this.#tray = null;
     const url = this.#host.element.getAttribute("data-attachments-url");
     const upload = this.#host.uploadHandler() ?? this.#defaultUploadHandler(url);
     if (upload === null) {
@@ -82,8 +89,8 @@ export class ComposerAttachments {
     this.#host.slot.appendChild(this.#tray.element);
     this.#host.fileInput.accept = accept;
     this.#host.button.hidden = false;
-    this.#enableDragAndDrop();
-    this.#enablePaste(tray);
+    this.#enableDragAndDrop(signal);
+    this.#enablePaste(tray, signal);
   }
 
   /** The queueing behind `AgUiChat.attachFile`, whose doc is the contract. */
@@ -136,25 +143,37 @@ export class ComposerAttachments {
   }
 
   /** Accept files dropped anywhere on the chat shell into the tray. */
-  #enableDragAndDrop(): void {
+  #enableDragAndDrop(signal: AbortSignal): void {
     const chat = this.#host.chat;
-    chat.addEventListener("dragover", (event) => {
-      event.preventDefault();
-      chat.classList.add("chat--dragover");
-    });
-    chat.addEventListener("dragleave", () => {
-      chat.classList.remove("chat--dragover");
-    });
-    chat.addEventListener("drop", (event) => {
-      event.preventDefault();
-      chat.classList.remove("chat--dragover");
-      const files = event.dataTransfer?.files;
-      if (files !== undefined) {
-        for (const file of Array.from(files)) {
-          this.#tray?.add(file);
+    chat.addEventListener(
+      "dragover",
+      (event) => {
+        event.preventDefault();
+        chat.classList.add("chat--dragover");
+      },
+      { signal },
+    );
+    chat.addEventListener(
+      "dragleave",
+      () => {
+        chat.classList.remove("chat--dragover");
+      },
+      { signal },
+    );
+    chat.addEventListener(
+      "drop",
+      (event) => {
+        event.preventDefault();
+        chat.classList.remove("chat--dragover");
+        const files = event.dataTransfer?.files;
+        if (files !== undefined) {
+          for (const file of Array.from(files)) {
+            this.#tray?.add(file);
+          }
         }
-      }
-    });
+      },
+      { signal },
+    );
   }
 
   /**
@@ -228,27 +247,31 @@ export class ComposerAttachments {
    * clipboard, and swallowing the words someone meant to paste in order to
    * attach a picture they did not is the worse of the two failures.
    */
-  #enablePaste(tray: AttachmentTray): void {
-    this.#host.chat.addEventListener("paste", (event: ClipboardEvent) => {
-      // Nullish rather than a null check: the property is typed as nullable,
-      // and an engine that fires a plain Event for a paste leaves it absent
-      // instead, which is not the same value and is the same situation.
-      const clipboard = event.clipboardData ?? null;
-      if (clipboard === null) {
-        return;
-      }
-      const files = Array.from(clipboard.files);
-      if (files.length === 0) {
-        this.#pasteLongTextAsFile(event, clipboard, tray);
-        return;
-      }
-      if (clipboard.getData("text/plain") === "") {
-        event.preventDefault();
-      }
-      for (const file of files) {
-        this.#tray?.add(named(file));
-      }
-    });
+  #enablePaste(tray: AttachmentTray, signal: AbortSignal): void {
+    this.#host.chat.addEventListener(
+      "paste",
+      (event: ClipboardEvent) => {
+        // Nullish rather than a null check: the property is typed as nullable,
+        // and an engine that fires a plain Event for a paste leaves it absent
+        // instead, which is not the same value and is the same situation.
+        const clipboard = event.clipboardData ?? null;
+        if (clipboard === null) {
+          return;
+        }
+        const files = Array.from(clipboard.files);
+        if (files.length === 0) {
+          this.#pasteLongTextAsFile(event, clipboard, tray);
+          return;
+        }
+        if (clipboard.getData("text/plain") === "") {
+          event.preventDefault();
+        }
+        for (const file of files) {
+          this.#tray?.add(named(file));
+        }
+      },
+      { signal },
+    );
   }
 
   /** Tell the host what the tray now holds — see {@link ATTACHMENT_EVENT}. */

package/src/ui/composer/composer_voice.ts

@@ -44,8 +44,13 @@ export class ComposerVoice {
    * 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.
+   *
+   * Called on every connect, so it starts by taking down the mic the last
+   * connection mounted, which was released when the element left.
    */
   wire(): void {
+    this.#voice?.element.remove();
+    this.#voice = null;
     const url = this.#host.element.getAttribute("data-transcribe-url");
     const transcribe = this.#host.transcribeHandler() ?? this.#defaultTranscribeHandler(url);
     if (transcribe === null) {

package/src/ui/excerpts/transcript_quote_offer.ts

@@ -99,8 +99,13 @@ export class TranscriptQuoteOffer {
     this.#pageQuote = null;
   }
 
-  /** Build the offer and listen for settled selections in the transcript. */
-  mount(): void {
+  /**
+   * Build the offer and listen for settled selections in the transcript.
+   *
+   * The button and the transcript outlive a connection, so the listeners go
+   * under `signal`, which the element aborts when it leaves the document.
+   */
+  mount(signal: AbortSignal): void {
     const button = this.button;
     button.className = "quote-selection";
     button.type = "button";
@@ -111,23 +116,31 @@ export class TranscriptQuoteOffer {
     // selection first, and by the time a click lands there is nothing left to
     // quote. Preventing the default keeps the selection alive long enough to
     // read it.
-    button.addEventListener("mousedown", (event) => {
-      event.preventDefault();
-    });
-    button.addEventListener("click", () => {
-      this.#host.quote(this.#quoting);
-      window.getSelection()?.removeAllRanges();
-      this.#hide();
-    });
+    button.addEventListener(
+      "mousedown",
+      (event) => {
+        event.preventDefault();
+      },
+      { signal },
+    );
+    button.addEventListener(
+      "click",
+      () => {
+        this.#host.quote(this.#quoting);
+        window.getSelection()?.removeAllRanges();
+        this.#hide();
+      },
+      { signal },
+    );
 
     // A settled selection, by either input. `mouseup` rather than
     // `selectionchange` so the offer does not chase the pointer mid-drag; the
     // second half of the same gesture, `mousedown`, retires the previous offer
     // before the new selection exists.
     const messages = this.#host.messages;
-    messages.addEventListener("mouseup", (event) => this.#onSelectionSettled(event));
-    messages.addEventListener("keyup", () => this.#onSelectionSettled());
-    messages.addEventListener("mousedown", () => this.#hide());
+    messages.addEventListener("mouseup", (event) => this.#onSelectionSettled(event), { signal });
+    messages.addEventListener("keyup", () => this.#onSelectionSettled(), { signal });
+    messages.addEventListener("mousedown", () => this.#hide(), { signal });
   }
 
   /** Whether the transcript offers to quote what the user selects. */

package/src/ui/history/conversation_history.ts

@@ -1,5 +1,5 @@
 import { randomUUID } from "@ag-ui/client";
-import type { Message } from "@ag-ui/core";
+import { contentToText, type Message } from "@ag-ui/core";
 import { MESSAGE_ROLE, TOOL_OUTCOME } from "../../constants.js";
 import type { ActivityRegistry } from "../../core/activity_registry.js";
 import type { AgUiClient } from "../../core/agui_client.js";
@@ -12,7 +12,7 @@ import type {
 import type { MessageRole } from "../../core/message_role.js";
 import { RunIndex } from "../../core/run_index.js";
 import { toolStatusFromOutcome } from "../../core/tool_outcome.js";
-import { answerUnansweredCalls, mintThread } from "../../core/utils.js";
+import { answerUnansweredCalls, metadataOrTopLevel, mintThread } from "../../core/utils.js";
 import type { ToolCatalog } from "../../tools/tool_catalog.js";
 import type { AnswerActions } from "../transcript/answer_actions.js";
 import { renderAttachmentChips } from "../transcript/attachment_chips.js";
@@ -61,6 +61,17 @@ export interface ConversationHistoryHost {
   readonly appendMessage: (role: MessageRole, content: string) => HTMLDivElement;
   /** Resize the composer to its content. */
   readonly autoGrow: () => void;
+  /**
+   * A continuation has ended, whether or not it ever ran.
+   *
+   * The composer parks a turn typed while one is in flight, and learns a run
+   * has settled from its own events -- which never arrive for a continuation
+   * that failed before starting one. Without this, such a turn stayed parked
+   * with nothing left to release it.
+   */
+  readonly continuationEnded: () => void;
+  /** The conversation's own client, or `null` until one is built. */
+  readonly client: () => AgUiClient | null;
   /** The conversation's own client, built on first use. */
   readonly ensureClient: () => AgUiClient;
   /**
@@ -69,6 +80,14 @@ export interface ConversationHistoryHost {
    * added to one can be missing from the other.
    */
   readonly buildClient: (seed: ClientSeed) => AgUiClient;
+  /**
+   * Forget the conversation's own client, so the next one is built from
+   * {@link ConversationHistory.restored}. Nothing is cancelled: this is for a
+   * client that is not running.
+   */
+  readonly releaseClient: () => void;
+  /** Whether an interaction is in flight, which the composer owns. */
+  readonly running: () => boolean;
   /** Stop the in-flight run. */
   readonly cancelRun: () => void;
   /** Drop the in-memory run and transcript, leaving the thread untouched. */
@@ -97,10 +116,16 @@ export class ConversationHistory {
   /** The active thread's id. Empty until the element connects. */
   #threadId = "";
   /**
-   * The messages the last restore replayed, which seed the next client the
-   * element builds. Emptied with the rest of the in-memory run.
+   * The conversation as last written for the next client the element builds to
+   * start from: what the last restore replayed, or what a checkpoint
+   * continuation last saved after it. Emptied with the rest of the in-memory run.
    */
   #restored: readonly Message[] = [];
+  /**
+   * Counts the conversations cleared away, so a continuation can tell whether
+   * the one it continued is still on screen when it saves.
+   */
+  #cleared = 0;
   // Bumped on every rehydrate; a replay whose generation is stale (a newer
   // thread switch started while it awaited a slow store) drops its result.
   #generation = 0;
@@ -121,11 +146,16 @@ export class ConversationHistory {
     return this.#threadId;
   }
 
-  /** The messages the last restore replayed, for seeding the next client. */
+  /** The conversation as last written, for seeding the next client. */
   get restored(): readonly Message[] {
     return this.#restored;
   }
 
+  /** The checkpoint continuation in flight, or `null` when none is running. */
+  get continuation(): AgUiClient | null {
+    return this.#continuation;
+  }
+
   /** Point at the thread the store says is active. */
   adoptActiveThread(): void {
     this.#threadId = this.#host.conversationStore().threadId();
@@ -153,6 +183,9 @@ export class ConversationHistory {
   /** Forget the messages the last restore seeded, with the rest of the run. */
   forgetRestored(): void {
     this.#restored = [];
+    // The element clears the conversation through here, so a continuation
+    // still saving afterwards learns the conversation is no longer this one.
+    this.#cleared += 1;
   }
 
   /** Delete the active thread if nothing was ever sent in it. */
@@ -258,13 +291,18 @@ export class ConversationHistory {
    * Uses a short-lived agent pointed at the resume / fork endpoint and seeded
    * with no history, because those endpoints supply the prior turns from the
    * snapshot and re-sending them would duplicate. A separate agent makes that
-   * structural — the main agent keeps its own history — and mints the fresh
-   * `run_id` the endpoints also require.
+   * structural and mints the fresh `run_id` the endpoints also require.
    *
    * Built by the same construction as the conversation's own client, so the
    * continuation streams into the same transcript the user is looking at and
    * runs under the same state, tools and bounds. It is the run in flight while
    * it lasts: {@link stopContinuation} is how the element's Stop reaches it.
+   *
+   * What it adds joins the conversation. Its saves write the conversation on
+   * screen ahead of its exchange, and each one hands that whole list to the
+   * next client the element builds, so the next ordinary message is sent with
+   * the exchange it follows. The conversation's own client never held it, and
+   * was sending without it.
    */
   async continueRun(runId: string, verb: CheckpointVerb): Promise<void> {
     const index = this.runs();
@@ -275,6 +313,26 @@ export class ConversationHistory {
       // documented empty panel, which has no rows either. Typed, not silent.
       return;
     }
+    if (this.#host.running() || this.#continuation !== null) {
+      // Refused rather than started beside it. The panel opens and its rows
+      // take a pick while a run streams, and a second run would draw its answer
+      // into the turn still arriving; a second continuation would also replace
+      // the one Stop reaches, leaving the first streaming where nothing could
+      // end it. Nor is the earlier run cancelled for it: a pick in a panel is not
+      // a Stop, and what is streaming may be the answer the user is waiting on.
+      //
+      // Both checks, because they see different moments. `running` is the
+      // composer's own state and spans every round of an interaction, but it
+      // is set when the run's first event arrives; a continuation is recorded
+      // here the moment it starts.
+      //
+      // Said at the composer, as an empty composer is below, because the row
+      // closed the panel before this ran. The typed turn stays where it is --
+      // it is what the user wants sent once the run is done -- and the caret
+      // goes back to it, where Escape stops the run.
+      this.#refuse(this.#host.strings().continueWhileRunning);
+      return;
+    }
     const content = this.#host.input.value.trim();
     if (content === "") {
       // A continuation sends *only* the next turn -- the snapshot supplies
@@ -289,31 +347,81 @@ export class ConversationHistory {
       // keystroke -- a transcript notice for a recoverable slip would outlive
       // the slip. Focus follows for the same reason applying a skill moves it when
       // a template is short of a field.
-      this.#host.hint.textContent = this.#host.strings().continueNeedsTurn;
-      this.#host.hint.hidden = false;
-      this.#host.input.focus();
+      this.#refuse(this.#host.strings().continueNeedsTurn);
       return;
     }
     this.#host.input.value = "";
     this.#host.autoGrow();
+    const cleared = this.#cleared;
     const client = this.#host.buildClient({
       endpoint: verb === "resume" ? index.resumeUrl(runId) : index.forkUrl(runId),
       // The seed the endpoints assume: nothing. The snapshot is the history.
       initialMessages: [],
-      // Nor does it write the store. Its agent holds only the new turn and its
-      // answer, and a store keeps one list per thread, so saving what this
-      // client has would replace the conversation with its last exchange.
-      persist: false,
+      // What its saves write ahead of the exchange: the conversation on screen,
+      // in the form the store holds it. From the conversation's own client when
+      // there is one, because that client keeps how each call ended beside its
+      // messages rather than on them; otherwise what the last restore or
+      // continuation wrote, which is already in that form.
+      //
+      // All of it, even where this forks an earlier run and the server's
+      // snapshot stops there: what is saved is what the screen shows.
+      follows: this.#host.client()?.messages ?? this.#restored,
+      onSaved: (conversation) => {
+        // A continuation stopped by New chat or a thread switch saves once its
+        // request closes, into its own thread; the conversation now on screen
+        // is not the one it continued.
+        if (cleared !== this.#cleared) {
+          return;
+        }
+        // The conversation's own client holds the conversation without this
+        // exchange, and would send it that way. Released rather than patched:
+        // the next client is built from this list exactly as a reload builds
+        // one from the store, outcomes included.
+        //
+        // Nothing can run on the released client in between, because the
+        // composer refuses to start one while a continuation is in flight --
+        // it parks the turn instead. It said here that only a script in the
+        // same task could, which was wrong by a whole request: `running` does
+        // not turn on until the continuation's first event, and a person who
+        // typed in that window got a second run against the snapshot
+        // `follows` had already frozen, so whichever saved last dropped the
+        // other's turn.
+        this.#restored = conversation;
+        this.#host.releaseClient();
+      },
     });
     this.#continuation = client;
-    await client.send(content);
-    // Only if it is still the one in flight: stopping forgets it at once, and a
-    // continuation started after that one is not this one to forget.
-    if (this.#continuation === client) {
-      this.#continuation = null;
+    try {
+      await client.send(content);
+    } finally {
+      // Only if it is still the one in flight: stopping forgets it at once, and
+      // a continuation started after that one is not this one to forget.
+      //
+      // In a finally because the send can fail before its run ever starts. The
+      // first save goes through the host's `conversationStore` synchronously
+      // inside it, and a store is the host's to replace: the built-in one
+      // swallows a write the browser refused, a server-backed one need not. A
+      // throw there left this pointing at a client that would never run, so
+      // every later pick was refused with no Stop to clear it -- the composer's
+      // button is Send until a run reports a start -- and `#liveClient` went on
+      // handing that dead client the shared state a host wrote.
+      if (this.#continuation === client) {
+        this.#continuation = null;
+        this.#host.continuationEnded();
+      }
     }
   }
 
+  /**
+   * Say at the composer why a picked run did not continue, and put the caret
+   * there. The hint clears itself on the next keystroke.
+   */
+  #refuse(reason: string): void {
+    this.#host.hint.textContent = reason;
+    this.#host.hint.hidden = false;
+    this.#host.input.focus();
+  }
+
   /**
    * Restore the conversation from the store on mount, then — if a navigating
    * tool reloaded the page mid-run — resume the loop by supplying that tool's
@@ -379,16 +487,14 @@ export class ConversationHistory {
       const restored = answerUnansweredCalls(
         messages,
         // The shape the store holds for a call the client answered the same way:
-        // its tool message, with the outcome it annotates onto the stored copy.
-        // Cast at the AG-UI boundary, as the client's own annotation is.
-        (toolCallId) =>
-          ({
-            id: randomUUID(),
-            role: "tool",
-            content: unfinished,
-            toolCallId,
-            outcome: TOOL_OUTCOME.INTERRUPTED,
-          }) as Message,
+        // its tool message, with the outcome in its metadata.
+        (toolCallId) => ({
+          id: randomUUID(),
+          role: "tool",
+          content: unfinished,
+          toolCallId,
+          metadata: { outcome: TOOL_OUTCOME.INTERRUPTED },
+        }),
         new Set(checkpoint === null ? [] : [checkpoint.toolCallId]),
       );
       this.#restored = restored;
@@ -503,16 +609,21 @@ export class ConversationHistory {
     if (message.role === "tool") {
       const card = this.#host.transcript.card(message.toolCallId);
       if (card !== undefined) {
-        // The outcome `AgUiClient` annotated onto the persisted message, read
-        // back through the same mapping the live path uses -- so a card that
-        // said "declined" before the reload still says it after. Narrowed off
-        // `unknown` rather than trusted, like every other field read out of the
-        // store: `Message` does not declare it, a host store may not round-trip
-        // it, and history written before this shipped has none. All three land
-        // on DONE, which is what this line did unconditionally.
+        // The outcome in the message's metadata -- folded there from a server's
+        // result by `@ag-ui/client`, or written there by `AgUiClient` for a
+        // result it made itself -- read back through the same mapping the live
+        // path uses, so a card that said "declined" before the reload still
+        // says it after. History stored by an earlier release has it at the
+        // top level instead, which is read when the metadata has none. Narrowed
+        // off `unknown` rather than trusted, like every other field read out of
+        // the store: metadata is open by key, a host store may not round-trip
+        // it, and history written before outcomes existed has none. All three
+        // land on DONE, which is what this line did unconditionally.
         card.settle(
-          toolStatusFromOutcome((message as { outcome?: unknown }).outcome),
-          message.content,
+          toolStatusFromOutcome(metadataOrTopLevel(message, "outcome")),
+          // Flattened exactly as the live path flattens it, so a reload shows
+          // the card the user watched settle.
+          contentToText(message.content),
         );
       }
     }