From f62afac343c97796f1913bb977cb3ccb750b4692 Mon Sep 17 00:00:00 2001
From: weilirs <weilirs@umich.edu>
Date: Mon, 4 Nov 2024 18:05:26 +0800
Subject: [PATCH 1/2] feat: @ syntax draft

---
 electron/main/filesystem/filesystem.ts   |  17 +++
 electron/main/filesystem/ipcHandlers.ts  |   5 +
 electron/preload/index.ts                |   1 +
 src/components/Chat/ChatInput.tsx        | 151 +++++++++++++++++------
 src/components/Chat/FileAutocomplete.tsx |  40 ++++++
 src/components/Chat/StartChat.tsx        | 101 +++++++++++++--
 src/components/Chat/index.tsx            |  24 +++-
 7 files changed, 290 insertions(+), 49 deletions(-)
 create mode 100644 src/components/Chat/FileAutocomplete.tsx

diff --git a/electron/main/filesystem/filesystem.ts b/electron/main/filesystem/filesystem.ts
index fc64a5ab..a6b3ae2b 100644
--- a/electron/main/filesystem/filesystem.ts
+++ b/electron/main/filesystem/filesystem.ts
@@ -5,9 +5,11 @@ import * as path from 'path'
 import chokidar from 'chokidar'
 import { BrowserWindow } from 'electron'
 
+import Store from 'electron-store'
 import { FileInfo, FileInfoTree } from './types'
 import addExtensionToFilenameIfNoExtensionPresent from '../path/path'
 import { isFileNodeDirectory } from '../../../shared/utils'
+import { StoreSchema, StoreKeys } from '../electron-store/storeConfig'
 
 export const markdownExtensions = ['.md', '.markdown', '.mdown', '.mkdn', '.mkd']
 
@@ -217,3 +219,18 @@ export function splitDirectoryPathIntoBaseAndRepo(fullPath: string) {
 
   return { localModelPath, repoName }
 }
+
+export const searchFiles = async (store: Store<StoreSchema>, searchTerm: string): Promise<string[]> => {
+  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))
+
+  return matchingFiles.map((file) => file.path)
+}
diff --git a/electron/main/filesystem/ipcHandlers.ts b/electron/main/filesystem/ipcHandlers.ts
index 8d4454d4..8ecea1b6 100644
--- a/electron/main/filesystem/ipcHandlers.ts
+++ b/electron/main/filesystem/ipcHandlers.ts
@@ -15,6 +15,7 @@ import {
   GetFilesInfoListForListOfPaths,
   startWatchingDirectory,
   updateFileListForRenderer,
+  searchFiles,
 } from './filesystem'
 import { FileInfoTree, WriteFileProps, RenameFileProps, FileInfoWithContent } from './types'
 
@@ -193,6 +194,10 @@ const registerFileHandlers = (store: Store<StoreSchema>, _windowsManager: Window
     }
     return []
   })
+
+  ipcMain.handle('search-files', async (_event, searchTerm: string) => {
+    return searchFiles(store, searchTerm)
+  })
 }
 
 export default registerFileHandlers
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index 383eb77c..59a985f1 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -93,6 +93,7 @@ const fileSystem = {
   moveFileOrDir: createIPCHandler<(sourcePath: string, destinationPath: string) => Promise<void>>('move-file-or-dir'),
   getAllFilenamesInDirectory: createIPCHandler<(dirName: string) => Promise<string[]>>('get-files-in-directory'),
   getFiles: createIPCHandler<(filePaths: string[]) => Promise<FileInfoWithContent[]>>('get-files'),
+  searchFiles: createIPCHandler<(searchTerm: string) => Promise<string[]>>('search-files'),
 }
 
 const path = {
diff --git a/src/components/Chat/ChatInput.tsx b/src/components/Chat/ChatInput.tsx
index 7bb9b5f2..2959a2bf 100644
--- a/src/components/Chat/ChatInput.tsx
+++ b/src/components/Chat/ChatInput.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
-
+import React, { useState, useRef } from 'react'
 import { PiPaperPlaneRight } from 'react-icons/pi'
 import { LoadingState } from '../../lib/llm/types'
+import FileAutocomplete from './FileAutocomplete'
 
 interface ChatInputProps {
   userTextFieldInput: string
@@ -15,46 +15,121 @@ const ChatInput: React.FC<ChatInputProps> = ({
   setUserTextFieldInput,
   handleSubmitNewMessage,
   loadingState,
-}) => (
-  <div className="flex h-titlebar w-full items-center justify-center  p-10">
-    <div className="  relative bottom-5 flex w-full max-w-3xl">
-      <div className="w-full rounded-lg border-2 border-solid border-neutral-700 p-3 focus-within:ring-1 focus-within:ring-[#8c8c8c]">
-        <div className="flex h-full pr-8">
-          <textarea
-            onKeyDown={(e) => {
-              if (userTextFieldInput && !e.shiftKey && e.key === 'Enter') {
-                e.preventDefault()
-                handleSubmitNewMessage()
-              }
-            }}
-            onChange={(e) => setUserTextFieldInput(e.target.value)}
-            value={userTextFieldInput}
-            className="mr-2 max-h-[50px] w-full resize-none overflow-y-auto border-0 bg-gray-300 focus:outline-none"
-            name="Outlined"
-            placeholder="Follow up..."
-            rows={1}
-            style={{
-              backgroundColor: 'rgba(255, 255, 255, 0)',
-              color: 'rgb(212 212 212)',
-              border: 'none',
-            }}
-            onInput={(e) => {
-              const target = e.target as HTMLTextAreaElement // Prevent TS inferring type error
-              target.style.height = 'auto'
-              target.style.height = `${Math.min(target.scrollHeight, 160)}px`
-            }}
-          />
-          <div className="absolute right-3 top-1/2 -translate-y-1/2">
-            <PiPaperPlaneRight
-              color={userTextFieldInput && loadingState !== 'idle' ? 'white' : 'gray'}
-              onClick={userTextFieldInput ? handleSubmitNewMessage : undefined}
-              className={userTextFieldInput ? 'cursor-pointer' : ''}
+}) => {
+  const [showFileAutocomplete, setShowFileAutocomplete] = useState(false)
+  const [autocompletePosition, setAutocompletePosition] = useState({ top: 0, left: 0 })
+  const [searchTerm, setSearchTerm] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const getCaretCoordinates = (element: HTMLTextAreaElement) => {
+    const { selectionStart, value } = element
+    const textBeforeCaret = value.substring(0, selectionStart)
+
+    // Create a hidden div with the same styling as textarea
+    const mirror = document.createElement('div')
+    mirror.style.cssText = window.getComputedStyle(element).cssText
+    mirror.style.height = 'auto'
+    mirror.style.position = 'absolute'
+    mirror.style.visibility = 'hidden'
+    mirror.style.whiteSpace = 'pre-wrap'
+    document.body.appendChild(mirror)
+
+    // Create a span for the text before caret
+    const textNode = document.createTextNode(textBeforeCaret)
+    const span = document.createElement('span')
+    span.appendChild(textNode)
+    mirror.appendChild(span)
+
+    // Get coordinates
+    const coordinates = {
+      top: span.offsetTop + parseInt(window.getComputedStyle(element).lineHeight, 10) / 2,
+      left: span.offsetLeft,
+    }
+
+    // Clean up
+    document.body.removeChild(mirror)
+
+    return coordinates
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (userTextFieldInput && !e.shiftKey && e.key === 'Enter') {
+      e.preventDefault()
+      handleSubmitNewMessage()
+    } else if (e.key === '@') {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const position = getCaretCoordinates(e.currentTarget)
+      setAutocompletePosition({
+        top: rect.top + position.top,
+        left: rect.left + position.left,
+      })
+      setShowFileAutocomplete(true)
+      // console.log('showFileAutocomplete', showFileAutocomplete)
+    } else if (showFileAutocomplete && e.key === 'Escape') {
+      setShowFileAutocomplete(false)
+    }
+  }
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { value } = e.target
+    setUserTextFieldInput(value)
+
+    // Handle @ mentions
+    const lastAtIndex = value.lastIndexOf('@')
+    if (lastAtIndex !== -1 && lastAtIndex < value.length) {
+      const searchText = value.slice(lastAtIndex + 1).split(/\s/)[0]
+      setSearchTerm(searchText)
+    } else {
+      setShowFileAutocomplete(false)
+    }
+
+    // Adjust textarea height
+    e.target.style.height = 'auto'
+    e.target.style.height = `${Math.min(e.target.scrollHeight, 160)}px`
+  }
+
+  const handleFileSelect = (filePath: string) => {
+    const lastAtIndex = userTextFieldInput.lastIndexOf('@')
+    const newValue = `${userTextFieldInput.slice(0, lastAtIndex)}@${filePath} ${userTextFieldInput.slice(
+      lastAtIndex + searchTerm.length + 1,
+    )}`
+
+    setUserTextFieldInput(newValue)
+    setShowFileAutocomplete(false)
+  }
+
+  return (
+    <div className="flex h-titlebar w-full items-center justify-center p-10">
+      <div className="relative bottom-5 flex w-full max-w-3xl">
+        <div className="w-full rounded-lg border-2 border-solid border-neutral-700 p-3 focus-within:ring-1 focus-within:ring-[#8c8c8c]">
+          <div className="flex h-full pr-8">
+            <textarea
+              ref={textareaRef}
+              onKeyDown={handleKeyDown}
+              onChange={handleInput}
+              value={userTextFieldInput}
+              className="mr-2 max-h-[50px] w-full resize-none overflow-y-auto border-0 bg-transparent text-foreground focus:outline-none"
+              placeholder="Type @ to reference files..."
+              rows={1}
             />
+            <div className="absolute right-3 top-1/2 -translate-y-1/2">
+              <PiPaperPlaneRight
+                color={userTextFieldInput && loadingState !== 'idle' ? 'white' : 'gray'}
+                onClick={userTextFieldInput ? handleSubmitNewMessage : undefined}
+                className={userTextFieldInput ? 'cursor-pointer' : ''}
+              />
+            </div>
           </div>
         </div>
+        <FileAutocomplete
+          searchTerm={searchTerm}
+          position={autocompletePosition}
+          onSelect={handleFileSelect}
+          visible={showFileAutocomplete}
+        />
       </div>
     </div>
-  </div>
-)
+  )
+}
 
 export default ChatInput
diff --git a/src/components/Chat/FileAutocomplete.tsx b/src/components/Chat/FileAutocomplete.tsx
new file mode 100644
index 00000000..9a76b41a
--- /dev/null
+++ b/src/components/Chat/FileAutocomplete.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react'
+
+interface FileAutocompleteProps {
+  searchTerm: string
+  position: { top: number; left: number }
+  onSelect: (filePath: string) => void
+  visible: boolean
+}
+
+const FileAutocomplete: React.FC<FileAutocompleteProps> = ({ searchTerm, position, onSelect, visible }) => {
+  const [files, setFiles] = useState<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)
+      }
+    }
+    searchFiles()
+  }, [searchTerm, visible])
+
+  if (!visible || !searchTerm) return null
+
+  return (
+    <div
+      className="absolute z-50 max-h-48 w-64 overflow-y-auto rounded-md border border-neutral-700 bg-background shadow-lg"
+      style={{ top: position.top, left: position.left }}
+    >
+      {files.map((file) => (
+        <div key={file} className="cursor-pointer px-4 py-2 hover:bg-neutral-700" onClick={() => onSelect(file)}>
+          {file.split('/').pop()}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default FileAutocomplete
diff --git a/src/components/Chat/StartChat.tsx b/src/components/Chat/StartChat.tsx
index a56e5a18..95644dcc 100644
--- a/src/components/Chat/StartChat.tsx
+++ b/src/components/Chat/StartChat.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useRef } from 'react'
 import { PiPaperPlaneRight } from 'react-icons/pi'
 import { FiSettings } from 'react-icons/fi'
 import { LLMConfig } from 'electron/main/electron-store/storeConfig'
@@ -24,6 +24,7 @@ import { allAvailableToolDefinitions } from '@/lib/llm/tools/tool-definitions'
 import ToolSelector from './ChatConfigComponents/ToolSelector'
 import SuggestionCard from '../ui/suggestion-card'
 import LLMSelectOrButton from '../Settings/LLMSettings/LLMSelectOrButton'
+import FileAutocomplete from './FileAutocomplete'
 
 interface StartChatProps {
   defaultModelName: string
@@ -40,6 +41,10 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
     'Summarize my recent notes on machine learning',
     'Based on what I wrote last week, which tasks should I focus on this week?',
   ])
+  const [showFileAutocomplete, setShowFileAutocomplete] = useState(false)
+  const [autocompletePosition, setAutocompletePosition] = useState({ top: 0, left: 0 })
+  const [searchTerm, setSearchTerm] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   useEffect(() => {
     const fetchAgentConfigs = async () => {
@@ -102,6 +107,82 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
     })
   }
 
+  const getCaretCoordinates = (element: HTMLTextAreaElement) => {
+    const { selectionStart, value } = element
+    const textBeforeCaret = value.substring(0, selectionStart)
+
+    // Create a hidden div with the same styling as textarea
+    const mirror = document.createElement('div')
+    mirror.style.cssText = window.getComputedStyle(element).cssText
+    mirror.style.height = 'auto'
+    mirror.style.position = 'absolute'
+    mirror.style.visibility = 'hidden'
+    mirror.style.whiteSpace = 'pre-wrap'
+    document.body.appendChild(mirror)
+
+    // Create a span for the text before caret
+    const textNode = document.createTextNode(textBeforeCaret)
+    const span = document.createElement('span')
+    span.appendChild(textNode)
+    mirror.appendChild(span)
+
+    // Get coordinates
+    const coordinates = {
+      top: span.offsetTop + parseInt(window.getComputedStyle(element).lineHeight, 10) / 2,
+      left: span.offsetLeft,
+    }
+
+    // Clean up
+    document.body.removeChild(mirror)
+
+    return coordinates
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!e.shiftKey && e.key === 'Enter') {
+      e.preventDefault()
+      sendMessageHandler()
+    } else if (e.key === '@') {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const position = getCaretCoordinates(e.currentTarget)
+      setAutocompletePosition({
+        top: rect.top + position.top,
+        left: rect.left + position.left,
+      })
+      setShowFileAutocomplete(true)
+    } else if (showFileAutocomplete && e.key === 'Escape') {
+      setShowFileAutocomplete(false)
+    }
+  }
+
+  const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const { value } = e.target
+    setUserTextFieldInput(value)
+
+    // Handle @ mentions
+    const lastAtIndex = value.lastIndexOf('@')
+    if (lastAtIndex !== -1 && lastAtIndex < value.length) {
+      const searchText = value.slice(lastAtIndex + 1).split(/\s/)[0]
+      setSearchTerm(searchText)
+    } else {
+      setShowFileAutocomplete(false)
+    }
+
+    // Adjust textarea height
+    e.target.style.height = 'auto'
+    e.target.style.height = `${Math.min(e.target.scrollHeight, 160)}px`
+  }
+
+  const handleFileSelect = (filePath: string) => {
+    const lastAtIndex = userTextFieldInput.lastIndexOf('@')
+    const newValue = `${userTextFieldInput.slice(0, lastAtIndex)}@${filePath} ${userTextFieldInput.slice(
+      lastAtIndex + searchTerm.length + 1,
+    )}`
+
+    setUserTextFieldInput(newValue)
+    setShowFileAutocomplete(false)
+  }
+
   if (!agentConfig) return <div>Loading...</div>
 
   return (
@@ -125,19 +206,21 @@ const StartChat: React.FC<StartChatProps> = ({ defaultModelName, handleNewChatMe
           <div className="flex flex-col">
             <div className="z-50 flex flex-col overflow-hidden rounded border-2 border-solid border-border bg-background focus-within:ring-1 focus-within:ring-ring">
               <textarea
+                ref={textareaRef}
                 value={userTextFieldInput}
-                onKeyDown={(e) => {
-                  if (!e.shiftKey && e.key === 'Enter') {
-                    e.preventDefault()
-                    sendMessageHandler()
-                  }
-                }}
+                onKeyDown={handleKeyDown}
+                onChange={handleInput}
                 className="h-[100px] w-[600px] resize-none border-0 bg-transparent p-4 text-foreground caret-current focus:outline-none"
-                placeholder="What can Reor help you with today?"
-                onChange={(e) => setUserTextFieldInput(e.target.value)}
+                placeholder="Type @ to reference files..."
                 // eslint-disable-next-line jsx-a11y/no-autofocus
                 autoFocus
               />
+              <FileAutocomplete
+                searchTerm={searchTerm}
+                position={autocompletePosition}
+                onSelect={handleFileSelect}
+                visible={showFileAutocomplete}
+              />
               <div className="mx-auto h-px w-[96%] bg-background/20" />
               <div className="flex h-10 flex-col items-center justify-between gap-2  py-2 md:flex-row md:gap-4">
                 <div className="flex flex-col items-center justify-between rounded-md border-0 py-2 md:flex-row">
diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
index 56c1a663..c2c833f4 100644
--- a/src/components/Chat/index.tsx
+++ b/src/components/Chat/index.tsx
@@ -16,6 +16,13 @@ import StartChat from './StartChat'
 import resolveLLMClient from '@/lib/llm/client'
 import { appendToolCallsAndAutoExecuteTools, convertToolConfigToZodSchema } from '../../lib/llm/tools/utils'
 
+const extractFileReferences = (message: string): string[] => {
+  const regex = /@([^@]+?\.md)/g
+  const matches = message.match(regex)
+  // console.log('matches', matches)
+  return matches ? matches.map((match) => match.slice(1)) : []
+}
+
 const ChatComponent: React.FC = () => {
   const [loadingState, setLoadingState] = useState<LoadingState>('idle')
   const [defaultModelName, setDefaultLLMName] = useState<string>('')
@@ -49,12 +56,25 @@ const ChatComponent: React.FC = () => {
           return
         }
 
-        outputChat = userTextFieldInput?.trim() ? await updateOrCreateChat(chat, userTextFieldInput, agentConfig) : chat
+        // Extract file references from the message
+        const fileRefs = extractFileReferences(userTextFieldInput || '')
+        // console.log('fileRefs', fileRefs)
+
+        // Create or update chat with file context
+        outputChat = userTextFieldInput?.trim()
+          ? await updateOrCreateChat(chat, userTextFieldInput, {
+              name: agentConfig?.name || 'default',
+              ...agentConfig,
+              toolDefinitions: agentConfig?.toolDefinitions || [],
+              promptTemplate: agentConfig?.promptTemplate || [],
+              files: fileRefs,
+            })
+          : chat
 
         if (!outputChat) {
           return
         }
-
+        // console.log('outputChat', outputChat)
         setCurrentChat(outputChat)
         await saveChat(outputChat)
 

From 8ea3d57199aae5f5775907836fd88ea450db557c Mon Sep 17 00:00:00 2001
From: weilirs <weilirs@umich.edu>
Date: Thu, 14 Nov 2024 21:17:56 +0800
Subject: [PATCH 2/2] fix: adjust autocomplete menu's position

---
 electron/main/filesystem/ipcHandlers.ts       |  8 ++++++-
 src/components/Chat/ChatInput.tsx             | 14 +++++++++----
 src/components/Chat/ChatSidebar.tsx           |  1 +
 src/components/Chat/FileAutocomplete.tsx      |  6 +++++-
 .../Chat/MessageComponents/ChatSources.tsx    |  2 +-
 src/components/Chat/index.tsx                 | 21 ++++++++++---------
 .../LLMSettings/DefaultLLMSelector.tsx        |  1 +
 7 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/electron/main/filesystem/ipcHandlers.ts b/electron/main/filesystem/ipcHandlers.ts
index 006c608c..4c6f7d89 100644
--- a/electron/main/filesystem/ipcHandlers.ts
+++ b/electron/main/filesystem/ipcHandlers.ts
@@ -8,7 +8,13 @@ import WindowsManager from '../common/windowManager'
 import { StoreSchema } from '../electron-store/storeConfig'
 import { handleFileRename, updateFileInTable } from '../vector-database/tableHelperFunctions'
 
-import { GetFilesInfoTree, createFileRecursive, isHidden, GetFilesInfoListForListOfPaths } from './filesystem'
+import {
+  GetFilesInfoTree,
+  createFileRecursive,
+  isHidden,
+  GetFilesInfoListForListOfPaths,
+  searchFiles,
+} from './filesystem'
 import { FileInfoTree, WriteFileProps, RenameFileProps, FileInfoWithContent } from './types'
 
 const registerFileHandlers = (store: Store<StoreSchema>, _windowsManager: WindowsManager) => {
diff --git a/src/components/Chat/ChatInput.tsx b/src/components/Chat/ChatInput.tsx
index d23953e5..3d22bc00 100644
--- a/src/components/Chat/ChatInput.tsx
+++ b/src/components/Chat/ChatInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import { PiPaperPlaneRight } from 'react-icons/pi'
 import FileAutocomplete from './FileAutocomplete'
 import { AgentConfig, LoadingState } from '../../lib/llm/types'
@@ -131,7 +131,7 @@ const ChatInput: React.FC<ChatInputProps> = ({
 
   return (
     <div className="flex w-full">
-      <div className="z-50 flex w-full flex-col overflow-hidden rounded border-2 border-solid border-border bg-background focus-within:ring-1 focus-within:ring-ring">
+      <div className="relative z-50 flex w-full flex-col overflow-visible rounded border-2 border-solid border-border bg-background focus-within:ring-1 focus-within:ring-ring">
         {/* <Select value={selectedLLM}>
           <SelectTrigger className="h-7 w-32 border-0 text-[10px] text-gray-300 focus:ring-0 focus:ring-offset-0">
             <SelectValue placeholder="Tools" />
@@ -149,19 +149,25 @@ const ChatInput: React.FC<ChatInputProps> = ({
           </SelectContent>
         </Select> */}
         <textarea
+          ref={textareaRef}
           value={userTextFieldInput}
           onKeyDown={(e) => {
+            handleKeyDown(e)
             if (!e.shiftKey && e.key === 'Enter') {
               e.preventDefault()
               handleSubmitNewMessage()
             }
           }}
-          className="h-[100px] w-full resize-none border-0 bg-transparent p-4 text-foreground caret-current focus:outline-none"
+          onChange={(e) => {
+            handleInput(e)
+            setUserTextFieldInput(e.target.value)
+          }}
+          className="min-h-[100px] w-full resize-none border-0 bg-transparent p-4 text-foreground caret-current focus:outline-none"
           wrap="soft"
           placeholder="What can Reor help you with today?"
-          onChange={(e) => setUserTextFieldInput(e.target.value)}
           // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
+          // rows={1}
         />
         <div className="mx-auto h-px w-[96%] bg-background/20" />
         <div className="flex h-10 flex-col items-center justify-between gap-2  py-2 md:flex-row md:gap-4">
diff --git a/src/components/Chat/ChatSidebar.tsx b/src/components/Chat/ChatSidebar.tsx
index 29aacf47..6802de35 100644
--- a/src/components/Chat/ChatSidebar.tsx
+++ b/src/components/Chat/ChatSidebar.tsx
@@ -21,6 +21,7 @@ export const ChatItem: React.FC<ChatItemProps> = ({ chatMetadata }) => {
   `
 
   const handleDeleteChat = () => {
+    // eslint-disable-next-line no-alert
     const isConfirmed = window.confirm(`Are you sure you want to delete the chat "${chatMetadata.displayName}"?`)
     if (isConfirmed) {
       deleteChat(chatMetadata.id)
diff --git a/src/components/Chat/FileAutocomplete.tsx b/src/components/Chat/FileAutocomplete.tsx
index 9a76b41a..102833b6 100644
--- a/src/components/Chat/FileAutocomplete.tsx
+++ b/src/components/Chat/FileAutocomplete.tsx
@@ -26,7 +26,11 @@ const FileAutocomplete: React.FC<FileAutocompleteProps> = ({ searchTerm, positio
   return (
     <div
       className="absolute z-50 max-h-48 w-64 overflow-y-auto rounded-md border border-neutral-700 bg-background shadow-lg"
-      style={{ top: position.top, left: position.left }}
+      style={{
+        top: 'auto',
+        bottom: `calc(100% + 10px)`,
+        left: position.left,
+      }}
     >
       {files.map((file) => (
         <div key={file} className="cursor-pointer px-4 py-2 hover:bg-neutral-700" onClick={() => onSelect(file)}>
diff --git a/src/components/Chat/MessageComponents/ChatSources.tsx b/src/components/Chat/MessageComponents/ChatSources.tsx
index 67c1f767..72ce8891 100644
--- a/src/components/Chat/MessageComponents/ChatSources.tsx
+++ b/src/components/Chat/MessageComponents/ChatSources.tsx
@@ -51,7 +51,7 @@ const ChatSources: React.FC<ChatSourcesProps> = ({ contextItems }) => {
     <div>
       <div className="mb-1 text-sm text-muted-foreground">Sources:</div>
 
-      <div className="scrollbar-thumb-rounded-full flex space-x-2 overflow-x-auto p-0 pb-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-800">
+      <div className="flex space-x-2 overflow-x-auto p-0 pb-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-800">
         {contextItems.map((contextItem) => (
           <HoverCard key={getItemPath(contextItem)} openDelay={600}>
             <HoverCardTrigger>
diff --git a/src/components/Chat/index.tsx b/src/components/Chat/index.tsx
index 2e87ddb7..c58551f0 100644
--- a/src/components/Chat/index.tsx
+++ b/src/components/Chat/index.tsx
@@ -48,20 +48,21 @@ 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()
-        //   ? await updateOrCreateChat(chat, userTextFieldInput, {
-        //       name: agentConfig?.name || 'default',
-        //       ...agentConfig,
-        //       toolDefinitions: agentConfig?.toolDefinitions || [],
-        //       promptTemplate: agentConfig?.promptTemplate || [],
-        //       files: fileRefs,
-        //     })
         outputChat = userTextFieldInput?.trim()
-          ? await appendToOrCreateChat(chat, userTextFieldInput, agentConfig)
+          ? await appendToOrCreateChat(chat, userTextFieldInput, {
+              name: agentConfig?.name || 'default',
+              ...agentConfig,
+              toolDefinitions: agentConfig?.toolDefinitions || [],
+              promptTemplate: agentConfig?.promptTemplate || [],
+              files: fileRefs,
+            })
           : chat
+        // outputChat = userTextFieldInput?.trim()
+        //   ? await appendToOrCreateChat(chat, userTextFieldInput, agentConfig)
+        //   : chat
 
         if (!outputChat) {
           return
diff --git a/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx b/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx
index 5a5d407b..f74c6061 100644
--- a/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx
+++ b/src/components/Settings/LLMSettings/DefaultLLMSelector.tsx
@@ -28,6 +28,7 @@ const DefaultLLMSelector: React.FC<DefaultLLMSelectorProps> = ({ llmConfigs, def
   }
 
   const handleDeleteLLM = async (modelName: string) => {
+    // eslint-disable-next-line no-alert
     const confirmDelete = window.confirm(`Are you sure you want to delete the model ${modelName}?`)
     if (!confirmDelete) return