Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: collapse long tool args #368

Merged
merged 1 commit into from
Nov 28, 2024
Merged

feat: collapse long tool args #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 88 additions & 0 deletions ui/desktop/src/components/ToolCallArguments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';

interface ToolCallArgumentsProps {
args: Record<string, any>;
}

export function ToolCallArguments({ args }: ToolCallArgumentsProps) {
const [expandedKeys, setExpandedKeys] = useState<Record<string, boolean>>({});

const toggleKey = (key: string) => {
setExpandedKeys((prev) => ({ ...prev, [key]: !prev[key] }));
};

const renderValue = (key: string, value: any) => {
if (typeof value === 'string') {
const needsExpansion = value.length > 60;
const isExpanded = expandedKeys[key];

if (!needsExpansion) {
return (
<div className="p-2">
<div className="flex">
<span className="font-medium mr-2">{key}:</span>
<span>{value}</span>
</div>
</div>
);
}

return (
<div className="p-2">
<div className="flex items-baseline">
<span className="font-medium mr-2">{key}:</span>
<div className="flex-1">
<button
onClick={() => toggleKey(key)}
className="hover:opacity-75"
>
{isExpanded ? '▼ Collapse' : '▶ Expand'}
</button>
{!isExpanded && (
<span className="ml-2 text-gray-600">
{value.slice(0, 60)}...
</span>
)}
</div>
</div>
{isExpanded && (
<div className="mt-2 ml-4">
<ReactMarkdown className="whitespace-pre-wrap break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">
{value}
</ReactMarkdown>
</div>
)}
</div>
);
}

// Handle non-string values (arrays, objects, etc.)
const content = Array.isArray(value)
? value.map((item, index) => `${index + 1}. ${JSON.stringify(item)}`).join('\n')
: typeof value === 'object' && value !== null
? JSON.stringify(value, null, 2)
: String(value);

return (
<div className="p-2">
<div className="flex">
<span className="font-medium mr-2">{key}:</span>
<pre className="whitespace-pre-wrap">
{content}
</pre>
</div>
</div>
);
};

return (
<div className="mt-2">
{Object.entries(args).map(([key, value]) => (
<div key={key} className="border-t first:border-t-0 border-gray-200">
{renderValue(key, value)}
</div>
))}
</div>
);
}
72 changes: 8 additions & 64 deletions ui/desktop/src/components/ToolInvocations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { Card } from './ui/card';
import { BoxIcon } from './ui/icons'
import ReactMarkdown from 'react-markdown'

import { ToolCallArguments } from './ToolCallArguments';

export default function ToolInvocations({ toolInvocations }) {
return (
Expand All @@ -17,9 +17,6 @@ export default function ToolInvocations({ toolInvocations }) {
)
}




function ToolInvocation({ toolInvocation }) {
return (
<div className="flex bg-goose-bubble text-white rounded-2xl p-4 pb-0 mb-[16px] max-w-full">
Expand All @@ -31,9 +28,6 @@ function ToolInvocation({ toolInvocation }) {
)
}




interface ToolCallProps {
call: {
state: 'call' | 'result'
Expand All @@ -44,8 +38,6 @@ interface ToolCallProps {
}

function ToolCall({ call }: ToolCallProps) {
const argsMarkdownContent = convertArgsToMarkdown(call.args);

return (
<Card className="bg-tool-card p-4 mb-[16px]">
<div className="flex items-center">
Expand All @@ -54,17 +46,12 @@ function ToolCall({ call }: ToolCallProps) {
</div>

{call.args && (
<ReactMarkdown className="p-2 max-w-full overflow-x-auto break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">
{argsMarkdownContent}
</ReactMarkdown>
<ToolCallArguments args={call.args} />
)}
</Card>
)
);
}




interface ResultItem {
text?: string;
type: 'text' | 'image';
Expand Down Expand Up @@ -122,7 +109,7 @@ function ToolResult({ result }: ToolResultProps) {
<BoxIcon size={14} />
<span className="ml-[8px]">Tool Result: {result.toolName.substring(result.toolName.lastIndexOf("__") + 2)}</span>
</div>
<div>
<div className="mt-2">
{filteredResults.map((item: ResultItem, index: number) => {
const isExpanded = shouldShowExpanded(item, index);
const shouldMinimize = item.priority !== undefined && item.priority < 0.5;
Expand All @@ -132,13 +119,13 @@ function ToolResult({ result }: ToolResultProps) {
{shouldMinimize && (
<button
onClick={() => toggleExpand(index)}
className="mb-2 p-4 flex items-center"
className="mb-2 hover:opacity-75"
>
{isExpanded ? '▼ Collapse' : '▶ Expand'} {/* Unicode triangles as expand/collapse indicators */}
{isExpanded ? '▼ Collapse' : '▶ Expand'}
</button>
)}
{(isExpanded || !shouldMinimize) && (
<>
<div className={shouldMinimize ? "ml-4" : ""}>
{item.type === 'text' && item.text && (
<ReactMarkdown className="text-tool-result-green whitespace-pre-wrap p-2 max-w-full overflow-x-auto break-words prose-pre:whitespace-pre-wrap prose-pre:break-words">
{item.text}
Expand All @@ -155,11 +142,6 @@ function ToolResult({ result }: ToolResultProps) {
}}
/>
)}
</>
)}
{!isExpanded && shouldMinimize && (
<div className="text-gray-500 italic ml-2">
Click to show content
</div>
)}
</div>
Expand All @@ -168,42 +150,4 @@ function ToolResult({ result }: ToolResultProps) {
</div>
</Card>
);
}




// Utils

const convertArgsToMarkdown = (args: Record<string, any>): string => {
const lines: string[] = [];

Object.entries(args).forEach(([key, value]) => {
if (typeof value === 'string') {
lines.push('```');
lines.push(`${key}: ${value}`);
lines.push('```');
} else if (Array.isArray(value)) {
lines.push(`### ${key}`);
lines.push('');
value.forEach((item, index) => {
lines.push(`${index + 1}. ${JSON.stringify(item)}`);
});
} else if (typeof value === 'object' && value !== null) {
lines.push(`### ${key}`);
lines.push('');
lines.push('```json');
lines.push(JSON.stringify(value, null, 2));
lines.push('```');
} else {
lines.push(`### ${key}`);
lines.push('');
lines.push('```');
lines.push(String(value));
lines.push('```');
}
lines.push('');
});

return lines.join('\n');
};
}
6 changes: 3 additions & 3 deletions ui/desktop/src/components/ui/VertDots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import React from 'react'
export default function VertDots({ size } : { size: number }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} fill="none">
<path d="M10.4976 4.5C10.4976 5.32843 9.82599 6 8.99756 6C8.16913 6 7.49756 5.32843 7.49756 4.5C7.49756 3.67157 8.16913 3 8.99756 3C9.82599 3 10.4976 3.67157 10.4976 4.5Z" fill="black" fill-opacity="0.25"/>
<path d="M10.4976 9C10.4976 9.82843 9.82599 10.5 8.99756 10.5C8.16913 10.5 7.49756 9.82843 7.49756 9C7.49756 8.17157 8.16913 7.5 8.99756 7.5C9.82599 7.5 10.4976 8.17157 10.4976 9Z" fill="black" fill-opacity="0.25"/>
<path d="M8.99756 15C9.82599 15 10.4976 14.3284 10.4976 13.5C10.4976 12.6716 9.82599 12 8.99756 12C8.16913 12 7.49756 12.6716 7.49756 13.5C7.49756 14.3284 8.16913 15 8.99756 15Z" fill="black" fill-opacity="0.25"/>
<path d="M10.4976 4.5C10.4976 5.32843 9.82599 6 8.99756 6C8.16913 6 7.49756 5.32843 7.49756 4.5C7.49756 3.67157 8.16913 3 8.99756 3C9.82599 3 10.4976 3.67157 10.4976 4.5Z" fill="black" fillOpacity="0.25"/>
<path d="M10.4976 9C10.4976 9.82843 9.82599 10.5 8.99756 10.5C8.16913 10.5 7.49756 9.82843 7.49756 9C7.49756 8.17157 8.16913 7.5 8.99756 7.5C9.82599 7.5 10.4976 8.17157 10.4976 9Z" fill="black" fillOpacity="0.25"/>
<path d="M8.99756 15C9.82599 15 10.4976 14.3284 10.4976 13.5C10.4976 12.6716 9.82599 12 8.99756 12C8.16913 12 7.49756 12.6716 7.49756 13.5C7.49756 14.3284 8.16913 15 8.99756 15Z" fill="black" fillOpacity="0.25"/>
</svg>
);
}
2 changes: 1 addition & 1 deletion ui/desktop/src/components/ui/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ export const InvoiceIcon = ({ size = 16 }: { size: number }) => {

export const Bird = () => (
<svg width="45" height="39" viewBox="0 0 45 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.4047 17.9373C27.3193 17.5522 28.3302 17.3596 29.293 17.6003C29.7791 17.7218 30.4615 18.1747 31.111 18.6057C31.748 19.0283 32.3532 19.43 32.7107 19.4777C33.0285 19.52 33.4581 19.4971 33.8805 19.4746C34.4182 19.446 34.9443 19.418 35.2139 19.5258C35.4268 19.611 35.6304 19.9223 35.8537 20.2638C36.1351 20.6942 36.4479 21.1727 36.8506 21.3069C37.0202 21.3634 37.2005 21.412 37.3721 21.4583C37.9307 21.6088 38.3967 21.7343 38.1021 22.0289C37.717 22.414 35.3583 22.6547 35.1176 22.5585C34.9949 22.5094 35.0098 22.3852 35.0284 22.2306C35.0463 22.082 35.0676 21.9053 34.9732 21.7401C34.8829 21.5821 34.708 21.3289 34.5426 21.0896C34.3554 20.8185 34.1804 20.5652 34.1549 20.4885C33.9623 20.3441 33.144 20.1997 33.144 20.3923C33.144 20.5848 33.3847 21.9808 33.5772 22.1734C33.6063 22.2024 33.6354 22.2304 33.6628 22.2568C33.8169 22.4051 33.9187 22.503 33.6735 22.4622C33.3847 22.414 31.748 21.7401 31.2185 21.2106C30.689 20.6811 29.9188 19.959 29.2448 19.959C28.871 19.959 27.9491 21.1144 27.0625 22.2255C26.3509 23.1174 25.662 23.9808 25.2976 24.1951C24.4792 24.6765 21.7835 25.7837 20.2431 25.8799C18.7027 25.9762 16.8254 25.9762 16.7772 25.4948C16.7291 25.0135 16.9217 24.5802 17.6437 24.6765C18.3658 24.7728 24.2867 23.6656 25.9234 21.9808C26.3025 21.5905 26.612 21.2802 26.8612 21.0304C27.6877 20.2016 27.8524 20.0365 27.7044 19.8146C27.6538 19.7386 27.5032 19.5927 27.3183 19.4135C26.8006 18.9119 26.0145 18.1501 26.4047 17.9373ZM34.8264 20.5249C34.8275 20.5419 34.8288 20.5615 34.8288 20.5848C34.8288 20.7292 34.8769 20.8255 35.0213 20.8736C35.1657 20.9218 35.262 20.7292 35.2139 20.5848C35.1657 20.4404 35.1176 20.296 35.0213 20.296C34.8195 20.4171 34.8207 20.4366 34.8264 20.5249Z" fill="#7F7F7F"/>
<path fillRule="evenodd" clipRule="evenodd" d="M26.4047 17.9373C27.3193 17.5522 28.3302 17.3596 29.293 17.6003C29.7791 17.7218 30.4615 18.1747 31.111 18.6057C31.748 19.0283 32.3532 19.43 32.7107 19.4777C33.0285 19.52 33.4581 19.4971 33.8805 19.4746C34.4182 19.446 34.9443 19.418 35.2139 19.5258C35.4268 19.611 35.6304 19.9223 35.8537 20.2638C36.1351 20.6942 36.4479 21.1727 36.8506 21.3069C37.0202 21.3634 37.2005 21.412 37.3721 21.4583C37.9307 21.6088 38.3967 21.7343 38.1021 22.0289C37.717 22.414 35.3583 22.6547 35.1176 22.5585C34.9949 22.5094 35.0098 22.3852 35.0284 22.2306C35.0463 22.082 35.0676 21.9053 34.9732 21.7401C34.8829 21.5821 34.708 21.3289 34.5426 21.0896C34.3554 20.8185 34.1804 20.5652 34.1549 20.4885C33.9623 20.3441 33.144 20.1997 33.144 20.3923C33.144 20.5848 33.3847 21.9808 33.5772 22.1734C33.6063 22.2024 33.6354 22.2304 33.6628 22.2568C33.8169 22.4051 33.9187 22.503 33.6735 22.4622C33.3847 22.414 31.748 21.7401 31.2185 21.2106C30.689 20.6811 29.9188 19.959 29.2448 19.959C28.871 19.959 27.9491 21.1144 27.0625 22.2255C26.3509 23.1174 25.662 23.9808 25.2976 24.1951C24.4792 24.6765 21.7835 25.7837 20.2431 25.8799C18.7027 25.9762 16.8254 25.9762 16.7772 25.4948C16.7291 25.0135 16.9217 24.5802 17.6437 24.6765C18.3658 24.7728 24.2867 23.6656 25.9234 21.9808C26.3025 21.5905 26.612 21.2802 26.8612 21.0304C27.6877 20.2016 27.8524 20.0365 27.7044 19.8146C27.6538 19.7386 27.5032 19.5927 27.3183 19.4135C26.8006 18.9119 26.0145 18.1501 26.4047 17.9373ZM34.8264 20.5249C34.8275 20.5419 34.8288 20.5615 34.8288 20.5848C34.8288 20.7292 34.8769 20.8255 35.0213 20.8736C35.1657 20.9218 35.262 20.7292 35.2139 20.5848C35.1657 20.4404 35.1176 20.296 35.0213 20.296C34.8195 20.4171 34.8207 20.4366 34.8264 20.5249Z" fill="#7F7F7F"/>
<path d="M25.8272 13.4604C26.5492 14.1343 25.8272 17.167 25.779 17.3595C25.5615 18.2298 24.0352 17.619 23.565 16.8551C23.3126 16.4449 23.1018 15.9636 23.0833 15.4822C23.0352 14.2306 22.3131 13.0272 22.1206 12.4495C21.928 11.8719 19.5212 10.9573 18.414 10.6684C17.3068 10.3796 17.1143 8.3097 17.2587 8.02087C17.4031 7.73205 21.4948 10.524 23.0833 11.2461C24.6719 11.9681 25.1051 12.7865 25.8272 13.4604Z" fill="#7F7F7F"/>
<path d="M16.5848 24.0024C16.2478 24.0024 16.0553 24.195 15.6702 24.8208C15.253 25.3824 14.3704 26.5441 14.1779 26.6981C13.9372 26.8907 13.7447 26.5056 13.0707 26.4575C12.3968 26.4093 11.771 27.5646 11.4822 27.9016C11.1934 28.2385 12.7819 28.3348 14.3704 27.5646C15.959 26.7944 16.8255 24.7245 16.9699 24.3875C17.1143 24.0506 16.9217 24.0024 16.5848 24.0024Z" fill="#7F7F7F"/>
<path d="M20.2432 12.3532C21.4948 12.8827 21.8317 13.6529 21.8799 14.8563C21.9912 17.6399 22.2769 20.3073 19.7272 21.4296C17.9018 22.2331 16.1005 22.9204 15.7664 23.0397C15.0925 23.2804 14.6593 23.5211 14.3704 23.9062C14.0816 24.2913 14.5149 24.3876 14.7555 24.7727C14.9962 25.1578 14.0816 25.6391 13.2151 25.591C12.3487 25.5429 11.1934 24.8208 11.1452 24.195C11.0971 23.5692 13.4558 22.9434 14.3704 22.7027C15.2851 22.4621 16.5848 21.1623 17.4031 20.8254C18.2214 20.4884 17.3068 20.681 17.0661 20.4403C16.8255 20.1996 16.6329 19.0924 16.5848 18.5629C16.5366 18.0334 15.959 17.1669 15.7664 16.9262C15.5739 16.6856 18.1733 16.83 18.2696 16.6374C18.3659 16.4449 16.5848 16.493 15.4295 16.3005C14.2742 16.1079 13.7928 15.3377 13.6484 15.097C13.504 14.8563 17.7401 15.5784 17.9808 15.3377C18.2214 15.097 16.1997 15.097 15.2369 14.9045C14.2742 14.7119 13.3114 14.5194 12.83 14.1824C12.3487 13.8455 11.9154 13.0271 12.3005 13.2197C12.6856 13.4122 17.4031 14.2787 17.7401 14.0861C18.077 13.8936 12.9263 12.7383 12.1561 12.4495C11.3859 12.1606 10.712 10.8128 10.6157 10.524C10.5194 10.2351 11.7229 11.1016 12.3005 11.2942L12.3005 11.2942C12.8782 11.4867 16.9217 12.8346 17.4031 12.7383C17.8845 12.642 13.3596 11.0535 12.0598 10.524C10.7601 9.99446 10.375 8.5022 10.2788 8.1171C10.1825 7.732 11.3859 8.55034 12.0598 8.98357C12.7338 9.41681 18.9916 11.8237 20.2432 12.3532Z" fill="#7F7F7F"/>
Expand Down
Loading