vanilla-agent 1.22.0 → 1.23.0

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-agent",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Themeable, plugable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -52,7 +52,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/becomevocal/chaty.git"
+    "url": "git+https://github.com/becomevocal/vanilla-agent.git"
   },
   "scripts": {
     "build": "rimraf dist && npm run build:styles && npm run build:client && npm run build:installer",

package/src/client.ts

@@ -12,7 +12,9 @@ import {
   AgentWidgetSSEEventResult,
   ClientSession,
   ClientInitResponse,
-  ClientChatRequest
+  ClientChatRequest,
+  ClientFeedbackRequest,
+  ClientFeedbackType
 } from "./types";
 import { 
   extractTextFromJson, 
@@ -25,6 +27,8 @@ import {
 type DispatchOptions = {
   messages: AgentWidgetMessage[];
   signal?: AbortSignal;
+  /** Pre-generated ID for the expected assistant response (for feedback tracking) */
+  assistantMessageId?: string;
 };
 
 type SSEHandler = (event: AgentWidgetEvent) => void;
@@ -178,6 +182,166 @@ export class AgentWidgetClient {
     this.sessionInitPromise = null;
   }
 
+  /**
+   * Get the feedback API URL
+   */
+  private getFeedbackApiUrl(): string {
+    const baseUrl = this.config.apiUrl?.replace(/\/+$/, '').replace(/\/v1\/dispatch$/, '') || DEFAULT_CLIENT_API_BASE;
+    return `${baseUrl}/v1/client/feedback`;
+  }
+
+  /**
+   * Send feedback for a message (client token mode only).
+   * Supports upvote, downvote, copy, csat, and nps feedback types.
+   * 
+   * @param feedback - The feedback request payload
+   * @returns Promise that resolves when feedback is sent successfully
+   * @throws Error if not in client token mode or if session is invalid
+   * 
+   * @example
+   * ```typescript
+   * // Message feedback (upvote/downvote/copy)
+   * await client.sendFeedback({
+   *   session_id: sessionId,
+   *   message_id: messageId,
+   *   type: 'upvote'
+   * });
+   * 
+   * // CSAT feedback (1-5 rating)
+   * await client.sendFeedback({
+   *   session_id: sessionId,
+   *   type: 'csat',
+   *   rating: 5,
+   *   comment: 'Great experience!'
+   * });
+   * 
+   * // NPS feedback (0-10 rating)
+   * await client.sendFeedback({
+   *   session_id: sessionId,
+   *   type: 'nps',
+   *   rating: 9
+   * });
+   * ```
+   */
+  public async sendFeedback(feedback: ClientFeedbackRequest): Promise<void> {
+    if (!this.isClientTokenMode()) {
+      throw new Error('sendFeedback() only available in client token mode');
+    }
+
+    const session = this.getClientSession();
+    if (!session) {
+      throw new Error('No active session. Please initialize session first.');
+    }
+
+    // Validate message_id is provided for message-level feedback types
+    const messageFeedbackTypes: ClientFeedbackType[] = ['upvote', 'downvote', 'copy'];
+    if (messageFeedbackTypes.includes(feedback.type) && !feedback.message_id) {
+      throw new Error(`message_id is required for ${feedback.type} feedback type`);
+    }
+
+    // Validate rating is provided for csat/nps feedback types
+    if (feedback.type === 'csat') {
+      if (feedback.rating === undefined || feedback.rating < 1 || feedback.rating > 5) {
+        throw new Error('CSAT rating must be between 1 and 5');
+      }
+    }
+    if (feedback.type === 'nps') {
+      if (feedback.rating === undefined || feedback.rating < 0 || feedback.rating > 10) {
+        throw new Error('NPS rating must be between 0 and 10');
+      }
+    }
+
+    if (this.debug) {
+      // eslint-disable-next-line no-console
+      console.debug("[AgentWidgetClient] sending feedback", feedback);
+    }
+
+    const response = await fetch(this.getFeedbackApiUrl(), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(feedback),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Feedback submission failed' }));
+      
+      if (response.status === 401) {
+        this.clientSession = null;
+        this.config.onSessionExpired?.();
+        throw new Error('Session expired. Please refresh to continue.');
+      }
+      
+      throw new Error(errorData.error || 'Failed to submit feedback');
+    }
+  }
+
+  /**
+   * Submit message feedback (upvote, downvote, or copy).
+   * Convenience method for sendFeedback with message-level feedback.
+   * 
+   * @param messageId - The ID of the message to provide feedback for
+   * @param type - The feedback type: 'upvote', 'downvote', or 'copy'
+   */
+  public async submitMessageFeedback(
+    messageId: string, 
+    type: 'upvote' | 'downvote' | 'copy'
+  ): Promise<void> {
+    const session = this.getClientSession();
+    if (!session) {
+      throw new Error('No active session. Please initialize session first.');
+    }
+
+    return this.sendFeedback({
+      session_id: session.sessionId,
+      message_id: messageId,
+      type,
+    });
+  }
+
+  /**
+   * Submit CSAT (Customer Satisfaction) feedback.
+   * Convenience method for sendFeedback with CSAT feedback.
+   * 
+   * @param rating - Rating from 1 to 5
+   * @param comment - Optional comment
+   */
+  public async submitCSATFeedback(rating: number, comment?: string): Promise<void> {
+    const session = this.getClientSession();
+    if (!session) {
+      throw new Error('No active session. Please initialize session first.');
+    }
+
+    return this.sendFeedback({
+      session_id: session.sessionId,
+      type: 'csat',
+      rating,
+      comment,
+    });
+  }
+
+  /**
+   * Submit NPS (Net Promoter Score) feedback.
+   * Convenience method for sendFeedback with NPS feedback.
+   * 
+   * @param rating - Rating from 0 to 10
+   * @param comment - Optional comment
+   */
+  public async submitNPSFeedback(rating: number, comment?: string): Promise<void> {
+    const session = this.getClientSession();
+    if (!session) {
+      throw new Error('No active session. Please initialize session first.');
+    }
+
+    return this.sendFeedback({
+      session_id: session.sessionId,
+      type: 'nps',
+      rating,
+      comment,
+    });
+  }
+
   /**
    * Send a message - handles both proxy and client token modes
    */
@@ -213,13 +377,22 @@ export class AgentWidgetClient {
         throw error;
       }
 
-      // Build the chat request payload
+      // Build the standard payload to get context/metadata from middleware
+      const basePayload = await this.buildPayload(options.messages);
+
+      // Build the chat request payload with message IDs for feedback tracking
       const chatRequest: ClientChatRequest = {
         session_id: session.sessionId,
         messages: options.messages.map(m => ({
+          id: m.id, // Include message ID for tracking
           role: m.role,
           content: m.rawContent || m.content,
         })),
+        // Include pre-generated assistant message ID if provided
+        ...(options.assistantMessageId && { assistant_message_id: options.assistantMessageId }),
+        // Include metadata/context from middleware if present
+        ...(basePayload.metadata && { metadata: basePayload.metadata }),
+        ...(basePayload.context && { context: basePayload.context }),
       };
 
       if (this.debug) {
@@ -269,7 +442,7 @@ export class AgentWidgetClient {
       
       // Stream the response (same SSE handling as proxy mode)
       try {
-        await this.streamResponse(response.body, onEvent);
+        await this.streamResponse(response.body, onEvent, options.assistantMessageId);
       } finally {
         onEvent({ type: "status", status: "idle" });
       }
@@ -492,7 +665,8 @@ export class AgentWidgetClient {
 
   private async streamResponse(
     body: ReadableStream<Uint8Array>,
-    onEvent: SSEHandler
+    onEvent: SSEHandler,
+    assistantMessageId?: string
   ) {
     const reader = body.getReader();
     const decoder = new TextDecoder();
@@ -585,7 +759,8 @@ export class AgentWidgetClient {
     const ensureAssistantMessage = () => {
       if (assistantMessage) return assistantMessage;
       assistantMessage = {
-        id: `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+        // Use pre-generated ID if provided, otherwise generate one
+        id: assistantMessageId ?? `assistant-${Date.now()}-${Math.random().toString(16).slice(2)}`,
         role: "assistant",
         content: "",
         createdAt: new Date().toISOString(),