@makemore/agent-frontend 2.3.0 → 2.7.0

package/src/hooks/useChat.js

@@ -3,7 +3,7 @@
  */
 
 import { useState, useCallback, useRef, useEffect } from 'preact/hooks';
-import { generateId } from '../utils/helpers.js';
+import { generateId, camelToSnake } from '../utils/helpers.js';
 
 export function useChat(config, api, storage) {
   const [messages, setMessages] = useState([]);
@@ -224,7 +224,7 @@ export function useChat(config, api, storage) {
       options = optionsOrFiles || {};
     }
 
-    const { model, onAssistantMessage } = options;
+    const { model, onAssistantMessage, supersedeFromMessageIndex } = options;
 
     setIsLoading(true);
     setError(null);
@@ -251,13 +251,21 @@ export function useChat(config, api, storage) {
 
       if (files.length > 0) {
         // Use FormData for file uploads
+        // Transform keys based on apiCaseStyle config
+        const useSnake = config.apiCaseStyle !== 'camel';
+        const key = (k) => useSnake ? camelToSnake(k) : k;
+
         const formData = new FormData();
-        formData.append('agentKey', config.agentKey);
+        formData.append(key('agentKey'), config.agentKey);
         if (conversationId) {
-          formData.append('conversationId', conversationId);
+          formData.append(key('conversationId'), conversationId);
         }
         formData.append('messages', JSON.stringify([{ role: 'user', content: content.trim() }]));
-        formData.append('metadata', JSON.stringify({ ...config.metadata, journeyType: config.defaultJourneyType }));
+        formData.append('metadata', JSON.stringify(
+          useSnake
+            ? { ...config.metadata, journey_type: config.defaultJourneyType }
+            : { ...config.metadata, journeyType: config.defaultJourneyType }
+        ));
 
         if (model) {
           formData.append('model', model);
@@ -275,16 +283,15 @@ export function useChat(config, api, storage) {
         }, token);
       } else {
         // Use JSON for text-only messages
-        const requestBody = {
+        const requestBody = api.transformRequest({
           agentKey: config.agentKey,
           conversationId: conversationId,
           messages: [{ role: 'user', content: content.trim() }],
           metadata: { ...config.metadata, journeyType: config.defaultJourneyType },
-        };
-
-        if (model) {
-          requestBody.model = model;
-        }
+          ...(model && { model }),
+          // Edit/retry support: tell backend to mark old runs as superseded
+          ...(supersedeFromMessageIndex !== undefined && { supersedeFromMessageIndex }),
+        });
 
         fetchOptions = api.getFetchOptions({
           method: 'POST',
@@ -300,11 +307,11 @@ export function useChat(config, api, storage) {
         throw new Error(errorData.error || `HTTP ${response.status}`);
       }
 
-      const run = await response.json();
+      const rawRun = await response.json();
+      const run = api.transformResponse(rawRun);
       currentRunIdRef.current = run.id;
-      const runConversationId = run.conversationId || run.conversation_id;
-      if (!conversationId && runConversationId) {
-        setConversationId(runConversationId);
+      if (!conversationId && run.conversationId) {
+        setConversationId(run.conversationId);
       }
 
       await subscribeToEvents(run.id, token, onAssistantMessage);
@@ -364,6 +371,7 @@ export function useChat(config, api, storage) {
   }, [config.conversationIdKey, storage]);
 
   // Map API message format to internal message format with proper types
+  // Note: Input is already transformed to camelCase by api.transformResponse()
   const mapApiMessage = (m) => {
     const base = {
       id: generateId(),
@@ -380,15 +388,15 @@ export function useChat(config, api, storage) {
         type: 'tool_result',
         metadata: {
           result: m.content,
-          toolCallId: m.tool_call_id,
+          toolCallId: m.toolCallId,
         },
       };
     }
 
     // Assistant messages with tool calls
-    if (m.role === 'assistant' && m.tool_calls && m.tool_calls.length > 0) {
+    if (m.role === 'assistant' && m.toolCalls && m.toolCalls.length > 0) {
       // Return an array of tool call messages (will be flattened)
-      return m.tool_calls.map(tc => ({
+      return m.toolCalls.map(tc => ({
         id: generateId(),
         role: 'assistant',
         content: `🔧 ${tc.function?.name || tc.name || 'tool'}`,
@@ -429,12 +437,13 @@ export function useChat(config, api, storage) {
       const response = await fetch(url, api.getFetchOptions({ method: 'GET' }, token));
 
       if (response.ok) {
-        const conversation = await response.json();
+        const rawConversation = await response.json();
+        const conversation = api.transformResponse(rawConversation);
         if (conversation.messages) {
           // Use flatMap to handle tool_calls which return arrays, filter out nulls (empty messages)
           setMessages(conversation.messages.flatMap(mapApiMessage).filter(Boolean));
         }
-        setHasMoreMessages(conversation.has_more || conversation.hasMore || false);
+        setHasMoreMessages(conversation.hasMore || false);
         setMessagesOffset(conversation.messages?.length || 0);
       } else if (response.status === 404) {
         setConversationId(null);
@@ -460,14 +469,15 @@ export function useChat(config, api, storage) {
       const response = await fetch(url, api.getFetchOptions({ method: 'GET' }, token));
 
       if (response.ok) {
-        const conversation = await response.json();
+        const rawConversation = await response.json();
+        const conversation = api.transformResponse(rawConversation);
         if (conversation.messages?.length > 0) {
           // Use flatMap to handle tool_calls which return arrays, filter out nulls (empty messages)
           const olderMessages = conversation.messages.flatMap(mapApiMessage).filter(Boolean);
           setMessages(prev => [...olderMessages, ...prev]);
           // Use original message count for offset, not flattened count
           setMessagesOffset(prev => prev + conversation.messages.length);
-          setHasMoreMessages(conversation.has_more || conversation.hasMore || false);
+          setHasMoreMessages(conversation.hasMore || false);
         } else {
           setHasMoreMessages(false);
         }
@@ -479,6 +489,69 @@ export function useChat(config, api, storage) {
     }
   }, [config, api, conversationId, messagesOffset, loadingMoreMessages, hasMoreMessages]);
 
+  // Edit a message and resend from that point
+  // This truncates the conversation to the edited message and resends
+  // The backend will mark old runs as superseded so conversation history stays clean
+  const editMessage = useCallback(async (messageIndex, newContent, options = {}) => {
+    if (isLoading) return;
+
+    // Find the message to edit
+    const messageToEdit = messages[messageIndex];
+    if (!messageToEdit || messageToEdit.role !== 'user') return;
+
+    // Truncate messages to just before this message
+    const truncatedMessages = messages.slice(0, messageIndex);
+    setMessages(truncatedMessages);
+
+    // Send the edited message with supersede flag
+    // This tells the backend to mark old runs from this point as superseded
+    await sendMessage(newContent, {
+      ...options,
+      supersedeFromMessageIndex: messageIndex,
+    });
+  }, [messages, isLoading, sendMessage]);
+
+  // Retry from a specific message (resend the same content)
+  // For user messages: retry that message
+  // For assistant messages: find the previous user message and retry from there
+  // The backend will mark old runs as superseded so conversation history stays clean
+  const retryMessage = useCallback(async (messageIndex, options = {}) => {
+    if (isLoading) return;
+
+    const messageAtIndex = messages[messageIndex];
+    if (!messageAtIndex) return;
+
+    let userMessageIndex = messageIndex;
+    let userMessage = messageAtIndex;
+
+    // If this is an assistant message, find the previous user message
+    if (messageAtIndex.role === 'assistant') {
+      for (let i = messageIndex - 1; i >= 0; i--) {
+        if (messages[i].role === 'user') {
+          userMessageIndex = i;
+          userMessage = messages[i];
+          break;
+        }
+      }
+      // If no user message found, can't retry
+      if (userMessage.role !== 'user') return;
+    } else if (messageAtIndex.role !== 'user') {
+      // Only user and assistant messages can be retried
+      return;
+    }
+
+    // Truncate messages to just before the user message
+    const truncatedMessages = messages.slice(0, userMessageIndex);
+    setMessages(truncatedMessages);
+
+    // Resend the same message with supersede flag
+    // This tells the backend to mark old runs from this point as superseded
+    await sendMessage(userMessage.content, {
+      ...options,
+      supersedeFromMessageIndex: userMessageIndex,
+    });
+  }, [messages, isLoading, sendMessage]);
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {
@@ -501,6 +574,8 @@ export function useChat(config, api, storage) {
     loadConversation,
     loadMoreMessages,
     setConversationId,
+    editMessage,
+    retryMessage,
   };
 }
 

package/src/hooks/useTasks.js

@@ -0,0 +1,164 @@
+/**
+ * useTasks hook - manages task list state and API interactions
+ */
+
+import { useState, useCallback, useEffect } from 'preact/hooks';
+
+export function useTasks(config, api) {
+  const [taskList, setTaskList] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Build tasks API path
+  const tasksPath = config.apiPaths?.tasks || '/api/agent/tasks/';
+
+  // Load the user's task list
+  const loadTaskList = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const url = `${config.backendUrl}${tasksPath}`;
+      const response = await fetch(url, api.getFetchOptions({ method: 'GET' }));
+      
+      if (response.ok) {
+        const data = await response.json();
+        setTaskList(data);
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        setError(errorData.error || 'Failed to load tasks');
+      }
+    } catch (err) {
+      console.error('[useTasks] Failed to load task list:', err);
+      setError('Failed to load tasks');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [config.backendUrl, tasksPath, api]);
+
+  // Add a task
+  const addTask = useCallback(async (taskData) => {
+    if (!taskList) return null;
+    
+    try {
+      const url = `${config.backendUrl}${tasksPath}${taskList.id}/add_task/`;
+      const response = await fetch(url, api.getFetchOptions({
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(taskData),
+      }));
+      
+      if (response.ok) {
+        const newTask = await response.json();
+        // Refresh the task list to get updated state
+        await loadTaskList();
+        return newTask;
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        setError(errorData.error || 'Failed to add task');
+        return null;
+      }
+    } catch (err) {
+      console.error('[useTasks] Failed to add task:', err);
+      setError('Failed to add task');
+      return null;
+    }
+  }, [config.backendUrl, tasksPath, taskList, api, loadTaskList]);
+
+  // Update a task
+  const updateTask = useCallback(async (taskId, updates) => {
+    if (!taskList) return null;
+    
+    try {
+      const url = `${config.backendUrl}${tasksPath}${taskList.id}/update_task/${taskId}/`;
+      const response = await fetch(url, api.getFetchOptions({
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(updates),
+      }));
+      
+      if (response.ok) {
+        const updatedTask = await response.json();
+        // Refresh the task list
+        await loadTaskList();
+        return updatedTask;
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        setError(errorData.error || 'Failed to update task');
+        return null;
+      }
+    } catch (err) {
+      console.error('[useTasks] Failed to update task:', err);
+      setError('Failed to update task');
+      return null;
+    }
+  }, [config.backendUrl, tasksPath, taskList, api, loadTaskList]);
+
+  // Remove a task
+  const removeTask = useCallback(async (taskId) => {
+    if (!taskList) return false;
+    
+    try {
+      const url = `${config.backendUrl}${tasksPath}${taskList.id}/remove_task/${taskId}/`;
+      const response = await fetch(url, api.getFetchOptions({
+        method: 'DELETE',
+      }));
+      
+      if (response.ok) {
+        await loadTaskList();
+        return true;
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        setError(errorData.error || 'Failed to remove task');
+        return false;
+      }
+    } catch (err) {
+      console.error('[useTasks] Failed to remove task:', err);
+      setError('Failed to remove task');
+      return false;
+    }
+  }, [config.backendUrl, tasksPath, taskList, api, loadTaskList]);
+
+  // Clear all tasks
+  const clearTasks = useCallback(async () => {
+    if (!taskList) return false;
+    
+    try {
+      const url = `${config.backendUrl}${tasksPath}${taskList.id}/clear/`;
+      const response = await fetch(url, api.getFetchOptions({
+        method: 'POST',
+      }));
+      
+      if (response.ok) {
+        await loadTaskList();
+        return true;
+      } else {
+        const errorData = await response.json().catch(() => ({}));
+        setError(errorData.error || 'Failed to clear tasks');
+        return false;
+      }
+    } catch (err) {
+      console.error('[useTasks] Failed to clear tasks:', err);
+      setError('Failed to clear tasks');
+      return false;
+    }
+  }, [config.backendUrl, tasksPath, taskList, api, loadTaskList]);
+
+  // Clear error
+  const clearError = useCallback(() => setError(null), []);
+
+  return {
+    taskList,
+    tasks: taskList?.tasks || [],
+    progress: taskList?.progress || { total: 0, completed: 0, percent_complete: 0 },
+    isLoading,
+    error,
+    loadTaskList,
+    addTask,
+    updateTask,
+    removeTask,
+    clearTasks,
+    clearError,
+  };
+}
+

package/src/utils/api.js

@@ -2,9 +2,31 @@
  * API utilities for the chat widget
  */
 
-import { getCSRFToken } from './helpers.js';
+import { getCSRFToken, keysToSnake, keysToCamel } from './helpers.js';
 
 export function createApiClient(config, getState, setState) {
+  /**
+   * Transform request body based on apiCaseStyle config
+   */
+  const transformRequest = (body) => {
+    if (!body || typeof body !== 'object') return body;
+    // For 'snake' or 'auto', convert to snake_case
+    // For 'camel', keep as-is (frontend already uses camelCase)
+    if (config.apiCaseStyle === 'camel') return body;
+    return keysToSnake(body);
+  };
+
+  /**
+   * Transform response data based on apiCaseStyle config
+   * For 'auto', we normalize to camelCase for consistent internal use
+   */
+  const transformResponse = (data) => {
+    if (!data || typeof data !== 'object') return data;
+    // For 'camel' or 'auto', normalize to camelCase
+    // For 'snake', keep as-is (but this is unusual for frontend)
+    if (config.apiCaseStyle === 'snake') return data;
+    return keysToCamel(data);
+  };
   const getAuthStrategy = () => {
     if (config.authStrategy) return config.authStrategy;
     if (config.authToken) return 'token';
@@ -86,6 +108,8 @@ export function createApiClient(config, getState, setState) {
     getAuthHeaders,
     getFetchOptions,
     getOrCreateSession,
+    transformRequest,
+    transformResponse,
   };
 }
 

package/src/utils/config.js

@@ -42,6 +42,12 @@ export const DEFAULT_CONFIG = {
     models: '/api/agent-runtime/models/',
   },
 
+  // API case style: 'camel', 'snake', or 'auto' (accepts both, sends camelCase)
+  // - 'camel': Backend uses camelCase (e.g., with djangorestframework-camel-case)
+  // - 'snake': Backend uses snake_case (standard Django REST Framework)
+  // - 'auto': Accept both in responses, send snake_case in requests (default)
+  apiCaseStyle: 'auto',
+
   // UI options
   showConversationSidebar: true,
   showClearButton: true,

package/src/utils/helpers.js

@@ -2,6 +2,75 @@
  * Utility functions for the chat widget
  */
 
+// =============================================================================
+// Case Conversion Utilities
+// =============================================================================
+
+/**
+ * Convert a string from snake_case to camelCase
+ */
+export function snakeToCamel(str) {
+  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+/**
+ * Convert a string from camelCase to snake_case
+ */
+export function camelToSnake(str) {
+  return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
+}
+
+/**
+ * Recursively convert all keys in an object from snake_case to camelCase
+ */
+export function keysToCamel(obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(keysToCamel);
+  }
+  if (obj !== null && typeof obj === 'object') {
+    return Object.fromEntries(
+      Object.entries(obj).map(([key, value]) => [
+        snakeToCamel(key),
+        keysToCamel(value)
+      ])
+    );
+  }
+  return obj;
+}
+
+/**
+ * Recursively convert all keys in an object from camelCase to snake_case
+ */
+export function keysToSnake(obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(keysToSnake);
+  }
+  if (obj !== null && typeof obj === 'object') {
+    return Object.fromEntries(
+      Object.entries(obj).map(([key, value]) => [
+        camelToSnake(key),
+        keysToSnake(value)
+      ])
+    );
+  }
+  return obj;
+}
+
+/**
+ * Get a value from an object supporting both camelCase and snake_case keys
+ */
+export function getAnyCase(obj, camelKey) {
+  if (!obj || typeof obj !== 'object') return undefined;
+  if (camelKey in obj) return obj[camelKey];
+  const snakeKey = camelToSnake(camelKey);
+  if (snakeKey in obj) return obj[snakeKey];
+  return undefined;
+}
+
+// =============================================================================
+// ID Generation
+// =============================================================================
+
 export function generateId() {
   return 'msg-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
 }