tkmind/tkmind_go
1
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity

styles: tweaks to tool call UI (#812)

Browse Source
This commit is contained in:
Nahiyan Khan
2025-02-06 14:42:34 -05:00
committed by GitHub
parent 680b219674
commit b3978c7a5e
3 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/desktop/src/components/ToolCallArguments.tsx
+28 -18
View File
@@ -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>
))}