refactor: improve tool call result handling and display in conversation components

application/agents/base.py

@@ -197,7 +197,9 @@ class BaseAgent(ABC):
         else:
             print(f"Executing tool: {action_name} with args: {call_args}")
             result = tool.execute_action(action_name, **parameters)
-        tool_call_data["result"] = result
+        tool_call_data["result"] = (
+            f"{str(result)[:50]}..." if len(str(result)) > 50 else result
+        )
 
         yield {"type": "tool_call", "data": {**tool_call_data, "status": "completed"}}
         self.tool_calls.append(tool_call_data)
@@ -213,6 +215,7 @@ class BaseAgent(ABC):
                     if len(str(tool_call["result"])) > 50
                     else tool_call["result"]
                 ),
+                "status": "completed",
             }
             for tool_call in self.tool_calls
         ]

frontend/src/conversation/ConversationBubble.tsx

@@ -26,7 +26,9 @@ import UserIcon from '../assets/user.svg';
 import Accordion from '../components/Accordion';
 import Avatar from '../components/Avatar';
 import CopyButton from '../components/CopyButton';
+import MermaidRenderer from '../components/MermaidRenderer';
 import Sidebar from '../components/Sidebar';
+import Spinner from '../components/Spinner';
 import SpeakButton from '../components/TextToSpeechButton';
 import { useDarkTheme, useOutsideAlerter } from '../hooks';
 import {
@@ -36,7 +38,6 @@ import {
 import classes from './ConversationBubble.module.css';
 import { FEEDBACK, MESSAGE_TYPE } from './conversationModels';
 import { ToolCallsType } from './types';
-import MermaidRenderer from '../components/MermaidRenderer';
 
 const DisableSourceFE = import.meta.env.VITE_DISABLE_SOURCE_FE || false;
 
@@ -741,7 +742,7 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
         </button>
       </div>
       {isToolCallsOpen && (
-        <div className="fade-in ml-3 mr-5 max-w-[90vw] md:max-w-[70vw] lg:max-w-[50vw]">
+        <div className="fade-in ml-3 mr-5 w-[90vw] md:w-[70vw] lg:w-[50vw]">
           <div className="grid grid-cols-1 gap-2">
             {toolCalls.map((toolCall, index) => (
               <Accordion
@@ -778,14 +779,21 @@ function ToolCalls({ toolCalls }: { toolCalls: ToolCallsType[] }) {
                         textToCopy={JSON.stringify(toolCall.result, null, 2)}
                       />
                     </p>
-                    <p className="dark:tex break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
-                      <span
-                        className="leading-[23px] text-black dark:text-gray-400"
-                        style={{ fontFamily: 'IBMPlexMono-Medium' }}
-                      >
-                        {JSON.stringify(toolCall.result, null, 2)}
+                    {toolCall.status === 'pending' && (
+                      <span className="flex w-full items-center justify-center rounded-b-2xl p-2 dark:bg-[#222327]">
+                        <Spinner size="small" />
                       </span>
-                    </p>
+                    )}
+                    {toolCall.status === 'completed' && (
+                      <p className="break-words rounded-b-2xl p-2 font-mono text-sm dark:bg-[#222327]">
+                        <span
+                          className="leading-[23px] text-black dark:text-gray-400"
+                          style={{ fontFamily: 'IBMPlexMono-Medium' }}
+                        >
+                          {JSON.stringify(toolCall.result, null, 2)}
+                        </span>
+                      </p>
+                    )}
                   </div>
                 </div>
               </Accordion>

frontend/src/conversation/ConversationMessages.tsx

@@ -131,7 +131,7 @@ export default function ConversationMessages({
       ? LAST_BUBBLE_MARGIN
       : DEFAULT_BUBBLE_MARGIN;
 
-    if (query.thought || query.response) {
+    if (query.thought || query.response || query.tool_calls) {
       const isCurrentlyStreaming =
         status === 'loading' && index === queries.length - 1;
       return (

frontend/src/conversation/conversationSlice.ts

@@ -293,10 +293,11 @@ export const conversationSlice = createSlice({
       );
 
       if (existingIndex !== -1) {
-        Object.assign(
-          state.queries[index].tool_calls[existingIndex],
-          tool_call,
-        );
+        const existingCall = state.queries[index].tool_calls[existingIndex];
+        state.queries[index].tool_calls[existingIndex] = {
+          ...existingCall,
+          ...tool_call,
+        };
       } else state.queries[index].tool_calls.push(tool_call);
     },
     updateQuery(