) => void;
index: number;
- type?: 'prompt' | 'mention' | 'add-convo';
+ type?: 'prompt' | 'mention' | 'add-convo' | 'skill';
icon?: React.ReactNode;
isActive?: boolean;
description?: string;
diff --git a/client/src/components/Chat/Input/SkillsCommand.tsx b/client/src/components/Chat/Input/SkillsCommand.tsx
new file mode 100644
index 0000000000..1ed63fafaf
--- /dev/null
+++ b/client/src/components/Chat/Input/SkillsCommand.tsx
@@ -0,0 +1,331 @@
+import { memo, useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { ScrollText } from 'lucide-react';
+import { AutoSizer, List } from 'react-virtualized';
+import { Spinner, useCombobox } from '@librechat/client';
+import { InvocationMode } from 'librechat-data-provider';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import type { TSkillSummary } from 'librechat-data-provider';
+import type { MentionOption } from '~/common';
+import useInitPopoverInput from '~/hooks/Input/useInitPopoverInput';
+import { useSkillsInfiniteQuery } from '~/data-provider';
+import { ephemeralAgentByConvoId } from '~/store';
+import { removeCharIfLast } from '~/utils';
+import MentionItem from './MentionItem';
+import { useLocalize } from '~/hooks';
+import store from '~/store';
+
+const commandChar = '$';
+const ROW_HEIGHT = 44;
+const skillIcon =
;
+
+/**
+ * Determines whether a skill should appear in the `$` command popover.
+ * `manual` and `both` are user-invocable. `auto` is model-only and hidden.
+ * Skills without an explicit mode (undefined) default to visible for
+ * backward compatibility until the backend persists `invocationMode`.
+ */
+export function isUserInvocable(skill: TSkillSummary): boolean {
+ const mode = skill.invocationMode;
+ if (mode == null || mode === InvocationMode.both) {
+ return true;
+ }
+ return mode === InvocationMode.manual;
+}
+
+function SkillsCommandContent({
+ index,
+ textAreaRef,
+ conversationId,
+}: {
+ index: number;
+ textAreaRef: React.MutableRefObject
;
+ conversationId: string;
+}) {
+ const localize = useLocalize();
+ const setShowSkillsPopover = useSetRecoilState(store.showSkillsPopoverFamily(index));
+ const setEphemeralAgent = useSetRecoilState(ephemeralAgentByConvoId(conversationId));
+ const setPendingManualSkills = useSetRecoilState(
+ store.pendingManualSkillsByConvoId(conversationId),
+ );
+
+ const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
+ useSkillsInfiniteQuery({ limit: 50 });
+
+ /* Sticky circuit breaker: once any page request fails, stop auto-fetching
+ for the lifetime of the popover so a transient API error does not turn
+ into an unbounded retry loop (isError can flip back to false on the
+ next attempt, which would otherwise re-arm the auto-fetch effect). */
+ const paginationBlockedRef = useRef(false);
+ useEffect(() => {
+ if (isError) {
+ paginationBlockedRef.current = true;
+ }
+ }, [isError]);
+
+ /* Auto-fetch all pages so client-side search covers the full catalog,
+ not just the first page. The skills API is server-side capped. */
+ useEffect(() => {
+ if (paginationBlockedRef.current || isError) {
+ return;
+ }
+ if (hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ }
+ }, [hasNextPage, isFetchingNextPage, isError, fetchNextPage]);
+
+ const skillOptions: MentionOption[] = useMemo(() => {
+ if (!data?.pages) {
+ return [];
+ }
+ return data.pages.reduce((acc, page) => {
+ for (const skill of page.skills) {
+ if (isUserInvocable(skill)) {
+ acc.push({
+ label: skill.displayTitle ?? skill.name,
+ value: skill.name,
+ description: skill.description,
+ type: 'skill',
+ icon: skillIcon,
+ });
+ }
+ }
+ return acc;
+ }, []);
+ }, [data?.pages]);
+
+ const [activeIndex, setActiveIndex] = useState(0);
+ const timeoutRef = useRef(null);
+ const inputRef = useRef(null);
+
+ const { open, setOpen, searchValue, setSearchValue, matches } = useCombobox({
+ value: '',
+ options: skillOptions,
+ });
+
+ const initInputRef = useInitPopoverInput({
+ inputRef,
+ textAreaRef,
+ commandChar,
+ setSearchValue,
+ setOpen,
+ });
+
+ const handleSelect = useCallback(
+ (mention?: MentionOption) => {
+ if (!mention) {
+ return;
+ }
+
+ setSearchValue('');
+ setOpen(false);
+ setShowSkillsPopover(false);
+
+ if (textAreaRef.current) {
+ removeCharIfLast(textAreaRef.current, commandChar);
+ }
+
+ setEphemeralAgent((prev) => {
+ if (prev?.skills) {
+ return prev;
+ }
+ return { ...(prev || {}), skills: true };
+ });
+
+ /* Structured channel for manual skill invocations. The follow-up PR
+ will read this in the submit pipeline and prime the corresponding
+ SKILL.md as a meta user message before the LLM turn, mirroring
+ Claude Code's `/skill` deterministic injection. The textual
+ `$skill-name ` insertion below remains as user-visible confirmation
+ and is treated as cosmetic by that future pipeline. */
+ setPendingManualSkills((prev) =>
+ prev.includes(mention.value) ? prev : [...prev, mention.value],
+ );
+
+ const textarea = textAreaRef.current;
+ if (textarea) {
+ const insertion = `$${mention.value} `;
+ const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+ HTMLTextAreaElement.prototype,
+ 'value',
+ )?.set;
+ if (nativeInputValueSetter) {
+ nativeInputValueSetter.call(textarea, insertion);
+ textarea.dispatchEvent(new Event('input', { bubbles: true }));
+ }
+ textarea.focus();
+ textarea.setSelectionRange(insertion.length, insertion.length);
+ }
+ },
+ [
+ setSearchValue,
+ setOpen,
+ setShowSkillsPopover,
+ textAreaRef,
+ setEphemeralAgent,
+ setPendingManualSkills,
+ ],
+ );
+
+ useEffect(() => {
+ if (!open) {
+ setActiveIndex(0);
+ }
+ }, [open]);
+
+ useEffect(() => {
+ setActiveIndex((prev) => Math.min(prev, Math.max(matches.length - 1, 0)));
+ }, [matches.length]);
+
+ useEffect(() => {
+ return () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ const el = document.getElementById(`skill-item-${activeIndex}`);
+ el?.scrollIntoView({ behavior: 'instant', block: 'nearest' });
+ }, [activeIndex]);
+
+ const rowRenderer = ({
+ index,
+ key,
+ style,
+ }: {
+ index: number;
+ key: string;
+ style: React.CSSProperties;
+ }) => {
+ const mention = matches[index] as MentionOption;
+ return (
+ {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ timeoutRef.current = null;
+ handleSelect(mention);
+ }}
+ name={mention.label ?? ''}
+ icon={mention.icon}
+ description={mention.description}
+ isActive={index === activeIndex}
+ />
+ );
+ };
+
+ return (
+
+
+
{
+ if (e.key === 'Escape') {
+ setOpen(false);
+ setShowSkillsPopover(false);
+ textAreaRef.current?.focus();
+ return;
+ }
+ if (e.key === 'ArrowDown') {
+ if (matches.length === 0) {
+ return;
+ }
+ setActiveIndex((prevIndex) => (prevIndex + 1) % matches.length);
+ } else if (e.key === 'ArrowUp') {
+ if (matches.length === 0) {
+ return;
+ }
+ setActiveIndex((prevIndex) => (prevIndex - 1 + matches.length) % matches.length);
+ } else if (e.key === 'Enter' || e.key === 'Tab') {
+ if (matches.length === 0) {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ }
+ setOpen(false);
+ setShowSkillsPopover(false);
+ textAreaRef.current?.focus();
+ return;
+ }
+ e.preventDefault();
+ handleSelect(matches[activeIndex] as MentionOption | undefined);
+ } else if (e.key === 'Backspace' && searchValue === '') {
+ setOpen(false);
+ setShowSkillsPopover(false);
+ textAreaRef.current?.focus();
+ }
+ }}
+ onChange={(e) => setSearchValue(e.target.value)}
+ onFocus={() => setOpen(true)}
+ onBlur={() => {
+ timeoutRef.current = setTimeout(() => {
+ setOpen(false);
+ setShowSkillsPopover(false);
+ }, 150);
+ }}
+ />
+ {open && (isLoading || isFetchingNextPage) && matches.length === 0 && (
+
+
+
+ )}
+ {open && isError && (
+
+ {localize('com_ui_skills_load_error')}
+
+ )}
+ {open && !isLoading && !isFetchingNextPage && !isError && matches.length === 0 && (
+
+ {localize(searchValue ? 'com_ui_no_skills_found' : 'com_ui_skills_empty')}
+
+ )}
+ {open && matches.length > 0 && (
+
+
+ {({ width }) => (
+
+ )}
+
+
+ )}
+
+