vanilla-agent 1.9.0 → 1.11.0

package/src/components/header-layouts.ts

@@ -0,0 +1,303 @@
+import { createElement } from "../utils/dom";
+import { renderLucideIcon } from "../utils/icons";
+import { AgentWidgetConfig, AgentWidgetHeaderLayoutConfig } from "../types";
+import { buildHeader, HeaderElements, attachHeaderToContainer } from "./header-builder";
+
+export interface HeaderLayoutContext {
+  config: AgentWidgetConfig;
+  showClose?: boolean;
+  onClose?: () => void;
+  onClearChat?: () => void;
+}
+
+export type HeaderLayoutRenderer = (context: HeaderLayoutContext) => HeaderElements;
+
+/**
+ * Build default header layout
+ * Full header with icon, title, subtitle, clear chat, and close button
+ */
+export const buildDefaultHeader: HeaderLayoutRenderer = (context) => {
+  return buildHeader({
+    config: context.config,
+    showClose: context.showClose,
+    onClose: context.onClose,
+    onClearChat: context.onClearChat
+  });
+};
+
+/**
+ * Build minimal header layout
+ * Simplified layout with just title and close button
+ */
+export const buildMinimalHeader: HeaderLayoutRenderer = (context) => {
+  const { config, showClose = true, onClose } = context;
+  const launcher = config?.launcher ?? {};
+
+  const header = createElement(
+    "div",
+    "tvw-flex tvw-items-center tvw-justify-between tvw-bg-cw-surface tvw-px-6 tvw-py-4 tvw-border-b-cw-divider"
+  );
+
+  // Title only (no icon, no subtitle)
+  const title = createElement("span", "tvw-text-base tvw-font-semibold");
+  title.textContent = launcher.title ?? "Chat Assistant";
+
+  header.appendChild(title);
+
+  // Close button
+  const closeButtonSize = launcher.closeButtonSize ?? "32px";
+  const closeButtonWrapper = createElement("div", "");
+
+  const closeButton = createElement(
+    "button",
+    "tvw-inline-flex tvw-items-center tvw-justify-center tvw-rounded-full tvw-text-cw-muted hover:tvw-bg-gray-100 tvw-cursor-pointer tvw-border-none"
+  ) as HTMLButtonElement;
+  closeButton.style.height = closeButtonSize;
+  closeButton.style.width = closeButtonSize;
+  closeButton.type = "button";
+  closeButton.setAttribute("aria-label", "Close chat");
+  closeButton.style.display = showClose ? "" : "none";
+
+  const closeButtonIconName = launcher.closeButtonIconName ?? "x";
+  const closeIconSvg = renderLucideIcon(
+    closeButtonIconName,
+    "20px",
+    launcher.closeButtonColor || "",
+    2
+  );
+  if (closeIconSvg) {
+    closeButton.appendChild(closeIconSvg);
+  } else {
+    closeButton.textContent = "×";
+  }
+
+  if (onClose) {
+    closeButton.addEventListener("click", onClose);
+  }
+
+  closeButtonWrapper.appendChild(closeButton);
+  header.appendChild(closeButtonWrapper);
+
+  // Create placeholder elements for compatibility
+  const iconHolder = createElement("div");
+  iconHolder.style.display = "none";
+  const headerSubtitle = createElement("span");
+  headerSubtitle.style.display = "none";
+
+  return {
+    header,
+    iconHolder,
+    headerTitle: title,
+    headerSubtitle,
+    closeButton,
+    closeButtonWrapper,
+    clearChatButton: null,
+    clearChatButtonWrapper: null
+  };
+};
+
+/**
+ * Build expanded header layout
+ * Full branding area with additional space for custom content
+ */
+export const buildExpandedHeader: HeaderLayoutRenderer = (context) => {
+  const { config, showClose = true, onClose, onClearChat } = context;
+  const launcher = config?.launcher ?? {};
+
+  const header = createElement(
+    "div",
+    "tvw-flex tvw-flex-col tvw-bg-cw-surface tvw-px-6 tvw-py-5 tvw-border-b-cw-divider"
+  );
+
+  // Top row: icon + text + buttons
+  const topRow = createElement(
+    "div",
+    "tvw-flex tvw-items-center tvw-gap-3"
+  );
+
+  // Icon
+  const headerIconSize = launcher.headerIconSize ?? "56px";
+  const iconHolder = createElement(
+    "div",
+    "tvw-flex tvw-items-center tvw-justify-center tvw-rounded-xl tvw-bg-cw-primary tvw-text-white tvw-text-2xl"
+  );
+  iconHolder.style.height = headerIconSize;
+  iconHolder.style.width = headerIconSize;
+
+  const headerIconName = launcher.headerIconName;
+  if (headerIconName) {
+    const iconSize = parseFloat(headerIconSize) || 24;
+    const iconSvg = renderLucideIcon(headerIconName, iconSize * 0.5, "#ffffff", 2);
+    if (iconSvg) {
+      iconHolder.replaceChildren(iconSvg);
+    } else {
+      iconHolder.textContent = launcher.agentIconText ?? "💬";
+    }
+  } else if (launcher.iconUrl) {
+    const img = createElement("img") as HTMLImageElement;
+    img.src = launcher.iconUrl;
+    img.alt = "";
+    img.className = "tvw-rounded-xl tvw-object-cover";
+    img.style.height = headerIconSize;
+    img.style.width = headerIconSize;
+    iconHolder.replaceChildren(img);
+  } else {
+    iconHolder.textContent = launcher.agentIconText ?? "💬";
+  }
+
+  // Title and subtitle
+  const headerCopy = createElement("div", "tvw-flex tvw-flex-col tvw-flex-1");
+  const title = createElement("span", "tvw-text-lg tvw-font-semibold");
+  title.textContent = launcher.title ?? "Chat Assistant";
+  const subtitle = createElement("span", "tvw-text-sm tvw-text-cw-muted");
+  subtitle.textContent = launcher.subtitle ?? "Here to help you get answers fast";
+  headerCopy.append(title, subtitle);
+
+  topRow.append(iconHolder, headerCopy);
+
+  // Close button
+  const closeButtonSize = launcher.closeButtonSize ?? "32px";
+  const closeButtonWrapper = createElement("div", "");
+
+  const closeButton = createElement(
+    "button",
+    "tvw-inline-flex tvw-items-center tvw-justify-center tvw-rounded-full tvw-text-cw-muted hover:tvw-bg-gray-100 tvw-cursor-pointer tvw-border-none"
+  ) as HTMLButtonElement;
+  closeButton.style.height = closeButtonSize;
+  closeButton.style.width = closeButtonSize;
+  closeButton.type = "button";
+  closeButton.setAttribute("aria-label", "Close chat");
+  closeButton.style.display = showClose ? "" : "none";
+
+  const closeButtonIconName = launcher.closeButtonIconName ?? "x";
+  const closeIconSvg = renderLucideIcon(
+    closeButtonIconName,
+    "20px",
+    launcher.closeButtonColor || "",
+    2
+  );
+  if (closeIconSvg) {
+    closeButton.appendChild(closeIconSvg);
+  } else {
+    closeButton.textContent = "×";
+  }
+
+  if (onClose) {
+    closeButton.addEventListener("click", onClose);
+  }
+
+  closeButtonWrapper.appendChild(closeButton);
+  topRow.appendChild(closeButtonWrapper);
+
+  header.appendChild(topRow);
+
+  // Bottom row: additional space for status or branding
+  const bottomRow = createElement(
+    "div",
+    "tvw-mt-3 tvw-pt-3 tvw-border-t tvw-border-gray-100 tvw-text-xs tvw-text-cw-muted"
+  );
+  bottomRow.textContent = "Online and ready to help";
+  header.appendChild(bottomRow);
+
+  return {
+    header,
+    iconHolder,
+    headerTitle: title,
+    headerSubtitle: subtitle,
+    closeButton,
+    closeButtonWrapper,
+    clearChatButton: null,
+    clearChatButtonWrapper: null
+  };
+};
+
+/**
+ * Header layout registry
+ * Maps layout names to their renderer functions
+ */
+export const headerLayouts: Record<string, HeaderLayoutRenderer> = {
+  default: buildDefaultHeader,
+  minimal: buildMinimalHeader,
+  expanded: buildExpandedHeader
+};
+
+/**
+ * Get header layout renderer by name
+ */
+export const getHeaderLayout = (layoutName: string): HeaderLayoutRenderer => {
+  return headerLayouts[layoutName] ?? headerLayouts.default;
+};
+
+/**
+ * Build header based on layout configuration
+ * Applies layout config settings to determine which layout to use
+ */
+export const buildHeaderWithLayout = (
+  config: AgentWidgetConfig,
+  layoutConfig?: AgentWidgetHeaderLayoutConfig,
+  context?: Partial<HeaderLayoutContext>
+): HeaderElements => {
+  // If custom render is provided, use it
+  if (layoutConfig?.render) {
+    const customHeader = layoutConfig.render({
+      config,
+      onClose: context?.onClose,
+      onClearChat: context?.onClearChat
+    });
+    
+    // Wrap in HeaderElements structure
+    const iconHolder = createElement("div");
+    iconHolder.style.display = "none";
+    const headerTitle = createElement("span");
+    const headerSubtitle = createElement("span");
+    const closeButton = createElement("button") as HTMLButtonElement;
+    closeButton.style.display = "none";
+    const closeButtonWrapper = createElement("div");
+    closeButtonWrapper.style.display = "none";
+    
+    return {
+      header: customHeader,
+      iconHolder,
+      headerTitle,
+      headerSubtitle,
+      closeButton,
+      closeButtonWrapper,
+      clearChatButton: null,
+      clearChatButtonWrapper: null
+    };
+  }
+
+  // Get layout renderer
+  const layoutName = layoutConfig?.layout ?? "default";
+  const layoutRenderer = getHeaderLayout(layoutName);
+
+  // Build header with layout
+  const headerElements = layoutRenderer({
+    config,
+    showClose: layoutConfig?.showCloseButton ?? context?.showClose ?? true,
+    onClose: context?.onClose,
+    onClearChat: context?.onClearChat
+  });
+
+  // Apply visibility settings from layout config
+  if (layoutConfig) {
+    if (layoutConfig.showIcon === false) {
+      headerElements.iconHolder.style.display = "none";
+    }
+    if (layoutConfig.showTitle === false) {
+      headerElements.headerTitle.style.display = "none";
+    }
+    if (layoutConfig.showSubtitle === false) {
+      headerElements.headerSubtitle.style.display = "none";
+    }
+    if (layoutConfig.showCloseButton === false) {
+      headerElements.closeButton.style.display = "none";
+    }
+    if (layoutConfig.showClearChat === false && headerElements.clearChatButtonWrapper) {
+      headerElements.clearChatButtonWrapper.style.display = "none";
+    }
+  }
+
+  return headerElements;
+};
+

package/src/components/message-bubble.ts

@@ -1,5 +1,10 @@
 import { createElement } from "../utils/dom";
-import { AgentWidgetMessage } from "../types";
+import { 
+  AgentWidgetMessage, 
+  AgentWidgetMessageLayoutConfig,
+  AgentWidgetAvatarConfig,
+  AgentWidgetTimestampConfig
+} from "../types";
 
 export type MessageTransform = (context: {
   text: string;
@@ -37,40 +42,188 @@ export const createTypingIndicator = (): HTMLElement => {
   return container;
 };
 
-export const createStandardBubble = (
-  message: AgentWidgetMessage,
-  transform: MessageTransform
+/**
+ * Create an avatar element
+ */
+const createAvatar = (
+  avatarConfig: AgentWidgetAvatarConfig,
+  role: "user" | "assistant"
 ): HTMLElement => {
-  const classes = [
-    "vanilla-message-bubble",
-    "tvw-max-w-[85%]",
-    "tvw-rounded-2xl",
-    "tvw-text-sm",
-    "tvw-leading-relaxed",
-    "tvw-shadow-sm"
-  ];
-
-  if (message.role === "user") {
-    classes.push(
-      "vanilla-message-user-bubble",
-      "tvw-ml-auto",
-      "tvw-bg-cw-accent",
-      "tvw-text-white",
-      "tvw-px-5",
-      "tvw-py-3"
-    );
+  const avatar = createElement(
+    "div",
+    "tvw-flex-shrink-0 tvw-w-8 tvw-h-8 tvw-rounded-full tvw-flex tvw-items-center tvw-justify-center tvw-text-sm"
+  );
+
+  const avatarContent = role === "user" 
+    ? avatarConfig.userAvatar 
+    : avatarConfig.assistantAvatar;
+
+  if (avatarContent) {
+    // Check if it's a URL or emoji/text
+    if (avatarContent.startsWith("http") || avatarContent.startsWith("/") || avatarContent.startsWith("data:")) {
+      const img = createElement("img") as HTMLImageElement;
+      img.src = avatarContent;
+      img.alt = role === "user" ? "User" : "Assistant";
+      img.className = "tvw-w-full tvw-h-full tvw-rounded-full tvw-object-cover";
+      avatar.appendChild(img);
+    } else {
+      // Emoji or text
+      avatar.textContent = avatarContent;
+      avatar.classList.add(
+        role === "user" ? "tvw-bg-cw-accent" : "tvw-bg-cw-primary",
+        "tvw-text-white"
+      );
+    }
   } else {
-    classes.push(
-      "vanilla-message-assistant-bubble",
-      "tvw-bg-cw-surface",
-      "tvw-border",
-      "tvw-border-cw-message-border",
-      "tvw-text-cw-primary",
-      "tvw-px-5",
-      "tvw-py-3"
+    // Default avatar
+    avatar.textContent = role === "user" ? "U" : "A";
+    avatar.classList.add(
+      role === "user" ? "tvw-bg-cw-accent" : "tvw-bg-cw-primary",
+      "tvw-text-white"
     );
   }
 
+  return avatar;
+};
+
+/**
+ * Create a timestamp element
+ */
+const createTimestamp = (
+  message: AgentWidgetMessage,
+  timestampConfig: AgentWidgetTimestampConfig
+): HTMLElement => {
+  const timestamp = createElement(
+    "div",
+    "tvw-text-xs tvw-text-cw-muted"
+  );
+
+  const date = new Date(message.createdAt);
+  
+  if (timestampConfig.format) {
+    timestamp.textContent = timestampConfig.format(date);
+  } else {
+    // Default format: HH:MM
+    timestamp.textContent = date.toLocaleTimeString([], { 
+      hour: "2-digit", 
+      minute: "2-digit" 
+    });
+  }
+
+  return timestamp;
+};
+
+/**
+ * Get bubble classes based on layout preset
+ */
+const getBubbleClasses = (
+  role: "user" | "assistant" | "system",
+  layout: AgentWidgetMessageLayoutConfig["layout"] = "bubble"
+): string[] => {
+  const baseClasses = ["vanilla-message-bubble", "tvw-max-w-[85%]"];
+
+  switch (layout) {
+    case "flat":
+      // Flat layout: no bubble styling, just text
+      if (role === "user") {
+        baseClasses.push(
+          "vanilla-message-user-bubble",
+          "tvw-ml-auto",
+          "tvw-text-cw-primary",
+          "tvw-py-2"
+        );
+      } else {
+        baseClasses.push(
+          "vanilla-message-assistant-bubble",
+          "tvw-text-cw-primary",
+          "tvw-py-2"
+        );
+      }
+      break;
+
+    case "minimal":
+      // Minimal layout: reduced padding and styling
+      baseClasses.push(
+        "tvw-text-sm",
+        "tvw-leading-relaxed"
+      );
+      if (role === "user") {
+        baseClasses.push(
+          "vanilla-message-user-bubble",
+          "tvw-ml-auto",
+          "tvw-bg-cw-accent",
+          "tvw-text-white",
+          "tvw-px-3",
+          "tvw-py-2",
+          "tvw-rounded-lg"
+        );
+      } else {
+        baseClasses.push(
+          "vanilla-message-assistant-bubble",
+          "tvw-bg-cw-surface",
+          "tvw-text-cw-primary",
+          "tvw-px-3",
+          "tvw-py-2",
+          "tvw-rounded-lg"
+        );
+      }
+      break;
+
+    case "bubble":
+    default:
+      // Default bubble layout
+      baseClasses.push(
+        "tvw-rounded-2xl",
+        "tvw-text-sm",
+        "tvw-leading-relaxed",
+        "tvw-shadow-sm"
+      );
+      if (role === "user") {
+        baseClasses.push(
+          "vanilla-message-user-bubble",
+          "tvw-ml-auto",
+          "tvw-bg-cw-accent",
+          "tvw-text-white",
+          "tvw-px-5",
+          "tvw-py-3"
+        );
+      } else {
+        baseClasses.push(
+          "vanilla-message-assistant-bubble",
+          "tvw-bg-cw-surface",
+          "tvw-border",
+          "tvw-border-cw-message-border",
+          "tvw-text-cw-primary",
+          "tvw-px-5",
+          "tvw-py-3"
+        );
+      }
+      break;
+  }
+
+  return baseClasses;
+};
+
+/**
+ * Create standard message bubble
+ * Supports layout configuration for avatars, timestamps, and visual presets
+ */
+export const createStandardBubble = (
+  message: AgentWidgetMessage,
+  transform: MessageTransform,
+  layoutConfig?: AgentWidgetMessageLayoutConfig
+): HTMLElement => {
+  const config = layoutConfig ?? {};
+  const layout = config.layout ?? "bubble";
+  const avatarConfig = config.avatar;
+  const timestampConfig = config.timestamp;
+  const showAvatar = avatarConfig?.show ?? false;
+  const showTimestamp = timestampConfig?.show ?? false;
+  const avatarPosition = avatarConfig?.position ?? "left";
+  const timestampPosition = timestampConfig?.position ?? "below";
+
+  // Create the bubble element
+  const classes = getBubbleClasses(message.role, layout);
   const bubble = createElement("div", classes.join(" "));
 
   // Add message content
@@ -81,21 +234,85 @@ export const createStandardBubble = (
     streaming: Boolean(message.streaming),
     raw: message.rawContent
   });
+
+  // Add inline timestamp if configured
+  if (showTimestamp && timestampPosition === "inline" && message.createdAt) {
+    const timestamp = createTimestamp(message, timestampConfig!);
+    timestamp.classList.add("tvw-ml-2", "tvw-inline");
+    contentDiv.appendChild(timestamp);
+  }
+
   bubble.appendChild(contentDiv);
 
+  // Add timestamp below if configured
+  if (showTimestamp && timestampPosition === "below" && message.createdAt) {
+    const timestamp = createTimestamp(message, timestampConfig!);
+    timestamp.classList.add("tvw-mt-1");
+    bubble.appendChild(timestamp);
+  }
+
   // Add typing indicator if this is a streaming assistant message
-  // Show it when streaming starts (even if content is empty), hide it once content appears
   if (message.streaming && message.role === "assistant") {
-    // Only show typing indicator if content is empty or just starting
-    // Hide it once we have substantial content
     if (!message.content || !message.content.trim()) {
       const typingIndicator = createTypingIndicator();
       bubble.appendChild(typingIndicator);
     }
   }
 
-  return bubble;
+  // If no avatar needed, return bubble directly
+  if (!showAvatar || message.role === "system") {
+    return bubble;
+  }
+
+  // Create wrapper with avatar
+  const wrapper = createElement(
+    "div",
+    `tvw-flex tvw-gap-2 ${message.role === "user" ? "tvw-flex-row-reverse" : ""}`
+  );
+
+  const avatar = createAvatar(avatarConfig!, message.role);
+
+  if (avatarPosition === "right" || (avatarPosition === "left" && message.role === "user")) {
+    wrapper.append(bubble, avatar);
+  } else {
+    wrapper.append(avatar, bubble);
+  }
+
+  // Adjust bubble max-width when avatar is present
+  bubble.classList.remove("tvw-max-w-[85%]");
+  bubble.classList.add("tvw-max-w-[calc(85%-2.5rem)]");
+
+  return wrapper;
 };
 
+/**
+ * Create bubble with custom renderer support
+ * Uses custom renderer if provided in layout config, otherwise falls back to standard bubble
+ */
+export const createBubbleWithLayout = (
+  message: AgentWidgetMessage,
+  transform: MessageTransform,
+  layoutConfig?: AgentWidgetMessageLayoutConfig
+): HTMLElement => {
+  const config = layoutConfig ?? {};
 
+  // Check for custom renderers
+  if (message.role === "user" && config.renderUserMessage) {
+    return config.renderUserMessage({
+      message,
+      config: {} as any, // Will be populated by caller
+      streaming: Boolean(message.streaming)
+    });
+  }
 
+  if (message.role === "assistant" && config.renderAssistantMessage) {
+    return config.renderAssistantMessage({
+      message,
+      config: {} as any, // Will be populated by caller
+      streaming: Boolean(message.streaming)
+    });
+  }
+
+  // Fall back to standard bubble
+  return createStandardBubble(message, transform, layoutConfig);
+};