mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-05-28 23:15:33 +08:00
Surface provider skills in the slash command menu (#759)
* feat(providers): surface skills in slash command menu Provider skills were hidden behind provider-specific filesystem rules. That made the backend and UI unable to offer one discovery path for skills. Add a normalized skills contract, provider service, and provider skills API. Keep provider-specific lookup rules inside adapters so routes and UI stay generic. Claude needs plugin handling because enabled plugins resolve through installed_plugins.json. Plugin folders can expose commands or skills, so Claude scans both forms. Claude plugin commands are namespaced to avoid collisions with user and project skills. Codex, Gemini, and Cursor adapters map their expected skill roots into the same contract. The slash menu now shows skills beside built-in and custom commands for discovery. The menu avoids mid-message activation, duplicate rows, loose namespace matches, and input overlap. Provider tests cover discovery locations and Claude plugin edge cases. * fix(providers): guard invalid skill command namespaces Claude plugin ids come from local settings and installed plugin metadata. Invalid ids such as empty strings or @ should not become command namespaces. Skip plugin folders when no safe plugin name can be derived. This prevents malformed slash commands like /:command from reaching the UI. Add regression coverage for empty and @ plugin ids. Keyboard selection in the slash menu should match mouse selection. Only skills are inserted into the composer because they are provider invocations. Built-in and custom commands execute directly and close the menu on success or failure. * fix(security): centralize safe frontmatter parsing Move frontmatter parsing into server/shared/frontmatter.ts so every backend caller uses the same gray-matter configuration instead of importing gray-matter directly. The goal is to keep executable JS and JSON frontmatter engines disabled for all markdown discovered from the filesystem, not only command routes. Provider skills and shared skill metadata now go through parseFrontMatter too. That closes the gap where plugin or provider markdown could regain default gray-matter behavior simply because it lived outside the original command path. Classify the new parser in backend boundaries so modules can depend on the safe shared API without reaching into legacy utility paths. * feat(providers): add comprehensive guide for provider module setup and usage
This commit is contained in:
Haile
@@ -152,6 +152,7 @@ export function useChatComposerState({
|
||||
((event: FormEvent<HTMLFormElement> | MouseEvent | TouchEvent | KeyboardEvent<HTMLTextAreaElement>) => Promise<void>) | null
|
||||
>(null);
|
||||
const inputValueRef = useRef(input);
|
||||
const selectedProjectId = selectedProject?.projectId;
|
||||
|
||||
const handleBuiltInCommand = useCallback(
|
||||
(result: CommandExecutionResult) => {
|
||||
@@ -361,6 +362,7 @@ export function useChatComposerState({
|
||||
handleCommandMenuKeyDown,
|
||||
} = useSlashCommands({
|
||||
selectedProject,
|
||||
provider,
|
||||
input,
|
||||
setInput,
|
||||
textareaRef,
|
||||
@@ -470,14 +472,14 @@ export function useChatComposerState({
|
||||
return;
|
||||
}
|
||||
|
||||
// Intercept slash commands: if input starts with /commandName, execute as command with args
|
||||
const trimmedInput = currentInput.trim();
|
||||
if (trimmedInput.startsWith('/')) {
|
||||
const firstSpace = trimmedInput.indexOf(' ');
|
||||
const commandName = firstSpace > 0 ? trimmedInput.slice(0, firstSpace) : trimmedInput;
|
||||
// Intercept slash commands only when "/" is the first input character.
|
||||
const commandInput = currentInput.trimEnd();
|
||||
if (commandInput.startsWith('/')) {
|
||||
const firstSpace = commandInput.indexOf(' ');
|
||||
const commandName = firstSpace > 0 ? commandInput.slice(0, firstSpace) : commandInput;
|
||||
const matchedCommand = slashCommands.find((cmd: SlashCommand) => cmd.name === commandName);
|
||||
if (matchedCommand) {
|
||||
executeCommand(matchedCommand, trimmedInput);
|
||||
if (matchedCommand && matchedCommand.type !== 'skill') {
|
||||
executeCommand(matchedCommand, commandInput);
|
||||
setInput('');
|
||||
inputValueRef.current = '';
|
||||
setAttachedImages([]);
|
||||
@@ -713,27 +715,27 @@ export function useChatComposerState({
|
||||
}, [input]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedProject) {
|
||||
if (!selectedProjectId) {
|
||||
return;
|
||||
}
|
||||
const savedInput = safeLocalStorage.getItem(`draft_input_${selectedProject.projectId}`) || '';
|
||||
const savedInput = safeLocalStorage.getItem(`draft_input_${selectedProjectId}`) || '';
|
||||
setInput((previous) => {
|
||||
const next = previous === savedInput ? previous : savedInput;
|
||||
inputValueRef.current = next;
|
||||
return next;
|
||||
});
|
||||
}, [selectedProject?.projectId]);
|
||||
}, [selectedProjectId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedProject) {
|
||||
if (!selectedProjectId) {
|
||||
return;
|
||||
}
|
||||
if (input !== '') {
|
||||
safeLocalStorage.setItem(`draft_input_${selectedProject.projectId}`, input);
|
||||
safeLocalStorage.setItem(`draft_input_${selectedProjectId}`, input);
|
||||
} else {
|
||||
safeLocalStorage.removeItem(`draft_input_${selectedProject.projectId}`);
|
||||
safeLocalStorage.removeItem(`draft_input_${selectedProjectId}`);
|
||||
}
|
||||
}, [input, selectedProject]);
|
||||
}, [input, selectedProjectId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!textareaRef.current) {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import type { Dispatch, KeyboardEvent, RefObject, SetStateAction } from 'react';
|
||||
import Fuse from 'fuse.js';
|
||||
|
||||
import { authenticatedFetch } from '../../../utils/api';
|
||||
import { safeLocalStorage } from '../utils/chatStorage';
|
||||
import type { Project } from '../../../types/app';
|
||||
import type { LLMProvider, Project } from '../../../types/app';
|
||||
|
||||
const COMMAND_QUERY_DEBOUNCE_MS = 150;
|
||||
|
||||
@@ -12,19 +12,37 @@ export interface SlashCommand {
|
||||
description?: string;
|
||||
namespace?: string;
|
||||
path?: string;
|
||||
type?: string;
|
||||
type?: 'built-in' | 'custom' | 'skill' | string;
|
||||
metadata?: Record<string, unknown>;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
interface UseSlashCommandsOptions {
|
||||
selectedProject: Project | null;
|
||||
provider: LLMProvider;
|
||||
input: string;
|
||||
setInput: Dispatch<SetStateAction<string>>;
|
||||
textareaRef: RefObject<HTMLTextAreaElement>;
|
||||
onExecuteCommand: (command: SlashCommand, rawInput?: string) => void | Promise<void>;
|
||||
}
|
||||
|
||||
type ProviderSkill = {
|
||||
name: string;
|
||||
description?: string;
|
||||
command: string;
|
||||
scope: string;
|
||||
sourcePath?: string;
|
||||
pluginName?: string;
|
||||
pluginId?: string;
|
||||
};
|
||||
|
||||
type ProviderSkillsResponse = {
|
||||
success?: boolean;
|
||||
data?: {
|
||||
skills?: ProviderSkill[];
|
||||
};
|
||||
};
|
||||
|
||||
const getCommandHistoryKey = (projectName: string) => `command_history_${projectName}`;
|
||||
|
||||
const readCommandHistory = (projectName: string): Record<string, number> => {
|
||||
@@ -48,8 +66,78 @@ const saveCommandHistory = (projectName: string, history: Record<string, number>
|
||||
const isPromiseLike = (value: unknown): value is Promise<unknown> =>
|
||||
Boolean(value) && typeof (value as Promise<unknown>).then === 'function';
|
||||
|
||||
const isSkillCommand = (command: SlashCommand) =>
|
||||
command.type === 'skill' || command.metadata?.type === 'skill';
|
||||
|
||||
const dedupeProviderSkills = (skills: ProviderSkill[]): ProviderSkill[] => {
|
||||
const seenCommands = new Set<string>();
|
||||
|
||||
return skills.filter((skill) => {
|
||||
// Multiple physical Claude plugin folders can expose the same invocation.
|
||||
// The slash menu should show each executable command only once.
|
||||
const key = skill.command;
|
||||
if (seenCommands.has(key)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
seenCommands.add(key);
|
||||
return true;
|
||||
});
|
||||
};
|
||||
|
||||
const mapSkillToSlashCommand = (skill: ProviderSkill): SlashCommand => ({
|
||||
name: skill.command,
|
||||
description: skill.description,
|
||||
namespace: 'skill',
|
||||
path: skill.sourcePath,
|
||||
type: 'skill',
|
||||
metadata: {
|
||||
type: skill.scope,
|
||||
scope: skill.scope,
|
||||
sourcePath: skill.sourcePath,
|
||||
pluginName: skill.pluginName,
|
||||
pluginId: skill.pluginId,
|
||||
skillName: skill.name,
|
||||
},
|
||||
});
|
||||
|
||||
const filterSlashCommands = (
|
||||
commands: SlashCommand[],
|
||||
query: string,
|
||||
): SlashCommand[] => {
|
||||
const normalizedQuery = query.trim().toLowerCase();
|
||||
if (!normalizedQuery) {
|
||||
return commands;
|
||||
}
|
||||
|
||||
const commandPrefix = normalizedQuery.startsWith('/')
|
||||
? normalizedQuery
|
||||
: `/${normalizedQuery}`;
|
||||
const namePrefixMatches = commands.filter((command) =>
|
||||
command.name.toLowerCase().startsWith(commandPrefix),
|
||||
);
|
||||
|
||||
// Namespaced commands should behave like path completion. Once a provider
|
||||
// namespace is typed, only exact command-prefix matches should stay visible.
|
||||
if (normalizedQuery.includes(':') || namePrefixMatches.length > 0) {
|
||||
return namePrefixMatches;
|
||||
}
|
||||
|
||||
const nameSubstringMatches = commands.filter((command) =>
|
||||
command.name.toLowerCase().includes(normalizedQuery),
|
||||
);
|
||||
if (nameSubstringMatches.length > 0) {
|
||||
return nameSubstringMatches;
|
||||
}
|
||||
|
||||
return commands.filter((command) =>
|
||||
command.description?.toLowerCase().includes(normalizedQuery),
|
||||
);
|
||||
};
|
||||
|
||||
export function useSlashCommands({
|
||||
selectedProject,
|
||||
provider,
|
||||
input,
|
||||
setInput,
|
||||
textareaRef,
|
||||
@@ -80,6 +168,8 @@ export function useSlashCommands({
|
||||
}, [clearCommandQueryTimer]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const fetchCommands = async () => {
|
||||
if (!selectedProject) {
|
||||
setSlashCommands([]);
|
||||
@@ -88,13 +178,14 @@ export function useSlashCommands({
|
||||
}
|
||||
|
||||
try {
|
||||
const workspacePath = selectedProject.fullPath || selectedProject.path || '';
|
||||
const response = await authenticatedFetch('/api/commands/list', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
projectPath: selectedProject.path,
|
||||
projectPath: workspacePath || selectedProject.path,
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -103,11 +194,25 @@ export function useSlashCommands({
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const skillsParams = new URLSearchParams();
|
||||
if (workspacePath) {
|
||||
skillsParams.set('workspacePath', workspacePath);
|
||||
}
|
||||
|
||||
const skillsResponse = await authenticatedFetch(
|
||||
`/api/providers/${encodeURIComponent(provider)}/skills${skillsParams.toString() ? `?${skillsParams.toString()}` : ''}`,
|
||||
);
|
||||
const skillsData = skillsResponse.ok
|
||||
? ((await skillsResponse.json()) as ProviderSkillsResponse)
|
||||
: null;
|
||||
const skillCommands = dedupeProviderSkills(skillsData?.data?.skills || [])
|
||||
.map(mapSkillToSlashCommand);
|
||||
const allCommands: SlashCommand[] = [
|
||||
...((data.builtIn || []) as SlashCommand[]).map((command) => ({
|
||||
...command,
|
||||
type: 'built-in',
|
||||
})),
|
||||
...skillCommands,
|
||||
...((data.custom || []) as SlashCommand[]).map((command) => ({
|
||||
...command,
|
||||
type: 'custom',
|
||||
@@ -121,15 +226,22 @@ export function useSlashCommands({
|
||||
return commandBUsage - commandAUsage;
|
||||
});
|
||||
|
||||
setSlashCommands(sortedCommands);
|
||||
if (!cancelled) {
|
||||
setSlashCommands(sortedCommands);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching slash commands:', error);
|
||||
setSlashCommands([]);
|
||||
if (!cancelled) {
|
||||
setSlashCommands([]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fetchCommands();
|
||||
}, [selectedProject]);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [selectedProject, provider]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showCommandMenu) {
|
||||
@@ -137,36 +249,9 @@ export function useSlashCommands({
|
||||
}
|
||||
}, [showCommandMenu]);
|
||||
|
||||
const fuse = useMemo(() => {
|
||||
if (!slashCommands.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return new Fuse(slashCommands, {
|
||||
keys: [
|
||||
{ name: 'name', weight: 2 },
|
||||
{ name: 'description', weight: 1 },
|
||||
],
|
||||
threshold: 0.4,
|
||||
includeScore: true,
|
||||
minMatchCharLength: 1,
|
||||
});
|
||||
}, [slashCommands]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!commandQuery) {
|
||||
setFilteredCommands(slashCommands);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!fuse) {
|
||||
setFilteredCommands([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const results = fuse.search(commandQuery);
|
||||
setFilteredCommands(results.map((result) => result.item));
|
||||
}, [commandQuery, slashCommands, fuse]);
|
||||
setFilteredCommands(filterSlashCommands(slashCommands, commandQuery));
|
||||
}, [commandQuery, slashCommands]);
|
||||
|
||||
const frequentCommands = useMemo(() => {
|
||||
if (!selectedProject || slashCommands.length === 0) {
|
||||
@@ -198,25 +283,63 @@ export function useSlashCommands({
|
||||
[selectedProject],
|
||||
);
|
||||
|
||||
const selectCommandFromKeyboard = useCallback(
|
||||
const insertCommandIntoInput = useCallback(
|
||||
(command: SlashCommand) => {
|
||||
const textBeforeSlash = input.slice(0, slashPosition);
|
||||
const textAfterSlash = input.slice(slashPosition);
|
||||
const spaceIndex = textAfterSlash.indexOf(' ');
|
||||
const textAfterQuery = spaceIndex !== -1 ? textAfterSlash.slice(spaceIndex) : '';
|
||||
const newInput = `${textBeforeSlash}${command.name} ${textAfterQuery}`;
|
||||
const currentTextarea = textareaRef.current;
|
||||
const insertionStart = slashPosition >= 0
|
||||
? slashPosition
|
||||
: currentTextarea?.selectionStart ?? input.length;
|
||||
const textBeforeCommand = input.slice(0, insertionStart);
|
||||
const textAfterCommandStart = input.slice(insertionStart);
|
||||
const spaceIndex = textAfterCommandStart.indexOf(' ');
|
||||
const textAfterCommand = slashPosition >= 0 && spaceIndex !== -1
|
||||
? textAfterCommandStart.slice(spaceIndex).trimStart()
|
||||
: input.slice(currentTextarea?.selectionEnd ?? insertionStart);
|
||||
const separator = textBeforeCommand && !/\s$/.test(textBeforeCommand) ? ' ' : '';
|
||||
const newInput = `${textBeforeCommand}${separator}${command.name}${textAfterCommand ? ` ${textAfterCommand}` : ' '}`;
|
||||
|
||||
setInput(newInput);
|
||||
resetCommandMenuState();
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
currentTextarea?.focus();
|
||||
const nextCursorPosition = `${textBeforeCommand}${separator}${command.name} `.length;
|
||||
currentTextarea?.setSelectionRange(nextCursorPosition, nextCursorPosition);
|
||||
});
|
||||
},
|
||||
[input, resetCommandMenuState, setInput, slashPosition, textareaRef],
|
||||
);
|
||||
|
||||
const executeNonSkillCommand = useCallback(
|
||||
(command: SlashCommand) => {
|
||||
const executionResult = onExecuteCommand(command);
|
||||
if (isPromiseLike(executionResult)) {
|
||||
executionResult.catch(() => {
|
||||
// Keep behavior silent; execution errors are handled by caller.
|
||||
});
|
||||
executionResult.then(
|
||||
() => {
|
||||
resetCommandMenuState();
|
||||
},
|
||||
() => {
|
||||
resetCommandMenuState();
|
||||
// Keep behavior silent; execution errors are handled by caller.
|
||||
},
|
||||
);
|
||||
} else {
|
||||
resetCommandMenuState();
|
||||
}
|
||||
},
|
||||
[input, slashPosition, setInput, resetCommandMenuState, onExecuteCommand],
|
||||
[onExecuteCommand, resetCommandMenuState],
|
||||
);
|
||||
|
||||
const selectCommandFromKeyboard = useCallback(
|
||||
(command: SlashCommand) => {
|
||||
if (isSkillCommand(command)) {
|
||||
insertCommandIntoInput(command);
|
||||
return;
|
||||
}
|
||||
|
||||
executeNonSkillCommand(command);
|
||||
},
|
||||
[executeNonSkillCommand, insertCommandIntoInput],
|
||||
);
|
||||
|
||||
const handleCommandSelect = useCallback(
|
||||
@@ -231,20 +354,14 @@ export function useSlashCommands({
|
||||
}
|
||||
|
||||
trackCommandUsage(command);
|
||||
const executionResult = onExecuteCommand(command);
|
||||
|
||||
if (isPromiseLike(executionResult)) {
|
||||
executionResult.then(() => {
|
||||
resetCommandMenuState();
|
||||
});
|
||||
executionResult.catch(() => {
|
||||
// Keep behavior silent; execution errors are handled by caller.
|
||||
});
|
||||
} else {
|
||||
resetCommandMenuState();
|
||||
if (isSkillCommand(command)) {
|
||||
insertCommandIntoInput(command);
|
||||
return;
|
||||
}
|
||||
|
||||
executeNonSkillCommand(command);
|
||||
},
|
||||
[selectedProject, trackCommandUsage, onExecuteCommand, resetCommandMenuState],
|
||||
[selectedProject, trackCommandUsage, insertCommandIntoInput, executeNonSkillCommand],
|
||||
);
|
||||
|
||||
const handleToggleCommandMenu = useCallback(() => {
|
||||
@@ -276,7 +393,7 @@ export function useSlashCommands({
|
||||
return;
|
||||
}
|
||||
|
||||
const slashPattern = /(^|\s)\/(\S*)$/;
|
||||
const slashPattern = /^\/(\S*)$/;
|
||||
const match = textBeforeCursor.match(slashPattern);
|
||||
|
||||
if (!match) {
|
||||
@@ -284,8 +401,8 @@ export function useSlashCommands({
|
||||
return;
|
||||
}
|
||||
|
||||
const slashPos = (match.index || 0) + match[1].length;
|
||||
const query = match[2];
|
||||
const slashPos = 0;
|
||||
const query = match[1];
|
||||
|
||||
setSlashPosition(slashPos);
|
||||
setShowCommandMenu(true);
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import type { CSSProperties } from 'react';
|
||||
import {
|
||||
CornerDownLeft,
|
||||
Folder,
|
||||
MessageSquare,
|
||||
Sparkles,
|
||||
Star,
|
||||
Terminal,
|
||||
User,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
|
||||
type CommandMenuCommand = {
|
||||
name: string;
|
||||
@@ -21,59 +31,92 @@ type CommandMenuProps = {
|
||||
frequentCommands?: CommandMenuCommand[];
|
||||
};
|
||||
|
||||
type CommandMenuRow = {
|
||||
command: CommandMenuCommand;
|
||||
commandIndex: number;
|
||||
renderKey: string;
|
||||
};
|
||||
|
||||
const menuBaseStyle: CSSProperties = {
|
||||
maxHeight: '300px',
|
||||
maxHeight: '360px',
|
||||
overflowY: 'auto',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
boxShadow: '0 24px 60px rgba(2, 6, 23, 0.38), 0 0 0 1px rgba(148, 163, 184, 0.12)',
|
||||
zIndex: 1000,
|
||||
padding: '8px',
|
||||
padding: '6px',
|
||||
transition: 'opacity 150ms ease-in-out, transform 150ms ease-in-out',
|
||||
backdropFilter: 'blur(12px)',
|
||||
};
|
||||
|
||||
const namespaceLabels: Record<string, string> = {
|
||||
frequent: 'Frequently Used',
|
||||
builtin: 'Built-in Commands',
|
||||
skill: 'Skills',
|
||||
project: 'Project Commands',
|
||||
user: 'User Commands',
|
||||
other: 'Other Commands',
|
||||
};
|
||||
|
||||
const namespaceIcons: Record<string, string> = {
|
||||
frequent: '[*]',
|
||||
builtin: '[B]',
|
||||
project: '[P]',
|
||||
user: '[U]',
|
||||
other: '[O]',
|
||||
const namespaceIcons: Record<string, LucideIcon> = {
|
||||
frequent: Star,
|
||||
builtin: Terminal,
|
||||
skill: Sparkles,
|
||||
project: Folder,
|
||||
user: User,
|
||||
other: MessageSquare,
|
||||
};
|
||||
|
||||
const namespaceAccentClasses: Record<string, string> = {
|
||||
frequent: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-400/20 dark:bg-amber-400/10 dark:text-amber-200',
|
||||
builtin: 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-400/20 dark:bg-sky-400/10 dark:text-sky-200',
|
||||
skill: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-400/20 dark:bg-emerald-400/10 dark:text-emerald-200',
|
||||
project: 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-400/20 dark:bg-indigo-400/10 dark:text-indigo-200',
|
||||
user: 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-400/20 dark:bg-rose-400/10 dark:text-rose-200',
|
||||
other: 'border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-500/20 dark:bg-gray-500/10 dark:text-gray-200',
|
||||
};
|
||||
|
||||
const MENU_EDGE_GAP = 16;
|
||||
const MENU_MAX_HEIGHT = 360;
|
||||
|
||||
const getCommandKey = (command: CommandMenuCommand) =>
|
||||
`${command.name}::${command.namespace || command.type || 'other'}::${command.path || ''}`;
|
||||
|
||||
const getNamespace = (command: CommandMenuCommand) => command.namespace || command.type || 'other';
|
||||
|
||||
const getNamespaceIcon = (namespace: string) => namespaceIcons[namespace] || namespaceIcons.other;
|
||||
|
||||
const getNamespaceAccentClass = (namespace: string) =>
|
||||
namespaceAccentClasses[namespace] || namespaceAccentClasses.other;
|
||||
|
||||
const getMenuPosition = (position: { top: number; left: number; bottom?: number }): CSSProperties => {
|
||||
if (typeof window === 'undefined') {
|
||||
return { position: 'fixed', top: '16px', left: '16px' };
|
||||
}
|
||||
if (window.innerWidth < 640) {
|
||||
const anchorBottom = Math.max(MENU_EDGE_GAP, position.bottom ?? 90);
|
||||
return {
|
||||
position: 'fixed',
|
||||
bottom: `${position.bottom ?? 90}px`,
|
||||
bottom: `${anchorBottom}px`,
|
||||
left: '16px',
|
||||
right: '16px',
|
||||
width: 'auto',
|
||||
maxWidth: 'calc(100vw - 32px)',
|
||||
maxHeight: 'min(50vh, 300px)',
|
||||
maxHeight: `min(54vh, calc(100vh - ${anchorBottom}px - ${MENU_EDGE_GAP}px))`,
|
||||
};
|
||||
}
|
||||
const anchorBottom = Math.max(MENU_EDGE_GAP, position.bottom ?? 90);
|
||||
const clampedLeft = Math.max(
|
||||
MENU_EDGE_GAP,
|
||||
Math.min(position.left, window.innerWidth - 440 - MENU_EDGE_GAP),
|
||||
);
|
||||
|
||||
return {
|
||||
position: 'fixed',
|
||||
top: `${Math.max(16, Math.min(position.top, window.innerHeight - 316))}px`,
|
||||
left: `${position.left}px`,
|
||||
width: 'min(400px, calc(100vw - 32px))',
|
||||
bottom: `${anchorBottom}px`,
|
||||
left: `${clampedLeft}px`,
|
||||
width: 'min(440px, calc(100vw - 32px))',
|
||||
maxWidth: 'calc(100vw - 32px)',
|
||||
maxHeight: '300px',
|
||||
maxHeight: `min(${MENU_MAX_HEIGHT}px, calc(100vh - ${anchorBottom}px - ${MENU_EDGE_GAP}px))`,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -123,7 +166,24 @@ export default function CommandMenu({
|
||||
|
||||
const hasFrequentCommands = frequentCommands.length > 0;
|
||||
const frequentCommandKeys = new Set(frequentCommands.map(getCommandKey));
|
||||
const groupedCommands = commands.reduce<Record<string, CommandMenuCommand[]>>((groups, command) => {
|
||||
const commandIndexesByKey = new Map<string, number[]>();
|
||||
commands.forEach((command, index) => {
|
||||
const key = getCommandKey(command);
|
||||
const commandIndexes = commandIndexesByKey.get(key) ?? [];
|
||||
commandIndexes.push(index);
|
||||
commandIndexesByKey.set(key, commandIndexes);
|
||||
});
|
||||
const frequentCommandOccurrences = new Map<string, number>();
|
||||
const getFrequentCommandIndex = (command: CommandMenuCommand): number => {
|
||||
const key = getCommandKey(command);
|
||||
const occurrence = frequentCommandOccurrences.get(key) ?? 0;
|
||||
frequentCommandOccurrences.set(key, occurrence + 1);
|
||||
|
||||
const commandIndexes = commandIndexesByKey.get(key) ?? [];
|
||||
return commandIndexes[occurrence] ?? commandIndexes[0] ?? -1;
|
||||
};
|
||||
|
||||
const groupedCommands = commands.reduce<Record<string, CommandMenuRow[]>>((groups, command, index) => {
|
||||
if (hasFrequentCommands && frequentCommandKeys.has(getCommandKey(command))) {
|
||||
return groups;
|
||||
}
|
||||
@@ -131,33 +191,46 @@ export default function CommandMenu({
|
||||
if (!groups[namespace]) {
|
||||
groups[namespace] = [];
|
||||
}
|
||||
groups[namespace].push(command);
|
||||
groups[namespace].push({
|
||||
command,
|
||||
commandIndex: index,
|
||||
renderKey: `${namespace}-${index}-${getCommandKey(command)}`,
|
||||
});
|
||||
return groups;
|
||||
}, {});
|
||||
if (hasFrequentCommands) {
|
||||
groupedCommands.frequent = frequentCommands;
|
||||
groupedCommands.frequent = frequentCommands
|
||||
.map((command, index) => {
|
||||
const commandIndex = getFrequentCommandIndex(command);
|
||||
return {
|
||||
command,
|
||||
commandIndex,
|
||||
renderKey: `frequent-${index}-${commandIndex}-${getCommandKey(command)}`,
|
||||
};
|
||||
})
|
||||
.filter((row) => row.commandIndex >= 0);
|
||||
}
|
||||
|
||||
const preferredOrder = hasFrequentCommands
|
||||
? ['frequent', 'builtin', 'project', 'user', 'other']
|
||||
: ['builtin', 'project', 'user', 'other'];
|
||||
? ['frequent', 'builtin', 'skill', 'project', 'user', 'other']
|
||||
: ['builtin', 'skill', 'project', 'user', 'other'];
|
||||
const extraNamespaces = Object.keys(groupedCommands).filter((namespace) => !preferredOrder.includes(namespace));
|
||||
const orderedNamespaces = [...preferredOrder, ...extraNamespaces].filter((namespace) => groupedCommands[namespace]);
|
||||
|
||||
const commandIndexByKey = new Map<string, number>();
|
||||
commands.forEach((command, index) => {
|
||||
const key = getCommandKey(command);
|
||||
if (!commandIndexByKey.has(key)) {
|
||||
commandIndexByKey.set(key, index);
|
||||
}
|
||||
});
|
||||
|
||||
if (commands.length === 0) {
|
||||
return (
|
||||
<div
|
||||
ref={menuRef}
|
||||
className="command-menu command-menu-empty border border-gray-200 bg-white text-gray-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400"
|
||||
style={{ ...menuPosition, ...menuBaseStyle, overflowY: 'hidden', padding: '20px', opacity: 1, transform: 'translateY(0)', textAlign: 'center' }}
|
||||
className="command-menu command-menu-empty border border-gray-200 bg-white/95 text-sm text-gray-500 dark:border-gray-700/80 dark:bg-gray-900/95 dark:text-gray-400"
|
||||
style={{
|
||||
...menuBaseStyle,
|
||||
...menuPosition,
|
||||
overflowY: 'hidden',
|
||||
padding: '20px',
|
||||
opacity: 1,
|
||||
transform: 'translateY(0)',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
No commands available
|
||||
</div>
|
||||
@@ -169,51 +242,73 @@ export default function CommandMenu({
|
||||
ref={menuRef}
|
||||
role="listbox"
|
||||
aria-label="Available commands"
|
||||
className="command-menu border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
|
||||
style={{ ...menuPosition, ...menuBaseStyle, opacity: 1, transform: 'translateY(0)' }}
|
||||
className="command-menu border border-gray-200/90 bg-white/95 text-gray-900 dark:border-slate-700/80 dark:bg-slate-950/95 dark:text-slate-100"
|
||||
style={{ ...menuBaseStyle, ...menuPosition, opacity: 1, transform: 'translateY(0)' }}
|
||||
>
|
||||
{orderedNamespaces.map((namespace) => (
|
||||
<div key={namespace} className="command-group">
|
||||
{orderedNamespaces.length > 1 && (
|
||||
<div className="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
{namespaceLabels[namespace] || namespace}
|
||||
<div className="flex items-center justify-between px-2 pb-1.5 pt-2 text-[10px] font-semibold uppercase tracking-wide text-gray-500 dark:text-slate-400">
|
||||
<span>{namespaceLabels[namespace] || namespace}</span>
|
||||
<span className="rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 text-[10px] text-gray-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
|
||||
{(groupedCommands[namespace] || []).length}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(groupedCommands[namespace] || []).map((command) => {
|
||||
const commandKey = getCommandKey(command);
|
||||
const commandIndex = commandIndexByKey.get(commandKey) ?? -1;
|
||||
{(groupedCommands[namespace] || []).map(({ command, commandIndex, renderKey }) => {
|
||||
const isSelected = commandIndex === selectedIndex;
|
||||
const NamespaceIcon = getNamespaceIcon(namespace);
|
||||
const accentClass = getNamespaceAccentClass(namespace);
|
||||
return (
|
||||
<div
|
||||
key={`${namespace}-${command.name}-${command.path || ''}`}
|
||||
key={renderKey}
|
||||
ref={isSelected ? selectedItemRef : null}
|
||||
role="option"
|
||||
aria-selected={isSelected}
|
||||
className={`command-item mb-0.5 flex cursor-pointer items-start rounded-md px-3 py-2.5 transition-colors ${
|
||||
isSelected ? 'bg-blue-50 dark:bg-blue-900' : 'bg-transparent'
|
||||
className={`command-item group relative mb-1 flex cursor-pointer items-start gap-2 rounded-md border px-2.5 py-2 transition-all ${
|
||||
isSelected
|
||||
? 'border-sky-200 bg-sky-50 shadow-sm dark:border-cyan-400/30 dark:bg-cyan-400/10'
|
||||
: 'border-transparent bg-transparent hover:border-gray-200 hover:bg-gray-50/90 dark:hover:border-slate-700 dark:hover:bg-slate-900/80'
|
||||
}`}
|
||||
onMouseEnter={() => onSelect && commandIndex >= 0 && onSelect(command, commandIndex, true)}
|
||||
onClick={() => onSelect && commandIndex >= 0 && onSelect(command, commandIndex, false)}
|
||||
onMouseDown={(event) => event.preventDefault()}
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className={`flex items-center gap-2 ${command.description ? 'mb-1' : 'mb-0'}`}>
|
||||
<span className="shrink-0 text-xs text-gray-500 dark:text-gray-300">{namespaceIcons[namespace] || namespaceIcons.other}</span>
|
||||
<span className="font-mono text-sm font-semibold text-gray-900 dark:text-gray-100">{command.name}</span>
|
||||
{isSelected && (
|
||||
<span className="absolute bottom-1.5 left-1.5 top-1.5 w-0.5 rounded-full bg-sky-500 dark:bg-cyan-300" />
|
||||
)}
|
||||
<span className={`mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${accentClass}`}>
|
||||
<NamespaceIcon aria-hidden="true" size={14} strokeWidth={2.2} />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1 pr-1">
|
||||
<div className={`flex min-w-0 items-center gap-2 ${command.description ? 'mb-1' : 'mb-0'}`}>
|
||||
<span
|
||||
className="min-w-0 truncate font-mono text-[13px] font-semibold text-gray-950 dark:text-slate-50"
|
||||
title={command.name}
|
||||
>
|
||||
{command.name}
|
||||
</span>
|
||||
{command.metadata?.type && (
|
||||
<span className="command-metadata-badge rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-300">
|
||||
<span className="command-metadata-badge shrink-0 rounded border border-gray-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-gray-500 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300">
|
||||
{command.metadata.type}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{command.description && (
|
||||
<div className="ml-6 truncate whitespace-nowrap text-[13px] text-gray-500 dark:text-gray-300">
|
||||
<div
|
||||
className="truncate whitespace-nowrap text-[12px] leading-4 text-gray-500 dark:text-slate-400"
|
||||
title={command.description}
|
||||
>
|
||||
{command.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isSelected && <span className="ml-2 text-xs font-semibold text-blue-500 dark:text-blue-300">{'<-'}</span>}
|
||||
{isSelected && (
|
||||
<span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded border border-sky-200 bg-white text-sky-600 shadow-sm dark:border-cyan-400/30 dark:bg-slate-950 dark:text-cyan-200">
|
||||
<CornerDownLeft aria-hidden="true" size={13} strokeWidth={2.2} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user