import { useState, useEffect, useCallback, useMemo, useRef } from "react"; import { useTranslation } from "react-i18next"; import { Sparkles, User, Zap } from "lucide-react"; import { IconFile, IconFolder } from "@tabler/icons-react"; import { cn } from "@/shared/lib/cn"; import { useAvatarSrc } from "@/shared/hooks/useAvatarSrc"; import { PopoverContent } from "@/shared/ui/popover"; import type { Persona } from "@/shared/types/agents"; import type { FileMentionItem, MentionItem, SkillMentionItem, } from "./mentionDetection"; export { fuzzyMatch, useMentionDetection } from "./mentionDetection"; export type { FileMentionItem, MentionItem, SkillMentionItem, } from "./mentionDetection"; interface MentionAutocompleteProps { /** Pre-filtered personas from the hook. */ filteredPersonas: Persona[]; /** Pre-filtered skills from the hook. */ filteredSkills?: SkillMentionItem[]; /** Pre-filtered files from the hook. */ filteredFiles?: FileMentionItem[]; isOpen: boolean; onSelectPersona: (persona: Persona) => void; onSelectSkill?: (skill: SkillMentionItem) => void; onSelectFile?: (file: FileMentionItem) => void; onClose?: (() => void) | undefined; selectedIndex?: number; } export function MentionAutocomplete({ filteredPersonas, filteredSkills = [], filteredFiles = [], isOpen, onSelectPersona, onSelectSkill, onSelectFile, selectedIndex: controlledIndex, }: MentionAutocompleteProps) { const { t } = useTranslation("chat"); const [internalIndex, setInternalIndex] = useState(0); const selectedIndex = controlledIndex ?? internalIndex; const itemRefs = useRef>(new Map()); // Scroll the active item into view when selectedIndex changes useEffect(() => { const el = itemRefs.current.get(selectedIndex); if (el) { el.scrollIntoView({ block: "nearest" }); } }, [selectedIndex]); const items: MentionItem[] = useMemo(() => { const result: MentionItem[] = filteredPersonas.map((p) => ({ type: "persona" as const, persona: p, })); for (const skill of filteredSkills) { result.push({ type: "skill" as const, skill }); } for (const f of filteredFiles) { result.push({ type: "file" as const, file: f }); } return result; }, [filteredPersonas, filteredSkills, filteredFiles]); const handleSelect = useCallback( (item: MentionItem) => { if (item.type === "persona") { onSelectPersona(item.persona); } else if (item.type === "skill") { onSelectSkill?.(item.skill); } else { onSelectFile?.(item.file); } }, [onSelectPersona, onSelectSkill, onSelectFile], ); if (!isOpen || items.length === 0) return null; return ( e.preventDefault()} onCloseAutoFocus={(e) => e.preventDefault()} onEscapeKeyDown={(e) => e.preventDefault()} onInteractOutside={(e) => e.preventDefault()} role="listbox" aria-label={t("mention.ariaLabel")} >

{filteredPersonas.length > 0 && (

{t("mention.title")}

)} {filteredPersonas.map((persona, index) => ( ))} {filteredSkills.length > 0 && (

{t("mention.skillsTitle")}

)} {filteredSkills.map((skill, i) => { const globalIndex = filteredPersonas.length + i; return ( ); })} {filteredFiles.length > 0 && (

{t("mention.filesTitle")}

)} {filteredFiles.map((file, i) => { const globalIndex = filteredPersonas.length + filteredSkills.length + i; return ( ); })}

); } // --------------------------------------------------------------------------- // Avatar helper // --------------------------------------------------------------------------- function MentionAvatar({ persona }: { persona: Persona }) { const avatarSrc = useAvatarSrc(persona.avatar); if (avatarSrc) { return ( {persona.displayName}

); } return (

{persona.isBuiltin ? ( ) : ( )}

); }