vanilla-agent 1.20.0 → 1.22.0

package/src/client.ts

@@ -9,7 +9,10 @@ import {
   AgentWidgetCustomFetch,
   AgentWidgetSSEEventParser,
   AgentWidgetHeadersFunction,
-  AgentWidgetSSEEventResult
+  AgentWidgetSSEEventResult,
+  ClientSession,
+  ClientInitResponse,
+  ClientChatRequest
 } from "./types";
 import { 
   extractTextFromJson, 
@@ -27,6 +30,7 @@ type DispatchOptions = {
 type SSEHandler = (event: AgentWidgetEvent) => void;
 
 const DEFAULT_ENDPOINT = "https://api.travrse.ai/v1/dispatch";
+const DEFAULT_CLIENT_API_BASE = "https://api.travrse.ai";
 
 /**
  * Maps parserType string to the corresponding parser factory function
@@ -55,6 +59,10 @@ export class AgentWidgetClient {
   private readonly customFetch?: AgentWidgetCustomFetch;
   private readonly parseSSEEvent?: AgentWidgetSSEEventParser;
   private readonly getHeaders?: AgentWidgetHeadersFunction;
+  
+  // Client token mode properties
+  private clientSession: ClientSession | null = null;
+  private sessionInitPromise: Promise<ClientSession> | null = null;
 
   constructor(private config: AgentWidgetConfig = {}) {
     this.apiUrl = config.apiUrl ?? DEFAULT_ENDPOINT;
@@ -72,7 +80,213 @@ export class AgentWidgetClient {
     this.getHeaders = config.getHeaders;
   }
 
+  /**
+   * Check if running in client token mode
+   */
+  public isClientTokenMode(): boolean {
+    return !!this.config.clientToken;
+  }
+
+  /**
+   * Get the appropriate API URL based on mode
+   */
+  private getClientApiUrl(endpoint: 'init' | 'chat'): string {
+    const baseUrl = this.config.apiUrl?.replace(/\/+$/, '').replace(/\/v1\/dispatch$/, '') || DEFAULT_CLIENT_API_BASE;
+    return endpoint === 'init'
+      ? `${baseUrl}/v1/client/init`
+      : `${baseUrl}/v1/client/chat`;
+  }
+
+  /**
+   * Get the current client session (if any)
+   */
+  public getClientSession(): ClientSession | null {
+    return this.clientSession;
+  }
+
+  /**
+   * Initialize session for client token mode.
+   * Called automatically on first message if not already initialized.
+   */
+  public async initSession(): Promise<ClientSession> {
+    if (!this.isClientTokenMode()) {
+      throw new Error('initSession() only available in client token mode');
+    }
+
+    // Return existing session if valid
+    if (this.clientSession && new Date() < this.clientSession.expiresAt) {
+      return this.clientSession;
+    }
+
+    // Deduplicate concurrent init calls
+    if (this.sessionInitPromise) {
+      return this.sessionInitPromise;
+    }
+
+    this.sessionInitPromise = this._doInitSession();
+    try {
+      const session = await this.sessionInitPromise;
+      this.clientSession = session;
+      this.config.onSessionInit?.(session);
+      return session;
+    } finally {
+      this.sessionInitPromise = null;
+    }
+  }
+
+  private async _doInitSession(): Promise<ClientSession> {
+    const response = await fetch(this.getClientApiUrl('init'), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        token: this.config.clientToken,
+        flow_id: this.config.flowId,
+      }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Session initialization failed' }));
+      if (response.status === 401) {
+        throw new Error(`Invalid client token: ${error.hint || error.error}`);
+      }
+      if (response.status === 403) {
+        throw new Error(`Origin not allowed: ${error.hint || error.error}`);
+      }
+      throw new Error(error.error || 'Failed to initialize session');
+    }
+
+    const data: ClientInitResponse = await response.json();
+    return {
+      sessionId: data.session_id,
+      expiresAt: new Date(data.expires_at),
+      flow: data.flow,
+      config: {
+        welcomeMessage: data.config.welcome_message,
+        placeholder: data.config.placeholder,
+        theme: data.config.theme,
+      },
+    };
+  }
+
+  /**
+   * Clear the current client session
+   */
+  public clearClientSession(): void {
+    this.clientSession = null;
+    this.sessionInitPromise = null;
+  }
+
+  /**
+   * Send a message - handles both proxy and client token modes
+   */
   public async dispatch(options: DispatchOptions, onEvent: SSEHandler) {
+    if (this.isClientTokenMode()) {
+      return this.dispatchClientToken(options, onEvent);
+    }
+    return this.dispatchProxy(options, onEvent);
+  }
+
+  /**
+   * Client token mode dispatch
+   */
+  private async dispatchClientToken(options: DispatchOptions, onEvent: SSEHandler) {
+    const controller = new AbortController();
+    if (options.signal) {
+      options.signal.addEventListener("abort", () => controller.abort());
+    }
+
+    onEvent({ type: "status", status: "connecting" });
+
+    try {
+      // Ensure session is initialized
+      const session = await this.initSession();
+
+      // Check if session is about to expire (within 1 minute)
+      if (new Date() >= new Date(session.expiresAt.getTime() - 60000)) {
+        // Session expired or expiring soon
+        this.clientSession = null;
+        this.config.onSessionExpired?.();
+        const error = new Error('Session expired. Please refresh to continue.');
+        onEvent({ type: "error", error });
+        throw error;
+      }
+
+      // Build the chat request payload
+      const chatRequest: ClientChatRequest = {
+        session_id: session.sessionId,
+        messages: options.messages.map(m => ({
+          role: m.role,
+          content: m.rawContent || m.content,
+        })),
+      };
+
+      if (this.debug) {
+        // eslint-disable-next-line no-console
+        console.debug("[AgentWidgetClient] client token dispatch", chatRequest);
+      }
+
+      const response = await fetch(this.getClientApiUrl('chat'), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(chatRequest),
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ error: 'Chat request failed' }));
+        
+        if (response.status === 401) {
+          // Session expired
+          this.clientSession = null;
+          this.config.onSessionExpired?.();
+          const error = new Error('Session expired. Please refresh to continue.');
+          onEvent({ type: "error", error });
+          throw error;
+        }
+        
+        if (response.status === 429) {
+          const error = new Error(errorData.hint || 'Message limit reached for this session.');
+          onEvent({ type: "error", error });
+          throw error;
+        }
+        
+        const error = new Error(errorData.error || 'Failed to send message');
+        onEvent({ type: "error", error });
+        throw error;
+      }
+
+      if (!response.body) {
+        const error = new Error('No response body received');
+        onEvent({ type: "error", error });
+        throw error;
+      }
+
+      onEvent({ type: "status", status: "connected" });
+      
+      // Stream the response (same SSE handling as proxy mode)
+      try {
+        await this.streamResponse(response.body, onEvent);
+      } finally {
+        onEvent({ type: "status", status: "idle" });
+      }
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      // Only emit error if it wasn't already emitted
+      if (!err.message.includes('Session expired') && !err.message.includes('Message limit')) {
+        onEvent({ type: "error", error: err });
+      }
+      throw err;
+    }
+  }
+
+  /**
+   * Proxy mode dispatch (original implementation)
+   */
+  private async dispatchProxy(options: DispatchOptions, onEvent: SSEHandler) {
     const controller = new AbortController();
     if (options.signal) {
       options.signal.addEventListener("abort", () => controller.abort());

package/src/components/launcher.ts

@@ -158,10 +158,19 @@ export const createLauncherButton = (
         ? positionMap[launcher.position]
         : positionMap["bottom-right"];
 
+    // Removed hardcoded border/shadow classes (tvw-shadow-lg, tvw-border, tvw-border-gray-200)
+    // These are now applied via inline styles from config
     const base =
-      "tvw-fixed tvw-flex tvw-items-center tvw-gap-3 tvw-rounded-launcher tvw-bg-cw-surface tvw-py-2.5 tvw-pl-3 tvw-pr-3 tvw-shadow-lg tvw-border tvw-border-gray-200 tvw-transition hover:tvw-translate-y-[-2px] tvw-cursor-pointer tvw-z-50";
+      "tvw-fixed tvw-flex tvw-items-center tvw-gap-3 tvw-rounded-launcher tvw-bg-cw-surface tvw-py-2.5 tvw-pl-3 tvw-pr-3 tvw-transition hover:tvw-translate-y-[-2px] tvw-cursor-pointer tvw-z-50";
 
     button.className = `${base} ${positionClass}`;
+    
+    // Apply launcher border and shadow from config (with defaults matching previous Tailwind classes)
+    const defaultBorder = "1px solid #e5e7eb";
+    const defaultShadow = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
+    
+    button.style.border = launcher.border ?? defaultBorder;
+    button.style.boxShadow = launcher.shadow ?? defaultShadow;
   };
 
   const destroy = () => {

package/src/components/message-bubble.ts

@@ -3,8 +3,11 @@ import {
   AgentWidgetMessage, 
   AgentWidgetMessageLayoutConfig,
   AgentWidgetAvatarConfig,
-  AgentWidgetTimestampConfig
+  AgentWidgetTimestampConfig,
+  AgentWidgetMessageActionsConfig,
+  AgentWidgetMessageFeedback
 } from "../types";
+import { renderLucideIcon } from "../utils/icons";
 
 export type MessageTransform = (context: {
   text: string;
@@ -13,6 +16,11 @@ export type MessageTransform = (context: {
   raw?: string;
 }) => string;
 
+export type MessageActionCallbacks = {
+  onCopy?: (message: AgentWidgetMessage) => void;
+  onFeedback?: (feedback: AgentWidgetMessageFeedback) => void;
+};
+
 // Create typing indicator element
 export const createTypingIndicator = (): HTMLElement => {
   const container = document.createElement("div");
@@ -204,6 +212,185 @@ const getBubbleClasses = (
   return baseClasses;
 };
 
+/**
+ * Create message action buttons (copy, upvote, downvote)
+ */
+export const createMessageActions = (
+  message: AgentWidgetMessage,
+  actionsConfig: AgentWidgetMessageActionsConfig,
+  callbacks?: MessageActionCallbacks
+): HTMLElement => {
+  const showCopy = actionsConfig.showCopy ?? true;
+  const showUpvote = actionsConfig.showUpvote ?? true;
+  const showDownvote = actionsConfig.showDownvote ?? true;
+  const visibility = actionsConfig.visibility ?? "hover";
+  const align = actionsConfig.align ?? "right";
+  const layout = actionsConfig.layout ?? "pill-inside";
+
+  // Map alignment to CSS class
+  const alignClass = {
+    left: "tvw-message-actions-left",
+    center: "tvw-message-actions-center",
+    right: "tvw-message-actions-right",
+  }[align];
+
+  // Map layout to CSS class
+  const layoutClass = {
+    "pill-inside": "tvw-message-actions-pill",
+    "row-inside": "tvw-message-actions-row",
+  }[layout];
+
+  const container = createElement(
+    "div",
+    `tvw-message-actions tvw-flex tvw-items-center tvw-gap-1 tvw-mt-2 ${alignClass} ${layoutClass} ${
+      visibility === "hover" ? "tvw-message-actions-hover" : ""
+    }`
+  );
+
+  // Track vote state for this message
+  let currentVote: "upvote" | "downvote" | null = null;
+
+  const createActionButton = (
+    iconName: string,
+    label: string,
+    onClick: () => void,
+    dataAction?: string
+  ): HTMLButtonElement => {
+    const button = document.createElement("button");
+    button.className = "tvw-message-action-btn";
+    button.setAttribute("aria-label", label);
+    button.setAttribute("title", label);
+    if (dataAction) {
+      button.setAttribute("data-action", dataAction);
+    }
+
+    const icon = renderLucideIcon(iconName, 14, "currentColor", 2);
+    if (icon) {
+      button.appendChild(icon);
+    }
+
+    button.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick();
+    });
+
+    return button;
+  };
+
+  // Copy button
+  if (showCopy) {
+    const copyButton = createActionButton("copy", "Copy message", () => {
+      // Copy to clipboard
+      const textToCopy = message.content || "";
+      navigator.clipboard.writeText(textToCopy).then(() => {
+        // Show success feedback - swap icon temporarily
+        copyButton.classList.add("tvw-message-action-success");
+        const checkIcon = renderLucideIcon("check", 14, "currentColor", 2);
+        if (checkIcon) {
+          copyButton.innerHTML = "";
+          copyButton.appendChild(checkIcon);
+        }
+        
+        // Restore original icon after 2 seconds
+        setTimeout(() => {
+          copyButton.classList.remove("tvw-message-action-success");
+          const originalIcon = renderLucideIcon("copy", 14, "currentColor", 2);
+          if (originalIcon) {
+            copyButton.innerHTML = "";
+            copyButton.appendChild(originalIcon);
+          }
+        }, 2000);
+      }).catch((err) => {
+        if (typeof console !== "undefined") {
+          console.error("[AgentWidget] Failed to copy message:", err);
+        }
+      });
+
+      // Trigger callback
+      if (callbacks?.onCopy) {
+        callbacks.onCopy(message);
+      }
+      if (actionsConfig.onCopy) {
+        actionsConfig.onCopy(message);
+      }
+    }, "copy");
+    container.appendChild(copyButton);
+  }
+
+  // Upvote button
+  if (showUpvote) {
+    const upvoteButton = createActionButton("thumbs-up", "Upvote", () => {
+      const wasActive = currentVote === "upvote";
+      
+      // Toggle state
+      if (wasActive) {
+        currentVote = null;
+        upvoteButton.classList.remove("tvw-message-action-active");
+      } else {
+        // Remove downvote if active
+        const downvoteBtn = container.querySelector('[data-action="downvote"]');
+        if (downvoteBtn) {
+          downvoteBtn.classList.remove("tvw-message-action-active");
+        }
+        currentVote = "upvote";
+        upvoteButton.classList.add("tvw-message-action-active");
+        
+        // Trigger feedback
+        const feedback: AgentWidgetMessageFeedback = {
+          type: "upvote",
+          messageId: message.id,
+          message
+        };
+        if (callbacks?.onFeedback) {
+          callbacks.onFeedback(feedback);
+        }
+        if (actionsConfig.onFeedback) {
+          actionsConfig.onFeedback(feedback);
+        }
+      }
+    }, "upvote");
+    container.appendChild(upvoteButton);
+  }
+
+  // Downvote button
+  if (showDownvote) {
+    const downvoteButton = createActionButton("thumbs-down", "Downvote", () => {
+      const wasActive = currentVote === "downvote";
+      
+      // Toggle state
+      if (wasActive) {
+        currentVote = null;
+        downvoteButton.classList.remove("tvw-message-action-active");
+      } else {
+        // Remove upvote if active
+        const upvoteBtn = container.querySelector('[data-action="upvote"]');
+        if (upvoteBtn) {
+          upvoteBtn.classList.remove("tvw-message-action-active");
+        }
+        currentVote = "downvote";
+        downvoteButton.classList.add("tvw-message-action-active");
+        
+        // Trigger feedback
+        const feedback: AgentWidgetMessageFeedback = {
+          type: "downvote",
+          messageId: message.id,
+          message
+        };
+        if (callbacks?.onFeedback) {
+          callbacks.onFeedback(feedback);
+        }
+        if (actionsConfig.onFeedback) {
+          actionsConfig.onFeedback(feedback);
+        }
+      }
+    }, "downvote");
+    container.appendChild(downvoteButton);
+  }
+
+  return container;
+};
+
 /**
  * Create standard message bubble
  * Supports layout configuration for avatars, timestamps, and visual presets
@@ -211,7 +398,9 @@ const getBubbleClasses = (
 export const createStandardBubble = (
   message: AgentWidgetMessage,
   transform: MessageTransform,
-  layoutConfig?: AgentWidgetMessageLayoutConfig
+  layoutConfig?: AgentWidgetMessageLayoutConfig,
+  actionsConfig?: AgentWidgetMessageActionsConfig,
+  actionCallbacks?: MessageActionCallbacks
 ): HTMLElement => {
   const config = layoutConfig ?? {};
   const layout = config.layout ?? "bubble";
@@ -259,6 +448,19 @@ export const createStandardBubble = (
     }
   }
 
+  // Add message actions for assistant messages (only when not streaming and has content)
+  const shouldShowActions = 
+    message.role === "assistant" && 
+    !message.streaming && 
+    message.content && 
+    message.content.trim() &&
+    actionsConfig?.enabled !== false;
+
+  if (shouldShowActions && actionsConfig) {
+    const actions = createMessageActions(message, actionsConfig, actionCallbacks);
+    bubble.appendChild(actions);
+  }
+
   // If no avatar needed, return bubble directly
   if (!showAvatar || message.role === "system") {
     return bubble;
@@ -292,7 +494,9 @@ export const createStandardBubble = (
 export const createBubbleWithLayout = (
   message: AgentWidgetMessage,
   transform: MessageTransform,
-  layoutConfig?: AgentWidgetMessageLayoutConfig
+  layoutConfig?: AgentWidgetMessageLayoutConfig,
+  actionsConfig?: AgentWidgetMessageActionsConfig,
+  actionCallbacks?: MessageActionCallbacks
 ): HTMLElement => {
   const config = layoutConfig ?? {};
 
@@ -314,5 +518,5 @@ export const createBubbleWithLayout = (
   }
 
   // Fall back to standard bubble
-  return createStandardBubble(message, transform, layoutConfig);
+  return createStandardBubble(message, transform, layoutConfig, actionsConfig, actionCallbacks);
 };

package/src/components/messages.ts

@@ -1,6 +1,6 @@
 import { createElement, createFragment } from "../utils/dom";
 import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
-import { MessageTransform } from "./message-bubble";
+import { MessageTransform, MessageActionCallbacks } from "./message-bubble";
 import { createStandardBubble } from "./message-bubble";
 import { createReasoningBubble } from "./reasoning-bubble";
 import { createToolBubble } from "./tool-bubble";
@@ -11,7 +11,8 @@ export const renderMessages = (
   transform: MessageTransform,
   showReasoning: boolean,
   showToolCalls: boolean,
-  config?: AgentWidgetConfig
+  config?: AgentWidgetConfig,
+  actionCallbacks?: MessageActionCallbacks
 ) => {
   container.innerHTML = "";
   const fragment = createFragment();
@@ -25,7 +26,13 @@ export const renderMessages = (
       if (!showToolCalls) return;
       bubble = createToolBubble(message, config);
     } else {
-      bubble = createStandardBubble(message, transform);
+      bubble = createStandardBubble(
+        message, 
+        transform, 
+        config?.layout?.messages, 
+        config?.messageActions, 
+        actionCallbacks
+      );
     }
 
     const wrapper = createElement("div", "tvw-flex");

package/src/defaults.ts

@@ -6,6 +6,8 @@ import type { AgentWidgetConfig } from "./types";
  */
 export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
   apiUrl: "http://localhost:43111/api/chat/dispatch",
+  // Client token mode defaults (optional, only used when clientToken is set)
+  clientToken: undefined,
   theme: {
     primary: "#111827",
     accent: "#1d4ed8",
@@ -76,6 +78,8 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
       paddingY: "0px",
     },
     headerIconHidden: false,
+    border: "1px solid #e5e7eb",
+    shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
   },
   copy: {
     welcomeTitle: "Hello 👋",
@@ -159,6 +163,22 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     },
     slots: {},
   },
+  markdown: {
+    options: {
+      gfm: true,
+      breaks: true,
+    },
+    disableDefaultStyles: false,
+  },
+  messageActions: {
+    enabled: true,
+    showCopy: true,
+    showUpvote: false,  // Requires backend - disabled by default
+    showDownvote: false, // Requires backend - disabled by default
+    visibility: "hover",
+    align: "right",
+    layout: "pill-inside",
+  },
   debug: false,
 };
 
@@ -235,5 +255,17 @@ export function mergeWithDefaults(
         ...config.layout?.slots,
       },
     },
+    markdown: {
+      ...DEFAULT_WIDGET_CONFIG.markdown,
+      ...config.markdown,
+      options: {
+        ...DEFAULT_WIDGET_CONFIG.markdown?.options,
+        ...config.markdown?.options,
+      },
+    },
+    messageActions: {
+      ...DEFAULT_WIDGET_CONFIG.messageActions,
+      ...config.messageActions,
+    },
   };
 }

package/src/index.ts

@@ -28,7 +28,18 @@ export type {
   SlotRenderer,
   SlotRenderContext,
   HeaderRenderContext,
-  MessageRenderContext
+  MessageRenderContext,
+  // Markdown types
+  AgentWidgetMarkdownConfig,
+  AgentWidgetMarkdownOptions,
+  AgentWidgetMarkdownRendererOverrides,
+  // Message actions types
+  AgentWidgetMessageActionsConfig,
+  AgentWidgetMessageFeedback,
+  // Client token types
+  ClientSession,
+  ClientInitResponse,
+  ClientChatRequest
 } from "./types";
 
 export { initAgentWidgetFn as initAgentWidget };
@@ -50,8 +61,12 @@ export {
 export {
   markdownPostprocessor,
   escapeHtml,
-  directivePostprocessor
+  directivePostprocessor,
+  createMarkdownProcessor,
+  createMarkdownProcessorFromConfig,
+  createDirectivePostprocessor
 } from "./postprocessors";
+export type { MarkdownProcessorOptions } from "./postprocessors";
 export {
   createPlainTextParser,
   createJsonStreamParser,
@@ -112,8 +127,9 @@ export type {
 export {
   createStandardBubble,
   createBubbleWithLayout,
-  createTypingIndicator
+  createTypingIndicator,
+  createMessageActions
 } from "./components/message-bubble";
-export type { MessageTransform } from "./components/message-bubble";
+export type { MessageTransform, MessageActionCallbacks } from "./components/message-bubble";
 
 export default initAgentWidgetFn;