vanilla-agent 1.9.0 → 1.11.0

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 = (
 
 
 
+