From af659d598e05539b914315a9c4b867843876c867 Mon Sep 17 00:00:00 2001
From: bracesproul <braceasproul@gmail.com>
Date: Tue, 4 Mar 2025 15:22:46 -0800
Subject: [PATCH] fix

---
 src/components/thread/messages/tool-calls.tsx | 84 ++++++++++++++++---
 1 file changed, 73 insertions(+), 11 deletions(-)

diff --git a/src/components/thread/messages/tool-calls.tsx b/src/components/thread/messages/tool-calls.tsx
index ebf39f6..bd768c3 100644
--- a/src/components/thread/messages/tool-calls.tsx
+++ b/src/components/thread/messages/tool-calls.tsx
@@ -64,20 +64,46 @@ export function ToolCalls({
 
 export function ToolResult({ message }: { message: ToolMessage }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const contentStr = JSON.stringify(message.content, null, 2);
-  const contentLines = contentStr.split('\n');
+
+  let parsedContent: any;
+  let isJsonContent = false;
+
+  try {
+    if (typeof message.content === "string") {
+      parsedContent = JSON.parse(message.content);
+      isJsonContent = true;
+    }
+  } catch {
+    // Content is not JSON, use as is
+    parsedContent = message.content;
+  }
+
+  const contentStr = isJsonContent
+    ? JSON.stringify(parsedContent, null, 2)
+    : String(message.content);
+  const contentLines = contentStr.split("\n");
   const shouldTruncate = contentLines.length > 4 || contentStr.length > 500;
-  const displayedContent = shouldTruncate && !isExpanded
-    ? (contentStr.length > 500
-        ? contentStr.slice(0, 500) + '...'
-        : contentLines.slice(0, 4).join('\n') + '\n...')
-    : contentStr;
+  const displayedContent =
+    shouldTruncate && !isExpanded
+      ? contentStr.length > 500
+        ? contentStr.slice(0, 500) + "..."
+        : contentLines.slice(0, 4).join("\n") + "\n..."
+      : contentStr;
 
   return (
     <div className="border border-gray-200 rounded-lg overflow-hidden">
       <div className="bg-gray-50 px-4 py-2 border-b border-gray-200">
         <div className="flex items-center justify-between gap-2 flex-wrap">
-          {message.name ? <h3 className="font-medium text-gray-900">Tool Result: <code className="bg-gray-100 px-2 py-1 rounded">{message.name}</code></h3> : <h3 className="font-medium text-gray-900">Tool Result</h3>}
+          {message.name ? (
+            <h3 className="font-medium text-gray-900">
+              Tool Result:{" "}
+              <code className="bg-gray-100 px-2 py-1 rounded">
+                {message.name}
+              </code>
+            </h3>
+          ) : (
+            <h3 className="font-medium text-gray-900">Tool Result</h3>
+          )}
           {message.tool_call_id && (
             <code className="ml-2 text-sm bg-gray-100 px-2 py-1 rounded">
               {message.tool_call_id}
@@ -85,7 +111,7 @@ export function ToolResult({ message }: { message: ToolMessage }) {
           )}
         </div>
       </div>
-      <motion.div 
+      <motion.div
         className="min-w-full bg-gray-100"
         initial={false}
         animate={{ height: "auto" }}
@@ -100,11 +126,47 @@ export function ToolResult({ message }: { message: ToolMessage }) {
               exit={{ opacity: 0, y: -20 }}
               transition={{ duration: 0.2 }}
             >
-              <code className="text-sm block">{displayedContent}</code>
+              {isJsonContent ? (
+                <table className="min-w-full divide-y divide-gray-200">
+                  <tbody className="divide-y divide-gray-200">
+                    {(Array.isArray(parsedContent)
+                      ? isExpanded
+                        ? parsedContent
+                        : parsedContent.slice(0, 5)
+                      : Object.entries(parsedContent)
+                    ).map((item, argIdx) => {
+                      const [key, value] = Array.isArray(parsedContent)
+                        ? [argIdx, item]
+                        : [item[0], item[1]];
+                      return (
+                        <tr key={argIdx}>
+                          <td className="px-4 py-2 text-sm font-medium text-gray-900 whitespace-nowrap">
+                            {key}
+                          </td>
+                          <td className="px-4 py-2 text-sm text-gray-500">
+                            {isComplexValue(value) ? (
+                              <code className="bg-gray-50 rounded px-2 py-1 font-mono text-sm">
+                                {JSON.stringify(value, null, 2)}
+                              </code>
+                            ) : (
+                              String(value)
+                            )}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              ) : (
+                <code className="text-sm block">{displayedContent}</code>
+              )}
             </motion.div>
           </AnimatePresence>
         </div>
-        {shouldTruncate && (
+        {((shouldTruncate && !isJsonContent) ||
+          (isJsonContent &&
+            Array.isArray(parsedContent) &&
+            parsedContent.length > 5)) && (
           <motion.button
             onClick={() => setIsExpanded(!isExpanded)}
             className="w-full py-2 flex items-center justify-center border-t-[1px] border-gray-200 text-gray-500 hover:text-gray-600 hover:bg-gray-50 transition-all ease-in-out duration-200 cursor-pointer"