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] 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