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

fix(webui): prioritize skill names in autocomplete

Browse Source
This commit is contained in:
chengyongru
2026-07-21 15:19:38 +08:00
committed by chengyongru
parent 052f671b3c
commit 93571149db
2 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/thread/ThreadComposer.tsx
+24 -10
View File
@@ -286,6 +286,7 @@ interface SlashPaletteCommand {
title: string;
description: string;
icon: string;
kind?: "skill";
argHint?: string;
detail: string;
badge?: string;
@@ -1009,6 +1010,7 @@ export function ThreadComposer({
description,
detail: description,
icon: "brain",
kind: "skill" as const,
recent: recentSlashCommands.includes(command),
};
})
@@ -2582,6 +2584,7 @@ function SlashCommandPalette({
{commands.map((command, index) => {
const Icon = COMMAND_ICONS[command.icon] ?? CircleHelp;
const selected = index === selectedIndex;
const isSkill = command.kind === "skill";
const commandKey = slashCommandI18nKey(command.command);
const title = t(`thread.composer.slash.commands.${commandKey}.title`, {
defaultValue: command.title,
@@ -2617,23 +2620,34 @@ function SlashCommandPalette({
<Icon className="h-4 w-4" />
</span>
<span className="flex min-w-0 flex-1 flex-col gap-0.5 sm:flex-row sm:items-baseline sm:gap-2">
<span className="min-w-0 truncate text-[13.5px] font-semibold tracking-normal text-foreground">
<span
className={cn(
"text-[13.5px] font-semibold tracking-normal text-foreground",
isSkill
? "max-w-full shrink-0 break-all sm:max-w-[55%]"
: "min-w-0 truncate",
)}
>
{title}
</span>
<span className="min-w-0 truncate text-[13px] text-muted-foreground">
{command.detail || description}
</span>
</span>
<span className="ml-2 flex max-w-[42%] shrink-0 items-center gap-1.5 sm:max-w-none">
{command.badge || command.recent ? (
<span className="hidden rounded-full bg-foreground/[0.055] px-2 py-1 text-[11px] font-medium text-muted-foreground sm:inline-flex">
{command.badge ?? t("thread.composer.slash.badges.recent")}
</span>
) : null}
<span className="font-mono text-[12px] text-muted-foreground/60">
{command.argHint ? `${command.command} ${command.argHint}` : command.command}
{!isSkill || command.badge || command.recent ? (
<span className="ml-2 flex max-w-[42%] shrink-0 items-center gap-1.5 sm:max-w-none">
{command.badge || command.recent ? (
<span className="hidden rounded-full bg-foreground/[0.055] px-2 py-1 text-[11px] font-medium text-muted-foreground sm:inline-flex">
{command.badge ?? t("thread.composer.slash.badges.recent")}
</span>
) : null}
{!isSkill ? (
<span className="font-mono text-[12px] text-muted-foreground/60">
{command.argHint ? `${command.command} ${command.argHint}` : command.command}
</span>
) : null}
</span>
</span>
) : null}
</button>
);
})}
webui/src/tests/thread-composer.test.tsx
+10 -6
View File
@@ -1146,14 +1146,15 @@ describe("ThreadComposer", () => {
});
});
it("opens skills only from a $ reference anywhere", () => {
it("opens skills only from a $ reference and prioritizes the skill name", () => {
const skillName = "arxiv-intelligence-filter";
render(
<ThreadComposer
onSend={vi.fn()}
placeholder="Type your message..."
skills={[{
name: "github",
description: "Work with pull requests and issues",
name: skillName,
description: "Fetch and summarize the latest AI research papers every day",
source: "builtin",
available: true,
}]}
@@ -1165,15 +1166,18 @@ describe("ThreadComposer", () => {
fireEvent.change(input, { target: { value: "/git", selectionStart: 4 } });
expect(screen.queryByRole("listbox", { name: "Slash commands" })).not.toBeInTheDocument();
fireEvent.change(input, { target: { value: "please use $git", selectionStart: 15 } });
fireEvent.change(input, { target: { value: "please use $arxiv", selectionStart: 17 } });
const palette = screen.getByRole("listbox", { name: "Slash commands" });
expect(within(palette).getByRole("option", { name: /github/i })).toHaveTextContent("$github");
const option = within(palette).getByRole("option", { name: new RegExp(skillName, "i") });
const name = within(option).getByText(skillName);
expect(name).not.toHaveClass("truncate");
expect(within(option).queryByText(`$${skillName}`)).not.toBeInTheDocument();
expect(within(palette).queryByText("/model")).not.toBeInTheDocument();
fireEvent.keyDown(input, { key: "Tab" });
expect(input).toHaveValue("please use $github ");
expect(input).toHaveValue(`please use $${skillName} `);
});
it("shows right-side source badges so users can distinguish CLI apps from MCP servers", () => {