vanilla-agent 1.8.0 → 1.10.0

package/src/ui.ts

@@ -31,6 +31,13 @@ import {
   defaultActionHandlers,
   defaultJsonActionParser
 } from "./utils/actions";
+import { createLocalStorageAdapter } from "./utils/storage";
+import { componentRegistry } from "./components/registry";
+import {
+  renderComponentDirective,
+  extractComponentDirectiveFromMessage,
+  hasComponentDirective
+} from "./utils/component-middleware";
 
 // Default localStorage key for chat history (automatically cleared on clear chat)
 const DEFAULT_CHAT_HISTORY_STORAGE_KEY = "vanilla-agent-chat-history";
@@ -132,10 +139,15 @@ export const createAgentExperience = (
 
   // Get plugins for this instance
   const plugins = pluginRegistry.getForInstance(config.plugins);
+  
+  // Register components from config
+  if (config.components) {
+    componentRegistry.registerAll(config.components);
+  }
   const eventBus = createEventBus<AgentWidgetControllerEventMap>();
 
-  const storageAdapter: AgentWidgetStorageAdapter | undefined =
-    config.storageAdapter;
+  const storageAdapter: AgentWidgetStorageAdapter =
+    config.storageAdapter ?? createLocalStorageAdapter();
   let persistentMetadata: Record<string, unknown> = {};
   let pendingStoredState: Promise<AgentWidgetStoredState | null> | null = null;
 
@@ -224,7 +236,9 @@ export const createAgentExperience = (
     introTitle,
     introSubtitle,
     closeButton,
-    iconHolder
+    iconHolder,
+    headerTitle,
+    headerSubtitle
   } = panelElements;
   
   // Use mutable references for mic button so we can update them dynamically
@@ -300,11 +314,17 @@ export const createAgentExperience = (
       : [];
 
   function persistState(messagesOverride?: AgentWidgetMessage[]) {
-    if (!storageAdapter?.save || !session) return;
+    if (!storageAdapter?.save) return;
+
+    // Allow saving even if session doesn't exist yet (for metadata during init)
+    const messages = messagesOverride
+      ? stripStreamingFromMessages(messagesOverride)
+      : session
+        ? getMessagesForPersistence()
+        : [];
+
     const payload = {
-      messages: messagesOverride
-        ? stripStreamingFromMessages(messagesOverride)
-        : getMessagesForPersistence(),
+      messages,
       metadata: persistentMetadata
     };
     try {
@@ -516,6 +536,51 @@ export const createAgentExperience = (
         }
       }
 
+      // Check for component directive if no plugin handled it
+      if (!bubble && message.role === "assistant" && !message.variant) {
+        const enableComponentStreaming = config.enableComponentStreaming !== false; // Default to true
+        if (enableComponentStreaming && hasComponentDirective(message)) {
+          const directive = extractComponentDirectiveFromMessage(message);
+          if (directive) {
+            const componentBubble = renderComponentDirective(directive, {
+              config,
+              message,
+              transform
+            });
+            if (componentBubble) {
+              // Wrap component in standard bubble styling
+              const wrapper = document.createElement("div");
+              wrapper.className = [
+                "vanilla-message-bubble",
+                "tvw-max-w-[85%]",
+                "tvw-rounded-2xl",
+                "tvw-bg-cw-surface",
+                "tvw-border",
+                "tvw-border-cw-message-border",
+                "tvw-p-4"
+              ].join(" ");
+              wrapper.setAttribute("data-message-id", message.id);
+
+              // Add text content above component if present (combined text+component response)
+              if (message.content && message.content.trim()) {
+                const textDiv = document.createElement("div");
+                textDiv.className = "tvw-mb-3 tvw-text-sm tvw-leading-relaxed";
+                textDiv.innerHTML = transform({
+                  text: message.content,
+                  message,
+                  streaming: Boolean(message.streaming),
+                  raw: message.rawContent
+                });
+                wrapper.appendChild(textDiv);
+              }
+
+              wrapper.appendChild(componentBubble);
+              bubble = wrapper;
+            }
+          }
+        }
+      }
+
       // Fallback to default rendering if plugin returned null or no plugin matched
       if (!bubble) {
         if (message.variant === "reasoning" && message.reasoning) {
@@ -1295,6 +1360,14 @@ export const createAgentExperience = (
         launcherButtonInstance.update(config);
       }
 
+      // Update panel header title and subtitle
+      if (headerTitle && config.launcher?.title !== undefined) {
+        headerTitle.textContent = config.launcher.title;
+      }
+      if (headerSubtitle && config.launcher?.subtitle !== undefined) {
+        headerSubtitle.textContent = config.launcher.subtitle;
+      }
+
       // Only update open state if launcher enabled state changed or autoExpand value changed
       const launcherEnabledChanged = launcherEnabled !== prevLauncherEnabled;
       const autoExpandChanged = autoExpand !== prevAutoExpand;

package/src/utils/component-middleware.ts

@@ -0,0 +1,137 @@
+import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
+import { componentRegistry, ComponentContext } from "../components/registry";
+import { ComponentDirective, createComponentStreamParser } from "./component-parser";
+import { createStandardBubble, MessageTransform } from "../components/message-bubble";
+
+/**
+ * Options for component middleware
+ */
+export interface ComponentMiddlewareOptions {
+  config: AgentWidgetConfig;
+  message: AgentWidgetMessage;
+  transform: MessageTransform;
+  onPropsUpdate?: (props: Record<string, unknown>) => void;
+}
+
+/**
+ * Renders a component directive into an HTMLElement
+ */
+export function renderComponentDirective(
+  directive: ComponentDirective,
+  options: ComponentMiddlewareOptions
+): HTMLElement | null {
+  const { config, message, onPropsUpdate } = options;
+
+  // Get component renderer from registry
+  const renderer = componentRegistry.get(directive.component);
+  if (!renderer) {
+    // Component not found, fall back to default rendering
+    console.warn(
+      `[ComponentMiddleware] Component "${directive.component}" not found in registry. Falling back to default rendering.`
+    );
+    return null;
+  }
+
+  // Create component context
+  const context: ComponentContext = {
+    message,
+    config,
+    updateProps: (newProps: Record<string, unknown>) => {
+      if (onPropsUpdate) {
+        onPropsUpdate(newProps);
+      }
+    }
+  };
+
+  try {
+    // Render the component
+    const element = renderer(directive.props, context);
+    return element;
+  } catch (error) {
+    console.error(
+      `[ComponentMiddleware] Error rendering component "${directive.component}":`,
+      error
+    );
+    return null;
+  }
+}
+
+/**
+ * Creates middleware that processes component directives from streamed JSON
+ */
+export function createComponentMiddleware() {
+  const parser = createComponentStreamParser();
+
+  return {
+    /**
+     * Process accumulated content and extract component directive
+     */
+    processChunk: (accumulatedContent: string): ComponentDirective | null => {
+      return parser.processChunk(accumulatedContent);
+    },
+
+    /**
+     * Get the currently extracted directive
+     */
+    getDirective: (): ComponentDirective | null => {
+      return parser.getExtractedDirective();
+    },
+
+    /**
+     * Reset the parser state
+     */
+    reset: () => {
+      parser.reset();
+    }
+  };
+}
+
+/**
+ * Checks if a message contains a component directive in its raw content
+ */
+export function hasComponentDirective(message: AgentWidgetMessage): boolean {
+  if (!message.rawContent) return false;
+  
+  try {
+    const parsed = JSON.parse(message.rawContent);
+    return (
+      typeof parsed === "object" &&
+      parsed !== null &&
+      "component" in parsed &&
+      typeof parsed.component === "string"
+    );
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Extracts component directive from a complete message
+ */
+export function extractComponentDirectiveFromMessage(
+  message: AgentWidgetMessage
+): ComponentDirective | null {
+  if (!message.rawContent) return null;
+
+  try {
+    const parsed = JSON.parse(message.rawContent);
+    if (
+      typeof parsed === "object" &&
+      parsed !== null &&
+      "component" in parsed &&
+      typeof parsed.component === "string"
+    ) {
+      return {
+        component: parsed.component,
+        props: (parsed.props && typeof parsed.props === "object" && parsed.props !== null
+          ? parsed.props
+          : {}) as Record<string, unknown>,
+        raw: message.rawContent
+      };
+    }
+  } catch {
+    // Not valid JSON or not a component directive
+  }
+
+  return null;
+}

package/src/utils/component-parser.ts

@@ -0,0 +1,119 @@
+import { parse as parsePartialJson, STR, OBJ } from "partial-json";
+
+/**
+ * Represents a component directive extracted from JSON
+ */
+export interface ComponentDirective {
+  component: string;
+  props: Record<string, unknown>;
+  raw: string;
+}
+
+/**
+ * Checks if a parsed object is a component directive
+ */
+function isComponentDirective(obj: unknown): obj is { component: string; props?: unknown } {
+  if (!obj || typeof obj !== "object") return false;
+  if (!("component" in obj)) return false;
+  const component = (obj as { component: unknown }).component;
+  return typeof component === "string" && component.length > 0;
+}
+
+/**
+ * Extracts component directive from parsed JSON object
+ */
+function extractComponentDirective(
+  parsed: unknown,
+  rawJson: string
+): ComponentDirective | null {
+  if (!isComponentDirective(parsed)) {
+    return null;
+  }
+
+  const props = parsed.props && typeof parsed.props === "object" && parsed.props !== null
+    ? (parsed.props as Record<string, unknown>)
+    : {};
+
+  return {
+    component: parsed.component,
+    props,
+    raw: rawJson
+  };
+}
+
+/**
+ * Creates a parser that extracts component directives from JSON streams
+ * This parser looks for objects with a "component" field and extracts
+ * the component name and props incrementally as they stream in.
+ */
+export function createComponentStreamParser() {
+  let extractedDirective: ComponentDirective | null = null;
+  let processedLength = 0;
+
+  return {
+    /**
+     * Get the currently extracted component directive
+     */
+    getExtractedDirective: (): ComponentDirective | null => {
+      return extractedDirective;
+    },
+
+    /**
+     * Process a chunk of JSON and extract component directive if present
+     */
+    processChunk: (accumulatedContent: string): ComponentDirective | 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 extractedDirective;
+      }
+
+      try {
+        // Parse partial JSON - allow partial strings and objects during streaming
+        // STR | OBJ allows incomplete strings and objects during streaming
+        const parsed = parsePartialJson(accumulatedContent, STR | OBJ);
+
+        // Try to extract component directive
+        const directive = extractComponentDirective(parsed, accumulatedContent);
+        if (directive) {
+          extractedDirective = directive;
+        }
+      } catch (error) {
+        // If parsing fails completely, keep the last extracted directive
+        // This can happen with very malformed JSON during streaming
+      }
+
+      // Update processed length
+      processedLength = accumulatedContent.length;
+
+      return extractedDirective;
+    },
+
+    /**
+     * Reset the parser state
+     */
+    reset: () => {
+      extractedDirective = null;
+      processedLength = 0;
+    }
+  };
+}
+
+/**
+ * Type guard to check if an object is a component directive
+ */
+export function isComponentDirectiveType(obj: unknown): obj is ComponentDirective {
+  return (
+    typeof obj === "object" &&
+    obj !== null &&
+    "component" in obj &&
+    typeof (obj as { component: unknown }).component === "string" &&
+    "props" in obj &&
+    typeof (obj as { props: unknown }).props === "object"
+  );
+}

package/src/utils/constants.ts

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

package/src/utils/dom.ts

@@ -22,3 +22,4 @@ export const createFragment = (): DocumentFragment => {
 
 
 
+

package/src/utils/formatting.ts

@@ -263,8 +263,8 @@ export const createJsonStreamParser = (): AgentWidgetStreamParser => {
       
       // Skip if no new content
       if (accumulatedContent.length <= processedLength) {
-        return extractedText !== null
-          ? { text: extractedText, raw: accumulatedContent }
+        return extractedText !== null || extractedText === ""
+          ? { text: extractedText || "", raw: accumulatedContent }
           : null;
       }
       
@@ -273,9 +273,21 @@ export const createJsonStreamParser = (): AgentWidgetStreamParser => {
         // 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;
+        if (parsed && typeof parsed === "object") {
+          // Check for component directives - extract text if present for combined text+component
+          if (parsed.component && typeof parsed.component === "string") {
+            // For component directives, extract text if present, otherwise empty
+            extractedText = typeof parsed.text === "string" ? parsed.text : "";
+          }
+          // Check for form directives - these also don't have text fields
+          else if (parsed.type === "init" && parsed.form) {
+            // For form directives, return empty - they're handled by form postprocessor
+            extractedText = "";
+          }
+          // Extract text field if available
+          else if (typeof parsed.text === "string") {
+            extractedText = parsed.text;
+          }
         }
       } catch (error) {
         // If parsing fails completely, keep the last extracted text
@@ -285,7 +297,8 @@ export const createJsonStreamParser = (): AgentWidgetStreamParser => {
       // Update processed length
       processedLength = accumulatedContent.length;
       
-      // Return both the extracted text and raw JSON
+      // Always return raw JSON for component/form directive detection
+      // Return empty string for text if it's a component/form directive
       if (extractedText !== null) {
         return {
           text: extractedText,
@@ -318,6 +331,18 @@ export const createFlexibleJsonStreamParser = (
   // Default text extractor that handles common patterns
   const defaultExtractor = (parsed: any): string | null => {
     if (!parsed || typeof parsed !== "object") return null;
+
+    // Check for component directives - extract text if present for combined text+component
+    if (parsed.component && typeof parsed.component === "string") {
+      // For component directives, extract text if present, otherwise empty
+      return typeof parsed.text === "string" ? parsed.text : "";
+    }
+    
+    // Check for form directives - these also don't have text fields
+    if (parsed.type === "init" && parsed.form) {
+      // For form directives, return empty - they're handled by form postprocessor
+      return "";
+    }
     
     // Check for action-based text fields
     if (parsed.action) {
@@ -373,8 +398,8 @@ export const createFlexibleJsonStreamParser = (
       // Update processed length
       processedLength = accumulatedContent.length;
       
-      // Always return the raw JSON for action parsing
-      // Text may be null during early streaming, that's ok
+      // Always return the raw JSON for action parsing and component detection
+      // Text may be null or empty for component/form directives, that's ok
       return {
         text: extractedText || "",
         raw: accumulatedContent

package/src/utils/positioning.ts

@@ -14,3 +14,4 @@ export const positionMap: Record<
 
 
 
+

package/src/utils/theme.ts

@@ -22,3 +22,4 @@ export const applyThemeVariables = (
 
 
 
+