From b3978c7a5ecbd3596f210cd26da9acbe4ba39b84 Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan.khan@gmail.com>
Date: Thu, 6 Feb 2025 14:42:34 -0500
Subject: [PATCH] styles: tweaks to tool call UI (#812)

---
 ui/desktop/src/components/MarkdownContent.tsx |  7 ++-
 .../src/components/ToolCallArguments.tsx      | 46 +++++++++++--------
 ui/desktop/src/components/ToolInvocations.tsx | 14 +++---
 3 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx
index a490587f..ca3995f1 100644
--- a/ui/desktop/src/components/MarkdownContent.tsx
+++ b/ui/desktop/src/components/MarkdownContent.tsx
@@ -84,7 +84,7 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
       <ReactMarkdown
         rehypePlugins={[rehypeinlineCodeProperty]}
         className={`prose prose-xs dark:prose-invert w-full max-w-full break-words
-          prose-pre:p-0 prose-pre:m-0
+          prose-pre:p-0 prose-pre:m-0 !p-0
           prose-code:break-all prose-code:whitespace-pre-wrap
           ${className}`}
         components={{
@@ -102,6 +102,11 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
               </code>
             );
           },
+          // h3: 'div',
+          h3(props) {
+            const { node, ...rest } = props;
+            return <div className="text-textStandard text-sm" {...rest} />;
+          },
         }}
       >
         {content}
diff --git a/ui/desktop/src/components/ToolCallArguments.tsx b/ui/desktop/src/components/ToolCallArguments.tsx
index f0d5b5b8..308fffe5 100644
--- a/ui/desktop/src/components/ToolCallArguments.tsx
+++ b/ui/desktop/src/components/ToolCallArguments.tsx
@@ -1,3 +1,4 @@
+import { ChevronUp } from 'lucide-react';
 import React, { useState } from 'react';
 import MarkdownContent from './MarkdownContent';
 
@@ -19,34 +20,43 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
 
       if (!needsExpansion) {
         return (
-          <div className="p-1">
-            <div className="flex">
-              <span className="text-textStandard mr-2">{key}:</span>
-              <span className="text-textStandard">{value}</span>
+          <div className="mb-2">
+            <div className="flex flex-row">
+              <span className="text-sm font-medium text-textSubtle min-w-[140px]">{key}</span>
+              <span className="text-sm text-textStandard">{value}</span>
             </div>
           </div>
         );
       }
 
       return (
-        <div className="p-1">
-          <div className="flex items-baseline">
-            <span className="text-textStandard mr-2">{key}:</span>
-            <div className="flex-1">
+        <div className="mb-2">
+          <div className="flex flex-row">
+            <span className="text-sm font-medium text-textSubtle min-w-[140px]">{key}</span>
+            <div className="flex items-center">
+              {isExpanded ? (
+                <div className="mt-2">
+                  <MarkdownContent content={value} />
+                </div>
+              ) : (
+                <span className="text-sm text-textStandard mr-2">{value.slice(0, 60)}...</span>
+              )}
               <button
                 onClick={() => toggleKey(key)}
-                className="hover:opacity-75 text-gray-600 dark:text-white"
+                className="text-sm hover:opacity-75 text-textStandard"
               >
-                {isExpanded ? '▼ ' : '▶ '}
+                {/* {isExpanded ? '▼ ' : '▶ '} */}
+                <ChevronUp
+                  className={`h-5 w-5 transition-all origin-center ${!isExpanded ? 'rotate-180' : ''}`}
+                />
               </button>
-              {!isExpanded && <span className="ml-2 text-gray-600">{value.slice(0, 60)}...</span>}
             </div>
           </div>
-          {isExpanded && (
-            <div className="mt-2 ml-4">
+          {/* {isExpanded && (
+            <div className="mt-2">
               <MarkdownContent content={value} />
             </div>
-          )}
+          )} */}
         </div>
       );
     }
@@ -59,9 +69,9 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
         : String(value);
 
     return (
-      <div className="p-1">
-        <div className="flex">
-          <span className="font-medium mr-2">{key}:</span>
+      <div className="mb-2">
+        <div className="flex flex-row">
+          <span className="font-medium mr- min-w-[140px]2">{key}:</span>
           <pre className="whitespace-pre-wrap">{content}</pre>
         </div>
       </div>
@@ -69,7 +79,7 @@ export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
   };
 
   return (
-    <div className="mt-2">
+    <div className="my-2">
       {Object.entries(args).map(([key, value]) => (
         <div key={key}>{renderValue(key, value)}</div>
       ))}
diff --git a/ui/desktop/src/components/ToolInvocations.tsx b/ui/desktop/src/components/ToolInvocations.tsx
index a0221baf..7de42dd4 100644
--- a/ui/desktop/src/components/ToolInvocations.tsx
+++ b/ui/desktop/src/components/ToolInvocations.tsx
@@ -44,10 +44,10 @@ interface ToolCallProps {
 function ToolCall({ call }: ToolCallProps) {
   return (
     <div>
-      <div className="flex items-center">
-        <Box size={15} />
-        <span className="ml-[8px] text-sm text-textStandard font-medium tracking-widest">
-          {call.toolName.substring(call.toolName.lastIndexOf('__') + 2).toUpperCase()}
+      <div className="flex items-center mb-4">
+        <Box size={16} />
+        <span className="ml-[8px] text-textStandard">
+          {snakeToTitleCase(call.toolName.substring(call.toolName.lastIndexOf('__') + 2))}
         </span>
       </div>
 
@@ -116,7 +116,7 @@ function ToolResult({ result }: ToolResultProps) {
   };
 
   return (
-    <div className="mt-2">
+    <div className="">
       {filteredResults.map((item: ResultItem, index: number) => {
         const isExpanded = shouldShowExpanded(item, index);
         // minimize if priority is not set or < 0.5
@@ -127,9 +127,9 @@ function ToolResult({ result }: ToolResultProps) {
             {shouldMinimize && (
               <button
                 onClick={() => toggleExpand(index)}
-                className="mb-1 p-1 flex items-center text-textStandard"
+                className="mb-1 flex items-center text-textStandard"
               >
-                <span className="mr-2">Output</span>
+                <span className="mr-2 text-sm">Output</span>
                 <ChevronUp
                   className={`h-5 w-5 transition-all origin-center ${!isExpanded ? 'rotate-180' : ''}`}
                 />