vanilla-agent 1.21.0 → 1.23.0

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";
@@ -42,6 +43,12 @@ import {
   extractComponentDirectiveFromMessage,
   hasComponentDirective
 } from "./utils/component-middleware";
+import {
+  createCSATFeedback,
+  createNPSFeedback,
+  type CSATFeedbackOptions,
+  type NPSFeedbackOptions
+} from "./components/feedback";
 
 // Default localStorage key for chat history (automatically cleared on clear chat)
 const DEFAULT_CHAT_HISTORY_STORAGE_KEY = "vanilla-agent-chat-history";
@@ -90,6 +97,11 @@ type Controller = {
   isOpen: () => boolean;
   isVoiceActive: () => boolean;
   getState: () => AgentWidgetStateSnapshot;
+  // Feedback methods (CSAT/NPS)
+  showCSATFeedback: (options?: Partial<CSATFeedbackOptions>) => void;
+  showNPSFeedback: (options?: Partial<NPSFeedbackOptions>) => void;
+  submitCSATFeedback: (rating: number, comment?: string) => Promise<void>;
+  submitNPSFeedback: (rating: number, comment?: string) => Promise<void>;
 };
 
 const buildPostprocessor = (
@@ -228,6 +240,38 @@ export const createAgentExperience = (
   let showReasoning = config.features?.showReasoning ?? true;
   let showToolCalls = config.features?.showToolCalls ?? true;
   
+  // Create message action callbacks that emit events and optionally send to API
+  const messageActionCallbacks: MessageActionCallbacks = {
+    onCopy: (message: AgentWidgetMessage) => {
+      eventBus.emit("message:copy", message);
+      // Send copy feedback to API if in client token mode
+      if (session?.isClientTokenMode()) {
+        session.submitMessageFeedback(message.id, 'copy').catch((error) => {
+          if (config.debug) {
+            // eslint-disable-next-line no-console
+            console.error("[AgentWidget] Failed to submit copy feedback:", error);
+          }
+        });
+      }
+      // Call user-provided callback
+      config.messageActions?.onCopy?.(message);
+    },
+    onFeedback: (feedback: AgentWidgetMessageFeedback) => {
+      eventBus.emit("message:feedback", feedback);
+      // Send feedback to API if in client token mode
+      if (session?.isClientTokenMode()) {
+        session.submitMessageFeedback(feedback.messageId, feedback.type).catch((error) => {
+          if (config.debug) {
+            // eslint-disable-next-line no-console
+            console.error("[AgentWidget] Failed to submit feedback:", error);
+          }
+        });
+      }
+      // Call user-provided callback
+      config.messageActions?.onFeedback?.(feedback);
+    }
+  };
+  
   // Get status indicator config
   const statusConfig = config.statusIndicator ?? {};
   const getStatusText = (status: AgentWidgetSessionStatus): string => {
@@ -877,7 +921,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 +1007,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);
@@ -2774,6 +2830,67 @@ export const createAgentExperience = (
         streaming: session.isStreaming()
       };
     },
+    // Feedback methods (CSAT/NPS)
+    showCSATFeedback(options?: Partial<CSATFeedbackOptions>) {
+      // Auto-open widget if closed and launcher is enabled
+      if (!open && launcherEnabled) {
+        setOpenState(true, "system");
+      }
+      
+      // Remove any existing feedback forms
+      const existingFeedback = messagesWrapper.querySelector('.tvw-feedback-container');
+      if (existingFeedback) {
+        existingFeedback.remove();
+      }
+      
+      const feedbackEl = createCSATFeedback({
+        onSubmit: async (rating, comment) => {
+          if (session.isClientTokenMode()) {
+            await session.submitCSATFeedback(rating, comment);
+          }
+          options?.onSubmit?.(rating, comment);
+        },
+        onDismiss: options?.onDismiss,
+        ...options,
+      });
+      
+      // Append to messages area at the bottom
+      messagesWrapper.appendChild(feedbackEl);
+      feedbackEl.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    },
+    showNPSFeedback(options?: Partial<NPSFeedbackOptions>) {
+      // Auto-open widget if closed and launcher is enabled
+      if (!open && launcherEnabled) {
+        setOpenState(true, "system");
+      }
+      
+      // Remove any existing feedback forms
+      const existingFeedback = messagesWrapper.querySelector('.tvw-feedback-container');
+      if (existingFeedback) {
+        existingFeedback.remove();
+      }
+      
+      const feedbackEl = createNPSFeedback({
+        onSubmit: async (rating, comment) => {
+          if (session.isClientTokenMode()) {
+            await session.submitNPSFeedback(rating, comment);
+          }
+          options?.onSubmit?.(rating, comment);
+        },
+        onDismiss: options?.onDismiss,
+        ...options,
+      });
+      
+      // Append to messages area at the bottom
+      messagesWrapper.appendChild(feedbackEl);
+      feedbackEl.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    },
+    async submitCSATFeedback(rating: number, comment?: string): Promise<void> {
+      return session.submitCSATFeedback(rating, comment);
+    },
+    async submitNPSFeedback(rating: number, comment?: string): Promise<void> {
+      return session.submitNPSFeedback(rating, comment);
+    },
     destroy() {
       destroyCallbacks.forEach((cb) => cb());
       wrapper.remove();

package/src/utils/message-id.ts

@@ -0,0 +1,35 @@
+/**
+ * Message ID utilities for client-side message tracking
+ * Used for feedback integration with the Travrse API
+ */
+
+/**
+ * Generate a unique message ID for tracking
+ * Format: msg_{timestamp_base36}_{random_8chars}
+ */
+export function generateMessageId(): string {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 10);
+  return `msg_${timestamp}_${random}`;
+}
+
+/**
+ * Generate a unique user message ID
+ * Format: usr_{timestamp_base36}_{random_8chars}
+ */
+export function generateUserMessageId(): string {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 10);
+  return `usr_${timestamp}_${random}`;
+}
+
+/**
+ * Generate a unique assistant message ID
+ * Format: ast_{timestamp_base36}_{random_8chars}
+ */
+export function generateAssistantMessageId(): string {
+  const timestamp = Date.now().toString(36);
+  const random = Math.random().toString(36).substring(2, 10);
+  return `ast_${timestamp}_${random}`;
+}
+