Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): decouple skill reference rendering

Browse Source
This commit is contained in:
chengyongru
2026-07-21 22:56:04 +08:00
committed by chengyongru
parent 79b89f4f4c
commit b32d673ead
7 changed files with 68 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/MessageBubble.tsx
-5
View File
@@ -37,7 +37,6 @@ import type {
CliAppInfo,
McpPresetInfo,
SlashCommand,
SkillSummary,
UICliAppAttachment,
UIMcpPresetAttachment,
UIImage,
@@ -52,7 +51,6 @@ interface MessageBubbleProps {
cliApps?: CliAppInfo[];
mcpPresets?: McpPresetInfo[];
slashCommands?: SlashCommand[];
skills?: SkillSummary[];
onOpenFilePreview?: (path: string) => void;
onForkFromHere?: () => void;
}
@@ -145,7 +143,6 @@ export function MessageBubble({
cliApps = [],
mcpPresets = [],
slashCommands = [],
skills = [],
onOpenFilePreview,
onForkFromHere,
}: MessageBubbleProps) {
@@ -176,7 +173,6 @@ export function MessageBubble({
<SlashCommandText command={slashCommand.command} />
<UserMessageText
text={message.content.slice(slashCommand.command.length)}
skills={skills}
cliApps={mentionCliApps}
mcpPresets={mentionMcpPresets}
/>
@@ -184,7 +180,6 @@ export function MessageBubble({
) : (
<UserMessageText
text={message.content}
skills={skills}
cliApps={mentionCliApps}
mcpPresets={mentionMcpPresets}
/>
webui/src/components/UserMessageText.tsx
+54 -36
View File
@@ -1,45 +1,40 @@
import { CliAppMentionText } from "@/components/CliAppMentionText";
import { Fragment } from "react";
import {
CliAppMentionToken,
McpPresetMentionToken,
splitCapabilityMentionSegments,
type CapabilityMentionSegment,
} from "@/components/CliAppMentionText";
import {
INLINE_TOKEN_HIGHLIGHT_COLOR,
InlineTokenHighlight,
} from "@/components/InlineTokenHighlight";
import type { CliAppInfo, McpPresetInfo, SkillSummary } from "@/lib/types";
import type { CliAppInfo, McpPresetInfo } from "@/lib/types";
type SkillReferenceSegment =
| { kind: "text"; text: string }
| { kind: "skill"; text: string; skill: SkillSummary };
| { kind: "skill"; text: string; name: string };
function splitSkillReferenceSegments(
value: string,
skills: SkillSummary[],
): SkillReferenceSegment[] {
if (!value || skills.length === 0) {
return value ? [{ kind: "text", text: value }] : [];
}
const skillsByName = new Map(
skills
.filter((skill) => skill.available)
.map((skill) => [skill.name.toLowerCase(), skill]),
);
if (skillsByName.size === 0) return [{ kind: "text", text: value }];
type UserMessageSegment =
| CapabilityMentionSegment
| { kind: "skill"; text: string; name: string };
function splitSkillReferenceSegments(value: string): SkillReferenceSegment[] {
if (!value) return [];
const segments: SkillReferenceSegment[] = [];
const referenceRe = /\$([A-Za-z0-9_-]+)/g;
let cursor = 0;
let match: RegExpExecArray | null;
while ((match = referenceRe.exec(value)) !== null) {
const name = match[1] ?? "";
const skill = skillsByName.get(name.toLowerCase());
if (!skill) continue;
if (match.index > cursor) {
segments.push({ kind: "text", text: value.slice(cursor, match.index) });
}
segments.push({
kind: "skill",
text: value.slice(match.index, referenceRe.lastIndex),
skill,
name,
});
cursor = referenceRe.lastIndex;
}
@@ -49,42 +44,65 @@ function splitSkillReferenceSegments(
return segments.length ? segments : [{ kind: "text", text: value }];
}
function splitUserMessageSegments(
value: string,
cliApps: CliAppInfo[],
mcpPresets: McpPresetInfo[],
): UserMessageSegment[] {
const segments: UserMessageSegment[] = [];
for (const segment of splitCapabilityMentionSegments(value, cliApps, mcpPresets)) {
if (segment.kind === "text") {
segments.push(...splitSkillReferenceSegments(segment.text));
} else {
segments.push(segment);
}
}
return segments;
}
export function UserMessageText({
text,
skills,
cliApps,
mcpPresets,
}: {
text: string;
skills: SkillSummary[];
cliApps: CliAppInfo[];
mcpPresets: McpPresetInfo[];
}) {
const segments = splitSkillReferenceSegments(text, skills);
const segments = splitUserMessageSegments(text, cliApps, mcpPresets);
return (
<>
{segments.map((segment, index) => {
if (segment.kind === "text") {
return (
<CliAppMentionText
key={`text-${index}`}
text={segment.text}
cliApps={cliApps}
mcpPresets={mcpPresets}
/>
);
return <Fragment key={`text-${index}`}>{segment.text}</Fragment>;
}
return (
if (segment.kind === "skill") return (
<InlineTokenHighlight
key={`skill-${segment.skill.name}-${index}`}
testId={`message-skill-reference-${segment.skill.name}`}
title={`Skill: ${segment.skill.name}`}
key={`skill-${segment.name}-${index}`}
testId={`message-skill-reference-${segment.name.toLowerCase()}`}
title={`Skill: ${segment.name}`}
color={INLINE_TOKEN_HIGHLIGHT_COLOR}
className="font-medium"
>
{segment.text}
</InlineTokenHighlight>
);
if (segment.kind === "cli") return (
<CliAppMentionToken
key={`cli-${segment.app.name}-${index}`}
app={segment.app}
label={segment.text}
variant="message"
/>
);
return (
<McpPresetMentionToken
key={`mcp-${segment.preset.name}-${index}`}
preset={segment.preset}
label={segment.text}
variant="message"
/>
);
})}
</>
);
webui/src/components/thread/ThreadMessages.tsx
+1 -10
View File
@@ -3,13 +3,7 @@ import { useTranslation } from "react-i18next";
import { MessageBubble } from "@/components/MessageBubble";
import { AgentActivityCluster } from "@/components/thread/AgentActivityCluster";
import { normalizeActivityTimeline, type TurnUnit } from "@/lib/activity-timeline";
import type {
CliAppInfo,
McpPresetInfo,
SlashCommand,
SkillSummary,
UIMessage,
} from "@/lib/types";
import type { CliAppInfo, McpPresetInfo, SlashCommand, UIMessage } from "@/lib/types";
interface ThreadMessagesProps {
messages: UIMessage[];
@@ -19,7 +13,6 @@ interface ThreadMessagesProps {
cliApps?: CliAppInfo[];
mcpPresets?: McpPresetInfo[];
slashCommands?: SlashCommand[];
skills?: SkillSummary[];
forkBoundaryMessageCount?: number | null;
onOpenFilePreview?: (path: string) => void;
onForkFromMessage?: (beforeUserIndex: number) => void;
@@ -60,7 +53,6 @@ export function ThreadMessages({
cliApps = [],
mcpPresets = [],
slashCommands = [],
skills = [],
forkBoundaryMessageCount = null,
onOpenFilePreview,
onForkFromMessage,
@@ -123,7 +115,6 @@ export function ThreadMessages({
cliApps={cliApps}
mcpPresets={mcpPresets}
slashCommands={slashCommands}
skills={skills}
onOpenFilePreview={onOpenFilePreview}
onForkFromHere={
onForkFromMessage && forkIndex !== undefined
webui/src/components/thread/ThreadShell.tsx
-1
View File
@@ -897,7 +897,6 @@ export function ThreadShell({
cliApps={cliApps}
mcpPresets={mcpPresets}
slashCommands={slashCommands}
skills={skills}
forkBoundaryMessageCount={forkBoundaryMessageCount}
hasMoreBefore={hasMoreBefore}
loadingOlder={loadingOlder}
webui/src/components/thread/ThreadViewport.tsx
+1 -10
View File
@@ -22,13 +22,7 @@ import {
promptTop,
} from "@/components/thread/promptNavigation";
import { cn } from "@/lib/utils";
import type {
CliAppInfo,
McpPresetInfo,
SlashCommand,
SkillSummary,
UIMessage,
} from "@/lib/types";
import type { CliAppInfo, McpPresetInfo, SlashCommand, UIMessage } from "@/lib/types";
export interface ThreadViewportHandle {
jumpToUserPrompt: (promptId: string) => void;
@@ -47,7 +41,6 @@ interface ThreadViewportProps {
cliApps?: CliAppInfo[];
mcpPresets?: McpPresetInfo[];
slashCommands?: SlashCommand[];
skills?: SkillSummary[];
forkBoundaryMessageCount?: number | null;
hasMoreBefore?: boolean;
loadingOlder?: boolean;
@@ -120,7 +113,6 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
cliApps = [],
mcpPresets = [],
slashCommands = [],
skills = [],
forkBoundaryMessageCount = null,
hasMoreBefore = false,
loadingOlder = false,
@@ -537,7 +529,6 @@ export const ThreadViewport = forwardRef<ThreadViewportHandle, ThreadViewportPro
cliApps={cliApps}
mcpPresets={mcpPresets}
slashCommands={slashCommands}
skills={skills}
forkBoundaryMessageCount={visibleForkBoundaryMessageCount}
onOpenFilePreview={onOpenFilePreview}
onForkFromMessage={onForkFromMessage}
webui/src/tests/message-bubble.test.tsx
+11 -25
View File
@@ -6,7 +6,6 @@ import type {
CliAppInfo,
McpPresetInfo,
SlashCommand,
SkillSummary,
UIMessage,
} from "@/lib/types";
@@ -94,21 +93,6 @@ const SLASH_COMMANDS: SlashCommand[] = [
},
];
const SKILLS: SkillSummary[] = [
{
name: "github",
description: "Work with pull requests and issues",
source: "builtin",
available: true,
},
{
name: "blocked-skill",
description: "Needs an unavailable dependency",
source: "workspace",
available: false,
},
];
describe("MessageBubble", () => {
it("renders user messages as right-aligned pills", () => {
const message: UIMessage = {
@@ -225,7 +209,7 @@ describe("MessageBubble", () => {
expect(screen.getByTestId("message-cli-mention-zoom")).toHaveTextContent("@zoom");
});
it("highlights available skill references while preserving other message tokens", () => {
it("highlights skill references without a live skill catalog", () => {
const message: UIMessage = {
id: "u-skill-reference",
role: "user",
@@ -236,7 +220,6 @@ describe("MessageBubble", () => {
render(
<MessageBubble
message={message}
skills={SKILLS}
cliApps={CLI_APPS}
/>,
);
@@ -254,20 +237,23 @@ describe("MessageBubble", () => {
expect(skill.parentElement).toHaveTextContent("Ask $github to review this with @zoom");
});
it("keeps unknown and unavailable skill references as plain message text", () => {
it("highlights well-formed skill references and leaves a bare marker plain", () => {
const message: UIMessage = {
id: "u-plain-skill-reference",
role: "user",
content: "Try $unknown or $blocked-skill",
content: "Try $unknown or $blocked-skill and $",
createdAt: Date.now(),
};
render(<MessageBubble message={message} skills={SKILLS} />);
render(<MessageBubble message={message} />);
expect(screen.queryByTestId("message-skill-reference-unknown")).not.toBeInTheDocument();
expect(screen.queryByTestId("message-skill-reference-blocked-skill"))
.not.toBeInTheDocument();
expect(screen.getByText("Try $unknown or $blocked-skill")).toBeInTheDocument();
expect(screen.getByTestId("message-skill-reference-unknown")).toHaveTextContent("$unknown");
expect(screen.getByTestId("message-skill-reference-blocked-skill"))
.toHaveTextContent("$blocked-skill");
const references = screen.getAllByTestId(/^message-skill-reference-/);
expect(references).toHaveLength(2);
expect(references[0].parentElement)
.toHaveTextContent("Try $unknown or $blocked-skill and $");
});
it("renders fork control in completed assistant action rows", () => {
webui/src/tests/thread-shell.test.tsx
+1 -7
View File
@@ -484,7 +484,7 @@ describe("ThreadShell", () => {
expect(screen.getByText("persist me across tabs")).toBeInTheDocument();
});
it("passes skill metadata to sent user messages", async () => {
it("highlights sent skill references without skill metadata", async () => {
const client = makeClient();
render(wrap(
client,
@@ -492,12 +492,6 @@ describe("ThreadShell", () => {
session={session("skill-reference")}
title="Skill reference"
onToggleSidebar={() => {}}
skills={[{
name: "github",
description: "Work with pull requests and issues",
source: "builtin",
available: true,
}]}
/>,
));