aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2026-02-14 11:04:29 +01:00
Code Issues 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

7
ui/desktop/src/components/MarkdownContent.tsx
View File

@@ -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}

46
ui/desktop/src/components/ToolCallArguments.tsx
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>
))}

14
ui/desktop/src/components/ToolInvocations.tsx
View File

@@ -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' : ''}`}
/>