From 33cdef986afcbef7396d5e26abeaa33915bff7eb Mon Sep 17 00:00:00 2001
From: Jonas Helming <jhelming@eclipsesource.com>
Date: Sat, 9 Nov 2024 00:47:58 +0100
Subject: [PATCH] Show arguments in tool call response renderer

fixed #14423

Signed-off-by: Jonas Helming <jhelming@eclipsesource.com>
---
 .../toolcall-part-renderer.tsx                | 49 +++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/ai-chat-ui/src/browser/chat-response-renderer/toolcall-part-renderer.tsx b/packages/ai-chat-ui/src/browser/chat-response-renderer/toolcall-part-renderer.tsx
index 4f5bc127f285b..112ef4bfda3af 100644
--- a/packages/ai-chat-ui/src/browser/chat-response-renderer/toolcall-part-renderer.tsx
+++ b/packages/ai-chat-ui/src/browser/chat-response-renderer/toolcall-part-renderer.tsx
@@ -20,6 +20,7 @@ import { ChatResponseContent, ToolCallChatResponseContent } from '@theia/ai-chat
 import { ReactNode } from '@theia/core/shared/react';
 import * as React from '@theia/core/shared/react';
 
+
 @injectable()
 export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallChatResponseContent> {
 
@@ -29,19 +30,49 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
         }
         return -1;
     }
-    render(response: ToolCallChatResponseContent): ReactNode {
-        return <h4 className='theia-toolCall'>
-            {response.finished ?
-                <details>
-                    <summary>Ran {response.name}</summary>
-                    <pre>{this.tryPrettyPrintJson(response)}</pre>
+
+    renderCollapsibleArguments(args: any): ReactNode {
+        return (
+            args && (
+                <details style={{ display: 'inline' }}>
+                    <summary
+                        style={{
+                            display: 'inline',
+                            cursor: 'pointer',
+                            textDecoration: 'underline',
+                        }}>
+                        &gt;
+                    </summary>
+                    <span>{JSON.stringify(args, null, 2)}</span>
                 </details>
-                : <span><Spinner /> Running [{response.name}]</span>
-            }
-        </h4>;
+            )
+        );
+    }
 
+    render(response: ToolCallChatResponseContent): ReactNode {
+        return (
+            <h4 className='theia-toolCall'>
+                {response.finished ? (
+                    <details>
+                        <summary>Ran [{response.name}
+                            {response.arguments && <>({this.renderCollapsibleArguments(response.arguments)})</>}
+                            ]</summary>
+                        <pre>{this.tryPrettyPrintJson(response)}</pre>
+                        {this.renderCollapsibleArguments(response.arguments)}
+                    </details>
+                ) : (
+                    <span>
+                        <Spinner /> Running [{response.name}
+                        {response.arguments && <>({this.renderCollapsibleArguments(response.arguments)})</>}
+                        ]
+                    </span>
+                )}
+            </h4>
+        );
     }
 
+
+
     private tryPrettyPrintJson(response: ToolCallChatResponseContent): string | undefined {
         let responseContent = response.result;
         try {