@makemore/agent-frontend 2.0.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "2.0.0",
+  "version": "2.2.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",
@@ -17,7 +17,7 @@
     "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'",
+    "copy": "cp -f dist/chat-widget.js ../django_agent_studio/static/agent-frontend/chat-widget.js 2>/dev/null || true && echo 'Copied to django_agent_studio'",
     "prepublishOnly": "npm run build",
     "serve": "python -m http.server 8080"
   },

package/src/components/ChatWidget.js

@@ -252,6 +252,7 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
         isLoading=${chat.isLoading}
         placeholder=${config.placeholder}
         primaryColor=${config.primaryColor}
+        enableVoice=${config.enableVoice}
       />
     </div>
   `;

package/src/components/InputForm.js

@@ -1,17 +1,29 @@
 /**
- * InputForm component - message input and send button
+ * InputForm component - message input, voice 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
+ * Voice input uses Web Speech API for speech-to-text
  */
 
 import { html } from 'htm/preact';
 import { useState, useRef, useEffect } from 'preact/hooks';
-import { escapeHtml } from '../utils/helpers.js';
+import { escapeHtml, formatFileSize, getFileTypeIcon } from '../utils/helpers.js';
 
-export function InputForm({ onSend, onCancel, isLoading, placeholder, primaryColor }) {
+// Check if Web Speech API is available
+const SpeechRecognition = typeof window !== 'undefined'
+  ? (window.SpeechRecognition || window.webkitSpeechRecognition)
+  : null;
+
+export function InputForm({ onSend, onCancel, isLoading, placeholder, primaryColor, enableVoice = true, enableFiles = true }) {
   const [value, setValue] = useState('');
+  const [files, setFiles] = useState([]);
   const [isHovering, setIsHovering] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [voiceSupported] = useState(() => !!SpeechRecognition);
   const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const recognitionRef = useRef(null);
+  const shouldKeepListeningRef = useRef(false);  // Track if we should keep listening
 
   // Focus input when not loading
   useEffect(() => {
@@ -28,15 +40,48 @@ export function InputForm({ onSend, onCancel, isLoading, placeholder, primaryCol
     }
   }, [value]);
 
+  // Cleanup recognition on unmount
+  useEffect(() => {
+    return () => {
+      shouldKeepListeningRef.current = false;
+      if (recognitionRef.current) {
+        recognitionRef.current.abort();
+      }
+    };
+  }, []);
+
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (value.trim() && !isLoading) {
-      onSend(value);
+    if ((value.trim() || files.length > 0) && !isLoading) {
+      onSend(value, files);
       setValue('');
+      setFiles([]);
       // Reset height after sending
       if (textareaRef.current) {
         textareaRef.current.style.height = 'auto';
       }
+      // Reset file input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  };
+
+  const handleFileSelect = (e) => {
+    const selectedFiles = Array.from(e.target.files || []);
+    if (selectedFiles.length > 0) {
+      setFiles(prev => [...prev, ...selectedFiles]);
+    }
+  };
+
+  const removeFile = (index) => {
+    setFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const triggerFileInput = (e) => {
+    e.preventDefault();
+    if (fileInputRef.current && !isLoading) {
+      fileInputRef.current.click();
     }
   };
 
@@ -56,6 +101,89 @@ export function InputForm({ onSend, onCancel, isLoading, placeholder, primaryCol
     }
   };
 
+  const startRecording = () => {
+    if (!SpeechRecognition || isLoading) return;
+
+    shouldKeepListeningRef.current = true;
+
+    const recognition = new SpeechRecognition();
+    recognition.continuous = true;  // Keep listening until manually stopped
+    recognition.interimResults = true;
+    recognition.lang = navigator.language || 'en-US';
+
+    let finalTranscript = value; // Start with existing text
+    let interimTranscript = '';
+
+    recognition.onstart = () => {
+      setIsRecording(true);
+    };
+
+    recognition.onresult = (event) => {
+      interimTranscript = '';
+      for (let i = event.resultIndex; i < event.results.length; i++) {
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+          finalTranscript += (finalTranscript ? ' ' : '') + transcript;
+        } else {
+          interimTranscript += transcript;
+        }
+      }
+      // Show both final and interim results
+      setValue(finalTranscript + (interimTranscript ? ' ' + interimTranscript : ''));
+    };
+
+    recognition.onerror = (event) => {
+      // Don't stop on "no-speech" or "aborted" - just keep listening
+      if (event.error === 'no-speech' || event.error === 'aborted') {
+        console.log('[ChatWidget] Speech recognition:', event.error, '- continuing...');
+        return;
+      }
+      console.warn('[ChatWidget] Speech recognition error:', event.error);
+      shouldKeepListeningRef.current = false;
+      setIsRecording(false);
+      // Keep whatever text we have
+      setValue(finalTranscript || value);
+    };
+
+    recognition.onend = () => {
+      // If we should keep listening, restart (handles browser auto-stop after silence)
+      if (shouldKeepListeningRef.current) {
+        console.log('[ChatWidget] Recognition paused, restarting...');
+        try {
+          recognition.start();
+          return;
+        } catch (e) {
+          console.warn('[ChatWidget] Could not restart recognition:', e);
+        }
+      }
+      setIsRecording(false);
+      // Ensure we have the final transcript
+      if (finalTranscript) {
+        setValue(finalTranscript);
+      }
+      recognitionRef.current = null;
+    };
+
+    recognitionRef.current = recognition;
+    recognition.start();
+  };
+
+  const stopRecording = () => {
+    shouldKeepListeningRef.current = false;  // Signal to not restart
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+    }
+  };
+
+  const toggleRecording = (e) => {
+    e.preventDefault();
+    if (isRecording) {
+      stopRecording();
+    } else {
+      startRecording();
+    }
+  };
+
   // Stop icon (square)
   const stopIcon = html`
     <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
@@ -63,8 +191,52 @@ export function InputForm({ onSend, onCancel, isLoading, placeholder, primaryCol
     </svg>
   `;
 
+  // Microphone icon
+  const micIcon = html`
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+      <line x1="12" y1="19" x2="12" y2="23"></line>
+      <line x1="8" y1="23" x2="16" y2="23"></line>
+    </svg>
+  `;
+
+  // Paperclip/attach icon
+  const attachIcon = html`
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
+    </svg>
+  `;
+
+  const showVoiceButton = enableVoice && voiceSupported;
+  const showAttachButton = enableFiles;
+
   return html`
     <form class="cw-input-form" onSubmit=${handleSubmit}>
+      <input
+        type="file"
+        ref=${fileInputRef}
+        style="display: none"
+        multiple
+        onChange=${handleFileSelect}
+      />
+      ${files.length > 0 && html`
+        <div class="cw-file-chips">
+          ${files.map((file, index) => html`
+            <div class="cw-file-chip" key=${index}>
+              <span class="cw-file-chip-icon">${getFileTypeIcon(file.type)}</span>
+              <span class="cw-file-chip-name" title=${file.name}>${file.name.length > 20 ? file.name.substring(0, 17) + '...' : file.name}</span>
+              <span class="cw-file-chip-size">(${formatFileSize(file.size)})</span>
+              <button
+                type="button"
+                class="cw-file-chip-remove"
+                onClick=${() => removeFile(index)}
+                title="Remove file"
+              >×</button>
+            </div>
+          `)}
+        </div>
+      `}
       <textarea
         ref=${textareaRef}
         class="cw-input"
@@ -75,6 +247,28 @@ export function InputForm({ onSend, onCancel, isLoading, placeholder, primaryCol
         disabled=${isLoading}
         rows="1"
       />
+      ${showAttachButton && html`
+        <button
+          type="button"
+          class="cw-attach-btn"
+          onClick=${triggerFileInput}
+          disabled=${isLoading}
+          title="Attach files"
+        >
+          ${attachIcon}
+        </button>
+      `}
+      ${showVoiceButton && html`
+        <button
+          type="button"
+          class=${`cw-voice-btn ${isRecording ? 'cw-voice-btn-recording' : ''}`}
+          onClick=${toggleRecording}
+          disabled=${isLoading}
+          title=${isRecording ? 'Stop recording' : 'Voice input'}
+        >
+          ${micIcon}
+        </button>
+      `}
       <button
         type=${isLoading ? 'button' : 'submit'}
         class=${`cw-send-btn ${isLoading ? 'cw-send-btn-loading' : ''} ${isLoading && isHovering ? 'cw-send-btn-stop' : ''}`}

package/src/components/Message.js

@@ -4,7 +4,7 @@
 
 import { html } from 'htm/preact';
 import { useState } from 'preact/hooks';
-import { escapeHtml, parseMarkdown } from '../utils/helpers.js';
+import { escapeHtml, parseMarkdown, formatFileSize, getFileTypeIcon } from '../utils/helpers.js';
 
 // Debug payload viewer component
 function DebugPayload({ msg, show, onToggle }) {
@@ -105,8 +105,43 @@ export function Message({ msg, debugMode, markdownParser }) {
     ? parseMarkdown(msg.content, markdownParser)
     : escapeHtml(msg.content);
 
+  // Check if message has file attachments
+  const hasFiles = msg.files && msg.files.length > 0;
+
+  // Render file attachments
+  const renderAttachments = () => {
+    if (!hasFiles) return null;
+
+    return html`
+      <div class="cw-message-attachments">
+        ${msg.files.map(file => {
+          const isImage = file.type && file.type.startsWith('image/');
+
+          if (isImage) {
+            return html`
+              <a class="cw-attachment-thumbnail" href=${file.url} target="_blank" title=${file.name}>
+                <img src=${file.url} alt=${file.name} />
+              </a>
+            `;
+          }
+
+          return html`
+            <a class="cw-attachment-file" href=${file.url} target="_blank" title=${file.name}>
+              <span class="cw-attachment-icon">${getFileTypeIcon(file.type)}</span>
+              <span class="cw-attachment-info">
+                <span class="cw-attachment-name">${file.name}</span>
+                <span class="cw-attachment-size">${formatFileSize(file.size)}</span>
+              </span>
+            </a>
+          `;
+        })}
+      </div>
+    `;
+  };
+
   return html`
     <div class=${rowClasses} style="position: relative;">
+      ${renderAttachments()}
       <div class=${classes} dangerouslySetInnerHTML=${{ __html: content }} />
       ${debugMode && html`<${DebugPayload} msg=${msg} show=${showPayload} onToggle=${() => setShowPayload(!showPayload)} />`}
     </div>

package/src/hooks/useChat.js

@@ -205,45 +205,95 @@ export function useChat(config, api, storage) {
     };
   }, [config]);
 
-  const sendMessage = useCallback(async (content, options = {}) => {
+  const sendMessage = useCallback(async (content, optionsOrFiles = {}, legacyOptions = {}) => {
     if (!content.trim() || isLoading) return;
 
-    const { model, onAssistantMessage } = typeof options === 'function'
-      ? { onAssistantMessage: options }
-      : options;
+    // Handle multiple call signatures:
+    // sendMessage(content, callback) - legacy
+    // sendMessage(content, options) - options object
+    // sendMessage(content, files, options) - with files array
+    let files = [];
+    let options = {};
+
+    if (typeof optionsOrFiles === 'function') {
+      options = { onAssistantMessage: optionsOrFiles };
+    } else if (Array.isArray(optionsOrFiles)) {
+      files = optionsOrFiles;
+      options = legacyOptions;
+    } else {
+      options = optionsOrFiles || {};
+    }
+
+    const { model, onAssistantMessage } = options;
 
     setIsLoading(true);
     setError(null);
 
+    // Build user message with optional file attachments
     const userMessage = {
       id: generateId(),
       role: 'user',
       content: content.trim(),
       timestamp: new Date(),
       type: 'message',
+      files: files.length > 0 ? files.map(f => ({
+        name: f.name,
+        size: f.size,
+        type: f.type,
+      })) : undefined,
     };
     setMessages(prev => [...prev, userMessage]);
 
     try {
       const token = await api.getOrCreateSession();
 
-      const requestBody = {
-        agentKey: config.agentKey,
-        conversationId: conversationId,
-        messages: [{ role: 'user', content: content.trim() }],
-        metadata: { ...config.metadata, journeyType: config.defaultJourneyType },
-      };
+      let fetchOptions;
+
+      if (files.length > 0) {
+        // Use FormData for file uploads
+        const formData = new FormData();
+        formData.append('agentKey', config.agentKey);
+        if (conversationId) {
+          formData.append('conversationId', conversationId);
+        }
+        formData.append('messages', JSON.stringify([{ role: 'user', content: content.trim() }]));
+        formData.append('metadata', JSON.stringify({ ...config.metadata, journeyType: config.defaultJourneyType }));
+
+        if (model) {
+          formData.append('model', model);
+        }
 
-      // Include model if specified
-      if (model) {
-        requestBody.model = model;
+        // Append each file
+        files.forEach(file => {
+          formData.append('files', file);
+        });
+
+        // Don't set Content-Type header - browser will set it with boundary
+        fetchOptions = api.getFetchOptions({
+          method: 'POST',
+          body: formData,
+        }, token);
+      } else {
+        // Use JSON for text-only messages
+        const requestBody = {
+          agentKey: config.agentKey,
+          conversationId: conversationId,
+          messages: [{ role: 'user', content: content.trim() }],
+          metadata: { ...config.metadata, journeyType: config.defaultJourneyType },
+        };
+
+        if (model) {
+          requestBody.model = model;
+        }
+
+        fetchOptions = api.getFetchOptions({
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(requestBody),
+        }, token);
       }
 
-      const response = await fetch(`${config.backendUrl}${config.apiPaths.runs}`, api.getFetchOptions({
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(requestBody),
-      }));
+      const response = await fetch(`${config.backendUrl}${config.apiPaths.runs}`, fetchOptions);
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
@@ -376,7 +426,7 @@ export function useChat(config, api, storage) {
       const limit = 10;
       const url = `${config.backendUrl}${config.apiPaths.conversations}${convId}/?limit=${limit}&offset=0`;
 
-      const response = await fetch(url, api.getFetchOptions({ method: 'GET' }));
+      const response = await fetch(url, api.getFetchOptions({ method: 'GET' }, token));
 
       if (response.ok) {
         const conversation = await response.json();
@@ -403,10 +453,11 @@ export function useChat(config, api, storage) {
     setLoadingMoreMessages(true);
 
     try {
+      const token = await api.getOrCreateSession();
       const limit = 10;
       const url = `${config.backendUrl}${config.apiPaths.conversations}${conversationId}/?limit=${limit}&offset=${messagesOffset}`;
 
-      const response = await fetch(url, api.getFetchOptions({ method: 'GET' }));
+      const response = await fetch(url, api.getFetchOptions({ method: 'GET' }, token));
 
       if (response.ok) {
         const conversation = await response.json();

package/src/utils/api.js

@@ -12,10 +12,11 @@ export function createApiClient(config, getState, setState) {
     return 'none';
   };
 
-  const getAuthHeaders = () => {
+  const getAuthHeaders = (overrideToken = null) => {
     const strategy = getAuthStrategy();
     const headers = {};
-    const token = config.authToken || getState().authToken;
+    // Use override token if provided (fixes race condition with async state updates)
+    const token = overrideToken || config.authToken || getState().authToken;
 
     if (strategy === 'token' && token) {
       const headerName = config.authHeader || 'Authorization';
@@ -40,10 +41,10 @@ export function createApiClient(config, getState, setState) {
     return headers;
   };
 
-  const getFetchOptions = (options = {}) => {
+  const getFetchOptions = (options = {}, overrideToken = null) => {
     const strategy = getAuthStrategy();
     const fetchOptions = { ...options };
-    fetchOptions.headers = { ...fetchOptions.headers, ...getAuthHeaders() };
+    fetchOptions.headers = { ...fetchOptions.headers, ...getAuthHeaders(overrideToken) };
     if (strategy === 'session') fetchOptions.credentials = 'include';
     return fetchOptions;
   };

package/src/utils/config.js

@@ -50,6 +50,7 @@ export const DEFAULT_CONFIG = {
   showVoiceSettings: true,
   showExpandButton: true,
   showModelSelector: false,
+  enableVoice: true,  // Enable voice input (speech-to-text)
 
   // Model selection
   modelKey: 'chat_widget_selected_model',

package/src/utils/helpers.js

@@ -81,3 +81,26 @@ export function getCSRFToken(cookieName = 'csrftoken') {
   return null;
 }
 
+// Format file size for display
+export function formatFileSize(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+// Get file type icon based on mime type
+export function getFileTypeIcon(mimeType) {
+  if (!mimeType) return '📄';
+  if (mimeType.startsWith('image/')) return '🖼️';
+  if (mimeType.startsWith('video/')) return '🎬';
+  if (mimeType.startsWith('audio/')) return '🎵';
+  if (mimeType.includes('pdf')) return '📕';
+  if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return '📊';
+  if (mimeType.includes('document') || mimeType.includes('word')) return '📝';
+  if (mimeType.includes('presentation') || mimeType.includes('powerpoint')) return '📽️';
+  if (mimeType.includes('zip') || mimeType.includes('compressed')) return '🗜️';
+  if (mimeType.includes('text/')) return '📄';
+  return '📄';
+}