vanilla-agent 1.5.0 → 1.7.0

package/dist/widget.css

@@ -797,7 +797,7 @@ form:focus-within textarea {
 }
 
 /* Markdown content overflow handling */
-#vanilla-agent-root pre {
+.vanilla-message-bubble pre {
   overflow-x: auto;
   max-width: 100%;
   word-wrap: break-word;
@@ -812,7 +812,7 @@ form:focus-within textarea {
   border: 1px solid #e5e7eb;
 }
 
-#vanilla-agent-root code {
+.vanilla-message-bubble code {
   word-break: break-word;
   word-wrap: break-word;
   white-space: pre-wrap;
@@ -821,14 +821,14 @@ form:focus-within textarea {
   font-size: 0.875em;
 }
 
-#vanilla-agent-root pre code {
+.vanilla-message-bubble pre code {
   font-size: inherit;
   background-color: transparent;
   padding: 0;
   border-radius: 0;
 }
 
-#vanilla-agent-root img {
+.vanilla-message-bubble img {
   max-width: 100%;
   height: auto;
   display: block;
@@ -836,11 +836,28 @@ form:focus-within textarea {
   border-radius: 0.375rem;
 }
 
+/* Ensure all links in chat bubbles have underlines */
+.vanilla-message-bubble a {
+  text-decoration: underline;
+}
+
+.vanilla-message-bubble a:visited {
+  text-decoration: underline;
+}
+
+.vanilla-message-bubble a:hover {
+  text-decoration: underline;
+}
+
+.vanilla-message-bubble a:active {
+  text-decoration: underline;
+}
+
 /* 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 {
+.vanilla-message-user-bubble a,
+.vanilla-message-user-bubble a:visited,
+.vanilla-message-user-bubble a:hover,
+.vanilla-message-user-bubble a:active {
   color: inherit;
   text-decoration: underline;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.5.0",
+  "version": "1.7.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",
@@ -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

@@ -1,5 +1,19 @@
-import { AgentWidgetConfig, AgentWidgetMessage, AgentWidgetEvent, AgentWidgetStreamParser } from "./types";
-import { extractTextFromJson, createPlainTextParser } from "./utils/formatting";
+import {
+  AgentWidgetConfig,
+  AgentWidgetMessage,
+  AgentWidgetEvent,
+  AgentWidgetStreamParser,
+  AgentWidgetContextProvider,
+  AgentWidgetRequestMiddleware,
+  AgentWidgetRequestPayload
+} from "./types";
+import { 
+  extractTextFromJson, 
+  createPlainTextParser,
+  createJsonStreamParser,
+  createRegexJsonParser,
+  createXmlParser
+} from "./utils/formatting";
 
 type DispatchOptions = {
   messages: AgentWidgetMessage[];
@@ -10,11 +24,30 @@ type SSEHandler = (event: AgentWidgetEvent) => void;
 
 const DEFAULT_ENDPOINT = "https://api.travrse.ai/v1/dispatch";
 
+/**
+ * Maps parserType string to the corresponding parser factory function
+ */
+function getParserFromType(parserType?: "plain" | "json" | "regex-json" | "xml"): () => AgentWidgetStreamParser {
+  switch (parserType) {
+    case "json":
+      return createJsonStreamParser;
+    case "regex-json":
+      return createRegexJsonParser;
+    case "xml":
+      return createXmlParser;
+    case "plain":
+    default:
+      return createPlainTextParser;
+  }
+}
+
 export class AgentWidgetClient {
   private readonly apiUrl: string;
   private readonly headers: Record<string, string>;
   private readonly debug: boolean;
   private readonly createStreamParser: () => AgentWidgetStreamParser;
+  private readonly contextProviders: AgentWidgetContextProvider[];
+  private readonly requestMiddleware?: AgentWidgetRequestMiddleware;
 
   constructor(private config: AgentWidgetConfig = {}) {
     this.apiUrl = config.apiUrl ?? DEFAULT_ENDPOINT;
@@ -23,8 +56,10 @@ 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;
+    // Use custom stream parser if provided, otherwise use parserType, or fall back to plain text parser
+    this.createStreamParser = config.streamParser ?? getParserFromType(config.parserType);
+    this.contextProviders = config.contextProviders ?? [];
+    this.requestMiddleware = config.requestMiddleware;
   }
 
   public async dispatch(options: DispatchOptions, onEvent: SSEHandler) {
@@ -35,23 +70,7 @@ export class AgentWidgetClient {
 
     onEvent({ type: "status", status: "connecting" });
 
-    // Build simplified payload with just messages and optional flowId
-    // Sort by createdAt to ensure chronological order (not local sequence)
-    const body = {
-      messages: options.messages
-        .slice()
-        .sort((a, b) => {
-          const timeA = new Date(a.createdAt).getTime();
-          const timeB = new Date(b.createdAt).getTime();
-          return timeA - timeB;
-        })
-        .map((message) => ({
-          role: message.role,
-          content: message.content,
-          createdAt: message.createdAt
-        })),
-      ...(this.config.flowId && { flowId: this.config.flowId })
-    };
+    const body = await this.buildPayload(options.messages);
 
     if (this.debug) {
       // eslint-disable-next-line no-console
@@ -81,6 +100,73 @@ export class AgentWidgetClient {
     }
   }
 
+  private async buildPayload(
+    messages: AgentWidgetMessage[]
+  ): Promise<AgentWidgetRequestPayload> {
+    const normalizedMessages = messages
+      .slice()
+      .sort((a, b) => {
+        const timeA = new Date(a.createdAt).getTime();
+        const timeB = new Date(b.createdAt).getTime();
+        return timeA - timeB;
+      })
+      .map((message) => ({
+        role: message.role,
+        content: message.content,
+        createdAt: message.createdAt
+      }));
+
+    const payload: AgentWidgetRequestPayload = {
+      messages: normalizedMessages,
+      ...(this.config.flowId && { flowId: this.config.flowId })
+    };
+
+    if (this.contextProviders.length) {
+      const contextAggregate: Record<string, unknown> = {};
+      await Promise.all(
+        this.contextProviders.map(async (provider) => {
+          try {
+            const result = await provider({
+              messages,
+              config: this.config
+            });
+            if (result && typeof result === "object") {
+              Object.assign(contextAggregate, result);
+            }
+          } catch (error) {
+            if (typeof console !== "undefined") {
+              // eslint-disable-next-line no-console
+              console.warn("[AgentWidget] Context provider failed:", error);
+            }
+          }
+        })
+      );
+
+      if (Object.keys(contextAggregate).length) {
+        payload.context = contextAggregate;
+      }
+    }
+
+    if (this.requestMiddleware) {
+      try {
+        const result = await this.requestMiddleware({
+          payload: { ...payload },
+          config: this.config
+        });
+        if (result && typeof result === "object") {
+          return result as AgentWidgetRequestPayload;
+        }
+      } catch (error) {
+        if (typeof console !== "undefined") {
+          // eslint-disable-next-line no-console
+          console.error("[AgentWidget] Request middleware error:", error);
+        }
+      }
+    }
+
+    return payload;
+  }
+
   private async streamResponse(
     body: ReadableStream<Uint8Array>,
     onEvent: SSEHandler
@@ -554,6 +640,8 @@ 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
             if (!streamParsers.has(assistant.id)) {
@@ -578,6 +666,7 @@ export class AgentWidgetClient {
               // Clear any raw buffer/parser since we're in plain text mode
               rawContentBuffers.delete(assistant.id);
               streamParsers.delete(assistant.id);
+              assistant.rawContent = undefined;
               emitMessage(assistant);
               continue;
             }
@@ -606,15 +695,18 @@ export class AgentWidgetClient {
                     currentAssistant.content += chunk;
                     rawContentBuffers.delete(currentAssistant.id);
                     streamParsers.delete(currentAssistant.id);
+                    currentAssistant.rawContent = undefined;
                     emitMessage(currentAssistant);
                   }
                 }
                 // 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;
                 rawContentBuffers.delete(assistant.id);
                 streamParsers.delete(assistant.id);
+                assistant.rawContent = undefined;
                 emitMessage(assistant);
               });
             } else {
@@ -633,17 +725,16 @@ export class AgentWidgetClient {
                 // Clear any raw buffer/parser if we were in structured format mode
                 rawContentBuffers.delete(assistant.id);
                 streamParsers.delete(assistant.id);
+                assistant.rawContent = undefined;
                 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;
@@ -651,6 +742,7 @@ export class AgentWidgetClient {
               // Check if we have raw content buffer that needs final processing
               const rawBuffer = rawContentBuffers.get(assistant.id);
               const contentToProcess = rawBuffer ?? ensureStringContent(finalContent);
+              assistant.rawContent = contentToProcess;
               
               // Try to extract text from final structured content
               const parser = streamParsers.get(assistant.id);
@@ -728,14 +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);
                 
                 // Try fast path first
                 const extractedText = extractTextFromJson(contentToProcess);
@@ -794,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
@@ -825,6 +927,7 @@ export class AgentWidgetClient {
             // Check if we have raw content buffer that needs final processing
             const rawBuffer = rawContentBuffers.get(assistant.id);
             const stringContent = rawBuffer ?? ensureStringContent(finalContent);
+            assistant.rawContent = stringContent;
             // Try to extract text from structured content
             let displayContent = ensureStringContent(finalContent);
             const parser = streamParsers.get(assistant.id);

package/src/components/message-bubble.ts

@@ -5,6 +5,7 @@ export type MessageTransform = (context: {
   text: string;
   message: AgentWidgetMessage;
   streaming: boolean;
+  raw?: string;
 }) => string;
 
 // Create typing indicator element
@@ -41,6 +42,7 @@ export const createStandardBubble = (
   transform: MessageTransform
 ): HTMLElement => {
   const classes = [
+    "vanilla-message-bubble",
     "tvw-max-w-[85%]",
     "tvw-rounded-2xl",
     "tvw-text-sm",
@@ -50,6 +52,7 @@ export const createStandardBubble = (
 
   if (message.role === "user") {
     classes.push(
+      "vanilla-message-user-bubble",
       "tvw-ml-auto",
       "tvw-bg-cw-accent",
       "tvw-text-white",
@@ -58,6 +61,7 @@ export const createStandardBubble = (
     );
   } else {
     classes.push(
+      "vanilla-message-assistant-bubble",
       "tvw-bg-cw-surface",
       "tvw-border",
       "tvw-border-cw-message-border",
@@ -74,7 +78,8 @@ export const createStandardBubble = (
   contentDiv.innerHTML = transform({
     text: message.content,
     message,
-    streaming: Boolean(message.streaming)
+    streaming: Boolean(message.streaming),
+    raw: message.rawContent
   });
   bubble.appendChild(contentDiv);
 

package/src/components/reasoning-bubble.ts

@@ -11,6 +11,8 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
   const bubble = createElement(
     "div",
     [
+      "vanilla-message-bubble",
+      "vanilla-reasoning-bubble",
       "tvw-w-full",
       "tvw-max-w-[85%]",
       "tvw-rounded-2xl",

package/src/components/tool-bubble.ts

@@ -13,6 +13,8 @@ export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidg
   const bubble = createElement(
     "div",
     [
+      "vanilla-message-bubble",
+      "vanilla-tool-bubble",
       "tvw-w-full",
       "tvw-max-w-[85%]",
       "tvw-rounded-2xl",

package/src/index.ts

@@ -25,6 +25,12 @@ export {
   type AgentWidgetSessionStatus
 } from "./session";
 export { AgentWidgetClient } from "./client";
+export { createLocalStorageAdapter } from "./utils/storage";
+export {
+  createActionManager,
+  defaultActionHandlers,
+  defaultJsonActionParser
+} from "./utils/actions";
 export {
   markdownPostprocessor,
   escapeHtml,

package/src/runtime/init.ts

@@ -113,46 +113,18 @@ export const initAgentWidget = (
     mountStyles(host);
   }
 
-  let controller = createAgentExperience(mount, options.config);
+  let controller = createAgentExperience(mount, options.config, {
+    debugTools: options.debugTools
+  });
   options.onReady?.();
 
   const handle: AgentWidgetInitHandle = {
+    ...controller,
     host,
-    update(nextConfig: AgentWidgetConfig) {
-      controller.update(nextConfig);
-    },
-    open() {
-      controller.open();
-    },
-    close() {
-      controller.close();
-    },
-    toggle() {
-      controller.toggle();
-    },
-    clearChat() {
-      controller.clearChat();
-    },
-    setMessage(message: string) {
-      return controller.setMessage(message);
-    },
-    submitMessage(message?: string) {
-      return controller.submitMessage(message);
-    },
-    startVoiceRecognition() {
-      return controller.startVoiceRecognition();
-    },
-    stopVoiceRecognition() {
-      return controller.stopVoiceRecognition();
-    },
-    injectTestMessage(event: AgentWidgetEvent) {
-      controller.injectTestMessage(event);
-    },
     destroy() {
       controller.destroy();
       host.remove();
-      // Clean up window reference if it was set
-      if (options.windowKey && typeof window !== 'undefined') {
+      if (options.windowKey && typeof window !== "undefined") {
         delete (window as any)[options.windowKey];
       }
     }

package/src/session.ts

@@ -133,6 +133,21 @@ export class AgentWidgetSession {
     this.callbacks.onMessagesChanged([...this.messages]);
   }
 
+  public hydrateMessages(messages: AgentWidgetMessage[]) {
+    this.abortController?.abort();
+    this.abortController = null;
+    this.messages = this.sortMessages(
+      messages.map((message) => ({
+        ...message,
+        streaming: false,
+        sequence: message.sequence ?? this.nextSequence()
+      }))
+    );
+    this.setStreaming(false);
+    this.setStatus("idle");
+    this.callbacks.onMessagesChanged([...this.messages]);
+  }
+
   private handleEvent = (event: AgentWidgetEvent) => {
     if (event.type === "message") {
       this.upsertMessage(event.message);

package/src/styles/widget.css

@@ -797,7 +797,7 @@ form:focus-within textarea {
 }
 
 /* Markdown content overflow handling */
-#vanilla-agent-root pre {
+.vanilla-message-bubble pre {
   overflow-x: auto;
   max-width: 100%;
   word-wrap: break-word;
@@ -812,7 +812,7 @@ form:focus-within textarea {
   border: 1px solid #e5e7eb;
 }
 
-#vanilla-agent-root code {
+.vanilla-message-bubble code {
   word-break: break-word;
   word-wrap: break-word;
   white-space: pre-wrap;
@@ -821,14 +821,14 @@ form:focus-within textarea {
   font-size: 0.875em;
 }
 
-#vanilla-agent-root pre code {
+.vanilla-message-bubble pre code {
   font-size: inherit;
   background-color: transparent;
   padding: 0;
   border-radius: 0;
 }
 
-#vanilla-agent-root img {
+.vanilla-message-bubble img {
   max-width: 100%;
   height: auto;
   display: block;
@@ -836,11 +836,28 @@ form:focus-within textarea {
   border-radius: 0.375rem;
 }
 
+/* Ensure all links in chat bubbles have underlines */
+.vanilla-message-bubble a {
+  text-decoration: underline;
+}
+
+.vanilla-message-bubble a:visited {
+  text-decoration: underline;
+}
+
+.vanilla-message-bubble a:hover {
+  text-decoration: underline;
+}
+
+.vanilla-message-bubble a:active {
+  text-decoration: underline;
+}
+
 /* 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 {
+.vanilla-message-user-bubble a,
+.vanilla-message-user-bubble a:visited,
+.vanilla-message-user-bubble a:hover,
+.vanilla-message-user-bubble a:active {
   color: inherit;
   text-decoration: underline;
 }