vanilla-agent 1.3.0 → 1.4.1

package/src/components/message-bubble.ts

@@ -78,10 +78,15 @@ export const createStandardBubble = (
   });
   bubble.appendChild(contentDiv);
 
-  // Add typing indicator if this is a streaming assistant message with content
-  if (message.streaming && message.role === "assistant" && message.content && message.content.trim()) {
-    const typingIndicator = createTypingIndicator();
-    bubble.appendChild(typingIndicator);
+  // Add typing indicator if this is a streaming assistant message
+  // Show it when streaming starts (even if content is empty), hide it once content appears
+  if (message.streaming && message.role === "assistant") {
+    // Only show typing indicator if content is empty or just starting
+    // Hide it once we have substantial content
+    if (!message.content || !message.content.trim()) {
+      const typingIndicator = createTypingIndicator();
+      bubble.appendChild(typingIndicator);
+    }
   }
 
   return bubble;

package/src/components/messages.ts

@@ -1,5 +1,5 @@
 import { createElement, createFragment } from "../utils/dom";
-import { AgentWidgetMessage } from "../types";
+import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
 import { MessageTransform } from "./message-bubble";
 import { createStandardBubble } from "./message-bubble";
 import { createReasoningBubble } from "./reasoning-bubble";
@@ -10,7 +10,8 @@ export const renderMessages = (
   messages: AgentWidgetMessage[],
   transform: MessageTransform,
   showReasoning: boolean,
-  showToolCalls: boolean
+  showToolCalls: boolean,
+  config?: AgentWidgetConfig
 ) => {
   container.innerHTML = "";
   const fragment = createFragment();
@@ -22,7 +23,7 @@ export const renderMessages = (
       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);
     }
@@ -43,3 +44,4 @@ export const renderMessages = (
 
 
 
+

package/src/components/panel.ts

@@ -443,6 +443,7 @@ export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelE
     "div",
     "tvw-flex tvw-flex-1 tvw-min-h-0 tvw-flex-col tvw-gap-6 tvw-overflow-y-auto tvw-bg-cw-container tvw-px-6 tvw-py-6"
   );
+  body.id = "vanilla-agent-scroll-container";
   const introCard = createElement(
     "div",
     "tvw-rounded-2xl tvw-bg-cw-surface tvw-p-6 tvw-shadow-sm"

package/src/components/reasoning-bubble.ts

@@ -1,6 +1,7 @@
 import { createElement } from "../utils/dom";
 import { AgentWidgetMessage } from "../types";
 import { describeReasonStatus } from "../utils/formatting";
+import { renderLucideIcon } from "../utils/icons";
 
 // Expansion state per widget instance
 const reasoningExpansionState = new Set<string>();
@@ -10,6 +11,7 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
   const bubble = createElement(
     "div",
     [
+      "tvw-w-full",
       "tvw-max-w-[85%]",
       "tvw-rounded-2xl",
       "tvw-bg-cw-surface",
@@ -36,7 +38,7 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
   header.setAttribute("aria-expanded", expanded ? "true" : "false");
 
   const headerContent = createElement("div", "tvw-flex tvw-flex-col tvw-text-left");
-  const title = createElement("span", "tvw-text-xs tvw-font-semibold tvw-text-cw-primary");
+  const title = createElement("span", "tvw-text-xs tvw-text-cw-primary");
   title.textContent = "Thinking...";
   headerContent.appendChild(title);
 
@@ -50,13 +52,20 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
     title.style.display = "";
   }
 
-  const toggleLabel = createElement(
-    "span",
-    "tvw-text-xs tvw-text-cw-primary"
-  );
-  toggleLabel.textContent = expanded ? "Hide" : "Show";
+  const toggleIcon = createElement("div", "tvw-flex tvw-items-center");
+  const iconColor = "currentColor";
+  const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+  if (chevronIcon) {
+    toggleIcon.appendChild(chevronIcon);
+  } else {
+    // Fallback to text if icon fails
+    toggleIcon.textContent = expanded ? "Hide" : "Show";
+  }
 
-  header.append(headerContent, toggleLabel);
+  const headerMeta = createElement("div", "tvw-flex tvw-items-center tvw-ml-auto");
+  headerMeta.append(toggleIcon);
+
+  header.append(headerContent, headerMeta);
 
   const content = createElement(
     "div",
@@ -78,7 +87,16 @@ export const createReasoningBubble = (message: AgentWidgetMessage): HTMLElement
 
   const applyExpansionState = () => {
     header.setAttribute("aria-expanded", expanded ? "true" : "false");
-    toggleLabel.textContent = expanded ? "Hide" : "Show";
+    // Update chevron icon
+    toggleIcon.innerHTML = "";
+    const iconColor = "currentColor";
+    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+    if (chevronIcon) {
+      toggleIcon.appendChild(chevronIcon);
+    } else {
+      // Fallback to text if icon fails
+      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    }
     content.style.display = expanded ? "" : "none";
   };
 

package/src/components/tool-bubble.ts

@@ -1,15 +1,19 @@
 import { createElement } from "../utils/dom";
-import { AgentWidgetMessage } from "../types";
+import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
 import { formatUnknownValue, describeToolTitle } from "../utils/formatting";
+import { renderLucideIcon } from "../utils/icons";
 
 // Expansion state per widget instance
 const toolExpansionState = new Set<string>();
 
-export const createToolBubble = (message: AgentWidgetMessage): HTMLElement => {
+export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidgetConfig): HTMLElement => {
   const tool = message.toolCall;
+  const toolCallConfig = config?.toolCall ?? {};
+  
   const bubble = createElement(
     "div",
     [
+      "tvw-w-full",
       "tvw-max-w-[85%]",
       "tvw-rounded-2xl",
       "tvw-bg-cw-surface",
@@ -23,6 +27,20 @@ export const createToolBubble = (message: AgentWidgetMessage): HTMLElement => {
     ].join(" ")
   );
 
+  // Apply bubble-level styles
+  if (toolCallConfig.backgroundColor) {
+    bubble.style.backgroundColor = toolCallConfig.backgroundColor;
+  }
+  if (toolCallConfig.borderColor) {
+    bubble.style.borderColor = toolCallConfig.borderColor;
+  }
+  if (toolCallConfig.borderWidth) {
+    bubble.style.borderWidth = toolCallConfig.borderWidth;
+  }
+  if (toolCallConfig.borderRadius) {
+    bubble.style.borderRadius = toolCallConfig.borderRadius;
+  }
+
   if (!tool) {
     return bubble;
   }
@@ -35,25 +53,39 @@ export const createToolBubble = (message: AgentWidgetMessage): HTMLElement => {
   header.type = "button";
   header.setAttribute("aria-expanded", expanded ? "true" : "false");
 
+  // Apply header styles
+  if (toolCallConfig.headerBackgroundColor) {
+    header.style.backgroundColor = toolCallConfig.headerBackgroundColor;
+  }
+  if (toolCallConfig.headerPaddingX) {
+    header.style.paddingLeft = toolCallConfig.headerPaddingX;
+    header.style.paddingRight = toolCallConfig.headerPaddingX;
+  }
+  if (toolCallConfig.headerPaddingY) {
+    header.style.paddingTop = toolCallConfig.headerPaddingY;
+    header.style.paddingBottom = toolCallConfig.headerPaddingY;
+  }
+
   const headerContent = createElement("div", "tvw-flex tvw-flex-col tvw-text-left");
   const title = createElement("span", "tvw-text-xs tvw-text-cw-primary");
+  if (toolCallConfig.headerTextColor) {
+    title.style.color = toolCallConfig.headerTextColor;
+  }
   title.textContent = describeToolTitle(tool);
   headerContent.appendChild(title);
 
-  if (tool.name) {
-    const name = createElement("span", "tvw-text-[11px] tvw-text-cw-muted");
-    name.textContent = tool.name;
-    headerContent.appendChild(name);
+  const toggleIcon = createElement("div", "tvw-flex tvw-items-center");
+  const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
+  const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+  if (chevronIcon) {
+    toggleIcon.appendChild(chevronIcon);
+  } else {
+    // Fallback to text if icon fails
+    toggleIcon.textContent = expanded ? "Hide" : "Show";
   }
 
-  const toggleLabel = createElement(
-    "span",
-    "tvw-text-xs tvw-text-cw-primary"
-  );
-  toggleLabel.textContent = expanded ? "Hide" : "Show";
-
-  const headerMeta = createElement("div", "tvw-flex tvw-items-center tvw-gap-2");
-  headerMeta.append(toggleLabel);
+  const headerMeta = createElement("div", "tvw-flex tvw-items-center tvw-gap-2 tvw-ml-auto");
+  headerMeta.append(toggleIcon);
 
   header.append(headerContent, headerMeta);
 
@@ -63,17 +95,60 @@ export const createToolBubble = (message: AgentWidgetMessage): HTMLElement => {
   );
   content.style.display = expanded ? "" : "none";
 
+  // Apply content styles
+  if (toolCallConfig.contentBackgroundColor) {
+    content.style.backgroundColor = toolCallConfig.contentBackgroundColor;
+  }
+  if (toolCallConfig.contentTextColor) {
+    content.style.color = toolCallConfig.contentTextColor;
+  }
+  if (toolCallConfig.contentPaddingX) {
+    content.style.paddingLeft = toolCallConfig.contentPaddingX;
+    content.style.paddingRight = toolCallConfig.contentPaddingX;
+  }
+  if (toolCallConfig.contentPaddingY) {
+    content.style.paddingTop = toolCallConfig.contentPaddingY;
+    content.style.paddingBottom = toolCallConfig.contentPaddingY;
+  }
+
+  // Add tool name at the top of content
+  if (tool.name) {
+    const toolName = createElement("div", "tvw-text-xs tvw-text-cw-muted tvw-italic");
+    if (toolCallConfig.contentTextColor) {
+      toolName.style.color = toolCallConfig.contentTextColor;
+    } else if (toolCallConfig.headerTextColor) {
+      toolName.style.color = toolCallConfig.headerTextColor;
+    }
+    toolName.textContent = tool.name;
+    content.appendChild(toolName);
+  }
+
   if (tool.args !== undefined) {
     const argsBlock = createElement("div", "tvw-space-y-1");
     const argsLabel = createElement(
       "div",
-      "tvw-font-xxs tvw-font-medium tvw-text-cw-muted"
+      "tvw-text-xs tvw-text-cw-muted"
     );
+    if (toolCallConfig.labelTextColor) {
+      argsLabel.style.color = toolCallConfig.labelTextColor;
+    }
     argsLabel.textContent = "Arguments";
     const argsPre = createElement(
       "pre",
-      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-font-xxs tvw-text-cw-primary"
+      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-text-xs tvw-text-cw-primary"
     );
+    // Ensure font size matches header text (0.75rem / 12px)
+    argsPre.style.fontSize = "0.75rem";
+    argsPre.style.lineHeight = "1rem";
+    if (toolCallConfig.codeBlockBackgroundColor) {
+      argsPre.style.backgroundColor = toolCallConfig.codeBlockBackgroundColor;
+    }
+    if (toolCallConfig.codeBlockBorderColor) {
+      argsPre.style.borderColor = toolCallConfig.codeBlockBorderColor;
+    }
+    if (toolCallConfig.codeBlockTextColor) {
+      argsPre.style.color = toolCallConfig.codeBlockTextColor;
+    }
     argsPre.textContent = formatUnknownValue(tool.args);
     argsBlock.append(argsLabel, argsPre);
     content.appendChild(argsBlock);
@@ -83,13 +158,28 @@ export const createToolBubble = (message: AgentWidgetMessage): HTMLElement => {
     const logsBlock = createElement("div", "tvw-space-y-1");
     const logsLabel = createElement(
       "div",
-      "tvw-font-xxs tvw-font-medium tvw-text-cw-muted"
+      "tvw-text-xs tvw-text-cw-muted"
     );
+    if (toolCallConfig.labelTextColor) {
+      logsLabel.style.color = toolCallConfig.labelTextColor;
+    }
     logsLabel.textContent = "Activity";
     const logsPre = createElement(
       "pre",
-      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-font-xxs tvw-text-cw-primary"
+      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-text-xs tvw-text-cw-primary"
     );
+    // Ensure font size matches header text (0.75rem / 12px)
+    logsPre.style.fontSize = "0.75rem";
+    logsPre.style.lineHeight = "1rem";
+    if (toolCallConfig.codeBlockBackgroundColor) {
+      logsPre.style.backgroundColor = toolCallConfig.codeBlockBackgroundColor;
+    }
+    if (toolCallConfig.codeBlockBorderColor) {
+      logsPre.style.borderColor = toolCallConfig.codeBlockBorderColor;
+    }
+    if (toolCallConfig.codeBlockTextColor) {
+      logsPre.style.color = toolCallConfig.codeBlockTextColor;
+    }
     logsPre.textContent = tool.chunks.join("\n");
     logsBlock.append(logsLabel, logsPre);
     content.appendChild(logsBlock);
@@ -99,13 +189,28 @@ export const createToolBubble = (message: AgentWidgetMessage): HTMLElement => {
     const resultBlock = createElement("div", "tvw-space-y-1");
     const resultLabel = createElement(
       "div",
-      "tvw-font-xxs tvw-text-sm tvw-text-cw-muted"
+      "tvw-text-xs tvw-text-cw-muted"
     );
+    if (toolCallConfig.labelTextColor) {
+      resultLabel.style.color = toolCallConfig.labelTextColor;
+    }
     resultLabel.textContent = "Result";
     const resultPre = createElement(
       "pre",
-      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-font-xxs tvw-text-cw-primary"
+      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-text-xs tvw-text-cw-primary"
     );
+    // Ensure font size matches header text (0.75rem / 12px)
+    resultPre.style.fontSize = "0.75rem";
+    resultPre.style.lineHeight = "1rem";
+    if (toolCallConfig.codeBlockBackgroundColor) {
+      resultPre.style.backgroundColor = toolCallConfig.codeBlockBackgroundColor;
+    }
+    if (toolCallConfig.codeBlockBorderColor) {
+      resultPre.style.borderColor = toolCallConfig.codeBlockBorderColor;
+    }
+    if (toolCallConfig.codeBlockTextColor) {
+      resultPre.style.color = toolCallConfig.codeBlockTextColor;
+    }
     resultPre.textContent = formatUnknownValue(tool.result);
     resultBlock.append(resultLabel, resultPre);
     content.appendChild(resultBlock);
@@ -114,15 +219,27 @@ export const createToolBubble = (message: AgentWidgetMessage): HTMLElement => {
   if (tool.status === "complete" && typeof tool.duration === "number") {
     const duration = createElement(
       "div",
-      "tvw-font-xxs tvw-text-cw-muted"
+      "tvw-text-xs tvw-text-cw-muted"
     );
+    if (toolCallConfig.contentTextColor) {
+      duration.style.color = toolCallConfig.contentTextColor;
+    }
     duration.textContent = `Duration: ${tool.duration}ms`;
     content.appendChild(duration);
   }
 
   const applyToolExpansion = () => {
     header.setAttribute("aria-expanded", expanded ? "true" : "false");
-    toggleLabel.textContent = expanded ? "Hide" : "Show";
+    // Update chevron icon
+    toggleIcon.innerHTML = "";
+    const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
+    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+    if (chevronIcon) {
+      toggleIcon.appendChild(chevronIcon);
+    } else {
+      // Fallback to text if icon fails
+      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    }
     content.style.display = expanded ? "" : "none";
   };
 

package/src/index.ts

@@ -10,7 +10,9 @@ export type {
   AgentWidgetInitOptions,
   AgentWidgetMessage,
   AgentWidgetLauncherConfig,
-  AgentWidgetEvent
+  AgentWidgetEvent,
+  AgentWidgetStreamParser,
+  AgentWidgetStreamParserResult
 } from "./types";
 
 export { initAgentWidgetFn as initAgentWidget };
@@ -28,6 +30,12 @@ export {
   escapeHtml,
   directivePostprocessor
 } from "./postprocessors";
+export { 
+  createPlainTextParser,
+  createJsonStreamParser,
+  createRegexJsonParser,
+  createXmlParser
+} from "./utils/formatting";
 export type { AgentWidgetInitHandle };
 
 // Plugin system exports

package/src/plugins/registry.ts

@@ -72,3 +72,5 @@ export const pluginRegistry = new PluginRegistry();
 
 
 
+
+

package/src/plugins/types.ts

@@ -90,3 +90,5 @@ export interface AgentWidgetPlugin {
 
 
 
+
+

package/src/runtime/init.ts

@@ -1,5 +1,5 @@
 import { createAgentExperience, AgentWidgetController } from "../ui";
-import { AgentWidgetConfig, AgentWidgetInitOptions } from "../types";
+import { AgentWidgetConfig, AgentWidgetInitOptions, AgentWidgetEvent } from "../types";
 
 const ensureTarget = (target: string | HTMLElement): HTMLElement => {
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -145,6 +145,9 @@ export const initAgentWidget = (
     stopVoiceRecognition() {
       return controller.stopVoiceRecognition();
     },
+    injectTestMessage(event: AgentWidgetEvent) {
+      controller.injectTestMessage(event);
+    },
     destroy() {
       controller.destroy();
       host.remove();

package/src/session.ts

@@ -60,6 +60,10 @@ export class AgentWidgetSession {
     return this.streaming;
   }
 
+  public injectTestEvent(event: AgentWidgetEvent) {
+    this.handleEvent(event);
+  }
+
   public async sendMessage(rawInput: string, options?: { viaVoice?: boolean }) {
     const input = rawInput.trim();
     if (!input) return;

package/src/styles/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/src/types.ts

@@ -138,6 +138,81 @@ export type AgentWidgetVoiceRecognitionConfig = {
   showRecordingIndicator?: boolean;
 };
 
+export type AgentWidgetToolCallConfig = {
+  backgroundColor?: string;
+  borderColor?: string;
+  borderWidth?: string;
+  borderRadius?: string;
+  headerBackgroundColor?: string;
+  headerTextColor?: string;
+  headerPaddingX?: string;
+  headerPaddingY?: string;
+  contentBackgroundColor?: string;
+  contentTextColor?: string;
+  contentPaddingX?: string;
+  contentPaddingY?: string;
+  codeBlockBackgroundColor?: string;
+  codeBlockBorderColor?: string;
+  codeBlockTextColor?: string;
+  toggleTextColor?: string;
+  labelTextColor?: string;
+};
+
+/**
+ * Interface for pluggable stream parsers that extract text from streaming responses.
+ * Parsers handle incremental parsing to extract text values from structured formats (JSON, XML, etc.).
+ * 
+ * @example
+ * ```typescript
+ * const jsonParser: AgentWidgetStreamParser = {
+ *   processChunk: async (content) => {
+ *     // Extract text from JSON - return null if not JSON or text not available yet
+ *     if (!content.trim().startsWith('{')) return null;
+ *     const match = content.match(/"text"\s*:\s*"([^"]*)"/);
+ *     return match ? match[1] : null;
+ *   },
+ *   getExtractedText: () => extractedText
+ * };
+ * ```
+ */
+export interface AgentWidgetStreamParserResult {
+  /**
+   * The extracted text to display (may be partial during streaming)
+   */
+  text: string | null;
+  
+  /**
+   * Optional: The raw accumulated content (useful for middleware that needs the original format)
+   */
+  raw?: string;
+}
+
+export interface AgentWidgetStreamParser {
+  /**
+   * Process a chunk of content and return the extracted text (if available).
+   * This method is called for each chunk as it arrives during streaming.
+   * Return null if the content doesn't match this parser's format or if text is not yet available.
+   * 
+   * @param accumulatedContent - The full accumulated content so far (including new chunk)
+   * @returns The extracted text value and optionally raw content, or null if not yet available or format doesn't match
+   */
+  processChunk(accumulatedContent: string): Promise<AgentWidgetStreamParserResult | string | null> | AgentWidgetStreamParserResult | string | null;
+  
+  /**
+   * Get the currently extracted text value (may be partial).
+   * This is called synchronously to get the latest extracted text without processing.
+   * 
+   * @returns The currently extracted text value, or null if not yet available
+   */
+  getExtractedText(): string | null;
+  
+  /**
+   * Clean up any resources when parsing is complete.
+   */
+  close?(): Promise<void> | void;
+}
+
+
 export type AgentWidgetConfig = {
   apiUrl?: string;
   flowId?: string;
@@ -159,12 +234,44 @@ export type AgentWidgetConfig = {
   sendButton?: AgentWidgetSendButtonConfig;
   statusIndicator?: AgentWidgetStatusIndicatorConfig;
   voiceRecognition?: AgentWidgetVoiceRecognitionConfig;
+  toolCall?: AgentWidgetToolCallConfig;
   postprocessMessage?: (context: {
     text: string;
     message: AgentWidgetMessage;
     streaming: boolean;
   }) => string;
   plugins?: AgentWidgetPlugin[];
+  /**
+   * Custom stream parser for extracting text from streaming structured responses.
+   * Handles incremental parsing of JSON, XML, or other formats.
+   * If not provided, uses the default JSON parser.
+   * 
+   * @example
+   * ```typescript
+   * streamParser: () => ({
+   *   processChunk: async (content) => {
+   *     // Return null if not your format, or extracted text if available
+   *     if (!content.trim().startsWith('{')) return null;
+   *     return extractText(content);
+   *   },
+   *   getExtractedText: () => extractedText
+   * })
+   * ```
+   */
+  streamParser?: () => AgentWidgetStreamParser;
+  /**
+   * Additional localStorage key to clear when the clear chat button is clicked.
+   * The widget automatically clears `"vanilla-agent-chat-history"` by default.
+   * Use this option to clear additional keys (e.g., if you're using a custom storage key).
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   clearChatHistoryStorageKey: "my-custom-chat-history"
+   * }
+   * ```
+   */
+  clearChatHistoryStorageKey?: string;
 };
 
 export type AgentWidgetMessageRole = "user" | "assistant" | "system";