@makemore/agent-frontend 1.6.1 → 1.8.0

package/README.md

@@ -174,6 +174,159 @@ See `django-tts-example.py` for the complete Django backend implementation.
 | `showTTSButton` | boolean | `true` | Show TTS toggle button in header |
 | `showVoiceSettings` | boolean | `true` | Show voice settings button in header (works with proxy and direct API) |
 | `showExpandButton` | boolean | `true` | Show expand/minimize button in header |
+| `onEvent` | function | `null` | Callback for SSE events: `(eventType, payload) => void` |
+| `authStrategy` | string | `null` | Auth strategy: `'token'`, `'jwt'`, `'session'`, `'anonymous'`, `'none'` (auto-detected if null) |
+| `authToken` | string | `null` | Token value for `'token'` or `'jwt'` strategies |
+| `authHeader` | string | `null` | Custom header name (defaults based on strategy) |
+| `authTokenPrefix` | string | `null` | Custom token prefix (defaults based on strategy) |
+| `anonymousSessionEndpoint` | string | `null` | Endpoint for anonymous session (defaults to `apiPaths.anonymousSession`) |
+| `anonymousTokenKey` | string | `'chat_widget_anonymous_token'` | localStorage key for anonymous token |
+| `onAuthError` | function | `null` | Callback for auth errors: `(error) => void` |
+
+### Authentication
+
+The widget supports multiple authentication strategies with sensible defaults:
+
+#### Token Authentication (Django REST Framework)
+
+```javascript
+ChatWidget.init({
+  backendUrl: 'https://api.example.com',
+  agentKey: 'my-agent',
+  authStrategy: 'token',
+  authToken: 'abc123...',
+  // Sends: Authorization: Token abc123...
+});
+```
+
+#### JWT/Bearer Authentication
+
+```javascript
+ChatWidget.init({
+  backendUrl: 'https://api.example.com',
+  agentKey: 'my-agent',
+  authStrategy: 'jwt',
+  authToken: 'eyJ...',
+  // Sends: Authorization: Bearer eyJ...
+});
+```
+
+#### Session-Based Authentication (Cookies)
+
+```javascript
+ChatWidget.init({
+  backendUrl: 'https://api.example.com',
+  agentKey: 'my-agent',
+  authStrategy: 'session',
+  // Sends requests with credentials: 'include'
+  // No auth header, relies on session cookie
+});
+```
+
+#### Anonymous Session Tokens
+
+```javascript
+ChatWidget.init({
+  backendUrl: 'https://api.example.com',
+  agentKey: 'my-agent',
+  authStrategy: 'anonymous',
+  anonymousSessionEndpoint: '/api/accounts/anonymous-session/',
+  // On first request: fetches anonymous token from endpoint
+  // Persists token to localStorage
+  // Sends: X-Anonymous-Token: {token}
+});
+```
+
+#### No Authentication (Public Endpoints)
+
+```javascript
+ChatWidget.init({
+  backendUrl: 'https://api.example.com',
+  agentKey: 'my-agent',
+  authStrategy: 'none',
+  // No auth headers sent
+});
+```
+
+#### Custom Headers and Prefixes
+
+```javascript
+ChatWidget.init({
+  authStrategy: 'token',
+  authToken: 'mytoken123',
+  authHeader: 'X-API-Key',        // Custom header name
+  authTokenPrefix: '',             // No prefix (just the token)
+  // Sends: X-API-Key: mytoken123
+});
+```
+
+#### Dynamic Token Updates
+
+Update authentication after initialization (e.g., after user login):
+
+```javascript
+// After user logs in
+ChatWidget.setAuth({
+  strategy: 'jwt',
+  token: 'new-jwt-token-after-login'
+});
+
+// After user logs out
+ChatWidget.clearAuth();
+
+// Handle token refresh on auth errors
+ChatWidget.init({
+  authStrategy: 'jwt',
+  authToken: initialToken,
+  onAuthError: async (error) => {
+    if (error.status === 401) {
+      const newToken = await refreshToken();
+      ChatWidget.setAuth({ token: newToken });
+    }
+  }
+});
+```
+
+#### Auto-Detection
+
+If no `authStrategy` is specified, the widget auto-detects based on config:
+- If `authToken` is provided → uses `'token'` strategy
+- If `anonymousSessionEndpoint` or `apiPaths.anonymousSession` is configured → uses `'anonymous'` strategy
+- Otherwise → uses `'none'`
+
+### Event Callback
+
+The `onEvent` callback allows your application to react to all SSE events from the agent:
+
+```javascript
+ChatWidget.init({
+  backendUrl: 'http://localhost:8000',
+  agentKey: 'your-agent',
+  onEvent: (eventType, payload) => {
+    console.log('Event:', eventType, payload);
+
+    // Example: Navigate when a session is created
+    if (eventType === 'tool.result' && payload.result?.session_id) {
+      window.location.href = `/session/${payload.result.session_id}`;
+    }
+
+    // Example: Track tool usage
+    if (eventType === 'tool.call') {
+      analytics.track('Tool Called', { tool: payload.name });
+    }
+  },
+});
+```
+
+**Event Types:**
+- `assistant.message` - Streaming assistant responses (payload: `{ content: string }`)
+- `tool.call` - Tool being called (payload: `{ name: string, arguments: object }`)
+- `tool.result` - Tool result (payload: `{ result: any }`)
+- `run.succeeded` - Run completed successfully
+- `run.failed` - Run failed (payload: `{ error: string }`)
+- `run.cancelled` - Run was cancelled
+- `run.timed_out` - Run timed out
+- Custom events emitted by your agent
 
 ### Text-to-Speech (ElevenLabs)
 
@@ -442,6 +595,10 @@ ChatWidget.setAutoRunMode('automatic');  // 'automatic', 'confirm', or 'manual'
 // Change auto-run delay (in milliseconds)
 ChatWidget.setAutoRunDelay(2000);
 
+// Authentication methods
+ChatWidget.setAuth({ strategy: 'jwt', token: 'new-token' }); // Update auth
+ChatWidget.clearAuth(); // Clear authentication
+
 // Remove the widget from the page
 ChatWidget.destroy();
 

package/dist/chat-widget.js

@@ -33,9 +33,18 @@
     placeholder: 'Type your message...',
     emptyStateTitle: 'Start a Conversation',
     emptyStateMessage: 'Send a message to get started.',
+    // Authentication configuration
+    authStrategy: null, // 'token' | 'jwt' | 'session' | 'anonymous' | 'none' (auto-detected if null)
+    authToken: null, // Token value for 'token' or 'jwt' strategies
+    authHeader: null, // Custom header name (defaults based on strategy)
+    authTokenPrefix: null, // Custom token prefix (defaults based on strategy)
+    anonymousSessionEndpoint: null, // Endpoint for anonymous session (defaults to apiPaths.anonymousSession)
+    anonymousTokenKey: 'chat_widget_anonymous_token', // Storage key for anonymous token
+    onAuthError: null, // Callback for auth errors: (error) => void
+    // Legacy config (deprecated but still supported)
     anonymousTokenHeader: 'X-Anonymous-Token',
     conversationIdKey: 'chat_widget_conversation_id',
-    sessionTokenKey: 'chat_widget_session_token',
+    sessionTokenKey: 'chat_widget_session_token', // Deprecated: use anonymousTokenKey
     // API endpoint paths (can be customized for different backend setups)
     apiPaths: {
       anonymousSession: '/api/accounts/anonymous-session/',
@@ -70,6 +79,8 @@
     showTTSButton: true,
     showVoiceSettings: true,
     showExpandButton: true,
+    // Event callback
+    onEvent: null, // Callback for SSE events: (eventType, payload) => void
   };
 
   // State
@@ -85,7 +96,8 @@
     journeyType: 'general',
     messages: [],
     conversationId: null,
-    sessionToken: null,
+    sessionToken: null, // Deprecated: use authToken
+    authToken: null, // Current auth token (for token/jwt/anonymous strategies)
     error: null,
     eventSource: null,
     currentAudio: null,
@@ -217,17 +229,16 @@
 
       if (config.ttsProxyUrl) {
         // Use Django proxy
-        response = await fetch(config.ttsProxyUrl, {
+        response = await fetch(config.ttsProxyUrl, getFetchOptions({
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
-            ...(state.sessionToken ? { [config.anonymousTokenHeader]: state.sessionToken } : {}),
           },
           body: JSON.stringify({
             text: text,
             role: role,
           }),
-        });
+        }));
       } else {
         // Direct ElevenLabs API call
         const voiceId = role === 'assistant' ? config.ttsVoices.assistant : config.ttsVoices.user;
@@ -306,19 +317,15 @@
     // If using proxy, notify backend of voice change
     if (config.ttsProxyUrl) {
       try {
-        const token = await getOrCreateSession();
-        const headers = {
-          'Content-Type': 'application/json',
-        };
-        if (token) {
-          headers[config.anonymousTokenHeader] = token;
-        }
+        await getOrCreateSession();
 
-        await fetch(`${config.backendUrl}${config.apiPaths.ttsSetVoice}`, {
+        await fetch(`${config.backendUrl}${config.apiPaths.ttsSetVoice}`, getFetchOptions({
           method: 'POST',
-          headers,
+          headers: {
+            'Content-Type': 'application/json',
+          },
           body: JSON.stringify({ role, voice_id: voiceId }),
-        });
+        }));
       } catch (err) {
         console.error('[ChatWidget] Failed to set voice on backend:', err);
       }
@@ -333,15 +340,9 @@
 
       if (config.ttsProxyUrl) {
         // Fetch voices from Django backend
-        const token = await getOrCreateSession();
-        const headers = {};
-        if (token) {
-          headers[config.anonymousTokenHeader] = token;
-        }
+        await getOrCreateSession();
 
-        const response = await fetch(`${config.backendUrl}${config.apiPaths.ttsVoices}`, {
-          headers,
-        });
+        const response = await fetch(`${config.backendUrl}${config.apiPaths.ttsVoices}`, getFetchOptions());
 
         if (response.ok) {
           const data = await response.json();
@@ -368,34 +369,162 @@
     }
   }
 
+  // ============================================================================
+  // Authentication
+  // ============================================================================
+
+  /**
+   * Determine the effective auth strategy based on config
+   */
+  function getAuthStrategy() {
+    if (config.authStrategy) {
+      return config.authStrategy;
+    }
+
+    // Auto-detect strategy based on config
+    if (config.authToken) {
+      return 'token'; // Default to token auth if token provided
+    }
+
+    // Check for legacy anonymous session config
+    if (config.apiPaths.anonymousSession || config.anonymousSessionEndpoint) {
+      return 'anonymous';
+    }
+
+    return 'none';
+  }
+
+  /**
+   * Get auth headers based on current strategy
+   */
+  function getAuthHeaders() {
+    const strategy = getAuthStrategy();
+    const headers = {};
+
+    switch (strategy) {
+      case 'token': {
+        const token = config.authToken || state.authToken;
+        if (token) {
+          const headerName = config.authHeader || 'Authorization';
+          const prefix = config.authTokenPrefix !== undefined ? config.authTokenPrefix : 'Token';
+          headers[headerName] = prefix ? `${prefix} ${token}` : token;
+        }
+        break;
+      }
+
+      case 'jwt': {
+        const token = config.authToken || state.authToken;
+        if (token) {
+          const headerName = config.authHeader || 'Authorization';
+          const prefix = config.authTokenPrefix !== undefined ? config.authTokenPrefix : 'Bearer';
+          headers[headerName] = prefix ? `${prefix} ${token}` : token;
+        }
+        break;
+      }
+
+      case 'anonymous': {
+        const token = state.authToken || state.sessionToken; // Support legacy sessionToken
+        if (token) {
+          const headerName = config.authHeader || config.anonymousTokenHeader || 'X-Anonymous-Token';
+          headers[headerName] = token;
+        }
+        break;
+      }
+
+      case 'session':
+        // Session auth uses cookies, no headers needed
+        break;
+
+      case 'none':
+        // No auth
+        break;
+    }
+
+    return headers;
+  }
+
+  /**
+   * Get fetch options including auth credentials
+   */
+  function getFetchOptions(options = {}) {
+    const strategy = getAuthStrategy();
+    const fetchOptions = { ...options };
+
+    // Add auth headers
+    fetchOptions.headers = {
+      ...fetchOptions.headers,
+      ...getAuthHeaders(),
+    };
+
+    // For session auth, include credentials
+    if (strategy === 'session') {
+      fetchOptions.credentials = 'include';
+    }
+
+    return fetchOptions;
+  }
+
+  /**
+   * Handle auth errors (401, 403)
+   */
+  function handleAuthError(error, response) {
+    if (config.onAuthError && typeof config.onAuthError === 'function') {
+      const authError = new Error(error.message || 'Authentication failed');
+      authError.status = response?.status;
+      authError.response = response;
+      config.onAuthError(authError);
+    }
+  }
+
   // ============================================================================
   // Session Management
   // ============================================================================
 
   async function getOrCreateSession() {
+    const strategy = getAuthStrategy();
+
+    // For non-anonymous strategies, return the configured token
+    if (strategy !== 'anonymous') {
+      return config.authToken || state.authToken;
+    }
+
+    // Anonymous strategy: get or create anonymous token
+    if (state.authToken) {
+      return state.authToken;
+    }
+
+    // Support legacy sessionToken
     if (state.sessionToken) {
-      return state.sessionToken;
+      state.authToken = state.sessionToken;
+      return state.authToken;
     }
 
     // Try to restore from storage
-    const stored = getStoredValue(config.sessionTokenKey);
+    const storageKey = config.anonymousTokenKey || config.sessionTokenKey;
+    const stored = getStoredValue(storageKey);
     if (stored) {
-      state.sessionToken = stored;
+      state.authToken = stored;
+      state.sessionToken = stored; // Keep legacy field in sync
       return stored;
     }
 
     // Create new anonymous session
     try {
-      const response = await fetch(`${config.backendUrl}${config.apiPaths.anonymousSession}`, {
+      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();
-        state.sessionToken = data.token;
-        setStoredValue(config.sessionTokenKey, data.token);
-        return data.token;
+        const token = data.token;
+        state.authToken = token;
+        state.sessionToken = token; // Keep legacy field in sync
+        setStoredValue(storageKey, token);
+        return token;
+      } else if (response.status === 401 || response.status === 403) {
+        handleAuthError(new Error('Failed to create anonymous session'), response);
       }
     } catch (e) {
       console.warn('[ChatWidget] Failed to create session:', e);
@@ -426,31 +555,35 @@
     render();
 
     try {
+      // Get auth token (if using anonymous strategy)
       const token = await getOrCreateSession();
-      const headers = { 'Content-Type': 'application/json' };
-      if (token) {
-        headers[config.anonymousTokenHeader] = token;
-      }
 
       // Restore conversation ID from storage if not set
       if (!state.conversationId) {
         state.conversationId = getStoredValue(config.conversationIdKey);
       }
 
-      const response = await fetch(`${config.backendUrl}${config.apiPaths.runs}`, {
+      const response = await fetch(`${config.backendUrl}${config.apiPaths.runs}`, getFetchOptions({
         method: 'POST',
-        headers,
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           agentKey: config.agentKey,
           conversationId: state.conversationId,
           messages: [{ role: 'user', content: content.trim() }],
           metadata: { journey_type: state.journeyType },
         }),
-      });
+      }));
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || `HTTP ${response.status}`);
+        const error = new Error(errorData.error || `HTTP ${response.status}`);
+
+        // Handle auth errors
+        if (response.status === 401 || response.status === 403) {
+          handleAuthError(error, response);
+        }
+
+        throw error;
       }
 
       const run = await response.json();
@@ -492,6 +625,12 @@
     eventSource.addEventListener('assistant.message', (event) => {
       try {
         const data = JSON.parse(event.data);
+
+        // Call onEvent callback if provided
+        if (config.onEvent && typeof config.onEvent === 'function') {
+          config.onEvent('assistant.message', data.payload);
+        }
+
         const content = data.payload.content;
         if (content) {
           assistantContent += content;
@@ -518,18 +657,25 @@
 
     // Handler for tool calls (debug mode)
     eventSource.addEventListener('tool.call', (event) => {
-      if (!state.debugMode) return;
       try {
         const data = JSON.parse(event.data);
-        state.messages.push({
-          id: 'tool-call-' + Date.now(),
-          role: 'system',
-          content: `🔧 Tool: ${data.payload.name}`,
-          timestamp: new Date(),
-          type: 'tool_call',
-          metadata: { name: data.payload.name, arguments: data.payload.arguments },
-        });
-        render();
+
+        // Call onEvent callback if provided
+        if (config.onEvent && typeof config.onEvent === 'function') {
+          config.onEvent('tool.call', data.payload);
+        }
+
+        if (state.debugMode) {
+          state.messages.push({
+            id: 'tool-call-' + Date.now(),
+            role: 'system',
+            content: `🔧 Tool: ${data.payload.name}`,
+            timestamp: new Date(),
+            type: 'tool_call',
+            metadata: { name: data.payload.name, arguments: data.payload.arguments },
+          });
+          render();
+        }
       } catch (err) {
         console.error('[ChatWidget] Failed to parse tool.call:', err);
       }
@@ -537,19 +683,26 @@
 
     // Handler for tool results (debug mode)
     eventSource.addEventListener('tool.result', (event) => {
-      if (!state.debugMode) return;
       try {
         const data = JSON.parse(event.data);
-        const result = data.payload.result || '';
-        state.messages.push({
-          id: 'tool-result-' + Date.now(),
-          role: 'system',
-          content: `✅ Result: ${result.substring(0, 100)}${result.length > 100 ? '...' : ''}`,
-          timestamp: new Date(),
-          type: 'tool_result',
-          metadata: { result },
-        });
-        render();
+
+        // Call onEvent callback if provided
+        if (config.onEvent && typeof config.onEvent === 'function') {
+          config.onEvent('tool.result', data.payload);
+        }
+
+        if (state.debugMode) {
+          const result = data.payload.result || '';
+          state.messages.push({
+            id: 'tool-result-' + Date.now(),
+            role: 'system',
+            content: `✅ Result: ${result.substring(0, 100)}${result.length > 100 ? '...' : ''}`,
+            timestamp: new Date(),
+            type: 'tool_result',
+            metadata: { result },
+          });
+          render();
+        }
       } catch (err) {
         console.error('[ChatWidget] Failed to parse tool.result:', err);
       }
@@ -559,6 +712,12 @@
     const handleTerminal = (event) => {
       try {
         const data = JSON.parse(event.data);
+
+        // Call onEvent callback if provided
+        if (config.onEvent && typeof config.onEvent === 'function') {
+          config.onEvent(data.type, data.payload);
+        }
+
         if (data.type === 'run.failed') {
           state.error = data.payload.error || 'Agent run failed';
           state.messages.push({
@@ -604,6 +763,22 @@
     eventSource.addEventListener('run.cancelled', handleTerminal);
     eventSource.addEventListener('run.timed_out', handleTerminal);
 
+    // Generic handler for any other custom events
+    eventSource.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+
+        // Call onEvent callback for any unhandled events
+        if (config.onEvent && typeof config.onEvent === 'function') {
+          // Extract event type from data or use 'message' as default
+          const eventType = data.type || 'message';
+          config.onEvent(eventType, data.payload || data);
+        }
+      } catch (err) {
+        console.debug('[ChatWidget] Received non-JSON SSE message:', event.data);
+      }
+    };
+
     eventSource.onerror = () => {
       if (eventSource.readyState !== EventSource.CLOSED) {
         console.debug('[ChatWidget] SSE connection closed');
@@ -1015,6 +1190,13 @@
     if (messagesEl) {
       messagesEl.scrollTop = messagesEl.scrollHeight;
     }
+
+    // Focus input field
+    const inputEl = container.querySelector('.cw-input');
+    if (inputEl && !state.isLoading) {
+      // Use setTimeout to ensure focus happens after render completes
+      setTimeout(() => inputEl.focus(), 0);
+    }
   }
 
   function attachEventListeners() {
@@ -1064,6 +1246,8 @@
         if (input && input.value.trim()) {
           sendMessage(input.value);
           input.value = '';
+          // Keep focus on input after sending
+          input.focus();
         }
       });
     }
@@ -1095,6 +1279,11 @@
     };
     state.journeyType = config.defaultJourneyType;
 
+    // Initialize auth token from config
+    if (config.authToken) {
+      state.authToken = config.authToken;
+    }
+
     // Restore conversation ID
     state.conversationId = getStoredValue(config.conversationIdKey);
 
@@ -1140,6 +1329,42 @@
     sendMessage(message);
   }
 
+  /**
+   * Update authentication configuration
+   * @param {Object} authConfig - { strategy?: string, token?: string }
+   */
+  function setAuth(authConfig = {}) {
+    if (authConfig.strategy) {
+      config.authStrategy = authConfig.strategy;
+    }
+    if (authConfig.token !== undefined) {
+      config.authToken = authConfig.token;
+      state.authToken = authConfig.token;
+
+      // For anonymous strategy, also persist to storage
+      if (getAuthStrategy() === 'anonymous' && authConfig.token) {
+        const storageKey = config.anonymousTokenKey || config.sessionTokenKey;
+        setStoredValue(storageKey, authConfig.token);
+      }
+    }
+    console.log('[ChatWidget] Auth updated:', { strategy: getAuthStrategy(), hasToken: !!state.authToken });
+  }
+
+  /**
+   * Clear authentication
+   */
+  function clearAuth() {
+    config.authToken = null;
+    state.authToken = null;
+    state.sessionToken = null;
+
+    // Clear from storage
+    const storageKey = config.anonymousTokenKey || config.sessionTokenKey;
+    setStoredValue(storageKey, null);
+
+    console.log('[ChatWidget] Auth cleared');
+  }
+
   // Export public API
   global.ChatWidget = {
     init,
@@ -1156,6 +1381,8 @@
     toggleTTS,
     stopSpeech,
     setVoice,
+    setAuth,
+    clearAuth,
     getState: () => ({ ...state }),
     getConfig: () => ({ ...config }),
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "description": "A standalone, zero-dependency chat widget for AI agents. Embed conversational AI into any website with a single script tag.",
   "main": "dist/chat-widget.js",
   "files": [