@makemore/agent-frontend 1.1.0 → 1.3.0

package/README.md

@@ -61,6 +61,28 @@ 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
@@ -115,6 +137,29 @@ 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) |
+
+### 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
 
@@ -191,9 +236,18 @@ ChatWidget.clearMessages();
 // 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 +258,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:

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

@@ -450,6 +450,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 +572,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,9 @@
       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'
   };
 
   // State
@@ -52,7 +55,8 @@
     isExpanded: false,
     isLoading: false,
     isSimulating: false,
-    autoRunMode: false,
+    autoRunActive: false,
+    autoRunPaused: false,
     debugMode: false,
     journeyType: 'general',
     messages: [],
@@ -82,30 +86,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;
   }
 
@@ -339,8 +348,13 @@
       render();
 
       // Trigger auto-run if enabled
-      if (state.autoRunMode && !state.error) {
-        setTimeout(() => triggerAutoRun(), 1000);
+      if (state.autoRunActive && !state.error) {
+        if (config.autoRunMode === 'automatic') {
+          setTimeout(() => triggerAutoRun(), config.autoRunDelay);
+        } else if (config.autoRunMode === 'confirm') {
+          state.autoRunPaused = true;
+          render();
+        }
       }
     };
 
@@ -365,12 +379,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 {
@@ -402,7 +417,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 +435,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 +470,8 @@
 
   function closeWidget() {
     state.isOpen = false;
-    state.autoRunMode = false;
+    state.autoRunActive = false;
+    state.autoRunPaused = false;
     render();
   }
 
@@ -453,7 +489,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 +541,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 +592,7 @@
           <div class="cw-dropdown-label">Demo Flows</div>
           <div class="cw-dropdown-separator"></div>
           ${journeyItems}
-          ${stopButton}
+          ${controlsSection}
         </div>
       </div>
     `;
@@ -567,9 +636,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>
     ` : '';
@@ -611,6 +688,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' : ''}>
@@ -645,6 +723,7 @@
           case 'toggle-debug': toggleDebugMode(); 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 +835,9 @@
     clearMessages,
     startDemoFlow,
     stopAutoRun,
+    continueAutoRun,
+    setAutoRunMode,
+    setAutoRunDelay,
     getState: () => ({ ...state }),
     getConfig: () => ({ ...config }),
   };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "1.1.0",
+  "version": "1.3.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"
   ],