- {popoverMode === 'file' ? 'Files' : 'Commands'}
+ {popoverMode && filteredItems.length > 0 && (() => {
+ const builtInItems = filteredItems.filter(item => item.builtIn);
+ const skillItems = filteredItems.filter(item => !item.builtIn);
+ let globalIdx = 0;
+
+ const renderItem = (item: PopoverItem, idx: number) => (
+
+ );
+
+ return (
+
+ {popoverMode === 'skill' ? (
+
+ {
+ const val = e.target.value;
+ setPopoverFilter(val);
+ setSelectedIndex(0);
+ // Sync textarea: replace the filter portion after /
+ if (triggerPos !== null) {
+ const before = inputValue.slice(0, triggerPos + 1);
+ setInputValue(before + val);
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'ArrowDown') {
+ e.preventDefault();
+ setSelectedIndex((prev) => (prev + 1) % filteredItems.length);
+ } else if (e.key === 'ArrowUp') {
+ e.preventDefault();
+ setSelectedIndex((prev) => (prev - 1 + filteredItems.length) % filteredItems.length);
+ } else if (e.key === 'Enter' || e.key === 'Tab') {
+ e.preventDefault();
+ if (filteredItems[selectedIndex]) {
+ insertItem(filteredItems[selectedIndex]);
+ }
+ } else if (e.key === 'Escape') {
+ e.preventDefault();
+ closePopover();
+ textareaRef.current?.focus();
+ }
+ }}
+ className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none"
+ autoFocus
+ />
+
+ ) : (
+
+ Files
+
+ )}
+
+ {popoverMode === 'file' ? (
+ filteredItems.map((item, i) => renderItem(item, i))
+ ) : (
+ <>
+ {builtInItems.length > 0 && (
+ <>
+
+ Commands
+
+ {builtInItems.map((item) => {
+ const idx = globalIdx++;
+ return renderItem(item, idx);
+ })}
+
+ )}
+ {skillItems.length > 0 && (
+ <>
+
+ Skills
+
+ {skillItems.map((item) => {
+ const idx = globalIdx++;
+ return renderItem(item, idx);
+ })}
+
+ )}
+
+ )}
+
-
- {filteredItems.map((item, i) => (
-
- ))}
-
-
- )}
+ );
+ })()}
{/* PromptInput replaces the old input area */}