Show arguments in tool call response renderer

fixed #14423 Signed-off-by: Jonas Helming <[email protected]>
eclipse-theia · Nov 8, 2024 · 33cdef9 · 33cdef9
1 parent 6c76b44
commit 33cdef9
Showing 1 changed file with 40 additions and 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
@@ -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 {