diff options
| author | Taylor Mullen <[email protected]> | 2025-04-22 07:48:12 -0400 |
|---|---|---|
| committer | N. Taylor Mullen <[email protected]> | 2025-04-22 08:05:30 -0400 |
| commit | 80b04dc505bf1c784a54c5d80d971310b05144cc (patch) | |
| tree | c2ec8e750f74f15318af2d489ced94b809c76496 /packages/cli/src/ui/components/messages/ToolGroupMessage.tsx | |
| parent | 1ed9743ad4e2dfb0469a8fd79b71a52ec391d50e (diff) | |
Update UI of tool messages
- Bring tool messages in line with original envisioned UI of: https://screenshot.googleplex.com/9yZCX636LzpMrgc
- In particular this represents more descriptive names. FWIW we already had this tech we just weren't passing around information correctly (`displayName` vs. `name`)
- Add gray to our list of color pallete's and removed Background (unused)
- Re-enabled representing canceled messages
- Migrated back towards a cleaner tool message design of status symbols & border colors vs. overly verbose text.
- Removed border from confirmation diffs.
Fixes https://b.corp.google.com/issues/412598909
Diffstat (limited to 'packages/cli/src/ui/components/messages/ToolGroupMessage.tsx')
| -rw-r--r-- | packages/cli/src/ui/components/messages/ToolGroupMessage.tsx | 13 |
1 files changed, 10 insertions, 3 deletions
diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx index 448ed4c5..0675411f 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx @@ -22,11 +22,18 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({ toolCalls, onSubmit, }) => { - const hasPending = toolCalls.some((t) => t.status === ToolCallStatus.Pending); - const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentBlue; + const hasPending = !toolCalls.every( + (t) => t.status === ToolCallStatus.Success, + ); + const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentCyan; return ( - <Box flexDirection="column" borderStyle="round" borderColor={borderColor}> + <Box + flexDirection="column" + borderStyle="round" + borderDimColor={hasPending} + borderColor={borderColor} + > {toolCalls.map((tool) => ( <React.Fragment key={tool.callId}> <ToolMessage |