@runtypelabs/persona 3.20.0 → 3.21.1

package/src/session.test.ts

@@ -642,4 +642,155 @@ describe('AgentWidgetSession.resolveAskUserQuestion', () => {
     expect(errors.length).toBe(1);
     expect(errors[0].message).toMatch(/executionId/);
   });
+
+  it('flips streaming=true BEFORE the resumeFlow fetch resolves (so the typing indicator shows during the silent gap)', async () => {
+    const awaiting = makeAwaitingMessage();
+
+    // Defer fetch resolution so we can observe state mid-await.
+    let resolveFetch!: (value: unknown) => void;
+    const fetchPromise = new Promise((res) => { resolveFetch = res; });
+    global.fetch = vi.fn().mockImplementation(() => fetchPromise);
+
+    const streamingEvents: boolean[] = [];
+    const session = new AgentWidgetSession(
+      {
+        apiUrl: 'http://localhost:43111/api/chat/dispatch',
+        initialMessages: [awaiting],
+      },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: (s) => { streamingEvents.push(s); },
+      }
+    );
+
+    vi.spyOn(session, 'connectStream').mockResolvedValue(undefined);
+
+    // Kick off — don't await.
+    const resolvePromise = session.resolveAskUserQuestion(awaiting, 'Hobbyists');
+
+    // Yield a microtask so synchronous setup (markResolved → setStreaming(true)
+    // → message injection) runs before we observe.
+    await Promise.resolve();
+
+    expect(session.isStreaming()).toBe(true);
+    expect(streamingEvents).toEqual([true]);
+
+    // Now resolve the fetch with a body so the rest of the flow runs.
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(encoder.encode('data: {"type":"flow_complete","success":true}\n\n'));
+        controller.close();
+      },
+    });
+    resolveFetch({ ok: true, body: stream });
+
+    await resolvePromise;
+  });
+
+  it('flips streaming=false on the error path when resume rejects', async () => {
+    const awaiting = makeAwaitingMessage();
+
+    global.fetch = vi.fn().mockResolvedValue({
+      ok: false,
+      status: 500,
+      json: async () => ({ error: 'boom' }),
+    });
+
+    const streamingEvents: boolean[] = [];
+    const errors: Error[] = [];
+    const session = new AgentWidgetSession(
+      {
+        apiUrl: 'http://localhost:43111/api/chat/dispatch',
+        initialMessages: [awaiting],
+      },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: (s) => { streamingEvents.push(s); },
+        onError: (e) => errors.push(e),
+      }
+    );
+
+    await session.resolveAskUserQuestion(awaiting, 'Hobbyists');
+
+    expect(streamingEvents[0]).toBe(true);
+    expect(streamingEvents[streamingEvents.length - 1]).toBe(false);
+    expect(session.isStreaming()).toBe(false);
+    expect(errors.length).toBe(1);
+  });
+});
+
+describe('AgentWidgetSession.resolveApproval', () => {
+  const makeApproval = () => ({
+    id: 'approval-1',
+    status: 'pending' as const,
+    agentId: 'agent_abc',
+    executionId: 'exec_abc',
+    toolName: 'send_email',
+    description: 'Send an email',
+  });
+
+  it('flips streaming=true BEFORE the approval fetch resolves', async () => {
+    let resolveFetch!: (value: unknown) => void;
+    const fetchPromise = new Promise((res) => { resolveFetch = res; });
+    global.fetch = vi.fn().mockImplementation(() => fetchPromise);
+
+    const streamingEvents: boolean[] = [];
+    const session = new AgentWidgetSession(
+      { apiUrl: 'http://localhost:43111/api/chat/dispatch' },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: (s) => { streamingEvents.push(s); },
+      }
+    );
+
+    vi.spyOn(session, 'connectStream').mockResolvedValue(undefined);
+
+    const resolvePromise = session.resolveApproval(makeApproval(), 'approved');
+
+    await Promise.resolve();
+
+    expect(session.isStreaming()).toBe(true);
+    expect(streamingEvents).toEqual([true]);
+
+    // Resolve with a body so the rest of the flow runs through connectStream.
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(encoder.encode('data: {"type":"flow_complete","success":true}\n\n'));
+        controller.close();
+      },
+    });
+    resolveFetch({ ok: true, body: stream });
+
+    await resolvePromise;
+  });
+
+  it('flips streaming=false on the error path when approval rejects', async () => {
+    // The approval response goes through `instanceof Response` checks, so
+    // a non-Response mock that "errors" needs to be modeled as a thrown fetch.
+    global.fetch = vi.fn().mockRejectedValue(new Error('network boom'));
+
+    const streamingEvents: boolean[] = [];
+    const errors: Error[] = [];
+    const session = new AgentWidgetSession(
+      { apiUrl: 'http://localhost:43111/api/chat/dispatch' },
+      {
+        onMessagesChanged: () => {},
+        onStatusChanged: () => {},
+        onStreamingChanged: (s) => { streamingEvents.push(s); },
+        onError: (e) => errors.push(e),
+      }
+    );
+
+    await session.resolveApproval(makeApproval(), 'approved');
+
+    expect(streamingEvents[0]).toBe(true);
+    expect(streamingEvents[streamingEvents.length - 1]).toBe(false);
+    expect(session.isStreaming()).toBe(false);
+    expect(errors.length).toBe(1);
+  });
 });

package/src/session.ts

@@ -908,10 +908,12 @@ export class AgentWidgetSession {
    */
   public async connectStream(
     stream: ReadableStream<Uint8Array>,
-    options?: { assistantMessageId?: string }
+    options?: { assistantMessageId?: string; allowReentry?: boolean }
   ): Promise<void> {
-    if (this.streaming) return;
-    this.abortController?.abort();
+    if (this.streaming && !options?.allowReentry) return;
+    if (!options?.allowReentry) {
+      this.abortController?.abort();
+    }
 
     // Finalize any stale streaming messages from the previous stream
     // (e.g., tool messages interrupted by approval pause)
@@ -971,6 +973,13 @@ export class AgentWidgetSession {
     };
     this.upsertMessage(updatedMessage);
 
+    // Show the standalone typing indicator immediately while we wait for the
+    // approval round-trip. Install an abortController so cancel() works during
+    // the silent gap. See `resolveAskUserQuestion` for the same pattern.
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    this.setStreaming(true);
+
     // 2. Call onDecision callback if provided, otherwise use client.resolveApproval()
     const approvalConfig = this.config.approval;
     const onDecision = approvalConfig && typeof approvalConfig === 'object' ? approvalConfig.onDecision : undefined;
@@ -1015,23 +1024,44 @@ export class AgentWidgetSession {
         }
 
         if (stream) {
-          await this.connectStream(stream);
-        } else if (decision === 'denied') {
-          // No stream body for denied — inject a denial message
-          this.appendMessage({
-            id: `denial-${approval.id}`,
-            role: "assistant",
-            content: "Tool execution was denied by user.",
-            createdAt: new Date().toISOString(),
-            streaming: false,
-            sequence: this.nextSequence(),
-          });
+          await this.connectStream(stream, { allowReentry: true });
+        } else {
+          if (decision === 'denied') {
+            // No stream body for denied — inject a denial message
+            this.appendMessage({
+              id: `denial-${approval.id}`,
+              role: "assistant",
+              content: "Tool execution was denied by user.",
+              createdAt: new Date().toISOString(),
+              streaming: false,
+              sequence: this.nextSequence(),
+            });
+          }
+          // No body to pipe — drop the pre-set streaming flag so the indicator
+          // doesn't linger forever.
+          this.setStreaming(false);
+          this.abortController = null;
         }
+      } else {
+        // onDecision returned void / no response — drop the pre-set flag.
+        this.setStreaming(false);
+        this.abortController = null;
       }
     } catch (error) {
-      this.callbacks.onError?.(
-        error instanceof Error ? error : new Error(String(error))
-      );
+      const isAbortError =
+        error instanceof Error &&
+        (error.name === 'AbortError' ||
+         error.message.includes('aborted') ||
+         error.message.includes('abort'));
+
+      this.setStreaming(false);
+      this.abortController = null;
+
+      if (!isAbortError) {
+        this.callbacks.onError?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
     }
   }
 
@@ -1143,6 +1173,15 @@ export class AgentWidgetSession {
     }
     this.markAskUserQuestionResolved(toolMessage, structuredAnswers);
 
+    // Show the standalone typing indicator immediately — the network round-trip
+    // to /resume is otherwise silent, which reads as broken. The render
+    // condition in ui.ts already shows the indicator once streaming flips true
+    // and the last message is a user bubble (the answer we inject below).
+    // Install an abortController so cancel() works during this silent gap.
+    this.abortController?.abort();
+    this.abortController = new AbortController();
+    this.setStreaming(true);
+
     // Inject Q→A pair messages — one assistant bubble per question, one user
     // bubble per answer — so the transcript reads like a normal conversation.
     // The original ask_user_question tool message is suppressed by the
@@ -1214,12 +1253,30 @@ export class AgentWidgetSession {
       }
 
       if (response.body) {
-        await this.connectStream(response.body);
+        await this.connectStream(response.body, { allowReentry: true });
+      } else {
+        // No body to pipe — drop the pre-set streaming flag so the indicator
+        // doesn't linger forever.
+        this.setStreaming(false);
+        this.abortController = null;
       }
     } catch (error) {
-      this.callbacks.onError?.(
-        error instanceof Error ? error : new Error(String(error))
-      );
+      // Mirror sendMessage: a cancel() during the await aborts the controller
+      // and surfaces an AbortError — don't treat that as a real failure.
+      const isAbortError =
+        error instanceof Error &&
+        (error.name === 'AbortError' ||
+         error.message.includes('aborted') ||
+         error.message.includes('abort'));
+
+      this.setStreaming(false);
+      this.abortController = null;
+
+      if (!isAbortError) {
+        this.callbacks.onError?.(
+          error instanceof Error ? error : new Error(String(error))
+        );
+      }
     }
   }
 

package/src/types.ts

@@ -30,15 +30,40 @@ export type ImageContentPart = {
  */
 export type FileContentPart = {
   type: 'file';
-  data: string; // base64 data URI
+  data: string; // base64 data URI or URL
   mimeType: string;
   filename: string;
 };
 
+/**
+ * Audio content part for multi-modal messages
+ * Supports base64 data URIs or URLs
+ */
+export type AudioContentPart = {
+  type: 'audio';
+  audio: string; // base64 data URI or URL
+  mimeType?: string;
+};
+
+/**
+ * Video content part for multi-modal messages
+ * Supports base64 data URIs or URLs
+ */
+export type VideoContentPart = {
+  type: 'video';
+  video: string; // base64 data URI or URL
+  mimeType?: string;
+};
+
 /**
  * Union type for all content part types
  */
-export type ContentPart = TextContentPart | ImageContentPart | FileContentPart;
+export type ContentPart =
+  | TextContentPart
+  | ImageContentPart
+  | FileContentPart
+  | AudioContentPart
+  | VideoContentPart;
 
 /**
  * Message content can be a simple string or an array of content parts

package/src/ui.ask-user-question-plugin.test.ts

@@ -598,6 +598,48 @@ describe("renderAskUserQuestion plugin hook", () => {
     controller.destroy();
   });
 
+  it("shows the standalone typing indicator immediately after picking an option (resumeFlow pending)", async () => {
+    // Defer the fetch response so we observe the DOM during the silent gap
+    // between the user's pick and the next streamed token.
+    let resolveFetch!: (value: unknown) => void;
+    const fetchPromise = new Promise((res) => { resolveFetch = res; });
+    global.fetch = vi.fn().mockImplementation(() => fetchPromise) as unknown as typeof fetch;
+
+    const mount = createMount();
+    const controller = createAgentExperience(mount, {
+      apiUrl: "https://api.example.com/chat",
+      launcher: { enabled: false },
+    } as unknown as Parameters<typeof createAgentExperience>[1]);
+
+    injectAskUserQuestion(controller);
+
+    // Pre-condition: no typing indicator before the user picks.
+    expect(mount.querySelector('[data-typing-indicator="true"]')).toBeNull();
+
+    const sheet = mount.querySelector<HTMLElement>("[data-persona-ask-sheet-for]")!;
+    (sheet.querySelector('[data-option-label="Hobbyists"]') as HTMLElement).click();
+
+    // Let the synchronous setStreaming(true) + injectMessage path run through.
+    await Promise.resolve();
+    await Promise.resolve();
+
+    // The typing indicator should be visible while resumeFlow is pending.
+    expect(mount.querySelector('[data-typing-indicator="true"]')).not.toBeNull();
+
+    // Drain the pending fetch so the test doesn't leak.
+    resolveFetch({
+      ok: true,
+      body: new ReadableStream({
+        start(c) {
+          c.enqueue(new TextEncoder().encode('data: {"type":"flow_complete","success":true}\n\n'));
+          c.close();
+        },
+      }),
+    });
+
+    controller.destroy();
+  });
+
   it("wires resolve(answer) to session.resolveAskUserQuestion via /resume", async () => {
     const fetchMock = vi.fn().mockResolvedValue({
       ok: true,