@makemore/agent-frontend 1.6.0 → 1.7.1

package/README.md

@@ -174,6 +174,41 @@ 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` |
+
+### 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)
 

package/dist/chat-widget.js

@@ -70,6 +70,8 @@
     showTTSButton: true,
     showVoiceSettings: true,
     showExpandButton: true,
+    // Event callback
+    onEvent: null, // Callback for SSE events: (eventType, payload) => void
   };
 
   // State
@@ -492,6 +494,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 +526,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 +552,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 +581,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 +632,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');
@@ -645,7 +689,7 @@
           state.isSimulating = false;
 
           // Speak simulated user message if TTS enabled
-          if (config.enableTTS && config.ttsVoices.user) {
+          if (config.enableTTS) {
             await speakText(data.response, 'user');
           }
 
@@ -670,9 +714,15 @@
 
     const journey = config.journeyTypes[journeyType];
     if (journey?.initialMessage) {
-      setTimeout(() => {
+      setTimeout(async () => {
         state.isSimulating = true;
         render();
+
+        // Speak initial message if TTS enabled
+        if (config.enableTTS) {
+          await speakText(journey.initialMessage, 'user');
+        }
+
         sendMessage(journey.initialMessage).then(() => {
           state.isSimulating = false;
           render();
@@ -1009,6 +1059,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() {
@@ -1058,6 +1115,8 @@
         if (input && input.value.trim()) {
           sendMessage(input.value);
           input.value = '';
+          // Keep focus on input after sending
+          input.focus();
         }
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "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": [