vanilla-agent 1.22.0 → 1.24.0

package/src/styles/widget.css

@@ -1400,3 +1400,227 @@ form:focus-within textarea {
   height: 14px;
   flex-shrink: 0;
 }
+
+/* ============================================================================
+ * Feedback UI Components (CSAT/NPS)
+ * ============================================================================ */
+
+.tvw-feedback-container {
+  background: var(--cw-surface, #ffffff);
+  border: 1px solid var(--cw-border, #e5e7eb);
+  border-radius: var(--tvw-cw-radius-lg, 12px);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  padding: 1.25rem;
+  max-width: 100%;
+  margin: 0.75rem;
+  animation: tvw-feedback-fade-in 0.3s ease-out;
+}
+
+@keyframes tvw-feedback-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tvw-feedback-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tvw-feedback-header {
+  text-align: center;
+}
+
+.tvw-feedback-title {
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--cw-primary, #111827);
+}
+
+.tvw-feedback-subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--cw-muted, #6b7280);
+}
+
+/* CSAT Star Rating */
+.tvw-feedback-rating-csat {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.tvw-feedback-star-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  color: var(--cw-border, #d1d5db);
+  transition: color 0.2s ease, transform 0.15s ease;
+}
+
+.tvw-feedback-star-btn:hover {
+  transform: scale(1.15);
+}
+
+.tvw-feedback-star-btn.selected {
+  color: #fbbf24;
+}
+
+.tvw-feedback-star-btn .tvw-feedback-star {
+  width: 32px;
+  height: 32px;
+}
+
+.tvw-feedback-star-btn.selected .tvw-feedback-star {
+  fill: #fbbf24;
+}
+
+/* NPS Number Rating */
+.tvw-feedback-rating-nps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.tvw-feedback-labels {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  color: var(--cw-muted, #6b7280);
+}
+
+.tvw-feedback-numbers {
+  display: flex;
+  gap: 0.25rem;
+  justify-content: center;
+}
+
+.tvw-feedback-number-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--tvw-cw-radius-sm, 6px);
+  border: 1px solid var(--cw-border, #e5e7eb);
+  background: var(--cw-surface, #ffffff);
+  color: var(--cw-primary, #111827);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tvw-feedback-number-btn:hover {
+  border-color: var(--cw-accent, #1d4ed8);
+  background: var(--cw-container, #f3f4f6);
+}
+
+.tvw-feedback-number-btn.selected {
+  color: #ffffff;
+}
+
+/* NPS Color coding */
+.tvw-feedback-number-btn.tvw-feedback-detractor.selected {
+  background: #ef4444;
+  border-color: #ef4444;
+}
+
+.tvw-feedback-number-btn.tvw-feedback-passive.selected {
+  background: #f59e0b;
+  border-color: #f59e0b;
+}
+
+.tvw-feedback-number-btn.tvw-feedback-promoter.selected {
+  background: #22c55e;
+  border-color: #22c55e;
+}
+
+/* Comment textarea */
+.tvw-feedback-comment-container {
+  width: 100%;
+}
+
+.tvw-feedback-comment {
+  width: 100%;
+  padding: 0.625rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  border: 1px solid var(--cw-border, #e5e7eb);
+  border-radius: var(--tvw-cw-radius-sm, 6px);
+  background: var(--cw-surface, #ffffff);
+  color: var(--cw-primary, #111827);
+  resize: vertical;
+  box-sizing: border-box;
+}
+
+.tvw-feedback-comment:focus {
+  outline: none;
+  border-color: var(--cw-accent, #1d4ed8);
+  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
+}
+
+.tvw-feedback-comment::placeholder {
+  color: var(--cw-muted, #9ca3af);
+}
+
+/* Action buttons */
+.tvw-feedback-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.tvw-feedback-btn {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: var(--tvw-cw-radius-sm, 6px);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tvw-feedback-btn-skip {
+  background: transparent;
+  border: 1px solid var(--cw-border, #e5e7eb);
+  color: var(--cw-muted, #6b7280);
+}
+
+.tvw-feedback-btn-skip:hover {
+  background: var(--cw-container, #f3f4f6);
+  color: var(--cw-primary, #111827);
+}
+
+.tvw-feedback-btn-submit {
+  background: var(--cw-accent, #1d4ed8);
+  border: 1px solid var(--cw-accent, #1d4ed8);
+  color: #ffffff;
+}
+
+.tvw-feedback-btn-submit:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.tvw-feedback-btn-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Shake animation for validation */
+@keyframes tvw-feedback-shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+  20%, 40%, 60%, 80% { transform: translateX(4px); }
+}
+
+.tvw-feedback-shake {
+  animation: tvw-feedback-shake 0.5s ease-in-out;
+}

package/src/types.ts

@@ -22,6 +22,7 @@ export type AgentWidgetRequestPayload = {
   messages: AgentWidgetRequestPayloadMessage[];
   flowId?: string;
   context?: Record<string, unknown>;
+  metadata?: Record<string, unknown>;
 };
 
 export type AgentWidgetRequestMiddlewareContext = {
@@ -104,6 +105,23 @@ export type AgentWidgetMessageFeedback = {
 
 /**
  * Configuration for message action buttons (copy, upvote, downvote)
+ * 
+ * **Client Token Mode**: When using `clientToken`, feedback is automatically
+ * sent to your Travrse backend. Just enable the buttons and you're done!
+ * The `onFeedback` and `onCopy` callbacks are optional for additional local handling.
+ * 
+ * @example
+ * ```typescript
+ * // With clientToken - feedback is automatic!
+ * config: {
+ *   clientToken: 'ct_live_...',
+ *   messageActions: {
+ *     showUpvote: true,
+ *     showDownvote: true,
+ *     // No onFeedback needed - sent to backend automatically
+ *   }
+ * }
+ * ```
  */
 export type AgentWidgetMessageActionsConfig = {
   /**
@@ -117,13 +135,15 @@ export type AgentWidgetMessageActionsConfig = {
    */
   showCopy?: boolean;
   /**
-   * Show upvote button
-   * @default false (requires backend)
+   * Show upvote button.
+   * When using `clientToken`, feedback is sent to the backend automatically.
+   * @default false
    */
   showUpvote?: boolean;
   /**
-   * Show downvote button
-   * @default false (requires backend)
+   * Show downvote button.
+   * When using `clientToken`, feedback is sent to the backend automatically.
+   * @default false
    */
   showDownvote?: boolean;
   /**
@@ -144,11 +164,19 @@ export type AgentWidgetMessageActionsConfig = {
    */
   layout?: "pill-inside" | "row-inside";
   /**
-   * Callback when user submits feedback (upvote/downvote)
+   * Callback when user submits feedback (upvote/downvote).
+   * 
+   * **Note**: When using `clientToken`, feedback is AUTOMATICALLY sent to your
+   * backend via `/v1/client/feedback`. This callback is called IN ADDITION to
+   * the automatic submission, useful for updating local UI or analytics.
    */
   onFeedback?: (feedback: AgentWidgetMessageFeedback) => void;
   /**
-   * Callback when user copies a message
+   * Callback when user copies a message.
+   * 
+   * **Note**: When using `clientToken`, copy events are AUTOMATICALLY tracked
+   * via `/v1/client/feedback`. This callback is called IN ADDITION to the
+   * automatic tracking.
    */
   onCopy?: (message: AgentWidgetMessage) => void;
 };
@@ -567,9 +595,33 @@ export type ClientInitResponse = {
 export type ClientChatRequest = {
   session_id: string;
   messages: Array<{
+    id?: string;
     role: 'user' | 'assistant' | 'system';
     content: string;
   }>;
+  /** ID for the expected assistant response message */
+  assistant_message_id?: string;
+  metadata?: Record<string, unknown>;
+  context?: Record<string, unknown>;
+};
+
+/**
+ * Feedback types supported by the API
+ */
+export type ClientFeedbackType = 'upvote' | 'downvote' | 'copy' | 'csat' | 'nps';
+
+/**
+ * Request payload for /v1/client/feedback endpoint
+ */
+export type ClientFeedbackRequest = {
+  session_id: string;
+  /** Required for upvote, downvote, copy feedback types */
+  message_id?: string;
+  type: ClientFeedbackType;
+  /** Required for csat (1-5) and nps (0-10) feedback types */
+  rating?: number;
+  /** Optional comment for any feedback type */
+  comment?: string;
 };
 
 // ============================================================================

package/src/ui.ts

@@ -43,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";
@@ -91,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 = (
@@ -229,13 +240,35 @@ export const createAgentExperience = (
   let showReasoning = config.features?.showReasoning ?? true;
   let showToolCalls = config.features?.showToolCalls ?? true;
   
-  // Create message action callbacks that emit events
+  // 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);
     }
   };
   
@@ -2797,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();