vanilla-agent 1.20.0 → 1.22.0

package/src/install.ts

@@ -12,6 +12,10 @@ interface SiteAgentInstallConfig {
   target?: string | HTMLElement;
   config?: any;
   autoInit?: boolean;
+  // Client token mode options (can also be set via data attributes)
+  clientToken?: string;
+  flowId?: string;
+  apiUrl?: string;
 }
 
 declare global {
@@ -30,7 +34,45 @@ declare global {
   }
   (window as any).__siteAgentInstallerLoaded = true;
 
-  const config: SiteAgentInstallConfig = window.siteAgentConfig || {};
+  /**
+   * Read configuration from data attributes on the current script tag.
+   * Supports: data-travrse-token, data-flow-id, data-api-url
+   */
+  const getConfigFromScript = (): Partial<SiteAgentInstallConfig> => {
+    // Try to get the current script element
+    const script = document.currentScript as HTMLScriptElement | null;
+    if (!script) return {};
+
+    const scriptConfig: Partial<SiteAgentInstallConfig> = {};
+
+    // Client token from data attribute (primary method for client token mode)
+    const token = script.getAttribute('data-travrse-token');
+    if (token) {
+      scriptConfig.clientToken = token;
+    }
+
+    // Optional flow ID
+    const flowId = script.getAttribute('data-flow-id');
+    if (flowId) {
+      scriptConfig.flowId = flowId;
+    }
+
+    // Optional API URL override
+    const apiUrl = script.getAttribute('data-api-url');
+    if (apiUrl) {
+      scriptConfig.apiUrl = apiUrl;
+    }
+
+    return scriptConfig;
+  };
+
+  // Get config from script attributes (must be called synchronously during script execution)
+  const scriptConfig = getConfigFromScript();
+
+  // Merge script attributes with window config (script attributes take precedence)
+  const windowConfig: SiteAgentInstallConfig = window.siteAgentConfig || {};
+  const config: SiteAgentInstallConfig = { ...windowConfig, ...scriptConfig };
+  
   const version = config.version || "latest";
   const cdn = config.cdn || "jsdelivr";
   const autoInit = config.autoInit !== false; // Default to true
@@ -113,14 +155,27 @@ declare global {
     }
 
     const target = config.target || "body";
-    // Merge apiUrl from top-level config into widget config if present
+    // Merge top-level config options into widget config
     const widgetConfig = { ...config.config };
-    if ((config as any).apiUrl && !widgetConfig.apiUrl) {
-      widgetConfig.apiUrl = (config as any).apiUrl;
+    
+    // Merge apiUrl from top-level config into widget config if present
+    if (config.apiUrl && !widgetConfig.apiUrl) {
+      widgetConfig.apiUrl = config.apiUrl;
+    }
+    
+    // Merge clientToken from top-level config into widget config if present
+    if (config.clientToken && !widgetConfig.clientToken) {
+      widgetConfig.clientToken = config.clientToken;
+    }
+    
+    // Merge flowId from top-level config into widget config if present
+    if (config.flowId && !widgetConfig.flowId) {
+      widgetConfig.flowId = config.flowId;
     }
 
-    // Only initialize if config is provided
-    if (!widgetConfig.apiUrl && Object.keys(widgetConfig).length === 0) {
+    // Only initialize if we have either apiUrl OR clientToken (or other config)
+    const hasApiConfig = widgetConfig.apiUrl || widgetConfig.clientToken;
+    if (!hasApiConfig && Object.keys(widgetConfig).length === 0) {
       return;
     }
 
@@ -140,7 +195,14 @@ declare global {
       await loadCSS();
       await loadJS();
       
-      if (autoInit && (config.config || (config as any).apiUrl)) {
+      // Auto-init if we have config OR apiUrl OR clientToken
+      const shouldAutoInit = autoInit && (
+        config.config || 
+        config.apiUrl || 
+        config.clientToken
+      );
+      
+      if (shouldAutoInit) {
         // Wait a tick to ensure AgentWidget is fully initialized
         setTimeout(initWidget, 0);
       }

package/src/postprocessors.ts

@@ -1,13 +1,100 @@
-import { marked } from "marked";
+import { Marked, type RendererObject } from "marked";
+import type { AgentWidgetMarkdownConfig, AgentWidgetMarkdownRendererOverrides, AgentWidgetMarkdownOptions } from "./types";
 
-marked.setOptions({ breaks: true });
+/**
+ * Options for creating a markdown processor
+ */
+export type MarkdownProcessorOptions = {
+  /** Marked parsing options */
+  markedOptions?: AgentWidgetMarkdownOptions;
+  /** Custom renderer overrides */
+  renderer?: AgentWidgetMarkdownRendererOverrides;
+};
+
+/**
+ * Converts AgentWidgetMarkdownRendererOverrides to marked's RendererObject format
+ */
+const convertRendererOverrides = (
+  overrides?: AgentWidgetMarkdownRendererOverrides
+): Partial<RendererObject> | undefined => {
+  if (!overrides) return undefined;
+  
+  // The token-based API in marked v12+ matches our type definitions
+  // We can pass through the overrides directly
+  return overrides as Partial<RendererObject>;
+};
 
 /**
- * Basic markdown renderer. Remember to sanitize the returned HTML if you render
- * untrusted content in your host page.
+ * Creates a configured markdown processor with custom options and renderers.
+ * 
+ * @param options - Configuration options for the markdown processor
+ * @returns A function that converts markdown text to HTML
+ * 
+ * @example
+ * ```typescript
+ * // Basic usage with defaults
+ * const processor = createMarkdownProcessor();
+ * const html = processor("# Hello World");
+ * 
+ * // With custom options
+ * const processor = createMarkdownProcessor({
+ *   markedOptions: { gfm: true, breaks: true },
+ *   renderer: {
+ *     link(token) {
+ *       return `<a href="${token.href}" target="_blank">${token.text}</a>`;
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export const createMarkdownProcessor = (options?: MarkdownProcessorOptions) => {
+  const opts = options?.markedOptions;
+  const markedInstance = new Marked({
+    gfm: opts?.gfm ?? true,
+    breaks: opts?.breaks ?? true,
+    pedantic: opts?.pedantic,
+    silent: opts?.silent,
+  });
+  
+  const rendererOverrides = convertRendererOverrides(options?.renderer);
+  if (rendererOverrides) {
+    markedInstance.use({ renderer: rendererOverrides });
+  }
+  
+  return (text: string): string => {
+    return markedInstance.parse(text) as string;
+  };
+};
+
+/**
+ * Creates a markdown processor from AgentWidgetMarkdownConfig.
+ * This is a convenience function that maps the widget config to processor options.
+ * 
+ * @param config - The markdown configuration from widget config
+ * @returns A function that converts markdown text to HTML
+ */
+export const createMarkdownProcessorFromConfig = (config?: AgentWidgetMarkdownConfig) => {
+  if (!config) {
+    return createMarkdownProcessor();
+  }
+  
+  return createMarkdownProcessor({
+    markedOptions: config.options,
+    renderer: config.renderer,
+  });
+};
+
+// Create default markdown processor instance
+const defaultMarkdownProcessor = createMarkdownProcessor();
+
+/**
+ * Basic markdown renderer using default settings.
+ * Remember to sanitize the returned HTML if you render untrusted content in your host page.
+ * 
+ * For custom configuration, use `createMarkdownProcessor()` or `createMarkdownProcessorFromConfig()`.
  */
 export const markdownPostprocessor = (text: string): string => {
-  return marked.parse(text) as string;
+  return defaultMarkdownProcessor(text);
 };
 
 /**
@@ -54,11 +141,42 @@ const directiveReplacer = (source: string, placeholders: Array<{ token: string;
   return working;
 };
 
+/**
+ * Creates a directive postprocessor with custom markdown configuration.
+ * 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 with the provided configuration.
+ * 
+ * @param markdownConfig - Optional markdown configuration
+ * @returns A function that processes text with directives and markdown
+ */
+export const createDirectivePostprocessor = (markdownConfig?: AgentWidgetMarkdownConfig) => {
+  const processor = createMarkdownProcessorFromConfig(markdownConfig);
+  
+  return (text: string): string => {
+    const placeholders: Array<{ token: string; type: string }> = [];
+    const withTokens = directiveReplacer(text, placeholders);
+    let html = processor(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;
+  };
+};
+
 /**
  * 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.
+ * Markdown using default settings.
+ * 
+ * For custom markdown configuration, use `createDirectivePostprocessor()`.
  */
 export const directivePostprocessor = (text: string): string => {
   const placeholders: Array<{ token: string; type: string }> = [];

package/src/session.ts

@@ -2,7 +2,8 @@ import { AgentWidgetClient } from "./client";
 import {
   AgentWidgetConfig,
   AgentWidgetEvent,
-  AgentWidgetMessage
+  AgentWidgetMessage,
+  ClientSession
 } from "./types";
 
 export type AgentWidgetSessionStatus =
@@ -25,6 +26,9 @@ export class AgentWidgetSession {
   private streaming = false;
   private abortController: AbortController | null = null;
   private sequenceCounter = Date.now();
+  
+  // Client token session management
+  private clientSession: ClientSession | null = null;
 
   constructor(
     private config: AgentWidgetConfig = {},
@@ -43,6 +47,78 @@ export class AgentWidgetSession {
     this.callbacks.onStatusChanged(this.status);
   }
 
+  /**
+   * Check if running in client token mode
+   */
+  public isClientTokenMode(): boolean {
+    return this.client.isClientTokenMode();
+  }
+
+  /**
+   * Initialize the client session (for client token mode).
+   * This is called automatically on first message, but can be called
+   * explicitly to pre-initialize the session and get config from server.
+   */
+  public async initClientSession(): Promise<ClientSession | null> {
+    if (!this.isClientTokenMode()) {
+      return null;
+    }
+    
+    try {
+      const session = await this.client.initSession();
+      this.setClientSession(session);
+      return session;
+    } catch (error) {
+      this.callbacks.onError?.(
+        error instanceof Error ? error : new Error(String(error))
+      );
+      return null;
+    }
+  }
+
+  /**
+   * Set the client session after initialization
+   */
+  public setClientSession(session: ClientSession): void {
+    this.clientSession = session;
+    
+    // Optionally add welcome message from session config
+    if (session.config.welcomeMessage && this.messages.length === 0) {
+      const welcomeMessage: AgentWidgetMessage = {
+        id: `welcome-${Date.now()}`,
+        role: "assistant",
+        content: session.config.welcomeMessage,
+        createdAt: new Date().toISOString(),
+        sequence: this.nextSequence()
+      };
+      this.appendMessage(welcomeMessage);
+    }
+  }
+
+  /**
+   * Get current client session
+   */
+  public getClientSession(): ClientSession | null {
+    return this.clientSession ?? this.client.getClientSession();
+  }
+
+  /**
+   * Check if session is valid and not expired
+   */
+  public isSessionValid(): boolean {
+    const session = this.getClientSession();
+    if (!session) return false;
+    return new Date() < session.expiresAt;
+  }
+
+  /**
+   * Clear session (on expiry or error)
+   */
+  public clearClientSession(): void {
+    this.clientSession = null;
+    this.client.clearClientSession();
+  }
+
   public updateConfig(next: AgentWidgetConfig) {
     this.config = { ...this.config, ...next };
     this.client = new AgentWidgetClient(this.config);