fix(webui): align composer mention metrics

This commit is contained in:
Xubin Ren 2026-08-06 17:48:28 +08:00
parent 9af6bb91c7
commit 1d290614c9
2 changed files with 11 additions and 2 deletions

View File

@ -182,6 +182,7 @@ export function SessionMentionToken({
testId={`${testIdPrefix}-session-mention-${mention.name}`} testId={`${testIdPrefix}-session-mention-${mention.name}`}
title={`Session: ${mention.title || mention.name}`} title={`Session: ${mention.title || mention.name}`}
color={INLINE_TOKEN_HIGHLIGHT_COLOR} color={INLINE_TOKEN_HIGHLIGHT_COLOR}
className={variant === "composer" ? "font-normal" : undefined}
> >
{label} {label}
</InlineTokenHighlight> </InlineTokenHighlight>
@ -222,6 +223,7 @@ export function CliAppMentionToken({
testId={`${testIdPrefix}-cli-mention-${app.name}`} testId={`${testIdPrefix}-cli-mention-${app.name}`}
title={t("thread.composer.mentions.cliTitle", { name: app.display_name || app.name })} title={t("thread.composer.mentions.cliTitle", { name: app.display_name || app.name })}
color={color} color={color}
className={variant === "composer" ? "font-normal" : undefined}
> >
<span <span
className={cn("relative inline-block", showLogo && "text-transparent")} className={cn("relative inline-block", showLogo && "text-transparent")}
@ -278,6 +280,7 @@ export function McpPresetMentionToken({
testId={`${testIdPrefix}-mcp-mention-${preset.name}`} testId={`${testIdPrefix}-mcp-mention-${preset.name}`}
title={t("thread.composer.mentions.mcpTitle", { name: preset.display_name || preset.name })} title={t("thread.composer.mentions.mcpTitle", { name: preset.display_name || preset.name })}
color={color} color={color}
className={variant === "composer" ? "font-normal" : undefined}
> >
<span <span
className={cn("relative inline-block", showLogo && "text-transparent")} className={cn("relative inline-block", showLogo && "text-transparent")}

View File

@ -1534,7 +1534,10 @@ describe("ThreadComposer", () => {
fireEvent.keyDown(input, { key: "Tab" }); fireEvent.keyDown(input, { key: "Tab" });
expect(input).toHaveValue("use @browserbase "); expect(input).toHaveValue("use @browserbase ");
expect(screen.getByTestId("composer-mcp-mention-browserbase")).toHaveTextContent("@browserbase"); const mention = screen.getByTestId("composer-mcp-mention-browserbase");
expect(mention).toHaveTextContent("@browserbase");
expect(mention).toHaveClass("font-normal");
expect(mention).not.toHaveClass("font-[550]");
fireEvent.click(screen.getByRole("button", { name: "Send message" })); fireEvent.click(screen.getByRole("button", { name: "Send message" }));
@ -1581,6 +1584,8 @@ describe("ThreadComposer", () => {
expect(input).toHaveValue("参考 @收费设计 "); expect(input).toHaveValue("参考 @收费设计 ");
const mention = screen.getByTestId("composer-session-mention-收费设计"); const mention = screen.getByTestId("composer-session-mention-收费设计");
expect(mention).toHaveTextContent("@收费设计"); expect(mention).toHaveTextContent("@收费设计");
expect(mention).toHaveClass("font-normal");
expect(mention).not.toHaveClass("font-[550]");
expect(mention.closest("a")).toBeNull(); expect(mention.closest("a")).toBeNull();
fireEvent.click(screen.getByRole("button", { name: "Send message" })); fireEvent.click(screen.getByRole("button", { name: "Send message" }));
@ -1966,7 +1971,8 @@ describe("ThreadComposer", () => {
expect(input).toHaveValue("meeting in @gimp"); expect(input).toHaveValue("meeting in @gimp");
const token = screen.getByTestId("composer-cli-mention-gimp"); const token = screen.getByTestId("composer-cli-mention-gimp");
expect(token).toHaveTextContent("@gimp"); expect(token).toHaveTextContent("@gimp");
expect(token).toHaveClass("font-[550]"); expect(token).toHaveClass("font-normal");
expect(token).not.toHaveClass("font-[550]");
expect(token.className).not.toContain("zoom-in"); expect(token.className).not.toContain("zoom-in");
expect(token.className).not.toContain("px-"); expect(token.className).not.toContain("px-");
expect(token.className).not.toContain("mx-"); expect(token.className).not.toContain("mx-");