vanilla-agent 1.3.0 → 1.4.1

package/src/ui.ts

@@ -1,6 +1,6 @@
 import { escapeHtml } from "./postprocessors";
 import { AgentWidgetSession, AgentWidgetSessionStatus } from "./session";
-import { AgentWidgetConfig, AgentWidgetMessage } from "./types";
+import { AgentWidgetConfig, AgentWidgetMessage, AgentWidgetEvent } from "./types";
 import { applyThemeVariables } from "./utils/theme";
 import { renderLucideIcon } from "./utils/icons";
 import { createElement } from "./utils/dom";
@@ -16,6 +16,9 @@ import { enhanceWithForms } from "./components/forms";
 import { pluginRegistry } from "./plugins/registry";
 import { mergeWithDefaults } from "./defaults";
 
+// Default localStorage key for chat history (automatically cleared on clear chat)
+const DEFAULT_CHAT_HISTORY_STORAGE_KEY = "vanilla-agent-chat-history";
+
 type Controller = {
   update: (config: AgentWidgetConfig) => void;
   destroy: () => void;
@@ -27,6 +30,7 @@ type Controller = {
   submitMessage: (message?: string) => boolean;
   startVoiceRecognition: () => boolean;
   stopVoiceRecognition: () => boolean;
+  injectTestMessage: (event: AgentWidgetEvent) => void;
 };
 
 const buildPostprocessor = (cfg?: AgentWidgetConfig): MessageTransform => {
@@ -152,6 +156,74 @@ export const createAgentExperience = (
     });
   };
 
+  // Track ongoing smooth scroll animation
+  let smoothScrollRAF: number | null = null;
+
+  // Get the scrollable container using its unique ID
+  const getScrollableContainer = (): HTMLElement => {
+    // Use the unique ID for reliable selection
+    const scrollable = wrapper.querySelector('#vanilla-agent-scroll-container') as HTMLElement;
+    // Fallback to body if ID not found (shouldn't happen, but safe fallback)
+    return scrollable || body;
+  };
+
+  // Custom smooth scroll animation with easing
+  const smoothScrollToBottom = (element: HTMLElement, duration = 500) => {
+    const start = element.scrollTop;
+    const clientHeight = element.clientHeight;
+    // Recalculate target dynamically to handle layout changes
+    let target = element.scrollHeight;
+    let distance = target - start;
+
+    // Check if already at bottom: scrollTop + clientHeight should be >= scrollHeight
+    // Add a small threshold (2px) to account for rounding/subpixel differences
+    const isAtBottom = start + clientHeight >= target - 2;
+    
+    // If already at bottom or very close, skip animation to prevent glitch
+    if (isAtBottom || Math.abs(distance) < 5) {
+      return;
+    }
+
+    // Cancel any ongoing smooth scroll animation
+    if (smoothScrollRAF !== null) {
+      cancelAnimationFrame(smoothScrollRAF);
+      smoothScrollRAF = null;
+    }
+
+    const startTime = performance.now();
+
+    // Easing function: ease-out cubic for smooth deceleration
+    const easeOutCubic = (t: number): number => {
+      return 1 - Math.pow(1 - t, 3);
+    };
+
+    const animate = (currentTime: number) => {
+      // Recalculate target each frame in case scrollHeight changed
+      const currentTarget = element.scrollHeight;
+      if (currentTarget !== target) {
+        target = currentTarget;
+        distance = target - start;
+      }
+
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = easeOutCubic(progress);
+      
+      const currentScroll = start + distance * eased;
+      element.scrollTop = currentScroll;
+
+      if (progress < 1) {
+        smoothScrollRAF = requestAnimationFrame(animate);
+      } else {
+        // Ensure we end exactly at the target
+        element.scrollTop = element.scrollHeight;
+        smoothScrollRAF = null;
+      }
+    };
+
+    smoothScrollRAF = requestAnimationFrame(animate);
+  };
+
 
   // Message rendering with plugin support
   const renderMessagesWithPlugins = (
@@ -191,7 +263,7 @@ export const createAgentExperience = (
           if (!showToolCalls) return;
           bubble = matchingPlugin.renderToolCall({
             message,
-            defaultRenderer: () => createToolBubble(message),
+            defaultRenderer: () => createToolBubble(message, config),
             config
           });
         } else if (matchingPlugin.renderMessage) {
@@ -216,7 +288,7 @@ export const createAgentExperience = (
           bubble = createReasoningBubble(message);
         } else if (message.variant === "tool" && message.toolCall) {
           if (!showToolCalls) return;
-          bubble = createToolBubble(message);
+          bubble = createToolBubble(message, config);
         } else {
           bubble = createStandardBubble(message, transform);
           if (message.role !== "user") {
@@ -236,8 +308,9 @@ export const createAgentExperience = (
 
     // Add standalone typing indicator only if streaming but no assistant message is streaming yet
     // (This shows while waiting for the stream to start)
+    // Check for ANY streaming assistant message, even if empty (to avoid duplicate bubbles)
     const hasStreamingAssistantMessage = messages.some(
-      (msg) => msg.role === "assistant" && msg.streaming && msg.content && msg.content.trim()
+      (msg) => msg.role === "assistant" && msg.streaming
     );
 
     if (isStreaming && messages.some((msg) => msg.role === "user") && !hasStreamingAssistantMessage) {
@@ -268,7 +341,16 @@ export const createAgentExperience = (
     }
 
     container.appendChild(fragment);
-    container.scrollTop = container.scrollHeight;
+    // Defer scroll to next frame for smoother animation and to prevent jolt
+    // This allows the browser to update layout (e.g., typing indicator removal) before scrolling
+    // Use double RAF to ensure layout has fully settled before starting scroll animation
+    // Get the scrollable container using its unique ID (#vanilla-agent-scroll-container)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const scrollableContainer = getScrollableContainer();
+        smoothScrollToBottom(scrollableContainer);
+      });
+    });
   };
 
   const updateOpenState = () => {
@@ -793,6 +875,28 @@ export const createAgentExperience = (
       // Clear messages in session (this will trigger onMessagesChanged which re-renders)
       session.clearMessages();
 
+      // Always clear the default localStorage key
+      try {
+        localStorage.removeItem(DEFAULT_CHAT_HISTORY_STORAGE_KEY);
+        if (config.debug) {
+          console.log(`[AgentWidget] Cleared default localStorage key: ${DEFAULT_CHAT_HISTORY_STORAGE_KEY}`);
+        }
+      } catch (error) {
+        console.error("[AgentWidget] Failed to clear default localStorage:", error);
+      }
+
+      // Also clear custom localStorage key if configured
+      if (config.clearChatHistoryStorageKey && config.clearChatHistoryStorageKey !== DEFAULT_CHAT_HISTORY_STORAGE_KEY) {
+        try {
+          localStorage.removeItem(config.clearChatHistoryStorageKey);
+          if (config.debug) {
+            console.log(`[AgentWidget] Cleared custom localStorage key: ${config.clearChatHistoryStorageKey}`);
+          }
+        } catch (error) {
+          console.error("[AgentWidget] Failed to clear custom localStorage:", error);
+        }
+      }
+
       // Dispatch custom event for external handlers (e.g., localStorage clearing in examples)
       const clearEvent = new CustomEvent("vanilla-agent:clear-chat", {
         detail: { timestamp: new Date().toISOString() }
@@ -823,6 +927,7 @@ export const createAgentExperience = (
 
   return {
     update(nextConfig: AgentWidgetConfig) {
+      const previousToolCallConfig = config.toolCall;
       config = { ...config, ...nextConfig };
       applyThemeVariables(mount, config);
 
@@ -876,6 +981,12 @@ export const createAgentExperience = (
       recalcPanelHeight();
       refreshCloseButton();
 
+      // Re-render messages if toolCall config changed (to apply new styles)
+      const toolCallConfigChanged = JSON.stringify(nextConfig.toolCall) !== JSON.stringify(previousToolCallConfig);
+      if (toolCallConfigChanged && session) {
+        renderMessagesWithPlugins(messagesWrapper, session.getMessages(), postprocess);
+      }
+
       // Update panel icon sizes
       const launcher = config.launcher ?? {};
       const headerIconHidden = launcher.headerIconHidden ?? false;
@@ -1594,6 +1705,28 @@ export const createAgentExperience = (
       // Clear messages in session (this will trigger onMessagesChanged which re-renders)
       session.clearMessages();
 
+      // Always clear the default localStorage key
+      try {
+        localStorage.removeItem(DEFAULT_CHAT_HISTORY_STORAGE_KEY);
+        if (config.debug) {
+          console.log(`[AgentWidget] Cleared default localStorage key: ${DEFAULT_CHAT_HISTORY_STORAGE_KEY}`);
+        }
+      } catch (error) {
+        console.error("[AgentWidget] Failed to clear default localStorage:", error);
+      }
+
+      // Also clear custom localStorage key if configured
+      if (config.clearChatHistoryStorageKey && config.clearChatHistoryStorageKey !== DEFAULT_CHAT_HISTORY_STORAGE_KEY) {
+        try {
+          localStorage.removeItem(config.clearChatHistoryStorageKey);
+          if (config.debug) {
+            console.log(`[AgentWidget] Cleared custom localStorage key: ${config.clearChatHistoryStorageKey}`);
+          }
+        } catch (error) {
+          console.error("[AgentWidget] Failed to clear custom localStorage:", error);
+        }
+      }
+
       // Dispatch custom event for external handlers (e.g., localStorage clearing in examples)
       const clearEvent = new CustomEvent("vanilla-agent:clear-chat", {
         detail: { timestamp: new Date().toISOString() }
@@ -1649,6 +1782,13 @@ export const createAgentExperience = (
       stopVoiceRecognition();
       return true;
     },
+    injectTestMessage(event: AgentWidgetEvent) {
+      // Auto-open widget if closed and launcher is enabled
+      if (!open && launcherEnabled) {
+        setOpenState(true);
+      }
+      session.injectTestEvent(event);
+    },
     destroy() {
       destroyCallbacks.forEach((cb) => cb());
       wrapper.remove();

package/src/utils/constants.ts

@@ -11,3 +11,5 @@ export const statusCopy: Record<AgentWidgetSessionStatus, string> = {
 
 
 
+
+

package/src/utils/dom.ts

@@ -20,3 +20,5 @@ export const createFragment = (): DocumentFragment => {
 
 
 
+
+

package/src/utils/formatting.test.ts

@@ -0,0 +1,160 @@
+import { describe, it, expect } from "vitest";
+import { createJsonStreamParser } from "./formatting";
+
+describe("JSON Stream Parser", () => {
+  it("should extract text field incrementally as JSON streams in", () => {
+    // Simulate the actual stream chunks from the user's example
+    const chunks = [
+      '{\n',
+      ' ',
+      ' "',
+      'action',
+      '":',
+      ' "',
+      'message',
+      '",\n',
+      ' ',
+      ' "',
+      'text',
+      '":',
+      ' "',
+      'You\'re',
+      ' welcome',
+      '!',
+      ' Enjoy',
+      ' your',
+      ' browsing',
+      ',',
+      ' and',
+      ' I\'m',
+      ' here',
+      ' if',
+      ' you',
+      ' need',
+      ' anything',
+      '!"\n',
+      '}'
+    ];
+
+    const parser = createJsonStreamParser();
+    let accumulatedContent = "";
+    const extractedTexts: string[] = [];
+
+    // Process each chunk incrementally
+    for (const chunk of chunks) {
+      accumulatedContent += chunk;
+      const result = parser.processChunk(accumulatedContent);
+      
+      if (result !== null) {
+        extractedTexts.push(result);
+      }
+      
+      // Also check getExtractedText
+      const currentText = parser.getExtractedText();
+      if (currentText !== null && !extractedTexts.includes(currentText)) {
+        extractedTexts.push(currentText);
+      }
+    }
+
+    // Verify that we extracted text progressively
+    expect(extractedTexts.length).toBeGreaterThan(5); // Should have many incremental updates
+    
+    // The final extracted text should be the complete text value
+    const finalText = parser.getExtractedText();
+    expect(finalText).toBe("You're welcome! Enjoy your browsing, and I'm here if you need anything!");
+    
+    // Verify intermediate extractions show progressive text
+    // The text should start appearing once the "text" field value starts streaming
+    const hasPartialText = extractedTexts.some(text => 
+      text.includes("You're") || text.includes("welcome")
+    );
+    expect(hasPartialText).toBe(true);
+  });
+
+  it("should handle incomplete JSON gracefully", () => {
+    const chunks = [
+      '{\n',
+      ' "action": "message",\n',
+      ' "text": "',
+      'Hello',
+      ' ',
+      'world'
+      // Note: No closing quote or brace
+    ];
+
+    const parser = createJsonStreamParser();
+    let accumulated = "";
+
+    for (const chunk of chunks) {
+      accumulated += chunk;
+      parser.processChunk(accumulated);
+    }
+
+    // Should still extract partial text
+    const result = parser.getExtractedText();
+    expect(result).toBe("Hello world");
+  });
+
+  it("should handle complete JSON in one chunk", () => {
+    const completeJson = '{"action": "message", "text": "Hello world!"}';
+    
+    const parser = createJsonStreamParser();
+    const result = parser.processChunk(completeJson);
+    
+    expect(result).toBe("Hello world!");
+    expect(parser.getExtractedText()).toBe("Hello world!");
+  });
+
+  it("should handle the exact stream format from user example", () => {
+    // Extract just the text chunks from the SSE stream
+    const textChunks = [
+      '{\n',
+      ' ',
+      ' "',
+      'action',
+      '":',
+      ' "',
+      'message',
+      '",\n',
+      ' ',
+      ' "',
+      'text',
+      '":',
+      ' "',
+      'You\'re',
+      ' welcome',
+      '!',
+      ' Enjoy',
+      ' your',
+      ' browsing',
+      ',',
+      ' and',
+      ' I\'m',
+      ' here',
+      ' if',
+      ' you',
+      ' need',
+      ' anything',
+      '!"\n',
+      '}'
+    ];
+
+    const parser = createJsonStreamParser();
+    let accumulated = "";
+    const allExtractedTexts: (string | null)[] = [];
+
+    for (const chunk of textChunks) {
+      accumulated += chunk;
+      const result = parser.processChunk(accumulated);
+      allExtractedTexts.push(result);
+    }
+
+    // Should have many non-null results (incremental updates)
+    const nonNullResults = allExtractedTexts.filter(r => r !== null);
+    expect(nonNullResults.length).toBeGreaterThan(10);
+
+    // Final result should be the complete text
+    const finalResult = parser.getExtractedText();
+    expect(finalResult).toBe("You're welcome! Enjoy your browsing, and I'm here if you need anything!");
+  });
+});

package/src/utils/formatting.ts

@@ -1,4 +1,5 @@
-import { AgentWidgetReasoning, AgentWidgetToolCall } from "../types";
+import { AgentWidgetReasoning, AgentWidgetToolCall, AgentWidgetStreamParser, AgentWidgetStreamParserResult } from "../types";
+import { parse as parsePartialJson, STR, OBJ } from "partial-json";
 
 export const formatUnknownValue = (value: unknown): string => {
   if (value === null) return "null";
@@ -73,6 +74,256 @@ export const describeToolTitle = (tool: AgentWidgetToolCall) => {
   return "Using tool...";
 };
 
+/**
+ * Creates a regex-based parser for extracting text from JSON streams.
+ * This is a simpler alternative to schema-stream that uses regex to extract
+ * the 'text' field incrementally as JSON streams in.
+ * 
+ * This can be used as an alternative parser option.
+ */
+const createRegexJsonParserInternal = (): {
+  processChunk(accumulatedContent: string): Promise<AgentWidgetStreamParserResult | string | null>;
+  getExtractedText(): string | null;
+  close?(): Promise<void>;
+} => {
+  let extractedText: string | null = null;
+  let processedLength = 0;
+  
+  // Regex-based extraction for incremental JSON parsing
+  const extractTextFromIncompleteJson = (jsonString: string): string | null => {
+    // Look for "text": "value" pattern, handling incomplete strings
+    // Match: "text": " followed by any characters (including incomplete)
+    const textFieldRegex = /"text"\s*:\s*"((?:[^"\\]|\\.|")*?)"/;
+    const match = jsonString.match(textFieldRegex);
+    
+    if (match && match[1]) {
+      // Unescape the string value
+      try {
+        // Replace escaped characters
+        let unescaped = match[1]
+          .replace(/\\n/g, '\n')
+          .replace(/\\r/g, '\r')
+          .replace(/\\t/g, '\t')
+          .replace(/\\"/g, '"')
+          .replace(/\\\\/g, '\\');
+        return unescaped;
+      } catch {
+        return match[1];
+      }
+    }
+    
+    // Also try to match incomplete text field (text field that hasn't closed yet)
+    // Look for "text": " followed by content that may not be closed
+    const incompleteTextFieldRegex = /"text"\s*:\s*"((?:[^"\\]|\\.)*)/;
+    const incompleteMatch = jsonString.match(incompleteTextFieldRegex);
+    
+    if (incompleteMatch && incompleteMatch[1]) {
+      // Unescape the partial string value
+      try {
+        let unescaped = incompleteMatch[1]
+          .replace(/\\n/g, '\n')
+          .replace(/\\r/g, '\r')
+          .replace(/\\t/g, '\t')
+          .replace(/\\"/g, '"')
+          .replace(/\\\\/g, '\\');
+        return unescaped;
+      } catch {
+        return incompleteMatch[1];
+      }
+    }
+    
+    return null;
+  };
+  
+  return {
+    getExtractedText: () => extractedText,
+    processChunk: async (accumulatedContent: string): Promise<AgentWidgetStreamParserResult | string | null> => {
+      // Skip if no new content
+      if (accumulatedContent.length <= processedLength) {
+        return extractedText ? { text: extractedText, raw: accumulatedContent } : extractedText;
+      }
+      
+      // Validate that the accumulated content looks like valid JSON
+      const trimmed = accumulatedContent.trim();
+      if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
+        return null;
+      }
+      
+      // Try to extract text field using regex
+      const extracted = extractTextFromIncompleteJson(accumulatedContent);
+      if (extracted !== null) {
+        extractedText = extracted;
+      }
+      
+      // Update processed length
+      processedLength = accumulatedContent.length;
+      
+      // Return both the extracted text and raw JSON
+      return extractedText ? { 
+        text: extractedText,
+        raw: accumulatedContent 
+      } : extractedText;
+    },
+    close: async () => {
+      // No cleanup needed for regex-based parser
+    }
+  };
+};
+
+/**
+ * Extracts the text field from JSON (works with partial JSON during streaming).
+ * For complete JSON, uses fast path. For incomplete JSON, returns null (use stateful parser in client.ts).
+ * 
+ * @param jsonString - The JSON string (can be partial/incomplete during streaming)
+ * @returns The extracted text value, or null if not found or invalid
+ */
+export const extractTextFromJson = (jsonString: string): string | null => {
+  try {
+    // Try to parse complete JSON first (fast path)
+    const parsed = JSON.parse(jsonString);
+    if (parsed && typeof parsed === "object" && typeof parsed.text === "string") {
+      return parsed.text;
+    }
+  } catch {
+    // For incomplete JSON, return null - use stateful parser in client.ts
+    return null;
+  }
+  return null;
+};
+
+/**
+ * Plain text parser - passes through text as-is without any parsing.
+ * This is the default parser.
+ */
+export const createPlainTextParser = (): AgentWidgetStreamParser => {
+  const parser: AgentWidgetStreamParser = {
+    processChunk: (accumulatedContent: string): string | null => {
+      // Always return null to indicate this isn't a structured format
+      // Content will be displayed as plain text
+      return null;
+    },
+    getExtractedText: (): string | null => {
+      return null;
+    }
+  };
+  // Mark this as a plain text parser
+  (parser as any).__isPlainTextParser = true;
+  return parser;
+};
+
+/**
+ * JSON parser using regex-based extraction.
+ * Extracts the 'text' field from JSON responses using regex patterns.
+ * This is a simpler regex-based alternative to createJsonStreamParser.
+ * Less robust for complex/malformed JSON but has no external dependencies.
+ */
+export const createRegexJsonParser = (): AgentWidgetStreamParser => {
+  const regexParser = createRegexJsonParserInternal();
+  
+  return {
+    processChunk: async (accumulatedContent: string): Promise<AgentWidgetStreamParserResult | string | null> => {
+      // Only process if it looks like JSON
+      const trimmed = accumulatedContent.trim();
+      if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) {
+        return null;
+      }
+      return regexParser.processChunk(accumulatedContent);
+    },
+    getExtractedText: regexParser.getExtractedText.bind(regexParser),
+    close: regexParser.close?.bind(regexParser)
+  };
+};
+
+/**
+ * JSON stream parser using partial-json library.
+ * Extracts the 'text' field from JSON responses using the partial-json library,
+ * which is specifically designed for parsing incomplete JSON from LLMs.
+ * This is the recommended parser as it's more robust than regex.
+ * 
+ * Library: https://github.com/promplate/partial-json-parser-js
+ */
+export const createJsonStreamParser = (): AgentWidgetStreamParser => {
+  let extractedText: string | null = null;
+  let processedLength = 0;
+  
+  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 ? { text: extractedText, raw: accumulatedContent } : extractedText;
+      }
+      
+      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 field if available
+        if (parsed && typeof parsed === "object" && typeof parsed.text === "string") {
+          extractedText = parsed.text;
+        }
+      } catch (error) {
+        // If parsing fails completely, keep the last extracted text
+        // This can happen with very malformed JSON
+      }
+      
+      // Update processed length
+      processedLength = accumulatedContent.length;
+      
+      // Return both the extracted text and raw JSON
+      return extractedText ? { 
+        text: extractedText,
+        raw: accumulatedContent 
+      } : extractedText;
+    },
+    close: () => {
+      // No cleanup needed
+    }
+  };
+};
+
+/**
+ * XML stream parser.
+ * Extracts text from <text>...</text> tags in XML responses.
+ */
+export const createXmlParser = (): AgentWidgetStreamParser => {
+  let extractedText: string | null = null;
+  
+  return {
+    processChunk: (accumulatedContent: string): AgentWidgetStreamParserResult | string | null => {
+      // Return null if not XML format
+      const trimmed = accumulatedContent.trim();
+      if (!trimmed.startsWith('<')) {
+        return null;
+      }
+      
+      // Extract text from <text>...</text> tags
+      // Handle both <text>content</text> and <text attr="value">content</text>
+      const match = accumulatedContent.match(/<text[^>]*>([\s\S]*?)<\/text>/);
+      if (match && match[1]) {
+        extractedText = match[1];
+        // For XML, we typically don't need the raw content for middleware
+        // but we can include it for consistency
+        return { text: extractedText, raw: accumulatedContent };
+      }
+      
+      return null;
+    },
+    getExtractedText: (): string | null => {
+      return extractedText;
+    }
+  };
+};
+
+
+
 
 
 

package/src/utils/positioning.ts

@@ -12,3 +12,5 @@ export const positionMap: Record<
 
 
 
+
+

package/src/utils/theme.ts

@@ -20,3 +20,5 @@ export const applyThemeVariables = (
 
 
 
+
+