vanilla-agent 1.21.0 → 1.23.0

package/src/components/feedback.ts

@@ -0,0 +1,377 @@
+/**
+ * Feedback UI components for CSAT and NPS collection
+ */
+
+export type CSATFeedbackOptions = {
+  /** Callback when user submits CSAT feedback */
+  onSubmit: (rating: number, comment?: string) => void | Promise<void>;
+  /** Callback when user dismisses the feedback form */
+  onDismiss?: () => void;
+  /** Title text */
+  title?: string;
+  /** Subtitle/question text */
+  subtitle?: string;
+  /** Placeholder for optional comment field */
+  commentPlaceholder?: string;
+  /** Submit button text */
+  submitText?: string;
+  /** Skip button text */
+  skipText?: string;
+  /** Show comment field */
+  showComment?: boolean;
+  /** Rating labels (5 items for ratings 1-5) */
+  ratingLabels?: [string, string, string, string, string];
+};
+
+export type NPSFeedbackOptions = {
+  /** Callback when user submits NPS feedback */
+  onSubmit: (rating: number, comment?: string) => void | Promise<void>;
+  /** Callback when user dismisses the feedback form */
+  onDismiss?: () => void;
+  /** Title text */
+  title?: string;
+  /** Subtitle/question text */
+  subtitle?: string;
+  /** Placeholder for optional comment field */
+  commentPlaceholder?: string;
+  /** Submit button text */
+  submitText?: string;
+  /** Skip button text */
+  skipText?: string;
+  /** Show comment field */
+  showComment?: boolean;
+  /** Low label (left side) */
+  lowLabel?: string;
+  /** High label (right side) */
+  highLabel?: string;
+};
+
+const defaultCSATLabels: [string, string, string, string, string] = [
+  'Very dissatisfied',
+  'Dissatisfied',
+  'Neutral',
+  'Satisfied',
+  'Very satisfied'
+];
+
+/**
+ * Create a CSAT (Customer Satisfaction) feedback form
+ * Rating scale: 1-5
+ */
+export function createCSATFeedback(options: CSATFeedbackOptions): HTMLElement {
+  const {
+    onSubmit,
+    onDismiss,
+    title = 'How satisfied are you?',
+    subtitle = 'Please rate your experience',
+    commentPlaceholder = 'Share your thoughts (optional)...',
+    submitText = 'Submit',
+    skipText = 'Skip',
+    showComment = true,
+    ratingLabels = defaultCSATLabels,
+  } = options;
+
+  const container = document.createElement('div');
+  container.className = 'tvw-feedback-container tvw-feedback-csat';
+  container.setAttribute('role', 'dialog');
+  container.setAttribute('aria-label', 'Customer satisfaction feedback');
+
+  let selectedRating: number | null = null;
+
+  // Create inner content
+  const content = document.createElement('div');
+  content.className = 'tvw-feedback-content';
+
+  // Header
+  const header = document.createElement('div');
+  header.className = 'tvw-feedback-header';
+  
+  const titleEl = document.createElement('h3');
+  titleEl.className = 'tvw-feedback-title';
+  titleEl.textContent = title;
+  header.appendChild(titleEl);
+
+  const subtitleEl = document.createElement('p');
+  subtitleEl.className = 'tvw-feedback-subtitle';
+  subtitleEl.textContent = subtitle;
+  header.appendChild(subtitleEl);
+
+  content.appendChild(header);
+
+  // Rating buttons (1-5 stars or numbers)
+  const ratingContainer = document.createElement('div');
+  ratingContainer.className = 'tvw-feedback-rating tvw-feedback-rating-csat';
+  ratingContainer.setAttribute('role', 'radiogroup');
+  ratingContainer.setAttribute('aria-label', 'Satisfaction rating from 1 to 5');
+
+  const ratingButtons: HTMLButtonElement[] = [];
+
+  for (let i = 1; i <= 5; i++) {
+    const ratingButton = document.createElement('button');
+    ratingButton.type = 'button';
+    ratingButton.className = 'tvw-feedback-rating-btn tvw-feedback-star-btn';
+    ratingButton.setAttribute('role', 'radio');
+    ratingButton.setAttribute('aria-checked', 'false');
+    ratingButton.setAttribute('aria-label', `${i} star${i > 1 ? 's' : ''}: ${ratingLabels[i - 1]}`);
+    ratingButton.title = ratingLabels[i - 1];
+    ratingButton.dataset.rating = String(i);
+
+    // Star icon (filled when selected)
+    ratingButton.innerHTML = `
+      <svg class="tvw-feedback-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+      </svg>
+    `;
+
+    ratingButton.addEventListener('click', () => {
+      selectedRating = i;
+      ratingButtons.forEach((btn, index) => {
+        const isSelected = index < i;
+        btn.classList.toggle('selected', isSelected);
+        btn.setAttribute('aria-checked', index === i - 1 ? 'true' : 'false');
+      });
+    });
+
+    ratingButtons.push(ratingButton);
+    ratingContainer.appendChild(ratingButton);
+  }
+
+  content.appendChild(ratingContainer);
+
+  // Comment field
+  let commentTextarea: HTMLTextAreaElement | null = null;
+  if (showComment) {
+    const commentContainer = document.createElement('div');
+    commentContainer.className = 'tvw-feedback-comment-container';
+    
+    commentTextarea = document.createElement('textarea');
+    commentTextarea.className = 'tvw-feedback-comment';
+    commentTextarea.placeholder = commentPlaceholder;
+    commentTextarea.rows = 3;
+    commentTextarea.setAttribute('aria-label', 'Additional comments');
+    
+    commentContainer.appendChild(commentTextarea);
+    content.appendChild(commentContainer);
+  }
+
+  // Action buttons
+  const actions = document.createElement('div');
+  actions.className = 'tvw-feedback-actions';
+
+  const skipButton = document.createElement('button');
+  skipButton.type = 'button';
+  skipButton.className = 'tvw-feedback-btn tvw-feedback-btn-skip';
+  skipButton.textContent = skipText;
+  skipButton.addEventListener('click', () => {
+    onDismiss?.();
+    container.remove();
+  });
+
+  const submitButton = document.createElement('button');
+  submitButton.type = 'button';
+  submitButton.className = 'tvw-feedback-btn tvw-feedback-btn-submit';
+  submitButton.textContent = submitText;
+  submitButton.addEventListener('click', async () => {
+    if (selectedRating === null) {
+      // Shake the rating container to indicate selection required
+      ratingContainer.classList.add('tvw-feedback-shake');
+      setTimeout(() => ratingContainer.classList.remove('tvw-feedback-shake'), 500);
+      return;
+    }
+    
+    submitButton.disabled = true;
+    submitButton.textContent = 'Submitting...';
+    
+    try {
+      const comment = commentTextarea?.value.trim() || undefined;
+      await onSubmit(selectedRating, comment);
+      container.remove();
+    } catch (error) {
+      submitButton.disabled = false;
+      submitButton.textContent = submitText;
+      // eslint-disable-next-line no-console
+      console.error('[CSAT Feedback] Failed to submit:', error);
+    }
+  });
+
+  actions.appendChild(skipButton);
+  actions.appendChild(submitButton);
+  content.appendChild(actions);
+
+  container.appendChild(content);
+
+  return container;
+}
+
+/**
+ * Create an NPS (Net Promoter Score) feedback form
+ * Rating scale: 0-10
+ */
+export function createNPSFeedback(options: NPSFeedbackOptions): HTMLElement {
+  const {
+    onSubmit,
+    onDismiss,
+    title = 'How likely are you to recommend us?',
+    subtitle = 'On a scale of 0 to 10',
+    commentPlaceholder = 'What could we do better? (optional)...',
+    submitText = 'Submit',
+    skipText = 'Skip',
+    showComment = true,
+    lowLabel = 'Not likely',
+    highLabel = 'Very likely',
+  } = options;
+
+  const container = document.createElement('div');
+  container.className = 'tvw-feedback-container tvw-feedback-nps';
+  container.setAttribute('role', 'dialog');
+  container.setAttribute('aria-label', 'Net Promoter Score feedback');
+
+  let selectedRating: number | null = null;
+
+  // Create inner content
+  const content = document.createElement('div');
+  content.className = 'tvw-feedback-content';
+
+  // Header
+  const header = document.createElement('div');
+  header.className = 'tvw-feedback-header';
+  
+  const titleEl = document.createElement('h3');
+  titleEl.className = 'tvw-feedback-title';
+  titleEl.textContent = title;
+  header.appendChild(titleEl);
+
+  const subtitleEl = document.createElement('p');
+  subtitleEl.className = 'tvw-feedback-subtitle';
+  subtitleEl.textContent = subtitle;
+  header.appendChild(subtitleEl);
+
+  content.appendChild(header);
+
+  // Rating buttons (0-10)
+  const ratingContainer = document.createElement('div');
+  ratingContainer.className = 'tvw-feedback-rating tvw-feedback-rating-nps';
+  ratingContainer.setAttribute('role', 'radiogroup');
+  ratingContainer.setAttribute('aria-label', 'Likelihood rating from 0 to 10');
+
+  // Labels row
+  const labelsRow = document.createElement('div');
+  labelsRow.className = 'tvw-feedback-labels';
+  
+  const lowLabelEl = document.createElement('span');
+  lowLabelEl.className = 'tvw-feedback-label-low';
+  lowLabelEl.textContent = lowLabel;
+  
+  const highLabelEl = document.createElement('span');
+  highLabelEl.className = 'tvw-feedback-label-high';
+  highLabelEl.textContent = highLabel;
+  
+  labelsRow.appendChild(lowLabelEl);
+  labelsRow.appendChild(highLabelEl);
+  
+  // Numbers row
+  const numbersRow = document.createElement('div');
+  numbersRow.className = 'tvw-feedback-numbers';
+
+  const ratingButtons: HTMLButtonElement[] = [];
+
+  for (let i = 0; i <= 10; i++) {
+    const ratingButton = document.createElement('button');
+    ratingButton.type = 'button';
+    ratingButton.className = 'tvw-feedback-rating-btn tvw-feedback-number-btn';
+    ratingButton.setAttribute('role', 'radio');
+    ratingButton.setAttribute('aria-checked', 'false');
+    ratingButton.setAttribute('aria-label', `Rating ${i} out of 10`);
+    ratingButton.textContent = String(i);
+    ratingButton.dataset.rating = String(i);
+
+    // Color coding: detractors (0-6), passives (7-8), promoters (9-10)
+    if (i <= 6) {
+      ratingButton.classList.add('tvw-feedback-detractor');
+    } else if (i <= 8) {
+      ratingButton.classList.add('tvw-feedback-passive');
+    } else {
+      ratingButton.classList.add('tvw-feedback-promoter');
+    }
+
+    ratingButton.addEventListener('click', () => {
+      selectedRating = i;
+      ratingButtons.forEach((btn, index) => {
+        btn.classList.toggle('selected', index === i);
+        btn.setAttribute('aria-checked', index === i ? 'true' : 'false');
+      });
+    });
+
+    ratingButtons.push(ratingButton);
+    numbersRow.appendChild(ratingButton);
+  }
+
+  ratingContainer.appendChild(labelsRow);
+  ratingContainer.appendChild(numbersRow);
+  content.appendChild(ratingContainer);
+
+  // Comment field
+  let commentTextarea: HTMLTextAreaElement | null = null;
+  if (showComment) {
+    const commentContainer = document.createElement('div');
+    commentContainer.className = 'tvw-feedback-comment-container';
+    
+    commentTextarea = document.createElement('textarea');
+    commentTextarea.className = 'tvw-feedback-comment';
+    commentTextarea.placeholder = commentPlaceholder;
+    commentTextarea.rows = 3;
+    commentTextarea.setAttribute('aria-label', 'Additional comments');
+    
+    commentContainer.appendChild(commentTextarea);
+    content.appendChild(commentContainer);
+  }
+
+  // Action buttons
+  const actions = document.createElement('div');
+  actions.className = 'tvw-feedback-actions';
+
+  const skipButton = document.createElement('button');
+  skipButton.type = 'button';
+  skipButton.className = 'tvw-feedback-btn tvw-feedback-btn-skip';
+  skipButton.textContent = skipText;
+  skipButton.addEventListener('click', () => {
+    onDismiss?.();
+    container.remove();
+  });
+
+  const submitButton = document.createElement('button');
+  submitButton.type = 'button';
+  submitButton.className = 'tvw-feedback-btn tvw-feedback-btn-submit';
+  submitButton.textContent = submitText;
+  submitButton.addEventListener('click', async () => {
+    if (selectedRating === null) {
+      // Shake the rating container to indicate selection required
+      numbersRow.classList.add('tvw-feedback-shake');
+      setTimeout(() => numbersRow.classList.remove('tvw-feedback-shake'), 500);
+      return;
+    }
+    
+    submitButton.disabled = true;
+    submitButton.textContent = 'Submitting...';
+    
+    try {
+      const comment = commentTextarea?.value.trim() || undefined;
+      await onSubmit(selectedRating, comment);
+      container.remove();
+    } catch (error) {
+      submitButton.disabled = false;
+      submitButton.textContent = submitText;
+      // eslint-disable-next-line no-console
+      console.error('[NPS Feedback] Failed to submit:', error);
+    }
+  });
+
+  actions.appendChild(skipButton);
+  actions.appendChild(submitButton);
+  content.appendChild(actions);
+
+  container.appendChild(content);
+
+  return container;
+}
+

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,
+    },
   };
 }