From 98b067ed3ccf98b12ec7d5ce8bfad54a1c434d23 Mon Sep 17 00:00:00 2001
From: Ivy <ivy@acorn.io>
Date: Fri, 27 Dec 2024 09:16:33 -0500
Subject: [PATCH] fix: tool calls show in revisiting thread (#1058)

---
 ui/admin/app/components/chat/ChatContext.tsx  | 34 ++++++++++++++++---
 .../app/routes/_auth.workflows._index.tsx     |  1 +
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/ui/admin/app/components/chat/ChatContext.tsx b/ui/admin/app/components/chat/ChatContext.tsx
index 229ed062..c2fa5a2d 100644
--- a/ui/admin/app/components/chat/ChatContext.tsx
+++ b/ui/admin/app/components/chat/ChatContext.tsx
@@ -171,10 +171,8 @@ function useMessageSource(threadId?: Nullish<string>) {
                 return copy;
             }
 
-            // skip tool call output events
-            if (toolCall && !toolCall.output) {
-                copy.push(toolCallMessage(toolCall));
-                return copy;
+            if (toolCall) {
+                return handleToolCallEvent(copy, event);
             }
 
             if (prompt) {
@@ -232,3 +230,31 @@ function useMessageSource(threadId?: Nullish<string>) {
 
     return { messages, isRunning };
 }
+
+const findIndexLastPendingToolCall = (messages: Message[]) => {
+    for (let i = messages.length - 1; i >= 0; i--) {
+        const message = messages[i];
+        if (message.tools && !message.tools[0].output) {
+            return i;
+        }
+    }
+    return null;
+};
+
+const handleToolCallEvent = (messages: Message[], event: ChatEvent) => {
+    if (!event.toolCall) return messages;
+
+    const { toolCall } = event;
+    if (toolCall.output) {
+        const index = findIndexLastPendingToolCall(messages);
+        if (index !== null) {
+            // update the found pending toolcall message (without output)
+            messages[index].tools = [toolCall];
+            return messages;
+        }
+    }
+
+    // otherwise add a new toolcall message
+    messages.push(toolCallMessage(toolCall));
+    return messages;
+};
diff --git a/ui/admin/app/routes/_auth.workflows._index.tsx b/ui/admin/app/routes/_auth.workflows._index.tsx
index 13cff9b6..ded70595 100644
--- a/ui/admin/app/routes/_auth.workflows._index.tsx
+++ b/ui/admin/app/routes/_auth.workflows._index.tsx
@@ -111,6 +111,7 @@ export default function Workflows() {
                     cell: (info) => (
                         <div className="flex gap-2 items-center">
                             <Link
+                                onClick={(event) => event.stopPropagation()}
                                 to={$path("/threads", {
                                     workflowId: info.row.original.id,
                                     from: "workflows",