vanilla-agent 1.21.0 → 1.22.0

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",
@@ -168,6 +170,15 @@ export const DEFAULT_WIDGET_CONFIG: Partial<AgentWidgetConfig> = {
     },
     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,
 };
 
@@ -252,5 +263,9 @@ export function mergeWithDefaults(
         ...config.markdown?.options,
       },
     },
+    messageActions: {
+      ...DEFAULT_WIDGET_CONFIG.messageActions,
+      ...config.messageActions,
+    },
   };
 }

package/src/index.ts

@@ -32,7 +32,14 @@ export type {
   // Markdown types
   AgentWidgetMarkdownConfig,
   AgentWidgetMarkdownOptions,
-  AgentWidgetMarkdownRendererOverrides
+  AgentWidgetMarkdownRendererOverrides,
+  // Message actions types
+  AgentWidgetMessageActionsConfig,
+  AgentWidgetMessageFeedback,
+  // Client token types
+  ClientSession,
+  ClientInitResponse,
+  ClientChatRequest
 } from "./types";
 
 export { initAgentWidgetFn as initAgentWidget };
@@ -120,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;

package/src/install.ts

@@ -12,6 +12,10 @@ interface SiteAgentInstallConfig {
   target?: string | HTMLElement;
   config?: any;
   autoInit?: boolean;
+  // Client token mode options (can also be set via data attributes)
+  clientToken?: string;
+  flowId?: string;
+  apiUrl?: string;
 }
 
 declare global {
@@ -30,7 +34,45 @@ declare global {
   }
   (window as any).__siteAgentInstallerLoaded = true;
 
-  const config: SiteAgentInstallConfig = window.siteAgentConfig || {};
+  /**
+   * Read configuration from data attributes on the current script tag.
+   * Supports: data-travrse-token, data-flow-id, data-api-url
+   */
+  const getConfigFromScript = (): Partial<SiteAgentInstallConfig> => {
+    // Try to get the current script element
+    const script = document.currentScript as HTMLScriptElement | null;
+    if (!script) return {};
+
+    const scriptConfig: Partial<SiteAgentInstallConfig> = {};
+
+    // Client token from data attribute (primary method for client token mode)
+    const token = script.getAttribute('data-travrse-token');
+    if (token) {
+      scriptConfig.clientToken = token;
+    }
+
+    // Optional flow ID
+    const flowId = script.getAttribute('data-flow-id');
+    if (flowId) {
+      scriptConfig.flowId = flowId;
+    }
+
+    // Optional API URL override
+    const apiUrl = script.getAttribute('data-api-url');
+    if (apiUrl) {
+      scriptConfig.apiUrl = apiUrl;
+    }
+
+    return scriptConfig;
+  };
+
+  // Get config from script attributes (must be called synchronously during script execution)
+  const scriptConfig = getConfigFromScript();
+
+  // Merge script attributes with window config (script attributes take precedence)
+  const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};
+  const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };
+  
   const version = config.version || "latest";
   const cdn = config.cdn || "jsdelivr";
   const autoInit = config.autoInit !== false; // Default to true
@@ -113,14 +155,27 @@ declare global {
     }
 
     const target = config.target || "body";
-    // Merge apiUrl from top-level config into widget config if present
+    // Merge top-level config options into widget config
     const widgetConfig = { ...config.config };
-    if ((config as any).apiUrl && !widgetConfig.apiUrl) {
-      widgetConfig.apiUrl = (config as any).apiUrl;
+    
+    // Merge apiUrl from top-level config into widget config if present
+    if (config.apiUrl && !widgetConfig.apiUrl) {
+      widgetConfig.apiUrl = config.apiUrl;
+    }
+    
+    // Merge clientToken from top-level config into widget config if present
+    if (config.clientToken && !widgetConfig.clientToken) {
+      widgetConfig.clientToken = config.clientToken;
+    }
+    
+    // Merge flowId from top-level config into widget config if present
+    if (config.flowId && !widgetConfig.flowId) {
+      widgetConfig.flowId = config.flowId;
     }
 
-    // Only initialize if config is provided
-    if (!widgetConfig.apiUrl && Object.keys(widgetConfig).length === 0) {
+    // Only initialize if we have either apiUrl OR clientToken (or other config)
+    const hasApiConfig = widgetConfig.apiUrl || widgetConfig.clientToken;
+    if (!hasApiConfig && Object.keys(widgetConfig).length === 0) {
       return;
     }
 
@@ -140,7 +195,14 @@ declare global {
       await loadCSS();
       await loadJS();
       
-      if (autoInit && (config.config || (config as any).apiUrl)) {
+      // Auto-init if we have config OR apiUrl OR clientToken
+      const shouldAutoInit = autoInit && (
+        config.config || 
+        config.apiUrl || 
+        config.clientToken
+      );
+      
+      if (shouldAutoInit) {
         // Wait a tick to ensure AgentWidget is fully initialized
         setTimeout(initWidget, 0);
       }

package/src/session.ts

@@ -2,7 +2,8 @@ import { AgentWidgetClient } from "./client";
 import {
   AgentWidgetConfig,
   AgentWidgetEvent,
-  AgentWidgetMessage
+  AgentWidgetMessage,
+  ClientSession
 } from "./types";
 
 export type AgentWidgetSessionStatus =
@@ -25,6 +26,9 @@ export class AgentWidgetSession {
   private streaming = false;
   private abortController: AbortController | null = null;
   private sequenceCounter = Date.now();
+  
+  // Client token session management
+  private clientSession: ClientSession | null = null;
 
   constructor(
     private config: AgentWidgetConfig = {},
@@ -43,6 +47,78 @@ export class AgentWidgetSession {
     this.callbacks.onStatusChanged(this.status);
   }
 
+  /**
+   * Check if running in client token mode
+   */
+  public isClientTokenMode(): boolean {
+    return this.client.isClientTokenMode();
+  }
+
+  /**
+   * Initialize the client session (for client token mode).
+   * This is called automatically on first message, but can be called
+   * explicitly to pre-initialize the session and get config from server.
+   */
+  public async initClientSession(): Promise<ClientSession | null> {
+    if (!this.isClientTokenMode()) {
+      return null;
+    }
+    
+    try {
+      const session = await this.client.initSession();
+      this.setClientSession(session);
+      return session;
+    } catch (error) {
+      this.callbacks.onError?.(
+        error instanceof Error ? error : new Error(String(error))
+      );
+      return null;
+    }
+  }
+
+  /**
+   * Set the client session after initialization
+   */
+  public setClientSession(session: ClientSession): void {
+    this.clientSession = session;
+    
+    // Optionally add welcome message from session config
+    if (session.config.welcomeMessage && this.messages.length === 0) {
+      const welcomeMessage: AgentWidgetMessage = {
+        id: `welcome-${Date.now()}`,
+        role: "assistant",
+        content: session.config.welcomeMessage,
+        createdAt: new Date().toISOString(),
+        sequence: this.nextSequence()
+      };
+      this.appendMessage(welcomeMessage);
+    }
+  }
+
+  /**
+   * Get current client session
+   */
+  public getClientSession(): ClientSession | null {
+    return this.clientSession ?? this.client.getClientSession();
+  }
+
+  /**
+   * Check if session is valid and not expired
+   */
+  public isSessionValid(): boolean {
+    const session = this.getClientSession();
+    if (!session) return false;
+    return new Date() < session.expiresAt;
+  }
+
+  /**
+   * Clear session (on expiry or error)
+   */
+  public clearClientSession(): void {
+    this.clientSession = null;
+    this.client.clearClientSession();
+  }
+
   public updateConfig(next: AgentWidgetConfig) {
     this.config = { ...this.config, ...next };
     this.client = new AgentWidgetClient(this.config);