Skip to content

fix(messages): normalize tool-call card shells under custom themes#14828

Open
Fu-Jumping wants to merge 1 commit into
CherryHQ:mainfrom
Fu-Jumping:hotfix/tool-call-theme-radius-follow-up
Open

fix(messages): normalize tool-call card shells under custom themes#14828
Fu-Jumping wants to merge 1 commit into
CherryHQ:mainfrom
Fu-Jumping:hotfix/tool-call-theme-radius-follow-up

Conversation

@Fu-Jumping
Copy link
Copy Markdown
Contributor

What this PR does

Before this PR:
Under some custom themes from Cherry CSS, tool-call UI could show two visible rounded layers with inconsistent corner radii.
This was most obvious on tool-call cards that use Collapse internally, such as grouped tool calls, generic agent tool cards, MCP tool cards, and permission request cards.
In the MCP response-only path, the expanded body could also show an extra divider line.

After this PR:
Affected tool-call cards render as a single visible outer shell under custom themes.
Inner Collapse layers no longer render their own independent rounded/background shell.
The MCP response-only expanded view now keeps a single divider between the header and body.
The visible corner radius of these tool-call cards is also kept aligned with the previous UI instead of becoming overly rounded.

Fixes #

Why we need it and why it was done in this way

Some custom themes style .ant-collapse and .ant-collapse-content, which exposed that these tool-call components were rendering multiple visible card layers with separate backgrounds and corner radii.

This fix keeps the change local to the affected tool-call components and makes the outer tool card the only visible shell.
That keeps the hotfix small and avoids changing the global theme system, custom CSS injection behavior, or unrelated Collapse usage.

The following tradeoffs were made:
A local renderer-only fix was chosen instead of adding a global Ant Design override.
Component-local radii were kept for these tool-call cards so the UI stays closer to the previous appearance and does not become pill-shaped in layouts where list-item radius tokens are larger.

The following alternatives were considered:
A global override in ant.css was considered, but rejected because it would broaden the change surface and could affect unrelated collapsible components.
Changing the custom theme contract was also considered, but rejected because tool-call cards should render correctly even when themes style Ant Design collapse internals.

Links to places where the discussion took place:
N/A

Breaking changes

None.

Special notes for your reviewer

A renderer regression test was added for:

  • generic agent tool cards
  • grouped tool-call cards
  • MCP tool cards
  • tool permission request cards
  • MCP response-only divider behavior under themed collapse styles

Focused local verification was performed with:

  • pnpm exec eslint src/renderer/src/pages/home/Messages/Blocks/ToolBlockGroup.tsx src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/index.tsx src/renderer/src/pages/home/Messages/Tools/MessageMcpTool.tsx src/renderer/src/pages/home/Messages/Tools/ToolPermissionRequestCard.tsx src/renderer/src/pages/home/Messages/Tools/__tests__/ToolCallThemeRadius.test.tsx
  • pnpm typecheck:web
  • pnpm test:renderer -- src/renderer/src/pages/home/Messages/Tools/__tests__/ToolCallThemeRadius.test.tsx
  • pnpm test:renderer -- src/renderer/src/pages/home/Messages/Tools/__tests__/MessageAgentTools.test.tsx
  • pnpm test:renderer -- src/renderer/src/pages/home/Messages/Blocks/__tests__/ThinkingBlock.test.tsx
  • pnpm test:renderer -- src/renderer/src/pages/home/Messages/Tools/hooks/__tests__/useMcpToolApproval.test.ts
  • pnpm test:renderer -- src/renderer/src/pages/home/Messages/Tools/__tests__/ClickableFilePath.test.tsx

Manual verification was also performed with the default theme and a Cherry CSS custom theme, including:

  • collapsed and expanded generic tool cards
  • grouped tool-call cards
  • MCP tool cards
  • permission request cards

The attached images use the 雁灰 (Yan-hui) custom theme from Cherry CSS as a reproducible example of the issue.

Before:
ScreenShot_2026-05-03_085130_599
ScreenShot_2026-05-03_085157_161

After:
ScreenShot_2026-05-04_153311_337
ScreenShot_2026-05-04_153345_036

Checklist

  • PR: The PR description is expressive enough and will help future contributors
  • Code: Write code that humans can understand and keep it simple
  • Refactor: I have left the code cleaner than I found it
  • Upgrade: Impact of this change on upgrade flows was considered and not required
  • Documentation: A user-guide update was considered and is not required
  • Self-review: I have reviewed my own code before requesting review from others

Release note

Fixed a UI bug where some custom themes could render tool-call cards with mismatched inner and outer rounded corners, and fixed an extra divider line in the MCP response-only expanded view.

Signed-off-by: sjsjysfj <gc160514190803@163.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant