vanilla-agent 0.1.0

package/src/components/suggestions.ts

@@ -0,0 +1,52 @@
+import { createElement } from "../utils/dom";
+import { ChatWidgetSession } from "../session";
+import { ChatWidgetMessage } from "../types";
+
+export interface SuggestionButtons {
+  buttons: HTMLButtonElement[];
+  render: (chips: string[] | undefined, session: ChatWidgetSession, textarea: HTMLTextAreaElement, messages?: ChatWidgetMessage[]) => void;
+}
+
+export const createSuggestions = (container: HTMLElement): SuggestionButtons => {
+  const suggestionButtons: HTMLButtonElement[] = [];
+
+  const render = (chips: string[] | undefined, session: ChatWidgetSession, textarea: HTMLTextAreaElement, messages?: ChatWidgetMessage[]) => {
+    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;
+    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;
+      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
+  };
+};
+
+
+

package/src/components/tool-bubble.ts

@@ -0,0 +1,158 @@
+import { createElement } from "../utils/dom";
+import { ChatWidgetMessage } from "../types";
+import { formatUnknownValue, describeToolTitle } from "../utils/formatting";
+
+// Expansion state per widget instance
+const toolExpansionState = new Set<string>();
+
+export const createToolBubble = (message: ChatWidgetMessage): HTMLElement => {
+  const tool = message.toolCall;
+  const bubble = createElement(
+    "div",
+    [
+      "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(" ")
+  );
+
+  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");
+
+  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 = describeToolTitle(tool);
+  headerContent.appendChild(title);
+
+  if (tool.name) {
+    const name = createElement("span", "tvw-text-[11px] tvw-text-cw-muted");
+    name.textContent = tool.name;
+    headerContent.appendChild(name);
+  }
+
+  const toggleLabel = createElement(
+    "span",
+    "tvw-text-xs tvw-text-cw-primary"
+  );
+  toggleLabel.textContent = expanded ? "Hide" : "Show";
+
+  const headerMeta = createElement("div", "tvw-flex tvw-items-center tvw-gap-2");
+  headerMeta.append(toggleLabel);
+
+  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";
+
+  if (tool.args !== undefined) {
+    const argsBlock = createElement("div", "tvw-space-y-1");
+    const argsLabel = createElement(
+      "div",
+      "tvw-font-xxs tvw-font-medium tvw-text-cw-muted"
+    );
+    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-font-xxs tvw-text-cw-primary"
+    );
+    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-font-xxs tvw-font-medium tvw-text-cw-muted"
+    );
+    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-font-xxs tvw-text-cw-primary"
+    );
+    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-font-xxs tvw-text-sm tvw-text-cw-muted"
+    );
+    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-font-xxs tvw-text-cw-primary"
+    );
+    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-font-xxs tvw-text-cw-muted"
+    );
+    duration.textContent = `Duration: ${tool.duration}ms`;
+    content.appendChild(duration);
+  }
+
+  const applyToolExpansion = () => {
+    header.setAttribute("aria-expanded", expanded ? "true" : "false");
+    toggleLabel.textContent = expanded ? "Hide" : "Show";
+    content.style.display = expanded ? "" : "none";
+  };
+
+  const toggleToolExpansion = () => {
+    expanded = !expanded;
+    if (expanded) {
+      toolExpansionState.add(message.id);
+    } else {
+      toolExpansionState.delete(message.id);
+    }
+    applyToolExpansion();
+  };
+
+  header.addEventListener("pointerdown", (event) => {
+    event.preventDefault();
+    toggleToolExpansion();
+  });
+
+  header.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      toggleToolExpansion();
+    }
+  });
+
+  applyToolExpansion();
+
+  bubble.append(header, content);
+  return bubble;
+};
+
+
+

package/src/index.ts

@@ -0,0 +1,37 @@
+import {
+  initChatWidget as initChatWidgetFn,
+  type ChatWidgetInitHandle
+} from "./runtime/init";
+
+export type {
+  ChatWidgetConfig,
+  ChatWidgetTheme,
+  ChatWidgetFeatureFlags,
+  ChatWidgetInitOptions,
+  ChatWidgetMessage,
+  ChatWidgetLauncherConfig,
+  ChatWidgetEvent
+} from "./types";
+
+export { initChatWidgetFn as initChatWidget };
+export {
+  createChatExperience,
+  type ChatWidgetController
+} from "./ui";
+export {
+  ChatWidgetSession,
+  type ChatWidgetSessionStatus
+} from "./session";
+export { ChatWidgetClient } from "./client";
+export {
+  markdownPostprocessor,
+  escapeHtml,
+  directivePostprocessor
+} from "./postprocessors";
+export type { ChatWidgetInitHandle };
+
+// Plugin system exports
+export type { ChatWidgetPlugin } from "./plugins/types";
+export { pluginRegistry } from "./plugins/registry";
+
+export default initChatWidgetFn;

package/src/install.ts

@@ -0,0 +1,159 @@
+/**
+ * Standalone installer script for easy script tag installation
+ * This script automatically loads CSS and JS, then initializes the widget
+ * if configuration is provided via window.siteAgentConfig
+ */
+
+interface SiteAgentInstallConfig {
+  version?: string;
+  cdn?: "unpkg" | "jsdelivr";
+  cssUrl?: string;
+  jsUrl?: string;
+  target?: string | HTMLElement;
+  config?: any;
+  autoInit?: boolean;
+}
+
+declare global {
+  interface Window {
+    siteAgentConfig?: SiteAgentInstallConfig;
+    ChatWidget?: any;
+  }
+}
+
+(function() {
+  "use strict";
+
+  // Prevent double installation
+  if ((window as any).__siteAgentInstallerLoaded) {
+    return;
+  }
+  (window as any).__siteAgentInstallerLoaded = true;
+
+  const config: SiteAgentInstallConfig = window.siteAgentConfig || {};
+  const version = config.version || "latest";
+  const cdn = config.cdn || "jsdelivr";
+  const autoInit = config.autoInit !== false; // Default to true
+
+  // Determine CDN base URL
+  const getCdnBase = () => {
+    if (config.cssUrl && config.jsUrl) {
+      return { cssUrl: config.cssUrl, jsUrl: config.jsUrl };
+    }
+    
+    const packageName = "vanilla-agent";
+    const basePath = `/npm/${packageName}@${version}/dist`;
+    
+    if (cdn === "unpkg") {
+      return {
+        cssUrl: `https://unpkg.com${basePath}/widget.css`,
+        jsUrl: `https://unpkg.com${basePath}/index.global.js`
+      };
+    } else {
+      return {
+        cssUrl: `https://cdn.jsdelivr.net${basePath}/widget.css`,
+        jsUrl: `https://cdn.jsdelivr.net${basePath}/index.global.js`
+      };
+    }
+  };
+
+  const { cssUrl, jsUrl } = getCdnBase();
+
+  // Check if CSS is already loaded
+  const isCssLoaded = () => {
+    return !!document.head.querySelector('link[data-vanilla-agent]') ||
+           !!document.head.querySelector(`link[href*="widget.css"]`);
+  };
+
+  // Check if JS is already loaded
+  const isJsLoaded = () => {
+    return !!(window as any).ChatWidget;
+  };
+
+  // Load CSS
+  const loadCSS = (): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if (isCssLoaded()) {
+        resolve();
+        return;
+      }
+
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = cssUrl;
+      link.setAttribute("data-vanilla-agent", "true");
+      link.onload = () => resolve();
+      link.onerror = () => reject(new Error(`Failed to load CSS from ${cssUrl}`));
+      document.head.appendChild(link);
+    });
+  };
+
+  // Load JS
+  const loadJS = (): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if (isJsLoaded()) {
+        resolve();
+        return;
+      }
+
+      const script = document.createElement("script");
+      script.src = jsUrl;
+      script.async = true;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error(`Failed to load JS from ${jsUrl}`));
+      document.head.appendChild(script);
+    });
+  };
+
+  // Initialize widget
+  const initWidget = () => {
+    if (!window.ChatWidget || !window.ChatWidget.initChatWidget) {
+      console.warn("ChatWidget not available. Make sure the script loaded successfully.");
+      return;
+    }
+
+    const target = config.target || "body";
+    // Merge apiUrl from top-level config into widget config if present
+    const widgetConfig = { ...config.config };
+    if ((config as any).apiUrl && !widgetConfig.apiUrl) {
+      widgetConfig.apiUrl = (config as any).apiUrl;
+    }
+
+    // Only initialize if config is provided
+    if (!widgetConfig.apiUrl && Object.keys(widgetConfig).length === 0) {
+      return;
+    }
+
+    try {
+      window.ChatWidget.initChatWidget({
+        target,
+        config: widgetConfig
+      });
+    } catch (error) {
+      console.error("Failed to initialize ChatWidget:", error);
+    }
+  };
+
+  // Main installation flow
+  const install = async () => {
+    try {
+      await loadCSS();
+      await loadJS();
+      
+      if (autoInit && (config.config || (config as any).apiUrl)) {
+        // Wait a tick to ensure ChatWidget is fully initialized
+        setTimeout(initWidget, 0);
+      }
+    } catch (error) {
+      console.error("Failed to install ChatWidget:", error);
+    }
+  };
+
+  // Start installation
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", install);
+  } else {
+    install();
+  }
+})();
+

package/src/plugins/registry.ts

@@ -0,0 +1,72 @@
+import { ChatWidgetPlugin } from "./types";
+
+class PluginRegistry {
+  private plugins: Map<string, ChatWidgetPlugin> = new Map();
+
+  /**
+   * Register a plugin
+   */
+  register(plugin: ChatWidgetPlugin): void {
+    if (this.plugins.has(plugin.id)) {
+      console.warn(`Plugin "${plugin.id}" is already registered. Overwriting.`);
+    }
+
+    this.plugins.set(plugin.id, plugin);
+    plugin.onRegister?.();
+  }
+
+  /**
+   * Unregister a plugin
+   */
+  unregister(pluginId: string): void {
+    const plugin = this.plugins.get(pluginId);
+    if (plugin) {
+      plugin.onUnregister?.();
+      this.plugins.delete(pluginId);
+    }
+  }
+
+  /**
+   * Get all plugins sorted by priority
+   */
+  getAll(): ChatWidgetPlugin[] {
+    return Array.from(this.plugins.values()).sort(
+      (a, b) => (b.priority ?? 0) - (a.priority ?? 0)
+    );
+  }
+
+  /**
+   * Get plugins for a specific instance (from config)
+   * Merges instance plugins with globally registered plugins
+   */
+  getForInstance(instancePlugins?: ChatWidgetPlugin[]): ChatWidgetPlugin[] {
+    const allPlugins = this.getAll();
+
+    if (!instancePlugins || instancePlugins.length === 0) {
+      return allPlugins;
+    }
+
+    // Merge instance plugins with global plugins
+    // Instance plugins override global plugins with the same ID
+    const instanceIds = new Set(instancePlugins.map(p => p.id));
+    const merged = [
+      ...allPlugins.filter(p => !instanceIds.has(p.id)),
+      ...instancePlugins
+    ];
+
+    return merged.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }
+
+  /**
+   * Clear all plugins
+   */
+  clear(): void {
+    this.plugins.forEach(plugin => plugin.onUnregister?.());
+    this.plugins.clear();
+  }
+}
+
+export const pluginRegistry = new PluginRegistry();
+
+
+

package/src/plugins/types.ts

@@ -0,0 +1,90 @@
+import { ChatWidgetMessage, ChatWidgetConfig } from "../types";
+
+/**
+ * Plugin interface for customizing widget components
+ */
+export interface ChatWidgetPlugin {
+  /**
+   * Unique identifier for the plugin
+   */
+  id: string;
+
+  /**
+   * Optional priority (higher = runs first). Default: 0
+   */
+  priority?: number;
+
+  /**
+   * Custom renderer for message bubbles
+   * Return null to use default renderer
+   */
+  renderMessage?: (context: {
+    message: ChatWidgetMessage;
+    defaultRenderer: () => HTMLElement;
+    config: ChatWidgetConfig;
+  }) => HTMLElement | null;
+
+  /**
+   * Custom renderer for launcher button
+   * Return null to use default renderer
+   */
+  renderLauncher?: (context: {
+    config: ChatWidgetConfig;
+    defaultRenderer: () => HTMLElement;
+    onToggle: () => void;
+  }) => HTMLElement | null;
+
+  /**
+   * Custom renderer for panel header
+   * Return null to use default renderer
+   */
+  renderHeader?: (context: {
+    config: ChatWidgetConfig;
+    defaultRenderer: () => HTMLElement;
+    onClose?: () => void;
+  }) => HTMLElement | null;
+
+  /**
+   * Custom renderer for composer/input area
+   * Return null to use default renderer
+   */
+  renderComposer?: (context: {
+    config: ChatWidgetConfig;
+    defaultRenderer: () => HTMLElement;
+    onSubmit: (text: string) => void;
+    disabled: boolean;
+  }) => HTMLElement | null;
+
+  /**
+   * Custom renderer for reasoning bubbles
+   * Return null to use default renderer
+   */
+  renderReasoning?: (context: {
+    message: ChatWidgetMessage;
+    defaultRenderer: () => HTMLElement;
+    config: ChatWidgetConfig;
+  }) => HTMLElement | null;
+
+  /**
+   * Custom renderer for tool call bubbles
+   * Return null to use default renderer
+   */
+  renderToolCall?: (context: {
+    message: ChatWidgetMessage;
+    defaultRenderer: () => HTMLElement;
+    config: ChatWidgetConfig;
+  }) => HTMLElement | null;
+
+  /**
+   * Called when plugin is registered
+   */
+  onRegister?: () => void;
+
+  /**
+   * Called when plugin is unregistered
+   */
+  onUnregister?: () => void;
+}
+
+
+

package/src/postprocessors.ts

@@ -0,0 +1,76 @@
+import { marked } from "marked";
+
+marked.setOptions({ breaks: true });
+
+/**
+ * Basic markdown renderer. Remember to sanitize the returned HTML if you render
+ * untrusted content in your host page.
+ */
+export const markdownPostprocessor = (text: string): string => {
+  return marked.parse(text) as string;
+};
+
+/**
+ * Escapes HTML entities. Used as the default safe renderer.
+ */
+export const escapeHtml = (text: string): string =>
+  text
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+
+const escapeAttribute = (value: string) =>
+  value.replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+const makeToken = (idx: number) => `%%FORM_PLACEHOLDER_${idx}%%`;
+
+const directiveReplacer = (source: string, placeholders: Array<{ token: string; type: string }>) => {
+  let working = source;
+
+  // JSON directive pattern e.g. <Directive>{"component":"form","type":"init"}</Directive>
+  working = working.replace(/<Directive>([\s\S]*?)<\/Directive>/gi, (match, jsonText) => {
+    try {
+      const parsed = JSON.parse(jsonText.trim());
+      if (parsed && typeof parsed === "object" && parsed.component === "form" && parsed.type) {
+        const token = makeToken(placeholders.length);
+        placeholders.push({ token, type: String(parsed.type) });
+        return token;
+      }
+    } catch (error) {
+      return match;
+    }
+    return match;
+  });
+
+  // XML-style directive e.g. <Form type="init" />
+  working = working.replace(/<Form\s+type="([^"]+)"\s*\/>/gi, (_, type) => {
+    const token = makeToken(placeholders.length);
+    placeholders.push({ token, type });
+    return token;
+  });
+
+  return working;
+};
+
+/**
+ * Converts special directives (either `<Form type="init" />` or
+ * `<Directive>{"component":"form","type":"init"}</Directive>`) into placeholder
+ * elements that the widget upgrades after render. Remaining text is rendered as
+ * Markdown.
+ */
+export const directivePostprocessor = (text: string): string => {
+  const placeholders: Array<{ token: string; type: string }> = [];
+  const withTokens = directiveReplacer(text, placeholders);
+  let html = markdownPostprocessor(withTokens);
+
+  placeholders.forEach(({ token, type }) => {
+    const tokenRegex = new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
+    const safeType = escapeAttribute(type);
+    const replacement = `<div class="tvw-form-directive" data-tv-form="${safeType}"></div>`;
+    html = html.replace(tokenRegex, replacement);
+  });
+
+  return html;
+};