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
This commit is contained in:
Taylor Mullen
2025-04-22 07:48:12 -04:00
committed by N. Taylor Mullen
parent 1ed9743ad4
commit 80b04dc505
8 changed files with 70 additions and 91 deletions

View File

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