fix(chat): rank @ mention files and directories together by match quality

Directories and files were rendered as fixed category blocks, so an exact file match sat below unrelated directories. Merge both result sets and rank them with the shared fuzzy scorer against the full relative path. Multi-word queries now match tokens in any order (longest token queries the server, the rest filter client-side), and path truncation keeps the parent segments next to the file name so index.md-heavy trees stay distinguishable.
2026-08-24 14:30:00 +03:00
parent 279fa8b691
commit 0918bee566
4 changed files with 153 additions and 85 deletions
@@ -14,6 +14,7 @@ import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
 import { useI18n } from '@/lib/i18n';
 import { useUIStore } from '@/stores/useUIStore';
 import { useMobileAutocompleteMaxHeight } from './useMobileAutocompleteMaxHeight';
+import { mentionServerQuery, rankFileMentionResults } from './fileMentionResults';
 import { AutocompleteRowTooltip } from './composer/ui/AutocompleteRowTooltip';

 type FileInfo = ProjectFileSearchHit;
@@ -124,9 +125,11 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
    () => normalizedSearchQuery.length > 0 ? agents : agents.slice(0, 2),
    [agents, normalizedSearchQuery.length],
  );
-  const visibleDirectories = directories;
  const visibleRecentFiles = recentFiles;
-  const visibleFiles = files;
+  const visibleResults = React.useMemo(
+    () => rankFileMentionResults(files, directories, normalizedSearchQuery, 20),
+    [files, directories, normalizedSearchQuery],
+  );

  React.useEffect(() => {
    const handlePointerDown = (event: MouseEvent | TouchEvent) => {
@@ -152,13 +155,9 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
      return;
    }

-    const normalizedQuery = (debouncedQuery ?? '').trim();
-    const normalizedQueryLower = normalizedQuery
-      .replace(/^\.\//, '')
-      .replace(/^\/+/, '')
-      .toLowerCase();
+    const serverQuery = mentionServerQuery(debouncedQuery ?? '');

-    if (!normalizedQueryLower) {
+    if (!serverQuery) {
      setFiles([]);
      return;
    }
@@ -167,7 +166,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
    pendingSearchRef.current++;
    setLoading(true);

-    searchFiles(currentDirectory, normalizedQueryLower, 80, {
+    searchFiles(currentDirectory, serverQuery, 80, {
      includeHidden: showHidden,
      respectGitignore: !showGitignored,
      type: 'file',
@@ -178,7 +177,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
        }

        const recentSet = new Set(recentFiles.map((file) => file.path));
-        setFiles(hits.filter((hit) => !recentSet.has(hit.path)).slice(0, 15));
+        setFiles(hits.filter((hit) => !recentSet.has(hit.path)));
      })
      .catch(() => {
        if (!cancelled) {
@@ -210,13 +209,9 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
      return;
    }

-    const normalizedQuery = (debouncedQuery ?? '').trim();
-    const normalizedQueryLower = normalizedQuery
-      .replace(/^\.\//, '')
-      .replace(/^\/+/, '')
-      .toLowerCase();
+    const serverQuery = mentionServerQuery(debouncedQuery ?? '');

-    if (!normalizedQueryLower) {
+    if (!serverQuery) {
      setDirectories([]);
      return;
    }
@@ -225,14 +220,14 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
    pendingSearchRef.current++;
    setLoading(true);

-    searchFiles(currentDirectory, normalizedQueryLower, 20, {
+    searchFiles(currentDirectory, serverQuery, 20, {
      includeHidden: showHidden,
      respectGitignore: !showGitignored,
      type: 'directory',
    })
      .then((hits) => {
        if (!cancelled) {
-          setDirectories(hits.slice(0, 10));
+          setDirectories(hits);
        }
      })
      .catch(() => {
@@ -282,7 +277,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
    setSelectedIndex(0);
    setOverflowMap({});
    setMarqueeDurations({});
-  }, [visibleFiles, visibleDirectories, visibleRecentFiles.length, visibleAgents.length]);
+  }, [visibleResults, visibleRecentFiles.length, visibleAgents.length]);

  React.useEffect(() => {
    selectedIndexRef.current = selectedIndex;
@@ -332,7 +327,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
      }
      window.removeEventListener('resize', updateOverflow);
    };
-  }, [visibleFiles, visibleDirectories]);
+  }, [visibleResults]);

  React.useEffect(() => {
    const labelNode = labelRefs.current[selectedIndex];
@@ -376,7 +371,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
        return;
      }

-      const total = visibleAgents.length + visibleDirectories.length + visibleRecentFiles.length + visibleFiles.length;
+      const total = visibleAgents.length + visibleRecentFiles.length + visibleResults.length;
      if (total === 0) {
        return;
      }
@@ -400,24 +395,16 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
          }
          return;
        }
-        const dirIndex = safeIndex - visibleAgents.length;
-        if (dirIndex < visibleDirectories.length) {
-          const dir = visibleDirectories[dirIndex];
-          if (dir) {
-            handleFileSelect(dir);
-          }
-          return;
-        }
-        const fileIndex = dirIndex - visibleDirectories.length;
-        const selectedFile = fileIndex < visibleRecentFiles.length
-          ? visibleRecentFiles[fileIndex]
-          : visibleFiles[fileIndex - visibleRecentFiles.length];
+        const recentIndex = safeIndex - visibleAgents.length;
+        const selectedFile = recentIndex < visibleRecentFiles.length
+          ? visibleRecentFiles[recentIndex]
+          : visibleResults[recentIndex - visibleRecentFiles.length];
        if (selectedFile) {
          handleFileSelect(selectedFile);
        }
      }
    }
-  }), [visibleFiles, visibleDirectories, visibleRecentFiles, visibleAgents, onClose, handleFileSelect, handleAgentPick]);
+  }), [visibleResults, visibleRecentFiles, visibleAgents, onClose, handleFileSelect, handleAgentPick]);

  const getFileIcon = (file: FileInfo) => {
    const ext = file.extension?.toLowerCase();
@@ -482,38 +469,11 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                {t('chat.fileMentionAutocomplete.searchMoreAgents')}
              </div>
            )}
-            {visibleAgents.length > 0 && (visibleDirectories.length > 0 || visibleRecentFiles.length > 0 || visibleFiles.length > 0) && (
-              <div className="my-1 border-t border-border/60" />
-            )}
-            {visibleDirectories.map((dir, index) => {
-              const rowIndex = visibleAgents.length + index;
-              const relativePath = dir.relativePath || dir.name;
-              const displayPath = truncatePathMiddle(relativePath, { maxLength: 60 });
-              const isSelected = selectedIndex === rowIndex;
-
-              return (
-                <div
-                  key={`dir-${dir.path}`}
-                  ref={(el) => { itemRefs.current[rowIndex] = el; }}
-                  className={cn(
-                    "flex items-center gap-2 px-3 py-1.5 cursor-pointer typography-ui-label rounded-lg",
-                    isSelected && "bg-interactive-selection"
-                  )}
-                  onClick={() => handleFileSelect(dir)}
-                  onMouseMove={() => setSelectedIndex(rowIndex)}
-                >
-                  <Icon name="folder-3-fill" className="h-3.5 w-3.5 text-primary/60" />
-                  <span className="flex-1 min-w-0 truncate" aria-label={relativePath}>
-                    {displayPath}
-                  </span>
-                </div>
-              );
-            })}
-            {visibleDirectories.length > 0 && (visibleRecentFiles.length > 0 || visibleFiles.length > 0) && (
+            {visibleAgents.length > 0 && (visibleRecentFiles.length > 0 || visibleResults.length > 0) && (
              <div className="my-1 border-t border-border/60" />
            )}
            {visibleRecentFiles.map((file, index) => {
-              const rowIndex = visibleAgents.length + visibleDirectories.length + index;
+              const rowIndex = visibleAgents.length + index;
              const relativePath = file.relativePath || file.name;
              const displayPath = truncatePathMiddle(relativePath, { maxLength: 60 });
              const isSelected = selectedIndex === rowIndex;
@@ -561,11 +521,11 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                </div>
              );
            })}
-            {visibleRecentFiles.length > 0 && visibleFiles.length > 0 && (
+            {visibleRecentFiles.length > 0 && visibleResults.length > 0 && (
              <div className="my-1 border-t border-border/60" />
            )}
-            {visibleFiles.map((file, index) => {
-              const rowIndex = visibleAgents.length + visibleDirectories.length + visibleRecentFiles.length + index;
+            {visibleResults.map((file, index) => {
+              const rowIndex = visibleAgents.length + visibleRecentFiles.length + index;
              const relativePath = file.relativePath || file.name;
              const displayPath = truncatePathMiddle(relativePath, { maxLength: 60 });
              const isSelected = selectedIndex === rowIndex;
@@ -582,7 +542,9 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                  onClick={() => handleFileSelect(file)}
                  onMouseMove={() => setSelectedIndex(rowIndex)}
                >
-                  {getFileIcon(file)}
+                  {file.kind === 'directory'
+                    ? <Icon name="folder-3-fill" className="h-3.5 w-3.5 text-primary/60" />
+                    : getFileIcon(file)}
                  <span
                    ref={(el) => { labelRefs.current[rowIndex] = el; }}
                    className="relative flex-1 min-w-0 overflow-hidden file-mention-marquee-container"
@@ -613,12 +575,12 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
              );

              return (
-                <React.Fragment key={file.path}>
+                <React.Fragment key={`${file.kind}-${file.path}`}>
                  {item}
                </React.Fragment>
              );
            })}
-            {visibleFiles.length === 0 && visibleDirectories.length === 0 && visibleRecentFiles.length === 0 && visibleAgents.length === 0 && (
+            {visibleResults.length === 0 && visibleRecentFiles.length === 0 && visibleAgents.length === 0 && (
              <div className="px-3 py-2 typography-ui-label text-muted-foreground">
                {t('chat.fileMentionAutocomplete.empty')}
              </div>