@runtypelabs/persona 1.36.0

package/src/components/panel.ts

@@ -0,0 +1,204 @@
+import { createElement } from "../utils/dom";
+import { AgentWidgetConfig } from "../types";
+import { positionMap } from "../utils/positioning";
+import { buildHeader, attachHeaderToContainer, HeaderElements } from "./header-builder";
+import { buildHeaderWithLayout } from "./header-layouts";
+import { buildComposer, ComposerElements } from "./composer-builder";
+
+export interface PanelWrapper {
+  wrapper: HTMLElement;
+  panel: HTMLElement;
+}
+
+export const createWrapper = (config?: AgentWidgetConfig): PanelWrapper => {
+  const launcherEnabled = config?.launcher?.enabled ?? true;
+
+  if (!launcherEnabled) {
+    // For inline embed mode, use flex layout to ensure the widget fills its container
+    // and only the chat messages area scrolls
+    const wrapper = createElement(
+      "div",
+      "tvw-relative tvw-h-full tvw-flex tvw-flex-col tvw-flex-1 tvw-min-h-0"
+    );
+    const panel = createElement(
+      "div",
+      "tvw-relative tvw-flex-1 tvw-flex tvw-flex-col tvw-min-h-0"
+    );
+    
+    // Apply width from config, defaulting to 100% for inline embed mode
+    const inlineWidth = config?.launcher?.width ?? "100%";
+    wrapper.style.width = inlineWidth;
+    panel.style.width = "100%";
+    
+    wrapper.appendChild(panel);
+    return { wrapper, panel };
+  }
+
+  const launcher = config?.launcher ?? {};
+  const position =
+    launcher.position && positionMap[launcher.position]
+      ? positionMap[launcher.position]
+      : positionMap["bottom-right"];
+
+  const wrapper = createElement(
+    "div",
+    `tvw-widget-wrapper tvw-fixed ${position} tvw-z-50 tvw-transition`
+  );
+
+  const panel = createElement(
+    "div",
+    "tvw-widget-panel tvw-relative tvw-min-h-[320px]"
+  );
+  const launcherWidth = config?.launcher?.width ?? config?.launcherWidth;
+  const width = launcherWidth ?? "min(400px, calc(100vw - 24px))";
+  panel.style.width = width;
+  panel.style.maxWidth = width;
+
+  wrapper.appendChild(panel);
+  return { wrapper, panel };
+};
+
+export interface PanelElements {
+  container: HTMLElement;
+  body: HTMLElement;
+  messagesWrapper: HTMLElement;
+  suggestions: HTMLElement;
+  textarea: HTMLTextAreaElement;
+  sendButton: HTMLButtonElement;
+  sendButtonWrapper: HTMLElement;
+  micButton: HTMLButtonElement | null;
+  micButtonWrapper: HTMLElement | null;
+  composerForm: HTMLFormElement;
+  statusText: HTMLElement;
+  introTitle: HTMLElement;
+  introSubtitle: HTMLElement;
+  closeButton: HTMLButtonElement;
+  closeButtonWrapper: HTMLElement;
+  clearChatButton: HTMLButtonElement | null;
+  clearChatButtonWrapper: HTMLElement | null;
+  iconHolder: HTMLElement;
+  headerTitle: HTMLElement;
+  headerSubtitle: HTMLElement;
+  // Exposed for potential header replacement
+  header: HTMLElement;
+  footer: HTMLElement;
+  // Attachment elements
+  attachmentButton: HTMLButtonElement | null;
+  attachmentButtonWrapper: HTMLElement | null;
+  attachmentInput: HTMLInputElement | null;
+  attachmentPreviewsContainer: HTMLElement | null;
+  // Actions row layout elements
+  actionsRow: HTMLElement;
+  leftActions: HTMLElement;
+  rightActions: HTMLElement;
+}
+
+export const buildPanel = (config?: AgentWidgetConfig, showClose = true): PanelElements => {
+  // Use flex-1 and min-h-0 to ensure the container fills its parent and allows
+  // the body (chat messages area) to scroll while header/footer stay fixed
+  const container = createElement(
+    "div",
+    "tvw-widget-container tvw-flex tvw-h-full tvw-w-full tvw-flex-1 tvw-min-h-0 tvw-flex-col tvw-bg-cw-surface tvw-text-cw-primary tvw-rounded-2xl tvw-overflow-hidden tvw-border tvw-border-cw-border"
+  );
+
+  // Build header using layout config if available, otherwise use standard builder
+  const headerLayoutConfig = config?.layout?.header;
+  const showHeader = config?.layout?.showHeader !== false; // default to true
+  const headerElements: HeaderElements = headerLayoutConfig
+    ? buildHeaderWithLayout(config!, headerLayoutConfig, { showClose })
+    : buildHeader({ config, showClose });
+
+  // Build body with intro card and messages wrapper
+  const body = createElement(
+    "div",
+    "tvw-widget-body tvw-flex tvw-flex-1 tvw-min-h-0 tvw-flex-col tvw-gap-6 tvw-overflow-y-auto tvw-bg-cw-container tvw-px-6 tvw-py-6"
+  );
+  body.id = "persona-scroll-container";
+  
+  const introCard = createElement(
+    "div",
+    "tvw-rounded-2xl tvw-bg-cw-surface tvw-p-6 tvw-shadow-sm"
+  );
+  const introTitle = createElement(
+    "h2",
+    "tvw-text-lg tvw-font-semibold tvw-text-cw-primary"
+  );
+  introTitle.textContent = config?.copy?.welcomeTitle ?? "Hello 👋";
+  const introSubtitle = createElement(
+    "p",
+    "tvw-mt-2 tvw-text-sm tvw-text-cw-muted"
+  );
+  introSubtitle.textContent =
+    config?.copy?.welcomeSubtitle ??
+    "Ask anything about your account or products.";
+  introCard.append(introTitle, introSubtitle);
+
+  const messagesWrapper = createElement(
+    "div",
+    "tvw-flex tvw-flex-col tvw-gap-3"
+  );
+
+  body.append(introCard, messagesWrapper);
+
+  // Build composer/footer using extracted builder
+  const composerElements: ComposerElements = buildComposer({ config });
+  const showFooter = config?.layout?.showFooter !== false; // default to true
+
+  // Assemble container with header, body, and footer
+  if (showHeader) {
+    attachHeaderToContainer(container, headerElements, config);
+  } else {
+    // Hide header completely
+    headerElements.header.style.display = 'none';
+    attachHeaderToContainer(container, headerElements, config);
+  }
+  
+  container.append(body);
+  
+  if (showFooter) {
+    container.append(composerElements.footer);
+  } else {
+    // Hide footer completely
+    composerElements.footer.style.display = 'none';
+    container.append(composerElements.footer);
+  }
+
+  return {
+    container,
+    body,
+    messagesWrapper,
+    suggestions: composerElements.suggestions,
+    textarea: composerElements.textarea,
+    sendButton: composerElements.sendButton,
+    sendButtonWrapper: composerElements.sendButtonWrapper,
+    micButton: composerElements.micButton,
+    micButtonWrapper: composerElements.micButtonWrapper,
+    composerForm: composerElements.composerForm,
+    statusText: composerElements.statusText,
+    introTitle,
+    introSubtitle,
+    closeButton: headerElements.closeButton,
+    closeButtonWrapper: headerElements.closeButtonWrapper,
+    clearChatButton: headerElements.clearChatButton,
+    clearChatButtonWrapper: headerElements.clearChatButtonWrapper,
+    iconHolder: headerElements.iconHolder,
+    headerTitle: headerElements.headerTitle,
+    headerSubtitle: headerElements.headerSubtitle,
+    header: headerElements.header,
+    footer: composerElements.footer,
+    // Attachment elements
+    attachmentButton: composerElements.attachmentButton,
+    attachmentButtonWrapper: composerElements.attachmentButtonWrapper,
+    attachmentInput: composerElements.attachmentInput,
+    attachmentPreviewsContainer: composerElements.attachmentPreviewsContainer,
+    // Actions row layout elements
+    actionsRow: composerElements.actionsRow,
+    leftActions: composerElements.leftActions,
+    rightActions: composerElements.rightActions
+  };
+};
+
+// Re-export builder types and functions for plugin use
+export { buildHeader, buildComposer, attachHeaderToContainer };
+export type { HeaderElements, HeaderBuildContext } from "./header-builder";
+export type { ComposerElements, ComposerBuildContext } from "./composer-builder";

package/src/components/reasoning-bubble.ts

@@ -0,0 +1,144 @@
+import { createElement } from "../utils/dom";
+import { AgentWidgetMessage } from "../types";
+import { describeReasonStatus } from "../utils/formatting";
+import { renderLucideIcon } from "../utils/icons";
+
+// Expansion state per widget instance
+export const reasoningExpansionState = new Set<string>();
+
+// Helper function to update reasoning bubble UI after expansion state changes
+export const updateReasoningBubbleUI = (messageId: string, bubble: HTMLElement): void => {
+  const expanded = reasoningExpansionState.has(messageId);
+  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 = "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 createReasoningBubble = (message: AgentWidgetMessage): HTMLElement => {
+  const reasoning = message.reasoning;
+  const bubble = createElement(
+    "div",
+    [
+      "vanilla-message-bubble",
+      "vanilla-reasoning-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);
+
+  if (!reasoning) {
+    return bubble;
+  }
+
+  let expanded = reasoningExpansionState.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", "reasoning");
+
+  const headerContent = createElement("div", "tvw-flex tvw-flex-col tvw-text-left");
+  const title = createElement("span", "tvw-text-xs tvw-text-cw-primary");
+  title.textContent = "Thinking...";
+  headerContent.appendChild(title);
+
+  const status = createElement("span", "tvw-text-xs tvw-text-cw-primary");
+  status.textContent = describeReasonStatus(reasoning);
+  headerContent.appendChild(status);
+
+  if (reasoning.status === "complete") {
+    title.style.display = "none";
+  } else {
+    title.style.display = "";
+  }
+
+  const toggleIcon = createElement("div", "tvw-flex tvw-items-center");
+  const iconColor = "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-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-px-4 tvw-py-3"
+  );
+  content.style.display = expanded ? "" : "none";
+
+  const text = reasoning.chunks.join("");
+  const body = createElement(
+    "div",
+    "tvw-whitespace-pre-wrap tvw-text-xs tvw-leading-snug tvw-text-cw-muted"
+  );
+  body.textContent =
+    text ||
+    (reasoning.status === "complete"
+      ? "No additional context was shared."
+      : "Waiting for details…");
+  content.appendChild(body);
+
+  const applyExpansionState = () => {
+    header.setAttribute("aria-expanded", expanded ? "true" : "false");
+    // Update chevron icon
+    toggleIcon.innerHTML = "";
+    const iconColor = "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";
+  };
+
+  applyExpansionState();
+
+  bubble.append(header, content);
+  return bubble;
+};
+
+
+

package/src/components/registry.ts

@@ -0,0 +1,87 @@
+import { AgentWidgetConfig, AgentWidgetMessage } from "../types";
+
+/**
+ * Context provided to component renderers
+ */
+export interface ComponentContext {
+  message: AgentWidgetMessage;
+  config: AgentWidgetConfig;
+  /**
+   * Update component props during streaming
+   */
+  updateProps: (newProps: Record<string, unknown>) => void;
+}
+
+/**
+ * Component renderer function signature
+ */
+export type ComponentRenderer = (
+  props: Record<string, unknown>,
+  context: ComponentContext
+) => HTMLElement;
+
+/**
+ * Component registry for managing custom components
+ */
+class ComponentRegistry {
+  private components: Map<string, ComponentRenderer> = new Map();
+
+  /**
+   * Register a custom component
+   */
+  register(name: string, renderer: ComponentRenderer): void {
+    if (this.components.has(name)) {
+      console.warn(`[ComponentRegistry] Component "${name}" is already registered. Overwriting.`);
+    }
+    this.components.set(name, renderer);
+  }
+
+  /**
+   * Unregister a component
+   */
+  unregister(name: string): void {
+    this.components.delete(name);
+  }
+
+  /**
+   * Get a component renderer by name
+   */
+  get(name: string): ComponentRenderer | undefined {
+    return this.components.get(name);
+  }
+
+  /**
+   * Check if a component is registered
+   */
+  has(name: string): boolean {
+    return this.components.has(name);
+  }
+
+  /**
+   * Get all registered component names
+   */
+  getAllNames(): string[] {
+    return Array.from(this.components.keys());
+  }
+
+  /**
+   * Clear all registered components
+   */
+  clear(): void {
+    this.components.clear();
+  }
+
+  /**
+   * Register multiple components at once
+   */
+  registerAll(components: Record<string, ComponentRenderer>): void {
+    Object.entries(components).forEach(([name, renderer]) => {
+      this.register(name, renderer);
+    });
+  }
+}
+
+/**
+ * Global component registry instance
+ */
+export const componentRegistry = new ComponentRegistry();

package/src/components/suggestions.ts

@@ -0,0 +1,97 @@
+import { createElement } from "../utils/dom";
+import { AgentWidgetSession } from "../session";
+import { AgentWidgetMessage, AgentWidgetSuggestionChipsConfig } from "../types";
+
+export interface SuggestionButtons {
+  buttons: HTMLButtonElement[];
+  render: (
+    chips: string[] | undefined,
+    session: AgentWidgetSession,
+    textarea: HTMLTextAreaElement,
+    messages?: AgentWidgetMessage[],
+    config?: AgentWidgetSuggestionChipsConfig
+  ) => void;
+}
+
+export const createSuggestions = (container: HTMLElement): SuggestionButtons => {
+  const suggestionButtons: HTMLButtonElement[] = [];
+
+  const render = (
+    chips: string[] | undefined,
+    session: AgentWidgetSession,
+    textarea: HTMLTextAreaElement,
+    messages?: AgentWidgetMessage[],
+    chipsConfig?: AgentWidgetSuggestionChipsConfig
+  ) => {
+    container.innerHTML = "";
+    suggestionButtons.length = 0;
+    if (!chips || !chips.length) return;
+
+    // Hide suggestions after the first user message is sent
+    // Use provided messages or get from session
+    const messagesToCheck = messages ?? (session ? session.getMessages() : []);
+    const hasUserMessage = messagesToCheck.some((msg) => msg.role === "user");
+    if (hasUserMessage) return;
+
+    const fragment = document.createDocumentFragment();
+    const streaming = session ? session.isStreaming() : false;
+
+    // Get font family mapping function
+    const getFontFamilyValue = (family: "sans-serif" | "serif" | "mono"): string => {
+      switch (family) {
+        case "serif":
+          return 'Georgia, "Times New Roman", Times, serif';
+        case "mono":
+          return '"Courier New", Courier, "Lucida Console", Monaco, monospace';
+        case "sans-serif":
+        default:
+          return '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif';
+      }
+    };
+
+    chips.forEach((chip) => {
+      const btn = createElement(
+        "button",
+        "tvw-rounded-button tvw-bg-cw-surface tvw-px-3 tvw-py-1.5 tvw-text-xs tvw-font-medium tvw-text-cw-muted hover:tvw-opacity-90 tvw-cursor-pointer tvw-border tvw-border-gray-200"
+      ) as HTMLButtonElement;
+      btn.type = "button";
+      btn.textContent = chip;
+      btn.disabled = streaming;
+
+      // Apply typography settings
+      if (chipsConfig?.fontFamily) {
+        btn.style.fontFamily = getFontFamilyValue(chipsConfig.fontFamily);
+      }
+      if (chipsConfig?.fontWeight) {
+        btn.style.fontWeight = chipsConfig.fontWeight;
+      }
+
+      // Apply padding settings
+      if (chipsConfig?.paddingX) {
+        btn.style.paddingLeft = chipsConfig.paddingX;
+        btn.style.paddingRight = chipsConfig.paddingX;
+      }
+      if (chipsConfig?.paddingY) {
+        btn.style.paddingTop = chipsConfig.paddingY;
+        btn.style.paddingBottom = chipsConfig.paddingY;
+      }
+
+      btn.addEventListener("click", () => {
+        if (!session || session.isStreaming()) return;
+        textarea.value = "";
+        session.sendMessage(chip);
+      });
+      fragment.appendChild(btn);
+      suggestionButtons.push(btn);
+    });
+    container.appendChild(fragment);
+  };
+
+  return {
+    buttons: suggestionButtons,
+    render
+  };
+};
+
+
+