vanilla-agent 1.6.0 → 1.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "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",
@@ -30,13 +30,15 @@
   },
   "devDependencies": {
     "@types/node": "^20.12.7",
+    "@vitest/ui": "^4.0.9",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "postcss": "^8.4.38",
     "rimraf": "^5.0.5",
     "tailwindcss": "^3.4.10",
     "tsup": "^8.0.1",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vitest": "^4.0.9"
   },
   "engines": {
     "node": ">=18.17.0"
@@ -58,6 +60,9 @@
     "build:client": "tsup src/index.ts --format esm,cjs,iife --global-name AgentWidget --minify --sourcemap --splitting false --dts --loader \".css=text\"",
     "build:installer": "tsup src/install.ts --format iife --global-name SiteAgentInstaller --out-dir dist --minify --sourcemap --no-splitting",
     "lint": "eslint . --ext .ts",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   }
 }

package/src/client.test.ts

@@ -22,7 +22,7 @@ describe('AgentWidgetClient - JSON Streaming', () => {
       '',
       '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":"{\\n"}',
       '',
       'data: {"type":"step_chunk","id":"step_01k9x5db72fzwvmdenryn0qm48","name":"Prompt 1","executionType":"prompt","index":2,"text":" "}',
       '',

package/src/client.ts

@@ -640,6 +640,7 @@ export class AgentWidgetClient {
             // Accumulate raw content for structured format parsing
             const rawBuffer = rawContentBuffers.get(assistant.id) ?? "";
             const accumulatedRaw = rawBuffer + chunk;
+            // Store raw content for action parsing, but NEVER set assistant.content to raw JSON
             assistant.rawContent = accumulatedRaw;
             
             // Use stream parser to parse
@@ -699,6 +700,7 @@ export class AgentWidgetClient {
                   }
                 }
                 // Otherwise wait for more chunks (incomplete structured format)
+                // Don't emit message if parser hasn't extracted text yet
               }).catch(() => {
                 // On error, treat as plain text
                 assistant.content += chunk;
@@ -727,14 +729,12 @@ export class AgentWidgetClient {
                 emitMessage(assistant);
               }
               // Otherwise wait for more chunks (incomplete structured format)
+              // Don't emit message if parser hasn't extracted text yet
             }
             
-            // 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);
-            }
+            // IMPORTANT: Don't call getExtractedText() and emit messages here
+            // This was causing raw JSON to be displayed because getExtractedText() 
+            // wasn't extracting the "text" field correctly during streaming
           }
           if (payload.isComplete) {
             const finalContent = payload.result?.response ?? assistant.content;
@@ -820,15 +820,18 @@ export class AgentWidgetClient {
             if (parser) {
               // First check if parser already extracted text during streaming
               const currentExtractedText = parser.getExtractedText();
+              const rawBuffer = rawContentBuffers.get(assistant.id);
+              const contentToProcess = rawBuffer ?? ensureStringContent(finalContent);
+              
+              // Always set rawContent so action parsers can access the raw JSON
+              assistant.rawContent = contentToProcess;
+              
               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);
-                assistant.rawContent = contentToProcess;
                 
                 // Try fast path first
                 const extractedText = extractTextFromJson(contentToProcess);
@@ -887,6 +890,12 @@ export class AgentWidgetClient {
               }
             }
             
+            // Ensure rawContent is set even if there's no parser (for action parsing)
+            if (!assistant.rawContent) {
+              const rawBuffer = rawContentBuffers.get(assistant.id);
+              assistant.rawContent = rawBuffer ?? ensureStringContent(finalContent);
+            }
+            
             // 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

package/src/index.ts

@@ -39,6 +39,7 @@ export {
 export { 
   createPlainTextParser,
   createJsonStreamParser,
+  createFlexibleJsonStreamParser,
   createRegexJsonParser,
   createXmlParser
 } from "./utils/formatting";

package/src/utils/formatting.test.ts

@@ -45,8 +45,10 @@ describe("JSON Stream Parser", () => {
       accumulatedContent += chunk;
       const result = parser.processChunk(accumulatedContent);
       
-      if (result !== null) {
-        extractedTexts.push(result);
+      // Extract text from result (can be string or object with text property)
+      const text = typeof result === 'string' ? result : result?.text ?? null;
+      if (text !== null) {
+        extractedTexts.push(text);
       }
       
       // Also check getExtractedText
@@ -101,7 +103,9 @@ describe("JSON Stream Parser", () => {
     const parser = createJsonStreamParser();
     const result = parser.processChunk(completeJson);
     
-    expect(result).toBe("Hello world!");
+    // Extract text from result (can be string or object with text property)
+    const text = typeof result === 'string' ? result : result?.text ?? null;
+    expect(text).toBe("Hello world!");
     expect(parser.getExtractedText()).toBe("Hello world!");
   });
 
@@ -146,7 +150,9 @@ describe("JSON Stream Parser", () => {
     for (const chunk of textChunks) {
       accumulated += chunk;
       const result = parser.processChunk(accumulated);
-      allExtractedTexts.push(result);
+      // Extract text from result (can be string or object with text property)
+      const text = typeof result === 'string' ? result : result?.text ?? null;
+      allExtractedTexts.push(text);
     }
 
     // Should have many non-null results (incremental updates)

package/src/utils/formatting.ts

@@ -301,6 +301,91 @@ export const createJsonStreamParser = (): AgentWidgetStreamParser => {
   };
 };
 
+/**
+ * Flexible JSON stream parser that can extract text from various field names.
+ * This parser looks for display text in multiple possible fields, making it
+ * compatible with different JSON response formats.
+ * 
+ * @param textExtractor Optional function to extract display text from parsed JSON.
+ *                      If not provided, looks for common text fields.
+ */
+export const createFlexibleJsonStreamParser = (
+  textExtractor?: (parsed: any) => string | null
+): AgentWidgetStreamParser => {
+  let extractedText: string | null = null;
+  let processedLength = 0;
+  
+  // Default text extractor that handles common patterns
+  const defaultExtractor = (parsed: any): string | null => {
+    if (!parsed || typeof parsed !== "object") return null;
+    
+    // Check for action-based text fields
+    if (parsed.action) {
+      switch (parsed.action) {
+        case 'nav_then_click':
+          return parsed.on_load_text || parsed.text || null;
+        case 'message':
+        case 'message_and_click':
+        case 'checkout':
+          return parsed.text || null;
+        default:
+          return parsed.text || parsed.display_text || parsed.message || null;
+      }
+    }
+    
+    // Fallback to common text field names
+    return parsed.text || parsed.display_text || parsed.message || parsed.content || null;
+  };
+  
+  const extractText = textExtractor || defaultExtractor;
+  
+  return {
+    getExtractedText: () => extractedText,
+    processChunk: (accumulatedContent: string): AgentWidgetStreamParserResult | string | null => {
+      // Validate that the accumulated content looks like JSON
+      const trimmed = accumulatedContent.trim();
+      if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
+        return null;
+      }
+      
+      // Skip if no new content
+      if (accumulatedContent.length <= processedLength) {
+        return extractedText !== null
+          ? { text: extractedText, raw: accumulatedContent }
+          : null;
+      }
+      
+      try {
+        // Parse partial JSON - allow partial strings and objects
+        // STR | OBJ allows incomplete strings and objects during streaming
+        const parsed = parsePartialJson(accumulatedContent, STR | OBJ);
+        
+        // Extract text using the provided or default extractor
+        const newText = extractText(parsed);
+        if (newText !== null) {
+          extractedText = newText;
+        }
+      } catch (error) {
+        // If parsing fails completely, keep the last extracted text
+        // This can happen with very malformed JSON
+      }
+      
+      // Update processed length
+      processedLength = accumulatedContent.length;
+      
+      // Always return the raw JSON for action parsing
+      // Text may be null during early streaming, that's ok
+      return {
+        text: extractedText || "",
+        raw: accumulatedContent
+      };
+    },
+    close: () => {
+      // No cleanup needed
+    }
+  };
+};
+
 /**
  * XML stream parser.
  * Extracts text from <text>...</text> tags in XML responses.