From 77ea063d078e0d04d564dd9fe79946d289c7b5be Mon Sep 17 00:00:00 2001
From: bracesproul <braceasproul@gmail.com>
Date: Wed, 5 Mar 2025 14:25:36 -0800
Subject: [PATCH] fix: Render tool calls with no args

---
 src/components/thread/messages/tool-calls.tsx | 47 ++++++++++---------
 1 file changed, 25 insertions(+), 22 deletions(-)

diff --git a/src/components/thread/messages/tool-calls.tsx b/src/components/thread/messages/tool-calls.tsx
index bd768c3..b94f885 100644
--- a/src/components/thread/messages/tool-calls.tsx
+++ b/src/components/thread/messages/tool-calls.tsx
@@ -18,8 +18,7 @@ export function ToolCalls({
     <div className="space-y-4">
       {toolCalls.map((tc, idx) => {
         const args = tc.args as Record<string, any>;
-        if (!tc.args || Object.keys(args).length === 0) return null;
-
+        const hasArgs = Object.keys(args).length > 0;
         return (
           <div
             key={idx}
@@ -35,26 +34,30 @@ export function ToolCalls({
                 )}
               </h3>
             </div>
-            <table className="min-w-full divide-y divide-gray-200">
-              <tbody className="divide-y divide-gray-200">
-                {Object.entries(args).map(([key, value], argIdx) => (
-                  <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>
+            {hasArgs ? (
+              <table className="min-w-full divide-y divide-gray-200">
+                <tbody className="divide-y divide-gray-200">
+                  {Object.entries(args).map(([key, value], argIdx) => (
+                    <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 p-3">{"{}"}</code>
+            )}
           </div>
         );
       })}