fix: soften error indicators in tool call groups — icon instead of red badge

- Replace "ERROR" text badge with material error icon (less visually jarring)
- Add "pending" icon when tool results haven't been matched yet
- Remove red border on error groups — all groups now use the same neutral border
- Single tool call ERROR badge also changed to icon

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
程序员阿江(Relakkes) 2026-04-06 23:13:18 +08:00
parent 5e71da88c3
commit 5e4e7d3955
2 changed files with 7 additions and 12 deletions

View File

@ -71,9 +71,7 @@ export function ToolCallBlock({ toolName, input, result, compact = false }: Prop
</span>
)}
{result?.isError && (
<span className="shrink-0 rounded-full bg-[var(--color-error-container)] px-1.5 py-0.5 text-[9px] font-bold text-[var(--color-error)]">
ERROR
</span>
<span className="material-symbols-outlined shrink-0 text-[14px] text-[var(--color-error)]">error</span>
)}
{expandable && (
<span className="material-symbols-outlined text-[14px] text-[var(--color-outline)]">

View File

@ -75,11 +75,7 @@ function ToolCallGroupMulti({ toolCalls, resultMap, isStreaming }: Props) {
<button
type="button"
onClick={() => setExpanded((v) => !v)}
className={`flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left transition-colors ${
errorPresent
? 'border border-[var(--color-error)]/20 bg-[var(--color-error-container)]/30 hover:bg-[var(--color-error-container)]/50'
: 'border border-[var(--color-border)]/40 bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-container-high)]'
}`}
className="flex w-full items-center gap-2 rounded-lg border border-[var(--color-border)]/40 bg-[var(--color-surface-container-low)] px-3 py-1.5 text-left transition-colors hover:bg-[var(--color-surface-container-high)]"
>
<span className="material-symbols-outlined text-[14px] text-[var(--color-outline)]">
{expanded ? 'expand_less' : 'expand_more'}
@ -90,10 +86,11 @@ function ToolCallGroupMulti({ toolCalls, resultMap, isStreaming }: Props) {
{!isStreaming && allComplete && !errorPresent && (
<span className="material-symbols-outlined text-[14px] text-[var(--color-success)]">check_circle</span>
)}
{errorPresent && (
<span className="rounded-full bg-[var(--color-error-container)] px-2 py-0.5 text-[9px] font-bold uppercase text-[var(--color-error)]">
ERROR
</span>
{!isStreaming && errorPresent && (
<span className="material-symbols-outlined text-[14px] text-[var(--color-error)]">error</span>
)}
{!isStreaming && !allComplete && !errorPresent && (
<span className="material-symbols-outlined text-[14px] text-[var(--color-outline)]">pending</span>
)}
{isStreaming && (
<span className="h-1.5 w-1.5 rounded-full bg-[var(--color-brand)] animate-pulse-dot" />