vanilla-agent 1.21.0 → 1.22.0

package/src/styles/widget.css

@@ -1215,3 +1215,188 @@ form:focus-within textarea {
 .vanilla-message-user-bubble code:not(pre code) {
   background-color: rgba(255, 255, 255, 0.2);
 }
+
+/* ============================================
+   Message Action Buttons (Copy, Upvote, Downvote)
+   ============================================ */
+
+/* Make message bubble position relative for overlay positioning */
+.vanilla-message-bubble {
+  position: relative;
+}
+
+/* Fade-in animation for action buttons */
+@keyframes tvw-message-actions-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Base action bar styles */
+.tvw-message-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--cw-divider, #f1f5f9);
+  /* Fade in when first shown (for "always" visibility) */
+  animation: tvw-message-actions-fade-in 0.3s ease-out;
+}
+
+/* Action bar alignment */
+.tvw-message-actions-left {
+  justify-content: flex-start;
+}
+
+.tvw-message-actions-center {
+  justify-content: center;
+}
+
+.tvw-message-actions-right {
+  justify-content: flex-end;
+}
+
+/* Hover visibility mode - overlay on desktop */
+@media (hover: hover) {
+  .tvw-message-actions-hover {
+    /* Hidden by default */
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease-in-out;
+  }
+
+  /* Pill layout - compact floating pill */
+  .tvw-message-actions-hover.tvw-message-actions-pill {
+    position: absolute;
+    bottom: 0.5rem;
+    margin-top: 0;
+    padding: 0.25rem;
+    border-top: none;
+    width: fit-content;
+    background-color: var(--cw-surface, #ffffff);
+    border: 1px solid var(--cw-divider, #f1f5f9);
+    border-radius: var(--cw-radius-md, 0.75rem);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  }
+
+  /* Pill layout - position based on alignment */
+  .tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-left {
+    left: 0.75rem;
+    right: auto;
+  }
+
+  .tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-center {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
+  .tvw-message-actions-hover.tvw-message-actions-pill.tvw-message-actions-right {
+    right: 0.75rem;
+    left: auto;
+  }
+
+  /* Row layout - full-width bar at bottom */
+  .tvw-message-actions-hover.tvw-message-actions-row {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin-top: 0;
+    padding: 0.5rem 0.75rem;
+    border-top: none;
+    background: linear-gradient(
+      to top,
+      var(--cw-surface, #ffffff) 70%,
+      transparent
+    );
+    border-radius: 0 0 var(--cw-radius-lg, 1.5rem) var(--cw-radius-lg, 1.5rem);
+  }
+
+  .vanilla-message-bubble:hover .tvw-message-actions-hover,
+  .vanilla-message-bubble:focus-within .tvw-message-actions-hover {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* On touch devices (no hover support), show inline and always visible */
+@media (hover: none) {
+  .tvw-message-actions-hover {
+    /* Keep normal flow positioning on mobile */
+    position: static;
+    opacity: 1;
+  }
+}
+
+/* Action button base styles */
+.tvw-message-action-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--cw-muted, #6b7280);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
+}
+
+.tvw-message-action-btn:hover {
+  background-color: var(--cw-container, #f8fafc);
+  color: var(--cw-primary, #111827);
+}
+
+.tvw-message-action-btn:active {
+  transform: scale(0.95);
+}
+
+.tvw-message-action-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--cw-accent, #1d4ed8);
+}
+
+.tvw-message-action-btn:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.tvw-message-action-btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--cw-accent, #1d4ed8);
+}
+
+/* Active state (voted) */
+.tvw-message-action-btn.tvw-message-action-active {
+  background-color: var(--cw-accent, #1d4ed8);
+  color: #ffffff;
+}
+
+.tvw-message-action-btn.tvw-message-action-active:hover {
+  background-color: var(--cw-accent, #1d4ed8);
+  color: #ffffff;
+  opacity: 0.9;
+}
+
+/* Success state (after copy) */
+.tvw-message-action-btn.tvw-message-action-success {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+.tvw-message-action-btn.tvw-message-action-success:hover {
+  background-color: #10b981;
+  color: #ffffff;
+}
+
+/* Icon styling within buttons */
+.tvw-message-action-btn svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}

package/src/types.ts

@@ -93,6 +93,66 @@ export type AgentWidgetActionEventPayload = {
   message: AgentWidgetMessage;
 };
 
+/**
+ * Feedback event payload for upvote/downvote actions on messages
+ */
+export type AgentWidgetMessageFeedback = {
+  type: "upvote" | "downvote";
+  messageId: string;
+  message: AgentWidgetMessage;
+};
+
+/**
+ * Configuration for message action buttons (copy, upvote, downvote)
+ */
+export type AgentWidgetMessageActionsConfig = {
+  /**
+   * Enable/disable message actions entirely
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Show copy button
+   * @default true
+   */
+  showCopy?: boolean;
+  /**
+   * Show upvote button
+   * @default false (requires backend)
+   */
+  showUpvote?: boolean;
+  /**
+   * Show downvote button
+   * @default false (requires backend)
+   */
+  showDownvote?: boolean;
+  /**
+   * Visibility mode: 'always' shows buttons always, 'hover' shows on hover only
+   * @default 'hover'
+   */
+  visibility?: "always" | "hover";
+  /**
+   * Horizontal alignment of action buttons
+   * @default 'right'
+   */
+  align?: "left" | "center" | "right";
+  /**
+   * Layout style for action buttons
+   * - 'pill-inside': Compact floating pill around just the buttons (default for hover)
+   * - 'row-inside': Full-width row at the bottom of the message
+   * @default 'pill-inside'
+   */
+  layout?: "pill-inside" | "row-inside";
+  /**
+   * Callback when user submits feedback (upvote/downvote)
+   */
+  onFeedback?: (feedback: AgentWidgetMessageFeedback) => void;
+  /**
+   * Callback when user copies a message
+   */
+  onCopy?: (message: AgentWidgetMessage) => void;
+};
+
 export type AgentWidgetStateEvent = {
   open: boolean;
   source: "user" | "auto" | "api" | "system";
@@ -114,6 +174,8 @@ export type AgentWidgetControllerEventMap = {
   "widget:opened": AgentWidgetStateEvent;
   "widget:closed": AgentWidgetStateEvent;
   "widget:state": AgentWidgetStateSnapshot;
+  "message:feedback": AgentWidgetMessageFeedback;
+  "message:copy": AgentWidgetMessage;
 };
 
 export type AgentWidgetFeatureFlags = {
@@ -454,6 +516,62 @@ export type AgentWidgetCustomFetch = (
  */
 export type AgentWidgetHeadersFunction = () => Record<string, string> | Promise<Record<string, string>>;
 
+// ============================================================================
+// Client Token Types
+// ============================================================================
+
+/**
+ * Session information returned after client token initialization.
+ * Contains session ID, expiry time, flow info, and config from the server.
+ */
+export type ClientSession = {
+  /** Unique session identifier */
+  sessionId: string;
+  /** When the session expires */
+  expiresAt: Date;
+  /** Flow information */
+  flow: {
+    id: string;
+    name: string;
+    description: string | null;
+  };
+  /** Configuration from the server */
+  config: {
+    welcomeMessage: string | null;
+    placeholder: string;
+    theme: Record<string, unknown> | null;
+  };
+};
+
+/**
+ * Raw API response from /v1/client/init endpoint
+ */
+export type ClientInitResponse = {
+  session_id: string;
+  expires_at: string;
+  flow: {
+    id: string;
+    name: string;
+    description: string | null;
+  };
+  config: {
+    welcome_message: string | null;
+    placeholder: string;
+    theme: Record<string, unknown> | null;
+  };
+};
+
+/**
+ * Request payload for /v1/client/chat endpoint
+ */
+export type ClientChatRequest = {
+  session_id: string;
+  messages: Array<{
+    role: 'user' | 'assistant' | 'system';
+    content: string;
+  }>;
+};
+
 // ============================================================================
 // Layout Configuration Types
 // ============================================================================
@@ -890,6 +1008,47 @@ export type AgentWidgetMarkdownConfig = {
 export type AgentWidgetConfig = {
   apiUrl?: string;
   flowId?: string;
+  /**
+   * Client token for direct browser-to-API communication.
+   * When set, the widget uses /v1/client/* endpoints instead of /v1/dispatch.
+   * Mutually exclusive with apiKey/headers authentication.
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   clientToken: 'ct_live_flow01k7_a8b9c0d1e2f3g4h5i6j7k8l9'
+   * }
+   * ```
+   */
+  clientToken?: string;
+  /**
+   * Callback when session is initialized (client token mode only).
+   * Receives session info including expiry time.
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   onSessionInit: (session) => {
+   *     console.log('Session started:', session.sessionId);
+   *   }
+   * }
+   * ```
+   */
+  onSessionInit?: (session: ClientSession) => void;
+  /**
+   * Callback when session expires or errors (client token mode only).
+   * Widget should prompt user to refresh.
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   onSessionExpired: () => {
+   *     alert('Your session has expired. Please refresh the page.');
+   *   }
+   * }
+   * ```
+   */
+  onSessionExpired?: () => void;
   /**
    * Static headers to include with each request.
    * For dynamic headers (e.g., auth tokens), use `getHeaders` instead.
@@ -1122,6 +1281,31 @@ export type AgentWidgetConfig = {
    * ```
    */
   markdown?: AgentWidgetMarkdownConfig;
+  
+  /**
+   * Configuration for message action buttons (copy, upvote, downvote).
+   * Shows action buttons on assistant messages for user feedback.
+   * 
+   * @example
+   * ```typescript
+   * config: {
+   *   messageActions: {
+   *     enabled: true,
+   *     showCopy: true,
+   *     showUpvote: true,
+   *     showDownvote: true,
+   *     visibility: 'hover',
+   *     onFeedback: (feedback) => {
+   *       console.log('Feedback:', feedback.type, feedback.messageId);
+   *     },
+   *     onCopy: (message) => {
+   *       console.log('Copied message:', message.id);
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  messageActions?: AgentWidgetMessageActionsConfig;
 };
 
 export type AgentWidgetMessageRole = "user" | "assistant" | "system";

package/src/ui.ts

@@ -11,7 +11,8 @@ import {
   AgentWidgetStateEvent,
   AgentWidgetStateSnapshot,
   WidgetLayoutSlot,
-  SlotRenderer
+  SlotRenderer,
+  AgentWidgetMessageFeedback
 } from "./types";
 import { applyThemeVariables } from "./utils/theme";
 import { renderLucideIcon } from "./utils/icons";
@@ -21,7 +22,7 @@ import { createLauncherButton } from "./components/launcher";
 import { createWrapper, buildPanel, buildHeader, buildComposer, attachHeaderToContainer } from "./components/panel";
 import { positionMap } from "./utils/positioning";
 import type { HeaderElements, ComposerElements } from "./components/panel";
-import { MessageTransform } from "./components/message-bubble";
+import { MessageTransform, MessageActionCallbacks } from "./components/message-bubble";
 import { createStandardBubble, createTypingIndicator } from "./components/message-bubble";
 import { createReasoningBubble } from "./components/reasoning-bubble";
 import { createToolBubble } from "./components/tool-bubble";
@@ -228,6 +229,16 @@ export const createAgentExperience = (
   let showReasoning = config.features?.showReasoning ?? true;
   let showToolCalls = config.features?.showToolCalls ?? true;
   
+  // Create message action callbacks that emit events
+  const messageActionCallbacks: MessageActionCallbacks = {
+    onCopy: (message: AgentWidgetMessage) => {
+      eventBus.emit("message:copy", message);
+    },
+    onFeedback: (feedback: AgentWidgetMessageFeedback) => {
+      eventBus.emit("message:feedback", feedback);
+    }
+  };
+  
   // Get status indicator config
   const statusConfig = config.statusIndicator ?? {};
   const getStatusText = (status: AgentWidgetSessionStatus): string => {
@@ -877,7 +888,13 @@ export const createAgentExperience = (
           bubble = matchingPlugin.renderMessage({
             message,
             defaultRenderer: () => {
-              const b = createStandardBubble(message, transform, messageLayoutConfig);
+              const b = createStandardBubble(
+                message, 
+                transform, 
+                messageLayoutConfig, 
+                config.messageActions, 
+                messageActionCallbacks
+              );
               if (message.role !== "user") {
                 enhanceWithForms(b, message, config, session);
               }
@@ -957,7 +974,13 @@ export const createAgentExperience = (
               streaming: Boolean(message.streaming)
             });
           } else {
-            bubble = createStandardBubble(message, transform, messageLayoutConfig);
+            bubble = createStandardBubble(
+              message, 
+              transform, 
+              messageLayoutConfig, 
+              config.messageActions, 
+              messageActionCallbacks
+            );
           }
           if (message.role !== "user" && bubble) {
             enhanceWithForms(bubble, message, config, session);