vanilla-agent 0.2.0 → 1.0.0

package/src/components/suggestions.ts

@@ -1,16 +1,16 @@
 import { createElement } from "../utils/dom";
-import { ChatWidgetSession } from "../session";
-import { ChatWidgetMessage } from "../types";
+import { AgentWidgetSession } from "../session";
+import { AgentWidgetMessage } from "../types";
 
 export interface SuggestionButtons {
   buttons: HTMLButtonElement[];
-  render: (chips: string[] | undefined, session: ChatWidgetSession, textarea: HTMLTextAreaElement, messages?: ChatWidgetMessage[]) => void;
+  render: (chips: string[] | undefined, session: AgentWidgetSession, textarea: HTMLTextAreaElement, messages?: AgentWidgetMessage[]) => void;
 }
 
 export const createSuggestions = (container: HTMLElement): SuggestionButtons => {
   const suggestionButtons: HTMLButtonElement[] = [];
 
-  const render = (chips: string[] | undefined, session: ChatWidgetSession, textarea: HTMLTextAreaElement, messages?: ChatWidgetMessage[]) => {
+  const render = (chips: string[] | undefined, session: AgentWidgetSession, textarea: HTMLTextAreaElement, messages?: AgentWidgetMessage[]) => {
     container.innerHTML = "";
     suggestionButtons.length = 0;
     if (!chips || !chips.length) return;

package/src/components/tool-bubble.ts

@@ -1,11 +1,11 @@
 import { createElement } from "../utils/dom";
-import { ChatWidgetMessage } from "../types";
+import { AgentWidgetMessage } from "../types";
 import { formatUnknownValue, describeToolTitle } from "../utils/formatting";
 
 // Expansion state per widget instance
 const toolExpansionState = new Set<string>();
 
-export const createToolBubble = (message: ChatWidgetMessage): HTMLElement => {
+export const createToolBubble = (message: AgentWidgetMessage): HTMLElement => {
   const tool = message.toolCall;
   const bubble = createElement(
     "div",

package/src/defaults.ts

@@ -0,0 +1,180 @@
+import type { AgentWidgetConfig } from "./types";
+
+/**
+ * Default widget configuration
+ * Single source of truth for all default values
+ */
+export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
+  apiUrl: "http://localhost:43111/api/chat/dispatch",
+  theme: {
+    primary: "#111827",
+    accent: "#1d4ed8",
+    surface: "#ffffff",
+    muted: "#6b7280",
+    container: "#f8fafc",
+    border: "#f1f5f9",
+    divider: "#f1f5f9",
+    messageBorder: "#f1f5f9",
+    inputBackground: "#ffffff",
+    callToAction: "#000000",
+    callToActionBackground: "#ffffff",
+    sendButtonBackgroundColor: "#111827",
+    sendButtonTextColor: "#ffffff",
+    sendButtonBorderColor: "#60a5fa",
+    closeButtonColor: "#6b7280",
+    closeButtonBackgroundColor: "transparent",
+    closeButtonBorderColor: "",
+    clearChatIconColor: "#6b7280",
+    clearChatBackgroundColor: "transparent",
+    clearChatBorderColor: "transparent",
+    micIconColor: "#111827",
+    micBackgroundColor: "transparent",
+    micBorderColor: "transparent",
+    recordingIconColor: "#ffffff",
+    recordingBackgroundColor: "#ef4444",
+    recordingBorderColor: "transparent",
+    inputFontFamily: "sans-serif",
+    inputFontWeight: "400",
+    radiusSm: "0.75rem",
+    radiusMd: "1rem",
+    radiusLg: "1.5rem",
+    launcherRadius: "9999px",
+    buttonRadius: "9999px",
+  },
+  launcher: {
+    enabled: true,
+    title: "Chat Assistant",
+    subtitle: "Here to help you get answers fast",
+    agentIconText: "💬",
+    position: "bottom-right",
+    width: "min(400px, calc(100vw - 24px))",
+    autoExpand: false,
+    callToActionIconHidden: false,
+    agentIconSize: "40px",
+    headerIconSize: "40px",
+    closeButtonSize: "32px",
+    callToActionIconName: "arrow-up-right",
+    callToActionIconText: "",
+    callToActionIconSize: "32px",
+    callToActionIconPadding: "5px",
+    callToActionIconColor: "#000000",
+    callToActionIconBackgroundColor: "#ffffff",
+    closeButtonColor: "#6b7280",
+    closeButtonBackgroundColor: "transparent",
+    clearChat: {
+      iconColor: "#6b7280",
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      enabled: true,
+      iconName: "refresh-cw",
+      size: "29px",
+      showTooltip: true,
+      tooltipText: "Clear chat",
+      paddingX: "0px",
+      paddingY: "0px",
+    },
+    headerIconHidden: false,
+  },
+  copy: {
+    welcomeTitle: "Hello 👋",
+    welcomeSubtitle: "Ask anything about your account or products.",
+    inputPlaceholder: "How can I help...",
+    sendButtonLabel: "Send",
+  },
+  sendButton: {
+    borderWidth: "0px",
+    paddingX: "12px",
+    paddingY: "10px",
+    backgroundColor: "#111827",
+    textColor: "#ffffff",
+    borderColor: "#60a5fa",
+    useIcon: true,
+    iconText: "↑",
+    size: "40px",
+    showTooltip: true,
+    tooltipText: "Send message",
+    iconName: "send",
+  },
+  statusIndicator: {
+    visible: true,
+    idleText: "Online",
+    connectingText: "Connecting…",
+    connectedText: "Streaming…",
+    errorText: "Offline",
+  },
+  voiceRecognition: {
+    enabled: true,
+    pauseDuration: 2000,
+    iconName: "mic",
+    iconSize: "39px",
+    borderWidth: "0px",
+    paddingX: "9px",
+    paddingY: "14px",
+    iconColor: "#111827",
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    recordingIconColor: "#ffffff",
+    recordingBackgroundColor: "#ef4444",
+    recordingBorderColor: "transparent",
+    showTooltip: true,
+    tooltipText: "Start voice recognition",
+  },
+  features: {
+    showReasoning: true,
+    showToolCalls: true,
+  },
+  suggestionChips: [
+    "What can you help me with?",
+    "Tell me about your features",
+    "How does this work?",
+  ],
+  debug: false,
+};
+
+/**
+ * Helper to deep merge user config with defaults
+ * This ensures all default values are present while allowing selective overrides
+ */
+export function mergeWithDefaults(
+  config?: Partial<AgentWidgetConfig>
+): Partial<AgentWidgetConfig> {
+  if (!config) return DEFAULT_WIDGET_CONFIG;
+
+  return {
+    ...DEFAULT_WIDGET_CONFIG,
+    ...config,
+    theme: {
+      ...DEFAULT_WIDGET_CONFIG.theme,
+      ...config.theme,
+    },
+    launcher: {
+      ...DEFAULT_WIDGET_CONFIG.launcher,
+      ...config.launcher,
+      clearChat: {
+        ...DEFAULT_WIDGET_CONFIG.launcher?.clearChat,
+        ...config.launcher?.clearChat,
+      },
+    },
+    copy: {
+      ...DEFAULT_WIDGET_CONFIG.copy,
+      ...config.copy,
+    },
+    sendButton: {
+      ...DEFAULT_WIDGET_CONFIG.sendButton,
+      ...config.sendButton,
+    },
+    statusIndicator: {
+      ...DEFAULT_WIDGET_CONFIG.statusIndicator,
+      ...config.statusIndicator,
+    },
+    voiceRecognition: {
+      ...DEFAULT_WIDGET_CONFIG.voiceRecognition,
+      ...config.voiceRecognition,
+    },
+    features: {
+      ...DEFAULT_WIDGET_CONFIG.features,
+      ...config.features,
+    },
+    suggestionChips: config.suggestionChips ?? DEFAULT_WIDGET_CONFIG.suggestionChips,
+  };
+}

package/src/index.ts

@@ -1,37 +1,40 @@
 import {
-  initChatWidget as initChatWidgetFn,
-  type ChatWidgetInitHandle
+  initAgentWidget as initAgentWidgetFn,
+  type AgentWidgetInitHandle
 } from "./runtime/init";
 
 export type {
-  ChatWidgetConfig,
-  ChatWidgetTheme,
-  ChatWidgetFeatureFlags,
-  ChatWidgetInitOptions,
-  ChatWidgetMessage,
-  ChatWidgetLauncherConfig,
-  ChatWidgetEvent
+  AgentWidgetConfig,
+  AgentWidgetTheme,
+  AgentWidgetFeatureFlags,
+  AgentWidgetInitOptions,
+  AgentWidgetMessage,
+  AgentWidgetLauncherConfig,
+  AgentWidgetEvent
 } from "./types";
 
-export { initChatWidgetFn as initChatWidget };
+export { initAgentWidgetFn as initAgentWidget };
 export {
-  createChatExperience,
-  type ChatWidgetController
+  createAgentExperience,
+  type AgentWidgetController
 } from "./ui";
 export {
-  ChatWidgetSession,
-  type ChatWidgetSessionStatus
+  AgentWidgetSession,
+  type AgentWidgetSessionStatus
 } from "./session";
-export { ChatWidgetClient } from "./client";
+export { AgentWidgetClient } from "./client";
 export {
   markdownPostprocessor,
   escapeHtml,
   directivePostprocessor
 } from "./postprocessors";
-export type { ChatWidgetInitHandle };
+export type { AgentWidgetInitHandle };
 
 // Plugin system exports
-export type { ChatWidgetPlugin } from "./plugins/types";
+export type { AgentWidgetPlugin } from "./plugins/types";
 export { pluginRegistry } from "./plugins/registry";
 
-export default initChatWidgetFn;
+// Default configuration exports
+export { DEFAULT_WIDGET_CONFIG, mergeWithDefaults } from "./defaults";
+
+export default initAgentWidgetFn;

package/src/install.ts

@@ -17,7 +17,7 @@ interface SiteAgentInstallConfig {
 declare global {
   interface Window {
     siteAgentConfig?: SiteAgentInstallConfig;
-    ChatWidget?: any;
+    AgentWidget?: any;
   }
 }
 
@@ -67,7 +67,7 @@ declare global {
 
   // Check if JS is already loaded
   const isJsLoaded = () => {
-    return !!(window as any).ChatWidget;
+    return !!(window as any).AgentWidget;
   };
 
   // Load CSS
@@ -107,8 +107,8 @@ declare global {
 
   // Initialize widget
   const initWidget = () => {
-    if (!window.ChatWidget || !window.ChatWidget.initChatWidget) {
-      console.warn("ChatWidget not available. Make sure the script loaded successfully.");
+    if (!window.AgentWidget || !window.AgentWidget.initAgentWidget) {
+      console.warn("AgentWidget not available. Make sure the script loaded successfully.");
       return;
     }
 
@@ -125,12 +125,12 @@ declare global {
     }
 
     try {
-      window.ChatWidget.initChatWidget({
+      window.AgentWidget.initAgentWidget({
         target,
         config: widgetConfig
       });
     } catch (error) {
-      console.error("Failed to initialize ChatWidget:", error);
+      console.error("Failed to initialize AgentWidget:", error);
     }
   };
 
@@ -141,11 +141,11 @@ declare global {
       await loadJS();
       
       if (autoInit && (config.config || (config as any).apiUrl)) {
-        // Wait a tick to ensure ChatWidget is fully initialized
+        // Wait a tick to ensure AgentWidget is fully initialized
         setTimeout(initWidget, 0);
       }
     } catch (error) {
-      console.error("Failed to install ChatWidget:", error);
+      console.error("Failed to install AgentWidget:", error);
     }
   };
 

package/src/plugins/registry.ts

@@ -1,12 +1,12 @@
-import { ChatWidgetPlugin } from "./types";
+import { AgentWidgetPlugin } from "./types";
 
 class PluginRegistry {
-  private plugins: Map<string, ChatWidgetPlugin> = new Map();
+  private plugins: Map<string, AgentWidgetPlugin> = new Map();
 
   /**
    * Register a plugin
    */
-  register(plugin: ChatWidgetPlugin): void {
+  register(plugin: AgentWidgetPlugin): void {
     if (this.plugins.has(plugin.id)) {
       console.warn(`Plugin "${plugin.id}" is already registered. Overwriting.`);
     }
@@ -29,7 +29,7 @@ class PluginRegistry {
   /**
    * Get all plugins sorted by priority
    */
-  getAll(): ChatWidgetPlugin[] {
+  getAll(): AgentWidgetPlugin[] {
     return Array.from(this.plugins.values()).sort(
       (a, b) => (b.priority ?? 0) - (a.priority ?? 0)
     );
@@ -39,7 +39,7 @@ class PluginRegistry {
    * Get plugins for a specific instance (from config)
    * Merges instance plugins with globally registered plugins
    */
-  getForInstance(instancePlugins?: ChatWidgetPlugin[]): ChatWidgetPlugin[] {
+  getForInstance(instancePlugins?: AgentWidgetPlugin[]): AgentWidgetPlugin[] {
     const allPlugins = this.getAll();
 
     if (!instancePlugins || instancePlugins.length === 0) {
@@ -70,3 +70,5 @@ export const pluginRegistry = new PluginRegistry();
 
 
 
+
+

package/src/plugins/types.ts

@@ -1,9 +1,9 @@
-import { ChatWidgetMessage, ChatWidgetConfig } from "../types";
+import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
 
 /**
  * Plugin interface for customizing widget components
  */
-export interface ChatWidgetPlugin {
+export interface AgentWidgetPlugin {
   /**
    * Unique identifier for the plugin
    */
@@ -19,9 +19,9 @@ export interface ChatWidgetPlugin {
    * Return null to use default renderer
    */
   renderMessage?: (context: {
-    message: ChatWidgetMessage;
+    message: AgentWidgetMessage;
     defaultRenderer: () => HTMLElement;
-    config: ChatWidgetConfig;
+    config: AgentWidgetConfig;
   }) => HTMLElement | null;
 
   /**
@@ -29,7 +29,7 @@ export interface ChatWidgetPlugin {
    * Return null to use default renderer
    */
   renderLauncher?: (context: {
-    config: ChatWidgetConfig;
+    config: AgentWidgetConfig;
     defaultRenderer: () => HTMLElement;
     onToggle: () => void;
   }) => HTMLElement | null;
@@ -39,7 +39,7 @@ export interface ChatWidgetPlugin {
    * Return null to use default renderer
    */
   renderHeader?: (context: {
-    config: ChatWidgetConfig;
+    config: AgentWidgetConfig;
     defaultRenderer: () => HTMLElement;
     onClose?: () => void;
   }) => HTMLElement | null;
@@ -49,7 +49,7 @@ export interface ChatWidgetPlugin {
    * Return null to use default renderer
    */
   renderComposer?: (context: {
-    config: ChatWidgetConfig;
+    config: AgentWidgetConfig;
     defaultRenderer: () => HTMLElement;
     onSubmit: (text: string) => void;
     disabled: boolean;
@@ -60,9 +60,9 @@ export interface ChatWidgetPlugin {
    * Return null to use default renderer
    */
   renderReasoning?: (context: {
-    message: ChatWidgetMessage;
+    message: AgentWidgetMessage;
     defaultRenderer: () => HTMLElement;
-    config: ChatWidgetConfig;
+    config: AgentWidgetConfig;
   }) => HTMLElement | null;
 
   /**
@@ -70,9 +70,9 @@ export interface ChatWidgetPlugin {
    * Return null to use default renderer
    */
   renderToolCall?: (context: {
-    message: ChatWidgetMessage;
+    message: AgentWidgetMessage;
     defaultRenderer: () => HTMLElement;
-    config: ChatWidgetConfig;
+    config: AgentWidgetConfig;
   }) => HTMLElement | null;
 
   /**
@@ -88,3 +88,5 @@ export interface ChatWidgetPlugin {
 
 
 
+
+

package/src/runtime/init.ts

@@ -1,5 +1,5 @@
-import { createChatExperience, ChatWidgetController } from "../ui";
-import { ChatWidgetConfig, ChatWidgetInitOptions } from "../types";
+import { createAgentExperience, AgentWidgetController } from "../ui";
+import { AgentWidgetConfig, AgentWidgetInitOptions } from "../types";
 
 const ensureTarget = (target: string | HTMLElement): HTMLElement => {
   if (typeof window === "undefined" || typeof document === "undefined") {
@@ -84,11 +84,11 @@ const mountStyles = (root: ShadowRoot | HTMLElement) => {
   }
 };
 
-export type ChatWidgetInitHandle = ChatWidgetController & { host: HTMLElement };
+export type AgentWidgetInitHandle = AgentWidgetController & { host: HTMLElement };
 
-export const initChatWidget = (
-  options: ChatWidgetInitOptions
-): ChatWidgetInitHandle => {
+export const initAgentWidget = (
+  options: AgentWidgetInitOptions
+): AgentWidgetInitHandle => {
   const target = ensureTarget(options.target);
   const host = document.createElement("div");
   host.className = "vanilla-agent-host";
@@ -113,12 +113,12 @@ export const initChatWidget = (
     mountStyles(host);
   }
 
-  let controller = createChatExperience(mount, options.config);
+  let controller = createAgentExperience(mount, options.config);
   options.onReady?.();
 
   return {
     host,
-    update(nextConfig: ChatWidgetConfig) {
+    update(nextConfig: AgentWidgetConfig) {
       controller.update(nextConfig);
     },
     open() {
@@ -130,6 +130,9 @@ export const initChatWidget = (
     toggle() {
       controller.toggle();
     },
+    clearChat() {
+      controller.clearChat();
+    },
     destroy() {
       controller.destroy();
       host.remove();

package/src/session.ts

@@ -1,33 +1,33 @@
-import { ChatWidgetClient } from "./client";
+import { AgentWidgetClient } from "./client";
 import {
-  ChatWidgetConfig,
-  ChatWidgetEvent,
-  ChatWidgetMessage
+  AgentWidgetConfig,
+  AgentWidgetEvent,
+  AgentWidgetMessage
 } from "./types";
 
-export type ChatWidgetSessionStatus =
+export type AgentWidgetSessionStatus =
   | "idle"
   | "connecting"
   | "connected"
   | "error";
 
 type SessionCallbacks = {
-  onMessagesChanged: (messages: ChatWidgetMessage[]) => void;
-  onStatusChanged: (status: ChatWidgetSessionStatus) => void;
+  onMessagesChanged: (messages: AgentWidgetMessage[]) => void;
+  onStatusChanged: (status: AgentWidgetSessionStatus) => void;
   onStreamingChanged: (streaming: boolean) => void;
   onError?: (error: Error) => void;
 };
 
-export class ChatWidgetSession {
-  private client: ChatWidgetClient;
-  private messages: ChatWidgetMessage[];
-  private status: ChatWidgetSessionStatus = "idle";
+export class AgentWidgetSession {
+  private client: AgentWidgetClient;
+  private messages: AgentWidgetMessage[];
+  private status: AgentWidgetSessionStatus = "idle";
   private streaming = false;
   private abortController: AbortController | null = null;
   private sequenceCounter = Date.now();
 
   constructor(
-    private config: ChatWidgetConfig = {},
+    private config: AgentWidgetConfig = {},
     private callbacks: SessionCallbacks
   ) {
     this.messages = [...(config.initialMessages ?? [])].map((message) => ({
@@ -35,7 +35,7 @@ export class ChatWidgetSession {
       sequence: message.sequence ?? this.nextSequence()
     }));
     this.messages = this.sortMessages(this.messages);
-    this.client = new ChatWidgetClient(config);
+    this.client = new AgentWidgetClient(config);
 
     if (this.messages.length) {
       this.callbacks.onMessagesChanged([...this.messages]);
@@ -43,9 +43,9 @@ export class ChatWidgetSession {
     this.callbacks.onStatusChanged(this.status);
   }
 
-  public updateConfig(next: ChatWidgetConfig) {
+  public updateConfig(next: AgentWidgetConfig) {
     this.config = { ...this.config, ...next };
-    this.client = new ChatWidgetClient(this.config);
+    this.client = new AgentWidgetClient(this.config);
   }
 
   public getMessages() {
@@ -66,7 +66,7 @@ export class ChatWidgetSession {
 
     this.abortController?.abort();
 
-    const userMessage: ChatWidgetMessage = {
+    const userMessage: AgentWidgetMessage = {
       id: `user-${Date.now()}`,
       role: "user",
       content: input,
@@ -91,7 +91,7 @@ export class ChatWidgetSession {
         this.handleEvent
       );
     } catch (error) {
-      const fallback: ChatWidgetMessage = {
+      const fallback: AgentWidgetMessage = {
         id: `assistant-${Date.now()}`,
         role: "assistant",
         createdAt: new Date().toISOString(),
@@ -119,7 +119,16 @@ export class ChatWidgetSession {
     this.setStatus("idle");
   }
 
-  private handleEvent = (event: ChatWidgetEvent) => {
+  public clearMessages() {
+    this.abortController?.abort();
+    this.abortController = null;
+    this.messages = [];
+    this.setStreaming(false);
+    this.setStatus("idle");
+    this.callbacks.onMessagesChanged([...this.messages]);
+  }
+
+  private handleEvent = (event: AgentWidgetEvent) => {
     if (event.type === "message") {
       this.upsertMessage(event.message);
     } else if (event.type === "status") {
@@ -138,7 +147,7 @@ export class ChatWidgetSession {
     }
   };
 
-  private setStatus(status: ChatWidgetSessionStatus) {
+  private setStatus(status: AgentWidgetSessionStatus) {
     if (this.status === status) return;
     this.status = status;
     this.callbacks.onStatusChanged(status);
@@ -150,13 +159,13 @@ export class ChatWidgetSession {
     this.callbacks.onStreamingChanged(streaming);
   }
 
-  private appendMessage(message: ChatWidgetMessage) {
+  private appendMessage(message: AgentWidgetMessage) {
     const withSequence = this.ensureSequence(message);
     this.messages = this.sortMessages([...this.messages, withSequence]);
     this.callbacks.onMessagesChanged([...this.messages]);
   }
 
-  private upsertMessage(message: ChatWidgetMessage) {
+  private upsertMessage(message: AgentWidgetMessage) {
     const withSequence = this.ensureSequence(message);
     const index = this.messages.findIndex((m) => m.id === withSequence.id);
     if (index === -1) {
@@ -171,7 +180,7 @@ export class ChatWidgetSession {
     this.callbacks.onMessagesChanged([...this.messages]);
   }
 
-  private ensureSequence(message: ChatWidgetMessage): ChatWidgetMessage {
+  private ensureSequence(message: AgentWidgetMessage): AgentWidgetMessage {
     if (message.sequence !== undefined) {
       return { ...message };
     }
@@ -185,7 +194,7 @@ export class ChatWidgetSession {
     return this.sequenceCounter++;
   }
 
-  private sortMessages(messages: ChatWidgetMessage[]) {
+  private sortMessages(messages: AgentWidgetMessage[]) {
     return [...messages].sort((a, b) => {
       // Sort by createdAt timestamp first (chronological order)
       const timeA = new Date(a.createdAt).getTime();

package/src/styles/widget.css

@@ -572,6 +572,10 @@
   width: 360px;
 }
 
+.tvw-w-\[400px\] {
+  width: 400px;
+}
+
 .tvw-h-\[640px\] {
   height: 640px;
 }
@@ -687,6 +691,35 @@ form:focus-within textarea {
   opacity: 1;
 }
 
+/* Clear chat button tooltip */
+.tvw-clear-chat-button-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tvw-clear-chat-tooltip {
+  background-color: #111827;
+  color: #ffffff;
+  padding: 6px 12px;
+  border-radius: 0.5rem;
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10000;
+}
+
+.tvw-clear-chat-tooltip-arrow {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 4px solid transparent;
+  border-top-color: #111827;
+}
+
 /* Typing indicator animation */
 @keyframes typing {
   0%, 100% {