@makemore/agent-frontend 2.7.2 → 2.8.3

package/package.json

@@ -1,21 +1,34 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "2.7.2",
-  "description": "A lightweight chat widget for AI agents built with Preact. Embed conversational AI into any website with a single script tag.",
+  "version": "2.8.3",
+  "description": "A lightweight chat widget for AI agents. Use as an embeddable script tag or import directly into React/Preact projects.",
   "type": "module",
-  "main": "dist/chat-widget.js",
-  "module": "src/index.js",
+  "main": "dist/chat-widget.cjs.js",
+  "module": "dist/chat-widget.esm.js",
+  "browser": "dist/chat-widget.js",
+  "exports": {
+    ".": {
+      "import": "./dist/chat-widget.esm.js",
+      "require": "./dist/chat-widget.cjs.js",
+      "browser": "./dist/chat-widget.js"
+    },
+    "./react": {
+      "import": "./dist/react.esm.js",
+      "require": "./dist/react.cjs.js"
+    },
+    "./embed": "./dist/chat-widget.js",
+    "./css": "./dist/chat-widget.css"
+  },
   "files": [
-    "dist/chat-widget.js",
-    "dist/chat-widget.css",
-    "dist/chat-widget-markdown.js",
+    "dist/",
     "src/",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
-    "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",
+    "build": "node build.js",
+    "build:dev": "node build.js --dev",
+    "build:embed": "esbuild src/index.js --bundle --minify --format=iife --global-name=ChatWidgetModule --outfile=dist/chat-widget.js",
     "watch": "node watch.js",
     "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",
@@ -52,6 +65,18 @@
     "htm": "^3.1.1",
     "preact": "^10.19.3"
   },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "esbuild": "^0.20.0"
   }

package/src/components/ChatWidget.js

@@ -14,9 +14,10 @@ import { useChat } from '../hooks/useChat.js';
 import { useModels } from '../hooks/useModels.js';
 import { useTasks } from '../hooks/useTasks.js';
 import { createApiClient } from '../utils/api.js';
-import { createStorage } from '../utils/helpers.js';
+import { createStorage, getContrastingTextColor } from '../utils/helpers.js';
 
 export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
+  console.log('[ChatWidget] Config:', { showConversationSidebar: config.showConversationSidebar, apiPaths: config.apiPaths });
   // UI state
   const [isOpen, setIsOpen] = useState(config.embedded || config.forceOpen === true);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -86,7 +87,10 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
   // Load initial conversation if stored
   useEffect(() => {
     const storedConvId = storage.get(config.conversationIdKey);
+    console.log('[ChatWidget] Initial load - storedConvId:', storedConvId, 'key:', config.conversationIdKey);
+    console.log('[ChatWidget] apiPaths.conversations:', config.apiPaths.conversations);
     if (storedConvId) {
+      console.log('[ChatWidget] Loading conversation:', storedConvId);
       chat.loadConversation(storedConvId);
     }
   }, []);
@@ -149,6 +153,7 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
   const handleSend = useCallback((content) => {
     chat.sendMessage(content, {
       model: models.selectedModel,
+      thinking: models.thinkingEnabled && models.supportsThinking(),
       onAssistantMessage: (assistantContent) => {
         // TTS callback when assistant finishes
         if (enableTTS && assistantContent) {
@@ -156,7 +161,7 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
         }
       }
     });
-  }, [chat, enableTTS, models.selectedModel]);
+  }, [chat, enableTTS, models.selectedModel, models.thinkingEnabled, models.supportsThinking]);
 
   // Handle tab switching
   const handleTabChange = useCallback((tab) => {
@@ -205,8 +210,11 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
     config.embedded && 'cw-widget-embedded',
   ].filter(Boolean).join(' ');
 
+  // Calculate header text color for contrast
+  const headerTextColor = config.headerTextColor || getContrastingTextColor(config.primaryColor);
+
   return html`
-    <div class=${widgetClasses} style=${{ '--cw-primary': config.primaryColor }}>
+    <div class=${widgetClasses} style=${{ '--cw-primary': config.primaryColor, '--cw-header-text': headerTextColor }}>
       ${config.showConversationSidebar && html`
         <${Sidebar}
           isOpen=${sidebarOpen}
@@ -276,6 +284,8 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
             availableModels=${models.availableModels}
             selectedModel=${models.selectedModel}
             onSelectModel=${models.selectModel}
+            thinkingEnabled=${models.thinkingEnabled}
+            onToggleThinking=${models.toggleThinking}
             disabled=${chat.isLoading}
           />
         `}

package/src/components/ModelSelector.js

@@ -1,16 +1,18 @@
 /**
- * ModelSelector component - dropdown for selecting LLM model
+ * ModelSelector component - dropdown for selecting LLM model with thinking toggle
  */
 
 import { html } from 'htm/preact';
 import { useState } from 'preact/hooks';
 import { escapeHtml } from '../utils/helpers.js';
 
-export function ModelSelector({ 
-  availableModels, 
-  selectedModel, 
+export function ModelSelector({
+  availableModels,
+  selectedModel,
   onSelectModel,
-  disabled 
+  thinkingEnabled,
+  onToggleThinking,
+  disabled
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -20,6 +22,7 @@ export function ModelSelector({
 
   const selectedModelInfo = availableModels.find(m => m.id === selectedModel);
   const displayName = selectedModelInfo?.name || 'Select Model';
+  const supportsThinking = selectedModelInfo?.supports_thinking || false;
 
   const handleToggle = () => {
     if (!disabled) {
@@ -32,10 +35,17 @@ export function ModelSelector({
     setIsOpen(false);
   };
 
+  const handleThinkingToggle = (e) => {
+    e.stopPropagation();
+    if (onToggleThinking && supportsThinking) {
+      onToggleThinking(!thinkingEnabled);
+    }
+  };
+
   return html`
     <div class="cw-model-selector">
-      <button 
-        class="cw-model-btn" 
+      <button
+        class="cw-model-btn"
         onClick=${handleToggle}
         disabled=${disabled}
         title="Select Model"
@@ -44,16 +54,30 @@ export function ModelSelector({
         <span class="cw-model-name">${escapeHtml(displayName)}</span>
         <span class="cw-model-chevron">${isOpen ? '▲' : '▼'}</span>
       </button>
-      
+
+      ${supportsThinking && onToggleThinking && html`
+        <button
+          class="cw-thinking-toggle ${thinkingEnabled ? 'cw-thinking-enabled' : ''}"
+          onClick=${handleThinkingToggle}
+          disabled=${disabled}
+          title=${thinkingEnabled ? 'Thinking enabled - click to disable' : 'Enable extended thinking'}
+        >
+          <span class="cw-thinking-icon">🧠</span>
+        </button>
+      `}
+
       ${isOpen && html`
         <div class="cw-model-dropdown">
           ${availableModels.map(model => html`
-            <button 
+            <button
               key=${model.id}
               class="cw-model-option ${model.id === selectedModel ? 'cw-model-option-selected' : ''}"
               onClick=${() => handleSelect(model.id)}
             >
-              <span class="cw-model-option-name">${escapeHtml(model.name)}</span>
+              <span class="cw-model-option-name">
+                ${escapeHtml(model.name)}
+                ${model.supports_thinking && html`<span class="cw-thinking-badge" title="Supports extended thinking">🧠</span>`}
+              </span>
               <span class="cw-model-option-provider">${escapeHtml(model.provider)}</span>
               ${model.description && html`
                 <span class="cw-model-option-desc">${escapeHtml(model.description)}</span>

package/src/hooks/useChat.js

@@ -224,7 +224,7 @@ export function useChat(config, api, storage) {
       options = optionsOrFiles || {};
     }
 
-    const { model, onAssistantMessage, supersedeFromMessageIndex } = options;
+    const { model, thinking, onAssistantMessage, supersedeFromMessageIndex } = options;
 
     setIsLoading(true);
     setError(null);
@@ -271,6 +271,10 @@ export function useChat(config, api, storage) {
           formData.append('model', model);
         }
 
+        if (thinking) {
+          formData.append('thinking', 'true');
+        }
+
         // Append each file
         files.forEach(file => {
           formData.append('files', file);
@@ -289,6 +293,7 @@ export function useChat(config, api, storage) {
           messages: [{ role: 'user', content: content.trim() }],
           metadata: { ...config.metadata, journeyType: config.defaultJourneyType },
           ...(model && { model }),
+          ...(thinking && { thinking: true }),
           // Edit/retry support: tell backend to mark old runs as superseded
           ...(supersedeFromMessageIndex !== undefined && { supersedeFromMessageIndex }),
         });
@@ -446,6 +451,7 @@ export function useChat(config, api, storage) {
   };
 
   const loadConversation = useCallback(async (convId) => {
+    console.log('[ChatWidget] loadConversation called with:', convId);
     setIsLoading(true);
     setMessages([]);
     setConversationId(convId);
@@ -454,21 +460,30 @@ export function useChat(config, api, storage) {
       const token = await api.getOrCreateSession();
       const limit = 10;
       const url = `${config.backendUrl}${config.apiPaths.conversations}${convId}/?limit=${limit}&offset=0`;
+      console.log('[ChatWidget] Fetching conversation from:', url);
 
       const response = await fetch(url, api.getFetchOptions({ method: 'GET' }, token));
+      console.log('[ChatWidget] Response status:', response.status);
 
       if (response.ok) {
         const rawConversation = await response.json();
+        console.log('[ChatWidget] Raw conversation:', rawConversation);
         const conversation = api.transformResponse(rawConversation);
+        console.log('[ChatWidget] Transformed conversation:', conversation);
         if (conversation.messages) {
           // Use flatMap to handle tool_calls which return arrays, filter out nulls (empty messages)
-          setMessages(conversation.messages.flatMap(mapApiMessage).filter(Boolean));
+          const mappedMessages = conversation.messages.flatMap(mapApiMessage).filter(Boolean);
+          console.log('[ChatWidget] Mapped messages:', mappedMessages);
+          setMessages(mappedMessages);
         }
         setHasMoreMessages(conversation.hasMore || false);
         setMessagesOffset(conversation.messages?.length || 0);
       } else if (response.status === 404) {
+        console.log('[ChatWidget] Conversation not found, clearing');
         setConversationId(null);
         storage?.set(config.conversationIdKey, null);
+      } else {
+        console.error('[ChatWidget] Unexpected response status:', response.status);
       }
     } catch (err) {
       console.error('[ChatWidget] Failed to load conversation:', err);

package/src/hooks/useModels.js

@@ -1,33 +1,36 @@
 /**
- * Models hook - manages available models and selection
+ * Models hook - manages available models, selection, and thinking mode
  */
 
 import { useState, useEffect, useCallback } from 'preact/hooks';
 
+const THINKING_KEY = 'cw_thinking_enabled';
+
 export function useModels(config, api, storage) {
   const [availableModels, setAvailableModels] = useState([]);
   const [selectedModel, setSelectedModel] = useState(null);
   const [defaultModel, setDefaultModel] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [thinkingEnabled, setThinkingEnabled] = useState(false);
 
   // Load available models on mount
   useEffect(() => {
     const loadModels = async () => {
       if (!config.showModelSelector) return;
-      
+
       setIsLoading(true);
       try {
         const response = await fetch(
           `${config.backendUrl}${config.apiPaths.models}`,
           api.getFetchOptions({ method: 'GET' })
         );
-        
+
         if (response.ok) {
           const data = await response.json();
           const models = data.models || [];
           setAvailableModels(models);
           setDefaultModel(data.default);
-          
+
           // Restore saved model or use default
           const savedModel = storage?.get(config.modelKey);
           if (savedModel && models.some(m => m.id === savedModel)) {
@@ -35,6 +38,12 @@ export function useModels(config, api, storage) {
           } else {
             setSelectedModel(data.default);
           }
+
+          // Restore thinking preference
+          const savedThinking = storage?.get(THINKING_KEY);
+          if (savedThinking === 'true') {
+            setThinkingEnabled(true);
+          }
         }
       } catch (err) {
         console.warn('[ChatWidget] Failed to load models:', err);
@@ -52,11 +61,23 @@ export function useModels(config, api, storage) {
     storage?.set(config.modelKey, modelId);
   }, [config.modelKey, storage]);
 
+  // Toggle thinking mode
+  const toggleThinking = useCallback((enabled) => {
+    setThinkingEnabled(enabled);
+    storage?.set(THINKING_KEY, enabled ? 'true' : 'false');
+  }, [storage]);
+
   // Get the currently selected model object
   const getSelectedModelInfo = useCallback(() => {
     return availableModels.find(m => m.id === selectedModel) || null;
   }, [availableModels, selectedModel]);
 
+  // Check if current model supports thinking
+  const supportsThinking = useCallback(() => {
+    const model = getSelectedModelInfo();
+    return model?.supports_thinking || false;
+  }, [getSelectedModelInfo]);
+
   return {
     availableModels,
     selectedModel,
@@ -64,6 +85,9 @@ export function useModels(config, api, storage) {
     isLoading,
     selectModel,
     getSelectedModelInfo,
+    thinkingEnabled,
+    toggleThinking,
+    supportsThinking,
   };
 }
 

package/src/react.js

@@ -0,0 +1,78 @@
+/**
+ * React-compatible exports for @makemore/agent-frontend
+ * 
+ * This module provides React-compatible components and hooks.
+ * It uses preact/compat under the hood, which provides full React API compatibility.
+ * 
+ * Usage in React projects:
+ * 
+ *   import { ChatWidget, useChat, useModels } from '@makemore/agent-frontend/react';
+ *   
+ *   function App() {
+ *     return (
+ *       <ChatWidget 
+ *         config={{
+ *           backendUrl: 'https://api.example.com',
+ *           agentKey: 'my-agent',
+ *         }}
+ *       />
+ *     );
+ *   }
+ * 
+ * Or use hooks directly for custom UI:
+ * 
+ *   import { useChat, createApiClient, mergeConfig } from '@makemore/agent-frontend/react';
+ *   
+ *   function CustomChat() {
+ *     const config = mergeConfig({ backendUrl: '...', agentKey: '...' });
+ *     const api = createApiClient(config, () => ({}), () => {});
+ *     const chat = useChat(config, api, null);
+ *     
+ *     return (
+ *       <div>
+ *         {chat.messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
+ *         <button onClick={() => chat.sendMessage('Hello!')}>Send</button>
+ *       </div>
+ *     );
+ *   }
+ */
+
+// Components
+export { ChatWidget } from './components/ChatWidget.js';
+export { Header } from './components/Header.js';
+export { MessageList } from './components/MessageList.js';
+export { Message } from './components/Message.js';
+export { InputForm } from './components/InputForm.js';
+export { Sidebar } from './components/Sidebar.js';
+export { ModelSelector } from './components/ModelSelector.js';
+export { TaskList } from './components/TaskList.js';
+
+// Hooks
+export { useChat } from './hooks/useChat.js';
+export { useModels } from './hooks/useModels.js';
+export { useTasks } from './hooks/useTasks.js';
+
+// Utilities
+export { createApiClient } from './utils/api.js';
+export { mergeConfig, DEFAULT_CONFIG } from './utils/config.js';
+export {
+  generateId,
+  createStorage,
+  camelToSnake,
+  snakeToCamel,
+  keysToCamel,
+  keysToSnake,
+  parseMarkdown,
+  formatDate,
+  formatFileSize,
+  getFileTypeIcon,
+  getCSRFToken,
+} from './utils/helpers.js';
+
+// Re-export the imperative API for backwards compatibility
+export { ChatWidget as ChatWidgetAPI } from './index.js';
+
+// Default export is the main ChatWidget component
+import { ChatWidget as ChatWidgetComponent } from './components/ChatWidget.js';
+export default ChatWidgetComponent;
+

package/src/utils/config.js

@@ -8,6 +8,7 @@ export const DEFAULT_CONFIG = {
   title: 'Chat Assistant',
   subtitle: 'How can we help you today?',
   primaryColor: '#0066cc',
+  headerTextColor: null,  // Auto-detect based on primaryColor luminance, or set explicitly
   position: 'bottom-right',
   defaultJourneyType: 'general',
   enableDebugMode: true,

package/src/utils/helpers.js

@@ -173,3 +173,38 @@ export function getFileTypeIcon(mimeType) {
   if (mimeType.includes('text/')) return '📄';
   return '📄';
 }
+
+/**
+ * Calculate relative luminance of a hex color
+ * Returns a value between 0 (black) and 1 (white)
+ */
+export function getLuminance(hexColor) {
+  if (!hexColor || typeof hexColor !== 'string') return 0;
+
+  // Remove # if present
+  const hex = hexColor.replace('#', '');
+  if (hex.length !== 6 && hex.length !== 3) return 0;
+
+  // Expand 3-char hex to 6-char
+  const fullHex = hex.length === 3
+    ? hex.split('').map(c => c + c).join('')
+    : hex;
+
+  const r = parseInt(fullHex.substr(0, 2), 16) / 255;
+  const g = parseInt(fullHex.substr(2, 2), 16) / 255;
+  const b = parseInt(fullHex.substr(4, 2), 16) / 255;
+
+  // sRGB luminance formula
+  const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+
+/**
+ * Get contrasting text color (black or white) for a given background color
+ */
+export function getContrastingTextColor(bgColor) {
+  const luminance = getLuminance(bgColor);
+  // Use white text for dark backgrounds, black for light backgrounds
+  // Threshold of 0.179 is based on WCAG contrast ratio guidelines
+  return luminance > 0.179 ? '#000000' : '#ffffff';
+}