@makemore/agent-frontend 1.8.0 → 2.0.0

package/package.json

@@ -1,18 +1,24 @@
 {
   "name": "@makemore/agent-frontend",
-  "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.",
+  "version": "2.0.0",
+  "description": "A lightweight chat widget for AI agents built with Preact. Embed conversational AI into any website with a single script tag.",
+  "type": "module",
   "main": "dist/chat-widget.js",
+  "module": "src/index.js",
   "files": [
     "dist/chat-widget.js",
     "dist/chat-widget.css",
     "dist/chat-widget-markdown.js",
+    "src/",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "prepublishOnly": "npm run validate",
-    "validate": "node -e \"console.log('Validation passed')\"",
+    "build": "esbuild src/index.js --bundle --minify --format=iife --global-name=ChatWidgetModule --outfile=dist/chat-widget.js && npm run copy",
+    "build:dev": "esbuild src/index.js --bundle --format=iife --global-name=ChatWidgetModule --outfile=dist/chat-widget.js --sourcemap && npm run copy",
+    "watch": "node watch.js",
+    "copy": "cp dist/chat-widget.js ../django_agent_studio/static/agent-frontend/chat-widget.js && echo 'Copied to django_agent_studio'",
+    "prepublishOnly": "npm run build",
     "serve": "python -m http.server 8080"
   },
   "repository": {
@@ -27,8 +33,7 @@
     "agent",
     "sse",
     "streaming",
-    "vanilla-js",
-    "zero-dependencies",
+    "preact",
     "embeddable",
     "chat-widget",
     "conversational-ai",
@@ -41,7 +46,14 @@
   },
   "homepage": "https://github.com/makemore/agent-frontend#readme",
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "htm": "^3.1.1",
+    "preact": "^10.19.3"
+  },
+  "devDependencies": {
+    "esbuild": "^0.20.0"
   }
 }
 

package/src/components/ChatWidget.js

@@ -0,0 +1,259 @@
+/**
+ * ChatWidget component - main widget container
+ */
+
+import { html } from 'htm/preact';
+import { useState, useEffect, useCallback, useMemo } from 'preact/hooks';
+import { Header } from './Header.js';
+import { MessageList } from './MessageList.js';
+import { InputForm } from './InputForm.js';
+import { Sidebar } from './Sidebar.js';
+import { ModelSelector } from './ModelSelector.js';
+import { useChat } from '../hooks/useChat.js';
+import { useModels } from '../hooks/useModels.js';
+import { createApiClient } from '../utils/api.js';
+import { createStorage } from '../utils/helpers.js';
+
+export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
+  // UI state
+  const [isOpen, setIsOpen] = useState(config.embedded || config.forceOpen === true);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [debugMode, setDebugMode] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [conversations, setConversations] = useState([]);
+  const [conversationsLoading, setConversationsLoading] = useState(false);
+
+  // TTS state
+  const [enableTTS, setEnableTTS] = useState(config.enableTTS);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+
+  // Current agent state (for multi-agent systems)
+  const [currentAgent, setCurrentAgent] = useState(null);
+
+  // Handle forceOpen changes from parent
+  useEffect(() => {
+    if (config.forceOpen !== undefined) {
+      setIsOpen(config.forceOpen);
+    }
+  }, [config.forceOpen]);
+
+  // Create storage helper
+  const storage = useMemo(() => createStorage(config.containerId), [config.containerId]);
+
+  // Create API client
+  const [authToken, setAuthToken] = useState(config.authToken || null);
+  const api = useMemo(() => {
+    const getState = () => ({ authToken, storage });
+    const setState = (fn) => {
+      const newState = fn({ authToken, storage });
+      if (newState.authToken !== authToken) setAuthToken(newState.authToken);
+    };
+    return createApiClient(config, getState, setState);
+  }, [config, authToken, storage]);
+
+  // Chat hook
+  const chat = useChat(config, api, storage);
+
+  // Models hook
+  const models = useModels(config, api, storage);
+
+  // Track current agent from messages (for multi-agent systems)
+  useEffect(() => {
+    // Look for the most recent sub_agent_start or sub_agent_end message
+    for (let i = chat.messages.length - 1; i >= 0; i--) {
+      const msg = chat.messages[i];
+      if (msg.type === 'sub_agent_start') {
+        setCurrentAgent({
+          key: msg.metadata?.subAgentKey,
+          name: msg.metadata?.agentName,
+        });
+        return;
+      }
+      if (msg.type === 'sub_agent_end') {
+        // Sub-agent finished, clear the current agent indicator
+        setCurrentAgent(null);
+        return;
+      }
+    }
+  }, [chat.messages]);
+
+  // Load initial conversation if stored
+  useEffect(() => {
+    const storedConvId = storage.get(config.conversationIdKey);
+    if (storedConvId) {
+      chat.loadConversation(storedConvId);
+    }
+  }, []);
+
+  // Notify parent of state changes
+  useEffect(() => {
+    if (onStateChange) {
+      onStateChange({
+        isOpen,
+        isExpanded,
+        debugMode,
+        messages: chat.messages,
+        conversationId: chat.conversationId,
+        isLoading: chat.isLoading,
+        error: chat.error,
+      });
+    }
+  }, [isOpen, isExpanded, debugMode, chat.messages, chat.conversationId, chat.isLoading, chat.error]);
+
+  // Load conversations for sidebar
+  const loadConversations = useCallback(async () => {
+    if (!config.showConversationSidebar) return;
+    
+    setConversationsLoading(true);
+    try {
+      const url = `${config.backendUrl}${config.apiPaths.conversations}?agent_key=${encodeURIComponent(config.agentKey)}`;
+      const response = await fetch(url, api.getFetchOptions({ method: 'GET' }));
+      
+      if (response.ok) {
+        const data = await response.json();
+        setConversations(data.results || data);
+      }
+    } catch (err) {
+      console.error('[ChatWidget] Failed to load conversations:', err);
+      setConversations([]);
+    } finally {
+      setConversationsLoading(false);
+    }
+  }, [config, api]);
+
+  // Handlers
+  const handleToggleSidebar = useCallback(() => {
+    const newOpen = !sidebarOpen;
+    setSidebarOpen(newOpen);
+    if (newOpen) loadConversations();
+  }, [sidebarOpen, loadConversations]);
+
+  const handleSwitchConversation = useCallback((convId) => {
+    if (convId !== chat.conversationId) {
+      chat.loadConversation(convId);
+    }
+    setSidebarOpen(false);
+  }, [chat]);
+
+  const handleNewConversation = useCallback(() => {
+    chat.clearMessages();
+    setSidebarOpen(false);
+  }, [chat]);
+
+  const handleSend = useCallback((content) => {
+    chat.sendMessage(content, {
+      model: models.selectedModel,
+      onAssistantMessage: (assistantContent) => {
+        // TTS callback when assistant finishes
+        if (enableTTS && assistantContent) {
+          // TTS would be handled here
+        }
+      }
+    });
+  }, [chat, enableTTS, models.selectedModel]);
+
+  // Expose imperative API to parent
+  useEffect(() => {
+    if (apiRef) {
+      apiRef.current = {
+        open: () => setIsOpen(true),
+        close: () => setIsOpen(false),
+        send: (msg) => handleSend(msg),
+        clearMessages: () => chat.clearMessages(),
+        toggleTTS: () => setEnableTTS(v => !v),
+        stopSpeech: () => setIsSpeaking(false),
+        setAuth: (cfg) => {
+          if (cfg.token !== undefined) setAuthToken(cfg.token);
+        },
+        clearAuth: () => setAuthToken(null),
+      };
+    }
+  }, [chat, apiRef, handleSend]);
+
+  // Floating mode: show FAB when closed
+  if (!config.embedded && !isOpen) {
+    return html`
+      <button 
+        class="cw-fab" 
+        style=${{ backgroundColor: config.primaryColor }}
+        onClick=${() => setIsOpen(true)}
+      >
+        <svg class="cw-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+        </svg>
+      </button>
+    `;
+  }
+
+  const widgetClasses = [
+    'cw-widget',
+    isExpanded && 'cw-widget-expanded',
+    config.embedded && 'cw-widget-embedded',
+  ].filter(Boolean).join(' ');
+
+  return html`
+    <div class=${widgetClasses} style=${{ '--cw-primary': config.primaryColor }}>
+      ${config.showConversationSidebar && html`
+        <${Sidebar}
+          isOpen=${sidebarOpen}
+          conversations=${conversations}
+          conversationsLoading=${conversationsLoading}
+          currentConversationId=${chat.conversationId}
+          onClose=${() => setSidebarOpen(false)}
+          onNewConversation=${handleNewConversation}
+          onSwitchConversation=${handleSwitchConversation}
+        />
+      `}
+      
+      <${Header}
+        config=${config}
+        debugMode=${debugMode}
+        isExpanded=${isExpanded}
+        isSpeaking=${isSpeaking}
+        messagesCount=${chat.messages.length}
+        isLoading=${chat.isLoading}
+        currentAgent=${currentAgent}
+        onClose=${() => setIsOpen(false)}
+        onToggleExpand=${() => setIsExpanded(!isExpanded)}
+        onToggleDebug=${() => setDebugMode(!debugMode)}
+        onToggleTTS=${() => setEnableTTS(!enableTTS)}
+        onClear=${chat.clearMessages}
+        onToggleSidebar=${handleToggleSidebar}
+      />
+
+      ${debugMode && html`<div class="cw-status-bar"><span>🐛 Debug</span></div>`}
+
+      <${MessageList}
+        messages=${chat.messages}
+        isLoading=${chat.isLoading}
+        hasMoreMessages=${chat.hasMoreMessages}
+        loadingMoreMessages=${chat.loadingMoreMessages}
+        onLoadMore=${chat.loadMoreMessages}
+        debugMode=${debugMode}
+        markdownParser=${markdownParser}
+        emptyStateTitle=${config.emptyStateTitle}
+        emptyStateMessage=${config.emptyStateMessage}
+      />
+
+      ${chat.error && html`<div class="cw-error-bar">${chat.error}</div>`}
+
+      ${config.showModelSelector && models.availableModels.length > 0 && html`
+        <${ModelSelector}
+          availableModels=${models.availableModels}
+          selectedModel=${models.selectedModel}
+          onSelectModel=${models.selectModel}
+          disabled=${chat.isLoading}
+        />
+      `}
+
+      <${InputForm}
+        onSend=${handleSend}
+        onCancel=${chat.cancelRun}
+        isLoading=${chat.isLoading}
+        placeholder=${config.placeholder}
+        primaryColor=${config.primaryColor}
+      />
+    </div>
+  `;
+}
+

package/src/components/Header.js

@@ -0,0 +1,111 @@
+/**
+ * Header component - title bar with action buttons
+ */
+
+import { html } from 'htm/preact';
+import { escapeHtml } from '../utils/helpers.js';
+
+export function Header({
+  config,
+  debugMode,
+  isExpanded,
+  isSpeaking,
+  messagesCount,
+  isLoading,
+  currentAgent,
+  onClose,
+  onToggleExpand,
+  onToggleDebug,
+  onToggleTTS,
+  onClear,
+  onToggleSidebar,
+}) {
+  const {
+    title,
+    primaryColor,
+    embedded,
+    showConversationSidebar,
+    showClearButton,
+    showDebugButton,
+    enableDebugMode,
+    showTTSButton,
+    showExpandButton,
+    enableTTS,
+    elevenLabsApiKey,
+    ttsProxyUrl,
+  } = config;
+
+  const hasTTS = elevenLabsApiKey || ttsProxyUrl;
+
+  return html`
+    <div class="cw-header" style=${{ backgroundColor: primaryColor }}>
+      ${showConversationSidebar && html`
+        <button
+          class="cw-header-btn cw-hamburger"
+          onClick=${onToggleSidebar}
+          title="Conversations"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <line x1="3" y1="12" x2="21" y2="12"></line>
+            <line x1="3" y1="18" x2="21" y2="18"></line>
+          </svg>
+        </button>
+      `}
+
+      <div class="cw-title-container">
+        <span class="cw-title">${escapeHtml(title)}</span>
+        ${currentAgent && html`
+          <span class="cw-current-agent" title="Currently active agent">
+            <span class="cw-agent-indicator">🤖</span>
+            <span class="cw-agent-name">${escapeHtml(currentAgent.name || currentAgent.key)}</span>
+          </span>
+        `}
+      </div>
+      
+      <div class="cw-header-actions">
+        ${showClearButton && html`
+          <button 
+            class="cw-header-btn" 
+            onClick=${onClear}
+            title="Clear"
+            disabled=${isLoading || messagesCount === 0}
+          >🗑️</button>
+        `}
+        
+        ${showDebugButton && enableDebugMode && html`
+          <button 
+            class="cw-header-btn ${debugMode ? 'cw-btn-active' : ''}" 
+            onClick=${onToggleDebug}
+            title="Debug"
+          >🐛</button>
+        `}
+        
+        ${showTTSButton && hasTTS && html`
+          <button 
+            class="cw-header-btn ${enableTTS ? 'cw-btn-active' : ''}" 
+            onClick=${onToggleTTS}
+            title="TTS"
+          >${enableTTS ? '🔊' : '🔇'}</button>
+        `}
+        
+        ${showExpandButton && !embedded && html`
+          <button 
+            class="cw-header-btn" 
+            onClick=${onToggleExpand}
+            title=${isExpanded ? 'Minimize' : 'Expand'}
+          >${isExpanded ? '⊖' : '⊕'}</button>
+        `}
+        
+        ${!embedded && html`
+          <button 
+            class="cw-header-btn" 
+            onClick=${onClose}
+            title="Close"
+          >✕</button>
+        `}
+      </div>
+    </div>
+  `;
+}
+

package/src/components/InputForm.js

@@ -0,0 +1,95 @@
+/**
+ * InputForm component - message input and send button
+ * Supports multiline input with Shift+Enter for newlines, Enter to send
+ * Shows a stop button when loading that can cancel the current run
+ */
+
+import { html } from 'htm/preact';
+import { useState, useRef, useEffect } from 'preact/hooks';
+import { escapeHtml } from '../utils/helpers.js';
+
+export function InputForm({ onSend, onCancel, isLoading, placeholder, primaryColor }) {
+  const [value, setValue] = useState('');
+  const [isHovering, setIsHovering] = useState(false);
+  const textareaRef = useRef(null);
+
+  // Focus input when not loading
+  useEffect(() => {
+    if (!isLoading && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [isLoading]);
+
+  // Auto-resize textarea based on content
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 150) + 'px';
+    }
+  }, [value]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim() && !isLoading) {
+      onSend(value);
+      setValue('');
+      // Reset height after sending
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    // Enter without Shift sends the message
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+    // Shift+Enter allows newline (default behavior)
+  };
+
+  const handleButtonClick = (e) => {
+    if (isLoading && onCancel) {
+      e.preventDefault();
+      onCancel();
+    }
+  };
+
+  // Stop icon (square)
+  const stopIcon = html`
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+      <rect x="2" y="2" width="10" height="10" rx="1" />
+    </svg>
+  `;
+
+  return html`
+    <form class="cw-input-form" onSubmit=${handleSubmit}>
+      <textarea
+        ref=${textareaRef}
+        class="cw-input"
+        placeholder=${escapeHtml(placeholder)}
+        value=${value}
+        onInput=${e => setValue(e.target.value)}
+        onKeyDown=${handleKeyDown}
+        disabled=${isLoading}
+        rows="1"
+      />
+      <button
+        type=${isLoading ? 'button' : 'submit'}
+        class=${`cw-send-btn ${isLoading ? 'cw-send-btn-loading' : ''} ${isLoading && isHovering ? 'cw-send-btn-stop' : ''}`}
+        style=${{ backgroundColor: isLoading && isHovering ? '#dc2626' : primaryColor }}
+        onClick=${handleButtonClick}
+        onMouseEnter=${() => setIsHovering(true)}
+        onMouseLeave=${() => setIsHovering(false)}
+        title=${isLoading ? 'Stop' : 'Send'}
+      >
+        ${isLoading
+          ? (isHovering ? stopIcon : html`<span class="cw-spinner"></span>`)
+          : '➤'
+        }
+      </button>
+    </form>
+  `;
+}
+

package/src/components/Message.js

@@ -0,0 +1,115 @@
+/**
+ * Message component - renders a single chat message
+ */
+
+import { html } from 'htm/preact';
+import { useState } from 'preact/hooks';
+import { escapeHtml, parseMarkdown } from '../utils/helpers.js';
+
+// Debug payload viewer component
+function DebugPayload({ msg, show, onToggle }) {
+  if (!show) {
+    return html`
+      <button
+        class="cw-debug-payload-btn"
+        onClick=${onToggle}
+        title="Show message payload"
+      >{ }</button>
+    `;
+  }
+
+  return html`
+    <div class="cw-debug-payload">
+      <button class="cw-debug-payload-close" onClick=${onToggle}>×</button>
+      <pre class="cw-debug-payload-content">${JSON.stringify(msg, null, 2)}</pre>
+    </div>
+  `;
+}
+
+export function Message({ msg, debugMode, markdownParser }) {
+  const [expanded, setExpanded] = useState(false);
+  const [showPayload, setShowPayload] = useState(false);
+
+  const isUser = msg.role === 'user';
+  const isSystem = msg.role === 'system';
+  const isToolCall = msg.type === 'tool_call';
+  const isToolResult = msg.type === 'tool_result';
+  const isError = msg.type === 'error';
+  const isSubAgentStart = msg.type === 'sub_agent_start';
+  const isSubAgentEnd = msg.type === 'sub_agent_end';
+  const isAgentContext = msg.type === 'agent_context';
+
+  // Hide system messages unless debug mode is on
+  if (isSystem && !debugMode) {
+    return null;
+  }
+
+  // Sub-agent delegation messages - show as a distinct visual element
+  if (isSubAgentStart || isSubAgentEnd || isAgentContext) {
+    return html`
+      <div class="cw-agent-context ${isSubAgentStart ? 'cw-agent-delegating' : ''} ${isSubAgentEnd ? 'cw-agent-returned' : ''}" style="position: relative;">
+        <span class="cw-agent-context-icon">${isSubAgentStart ? '🔗' : isSubAgentEnd ? '✓' : '🤖'}</span>
+        <span class="cw-agent-context-text">${msg.content}</span>
+        ${msg.metadata?.agentName && html`
+          <span class="cw-agent-context-name">${msg.metadata.agentName}</span>
+        `}
+        ${debugMode && html`<${DebugPayload} msg=${msg} show=${showPayload} onToggle=${() => setShowPayload(!showPayload)} />`}
+      </div>
+    `;
+  }
+
+  // Tool call/result: show compact inline version
+  if (isToolCall || isToolResult) {
+    const hasDetails = msg.metadata?.arguments || msg.metadata?.result;
+
+    // Format details - handle case where data is already a JSON string
+    const formatDetails = (data) => {
+      if (typeof data === 'string') {
+        try {
+          // Try to parse and re-stringify for proper formatting
+          return JSON.stringify(JSON.parse(data), null, 2);
+        } catch {
+          // Not valid JSON, return as-is
+          return data;
+        }
+      }
+      return JSON.stringify(data, null, 2);
+    };
+
+    return html`
+      <div class="cw-tool-message ${isToolResult ? 'cw-tool-result' : 'cw-tool-call'}" style="position: relative;">
+        <span class="cw-tool-label" onClick=${() => hasDetails && setExpanded(!expanded)}>
+          ${msg.content}
+          ${hasDetails && html`<span class="cw-tool-expand">${expanded ? '▼' : '▶'}</span>`}
+        </span>
+        ${expanded && hasDetails && html`
+          <pre class="cw-tool-details">${escapeHtml(formatDetails(
+            isToolCall ? msg.metadata.arguments : msg.metadata.result
+          ))}</pre>
+        `}
+        ${debugMode && html`<${DebugPayload} msg=${msg} show=${showPayload} onToggle=${() => setShowPayload(!showPayload)} />`}
+      </div>
+    `;
+  }
+
+  const classes = [
+    'cw-message',
+    isUser && 'cw-message-user',
+    isError && 'cw-message-error',
+  ].filter(Boolean).join(' ');
+
+  const rowClasses = `cw-message-row ${isUser ? 'cw-message-row-user' : ''}`;
+
+  // Parse content
+  let content = msg.role === 'assistant'
+    ? parseMarkdown(msg.content, markdownParser)
+    : escapeHtml(msg.content);
+
+  return html`
+    <div class=${rowClasses} style="position: relative;">
+      <div class=${classes} dangerouslySetInnerHTML=${{ __html: content }} />
+      ${debugMode && html`<${DebugPayload} msg=${msg} show=${showPayload} onToggle=${() => setShowPayload(!showPayload)} />`}
+    </div>
+  `;
+}
+