vanilla-agent 1.4.1 → 1.6.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.4.1",
+  "version": "1.6.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",

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,7 @@ export class AgentWidgetClient {
             // Accumulate raw content for structured format parsing
             const rawBuffer = rawContentBuffers.get(assistant.id) ?? "";
             const accumulatedRaw = rawBuffer + chunk;
+            assistant.rawContent = accumulatedRaw;
             
             // Use stream parser to parse
             if (!streamParsers.has(assistant.id)) {
@@ -578,6 +665,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,6 +694,7 @@ export class AgentWidgetClient {
                     currentAssistant.content += chunk;
                     rawContentBuffers.delete(currentAssistant.id);
                     streamParsers.delete(currentAssistant.id);
+                    currentAssistant.rawContent = undefined;
                     emitMessage(currentAssistant);
                   }
                 }
@@ -615,6 +704,7 @@ export class AgentWidgetClient {
                 assistant.content += chunk;
                 rawContentBuffers.delete(assistant.id);
                 streamParsers.delete(assistant.id);
+                assistant.rawContent = undefined;
                 emitMessage(assistant);
               });
             } else {
@@ -633,6 +723,7 @@ 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)
@@ -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);
@@ -736,6 +828,7 @@ export class AgentWidgetClient {
                 // 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);
@@ -825,6 +918,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/launcher.ts

@@ -159,7 +159,7 @@ export const createLauncherButton = (
         : positionMap["bottom-right"];
 
     const base =
-      "tvw-fixed tvw-flex tvw-items-center tvw-gap-3 tvw-rounded-launcher tvw-bg-cw-surface tvw-py-2.5 tvw-pl-3 tvw-pr-3 tvw-shadow-lg tvw-border tvw-border-gray-200 tvw-transition hover:tvw-translate-y-[-2px] tvw-cursor-pointer";
+      "tvw-fixed tvw-flex tvw-items-center tvw-gap-3 tvw-rounded-launcher tvw-bg-cw-surface tvw-py-2.5 tvw-pl-3 tvw-pr-3 tvw-shadow-lg tvw-border tvw-border-gray-200 tvw-transition hover:tvw-translate-y-[-2px] tvw-cursor-pointer tvw-z-50";
 
     button.className = `${base} ${positionClass}`;
   };

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;
 }