@makemore/agent-frontend 2.8.1 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makemore/agent-frontend",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "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.cjs.js",
@@ -30,7 +30,7 @@
     "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'",
+    "copy": "mkdir -p ../django_agent_studio/static/agent-frontend && cp -f dist/chat-widget.js dist/chat-widget.css dist/chat-widget-markdown.js ../django_agent_studio/static/agent-frontend/ 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

@@ -10,13 +10,16 @@ import { InputForm } from './InputForm.js';
 import { Sidebar } from './Sidebar.js';
 import { ModelSelector } from './ModelSelector.js';
 import { TaskList } from './TaskList.js';
+import { DevToolbar } from './DevToolbar.js';
 import { useChat } from '../hooks/useChat.js';
 import { useModels } from '../hooks/useModels.js';
 import { useTasks } from '../hooks/useTasks.js';
+import { useSystems } from '../hooks/useSystems.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);
@@ -54,8 +57,21 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
     return createApiClient(config, getState, setState);
   }, [config, authToken, storage]);
 
-  // Chat hook
-  const chat = useChat(config, api, storage);
+  // Systems/agents discovery hook (for dev tools)
+  const systemsHook = useSystems(config, api, storage);
+
+  // Create a config override with the effective agent key from dev tools
+  const effectiveConfig = useMemo(() => {
+    if (!config.showDevTools) return config;
+    const effectiveKey = systemsHook.getEffectiveAgentKey();
+    if (effectiveKey && effectiveKey !== config.agentKey) {
+      return { ...config, agentKey: effectiveKey };
+    }
+    return config;
+  }, [config, systemsHook.getEffectiveAgentKey]);
+
+  // Chat hook — uses effective config so agentKey is dynamic
+  const chat = useChat(effectiveConfig, api, storage);
 
   // Models hook
   const models = useModels(config, api, storage);
@@ -86,7 +102,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);
     }
   }, []);
@@ -109,12 +128,13 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
   // 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 agentKey = effectiveConfig.agentKey;
+      const url = `${config.backendUrl}${config.apiPaths.conversations}?agent_key=${encodeURIComponent(agentKey)}`;
       const response = await fetch(url, api.getFetchOptions({ method: 'GET' }));
-      
+
       if (response.ok) {
         const data = await response.json();
         setConversations(data.results || data);
@@ -125,7 +145,7 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
     } finally {
       setConversationsLoading(false);
     }
-  }, [config, api]);
+  }, [config, effectiveConfig, api]);
 
   // Handlers
   const handleToggleSidebar = useCallback(() => {
@@ -149,6 +169,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 +177,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 +226,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}
@@ -235,6 +259,22 @@ export function ChatWidget({ config, onStateChange, markdownParser, apiRef }) {
         onToggleSidebar=${handleToggleSidebar}
       />
 
+      ${config.showDevTools && html`
+        <${DevToolbar}
+          systems=${systemsHook.systems}
+          agents=${systemsHook.agents}
+          selectedSystem=${systemsHook.selectedSystem}
+          selectedAgent=${systemsHook.selectedAgent}
+          selectedSystemVersion=${systemsHook.selectedSystemVersion}
+          selectedAgentVersion=${systemsHook.selectedAgentVersion}
+          onSelectSystem=${systemsHook.selectSystem}
+          onSelectAgent=${systemsHook.selectAgent}
+          onSelectSystemVersion=${systemsHook.selectSystemVersion}
+          onSelectAgentVersion=${systemsHook.selectAgentVersion}
+          disabled=${chat.isLoading}
+        />
+      `}
+
       ${config.showTasksTab !== false && html`
         <div class="cw-tabs">
           <button
@@ -276,6 +316,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/DevToolbar.js

@@ -0,0 +1,135 @@
+/**
+ * DevToolbar component - system/agent/version picker for developers and testers.
+ *
+ * Always shows when rendered — displays info badges for single items,
+ * dropdowns when there are multiple options to choose from.
+ */
+
+import { html } from 'htm/preact';
+import { escapeHtml } from '../utils/helpers.js';
+
+export function DevToolbar({
+  systems,
+  agents,
+  selectedSystem,
+  selectedAgent,
+  selectedSystemVersion,
+  selectedAgentVersion,
+  onSelectSystem,
+  onSelectAgent,
+  onSelectSystemVersion,
+  onSelectAgentVersion,
+  disabled,
+}) {
+  // Find current system and agent objects
+  const currentSystem = systems.find(s => s.slug === selectedSystem);
+  const currentAgent = agents.find(a => a.slug === selectedAgent);
+
+  // Get versions for current selections
+  const systemVersions = currentSystem?.versions || [];
+  const agentVersions = currentAgent?.versions || [];
+
+  // Nothing loaded yet
+  if (systems.length === 0 && agents.length === 0) return null;
+
+  const hasMultipleSystems = systems.length > 1;
+  const hasMultipleAgents = agents.length > 1;
+  const hasMultipleSystemVersions = systemVersions.length > 1;
+  const hasMultipleAgentVersions = agentVersions.length > 1;
+
+  return html`
+    <div class="cw-dev-toolbar">
+      <div class="cw-dev-toolbar-label">
+        <span class="cw-dev-toolbar-icon">🛠️</span>
+        <span>Dev</span>
+      </div>
+
+      <div class="cw-dev-toolbar-selectors">
+        <!-- System -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">System</label>
+          ${hasMultipleSystems ? html`
+            <select
+              class="cw-dev-select"
+              value=${selectedSystem || ''}
+              onChange=${(e) => onSelectSystem(e.target.value)}
+              disabled=${disabled}
+            >
+              ${systems.map(sys => html`
+                <option key=${sys.slug} value=${sys.slug}>
+                  ${sys.name}
+                </option>
+              `)}
+            </select>
+          ` : html`
+            <span class="cw-dev-badge">${currentSystem?.name || '—'}</span>
+          `}
+        </div>
+
+        <!-- System Version -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Sys Ver</label>
+          ${hasMultipleSystemVersions ? html`
+            <select
+              class="cw-dev-select"
+              value=${selectedSystemVersion || ''}
+              onChange=${(e) => onSelectSystemVersion(e.target.value || null)}
+              disabled=${disabled}
+            >
+              ${systemVersions.map(v => html`
+                <option key=${v.version} value=${v.version}>
+                  ${v.version}${v.is_active ? ' ✓' : ''}${v.is_draft ? ' (draft)' : ''}
+                </option>
+              `)}
+            </select>
+          ` : html`
+            <span class="cw-dev-badge">${systemVersions.length === 1 ? systemVersions[0].version : 'none'}</span>
+          `}
+        </div>
+
+        <!-- Agent -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Agent</label>
+          ${hasMultipleAgents ? html`
+            <select
+              class="cw-dev-select"
+              value=${selectedAgent || ''}
+              onChange=${(e) => onSelectAgent(e.target.value)}
+              disabled=${disabled}
+            >
+              ${agents.map(agent => html`
+                <option key=${agent.slug} value=${agent.slug}>
+                  ${agent.name}${currentSystem?.entry_agent?.slug === agent.slug ? ' ★' : ''}
+                </option>
+              `)}
+            </select>
+          ` : html`
+            <span class="cw-dev-badge">${currentAgent?.name || agents[0]?.name || '—'}${currentSystem?.entry_agent?.slug === (currentAgent?.slug || agents[0]?.slug) ? ' ★' : ''}</span>
+          `}
+        </div>
+
+        <!-- Agent Version -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Agent Ver</label>
+          ${hasMultipleAgentVersions ? html`
+            <select
+              class="cw-dev-select"
+              value=${selectedAgentVersion || ''}
+              onChange=${(e) => onSelectAgentVersion(e.target.value || null)}
+              disabled=${disabled}
+            >
+              ${agentVersions.map(v => html`
+                <option key=${v.version} value=${v.version}>
+                  ${v.version}${v.is_active ? ' ✓' : ''}${v.is_draft ? ' (draft)' : ''}
+                </option>
+              `)}
+            </select>
+          ` : html`
+            <span class="cw-dev-badge">${agentVersions.length === 1 ? agentVersions[0].version : (currentAgent?.active_version || '—')}</span>
+          `}
+        </div>
+      </div>
+    </div>
+  `;
+}
+

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,
   };
 }