Add support to use thread history (#299)

* Add completed actions from llm response

* Stop in case of UpdateTaskStatus action

* Improve message content rendering

* Include latest message when cloning thread history

* Hackily fix asst message rendering

* Auto-hide completed actions

Author: ppsreejith

web/src/components/common/ActionStack.tsx

@@ -131,6 +131,9 @@ export const ActionStack: React.FC<{status: string, actions: Array<ActionStatusV
     setIsExpanded(!isExpanded)
   }
 
+  if (isEmpty(actions)) {
+    return null;
+  }
   return (
     <HStack aria-label="thinking-block" className={'action-stack'} justifyContent={'start'} maxWidth={"100%"} width={isExpanded ? "100%" : ""}> 
       <Box
@@ -262,7 +265,7 @@ export const OngoingActionStack: React.FC = () => {
     const actions: ActionStatusView[] = []
     actionPlan.content.actionMessageIDs.forEach((messageID: string) => {
       const message = messages[messageID]
-      if (message.role == 'tool') {
+      if (message.role == 'tool' && !message.action.renderInfo?.hidden) {
         actions.push(message.action)
       }
     })

web/src/components/common/Chat.tsx

@@ -3,7 +3,7 @@ import { Box, HStack, VStack, IconButton, Stack, Text } from '@chakra-ui/react'
 import { BsFillHandThumbsUpFill, BsFillHandThumbsDownFill, BsDashCircle } from 'react-icons/bs';
 import { dispatch } from '../../state/dispatch'
 import { ChatMessage, addReaction, removeReaction, deleteUserMessage, ActionChatMessage } from '../../state/chat/reducer'
-import _, { isEmpty } from 'lodash'
+import _, { cloneDeep, isEmpty } from 'lodash'
 import { useSelector } from 'react-redux';
 import { RootState } from '../../state/store';
 import { ActionStack, ActionStatusView, OngoingActionStack } from './ActionStack';
@@ -84,12 +84,14 @@ const Chat: React.FC<ReturnType<typeof addToolInfoToActionPlanMessages>[number]>
     }
     const actions: ActionStatusView[] = []
     content.toolCalls.forEach(toolCall => {
-      actions.push({
-        finished: true,
-        function: toolCall.function,
-        status: toolCall.status,
-        renderInfo: toolCall.renderInfo
-      })
+      if (!toolCall.renderInfo.hidden) {
+        actions.push({
+          finished: true,
+          function: toolCall.function,
+          status: toolCall.status,
+          renderInfo: toolCall.renderInfo
+        })
+      }
     })
     const latency = ('latency' in debug)? Math.round(debug.latency as number /100)/10 : 0
     return <ActionStack content={content.messageContent} actions={actions} status={'FINISHED'} index={index} latency={latency}/>
@@ -207,15 +209,20 @@ export const ChatSection = () => {
   // just create a map of all role='tool' messages by their id, and for each
   // tool call in each assistant message, add the status from the corresponding
   // tool message
-  const messagesWithStatus = addToolInfoToActionPlanMessages(messages)
-  messagesWithStatus.forEach(message => {
-    if (message.role == 'assistant' && message.content.toolCalls.length == 0) {
-      message.content = {
+  const messagesWithStatusInfo = addToolInfoToActionPlanMessages(messages)
+  const messagesWithStatus = messagesWithStatusInfo.flatMap(message => {
+    // if (message.role == 'assistant' && message.content.toolCalls.length == 0) {
+    const returnValue = [message]
+    if (message.role == 'assistant' && message.content.messageContent && message.content.messageContent.length > 0) {
+      const newMessage = cloneDeep(message)
+      newMessage.content = {
         type: 'DEFAULT',
         text: message.content.messageContent,
         images: []
       }
+      returnValue.push(newMessage)
     }
+    return returnValue
   })
   const Chats = isEmpty(messagesWithStatus) ?
     (getDemoIDX(url) == -1 ? <HelperMessage /> : <DemoHelperMessage url={url}/>) :

web/src/components/devtools/ActionDebug.tsx

@@ -44,7 +44,7 @@ export const ActionsView: React.FC<null> = () => {
   })
   const actionButtons = allActions.map((actions, index) => {
     const actionDisplay = actions.map((action, jindex) => {
-      let jsonOutput = action.output.content
+      let jsonOutput = action.output?.content
       try {
         jsonOutput = JSON.parse(action.output.content.content)
       } catch (e) {}

web/src/helpers/threadHistory.ts

@@ -111,9 +111,18 @@ export function scanThreadsForMBQL(
           }
 
           if (normalizedExtractedMBQL === normalizedCurrentMBQL) {
+            // Find the last message before the next user message
+            let lastMessageIndex = messageIndex;
+            for (let i = messageIndex + 1; i < thread.messages.length; i++) {
+              if (thread.messages[i].role === 'user') {
+                break; // Stop before user message
+              }
+              lastMessageIndex = i;
+            }
+            
             return {
               threadIndex,
-              messageIndex,
+              messageIndex: lastMessageIndex,
               matchingSQL: extractedMBQL // Using matchingSQL field for consistency
             };
           }
@@ -166,9 +175,18 @@ export function scanThreadsForSQL(
         if (extractedSQL) {
           const normalizedExtractedSQL = normalizeSQL(extractedSQL);
           if (normalizedExtractedSQL === normalizedCurrentSQL) {
+            // Find the last message before the next user message
+            let lastMessageIndex = messageIndex;
+            for (let i = messageIndex + 1; i < thread.messages.length; i++) {
+              if (thread.messages[i].role === 'user') {
+                break; // Stop before user message
+              }
+              lastMessageIndex = i;
+            }
+            
             return {
               threadIndex,
-              messageIndex,
+              messageIndex: lastMessageIndex,
               matchingSQL: extractedSQL
             };
           }

web/src/planner/planner.ts

@@ -22,7 +22,7 @@ function shouldContinue(getState: () => RootState) {
     return false
   }
   // check if the last tool was respondToUser and check what its params were
-  if (lastMessage.role == 'tool' && lastMessage.action.function.name == 'markTaskDone') {
+  if (lastMessage.role == 'tool' && (lastMessage.action.function.name == 'markTaskDone' || lastMessage.action.function.name == 'UpdateTaskStatus')) {
     return false;
   } else {
     // if last tool was not respondToUser, we continue anyway. not sure if we should keep it this way? 

web/src/planner/plannerActions.ts

@@ -96,6 +96,9 @@ export const performActions = async (signal: AbortSignal) => {
     if (message.role != 'tool')
       return
     const action = message.action
+    // Skip actions that are already finished (completed tasks)
+    if (action.finished)
+      return
     actions.push({
       index: messageID,
       function: action.function.name,

web/src/state/chat/reducer.ts

@@ -215,6 +215,35 @@ const getActiveThread = (state: ChatState) => state.threads[state.activeThread]
 
 const getMessages = (state: ChatState) => getActiveThread(state).messages
 
+/**
+ * Converts a Task to a ChatCompletionMessageToolCall for display purposes
+ */
+const taskToToolCall = (task: Task): ChatCompletionMessageToolCall => ({
+  id: `task_${task.id}`,
+  type: 'function',
+  function: {
+    name: task.agent,
+    arguments: JSON.stringify(task.args)
+  }
+})
+
+/**
+ * Converts a Task result to ActionChatMessageContent
+ * Assumes task.result is always a string
+ */
+const taskResultToContent = (task: Task): ActionChatMessageContent => {
+  return {
+    type: 'BLANK',
+    content: task.result as string,
+    renderInfo: {
+      text: '',
+      code: undefined,
+      oldCode: undefined,
+      hidden: true
+    }
+  }
+}
+
 export const chatSlice = createSlice({
   name: 'chat',
   initialState,
@@ -260,12 +289,32 @@ export const chatSlice = createSlice({
       state,
       action: PayloadAction<{llmResponse: LLMResponse, debug: any}>
     ) => {
-      // const actions: Array<OngoingAction> = 
       const messages = getMessages(state)
       const latestMessageIndex = messages.length
       const toolCalls = action.payload.llmResponse.tool_calls
       const messageContent = action.payload.llmResponse.content
-      const actionMessageIDs = [...Array(toolCalls.length).keys()].map((value) => value+1+latestMessageIndex)
+      const newTasks = action.payload.llmResponse.tasks || []
+      const currentTasks = getActiveThread(state).tasks || []
+      
+      // Defensive programming: ensure we have valid arrays and lengths
+      const currentTasksLength = Array.isArray(currentTasks) ? currentTasks.length : 0
+      const newTasksLength = Array.isArray(newTasks) ? newTasks.length : 0
+      
+      // Find completed tasks from task diff (excluding first task which is main agent)
+      // Only proceed if we have new tasks beyond the current ones
+      const completedTasks = newTasksLength > currentTasksLength 
+        ? newTasks
+            .slice(Math.max(currentTasksLength, 1)) // Get only new tasks, skip main agent
+            .filter(task => task && task.result !== null && task.result !== undefined)
+        : []
+      
+      // Convert completed tasks to tool calls for display
+      const completedToolCalls = completedTasks.map(taskToToolCall)
+      
+      // Calculate total action message IDs for both completed and pending tool calls
+      const totalToolCalls = completedToolCalls.length + toolCalls.length
+      const actionMessageIDs = [...Array(totalToolCalls).keys()].map((value) => value+1+latestMessageIndex)
+      
       const timestamp = Date.now()
       const actionPlanMessage: ActionPlanChatMessage = {
         role: 'assistant',
@@ -276,18 +325,47 @@ export const chatSlice = createSlice({
         content: {
           type: 'ACTIONS',
           actionMessageIDs: actionMessageIDs,
-          toolCalls,
+          toolCalls: [...completedToolCalls, ...toolCalls], // Completed first, then pending
           messageContent,
           finishReason: action.payload.llmResponse.finish_reason,
-          finished: false
+          finished: completedTasks.length === totalToolCalls // Only finished if all are completed
         },
         createdAt: timestamp,
         updatedAt: timestamp,
         debug: action.payload.debug
       }
       messages.push(actionPlanMessage)
-      toolCalls.forEach((toolCall, index) => {
-        const actionMessageID = index+1+latestMessageIndex
+      
+      let messageIndex = 1
+      
+      // Add completed tasks as SUCCESS messages first
+      completedTasks.forEach((task) => {
+        const actionMessageID = messageIndex + latestMessageIndex
+        const timestamp = Date.now()
+        const actionMessage: ActionChatMessage = {
+          role: 'tool',
+          action: {
+            ...taskToToolCall(task),
+            planID: latestMessageIndex,
+            status: 'SUCCESS',
+            finished: true,
+          },
+          feedback: {
+            reaction: "unrated"
+          },
+          index: actionMessageID,
+          content: taskResultToContent(task),
+          createdAt: timestamp,
+          updatedAt: timestamp,
+          debug: {}
+        }
+        messages.push(actionMessage)
+        messageIndex++
+      })
+      
+      // Add pending tool calls as TODO messages
+      toolCalls.forEach((toolCall) => {
+        const actionMessageID = messageIndex + latestMessageIndex
         const timestamp = Date.now()
         const actionMessage: ActionChatMessage = {
           role: 'tool',
@@ -304,20 +382,21 @@ export const chatSlice = createSlice({
           content: {
             type: 'BLANK',
             renderInfo: {
-              text: null,
-              code: null,
-              oldCode: null
+              text: undefined,
+              code: undefined,
+              oldCode: undefined
             }
           },
           createdAt: timestamp,
           updatedAt: timestamp,
           debug: {}
         }
         messages.push(actionMessage)
+        messageIndex++
       })
 
-      const tasks = action.payload.llmResponse.tasks || []
-      getActiveThread(state).tasks = tasks
+      // Update tasks array with new tasks
+      getActiveThread(state).tasks = newTasks
 
     },
     startAction: (
@@ -576,8 +655,8 @@ export const chatSlice = createSlice({
         const previousID = state.threads[state.threads.length - 1].id
         const newID = generateNextThreadID(previousID)
 
-        // Clone messages up to and including the assistant response after the tool call
-        const endIndex = Math.min(upToMessageIndex + 1, sourceThread.messages.length - 1);
+        // Clone messages up to and including the specified index (threadHistory already calculated the correct endpoint)
+        const endIndex = Math.min(upToMessageIndex, sourceThread.messages.length - 1);
         const clonedMessages = sourceThread.messages
           .slice(0, endIndex + 1)
           .map((message, index) => ({

web/src/state/chat/types.ts

@@ -38,5 +38,6 @@ export type ActionRenderInfo = {
   code?: string
   oldCode?: string
   language?: string
+  hidden?: boolean
   extraArgs?: Record<string, any>
 }