vanilla-agent 1.3.0 → 1.4.0

package/dist/widget.css

@@ -56,6 +56,14 @@
   justify-content: center;
 }
 
+.tvw-justify-between {
+  justify-content: space-between;
+}
+
+.tvw-justify-end {
+  justify-content: flex-end;
+}
+
 .tvw-gap-1 {
   gap: 0.25rem;
 }
@@ -160,6 +168,10 @@
   background-color: var(--cw-primary, #111827);
 }
 
+.tvw-italic {
+  font-style: italic;
+}
+
 .tvw-text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -823,3 +835,12 @@ form:focus-within textarea {
   margin: 0.5rem 0;
   border-radius: 0.375rem;
 }
+
+/* Ensure links in user messages match the text color */
+#vanilla-agent-root .tvw-text-white a,
+#vanilla-agent-root .tvw-text-white a:visited,
+#vanilla-agent-root .tvw-text-white a:hover,
+#vanilla-agent-root .tvw-text-white a:active {
+  color: inherit;
+  text-decoration: underline;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Themeable, plugable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -24,7 +24,9 @@
   ],
   "dependencies": {
     "lucide": "^0.552.0",
-    "marked": "^12.0.2"
+    "marked": "^12.0.2",
+    "partial-json": "^0.1.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",

package/src/client.test.ts

@@ -0,0 +1,197 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { AgentWidgetClient } from './client';
+import { AgentWidgetEvent, AgentWidgetMessage } from './types';
+import { createJsonStreamParser } from './utils/formatting';
+
+describe('AgentWidgetClient - JSON Streaming', () => {
+  let client: AgentWidgetClient;
+  let events: AgentWidgetEvent[] = [];
+
+  beforeEach(() => {
+    events = [];
+    client = new AgentWidgetClient({
+      apiUrl: 'http://localhost:8000',
+      streamParser: createJsonStreamParser
+    });
+  });
+
+  it('should stream text incrementally and not show raw JSON at the end', async () => {
+    // Simulate the SSE stream from the user's example
+    const sseEvents = [
+      'data: {"type":"flow_start","flowId":"flow_01k9pfnztzfag9tfz4t65c9c5q","flowName":"Shopping Assistant","totalSteps":1,"startedAt":"2025-11-12T23:47:39.565Z","executionId":"exec_standalone_1762991259266_7wz736k7n","executionContext":{"source":"standalone","record":{"id":"-1","name":"Streaming Chat Widget","created":false},"flow":{"id":"flow_01k9pfnztzfag9tfz4t65c9c5q","name":"Shopping Assistant","created":false}}}',
+      '',
+      'data: {"type":"step_start","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","stepType":"prompt","index":1,"totalSteps":1,"startedAt":"2025-11-12T23:47:39.565Z"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"{\n"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" "}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" \\""}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"action"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"\\":"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" \\""}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"message"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"\\",\\n"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" "}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" \\""}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"text"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"\\":"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" \\""}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"Great"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"!"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" If"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" you"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" have"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" any"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" questions"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" or"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" need"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" help"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" finding"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" something"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":","}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" just"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" let"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" me"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" know"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"!\\"\\n"}',
+      '',
+      'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":"}"}',
+      '',
+      'data: {"type":"step_complete","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":1,"success":true,"result":{"promptId":"step_01k9x5db72fzwvmdenryn0qm48","promptName":"Prompt 1","processedPrompt":"ok","response":"{\\"\\n  \\"action\\": \\"message\\",\\n  \\"text\\": \\"Great! If you have any questions or need help finding something, just let me know!\\"\\n}","tokens":{"input":1833,"output":34,"total":1867},"cost":0.000700125,"executionTime":2222,"order":2},"executionTime":2222}',
+      '',
+      'data: {"type":"flow_complete","flowId":"flow_01k9pfnztzfag9tfz4t65c9c5q","success":true,"duration":2968,"completedAt":"2025-11-12T23:47:42.234Z","totalTokensUsed":0}'
+    ];
+
+    // Create a ReadableStream from the SSE events
+    const encoder = new TextEncoder();
+    const stream = new ReadableStream({
+      start(controller) {
+        for (const event of sseEvents) {
+          controller.enqueue(encoder.encode(event + '\n'));
+        }
+        controller.close();
+      }
+    });
+
+    // Mock fetch to return our stream
+    global.fetch = async () => ({
+      ok: true,
+      body: stream
+    }) as any;
+
+    // Dispatch and collect events
+    await client.dispatch(
+      {
+        messages: [{ role: 'user', content: 'ok' }]
+      },
+      (event) => {
+        events.push(event);
+        if (event.type === 'message') {
+          console.log('Message event:', {
+            content: event.message.content,
+            streaming: event.message.streaming,
+            contentLength: event.message.content.length
+          });
+        }
+      }
+    );
+
+    // Filter for assistant message events
+    const messageEvents = events.filter(
+      (e) => e.type === 'message' && e.message.role === 'assistant'
+    ) as Extract<AgentWidgetEvent, { type: 'message' }>[];
+
+    // Validate behavior
+    expect(messageEvents.length).toBeGreaterThan(0);
+
+    // 1. Check that text starts streaming incrementally (not all at once)
+    const streamingMessages = messageEvents.filter((e) => e.message.streaming);
+    expect(streamingMessages.length).toBeGreaterThan(1);
+    console.log(`Found ${streamingMessages.length} streaming message events`);
+
+    // 2. Check that text content appears progressively
+    let hasPartialText = false;
+    const expectedFinalText = "Great! If you have any questions or need help finding something, just let me know!";
+    
+    for (const msgEvent of streamingMessages) {
+      const content = msgEvent.message.content;
+      
+      // Should not contain raw JSON during streaming
+      if (content.includes('"action"') || content.includes('"text"')) {
+        console.error('Found raw JSON in streaming content:', content);
+      }
+      expect(content).not.toMatch(/"action"|"text":/);
+      
+      // Check for partial text (text that's incomplete)
+      if (content.length > 0 && content.length < expectedFinalText.length) {
+        hasPartialText = true;
+        // Partial text should be a prefix of the final text
+        expect(expectedFinalText.startsWith(content)).toBe(true);
+      }
+    }
+
+    expect(hasPartialText).toBe(true);
+    console.log('✓ Text streamed incrementally with partial values');
+
+    // 3. Check final message (streaming: false)
+    const finalMessages = messageEvents.filter((e) => !e.message.streaming);
+    expect(finalMessages.length).toBeGreaterThan(0);
+
+    const finalMessage = finalMessages[finalMessages.length - 1].message;
+    console.log('Final message content:', finalMessage.content);
+
+    // Final content should be ONLY the extracted text, not raw JSON
+    expect(finalMessage.content).toBe(expectedFinalText);
+    expect(finalMessage.content).not.toContain('"action"');
+    expect(finalMessage.content).not.toContain('"text"');
+    expect(finalMessage.content).not.toContain('{\n');
+
+    console.log('✓ Final message contains only extracted text, no raw JSON');
+
+    // 4. Verify no raw JSON was ever displayed
+    const allContents = messageEvents.map((e) => e.message.content);
+    const hasRawJson = allContents.some(
+      (content) => content.includes('{\n  "action": "message"')
+    );
+    
+    if (hasRawJson) {
+      const rawJsonMessage = allContents.find((content) =>
+        content.includes('{\n  "action": "message"')
+      );
+      console.error('Found raw JSON in message content:', rawJsonMessage);
+    }
+    
+    expect(hasRawJson).toBe(false);
+    console.log('✓ No raw JSON was displayed at any point');
+  });
+});
+

package/src/client.ts

@@ -1,4 +1,5 @@
-import { AgentWidgetConfig, AgentWidgetMessage, AgentWidgetEvent } from "./types";
+import { AgentWidgetConfig, AgentWidgetMessage, AgentWidgetEvent, AgentWidgetStreamParser } from "./types";
+import { extractTextFromJson, createPlainTextParser } from "./utils/formatting";
 
 type DispatchOptions = {
   messages: AgentWidgetMessage[];
@@ -13,6 +14,7 @@ export class AgentWidgetClient {
   private readonly apiUrl: string;
   private readonly headers: Record<string, string>;
   private readonly debug: boolean;
+  private readonly createStreamParser: () => AgentWidgetStreamParser;
 
   constructor(private config: AgentWidgetConfig = {}) {
     this.apiUrl = config.apiUrl ?? DEFAULT_ENDPOINT;
@@ -21,6 +23,8 @@ export class AgentWidgetClient {
       ...config.headers
     };
     this.debug = Boolean(config.debug);
+    // Use custom stream parser from config, or fall back to plain text parser
+    this.createStreamParser = config.streamParser ?? createPlainTextParser;
   }
 
   public async dispatch(options: DispatchOptions, onEvent: SSEHandler) {
@@ -322,6 +326,26 @@ export class AgentWidgetClient {
       return Date.now();
     };
 
+    const ensureStringContent = (value: unknown): string => {
+      if (typeof value === "string") {
+        return value;
+      }
+      if (value === null || value === undefined) {
+        return "";
+      }
+      // Convert objects/arrays to JSON string
+      try {
+        return JSON.stringify(value);
+      } catch {
+        return String(value);
+      }
+    };
+
+    // Maintain stateful stream parsers per message for incremental parsing
+    const streamParsers = new Map<string, AgentWidgetStreamParser>();
+    // Track accumulated raw content for structured formats (JSON, XML, etc.)
+    const rawContentBuffers = new Map<string, string>();
+
     while (true) {
       const { done, value } = await reader.read();
       if (done) break;
@@ -517,48 +541,339 @@ export class AgentWidgetClient {
             toolContext.byCall.delete(callKey);
           }
         } else if (payloadType === "step_chunk") {
+          // Only process chunks for prompt steps, not tool/context steps
+          const stepType = (payload as any).stepType;
+          const executionType = (payload as any).executionType;
+          if (stepType === "tool" || executionType === "context") {
+            // Skip tool-related chunks - they're handled by tool_start/tool_complete
+            continue;
+          }
           const assistant = ensureAssistantMessage();
           const chunk = payload.text ?? payload.delta ?? payload.content ?? "";
           if (chunk) {
-            assistant.content += chunk;
-            emitMessage(assistant);
+            // Accumulate raw content for structured format parsing
+            const rawBuffer = rawContentBuffers.get(assistant.id) ?? "";
+            const accumulatedRaw = rawBuffer + chunk;
+            
+            // Use stream parser to parse
+            if (!streamParsers.has(assistant.id)) {
+              streamParsers.set(assistant.id, this.createStreamParser());
+            }
+            const parser = streamParsers.get(assistant.id)!;
+            
+            // Check if content looks like JSON
+            const looksLikeJson = accumulatedRaw.trim().startsWith('{') || accumulatedRaw.trim().startsWith('[');
+            
+            // Store raw buffer before processing (needed for step_complete handler)
+            if (looksLikeJson) {
+              rawContentBuffers.set(assistant.id, accumulatedRaw);
+            }
+            
+            // Check if this is a plain text parser (marked with __isPlainTextParser)
+            const isPlainTextParser = (parser as any).__isPlainTextParser === true;
+            
+            // If plain text parser, just append the chunk directly
+            if (isPlainTextParser) {
+              assistant.content += chunk;
+              // Clear any raw buffer/parser since we're in plain text mode
+              rawContentBuffers.delete(assistant.id);
+              streamParsers.delete(assistant.id);
+              emitMessage(assistant);
+              continue;
+            }
+            
+            // Try to parse with the parser (for structured parsers)
+            const parsedResult = parser.processChunk(accumulatedRaw);
+            
+            // Handle async parser result
+            if (parsedResult instanceof Promise) {
+              parsedResult.then((result) => {
+                // Extract text from result (could be string or object)
+                const text = typeof result === 'string' ? result : result?.text ?? null;
+                
+                if (text !== null && text.trim() !== "") {
+                  // Parser successfully extracted text
+                  // Update the message content with extracted text
+                  const currentAssistant = assistantMessage;
+                  if (currentAssistant && currentAssistant.id === assistant.id) {
+                    currentAssistant.content = text;
+                    emitMessage(currentAssistant);
+                  }
+                } else if (!looksLikeJson && !accumulatedRaw.trim().startsWith('<')) {
+                  // Not a structured format - show as plain text
+                  const currentAssistant = assistantMessage;
+                  if (currentAssistant && currentAssistant.id === assistant.id) {
+                    currentAssistant.content += chunk;
+                    rawContentBuffers.delete(currentAssistant.id);
+                    streamParsers.delete(currentAssistant.id);
+                    emitMessage(currentAssistant);
+                  }
+                }
+                // Otherwise wait for more chunks (incomplete structured format)
+              }).catch(() => {
+                // On error, treat as plain text
+                assistant.content += chunk;
+                rawContentBuffers.delete(assistant.id);
+                streamParsers.delete(assistant.id);
+                emitMessage(assistant);
+              });
+            } else {
+              // Synchronous parser result
+              // Extract text from result (could be string, null, or object)
+              const text = typeof parsedResult === 'string' ? parsedResult : parsedResult?.text ?? null;
+              
+              if (text !== null && text.trim() !== "") {
+                // Parser successfully extracted text
+                // Buffer is already set above
+                assistant.content = text;
+                emitMessage(assistant);
+              } else if (!looksLikeJson && !accumulatedRaw.trim().startsWith('<')) {
+                // Not a structured format - show as plain text
+                assistant.content += chunk;
+                // Clear any raw buffer/parser if we were in structured format mode
+                rawContentBuffers.delete(assistant.id);
+                streamParsers.delete(assistant.id);
+                emitMessage(assistant);
+              }
+              // Otherwise wait for more chunks (incomplete structured format)
+            }
+            
+            // Also check if we already have extracted text from previous chunks
+            const currentText = parser.getExtractedText();
+            if (currentText != null && currentText !== "" && currentText !== assistant.content) {
+              assistant.content = currentText;
+              emitMessage(assistant);
+            }
           }
           if (payload.isComplete) {
             const finalContent = payload.result?.response ?? assistant.content;
             if (finalContent) {
-              assistant.content = finalContent;
+              // Check if we have raw content buffer that needs final processing
+              const rawBuffer = rawContentBuffers.get(assistant.id);
+              const contentToProcess = rawBuffer ?? ensureStringContent(finalContent);
+              
+              // Try to extract text from final structured content
+              const parser = streamParsers.get(assistant.id);
+              let extractedText: string | null = null;
+              
+              if (parser) {
+                // First check if parser already has extracted text
+                extractedText = parser.getExtractedText();
+                
+                if (extractedText === null) {
+                  // Try extracting with regex
+                  extractedText = extractTextFromJson(contentToProcess);
+                }
+                
+                if (extractedText === null) {
+                  // Try parser.processChunk as last resort
+                  const parsedResult = parser.processChunk(contentToProcess);
+                  if (parsedResult instanceof Promise) {
+                    parsedResult.then((result) => {
+                      // Extract text from result (could be string or object)
+                      const text = typeof result === 'string' ? result : result?.text ?? null;
+                      if (text !== null) {
+                        const currentAssistant = assistantMessage;
+                        if (currentAssistant && currentAssistant.id === assistant.id) {
+                          currentAssistant.content = text;
+                          currentAssistant.streaming = false;
+                          emitMessage(currentAssistant);
+                        }
+                      }
+                    });
+                  } else {
+                    // Extract text from synchronous result
+                    extractedText = typeof parsedResult === 'string' ? parsedResult : parsedResult?.text ?? null;
+                  }
+                }
+              }
+              
+            // Set content: use extracted text if available, otherwise use raw content
+            if (extractedText !== null && extractedText.trim() !== "") {
+              assistant.content = extractedText;
+            } else if (!rawContentBuffers.has(assistant.id)) {
+              // Only use raw final content if we didn't accumulate chunks
+              assistant.content = ensureStringContent(finalContent);
+            }
+              
+              // Clean up parser and buffer
+              const parserToClose = streamParsers.get(assistant.id);
+              if (parserToClose) {
+                const closeResult = parserToClose.close?.();
+                if (closeResult instanceof Promise) {
+                  closeResult.catch(() => {});
+                }
+                streamParsers.delete(assistant.id);
+              }
+              rawContentBuffers.delete(assistant.id);
               assistant.streaming = false;
               emitMessage(assistant);
             }
           }
         } else if (payloadType === "step_complete") {
+          // Only process completions for prompt steps, not tool/context steps
+          const stepType = (payload as any).stepType;
+          const executionType = (payload as any).executionType;
+          if (stepType === "tool" || executionType === "context") {
+            // Skip tool-related completions - they're handled by tool_complete
+            continue;
+          }
           const finalContent = payload.result?.response;
           const assistant = ensureAssistantMessage();
-          if (finalContent) {
-            assistant.content = finalContent;
+          if (finalContent !== undefined && finalContent !== null) {
+            // Check if we already have extracted text from streaming
+            const parser = streamParsers.get(assistant.id);
+            let hasExtractedText = false;
+            
+            if (parser) {
+              // First check if parser already extracted text during streaming
+              const currentExtractedText = parser.getExtractedText();
+              if (currentExtractedText !== null && currentExtractedText.trim() !== "") {
+                // We already have extracted text from streaming - use it
+                assistant.content = currentExtractedText;
+                hasExtractedText = true;
+              } else {
+                // No extracted text yet - try to extract from final content
+                const rawBuffer = rawContentBuffers.get(assistant.id);
+                const contentToProcess = rawBuffer ?? ensureStringContent(finalContent);
+                
+                // Try fast path first
+                const extractedText = extractTextFromJson(contentToProcess);
+                if (extractedText !== null) {
+                  assistant.content = extractedText;
+                  hasExtractedText = true;
+                } else {
+                  // Try parser
+                  const parsedResult = parser.processChunk(contentToProcess);
+                  if (parsedResult instanceof Promise) {
+                    parsedResult.then((result) => {
+                      // Extract text from result (could be string or object)
+                      const text = typeof result === 'string' ? result : result?.text ?? null;
+                      
+                      if (text !== null && text.trim() !== "") {
+                        const currentAssistant = assistantMessage;
+                        if (currentAssistant && currentAssistant.id === assistant.id) {
+                          currentAssistant.content = text;
+                          currentAssistant.streaming = false;
+                          emitMessage(currentAssistant);
+                        }
+                      } else {
+                        // No extracted text - check if we should show raw content
+                        const finalExtractedText = parser.getExtractedText();
+                        if (finalExtractedText === null || finalExtractedText.trim() === "") {
+                          // No extracted text available - show raw content only if no streaming happened
+                          const currentAssistant = assistantMessage;
+                          if (currentAssistant && currentAssistant.id === assistant.id) {
+                            // Only show raw content if we never had any extracted text
+                            if (!rawContentBuffers.has(assistant.id)) {
+                              currentAssistant.content = ensureStringContent(finalContent);
+                            }
+                            currentAssistant.streaming = false;
+                            emitMessage(currentAssistant);
+                          }
+                        }
+                      }
+                    });
+                  } else {
+                    // Extract text from synchronous result
+                    const text = typeof parsedResult === 'string' ? parsedResult : parsedResult?.text ?? null;
+                    
+                    if (text !== null && text.trim() !== "") {
+                      assistant.content = text;
+                      hasExtractedText = true;
+                    } else {
+                      // Check stub one more time
+                      const finalExtractedText = parser.getExtractedText();
+                      if (finalExtractedText !== null && finalExtractedText.trim() !== "") {
+                        assistant.content = finalExtractedText;
+                        hasExtractedText = true;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            
+            // Only show raw content if we never extracted any text and no buffer was used
+            if (!hasExtractedText && !rawContentBuffers.has(assistant.id)) {
+              // No extracted text and no streaming happened - show raw content
+              assistant.content = ensureStringContent(finalContent);
+            }
+            
+            // Clean up parser and buffer
+            if (parser) {
+              const closeResult = parser.close?.();
+              if (closeResult instanceof Promise) {
+                closeResult.catch(() => {});
+              }
+            }
+            streamParsers.delete(assistant.id);
+            rawContentBuffers.delete(assistant.id);
             assistant.streaming = false;
             emitMessage(assistant);
           } else {
-            // No final content, just mark as complete
+            // No final content, just mark as complete and clean up
+            streamParsers.delete(assistant.id);
+            rawContentBuffers.delete(assistant.id);
             assistant.streaming = false;
             emitMessage(assistant);
           }
         } else if (payloadType === "flow_complete") {
           const finalContent = payload.result?.response;
-          if (finalContent) {
+          if (finalContent !== undefined && finalContent !== null) {
             const assistant = ensureAssistantMessage();
-            if (finalContent !== assistant.content) {
-              assistant.content = finalContent;
+            // Check if we have raw content buffer that needs final processing
+            const rawBuffer = rawContentBuffers.get(assistant.id);
+            const stringContent = rawBuffer ?? ensureStringContent(finalContent);
+            // Try to extract text from structured content
+            let displayContent = ensureStringContent(finalContent);
+            const parser = streamParsers.get(assistant.id);
+            if (parser) {
+              const extractedText = extractTextFromJson(stringContent);
+              if (extractedText !== null) {
+                displayContent = extractedText;
+              } else {
+                // Try parser if it exists
+                const parsedResult = parser.processChunk(stringContent);
+                if (parsedResult instanceof Promise) {
+                  parsedResult.then((result) => {
+                    // Extract text from result (could be string or object)
+                    const text = typeof result === 'string' ? result : result?.text ?? null;
+                    if (text !== null) {
+                      const currentAssistant = assistantMessage;
+                      if (currentAssistant && currentAssistant.id === assistant.id) {
+                        currentAssistant.content = text;
+                        currentAssistant.streaming = false;
+                        emitMessage(currentAssistant);
+                      }
+                    }
+                  });
+                }
+                const currentText = parser.getExtractedText();
+                if (currentText !== null) {
+                  displayContent = currentText;
+                }
+              }
+            }
+            // Clean up parser and buffer
+            streamParsers.delete(assistant.id);
+            rawContentBuffers.delete(assistant.id);
+            if (displayContent !== assistant.content) {
+              assistant.content = displayContent;
               emitMessage(assistant);
             }
             assistant.streaming = false;
             emitMessage(assistant);
           } else {
-            const existingAssistant = assistantMessage;
-            if (existingAssistant) {
-              const assistantFinal = existingAssistant as AgentWidgetMessage;
-              assistantFinal.streaming = false;
-              emitMessage(assistantFinal);
+            // No final content, just mark as complete and clean up
+            if (assistantMessage !== null) {
+              // Clean up any remaining parsers/buffers
+              // TypeScript narrowing issue - assistantMessage is checked for null above
+              const msg: AgentWidgetMessage = assistantMessage;
+              streamParsers.delete(msg.id);
+              rawContentBuffers.delete(msg.id);
+              msg.streaming = false;
+              emitMessage(msg);
             }
           }
           onEvent({ type: "status", status: "idle" });

package/src/components/forms.ts

@@ -165,3 +165,5 @@ export const enhanceWithForms = (
 
 
 
+
+