feat(chat): enhance mention list with file filtering and add right ic…

ee/tabby-ui/components/chat/form-editor/mention.tsx

@@ -203,37 +203,38 @@ export const MentionList = forwardRef<MentionListActions, MentionListProps>(
     const fetchOptions = useCallback(async () => {
       setIsLoading(true)
       let isCurrent = true
-
       try {
         const currentQuery = isFirstShow ? query : debouncedQuery
-
         if (latestPromiseRef.current) {
           ;(latestPromiseRef.current as any).isCurrent = false
         }
-
         const currentPromise = (async () => {
           let result: SourceItem[] = []
           if (shouldShowCategoryMenu) {
             const files =
               (await listFileInWorkspace?.({ query: currentQuery || '' })) || []
-
             if (currentQuery) {
-              // TODO(Sma1lboy): refactor this part as function if more context coimmand/category join
-              const changesCommand = getChanges
-                ? [commandItemToSourceItem(createChangesCommand())]
-                : []
-              const fileItems = files.map(fileItemToSourceItem)
-
-              if (
+              const changesCommand =
                 getChanges &&
                 createChangesCommand()
                   .name.toLowerCase()
                   .startsWith(currentQuery.toLowerCase())
-              ) {
-                result = [...changesCommand, ...fileItems]
-              } else {
-                result = fileItems
-              }
+                  ? [commandItemToSourceItem(createChangesCommand())]
+                  : []
+
+              const fileItems = files
+                .filter(
+                  file =>
+                    !currentQuery ||
+                    resolveFileNameForDisplay(
+                      convertFromFilepath(file.filepath).filepath
+                    )
+                      .toLowerCase()
+                      .startsWith(currentQuery.toLowerCase())
+                )
+                .map(fileItemToSourceItem)
+
+              result = [...changesCommand, ...fileItems]
             } else {
               // No query, show categories and top-level items
               result = [
@@ -259,7 +260,17 @@ export const MentionList = forwardRef<MentionListActions, MentionListProps>(
             if (mode === 'file') {
               const files =
                 (await listFileInWorkspace?.({ query: currentQuery })) || []
-              result = files.map(fileItemToSourceItem)
+              result = files
+                .filter(
+                  file =>
+                    !currentQuery ||
+                    resolveFileNameForDisplay(
+                      convertFromFilepath(file.filepath).filepath
+                    )
+                      .toLowerCase()
+                      .startsWith(currentQuery.toLowerCase())
+                )
+                .map(fileItemToSourceItem)
             } else {
               const symbols =
                 (await listSymbols?.({ query: currentQuery })) || []
@@ -268,12 +279,9 @@ export const MentionList = forwardRef<MentionListActions, MentionListProps>(
           }
           return result
         })()
-
         ;(currentPromise as any).isCurrent = true
         latestPromiseRef.current = currentPromise
-
         const results = await currentPromise
-
         if ((latestPromiseRef.current as any)?.isCurrent) {
           setItems(results)
           setSelectedIndex(0)
@@ -470,6 +478,12 @@ function OptionItemView({ isSelected, data, ...rest }: OptionItemView) {
       {data.category === 'category' && (
         <IconChevronRight className="h-4 w-4 text-muted-foreground" />
       )}
+
+      {data.rightIcon && (
+        <span className="ml-auto flex shrink-0 items-center">
+          {data.rightIcon}
+        </span>
+      )}
     </div>
   )
 }

ee/tabby-ui/components/chat/form-editor/utils.tsx

@@ -1,4 +1,5 @@
 // utils.ts
+import { Pencil2Icon } from '@radix-ui/react-icons'
 import { Editor, JSONContent } from '@tiptap/core'
 import { FileBox, SquareFunction } from 'lucide-react'
 import { Filepath, ListSymbolItem } from 'tabby-chat-panel/index'
@@ -23,11 +24,21 @@ import { CommandItem, FileItem, SourceItem } from '../types'
  */
 export function fileItemToSourceItem(info: FileItem): SourceItem {
   const filepathString = convertFromFilepath(info.filepath).filepath
+  const fileSourceType =
+    'source' in info
+      ? info.source
+        ? info.source
+        : 'searchResult'
+      : 'searchResult'
   const source: Omit<SourceItem, 'id'> = {
     fileItem: info,
     name: resolveFileNameForDisplay(filepathString), // Extract the last segment of the path as the name
     filepath: filepathString,
     category: 'file',
+    rightIcon:
+      fileSourceType === 'searchResult' ? undefined : (
+        <Pencil2Icon className="h-3 w-3 text-muted-foreground" />
+      ),
     icon: <IconFile />
   }
   try {

ee/tabby-ui/components/chat/types.ts

@@ -81,6 +81,7 @@ export interface SourceItem {
   icon: ReactNode
   command?: string
   description?: string
+  rightIcon?: ReactNode
 }
 
 export interface CategoryItem {