From a55903611399e15a5c01c81854cb37ac84b5e296 Mon Sep 17 00:00:00 2001
From: weilirs <weilirs@umich.edu>
Date: Wed, 20 Nov 2024 10:51:50 +0800
Subject: [PATCH] folder information in autocomplete

---
 electron/main/filesystem/filesystem.ts   | 17 ++++++++++++----
 src/components/Chat/FileAutocomplete.tsx | 25 +++++++++++++++++++-----
 src/components/Chat/index.tsx            |  2 +-
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/electron/main/filesystem/filesystem.ts b/electron/main/filesystem/filesystem.ts
index 199a0448..3fbcea3c 100644
--- a/electron/main/filesystem/filesystem.ts
+++ b/electron/main/filesystem/filesystem.ts
@@ -197,17 +197,26 @@ export function splitDirectoryPathIntoBaseAndRepo(fullPath: string) {
   return { localModelPath, repoName }
 }
 
-export const searchFiles = async (store: Store<StoreSchema>, searchTerm: string): Promise<string[]> => {
+interface FileSearchResult {
+  absolutePath: string
+  relativePath: string
+}
+
+export const searchFiles = async (store: Store<StoreSchema>, searchTerm: string): Promise<FileSearchResult[]> => {
   const vaultDirectory = store.get(StoreKeys.DirectoryFromPreviousSession)
   if (!vaultDirectory || typeof vaultDirectory !== 'string') {
     throw new Error('No valid vault directory found')
   }
 
   const allFiles = GetFilesInfoList(vaultDirectory)
-
   const searchTermLower = searchTerm.toLowerCase()
 
-  const matchingFiles = allFiles.filter((file) => file.name.toLowerCase().startsWith(searchTermLower))
+  const matchingFiles = allFiles
+    .filter((file) => file.name.toLowerCase().startsWith(searchTermLower))
+    .map((file) => ({
+      absolutePath: file.path,
+      relativePath: file.path.replace(vaultDirectory, '').replace(/^[/\\]+/, ''),
+    }))
 
-  return matchingFiles.map((file) => file.path)
+  return matchingFiles
 }
diff --git a/src/components/Chat/FileAutocomplete.tsx b/src/components/Chat/FileAutocomplete.tsx
index 102833b6..70098602 100644
--- a/src/components/Chat/FileAutocomplete.tsx
+++ b/src/components/Chat/FileAutocomplete.tsx
@@ -8,14 +8,13 @@ interface FileAutocompleteProps {
 }
 
 const FileAutocomplete: React.FC<FileAutocompleteProps> = ({ searchTerm, position, onSelect, visible }) => {
-  const [files, setFiles] = useState<string[]>([])
+  const [files, setFiles] = useState<Array<{ absolutePath: string; relativePath: string }>>([])
 
   useEffect(() => {
     const searchFiles = async () => {
       if (searchTerm && visible) {
-        // Use the electron API to search for files
         const results = await window.fileSystem.searchFiles(searchTerm)
-        setFiles(results)
+        setFiles(results.map((path) => ({ absolutePath: path, relativePath: path })))
       }
     }
     searchFiles()
@@ -23,6 +22,18 @@ const FileAutocomplete: React.FC<FileAutocompleteProps> = ({ searchTerm, positio
 
   if (!visible || !searchTerm) return null
 
+  const formatFilePath = (relativePath: string) => {
+    const parts = relativePath.split('/')
+    const fileName = parts.pop() || ''
+    const folderPath = parts.join('/')
+    return (
+      <div className="flex items-center justify-between">
+        <span>{fileName}</span>
+        <span className="ml-2 truncate text-xs text-neutral-500">{folderPath ? `(${folderPath})` : ''}</span>
+      </div>
+    )
+  }
+
   return (
     <div
       className="absolute z-50 max-h-48 w-64 overflow-y-auto rounded-md border border-neutral-700 bg-background shadow-lg"
@@ -33,8 +44,12 @@ const FileAutocomplete: React.FC<FileAutocompleteProps> = ({ searchTerm, positio
       }}
     >
       {files.map((file) => (
-        <div key={file} className="cursor-pointer px-4 py-2 hover:bg-neutral-700" onClick={() => onSelect(file)}>
-          {file.split('/').pop()}
+        <div
+          key={file.absolutePath}
+          className="cursor-pointer px-4 py-2 hover:bg-neutral-700"
+          onClick={() => onSelect(file.absolutePath)}
+        >
+          {formatFilePath(file.relativePath)}
         </div>
       ))}
     </div>
diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
index c58551f0..f120ca1a 100644
--- a/src/components/Chat/index.tsx
+++ b/src/components/Chat/index.tsx
@@ -48,7 +48,7 @@ const ChatComponent: React.FC = () => {
 
         // Extract file references from the message
         const fileRefs = extractFileReferences(userTextFieldInput || '')
-        console.log('fileRefs', fileRefs)
+        // console.log('fileRefs', fileRefs)
 
         // Create or update chat with file context
         outputChat = userTextFieldInput?.trim()