vanilla-agent 0.2.0 → 1.1.0

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% {
@@ -750,3 +783,43 @@ form:focus-within textarea {
 .tvw-voice-recording svg {
   animation: voice-recording-pulse 1.5s ease-in-out infinite;
 }
+
+/* Markdown content overflow handling */
+#vanilla-agent-root pre {
+  overflow-x: auto;
+  max-width: 100%;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  background-color: #f3f4f6;
+  padding: 0.75rem;
+  border-radius: 0.375rem;
+  margin: 0.5rem 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border: 1px solid #e5e7eb;
+}
+
+#vanilla-agent-root code {
+  word-break: break-word;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 0.875em;
+}
+
+#vanilla-agent-root pre code {
+  font-size: inherit;
+  background-color: transparent;
+  padding: 0;
+  border-radius: 0;
+}
+
+#vanilla-agent-root img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0.5rem 0;
+  border-radius: 0.375rem;
+}

package/src/types.ts

@@ -1,11 +1,11 @@
-import type { ChatWidgetPlugin } from "./plugins/types";
+import type { AgentWidgetPlugin } from "./plugins/types";
 
-export type ChatWidgetFeatureFlags = {
+export type AgentWidgetFeatureFlags = {
   showReasoning?: boolean;
   showToolCalls?: boolean;
 };
 
-export type ChatWidgetTheme = {
+export type AgentWidgetTheme = {
   primary?: string;
   secondary?: string;
   surface?: string;
@@ -24,6 +24,9 @@ export type ChatWidgetTheme = {
   closeButtonColor?: string;
   closeButtonBackgroundColor?: string;
   closeButtonBorderColor?: string;
+  clearChatIconColor?: string;
+  clearChatBackgroundColor?: string;
+  clearChatBorderColor?: string;
   micIconColor?: string;
   micBackgroundColor?: string;
   micBorderColor?: string;
@@ -39,7 +42,7 @@ export type ChatWidgetTheme = {
   buttonRadius?: string;
 };
 
-export type ChatWidgetLauncherConfig = {
+export type AgentWidgetLauncherConfig = {
   enabled?: boolean;
   title?: string;
   subtitle?: string;
@@ -68,10 +71,17 @@ export type ChatWidgetLauncherConfig = {
   closeButtonBorderWidth?: string;
   closeButtonBorderColor?: string;
   closeButtonBorderRadius?: string;
+  closeButtonPaddingX?: string;
+  closeButtonPaddingY?: string;
   closeButtonPlacement?: "inline" | "top-right";
+  closeButtonIconName?: string;
+  closeButtonIconText?: string;
+  closeButtonTooltipText?: string;
+  closeButtonShowTooltip?: boolean;
+  clearChat?: AgentWidgetClearChatConfig;
 };
 
-export type ChatWidgetSendButtonConfig = {
+export type AgentWidgetSendButtonConfig = {
   borderWidth?: string;
   borderColor?: string;
   paddingX?: string;
@@ -86,7 +96,22 @@ export type ChatWidgetSendButtonConfig = {
   size?: string;
 };
 
-export type ChatWidgetStatusIndicatorConfig = {
+export type AgentWidgetClearChatConfig = {
+  enabled?: boolean;
+  iconName?: string;
+  iconColor?: string;
+  backgroundColor?: string;
+  borderWidth?: string;
+  borderColor?: string;
+  borderRadius?: string;
+  size?: string;
+  paddingX?: string;
+  paddingY?: string;
+  tooltipText?: string;
+  showTooltip?: boolean;
+};
+
+export type AgentWidgetStatusIndicatorConfig = {
   visible?: boolean;
   idleText?: string;
   connectingText?: string;
@@ -94,7 +119,7 @@ export type ChatWidgetStatusIndicatorConfig = {
   errorText?: string;
 };
 
-export type ChatWidgetVoiceRecognitionConfig = {
+export type AgentWidgetVoiceRecognitionConfig = {
   enabled?: boolean;
   pauseDuration?: number;
   iconName?: string;
@@ -113,7 +138,7 @@ export type ChatWidgetVoiceRecognitionConfig = {
   showRecordingIndicator?: boolean;
 };
 
-export type ChatWidgetConfig = {
+export type AgentWidgetConfig = {
   apiUrl?: string;
   flowId?: string;
   headers?: Record<string, string>;
@@ -123,28 +148,28 @@ export type ChatWidgetConfig = {
     inputPlaceholder?: string;
     sendButtonLabel?: string;
   };
-  theme?: ChatWidgetTheme;
-  features?: ChatWidgetFeatureFlags;
-  launcher?: ChatWidgetLauncherConfig;
-  initialMessages?: ChatWidgetMessage[];
+  theme?: AgentWidgetTheme;
+  features?: AgentWidgetFeatureFlags;
+  launcher?: AgentWidgetLauncherConfig;
+  initialMessages?: AgentWidgetMessage[];
   suggestionChips?: string[];
   debug?: boolean;
   formEndpoint?: string;
   launcherWidth?: string;
-  sendButton?: ChatWidgetSendButtonConfig;
-  statusIndicator?: ChatWidgetStatusIndicatorConfig;
-  voiceRecognition?: ChatWidgetVoiceRecognitionConfig;
+  sendButton?: AgentWidgetSendButtonConfig;
+  statusIndicator?: AgentWidgetStatusIndicatorConfig;
+  voiceRecognition?: AgentWidgetVoiceRecognitionConfig;
   postprocessMessage?: (context: {
     text: string;
-    message: ChatWidgetMessage;
+    message: AgentWidgetMessage;
     streaming: boolean;
   }) => string;
-  plugins?: ChatWidgetPlugin[];
+  plugins?: AgentWidgetPlugin[];
 };
 
-export type ChatWidgetMessageRole = "user" | "assistant" | "system";
+export type AgentWidgetMessageRole = "user" | "assistant" | "system";
 
-export type ChatWidgetReasoning = {
+export type AgentWidgetReasoning = {
   id: string;
   status: "pending" | "streaming" | "complete";
   chunks: string[];
@@ -153,7 +178,7 @@ export type ChatWidgetReasoning = {
   durationMs?: number;
 };
 
-export type ChatWidgetToolCall = {
+export type AgentWidgetToolCall = {
   id: string;
   name?: string;
   status: "pending" | "running" | "complete";
@@ -166,29 +191,29 @@ export type ChatWidgetToolCall = {
   durationMs?: number;
 };
 
-export type ChatWidgetMessageVariant = "assistant" | "reasoning" | "tool";
+export type AgentWidgetMessageVariant = "assistant" | "reasoning" | "tool";
 
-export type ChatWidgetMessage = {
+export type AgentWidgetMessage = {
   id: string;
-  role: ChatWidgetMessageRole;
+  role: AgentWidgetMessageRole;
   content: string;
   createdAt: string;
   streaming?: boolean;
-  variant?: ChatWidgetMessageVariant;
+  variant?: AgentWidgetMessageVariant;
   sequence?: number;
-  reasoning?: ChatWidgetReasoning;
-  toolCall?: ChatWidgetToolCall;
-  tools?: ChatWidgetToolCall[];
+  reasoning?: AgentWidgetReasoning;
+  toolCall?: AgentWidgetToolCall;
+  tools?: AgentWidgetToolCall[];
 };
 
-export type ChatWidgetEvent =
-  | { type: "message"; message: ChatWidgetMessage }
+export type AgentWidgetEvent =
+  | { type: "message"; message: AgentWidgetMessage }
   | { type: "status"; status: "connecting" | "connected" | "error" | "idle" }
   | { type: "error"; error: Error };
 
-export type ChatWidgetInitOptions = {
+export type AgentWidgetInitOptions = {
   target: string | HTMLElement;
-  config?: ChatWidgetConfig;
+  config?: AgentWidgetConfig;
   useShadowDom?: boolean;
   onReady?: () => void;
 };