@makemore/agent-frontend 2.8.1 → 2.9.0

package/src/hooks/useSystems.js

@@ -0,0 +1,163 @@
+/**
+ * Systems hook - manages system/agent/version discovery and selection
+ * for developer/tester UI (DevToolbar).
+ */
+
+import { useState, useEffect, useCallback } from 'preact/hooks';
+
+const SYSTEM_KEY = 'cw_selected_system';
+const AGENT_KEY = 'cw_selected_agent';
+const SYSTEM_VERSION_KEY = 'cw_selected_system_version';
+const AGENT_VERSION_KEY = 'cw_selected_agent_version';
+
+export function useSystems(config, api, storage) {
+  const [systems, setSystems] = useState([]);
+  const [agents, setAgents] = useState([]);
+  const [selectedSystem, setSelectedSystem] = useState(null);
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [selectedSystemVersion, setSelectedSystemVersion] = useState(null);
+  const [selectedAgentVersion, setSelectedAgentVersion] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Compute the effective agent key to use for runs
+  const getEffectiveAgentKey = useCallback(() => {
+    if (selectedAgent) return selectedAgent;
+    if (selectedSystem) {
+      const sys = systems.find(s => s.slug === selectedSystem);
+      if (sys?.entry_agent) return sys.entry_agent.slug;
+    }
+    return config.agentKey;
+  }, [selectedAgent, selectedSystem, systems, config.agentKey]);
+
+  // Load systems on mount
+  useEffect(() => {
+    if (!config.showDevTools) return;
+
+    const loadSystems = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(
+          `${config.backendUrl}${config.apiPaths.systems}`,
+          api.getFetchOptions({ method: 'GET' })
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+          const systemsList = data.results || data;
+          setSystems(systemsList);
+
+          // Restore saved selection or auto-select if only 1 system
+          const saved = storage?.get(SYSTEM_KEY);
+          if (saved && systemsList.some(s => s.slug === saved)) {
+            setSelectedSystem(saved);
+          } else if (systemsList.length === 1) {
+            setSelectedSystem(systemsList[0].slug);
+          }
+        }
+      } catch (err) {
+        console.warn('[ChatWidget] Failed to load systems:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadSystems();
+  }, [config.backendUrl, config.apiPaths.systems, config.showDevTools, api, storage]);
+
+  // Load agents when system changes
+  useEffect(() => {
+    if (!config.showDevTools) return;
+
+    const loadAgents = async () => {
+      try {
+        const systemParam = selectedSystem ? `?system=${encodeURIComponent(selectedSystem)}` : '';
+        const response = await fetch(
+          `${config.backendUrl}${config.apiPaths.agents}${systemParam}`,
+          api.getFetchOptions({ method: 'GET' })
+        );
+
+        if (response.ok) {
+          const data = await response.json();
+          const agentsList = data.results || data;
+          setAgents(agentsList);
+
+          // Restore saved agent or default to entry agent
+          const saved = storage?.get(AGENT_KEY);
+          if (saved && agentsList.some(a => a.slug === saved)) {
+            setSelectedAgent(saved);
+          } else if (selectedSystem) {
+            const sys = systems.find(s => s.slug === selectedSystem);
+            if (sys?.entry_agent) {
+              setSelectedAgent(sys.entry_agent.slug);
+            }
+          }
+
+          // Restore saved agent version
+          const savedVersion = storage?.get(AGENT_VERSION_KEY);
+          if (savedVersion) {
+            setSelectedAgentVersion(savedVersion);
+          }
+        }
+      } catch (err) {
+        console.warn('[ChatWidget] Failed to load agents:', err);
+      }
+    };
+
+    loadAgents();
+  }, [config.backendUrl, config.apiPaths.agents, config.showDevTools, selectedSystem, api, storage, systems]);
+
+  // Select a system
+  const selectSystem = useCallback((slug) => {
+    setSelectedSystem(slug);
+    storage?.set(SYSTEM_KEY, slug);
+    // Reset agent selection — will be re-set by the agents useEffect
+    setSelectedAgent(null);
+    setSelectedAgentVersion(null);
+    storage?.set(AGENT_KEY, null);
+    storage?.set(AGENT_VERSION_KEY, null);
+    // Set system version
+    const sys = systems.find(s => s.slug === slug);
+    const activeVer = sys?.active_version || null;
+    setSelectedSystemVersion(activeVer);
+    storage?.set(SYSTEM_VERSION_KEY, activeVer);
+  }, [storage, systems]);
+
+  // Select an agent
+  const selectAgent = useCallback((slug) => {
+    setSelectedAgent(slug);
+    storage?.set(AGENT_KEY, slug);
+    // Reset agent version to active
+    const agent = agents.find(a => a.slug === slug);
+    const activeVer = agent?.active_version || null;
+    setSelectedAgentVersion(activeVer);
+    storage?.set(AGENT_VERSION_KEY, activeVer);
+  }, [storage, agents]);
+
+  // Select system version
+  const selectSystemVersion = useCallback((version) => {
+    setSelectedSystemVersion(version);
+    storage?.set(SYSTEM_VERSION_KEY, version);
+  }, [storage]);
+
+  // Select agent version
+  const selectAgentVersion = useCallback((version) => {
+    setSelectedAgentVersion(version);
+    storage?.set(AGENT_VERSION_KEY, version);
+  }, [storage]);
+
+  return {
+    systems,
+    agents,
+    selectedSystem,
+    selectedAgent,
+    selectedSystemVersion,
+    selectedAgentVersion,
+    isLoading,
+    selectSystem,
+    selectAgent,
+    selectSystemVersion,
+    selectAgentVersion,
+    getEffectiveAgentKey,
+  };
+}
+

package/src/index.js

@@ -52,6 +52,9 @@ class ChatWidgetInstance {
       document.body.appendChild(this.container);
     }
 
+    // Apply theme class
+    this._applyTheme();
+
     // Render the Preact component
     this._render();
 
@@ -59,6 +62,16 @@ class ChatWidgetInstance {
     return this;
   }
 
+  _applyTheme() {
+    if (!this.container) return;
+    this.container.classList.remove('cw-dark', 'cw-auto');
+    if (this.config.theme === 'dark') {
+      this.container.classList.add('cw-dark');
+    } else if (this.config.theme === 'auto') {
+      this.container.classList.add('cw-auto');
+    }
+  }
+
   _render(configOverrides = {}) {
     if (!this.container) return;
     render(
@@ -172,6 +185,10 @@ class ChatWidgetInstance {
       ...this.config,
       ...configUpdates,
     };
+    // Re-apply theme if it changed
+    if ('theme' in configUpdates) {
+      this._applyTheme();
+    }
     // Re-render with updated config
     this._render();
     console.log(`[ChatWidget] Instance ${this.instanceId} config updated`);

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,
@@ -40,6 +41,8 @@ export const DEFAULT_CONFIG = {
     ttsVoices: '/api/tts/voices/',
     ttsSetVoice: '/api/tts/set-voice/',
     models: '/api/agent-runtime/models/',
+    systems: '/api/agent-runtime/systems/',
+    agents: '/api/agent-runtime/agents/',
   },
 
   // API case style: 'camel', 'snake', or 'auto' (accepts both, sends camelCase)
@@ -48,6 +51,9 @@ export const DEFAULT_CONFIG = {
   // - 'auto': Accept both in responses, send snake_case in requests (default)
   apiCaseStyle: 'auto',
 
+  // Theme: 'light' (default), 'dark', or 'auto' (follows prefers-color-scheme)
+  theme: 'light',
+
   // UI options
   showConversationSidebar: true,
   showClearButton: true,
@@ -56,6 +62,7 @@ export const DEFAULT_CONFIG = {
   showVoiceSettings: true,
   showExpandButton: true,
   showModelSelector: false,
+  showDevTools: false,  // Show system/agent/version picker for developers/testers
   enableVoice: true,  // Enable voice input (speech-to-text)
 
   // Model selection

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';
+}