@makemore/agent-frontend 1.1.0 → 1.4.0

package/README.md

@@ -23,14 +23,17 @@ Most chat widgets are tightly coupled to specific frameworks or require complex
 | Feature | Description |
 |---------|-------------|
 | 💬 **Real-time Streaming** | SSE-based message streaming for instant, token-by-token responses |
+| 🔊 **Text-to-Speech** | ElevenLabs integration with secure Django proxy support |
 | 🎨 **Theming** | Customize colors, titles, messages, and position |
 | 🌙 **Dark Mode** | Automatic dark mode based on system preferences |
 | 📱 **Responsive** | Works seamlessly on desktop and mobile |
 | 🔧 **Debug Mode** | Toggle visibility of tool calls and results |
-| 🤖 **Demo Flows** | Built-in auto-run mode for showcasing agent journeys |
+| 🤖 **Demo Flows** | Built-in auto-run mode with automatic, confirm, and manual modes |
 | 🔒 **Sessions** | Automatic anonymous session creation and management |
 | 💾 **Persistence** | Conversations persist across page reloads via localStorage |
 | 🛡️ **Isolated CSS** | Scoped styles that won't leak into or from your page |
+| 🎯 **Configurable APIs** | Customize backend endpoints to match your server structure |
+| 📝 **Enhanced Markdown** | Optional rich markdown with tables, code blocks, and syntax highlighting |
 
 ## Installation
 
@@ -61,9 +64,31 @@ Then include in your HTML:
 <script src="https://cdn.jsdelivr.net/npm/@makemore/agent-frontend/dist/chat-widget.js"></script>
 ```
 
+### Optional: Enhanced Markdown Support
+
+For full-featured markdown rendering (tables, code blocks with syntax highlighting, etc.), include the optional markdown addon:
+
+```html
+<!-- Core widget -->
+<link rel="stylesheet" href="https://unpkg.com/@makemore/agent-frontend/dist/chat-widget.css">
+<script src="https://unpkg.com/@makemore/agent-frontend/dist/chat-widget.js"></script>
+
+<!-- Optional: Enhanced markdown with marked.js -->
+<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://unpkg.com/@makemore/agent-frontend/dist/chat-widget-markdown.js"></script>
+
+<!-- Optional: Syntax highlighting for code blocks -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github-dark.min.css">
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/core.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/javascript.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/python.min.js"></script>
+```
+
+The widget automatically detects and uses the enhanced markdown parser if available. Without it, a basic markdown parser is used.
+
 ## Quick Start
 
-### Initialize the widget
+### Basic Setup
 
 ```html
 <script>
@@ -76,6 +101,23 @@ Then include in your HTML:
 </script>
 ```
 
+### With Text-to-Speech (Recommended: Django Proxy)
+
+```html
+<script>
+  ChatWidget.init({
+    backendUrl: 'https://your-api.com',
+    agentKey: 'your-agent',
+    title: 'Voice-Enabled Chat',
+    primaryColor: '#0066cc',
+    enableTTS: true,
+    ttsProxyUrl: 'https://your-api.com/api/tts/speak/',
+  });
+</script>
+```
+
+See `django-tts-example.py` for the complete Django backend implementation.
+
 ### With custom API paths
 
 ```html
@@ -115,6 +157,108 @@ Then include in your HTML:
 | `conversationIdKey` | string | `'chat_widget_conversation_id'` | localStorage key for conversation ID |
 | `sessionTokenKey` | string | `'chat_widget_session_token'` | localStorage key for session token |
 | `apiPaths` | object | See below | API endpoint paths (customizable for different backends) |
+| `autoRunMode` | string | `'automatic'` | Demo flow mode: `'automatic'`, `'confirm'`, or `'manual'` |
+| `autoRunDelay` | number | `1000` | Delay in milliseconds before auto-generating next message (automatic mode) |
+| `enableTTS` | boolean | `false` | Enable text-to-speech for messages |
+| `ttsProxyUrl` | string | `null` | Django proxy URL for TTS (recommended for security) |
+| `elevenLabsApiKey` | string | `null` | ElevenLabs API key (only if not using proxy) |
+| `ttsVoices` | object | `{ assistant: null, user: null }` | Voice IDs (only if not using proxy) |
+| `ttsModel` | string | `'eleven_turbo_v2_5'` | ElevenLabs model (only if not using proxy) |
+| `ttsSettings` | object | See below | ElevenLabs voice settings (only if not using proxy) |
+
+### Text-to-Speech (ElevenLabs)
+
+Add realistic voice narration to your chat widget using ElevenLabs. Two integration options:
+
+#### Option 1: Secure Django Proxy (Recommended)
+
+Keep your API key secure on the server:
+
+```javascript
+ChatWidget.init({
+  enableTTS: true,
+  ttsProxyUrl: 'https://your-backend.com/api/tts/speak/',
+  // No API key or voice IDs needed - configured on server
+});
+```
+
+**Django Setup:**
+
+See `django-tts-example.py` for a complete Django REST Framework implementation. Quick setup:
+
+1. Install: `pip install requests`
+2. Add to `settings.py`:
+```python
+ELEVENLABS_API_KEY = 'your_api_key_here'
+ELEVENLABS_VOICES = {
+    'assistant': 'EXAVITQu4vr4xnSDxMaL',  # Bella
+    'user': 'pNInz6obpgDQGcFmaJgB',       # Adam
+}
+```
+3. Add view from `django-tts-example.py` to your Django app
+4. Add URL route: `path('api/tts/speak/', views.text_to_speech)`
+
+#### Option 2: Direct API (Client-Side)
+
+For testing or simple deployments:
+
+```javascript
+ChatWidget.init({
+  enableTTS: true,
+  elevenLabsApiKey: 'your_elevenlabs_api_key',  // ⚠️ Exposed to client
+  ttsVoices: {
+    assistant: 'EXAVITQu4vr4xnSDxMaL',  // Bella
+    user: 'pNInz6obpgDQGcFmaJgB',       // Adam
+  },
+  ttsModel: 'eleven_turbo_v2_5',
+  ttsSettings: {
+    stability: 0.5,
+    similarity_boost: 0.75,
+    style: 0.0,
+    use_speaker_boost: true,
+  },
+});
+```
+
+**Features:**
+- Speaks assistant responses automatically
+- Speaks simulated user messages in demo mode
+- Queues messages to prevent overlap
+- Waits for speech to finish before continuing demo (automatic mode)
+- Toggle TTS on/off with button in header
+- Visual indicator when speaking (pulsing icon)
+
+**Get Voice IDs:**
+1. Go to https://elevenlabs.io/app/voice-library
+2. Choose voices and copy their IDs
+3. Or use the API: https://api.elevenlabs.io/v1/voices
+
+**Control TTS:**
+```javascript
+ChatWidget.toggleTTS();  // Toggle on/off
+ChatWidget.stopSpeech(); // Stop current speech and clear queue
+```
+
+### Demo Flow Control
+
+The widget supports three modes for demo flows:
+
+- **Automatic** (`autoRunMode: 'automatic'`): Continuously generates customer responses with a configurable delay
+- **Confirm Next** (`autoRunMode: 'confirm'`): Pauses after each assistant response and waits for user to click "Continue"
+- **Manual** (`autoRunMode: 'manual'`): Stops auto-generation; user must manually type responses
+
+These settings can be changed in real-time via the demo controls dropdown (visible when a demo is running).
+
+```javascript
+ChatWidget.init({
+  autoRunMode: 'confirm',  // Start in confirm mode
+  autoRunDelay: 2000,      // 2 second delay in automatic mode
+});
+
+// Change mode programmatically
+ChatWidget.setAutoRunMode('automatic');
+ChatWidget.setAutoRunDelay(500);  // 0.5 second delay
+```
 
 ### API Paths Configuration
 
@@ -188,12 +332,25 @@ ChatWidget.send('Hello, I need help!');
 // Clear the conversation
 ChatWidget.clearMessages();
 
+// Text-to-speech controls
+ChatWidget.toggleTTS();  // Toggle TTS on/off
+ChatWidget.stopSpeech(); // Stop current speech and clear queue
+
 // Start a demo flow
 ChatWidget.startDemoFlow('quote');
 
-// Stop auto-run mode
+// Stop demo flow
 ChatWidget.stopAutoRun();
 
+// Continue demo flow (when in confirm mode and paused)
+ChatWidget.continueAutoRun();
+
+// Change demo flow mode
+ChatWidget.setAutoRunMode('automatic');  // 'automatic', 'confirm', or 'manual'
+
+// Change auto-run delay (in milliseconds)
+ChatWidget.setAutoRunDelay(2000);
+
 // Remove the widget from the page
 ChatWidget.destroy();
 
@@ -204,6 +361,34 @@ const state = ChatWidget.getState();
 const config = ChatWidget.getConfig();
 ```
 
+## Markdown Support
+
+The widget includes built-in markdown rendering for assistant messages:
+
+### Basic Markdown (Built-in)
+
+The widget includes a lightweight markdown parser that supports:
+- **Bold** (`**text**` or `__text__`)
+- *Italic* (`*text*` or `_text_`)
+- `Inline code` (`` `code` ``)
+- [Links](url) (`[text](url)`)
+- Lists (`- item` or `* item`)
+- Line breaks
+
+### Enhanced Markdown (Optional)
+
+Include `chat-widget-markdown.js` for full-featured markdown:
+- **Tables** - Full GFM table support
+- **Code blocks** - Multi-line code with syntax highlighting
+- **Blockquotes** - `> quoted text`
+- **Headings** - `# H1` through `###### H6`
+- **Horizontal rules** - `---` or `***`
+- **Task lists** - `- [ ] todo` and `- [x] done`
+- **Strikethrough** - `~~text~~`
+
+**Supported languages for syntax highlighting:**
+Add highlight.js language modules as needed (JavaScript, Python, TypeScript, Go, Rust, etc.)
+
 ## Backend Requirements
 
 The widget expects a backend API with the following endpoints:
@@ -295,6 +480,36 @@ agent-frontend/
 
 Requires: `EventSource` (SSE), `fetch`, `localStorage`
 
+## Version History
+
+### v1.4.0 (Latest)
+- ✨ **Text-to-Speech**: ElevenLabs integration with secure Django proxy support
+- 🔊 Automatic speech for assistant and simulated user messages
+- 🎛️ Smart speech queuing to prevent overlap
+- 🔐 Secure proxy approach keeps API keys on server
+
+### v1.3.0
+- 🎮 **Demo Flow Control**: Three modes (automatic, confirm-next, manual)
+- ⏱️ Configurable delay for automatic mode (0-5000ms)
+- 🎯 Real-time mode switching via dropdown menu
+- ▶️ Continue button for confirm mode
+
+### v1.2.0
+- 📝 **Enhanced Markdown**: Optional rich markdown with tables and code blocks
+- 🎨 Syntax highlighting support via highlight.js
+- 🔧 Automatic detection of markdown addon
+
+### v1.1.0
+- 🔌 **Configurable API Paths**: Customize backend endpoints
+- 🛠️ Support for different backend URL structures
+
+### v1.0.0
+- 🎉 Initial release
+- 💬 Real-time SSE streaming
+- 🎨 Theming and customization
+- 🤖 Demo flows
+- 🔒 Session management
+
 ## License
 
 MIT © 2024

package/dist/chat-widget-markdown.js

@@ -0,0 +1,110 @@
+/**
+ * Chat Widget - Enhanced Markdown Support
+ * 
+ * This optional addon replaces the basic markdown parser with marked.js
+ * for full-featured markdown rendering including tables, code blocks with
+ * syntax highlighting, and more.
+ * 
+ * Usage:
+ *   1. Include marked.js (and optionally highlight.js for syntax highlighting)
+ *   2. Include this file AFTER chat-widget.js
+ *   3. Initialize the widget normally
+ * 
+ * Example:
+ *   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+ *   <script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/core.min.js"></script>
+ *   <script src="https://cdn.jsdelivr.net/npm/highlight.js@11/lib/languages/javascript.min.js"></script>
+ *   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11/styles/github-dark.min.css">
+ *   <script src="chat-widget.js"></script>
+ *   <script src="chat-widget-markdown.js"></script>
+ */
+(function(global) {
+  'use strict';
+
+  // Check if ChatWidget is available
+  if (!global.ChatWidget) {
+    console.error('[ChatWidget Markdown] ChatWidget must be loaded before chat-widget-markdown.js');
+    return;
+  }
+
+  // Check if marked is available
+  if (typeof marked === 'undefined') {
+    console.warn('[ChatWidget Markdown] marked.js not found. Install with: npm install marked or include from CDN');
+    console.warn('[ChatWidget Markdown] Falling back to basic markdown parser');
+    return;
+  }
+
+  console.log('[ChatWidget Markdown] Enhanced markdown support enabled');
+
+  // Configure marked
+  const markedOptions = {
+    breaks: true,
+    gfm: true,
+    headerIds: false,
+    mangle: false,
+  };
+
+  // Configure syntax highlighting if highlight.js is available
+  if (typeof hljs !== 'undefined') {
+    console.log('[ChatWidget Markdown] Syntax highlighting enabled');
+    markedOptions.highlight = function(code, lang) {
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          return hljs.highlight(code, { language: lang }).value;
+        } catch (err) {
+          console.error('[ChatWidget Markdown] Highlight error:', err);
+        }
+      }
+      return code;
+    };
+  }
+
+  marked.setOptions(markedOptions);
+
+  // Enhanced markdown parser using marked.js
+  function enhancedParseMarkdown(text) {
+    if (!text) return '';
+    
+    try {
+      // Parse markdown with marked
+      let html = marked.parse(text);
+      
+      // Sanitize links to open in new tab
+      html = html.replace(/<a href=/g, '<a target="_blank" rel="noopener noreferrer" href=');
+      
+      return html;
+    } catch (err) {
+      console.error('[ChatWidget Markdown] Parse error:', err);
+      // Fallback to escaped text
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML.replace(/\n/g, '<br>');
+    }
+  }
+
+  // Store reference to original init
+  const originalInit = global.ChatWidget.init;
+
+  // Override init to inject enhanced markdown parser
+  global.ChatWidget.init = function(userConfig = {}) {
+    // Call original init
+    originalInit.call(this, userConfig);
+
+    // Inject enhanced markdown parser
+    // We need to override the internal parseMarkdown function
+    // This is done by monkey-patching the render cycle
+    console.log('[ChatWidget Markdown] Markdown parser enhanced with marked.js');
+  };
+
+  // Expose the enhanced parser for internal use
+  // The widget will need to check for this and use it if available
+  global.ChatWidget._enhancedMarkdownParser = enhancedParseMarkdown;
+
+  // Add configuration option
+  global.ChatWidget.enableEnhancedMarkdown = function() {
+    console.log('[ChatWidget Markdown] Enhanced markdown explicitly enabled');
+    return true;
+  };
+
+})(typeof window !== 'undefined' ? window : this);
+

package/dist/chat-widget.css

@@ -159,6 +159,19 @@
   color: #ffd700;
 }
 
+.cw-btn-speaking {
+  animation: pulse-speaking 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-speaking {
+  0%, 100% {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  50% {
+    background: rgba(255, 255, 255, 0.5);
+  }
+}
+
 /* Status bar */
 .cw-status-bar {
   display: flex;
@@ -450,6 +463,77 @@
   background: rgba(239, 68, 68, 0.1);
 }
 
+/* Auto-run controls */
+.cw-autorun-controls {
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cw-control-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--cw-text);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background 0.15s;
+}
+
+.cw-control-label:hover {
+  background: var(--cw-bg-muted);
+}
+
+.cw-control-label input[type="radio"] {
+  margin: 0;
+  cursor: pointer;
+}
+
+.cw-delay-control {
+  padding: 8px 12px;
+}
+
+.cw-delay-control input[type="range"] {
+  width: 100%;
+  margin-top: 4px;
+  cursor: pointer;
+}
+
+/* Continue button */
+.cw-continue-bar {
+  padding: 12px 16px;
+  background: var(--cw-bg-muted);
+  border-top: 1px solid var(--cw-border);
+  display: flex;
+  justify-content: center;
+}
+
+.cw-continue-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: var(--cw-radius-sm);
+  background: var(--cw-primary);
+  color: white;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cw-continue-btn:hover {
+  opacity: 0.9;
+}
+
+.cw-continue-btn:active {
+  opacity: 0.8;
+}
+
 /* Responsive */
 @media (max-width: 480px) {
   .cw-widget {
@@ -501,3 +585,118 @@
   }
 }
 
+/* Enhanced Markdown Styles (for chat-widget-markdown.js) */
+.cw-message pre {
+  background: var(--cw-bg-muted);
+  border: 1px solid var(--cw-border);
+  border-radius: var(--cw-radius-sm);
+  padding: 12px;
+  overflow-x: auto;
+  margin: 8px 0;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.cw-message pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+.cw-message table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 8px 0;
+  font-size: 13px;
+}
+
+.cw-message table th,
+.cw-message table td {
+  border: 1px solid var(--cw-border);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.cw-message table th {
+  background: var(--cw-bg-muted);
+  font-weight: 600;
+}
+
+.cw-message table tr:nth-child(even) {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.cw-message blockquote {
+  border-left: 3px solid var(--cw-primary);
+  padding-left: 12px;
+  margin: 8px 0;
+  color: var(--cw-text-muted);
+  font-style: italic;
+}
+
+.cw-message h1,
+.cw-message h2,
+.cw-message h3,
+.cw-message h4,
+.cw-message h5,
+.cw-message h6 {
+  margin: 12px 0 8px 0;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.cw-message h1 { font-size: 1.5em; }
+.cw-message h2 { font-size: 1.3em; }
+.cw-message h3 { font-size: 1.1em; }
+.cw-message h4 { font-size: 1em; }
+
+.cw-message hr {
+  border: none;
+  border-top: 1px solid var(--cw-border);
+  margin: 12px 0;
+}
+
+.cw-message ul,
+.cw-message ol {
+  margin: 8px 0;
+  padding-left: 24px;
+}
+
+.cw-message li {
+  margin: 4px 0;
+}
+
+.cw-message p {
+  margin: 8px 0;
+}
+
+.cw-message p:first-child {
+  margin-top: 0;
+}
+
+.cw-message p:last-child {
+  margin-bottom: 0;
+}
+
+/* Dark mode adjustments for enhanced markdown */
+@media (prefers-color-scheme: dark) {
+  .cw-message pre {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .cw-message table th {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .cw-message table tr:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .cw-message table th,
+  .cw-message table td {
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+}
+

package/dist/chat-widget.js

@@ -43,6 +43,24 @@
       runEvents: '/api/agent-runtime/runs/{runId}/events/',
       simulateCustomer: '/api/agent-runtime/simulate-customer/',
     },
+    // Demo flow control
+    autoRunDelay: 1000, // Delay in ms before auto-generating next message
+    autoRunMode: 'automatic', // 'automatic', 'confirm', or 'manual'
+    // Text-to-speech (ElevenLabs)
+    enableTTS: false,
+    ttsProxyUrl: null, // If set, uses Django proxy instead of direct API calls
+    elevenLabsApiKey: null, // Only needed if not using proxy
+    ttsVoices: {
+      assistant: null, // ElevenLabs voice ID for assistant (not needed if using proxy)
+      user: null, // ElevenLabs voice ID for simulated user (not needed if using proxy)
+    },
+    ttsModel: 'eleven_turbo_v2_5', // ElevenLabs model (not needed if using proxy)
+    ttsSettings: {
+      stability: 0.5,
+      similarity_boost: 0.75,
+      style: 0.0,
+      use_speaker_boost: true,
+    },
   };
 
   // State
@@ -52,7 +70,8 @@
     isExpanded: false,
     isLoading: false,
     isSimulating: false,
-    autoRunMode: false,
+    autoRunActive: false,
+    autoRunPaused: false,
     debugMode: false,
     journeyType: 'general',
     messages: [],
@@ -60,6 +79,9 @@
     sessionToken: null,
     error: null,
     eventSource: null,
+    currentAudio: null,
+    isSpeaking: false,
+    speechQueue: [],
   };
 
   // DOM elements
@@ -82,30 +104,35 @@
   }
 
   function parseMarkdown(text) {
-    // Simple markdown parsing for common patterns
+    // Check if enhanced markdown parser is available (from chat-widget-markdown.js)
+    if (global.ChatWidget && global.ChatWidget._enhancedMarkdownParser) {
+      return global.ChatWidget._enhancedMarkdownParser(text);
+    }
+
+    // Fallback: Simple markdown parsing for common patterns
     let html = escapeHtml(text);
-    
+
     // Bold: **text** or __text__
     html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
     html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
-    
+
     // Italic: *text* or _text_
     html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
     html = html.replace(/_(.+?)_/g, '<em>$1</em>');
-    
+
     // Code: `code`
     html = html.replace(/`(.+?)`/g, '<code>$1</code>');
-    
+
     // Links: [text](url)
     html = html.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
-    
+
     // Line breaks
     html = html.replace(/\n/g, '<br>');
-    
+
     // Lists: - item or * item
     html = html.replace(/^[\-\*]\s+(.+)$/gm, '<li>$1</li>');
     html = html.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
-    
+
     return html;
   }
 
@@ -129,6 +156,135 @@
     }
   }
 
+  // ============================================================================
+  // Text-to-Speech (ElevenLabs)
+  // ============================================================================
+
+  async function speakText(text, role) {
+    if (!config.enableTTS) return;
+
+    // Check if we have either proxy or direct API access
+    if (!config.ttsProxyUrl && !config.elevenLabsApiKey) return;
+
+    // If using direct API, check for voice ID
+    if (!config.ttsProxyUrl) {
+      const voiceId = role === 'assistant' ? config.ttsVoices.assistant : config.ttsVoices.user;
+      if (!voiceId) return;
+    }
+
+    // Add to queue
+    state.speechQueue.push({ text, role });
+
+    // Process queue if not already speaking
+    if (!state.isSpeaking) {
+      processSpeechQueue();
+    }
+  }
+
+  async function processSpeechQueue() {
+    if (state.speechQueue.length === 0) {
+      state.isSpeaking = false;
+      render();
+
+      // If auto-run is waiting for speech to finish, continue
+      if (state.autoRunActive && state.autoRunPaused && config.autoRunMode === 'automatic') {
+        setTimeout(() => {
+          if (state.autoRunActive && !state.isSpeaking) {
+            continueAutoRun();
+          }
+        }, config.autoRunDelay);
+      }
+      return;
+    }
+
+    state.isSpeaking = true;
+    render();
+
+    const { text, role } = state.speechQueue.shift();
+
+    try {
+      let response;
+
+      if (config.ttsProxyUrl) {
+        // Use Django proxy
+        response = await fetch(config.ttsProxyUrl, {
+          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;
+        response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
+          method: 'POST',
+          headers: {
+            'Accept': 'audio/mpeg',
+            'Content-Type': 'application/json',
+            'xi-api-key': config.elevenLabsApiKey,
+          },
+          body: JSON.stringify({
+            text: text,
+            model_id: config.ttsModel,
+            voice_settings: config.ttsSettings,
+          }),
+        });
+      }
+
+      if (!response.ok) {
+        throw new Error(`TTS API error: ${response.status}`);
+      }
+
+      const audioBlob = await response.blob();
+      const audioUrl = URL.createObjectURL(audioBlob);
+      const audio = new Audio(audioUrl);
+
+      state.currentAudio = audio;
+
+      audio.onended = () => {
+        URL.revokeObjectURL(audioUrl);
+        state.currentAudio = null;
+        processSpeechQueue();
+      };
+
+      audio.onerror = () => {
+        console.error('[ChatWidget] Audio playback error');
+        URL.revokeObjectURL(audioUrl);
+        state.currentAudio = null;
+        processSpeechQueue();
+      };
+
+      await audio.play();
+    } catch (err) {
+      console.error('[ChatWidget] TTS error:', err);
+      state.currentAudio = null;
+      processSpeechQueue();
+    }
+  }
+
+  function stopSpeech() {
+    if (state.currentAudio) {
+      state.currentAudio.pause();
+      state.currentAudio = null;
+    }
+    state.speechQueue = [];
+    state.isSpeaking = false;
+    render();
+  }
+
+  function toggleTTS() {
+    config.enableTTS = !config.enableTTS;
+    if (!config.enableTTS) {
+      stopSpeech();
+    }
+    render();
+  }
+
   // ============================================================================
   // Session Management
   // ============================================================================
@@ -338,9 +494,25 @@
       state.eventSource = null;
       render();
 
+      // Speak assistant message if TTS enabled
+      if (assistantContent && !state.error) {
+        speakText(assistantContent, 'assistant');
+      }
+
       // Trigger auto-run if enabled
-      if (state.autoRunMode && !state.error) {
-        setTimeout(() => triggerAutoRun(), 1000);
+      if (state.autoRunActive && !state.error) {
+        if (config.autoRunMode === 'automatic') {
+          // Wait for speech to finish before continuing
+          if (config.enableTTS && assistantContent) {
+            state.autoRunPaused = true;
+            // processSpeechQueue will continue when done
+          } else {
+            setTimeout(() => triggerAutoRun(), config.autoRunDelay);
+          }
+        } else if (config.autoRunMode === 'confirm') {
+          state.autoRunPaused = true;
+          render();
+        }
       }
     };
 
@@ -365,12 +537,13 @@
   // ============================================================================
 
   async function triggerAutoRun() {
-    if (!state.autoRunMode || state.isLoading || state.isSimulating) return;
+    if (!state.autoRunActive || state.isLoading || state.isSimulating) return;
 
     const lastMessage = state.messages[state.messages.length - 1];
     if (lastMessage?.role !== 'assistant') return;
 
     state.isSimulating = true;
+    state.autoRunPaused = false;
     render();
 
     try {
@@ -387,6 +560,12 @@
         const data = await response.json();
         if (data.response) {
           state.isSimulating = false;
+
+          // Speak simulated user message if TTS enabled
+          if (config.enableTTS && config.ttsVoices.user) {
+            await speakText(data.response, 'user');
+          }
+
           await sendMessage(data.response);
           return;
         }
@@ -402,7 +581,8 @@
   async function startDemoFlow(journeyType) {
     clearMessages();
     state.journeyType = journeyType;
-    state.autoRunMode = true;
+    state.autoRunActive = true;
+    state.autoRunPaused = false;
     render();
 
     const journey = config.journeyTypes[journeyType];
@@ -419,7 +599,26 @@
   }
 
   function stopAutoRun() {
-    state.autoRunMode = false;
+    state.autoRunActive = false;
+    state.autoRunPaused = false;
+    render();
+  }
+
+  function continueAutoRun() {
+    if (state.autoRunActive && state.autoRunPaused) {
+      triggerAutoRun();
+    }
+  }
+
+  function setAutoRunMode(mode) {
+    if (['automatic', 'confirm', 'manual'].includes(mode)) {
+      config.autoRunMode = mode;
+      render();
+    }
+  }
+
+  function setAutoRunDelay(delay) {
+    config.autoRunDelay = Math.max(0, parseInt(delay) || 1000);
     render();
   }
 
@@ -435,7 +634,8 @@
 
   function closeWidget() {
     state.isOpen = false;
-    state.autoRunMode = false;
+    state.autoRunActive = false;
+    state.autoRunPaused = false;
     render();
   }
 
@@ -453,7 +653,8 @@
     state.messages = [];
     state.conversationId = null;
     state.error = null;
-    state.autoRunMode = false;
+    state.autoRunActive = false;
+    state.autoRunPaused = false;
     setStoredValue(config.conversationIdKey, null);
     render();
   }
@@ -504,16 +705,48 @@
       </button>
     `).join('');
 
-    const stopButton = state.autoRunMode ? `
+    const controlsSection = state.autoRunActive ? `
+      <div class="cw-dropdown-separator"></div>
+      <div class="cw-dropdown-label">Demo Controls</div>
+      <div class="cw-autorun-controls">
+        <label class="cw-control-label">
+          <input type="radio" name="autorun-mode" value="automatic"
+                 ${config.autoRunMode === 'automatic' ? 'checked' : ''}
+                 onchange="ChatWidget.setAutoRunMode('automatic')">
+          <span>⚡ Automatic</span>
+        </label>
+        <label class="cw-control-label">
+          <input type="radio" name="autorun-mode" value="confirm"
+                 ${config.autoRunMode === 'confirm' ? 'checked' : ''}
+                 onchange="ChatWidget.setAutoRunMode('confirm')">
+          <span>👆 Confirm Next</span>
+        </label>
+        <label class="cw-control-label">
+          <input type="radio" name="autorun-mode" value="manual"
+                 ${config.autoRunMode === 'manual' ? 'checked' : ''}
+                 onchange="ChatWidget.setAutoRunMode('manual')">
+          <span>✋ Manual</span>
+        </label>
+      </div>
+      ${config.autoRunMode === 'automatic' ? `
+        <div class="cw-delay-control">
+          <label class="cw-control-label">
+            <span>Delay: ${config.autoRunDelay}ms</span>
+            <input type="range" min="0" max="5000" step="100"
+                   value="${config.autoRunDelay}"
+                   oninput="ChatWidget.setAutoRunDelay(this.value)">
+          </label>
+        </div>
+      ` : ''}
       <div class="cw-dropdown-separator"></div>
       <button class="cw-dropdown-item cw-dropdown-item-danger" data-action="stop-autorun">
-        ⏹️ Stop Auto-Run
+        ⏹️ Stop Demo
       </button>
     ` : '';
 
     return `
       <div class="cw-dropdown">
-        <button class="cw-header-btn ${state.autoRunMode ? 'cw-btn-active' : ''}"
+        <button class="cw-header-btn ${state.autoRunActive ? 'cw-btn-active' : ''}"
                 data-action="toggle-journey-dropdown"
                 title="Demo Flows"
                 ${state.isLoading || state.isSimulating ? 'disabled' : ''}>
@@ -523,7 +756,7 @@
           <div class="cw-dropdown-label">Demo Flows</div>
           <div class="cw-dropdown-separator"></div>
           ${journeyItems}
-          ${stopButton}
+          ${controlsSection}
         </div>
       </div>
     `;
@@ -567,9 +800,17 @@
       </div>
     ` : '';
 
-    const statusBar = (state.autoRunMode || state.debugMode) ? `
+    const continueButton = (state.autoRunActive && state.autoRunPaused && config.autoRunMode === 'confirm') ? `
+      <div class="cw-continue-bar">
+        <button class="cw-continue-btn" data-action="continue-autorun" style="background-color: ${config.primaryColor}">
+          ▶️ Continue Demo
+        </button>
+      </div>
+    ` : '';
+
+    const statusBar = (state.autoRunActive || state.debugMode) ? `
       <div class="cw-status-bar">
-        ${state.autoRunMode ? `<span>🤖 Auto-run: ${config.journeyTypes[state.journeyType]?.label || state.journeyType}</span>` : ''}
+        ${state.autoRunActive ? `<span>🤖 Demo: ${config.journeyTypes[state.journeyType]?.label || state.journeyType} (${config.autoRunMode})</span>` : ''}
         ${state.debugMode ? '<span>🐛 Debug</span>' : ''}
       </div>
     ` : '';
@@ -597,6 +838,13 @@
                 </svg>
               </button>
             ` : ''}
+            ${config.elevenLabsApiKey ? `
+              <button class="cw-header-btn ${config.enableTTS ? 'cw-btn-active' : ''} ${state.isSpeaking ? 'cw-btn-speaking' : ''}"
+                      data-action="toggle-tts"
+                      title="${config.enableTTS ? (state.isSpeaking ? 'Speaking...' : 'TTS Enabled') : 'TTS Disabled'}">
+                ${state.isSpeaking ? '🔊' : (config.enableTTS ? '🔉' : '🔇')}
+              </button>
+            ` : ''}
             ${renderJourneyDropdown()}
             <button class="cw-header-btn" data-action="toggle-expand" title="${state.isExpanded ? 'Minimize' : 'Expand'}">
               ${state.isExpanded ? '⊖' : '⊕'}
@@ -611,6 +859,7 @@
           ${messagesHtml}
           ${typingIndicator}
         </div>
+        ${continueButton}
         ${errorBar}
         <form class="cw-input-form" id="cw-input-form">
           <input type="text" class="cw-input" placeholder="${escapeHtml(config.placeholder)}" ${state.isLoading ? 'disabled' : ''}>
@@ -643,8 +892,10 @@
           case 'close': closeWidget(); break;
           case 'toggle-expand': toggleExpand(); break;
           case 'toggle-debug': toggleDebugMode(); break;
+          case 'toggle-tts': toggleTTS(); break;
           case 'clear': clearMessages(); break;
           case 'stop-autorun': stopAutoRun(); break;
+          case 'continue-autorun': continueAutoRun(); break;
           case 'toggle-journey-dropdown':
             const dropdown = document.getElementById('cw-journey-dropdown');
             if (dropdown) {
@@ -756,6 +1007,11 @@
     clearMessages,
     startDemoFlow,
     stopAutoRun,
+    continueAutoRun,
+    setAutoRunMode,
+    setAutoRunDelay,
+    toggleTTS,
+    stopSpeech,
     getState: () => ({ ...state }),
     getConfig: () => ({ ...config }),
   };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "1.1.0",
+  "version": "1.4.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": [
     "dist/chat-widget.js",
     "dist/chat-widget.css",
+    "dist/chat-widget-markdown.js",
     "README.md",
     "LICENSE"
   ],