import type { EnvironmentId, ProviderInteractionMode, ServerProvider } from "@t3tools/contracts";import { detectComposerTrigger, replaceTextRange, serializeComposerFileLink,} from "@t3tools/shared/composerTrigger";import { insertRankedSearchResult, normalizeSearchQuery, scoreQueryMatch,} from "@t3tools/shared/searchRanking";import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { ComposerEditorSelection } from "../../components/ComposerEditor";import { useComposerPathSearch } from "../../state/use-composer-path-search";import type { ComposerCommandItem } from "./ComposerCommandPopover";import { matchesSlashSkillQuery } from "./composerSlashSkillSearch"; export function composerSelectionAtEnd(draftMessage: string): ComposerEditorSelection { return { start: draftMessage.length, end: draftMessage.length };} /** Shared autocomplete for thread composers and unsent new-task drafts. */export function useComposerCommandMenu({ draftMessage, ownerKey, environmentId, projectCwd, selectedProviderStatus, hasThread, enabled = true, onChangeDraftMessage, onUpdateInteractionMode,}: { readonly draftMessage: string; readonly ownerKey: string | null; readonly environmentId: EnvironmentId | null; readonly projectCwd: string | null; readonly selectedProviderStatus: ServerProvider | null; readonly hasThread: boolean; readonly enabled?: boolean; readonly onChangeDraftMessage: (value: string) => void; readonly onUpdateInteractionMode?: (mode: ProviderInteractionMode) => void;}) { const [selection, setSelection] = useState(() => composerSelectionAtEnd(draftMessage)); const previousOwnerKeyRef = useRef(ownerKey); const onSelectionChange = useCallback((nextSelection: ComposerEditorSelection) => { setSelection(nextSelection); }, []); useEffect(() => { const end = draftMessage.length; setSelection((current) => { const start = Math.min(current.start, end); const selectionEnd = Math.min(current.end, end); if (start === current.start && selectionEnd === current.end) { return current; } return { start, end: selectionEnd }; }); }, [draftMessage.length]); useEffect(() => { if (previousOwnerKeyRef.current === ownerKey) return; previousOwnerKeyRef.current = ownerKey; setSelection(composerSelectionAtEnd(draftMessage)); }, [draftMessage, ownerKey]); const trigger = useMemo(() => { if (!enabled || selection.start !== selection.end) { return null; } return detectComposerTrigger(draftMessage, selection.end); }, [draftMessage, enabled, selection]); const pathSearch = useComposerPathSearch({ environmentId, cwd: trigger?.kind === "path" ? projectCwd : null, query: trigger?.kind === "path" ? trigger.query : null, }); const items = useMemo<ComposerCommandItem[]>(() => { if (!trigger) return []; if (trigger.kind === "slash-command") { const q = trigger.query.toLowerCase(); const allBuiltIn = [ { id: "cmd:model", type: "slash-command" as const, command: "model", label: "/model", description: "Switch model", }, { id: "cmd:plan", type: "slash-command" as const, command: "plan", label: "/plan", description: "Switch to plan mode", }, { id: "cmd:default", type: "slash-command" as const, command: "default", label: "/default", description: "Switch to default mode", }, ]; const builtIn = allBuiltIn.filter( (item) => item.command.includes(q) && (item.command === "model" || onUpdateInteractionMode !== undefined), ); const providerCommands: ComposerCommandItem[] = []; for (const command of selectedProviderStatus?.slashCommands ?? []) { if (!command.name.toLowerCase().includes(q)) continue; // Codex feedback uploads an existing thread's session and logs. if ( !hasThread && selectedProviderStatus?.driver === "codex" && command.name === "feedback" ) { continue; } providerCommands.push({ id: `pcmd:${command.name}`, type: "provider-slash-command", command, label: `/${command.name}`, description: command.description ?? "", }); } const skillItems = (selectedProviderStatus?.skills ?? []) .filter((skill) => matchesSlashSkillQuery(skill, q)) .map((skill) => ({ id: `skill:${skill.name}`, type: "skill" as const, skill, label: `skill:${skill.name}`, description: skill.shortDescription ?? skill.description ?? "", })); return [...builtIn, ...providerCommands, ...skillItems]; } if (trigger.kind === "skill") { const enabledSkills = (selectedProviderStatus?.skills ?? []).filter((skill) => skill.enabled); const normalizedQuery = normalizeSearchQuery(trigger.query, { trimLeadingPattern: /^\$+/, }); if (!normalizedQuery) { return enabledSkills.slice(0, 20).map((skill) => ({ id: `skill:${skill.name}`, type: "skill" as const, skill, label: skill.displayName ?? skill.name, description: skill.shortDescription ?? skill.description ?? "", })); } const ranked: Array<{ item: (typeof enabledSkills)[number]; score: number; tieBreaker: string; }> = []; for (const skill of enabledSkills) { const displayLabel = (skill.displayName ?? skill.name).toLowerCase(); const scores = [ scoreQueryMatch({ value: skill.name.toLowerCase(), query: normalizedQuery, exactBase: 0, prefixBase: 2, boundaryBase: 4, includesBase: 6, fuzzyBase: 100, boundaryMarkers: ["-", "_", "/"], }), scoreQueryMatch({ value: displayLabel, query: normalizedQuery, exactBase: 1, prefixBase: 3, boundaryBase: 5, includesBase: 7, fuzzyBase: 110, }), scoreQueryMatch({ value: skill.shortDescription?.toLowerCase() ?? "", query: normalizedQuery, exactBase: 20, prefixBase: 22, boundaryBase: 24, includesBase: 26, }), scoreQueryMatch({ value: skill.description?.toLowerCase() ?? "", query: normalizedQuery, exactBase: 30, prefixBase: 32, boundaryBase: 34, includesBase: 36, }), ].filter((score): score is number => score !== null); if (scores.length > 0) { insertRankedSearchResult( ranked, { item: skill, score: Math.min(...scores), tieBreaker: `${displayLabel}\u0000${skill.name}`, }, 20, ); } } return ranked.map(({ item: skill }) => ({ id: `skill:${skill.name}`, type: "skill" as const, skill, label: skill.displayName ?? skill.name, description: skill.shortDescription ?? skill.description ?? "", })); } if (trigger.kind === "path") { return pathSearch.entries.map((entry) => { const parts = entry.path.split("/"); return { id: `path:${entry.path}`, type: "path" as const, path: entry.path, kind: entry.kind, label: parts[parts.length - 1] ?? entry.path, description: parts.length > 1 ? parts.slice(0, -1).join("/") : "", }; }); } return []; }, [hasThread, onUpdateInteractionMode, pathSearch.entries, selectedProviderStatus, trigger]); const onSelect = useCallback( (item: ComposerCommandItem) => { if (!trigger) return; if ( item.type === "slash-command" && (item.command === "plan" || item.command === "default") ) { const result = replaceTextRange(draftMessage, trigger.rangeStart, trigger.rangeEnd, ""); setSelection({ start: result.cursor, end: result.cursor }); onChangeDraftMessage(result.text); onUpdateInteractionMode?.(item.command); return; } let replacement = ""; if (item.type === "path") { replacement = `${serializeComposerFileLink(item.path)} `; } else if (item.type === "skill") { replacement = `$${item.skill.name} `; } else if (item.type === "slash-command") { replacement = `/${item.command} `; } else if (item.type === "provider-slash-command") { replacement = `/${item.command.name} `; } const result = replaceTextRange( draftMessage, trigger.rangeStart, trigger.rangeEnd, replacement, ); setSelection({ start: result.cursor, end: result.cursor }); onChangeDraftMessage(result.text); }, [draftMessage, onChangeDraftMessage, onUpdateInteractionMode, trigger], ); return { selection, onSelectionChange, trigger, items, isLoading: pathSearch.isPending, onSelect, };}
import type { EnvironmentId, ProviderInteractionMode, ServerProvider } from "@t3tools/contracts";
import {
detectComposerTrigger,
replaceTextRange,
serializeComposerFileLink,
} from "@t3tools/shared/composerTrigger";
import {
insertRankedSearchResult,
normalizeSearchQuery,
scoreQueryMatch,
} from "@t3tools/shared/searchRanking";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { ComposerEditorSelection } from "../../components/ComposerEditor";
import { useComposerPathSearch } from "../../state/use-composer-path-search";
import type { ComposerCommandItem } from "./ComposerCommandPopover";
import { matchesSlashSkillQuery } from "./composerSlashSkillSearch";
export function composerSelectionAtEnd(draftMessage: string): ComposerEditorSelection {
return { start: draftMessage.length, end: draftMessage.length };
}
/** Shared autocomplete for thread composers and unsent new-task drafts. */
export function useComposerCommandMenu({
draftMessage,
ownerKey,
environmentId,
projectCwd,
selectedProviderStatus,
hasThread,
enabled = true,
onChangeDraftMessage,
onUpdateInteractionMode,
}: {
readonly draftMessage: string;
readonly ownerKey: string | null;
readonly environmentId: EnvironmentId | null;
readonly projectCwd: string | null;
readonly selectedProviderStatus: ServerProvider | null;
readonly hasThread: boolean;
readonly enabled?: boolean;
readonly onChangeDraftMessage: (value: string) => void;
readonly onUpdateInteractionMode?: (mode: ProviderInteractionMode) => void;
}) {
const [selection, setSelection] = useState(() => composerSelectionAtEnd(draftMessage));
const previousOwnerKeyRef = useRef(ownerKey);
const onSelectionChange = useCallback((nextSelection: ComposerEditorSelection) => {
setSelection(nextSelection);
}, []);
useEffect(() => {
const end = draftMessage.length;
setSelection((current) => {
const start = Math.min(current.start, end);
const selectionEnd = Math.min(current.end, end);
if (start === current.start && selectionEnd === current.end) {
return current;
}
return { start, end: selectionEnd };
});
}, [draftMessage.length]);
useEffect(() => {
if (previousOwnerKeyRef.current === ownerKey) return;
previousOwnerKeyRef.current = ownerKey;
setSelection(composerSelectionAtEnd(draftMessage));
}, [draftMessage, ownerKey]);
const trigger = useMemo(() => {
if (!enabled || selection.start !== selection.end) {
return null;
}
return detectComposerTrigger(draftMessage, selection.end);
}, [draftMessage, enabled, selection]);
const pathSearch = useComposerPathSearch({
environmentId,
cwd: trigger?.kind === "path" ? projectCwd : null,
query: trigger?.kind === "path" ? trigger.query : null,
});
const items = useMemo<ComposerCommandItem[]>(() => {
if (!trigger) return [];
if (trigger.kind === "slash-command") {
const q = trigger.query.toLowerCase();
const allBuiltIn = [
{
id: "cmd:model",
type: "slash-command" as const,
command: "model",
label: "/model",
description: "Switch model",
},
{
id: "cmd:plan",
type: "slash-command" as const,
command: "plan",
label: "/plan",
description: "Switch to plan mode",
},
{
id: "cmd:default",
type: "slash-command" as const,
command: "default",
label: "/default",
description: "Switch to default mode",
},
];
const builtIn = allBuiltIn.filter(
(item) =>
item.command.includes(q) &&
(item.command === "model" || onUpdateInteractionMode !== undefined),
);
const providerCommands: ComposerCommandItem[] = [];
for (const command of selectedProviderStatus?.slashCommands ?? []) {
if (!command.name.toLowerCase().includes(q)) continue;
// Codex feedback uploads an existing thread's session and logs.
if (
!hasThread &&
selectedProviderStatus?.driver === "codex" &&
command.name === "feedback"
) {
continue;
}
providerCommands.push({
id: `pcmd:${command.name}`,
type: "provider-slash-command",
command,
label: `/${command.name}`,
description: command.description ?? "",
});
}
const skillItems = (selectedProviderStatus?.skills ?? [])
.filter((skill) => matchesSlashSkillQuery(skill, q))
.map((skill) => ({
id: `skill:${skill.name}`,
type: "skill" as const,
skill,
label: `skill:${skill.name}`,
description: skill.shortDescription ?? skill.description ?? "",
}));
return [...builtIn, ...providerCommands, ...skillItems];
}
if (trigger.kind === "skill") {
const enabledSkills = (selectedProviderStatus?.skills ?? []).filter((skill) => skill.enabled);
const normalizedQuery = normalizeSearchQuery(trigger.query, {
trimLeadingPattern: /^\$+/,
});
if (!normalizedQuery) {
return enabledSkills.slice(0, 20).map((skill) => ({
id: `skill:${skill.name}`,
type: "skill" as const,
skill,
label: skill.displayName ?? skill.name,
description: skill.shortDescription ?? skill.description ?? "",
}));
}
const ranked: Array<{
item: (typeof enabledSkills)[number];
score: number;
tieBreaker: string;
}> = [];
for (const skill of enabledSkills) {
const displayLabel = (skill.displayName ?? skill.name).toLowerCase();
const scores = [
scoreQueryMatch({
value: skill.name.toLowerCase(),
query: normalizedQuery,
exactBase: 0,
prefixBase: 2,
boundaryBase: 4,
includesBase: 6,
fuzzyBase: 100,
boundaryMarkers: ["-", "_", "/"],
}),
scoreQueryMatch({
value: displayLabel,
query: normalizedQuery,
exactBase: 1,
prefixBase: 3,
boundaryBase: 5,
includesBase: 7,
fuzzyBase: 110,
}),
scoreQueryMatch({
value: skill.shortDescription?.toLowerCase() ?? "",
query: normalizedQuery,
exactBase: 20,
prefixBase: 22,
boundaryBase: 24,
includesBase: 26,
}),
scoreQueryMatch({
value: skill.description?.toLowerCase() ?? "",
query: normalizedQuery,
exactBase: 30,
prefixBase: 32,
boundaryBase: 34,
includesBase: 36,
}),
].filter((score): score is number => score !== null);
if (scores.length > 0) {
insertRankedSearchResult(
ranked,
{
item: skill,
score: Math.min(...scores),
tieBreaker: `${displayLabel}\u0000${skill.name}`,
},
20,
);
}
}
return ranked.map(({ item: skill }) => ({
id: `skill:${skill.name}`,
type: "skill" as const,
skill,
label: skill.displayName ?? skill.name,
description: skill.shortDescription ?? skill.description ?? "",
}));
}
if (trigger.kind === "path") {
return pathSearch.entries.map((entry) => {
const parts = entry.path.split("/");
return {
id: `path:${entry.path}`,
type: "path" as const,
path: entry.path,
kind: entry.kind,
label: parts[parts.length - 1] ?? entry.path,
description: parts.length > 1 ? parts.slice(0, -1).join("/") : "",
};
});
}
return [];
}, [hasThread, onUpdateInteractionMode, pathSearch.entries, selectedProviderStatus, trigger]);
const onSelect = useCallback(
(item: ComposerCommandItem) => {
if (!trigger) return;
if (
item.type === "slash-command" &&
(item.command === "plan" || item.command === "default")
) {
const result = replaceTextRange(draftMessage, trigger.rangeStart, trigger.rangeEnd, "");
setSelection({ start: result.cursor, end: result.cursor });
onChangeDraftMessage(result.text);
onUpdateInteractionMode?.(item.command);
return;
}
let replacement = "";
if (item.type === "path") {
replacement = `${serializeComposerFileLink(item.path)} `;
} else if (item.type === "skill") {
replacement = `$${item.skill.name} `;
} else if (item.type === "slash-command") {
replacement = `/${item.command} `;
} else if (item.type === "provider-slash-command") {
replacement = `/${item.command.name} `;
}
const result = replaceTextRange(
draftMessage,
trigger.rangeStart,
trigger.rangeEnd,
replacement,
);
setSelection({ start: result.cursor, end: result.cursor });
onChangeDraftMessage(result.text);
},
[draftMessage, onChangeDraftMessage, onUpdateInteractionMode, trigger],
);
return {
selection,
onSelectionChange,
trigger,
items,
isLoading: pathSearch.isPending,
onSelect,
};
}