vanilla-agent 1.9.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.9.0",
+  "version": "1.11.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

@@ -5,7 +5,11 @@ import {
   AgentWidgetStreamParser,
   AgentWidgetContextProvider,
   AgentWidgetRequestMiddleware,
-  AgentWidgetRequestPayload
+  AgentWidgetRequestPayload,
+  AgentWidgetCustomFetch,
+  AgentWidgetSSEEventParser,
+  AgentWidgetHeadersFunction,
+  AgentWidgetSSEEventResult
 } from "./types";
 import { 
   extractTextFromJson, 
@@ -48,6 +52,9 @@ export class AgentWidgetClient {
   private readonly createStreamParser: () => AgentWidgetStreamParser;
   private readonly contextProviders: AgentWidgetContextProvider[];
   private readonly requestMiddleware?: AgentWidgetRequestMiddleware;
+  private readonly customFetch?: AgentWidgetCustomFetch;
+  private readonly parseSSEEvent?: AgentWidgetSSEEventParser;
+  private readonly getHeaders?: AgentWidgetHeadersFunction;
 
   constructor(private config: AgentWidgetConfig = {}) {
     this.apiUrl = config.apiUrl ?? DEFAULT_ENDPOINT;
@@ -60,6 +67,9 @@ export class AgentWidgetClient {
     this.createStreamParser = config.streamParser ?? getParserFromType(config.parserType);
     this.contextProviders = config.contextProviders ?? [];
     this.requestMiddleware = config.requestMiddleware;
+    this.customFetch = config.customFetch;
+    this.parseSSEEvent = config.parseSSEEvent;
+    this.getHeaders = config.getHeaders;
   }
 
   public async dispatch(options: DispatchOptions, onEvent: SSEHandler) {
@@ -70,19 +80,54 @@ export class AgentWidgetClient {
 
     onEvent({ type: "status", status: "connecting" });
 
-    const body = await this.buildPayload(options.messages);
+    const payload = await this.buildPayload(options.messages);
 
     if (this.debug) {
       // eslint-disable-next-line no-console
-      console.debug("[AgentWidgetClient] dispatch body", body);
+      console.debug("[AgentWidgetClient] dispatch payload", payload);
     }
 
-    const response = await fetch(this.apiUrl, {
-      method: "POST",
-      headers: this.headers,
-      body: JSON.stringify(body),
-      signal: controller.signal
-    });
+    // Build headers - merge static headers with dynamic headers if provided
+    let headers = { ...this.headers };
+    if (this.getHeaders) {
+      try {
+        const dynamicHeaders = await this.getHeaders();
+        headers = { ...headers, ...dynamicHeaders };
+      } catch (error) {
+        if (typeof console !== "undefined") {
+          // eslint-disable-next-line no-console
+          console.error("[AgentWidget] getHeaders error:", error);
+        }
+      }
+    }
+
+    // Use customFetch if provided, otherwise use default fetch
+    let response: Response;
+    if (this.customFetch) {
+      try {
+        response = await this.customFetch(
+          this.apiUrl,
+          {
+            method: "POST",
+            headers,
+            body: JSON.stringify(payload),
+            signal: controller.signal
+          },
+          payload
+        );
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error(String(error));
+        onEvent({ type: "error", error: err });
+        throw err;
+      }
+    } else {
+      response = await fetch(this.apiUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(payload),
+        signal: controller.signal
+      });
+    }
 
     if (!response.ok || !response.body) {
       const error = new Error(
@@ -112,7 +157,7 @@ export class AgentWidgetClient {
       })
       .map((message) => ({
         role: message.role,
-        content: message.content,
+        content: message.rawContent || message.content,
         createdAt: message.createdAt
       }));
 
@@ -167,6 +212,70 @@ export class AgentWidgetClient {
     return payload;
   }
 
+  /**
+   * Handle custom SSE event parsing via parseSSEEvent callback
+   * Returns true if event was handled, false otherwise
+   */
+  private async handleCustomSSEEvent(
+    payload: unknown,
+    onEvent: SSEHandler,
+    assistantMessageRef: { current: AgentWidgetMessage | null },
+    emitMessage: (msg: AgentWidgetMessage) => void,
+    nextSequence: () => number
+  ): Promise<boolean> {
+    if (!this.parseSSEEvent) return false;
+
+    try {
+      const result = await this.parseSSEEvent(payload);
+      if (result === null) return false; // Event should be ignored
+
+      const ensureAssistant = () => {
+        if (assistantMessageRef.current) return assistantMessageRef.current;
+        const msg: AgentWidgetMessage = {
+          id: `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+          role: "assistant",
+          content: "",
+          createdAt: new Date().toISOString(),
+          streaming: true,
+          variant: "assistant",
+          sequence: nextSequence()
+        };
+        assistantMessageRef.current = msg;
+        emitMessage(msg);
+        return msg;
+      };
+
+      if (result.text !== undefined) {
+        const assistant = ensureAssistant();
+        assistant.content += result.text;
+        emitMessage(assistant);
+      }
+
+      if (result.done) {
+        if (assistantMessageRef.current) {
+          assistantMessageRef.current.streaming = false;
+          emitMessage(assistantMessageRef.current);
+        }
+        onEvent({ type: "status", status: "idle" });
+      }
+
+      if (result.error) {
+        onEvent({
+          type: "error",
+          error: new Error(result.error)
+        });
+      }
+
+      return true; // Event was handled
+    } catch (error) {
+      if (typeof console !== "undefined") {
+        // eslint-disable-next-line no-console
+        console.error("[AgentWidget] parseSSEEvent error:", error);
+      }
+      return false;
+    }
+  }
+
   private async streamResponse(
     body: ReadableStream<Uint8Array>,
     onEvent: SSEHandler
@@ -215,6 +324,8 @@ export class AgentWidgetClient {
     };
 
     let assistantMessage: AgentWidgetMessage | null = null;
+    // Reference to track assistant message for custom event handler
+    const assistantMessageRef = { current: null as AgentWidgetMessage | null };
     const reasoningMessages = new Map<string, AgentWidgetMessage>();
     const toolMessages = new Map<string, AgentWidgetMessage>();
     const reasoningContext = {
@@ -265,7 +376,6 @@ export class AgentWidgetClient {
         content: "",
         createdAt: new Date().toISOString(),
         streaming: true,
-        variant: "assistant",
         sequence: nextSequence()
       };
       emitMessage(assistantMessage);
@@ -471,6 +581,24 @@ export class AgentWidgetClient {
         const payloadType =
           eventType !== "message" ? eventType : payload.type ?? "message";
 
+        // If custom SSE event parser is provided, try it first
+        if (this.parseSSEEvent) {
+          // Keep assistant message ref in sync
+          assistantMessageRef.current = assistantMessage;
+          const handled = await this.handleCustomSSEEvent(
+            payload,
+            onEvent,
+            assistantMessageRef,
+            emitMessage,
+            nextSequence
+          );
+          // Update assistantMessage from ref (in case it was created)
+          if (assistantMessageRef.current && !assistantMessage) {
+            assistantMessage = assistantMessageRef.current;
+          }
+          if (handled) continue; // Skip default handling if custom handler processed it
+        }
+
         if (payloadType === "reason_start") {
           const reasoningId =
             resolveReasoningId(payload, true) ?? `reason-${nextSequence()}`;
@@ -635,7 +763,8 @@ export class AgentWidgetClient {
             continue;
           }
           const assistant = ensureAssistantMessage();
-          const chunk = payload.text ?? payload.delta ?? payload.content ?? "";
+          // Support various field names: text, delta, content, chunk (Travrse uses 'chunk')
+          const chunk = payload.text ?? payload.delta ?? payload.content ?? payload.chunk ?? "";
           if (chunk) {
             // Accumulate raw content for structured format parsing
             const rawBuffer = rawContentBuffers.get(assistant.id) ?? "";

package/src/components/composer-builder.ts

@@ -0,0 +1,366 @@
+import { createElement } from "../utils/dom";
+import { renderLucideIcon } from "../utils/icons";
+import { AgentWidgetConfig } from "../types";
+
+export interface ComposerElements {
+  footer: HTMLElement;
+  suggestions: HTMLElement;
+  composerForm: HTMLFormElement;
+  textarea: HTMLTextAreaElement;
+  sendButton: HTMLButtonElement;
+  sendButtonWrapper: HTMLElement;
+  micButton: HTMLButtonElement | null;
+  micButtonWrapper: HTMLElement | null;
+  statusText: HTMLElement;
+}
+
+export interface ComposerBuildContext {
+  config?: AgentWidgetConfig;
+  onSubmit?: (text: string) => void;
+  disabled?: boolean;
+}
+
+/**
+ * Helper to get font family CSS value from config preset
+ */
+const getFontFamilyValue = (
+  family: "sans-serif" | "serif" | "mono"
+): string => {
+  switch (family) {
+    case "serif":
+      return 'Georgia, "Times New Roman", Times, serif';
+    case "mono":
+      return '"Courier New", Courier, "Lucida Console", Monaco, monospace';
+    case "sans-serif":
+    default:
+      return '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif';
+  }
+};
+
+/**
+ * Build the composer/footer section of the panel.
+ * Extracted for reuse and plugin override support.
+ */
+export const buildComposer = (context: ComposerBuildContext): ComposerElements => {
+  const { config } = context;
+
+  const footer = createElement(
+    "div",
+    "tvw-border-t-cw-divider tvw-bg-cw-surface tvw-px-6 tvw-py-4"
+  );
+
+  const suggestions = createElement(
+    "div",
+    "tvw-mb-3 tvw-flex tvw-flex-wrap tvw-gap-2"
+  );
+
+  // Determine gap based on voice recognition
+  const voiceRecognitionEnabledForGap =
+    config?.voiceRecognition?.enabled === true;
+  const hasSpeechRecognitionForGap =
+    typeof window !== "undefined" &&
+    (typeof (window as any).webkitSpeechRecognition !== "undefined" ||
+      typeof (window as any).SpeechRecognition !== "undefined");
+  const shouldUseSmallGap =
+    voiceRecognitionEnabledForGap && hasSpeechRecognitionForGap;
+  const gapClass = shouldUseSmallGap ? "tvw-gap-1" : "tvw-gap-3";
+
+  const composerForm = createElement(
+    "form",
+    `tvw-flex tvw-items-end ${gapClass} tvw-rounded-2xl tvw-border tvw-border-gray-200 tvw-bg-cw-input-background tvw-px-4 tvw-py-3`
+  ) as HTMLFormElement;
+  // Prevent form from getting focus styles
+  composerForm.style.outline = "none";
+
+  const textarea = createElement("textarea") as HTMLTextAreaElement;
+  textarea.placeholder = config?.copy?.inputPlaceholder ?? "Type your message…";
+  textarea.className =
+    "tvw-min-h-[48px] tvw-flex-1 tvw-resize-none tvw-border-none tvw-bg-transparent tvw-text-sm tvw-text-cw-primary focus:tvw-outline-none focus:tvw-border-none";
+  textarea.rows = 1;
+
+  // Apply font family and weight from config
+  const fontFamily = config?.theme?.inputFontFamily ?? "sans-serif";
+  const fontWeight = config?.theme?.inputFontWeight ?? "400";
+
+  textarea.style.fontFamily = getFontFamilyValue(fontFamily);
+  textarea.style.fontWeight = fontWeight;
+
+  // Explicitly remove border and outline on focus to prevent browser defaults
+  textarea.style.border = "none";
+  textarea.style.outline = "none";
+  textarea.style.borderWidth = "0";
+  textarea.style.borderStyle = "none";
+  textarea.style.borderColor = "transparent";
+  textarea.addEventListener("focus", () => {
+    textarea.style.border = "none";
+    textarea.style.outline = "none";
+    textarea.style.borderWidth = "0";
+    textarea.style.borderStyle = "none";
+    textarea.style.borderColor = "transparent";
+    textarea.style.boxShadow = "none";
+  });
+  textarea.addEventListener("blur", () => {
+    textarea.style.border = "none";
+    textarea.style.outline = "none";
+  });
+
+  // Send button configuration
+  const sendButtonConfig = config?.sendButton ?? {};
+  const useIcon = sendButtonConfig.useIcon ?? false;
+  const iconText = sendButtonConfig.iconText ?? "↑";
+  const iconName = sendButtonConfig.iconName;
+  const tooltipText = sendButtonConfig.tooltipText ?? "Send message";
+  const showTooltip = sendButtonConfig.showTooltip ?? false;
+  const buttonSize = sendButtonConfig.size ?? "40px";
+  const backgroundColor = sendButtonConfig.backgroundColor;
+  const textColor = sendButtonConfig.textColor;
+
+  // Create wrapper for tooltip positioning
+  const sendButtonWrapper = createElement("div", "tvw-send-button-wrapper");
+
+  const sendButton = createElement(
+    "button",
+    useIcon
+      ? "tvw-rounded-button tvw-flex tvw-items-center tvw-justify-center disabled:tvw-opacity-50 tvw-cursor-pointer"
+      : "tvw-rounded-button tvw-bg-cw-accent tvw-px-4 tvw-py-2 tvw-text-sm tvw-font-semibold disabled:tvw-opacity-50 tvw-cursor-pointer"
+  ) as HTMLButtonElement;
+
+  sendButton.type = "submit";
+
+  if (useIcon) {
+    // Icon mode: circular button
+    sendButton.style.width = buttonSize;
+    sendButton.style.height = buttonSize;
+    sendButton.style.minWidth = buttonSize;
+    sendButton.style.minHeight = buttonSize;
+    sendButton.style.fontSize = "18px";
+    sendButton.style.lineHeight = "1";
+
+    // Clear any existing content
+    sendButton.innerHTML = "";
+
+    // Use Lucide icon if iconName is provided, otherwise fall back to iconText
+    if (iconName) {
+      const iconSize = parseFloat(buttonSize) || 24;
+      const iconColor =
+        textColor && typeof textColor === "string" && textColor.trim()
+          ? textColor.trim()
+          : "currentColor";
+      const iconSvg = renderLucideIcon(iconName, iconSize, iconColor, 2);
+      if (iconSvg) {
+        sendButton.appendChild(iconSvg);
+        sendButton.style.color = iconColor;
+      } else {
+        // Fallback to text if icon fails to render
+        sendButton.textContent = iconText;
+        if (textColor) {
+          sendButton.style.color = textColor;
+        } else {
+          sendButton.classList.add("tvw-text-white");
+        }
+      }
+    } else {
+      sendButton.textContent = iconText;
+      if (textColor) {
+        sendButton.style.color = textColor;
+      } else {
+        sendButton.classList.add("tvw-text-white");
+      }
+    }
+
+    if (backgroundColor) {
+      sendButton.style.backgroundColor = backgroundColor;
+    } else {
+      sendButton.classList.add("tvw-bg-cw-primary");
+    }
+  } else {
+    // Text mode: existing behavior
+    sendButton.textContent = config?.copy?.sendButtonLabel ?? "Send";
+    if (textColor) {
+      sendButton.style.color = textColor;
+    } else {
+      sendButton.classList.add("tvw-text-white");
+    }
+  }
+
+  // Apply existing styling from config
+  if (sendButtonConfig.borderWidth) {
+    sendButton.style.borderWidth = sendButtonConfig.borderWidth;
+    sendButton.style.borderStyle = "solid";
+  }
+  if (sendButtonConfig.borderColor) {
+    sendButton.style.borderColor = sendButtonConfig.borderColor;
+  }
+
+  // Apply padding styling (works in both icon and text mode)
+  if (sendButtonConfig.paddingX) {
+    sendButton.style.paddingLeft = sendButtonConfig.paddingX;
+    sendButton.style.paddingRight = sendButtonConfig.paddingX;
+  } else {
+    sendButton.style.paddingLeft = "";
+    sendButton.style.paddingRight = "";
+  }
+  if (sendButtonConfig.paddingY) {
+    sendButton.style.paddingTop = sendButtonConfig.paddingY;
+    sendButton.style.paddingBottom = sendButtonConfig.paddingY;
+  } else {
+    sendButton.style.paddingTop = "";
+    sendButton.style.paddingBottom = "";
+  }
+
+  // Add tooltip if enabled
+  if (showTooltip && tooltipText) {
+    const tooltip = createElement("div", "tvw-send-button-tooltip");
+    tooltip.textContent = tooltipText;
+    sendButtonWrapper.appendChild(tooltip);
+  }
+
+  sendButtonWrapper.appendChild(sendButton);
+
+  // Voice recognition mic button
+  const voiceRecognitionConfig = config?.voiceRecognition ?? {};
+  const voiceRecognitionEnabled = voiceRecognitionConfig.enabled === true;
+  let micButton: HTMLButtonElement | null = null;
+  let micButtonWrapper: HTMLElement | null = null;
+
+  // Check browser support for speech recognition
+  const hasSpeechRecognition =
+    typeof window !== "undefined" &&
+    (typeof (window as any).webkitSpeechRecognition !== "undefined" ||
+      typeof (window as any).SpeechRecognition !== "undefined");
+
+  if (voiceRecognitionEnabled && hasSpeechRecognition) {
+    micButtonWrapper = createElement("div", "tvw-send-button-wrapper");
+    micButton = createElement(
+      "button",
+      "tvw-rounded-button tvw-flex tvw-items-center tvw-justify-center disabled:tvw-opacity-50 tvw-cursor-pointer"
+    ) as HTMLButtonElement;
+
+    micButton.type = "button";
+    micButton.setAttribute("aria-label", "Start voice recognition");
+
+    const micIconName = voiceRecognitionConfig.iconName ?? "mic";
+    const micIconSize = voiceRecognitionConfig.iconSize ?? buttonSize;
+    const micIconSizeNum = parseFloat(micIconSize) || 24;
+
+    // Use dedicated colors from voice recognition config, fallback to send button colors
+    const micBackgroundColor =
+      voiceRecognitionConfig.backgroundColor ?? backgroundColor;
+    const micIconColor = voiceRecognitionConfig.iconColor ?? textColor;
+
+    micButton.style.width = micIconSize;
+    micButton.style.height = micIconSize;
+    micButton.style.minWidth = micIconSize;
+    micButton.style.minHeight = micIconSize;
+    micButton.style.fontSize = "18px";
+    micButton.style.lineHeight = "1";
+
+    // Use Lucide mic icon with configured color (stroke width 1.5 for minimalist outline style)
+    const iconColorValue = micIconColor || "currentColor";
+    const micIconSvg = renderLucideIcon(
+      micIconName,
+      micIconSizeNum,
+      iconColorValue,
+      1.5
+    );
+    if (micIconSvg) {
+      micButton.appendChild(micIconSvg);
+      micButton.style.color = iconColorValue;
+    } else {
+      // Fallback to text if icon fails
+      micButton.textContent = "🎤";
+      micButton.style.color = iconColorValue;
+    }
+
+    // Apply background color
+    if (micBackgroundColor) {
+      micButton.style.backgroundColor = micBackgroundColor;
+    } else {
+      micButton.classList.add("tvw-bg-cw-primary");
+    }
+
+    // Apply icon/text color
+    if (micIconColor) {
+      micButton.style.color = micIconColor;
+    } else if (!micIconColor && !textColor) {
+      micButton.classList.add("tvw-text-white");
+    }
+
+    // Apply border styling
+    if (voiceRecognitionConfig.borderWidth) {
+      micButton.style.borderWidth = voiceRecognitionConfig.borderWidth;
+      micButton.style.borderStyle = "solid";
+    }
+    if (voiceRecognitionConfig.borderColor) {
+      micButton.style.borderColor = voiceRecognitionConfig.borderColor;
+    }
+
+    // Apply padding styling
+    if (voiceRecognitionConfig.paddingX) {
+      micButton.style.paddingLeft = voiceRecognitionConfig.paddingX;
+      micButton.style.paddingRight = voiceRecognitionConfig.paddingX;
+    }
+    if (voiceRecognitionConfig.paddingY) {
+      micButton.style.paddingTop = voiceRecognitionConfig.paddingY;
+      micButton.style.paddingBottom = voiceRecognitionConfig.paddingY;
+    }
+
+    micButtonWrapper.appendChild(micButton);
+
+    // Add tooltip if enabled
+    const micTooltipText =
+      voiceRecognitionConfig.tooltipText ?? "Start voice recognition";
+    const showMicTooltip = voiceRecognitionConfig.showTooltip ?? false;
+    if (showMicTooltip && micTooltipText) {
+      const tooltip = createElement("div", "tvw-send-button-tooltip");
+      tooltip.textContent = micTooltipText;
+      micButtonWrapper.appendChild(tooltip);
+    }
+  }
+
+  // Focus textarea when composer form container is clicked
+  composerForm.addEventListener("click", (e) => {
+    // Don't focus if clicking on the send button, mic button, or their wrappers
+    if (
+      e.target !== sendButton &&
+      e.target !== sendButtonWrapper &&
+      e.target !== micButton &&
+      e.target !== micButtonWrapper
+    ) {
+      textarea.focus();
+    }
+  });
+
+  // Append elements: textarea, mic button (if exists), send button
+  composerForm.append(textarea);
+  if (micButtonWrapper) {
+    composerForm.append(micButtonWrapper);
+  }
+  composerForm.append(sendButtonWrapper);
+
+  const statusText = createElement(
+    "div",
+    "tvw-mt-2 tvw-text-right tvw-text-xs tvw-text-cw-muted"
+  );
+
+  // Apply status indicator config
+  const statusConfig = config?.statusIndicator ?? {};
+  const isVisible = statusConfig.visible ?? true;
+  statusText.style.display = isVisible ? "" : "none";
+  statusText.textContent = statusConfig.idleText ?? "Online";
+
+  footer.append(suggestions, composerForm, statusText);
+
+  return {
+    footer,
+    suggestions,
+    composerForm,
+    textarea,
+    sendButton,
+    sendButtonWrapper,
+    micButton,
+    micButtonWrapper,
+    statusText
+  };
+};
+

package/src/components/forms.ts

@@ -167,3 +167,4 @@ export const enhanceWithForms = (
 
 
 
+