@makemore/agent-frontend 1.8.0 → 2.0.0

package/src/hooks/useModels.js

@@ -0,0 +1,69 @@
+/**
+ * Models hook - manages available models and selection
+ */
+
+import { useState, useEffect, useCallback } from 'preact/hooks';
+
+export function useModels(config, api, storage) {
+  const [availableModels, setAvailableModels] = useState([]);
+  const [selectedModel, setSelectedModel] = useState(null);
+  const [defaultModel, setDefaultModel] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Load available models on mount
+  useEffect(() => {
+    const loadModels = async () => {
+      if (!config.showModelSelector) return;
+      
+      setIsLoading(true);
+      try {
+        const response = await fetch(
+          `${config.backendUrl}${config.apiPaths.models}`,
+          api.getFetchOptions({ method: 'GET' })
+        );
+        
+        if (response.ok) {
+          const data = await response.json();
+          const models = data.models || [];
+          setAvailableModels(models);
+          setDefaultModel(data.default);
+          
+          // Restore saved model or use default
+          const savedModel = storage?.get(config.modelKey);
+          if (savedModel && models.some(m => m.id === savedModel)) {
+            setSelectedModel(savedModel);
+          } else {
+            setSelectedModel(data.default);
+          }
+        }
+      } catch (err) {
+        console.warn('[ChatWidget] Failed to load models:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadModels();
+  }, [config.backendUrl, config.apiPaths.models, config.showModelSelector, config.modelKey, api, storage]);
+
+  // Select a model
+  const selectModel = useCallback((modelId) => {
+    setSelectedModel(modelId);
+    storage?.set(config.modelKey, modelId);
+  }, [config.modelKey, storage]);
+
+  // Get the currently selected model object
+  const getSelectedModelInfo = useCallback(() => {
+    return availableModels.find(m => m.id === selectedModel) || null;
+  }, [availableModels, selectedModel]);
+
+  return {
+    availableModels,
+    selectedModel,
+    defaultModel,
+    isLoading,
+    selectModel,
+    getSelectedModelInfo,
+  };
+}
+

package/src/index.js

@@ -0,0 +1,222 @@
+/**
+ * Chat Widget - Main Entry Point
+ * 
+ * Provides the same public API as the original vanilla JS version:
+ * - ChatWidget.init(config) - Initialize singleton instance
+ * - ChatWidget.createInstance(config) - Create multiple instances
+ * - ChatWidget.open/close/send/etc - Control the widget
+ */
+
+import { render, h } from 'preact';
+import { html } from 'htm/preact';
+import { ChatWidget as ChatWidgetComponent } from './components/ChatWidget.js';
+import { mergeConfig } from './utils/config.js';
+
+// Track instances
+const instances = new Map();
+let instanceCounter = 0;
+let defaultInstance = null;
+
+/**
+ * Widget instance wrapper - provides imperative API around the Preact component
+ */
+class ChatWidgetInstance {
+  constructor(userConfig = {}) {
+    this.instanceId = `cw-${++instanceCounter}`;
+    this.config = mergeConfig(userConfig);
+    this.container = null;
+    this._state = {};
+    this._apiRef = { current: null };
+
+    instances.set(this.instanceId, this);
+  }
+
+  _handleStateChange = (state) => {
+    this._state = state;
+  };
+
+  init() {
+    if (this.config.containerId) {
+      // Embedded mode: use existing container
+      this.container = document.getElementById(this.config.containerId);
+      if (!this.container) {
+        console.error(`[ChatWidget] Container not found: ${this.config.containerId}`);
+        return this;
+      }
+      this.container.classList.add('cw-container-embedded');
+    } else {
+      // Floating mode: create container
+      this.container = document.createElement('div');
+      this.container.id = this.instanceId;
+      this.container.className = `cw-container cw-position-${this.config.position}`;
+      document.body.appendChild(this.container);
+    }
+
+    // Render the Preact component
+    this._render();
+
+    console.log(`[ChatWidget] Instance ${this.instanceId} initialized`);
+    return this;
+  }
+
+  _render(configOverrides = {}) {
+    if (!this.container) return;
+    render(
+      html`<${ChatWidgetComponent}
+        config=${{ ...this.config, ...configOverrides }}
+        onStateChange=${this._handleStateChange}
+        markdownParser=${ChatWidget._enhancedMarkdownParser}
+        apiRef=${this._apiRef}
+      />`,
+      this.container
+    );
+  }
+
+  destroy() {
+    if (this.container) {
+      render(null, this.container);
+      
+      if (this.config.containerId) {
+        this.container.classList.remove('cw-container-embedded');
+      } else {
+        this.container.remove();
+      }
+      this.container = null;
+    }
+
+    instances.delete(this.instanceId);
+    console.log(`[ChatWidget] Instance ${this.instanceId} destroyed`);
+  }
+
+  // Public API methods - delegate to component via apiRef
+  open() {
+    if (this._apiRef.current) {
+      this._apiRef.current.open();
+    } else {
+      this._render({ forceOpen: true });
+    }
+  }
+
+  close() {
+    if (this._apiRef.current) {
+      this._apiRef.current.close();
+    } else {
+      this._render({ forceOpen: false });
+    }
+  }
+
+  send(message) {
+    if (this._apiRef.current) {
+      this._apiRef.current.send(message);
+    }
+  }
+
+  clearMessages() {
+    if (this._apiRef.current) {
+      this._apiRef.current.clearMessages();
+    }
+  }
+
+  toggleTTS() {
+    if (this._apiRef.current) {
+      this._apiRef.current.toggleTTS();
+    }
+  }
+
+  stopSpeech() {
+    if (this._apiRef.current) {
+      this._apiRef.current.stopSpeech();
+    }
+  }
+
+  setAuth(config) {
+    if (this._apiRef.current) {
+      this._apiRef.current.setAuth(config);
+    }
+  }
+
+  clearAuth() {
+    if (this._apiRef.current) {
+      this._apiRef.current.clearAuth();
+    }
+  }
+
+  getState() {
+    return { ...this._state };
+  }
+
+  getConfig() {
+    return { ...this.config };
+  }
+}
+
+// ============================================================================
+// Public API
+// ============================================================================
+
+function createInstance(config = {}) {
+  const instance = new ChatWidgetInstance(config);
+  return instance.init();
+}
+
+function init(config = {}) {
+  if (defaultInstance) {
+    defaultInstance.destroy();
+  }
+  defaultInstance = createInstance(config);
+  return defaultInstance;
+}
+
+function destroy() {
+  if (defaultInstance) {
+    defaultInstance.destroy();
+    defaultInstance = null;
+  }
+}
+
+// Proxy methods to default instance
+function open() { if (defaultInstance) defaultInstance.open(); }
+function close() { if (defaultInstance) defaultInstance.close(); }
+function send(message) { if (defaultInstance) defaultInstance.send(message); }
+function clearMessages() { if (defaultInstance) defaultInstance.clearMessages(); }
+function toggleTTS() { if (defaultInstance) defaultInstance.toggleTTS(); }
+function stopSpeech() { if (defaultInstance) defaultInstance.stopSpeech(); }
+function setAuth(config) { if (defaultInstance) defaultInstance.setAuth(config); }
+function clearAuth() { if (defaultInstance) defaultInstance.clearAuth(); }
+function getState() { return defaultInstance ? defaultInstance.getState() : null; }
+function getConfig() { return defaultInstance ? defaultInstance.getConfig() : null; }
+
+// Export public API
+const ChatWidget = {
+  // Multi-instance API
+  createInstance,
+  getInstance: (id) => instances.get(id),
+  getAllInstances: () => Array.from(instances.values()),
+
+  // Singleton API (backwards compatible)
+  init,
+  destroy,
+  open,
+  close,
+  send,
+  clearMessages,
+  toggleTTS,
+  stopSpeech,
+  setAuth,
+  clearAuth,
+  getState,
+  getConfig,
+
+  // For markdown plugin
+  _enhancedMarkdownParser: null,
+};
+
+// Export for both module and global usage
+export { ChatWidget };
+export default ChatWidget;
+
+// Also attach to window for script tag usage
+if (typeof window !== 'undefined') {
+  window.ChatWidget = ChatWidget;
+}
+

package/src/utils/api.js

@@ -0,0 +1,90 @@
+/**
+ * API utilities for the chat widget
+ */
+
+import { getCSRFToken } from './helpers.js';
+
+export function createApiClient(config, getState, setState) {
+  const getAuthStrategy = () => {
+    if (config.authStrategy) return config.authStrategy;
+    if (config.authToken) return 'token';
+    if (config.apiPaths.anonymousSession || config.anonymousSessionEndpoint) return 'anonymous';
+    return 'none';
+  };
+
+  const getAuthHeaders = () => {
+    const strategy = getAuthStrategy();
+    const headers = {};
+    const token = config.authToken || getState().authToken;
+
+    if (strategy === 'token' && token) {
+      const headerName = config.authHeader || 'Authorization';
+      const prefix = config.authTokenPrefix !== undefined ? config.authTokenPrefix : 'Token';
+      headers[headerName] = prefix ? `${prefix} ${token}` : token;
+    } else if (strategy === 'jwt' && token) {
+      const headerName = config.authHeader || 'Authorization';
+      const prefix = config.authTokenPrefix !== undefined ? config.authTokenPrefix : 'Bearer';
+      headers[headerName] = prefix ? `${prefix} ${token}` : token;
+    } else if (strategy === 'anonymous' && token) {
+      const headerName = config.authHeader || config.anonymousTokenHeader || 'X-Anonymous-Token';
+      headers[headerName] = token;
+    }
+
+    if (strategy === 'session') {
+      const csrfToken = getCSRFToken(config.csrfCookieName);
+      if (csrfToken) {
+        headers['X-CSRFToken'] = csrfToken;
+      }
+    }
+
+    return headers;
+  };
+
+  const getFetchOptions = (options = {}) => {
+    const strategy = getAuthStrategy();
+    const fetchOptions = { ...options };
+    fetchOptions.headers = { ...fetchOptions.headers, ...getAuthHeaders() };
+    if (strategy === 'session') fetchOptions.credentials = 'include';
+    return fetchOptions;
+  };
+
+  const getOrCreateSession = async () => {
+    const strategy = getAuthStrategy();
+    const state = getState();
+    
+    if (strategy !== 'anonymous') return config.authToken || state.authToken;
+    if (state.authToken) return state.authToken;
+
+    const storageKey = config.anonymousTokenKey || config.sessionTokenKey;
+    const stored = state.storage?.get(storageKey);
+    if (stored) {
+      setState(s => ({ ...s, authToken: stored }));
+      return stored;
+    }
+
+    try {
+      const endpoint = config.anonymousSessionEndpoint || config.apiPaths.anonymousSession;
+      const response = await fetch(`${config.backendUrl}${endpoint}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setState(s => ({ ...s, authToken: data.token }));
+        state.storage?.set(storageKey, data.token);
+        return data.token;
+      }
+    } catch (e) {
+      console.warn('[ChatWidget] Failed to create session:', e);
+    }
+    return null;
+  };
+
+  return {
+    getAuthStrategy,
+    getAuthHeaders,
+    getFetchOptions,
+    getOrCreateSession,
+  };
+}
+

package/src/utils/config.js

@@ -0,0 +1,83 @@
+/**
+ * Default configuration for the chat widget
+ */
+
+export const DEFAULT_CONFIG = {
+  backendUrl: 'http://localhost:8000',
+  agentKey: 'default-agent',
+  title: 'Chat Assistant',
+  subtitle: 'How can we help you today?',
+  primaryColor: '#0066cc',
+  position: 'bottom-right',
+  defaultJourneyType: 'general',
+  enableDebugMode: true,
+  enableAutoRun: true,
+  journeyTypes: {},
+  customerPrompts: {},
+  placeholder: 'Type your message...',
+  emptyStateTitle: 'Start a Conversation',
+  emptyStateMessage: 'Send a message to get started.',
+  
+  // Auth
+  authStrategy: null,
+  authToken: null,
+  authHeader: null,
+  authTokenPrefix: null,
+  anonymousSessionEndpoint: null,
+  anonymousTokenKey: 'chat_widget_anonymous_token',
+  onAuthError: null,
+  anonymousTokenHeader: 'X-Anonymous-Token',
+  conversationIdKey: 'chat_widget_conversation_id',
+  sessionTokenKey: 'chat_widget_session_token',
+  
+  // API paths
+  apiPaths: {
+    anonymousSession: '/api/accounts/anonymous-session/',
+    conversations: '/api/agent-runtime/conversations/',
+    runs: '/api/agent-runtime/runs/',
+    runEvents: '/api/agent-runtime/runs/{runId}/events/',
+    simulateCustomer: '/api/agent-runtime/simulate-customer/',
+    ttsVoices: '/api/tts/voices/',
+    ttsSetVoice: '/api/tts/set-voice/',
+    models: '/api/agent-runtime/models/',
+  },
+
+  // UI options
+  showConversationSidebar: true,
+  showClearButton: true,
+  showDebugButton: true,
+  showTTSButton: true,
+  showVoiceSettings: true,
+  showExpandButton: true,
+  showModelSelector: false,
+
+  // Model selection
+  modelKey: 'chat_widget_selected_model',
+  
+  // Auto-run
+  autoRunDelay: 1000,
+  autoRunMode: 'automatic',
+  
+  // TTS
+  enableTTS: false,
+  ttsProxyUrl: null,
+  elevenLabsApiKey: null,
+  ttsVoices: { assistant: null, user: null },
+  ttsModel: 'eleven_turbo_v2_5',
+  ttsSettings: { stability: 0.5, similarity_boost: 0.75, style: 0.0, use_speaker_boost: true },
+  availableVoices: [],
+  
+  // Callbacks
+  onEvent: null,
+  
+  // Multi-instance options
+  containerId: null,
+  embedded: false,
+  metadata: {},
+};
+
+export function mergeConfig(userConfig) {
+  const mergedApiPaths = { ...DEFAULT_CONFIG.apiPaths, ...(userConfig.apiPaths || {}) };
+  return { ...DEFAULT_CONFIG, ...userConfig, apiPaths: mergedApiPaths };
+}
+

package/src/utils/helpers.js

@@ -0,0 +1,83 @@
+/**
+ * Utility functions for the chat widget
+ */
+
+export function generateId() {
+  return 'msg-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
+}
+
+export function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+export function formatDate(dateStr) {
+  if (!dateStr) return '';
+  try {
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffMs = now - date;
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'Just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+
+    return date.toLocaleDateString();
+  } catch (e) {
+    return '';
+  }
+}
+
+export function parseMarkdown(text, enhancedParser = null) {
+  if (enhancedParser) {
+    return enhancedParser(text);
+  }
+  let html = escapeHtml(text);
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+  html = html.replace(/_(.+?)_/g, '<em>$1</em>');
+  html = html.replace(/`(.+?)`/g, '<code>$1</code>');
+  html = html.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+  html = html.replace(/\n/g, '<br>');
+  return html;
+}
+
+// Storage helpers
+export function createStorage(prefix = '') {
+  const storageKey = (key) => prefix ? `${key}_${prefix}` : key;
+  
+  return {
+    get(key) {
+      try { return localStorage.getItem(storageKey(key)); } catch (e) { return null; }
+    },
+    set(key, value) {
+      try {
+        const k = storageKey(key);
+        value === null ? localStorage.removeItem(k) : localStorage.setItem(k, value);
+      } catch (e) {}
+    }
+  };
+}
+
+// CSRF token helper
+export function getCSRFToken(cookieName = 'csrftoken') {
+  const cookies = document.cookie.split(';');
+  for (let cookie of cookies) {
+    const [name, value] = cookie.trim().split('=');
+    if (name === cookieName) {
+      return decodeURIComponent(value);
+    }
+  }
+  const metaTag = document.querySelector('meta[name="csrf-token"]');
+  if (metaTag) {
+    return metaTag.getAttribute('content');
+  }
+  return null;
+}
+