@runtypelabs/persona 1.36.0

package/src/components/tool-bubble.ts

@@ -0,0 +1,288 @@
+import { createElement } from "../utils/dom";
+import { AgentWidgetMessage, AgentWidgetConfig } from "../types";
+import { formatUnknownValue, describeToolTitle } from "../utils/formatting";
+import { renderLucideIcon } from "../utils/icons";
+
+// Expansion state per widget instance
+export const toolExpansionState = new Set<string>();
+
+// Helper function to update tool bubble UI after expansion state changes
+export const updateToolBubbleUI = (messageId: string, bubble: HTMLElement, config?: AgentWidgetConfig): void => {
+  const expanded = toolExpansionState.has(messageId);
+  const toolCallConfig = config?.toolCall ?? {};
+  const header = bubble.querySelector('button[data-expand-header="true"]') as HTMLElement;
+  const content = bubble.querySelector('.tvw-border-t') as HTMLElement;
+  
+  if (!header || !content) return;
+  
+  header.setAttribute("aria-expanded", expanded ? "true" : "false");
+  
+  // Find toggle icon container - it's the direct child div of headerMeta (which has tvw-ml-auto)
+  const headerMeta = header.querySelector('.tvw-ml-auto') as HTMLElement;
+  const toggleIcon = headerMeta?.querySelector(':scope > .tvw-flex.tvw-items-center') as HTMLElement;
+  if (toggleIcon) {
+    toggleIcon.innerHTML = "";
+    const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
+    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+    if (chevronIcon) {
+      toggleIcon.appendChild(chevronIcon);
+    } else {
+      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    }
+  }
+  
+  content.style.display = expanded ? "" : "none";
+};
+
+export const createToolBubble = (message: AgentWidgetMessage, config?: AgentWidgetConfig): HTMLElement => {
+  const tool = message.toolCall;
+  const toolCallConfig = config?.toolCall ?? {};
+  
+  const bubble = createElement(
+    "div",
+    [
+      "vanilla-message-bubble",
+      "vanilla-tool-bubble",
+      "tvw-w-full",
+      "tvw-max-w-[85%]",
+      "tvw-rounded-2xl",
+      "tvw-bg-cw-surface",
+      "tvw-border",
+      "tvw-border-cw-message-border",
+      "tvw-text-cw-primary",
+      "tvw-shadow-sm",
+      "tvw-overflow-hidden",
+      "tvw-px-0",
+      "tvw-py-0"
+    ].join(" ")
+  );
+  // Set id for idiomorph matching
+  bubble.id = `bubble-${message.id}`;
+  bubble.setAttribute("data-message-id", message.id);
+
+  // Apply bubble-level styles
+  if (toolCallConfig.backgroundColor) {
+    bubble.style.backgroundColor = toolCallConfig.backgroundColor;
+  }
+  if (toolCallConfig.borderColor) {
+    bubble.style.borderColor = toolCallConfig.borderColor;
+  }
+  if (toolCallConfig.borderWidth) {
+    bubble.style.borderWidth = toolCallConfig.borderWidth;
+  }
+  if (toolCallConfig.borderRadius) {
+    bubble.style.borderRadius = toolCallConfig.borderRadius;
+  }
+
+  if (!tool) {
+    return bubble;
+  }
+
+  let expanded = toolExpansionState.has(message.id);
+  const header = createElement(
+    "button",
+    "tvw-flex tvw-w-full tvw-items-center tvw-justify-between tvw-gap-3 tvw-bg-transparent tvw-px-4 tvw-py-3 tvw-text-left tvw-cursor-pointer tvw-border-none"
+  ) as HTMLButtonElement;
+  header.type = "button";
+  header.setAttribute("aria-expanded", expanded ? "true" : "false");
+  header.setAttribute("data-expand-header", "true");
+  header.setAttribute("data-bubble-type", "tool");
+
+  // Apply header styles
+  if (toolCallConfig.headerBackgroundColor) {
+    header.style.backgroundColor = toolCallConfig.headerBackgroundColor;
+  }
+  if (toolCallConfig.headerPaddingX) {
+    header.style.paddingLeft = toolCallConfig.headerPaddingX;
+    header.style.paddingRight = toolCallConfig.headerPaddingX;
+  }
+  if (toolCallConfig.headerPaddingY) {
+    header.style.paddingTop = toolCallConfig.headerPaddingY;
+    header.style.paddingBottom = toolCallConfig.headerPaddingY;
+  }
+
+  const headerContent = createElement("div", "tvw-flex tvw-flex-col tvw-text-left");
+  const title = createElement("span", "tvw-text-xs tvw-text-cw-primary");
+  if (toolCallConfig.headerTextColor) {
+    title.style.color = toolCallConfig.headerTextColor;
+  }
+  title.textContent = describeToolTitle(tool);
+  headerContent.appendChild(title);
+
+  const toggleIcon = createElement("div", "tvw-flex tvw-items-center");
+  const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
+  const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+  if (chevronIcon) {
+    toggleIcon.appendChild(chevronIcon);
+  } else {
+    // Fallback to text if icon fails
+    toggleIcon.textContent = expanded ? "Hide" : "Show";
+  }
+
+  const headerMeta = createElement("div", "tvw-flex tvw-items-center tvw-gap-2 tvw-ml-auto");
+  headerMeta.append(toggleIcon);
+
+  header.append(headerContent, headerMeta);
+
+  const content = createElement(
+    "div",
+    "tvw-border-t tvw-border-gray-200 tvw-bg-gray-50 tvw-space-y-3 tvw-px-4 tvw-py-3"
+  );
+  content.style.display = expanded ? "" : "none";
+
+  // Apply content styles
+  if (toolCallConfig.contentBackgroundColor) {
+    content.style.backgroundColor = toolCallConfig.contentBackgroundColor;
+  }
+  if (toolCallConfig.contentTextColor) {
+    content.style.color = toolCallConfig.contentTextColor;
+  }
+  if (toolCallConfig.contentPaddingX) {
+    content.style.paddingLeft = toolCallConfig.contentPaddingX;
+    content.style.paddingRight = toolCallConfig.contentPaddingX;
+  }
+  if (toolCallConfig.contentPaddingY) {
+    content.style.paddingTop = toolCallConfig.contentPaddingY;
+    content.style.paddingBottom = toolCallConfig.contentPaddingY;
+  }
+
+  // Add tool name at the top of content
+  if (tool.name) {
+    const toolName = createElement("div", "tvw-text-xs tvw-text-cw-muted tvw-italic");
+    if (toolCallConfig.contentTextColor) {
+      toolName.style.color = toolCallConfig.contentTextColor;
+    } else if (toolCallConfig.headerTextColor) {
+      toolName.style.color = toolCallConfig.headerTextColor;
+    }
+    toolName.textContent = tool.name;
+    content.appendChild(toolName);
+  }
+
+  if (tool.args !== undefined) {
+    const argsBlock = createElement("div", "tvw-space-y-1");
+    const argsLabel = createElement(
+      "div",
+      "tvw-text-xs tvw-text-cw-muted"
+    );
+    if (toolCallConfig.labelTextColor) {
+      argsLabel.style.color = toolCallConfig.labelTextColor;
+    }
+    argsLabel.textContent = "Arguments";
+    const argsPre = createElement(
+      "pre",
+      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-text-xs tvw-text-cw-primary"
+    );
+    // Ensure font size matches header text (0.75rem / 12px)
+    argsPre.style.fontSize = "0.75rem";
+    argsPre.style.lineHeight = "1rem";
+    if (toolCallConfig.codeBlockBackgroundColor) {
+      argsPre.style.backgroundColor = toolCallConfig.codeBlockBackgroundColor;
+    }
+    if (toolCallConfig.codeBlockBorderColor) {
+      argsPre.style.borderColor = toolCallConfig.codeBlockBorderColor;
+    }
+    if (toolCallConfig.codeBlockTextColor) {
+      argsPre.style.color = toolCallConfig.codeBlockTextColor;
+    }
+    argsPre.textContent = formatUnknownValue(tool.args);
+    argsBlock.append(argsLabel, argsPre);
+    content.appendChild(argsBlock);
+  }
+
+  if (tool.chunks && tool.chunks.length) {
+    const logsBlock = createElement("div", "tvw-space-y-1");
+    const logsLabel = createElement(
+      "div",
+      "tvw-text-xs tvw-text-cw-muted"
+    );
+    if (toolCallConfig.labelTextColor) {
+      logsLabel.style.color = toolCallConfig.labelTextColor;
+    }
+    logsLabel.textContent = "Activity";
+    const logsPre = createElement(
+      "pre",
+      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-text-xs tvw-text-cw-primary"
+    );
+    // Ensure font size matches header text (0.75rem / 12px)
+    logsPre.style.fontSize = "0.75rem";
+    logsPre.style.lineHeight = "1rem";
+    if (toolCallConfig.codeBlockBackgroundColor) {
+      logsPre.style.backgroundColor = toolCallConfig.codeBlockBackgroundColor;
+    }
+    if (toolCallConfig.codeBlockBorderColor) {
+      logsPre.style.borderColor = toolCallConfig.codeBlockBorderColor;
+    }
+    if (toolCallConfig.codeBlockTextColor) {
+      logsPre.style.color = toolCallConfig.codeBlockTextColor;
+    }
+    logsPre.textContent = tool.chunks.join("\n");
+    logsBlock.append(logsLabel, logsPre);
+    content.appendChild(logsBlock);
+  }
+
+  if (tool.status === "complete" && tool.result !== undefined) {
+    const resultBlock = createElement("div", "tvw-space-y-1");
+    const resultLabel = createElement(
+      "div",
+      "tvw-text-xs tvw-text-cw-muted"
+    );
+    if (toolCallConfig.labelTextColor) {
+      resultLabel.style.color = toolCallConfig.labelTextColor;
+    }
+    resultLabel.textContent = "Result";
+    const resultPre = createElement(
+      "pre",
+      "tvw-max-h-48 tvw-overflow-auto tvw-whitespace-pre-wrap tvw-rounded-lg tvw-border tvw-border-gray-100 tvw-bg-white tvw-px-3 tvw-py-2 tvw-text-xs tvw-text-cw-primary"
+    );
+    // Ensure font size matches header text (0.75rem / 12px)
+    resultPre.style.fontSize = "0.75rem";
+    resultPre.style.lineHeight = "1rem";
+    if (toolCallConfig.codeBlockBackgroundColor) {
+      resultPre.style.backgroundColor = toolCallConfig.codeBlockBackgroundColor;
+    }
+    if (toolCallConfig.codeBlockBorderColor) {
+      resultPre.style.borderColor = toolCallConfig.codeBlockBorderColor;
+    }
+    if (toolCallConfig.codeBlockTextColor) {
+      resultPre.style.color = toolCallConfig.codeBlockTextColor;
+    }
+    resultPre.textContent = formatUnknownValue(tool.result);
+    resultBlock.append(resultLabel, resultPre);
+    content.appendChild(resultBlock);
+  }
+
+  if (tool.status === "complete" && typeof tool.duration === "number") {
+    const duration = createElement(
+      "div",
+      "tvw-text-xs tvw-text-cw-muted"
+    );
+    if (toolCallConfig.contentTextColor) {
+      duration.style.color = toolCallConfig.contentTextColor;
+    }
+    duration.textContent = `Duration: ${tool.duration}ms`;
+    content.appendChild(duration);
+  }
+
+  const applyToolExpansion = () => {
+    header.setAttribute("aria-expanded", expanded ? "true" : "false");
+    // Update chevron icon
+    toggleIcon.innerHTML = "";
+    const iconColor = toolCallConfig.toggleTextColor || toolCallConfig.headerTextColor || "currentColor";
+    const chevronIcon = renderLucideIcon(expanded ? "chevron-up" : "chevron-down", 16, iconColor, 2);
+    if (chevronIcon) {
+      toggleIcon.appendChild(chevronIcon);
+    } else {
+      // Fallback to text if icon fails
+      toggleIcon.textContent = expanded ? "Hide" : "Show";
+    }
+    content.style.display = expanded ? "" : "none";
+  };
+
+  applyToolExpansion();
+
+  bubble.append(header, content);
+  return bubble;
+};
+
+
+

package/src/defaults.ts

@@ -0,0 +1,321 @@
+import type { AgentWidgetConfig, AgentWidgetTheme } from "./types";
+
+/**
+ * Default light theme colors
+ */
+export const DEFAULT_LIGHT_THEME: AgentWidgetTheme = {
+  primary: "#111827",
+  accent: "#1d4ed8",
+  surface: "#ffffff",
+  muted: "#6b7280",
+  container: "#f8fafc",
+  border: "#f1f5f9",
+  divider: "#f1f5f9",
+  messageBorder: "#f1f5f9",
+  inputBackground: "#ffffff",
+  callToAction: "#000000",
+  callToActionBackground: "#ffffff",
+  sendButtonBackgroundColor: "#111827",
+  sendButtonTextColor: "#ffffff",
+  sendButtonBorderColor: "#60a5fa",
+  closeButtonColor: "#6b7280",
+  closeButtonBackgroundColor: "transparent",
+  closeButtonBorderColor: "",
+  clearChatIconColor: "#6b7280",
+  clearChatBackgroundColor: "transparent",
+  clearChatBorderColor: "transparent",
+  micIconColor: "#111827",
+  micBackgroundColor: "transparent",
+  micBorderColor: "transparent",
+  recordingIconColor: "#ffffff",
+  recordingBackgroundColor: "#ef4444",
+  recordingBorderColor: "transparent",
+  inputFontFamily: "sans-serif",
+  inputFontWeight: "400",
+  radiusSm: "0.75rem",
+  radiusMd: "1rem",
+  radiusLg: "1.5rem",
+  launcherRadius: "9999px",
+  buttonRadius: "9999px",
+};
+
+/**
+ * Default dark theme colors
+ */
+export const DEFAULT_DARK_THEME: AgentWidgetTheme = {
+  primary: "#f9fafb",
+  accent: "#3b82f6",
+  surface: "#1f2937",
+  muted: "#9ca3af",
+  container: "#111827",
+  border: "#374151",
+  divider: "#374151",
+  messageBorder: "#374151",
+  inputBackground: "#111827",
+  callToAction: "#ffffff",
+  callToActionBackground: "#374151",
+  sendButtonBackgroundColor: "#3b82f6",
+  sendButtonTextColor: "#ffffff",
+  sendButtonBorderColor: "#60a5fa",
+  closeButtonColor: "#9ca3af",
+  closeButtonBackgroundColor: "transparent",
+  closeButtonBorderColor: "",
+  clearChatIconColor: "#9ca3af",
+  clearChatBackgroundColor: "transparent",
+  clearChatBorderColor: "transparent",
+  micIconColor: "#f9fafb",
+  micBackgroundColor: "transparent",
+  micBorderColor: "transparent",
+  recordingIconColor: "#ffffff",
+  recordingBackgroundColor: "#ef4444",
+  recordingBorderColor: "transparent",
+  inputFontFamily: "sans-serif",
+  inputFontWeight: "400",
+  radiusSm: "0.75rem",
+  radiusMd: "1rem",
+  radiusLg: "1.5rem",
+  launcherRadius: "9999px",
+  buttonRadius: "9999px",
+};
+
+/**
+ * Default widget configuration
+ * Single source of truth for all default values
+ */
+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: DEFAULT_LIGHT_THEME,
+  darkTheme: DEFAULT_DARK_THEME,
+  colorScheme: "light",
+  launcher: {
+    enabled: true,
+    title: "Chat Assistant",
+    subtitle: "Here to help you get answers fast",
+    agentIconText: "💬",
+    position: "bottom-right",
+    width: "min(400px, calc(100vw - 24px))",
+    heightOffset: 0,
+    autoExpand: false,
+    callToActionIconHidden: false,
+    agentIconSize: "40px",
+    headerIconSize: "40px",
+    closeButtonSize: "32px",
+    callToActionIconName: "arrow-up-right",
+    callToActionIconText: "",
+    callToActionIconSize: "32px",
+    callToActionIconPadding: "5px",
+    callToActionIconColor: "#000000",
+    callToActionIconBackgroundColor: "#ffffff",
+    closeButtonColor: "#6b7280",
+    closeButtonBackgroundColor: "transparent",
+    clearChat: {
+      iconColor: "#6b7280",
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      enabled: true,
+      placement: "inline",
+      iconName: "refresh-cw",
+      size: "32px",
+      showTooltip: true,
+      tooltipText: "Clear chat",
+      paddingX: "0px",
+      paddingY: "0px",
+    },
+    headerIconHidden: false,
+    border: "1px solid #e5e7eb",
+    shadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+  },
+  copy: {
+    welcomeTitle: "Hello 👋",
+    welcomeSubtitle: "Ask anything about your account or products.",
+    inputPlaceholder: "How can I help...",
+    sendButtonLabel: "Send",
+  },
+  sendButton: {
+    borderWidth: "0px",
+    paddingX: "12px",
+    paddingY: "10px",
+    backgroundColor: "#111827",
+    textColor: "#ffffff",
+    borderColor: "#60a5fa",
+    useIcon: true,
+    iconText: "↑",
+    size: "40px",
+    showTooltip: true,
+    tooltipText: "Send message",
+    iconName: "send",
+  },
+  statusIndicator: {
+    visible: true,
+    idleText: "Online",
+    connectingText: "Connecting…",
+    connectedText: "Streaming…",
+    errorText: "Offline",
+  },
+  voiceRecognition: {
+    enabled: true,
+    pauseDuration: 2000,
+    iconName: "mic",
+    iconSize: "39px",
+    borderWidth: "0px",
+    paddingX: "9px",
+    paddingY: "14px",
+    iconColor: "#111827",
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    recordingIconColor: "#ffffff",
+    recordingBackgroundColor: "#ef4444",
+    recordingBorderColor: "transparent",
+    showTooltip: true,
+    tooltipText: "Start voice recognition",
+  },
+  features: {
+    showReasoning: true,
+    showToolCalls: true,
+  },
+  suggestionChips: [
+    "What can you help me with?",
+    "Tell me about your features",
+    "How does this work?",
+  ],
+  suggestionChipsConfig: {
+    fontFamily: "sans-serif",
+    fontWeight: "500",
+    paddingX: "12px",
+    paddingY: "6px",
+  },
+  layout: {
+    header: {
+      layout: "default",
+      showIcon: true,
+      showTitle: true,
+      showSubtitle: true,
+      showCloseButton: true,
+      showClearChat: true,
+    },
+    messages: {
+      layout: "bubble",
+      avatar: {
+        show: false,
+        position: "left",
+      },
+      timestamp: {
+        show: false,
+        position: "below",
+      },
+      groupConsecutive: false,
+    },
+    slots: {},
+  },
+  markdown: {
+    options: {
+      gfm: true,
+      breaks: true,
+    },
+    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,
+};
+
+/**
+ * Helper to deep merge user config with defaults
+ * This ensures all default values are present while allowing selective overrides
+ */
+export function mergeWithDefaults(
+  config?: Partial<AgentWidgetConfig>
+): Partial<AgentWidgetConfig> {
+  if (!config) return DEFAULT_WIDGET_CONFIG;
+
+  return {
+    ...DEFAULT_WIDGET_CONFIG,
+    ...config,
+    theme: {
+      ...DEFAULT_WIDGET_CONFIG.theme,
+      ...config.theme,
+    },
+    darkTheme: {
+      ...DEFAULT_WIDGET_CONFIG.darkTheme,
+      ...config.darkTheme,
+    },
+    launcher: {
+      ...DEFAULT_WIDGET_CONFIG.launcher,
+      ...config.launcher,
+      clearChat: {
+        ...DEFAULT_WIDGET_CONFIG.launcher?.clearChat,
+        ...config.launcher?.clearChat,
+      },
+    },
+    copy: {
+      ...DEFAULT_WIDGET_CONFIG.copy,
+      ...config.copy,
+    },
+    sendButton: {
+      ...DEFAULT_WIDGET_CONFIG.sendButton,
+      ...config.sendButton,
+    },
+    statusIndicator: {
+      ...DEFAULT_WIDGET_CONFIG.statusIndicator,
+      ...config.statusIndicator,
+    },
+    voiceRecognition: {
+      ...DEFAULT_WIDGET_CONFIG.voiceRecognition,
+      ...config.voiceRecognition,
+    },
+    features: {
+      ...DEFAULT_WIDGET_CONFIG.features,
+      ...config.features,
+    },
+    suggestionChips: config.suggestionChips ?? DEFAULT_WIDGET_CONFIG.suggestionChips,
+    suggestionChipsConfig: {
+      ...DEFAULT_WIDGET_CONFIG.suggestionChipsConfig,
+      ...config.suggestionChipsConfig,
+    },
+    layout: {
+      ...DEFAULT_WIDGET_CONFIG.layout,
+      ...config.layout,
+      header: {
+        ...DEFAULT_WIDGET_CONFIG.layout?.header,
+        ...config.layout?.header,
+      },
+      messages: {
+        ...DEFAULT_WIDGET_CONFIG.layout?.messages,
+        ...config.layout?.messages,
+        avatar: {
+          ...DEFAULT_WIDGET_CONFIG.layout?.messages?.avatar,
+          ...config.layout?.messages?.avatar,
+        },
+        timestamp: {
+          ...DEFAULT_WIDGET_CONFIG.layout?.messages?.timestamp,
+          ...config.layout?.messages?.timestamp,
+        },
+      },
+      slots: {
+        ...DEFAULT_WIDGET_CONFIG.layout?.slots,
+        ...config.layout?.slots,
+      },
+    },
+    markdown: {
+      ...DEFAULT_WIDGET_CONFIG.markdown,
+      ...config.markdown,
+      options: {
+        ...DEFAULT_WIDGET_CONFIG.markdown?.options,
+        ...config.markdown?.options,
+      },
+    },
+    messageActions: {
+      ...DEFAULT_WIDGET_CONFIG.messageActions,
+      ...config.messageActions,
+    },
+  };
+}