Merge pull request #391 from reorproject/jp/file-context

Jp/file context

electron/main/electron-store/ipcHandlers.ts

@@ -95,13 +95,6 @@ export const registerStoreHandlers = (store: Store<StoreSchema>, windowsManager:
     return store.get(StoreKeys.LLMGenerationParameters)
   })
 
-  ipcMain.handle('set-display-markdown', (event, displayMarkdown) => {
-    store.set(StoreKeys.DisplayMarkdown, displayMarkdown)
-    event.sender.send('display-markdown-changed', displayMarkdown)
-  })
-
-  ipcMain.handle('get-display-markdown', () => store.get(StoreKeys.DisplayMarkdown))
-
   ipcMain.handle('set-sb-compact', (event, isSBCompact) => {
     store.set(StoreKeys.IsSBCompact, isSBCompact)
     event.sender.send('sb-compact-changed', isSBCompact)

electron/main/electron-store/storeConfig.ts

@@ -62,7 +62,6 @@ export interface StoreSchema {
   analytics?: boolean
   chunkSize: number
   isSBCompact: boolean
-  DisplayMarkdown: boolean
   spellCheck: string
   EditorFlexCenter: boolean
   OpenTabs: Tab[]
@@ -83,7 +82,6 @@ export enum StoreKeys {
   ChatHistories = 'chatHistories',
   ChunkSize = 'chunkSize',
   IsSBCompact = 'isSBCompact',
-  DisplayMarkdown = 'DisplayMarkdown',
   SpellCheck = 'spellCheck',
   EditorFlexCenter = 'editorFlexCenter',
   OpenTabs = 'OpenTabs',

electron/preload/index.ts

@@ -77,8 +77,6 @@ const electronStore = {
   getChatHistory: createIPCHandler<(chatID: string) => Promise<Chat>>('get-chat-history'),
   getSBCompact: createIPCHandler<() => Promise<boolean>>('get-sb-compact'),
   setSBCompact: createIPCHandler<(isSBCompact: boolean) => Promise<void>>('set-sb-compact'),
-  getDisplayMarkdown: createIPCHandler<() => Promise<boolean>>('get-display-markdown'),
-  setDisplayMarkdown: createIPCHandler<(displayMarkdown: boolean) => Promise<void>>('set-display-markdown'),
   getEditorFlexCenter: createIPCHandler<() => Promise<boolean>>('get-editor-flex-center'),
   setEditorFlexCenter: createIPCHandler<(editorFlexCenter: boolean) => Promise<void>>('set-editor-flex-center'),
   getCurrentOpenTabs: createIPCHandler<() => Promise<Tab[]>>('get-current-open-files'),
@@ -110,6 +108,7 @@ const fileSystem = {
   getFilesystemPathsAsDBItems: createIPCHandler<(paths: string[]) => Promise<DBEntry[]>>(
     'get-filesystem-paths-as-db-items',
   ),
+  getAllFilenamesInDirectory: createIPCHandler<(dirName: string) => Promise<string[]>>('get-files-in-directory'),
 }
 
 const path = {
@@ -122,7 +121,6 @@ const path = {
     'add-extension-if-no-extension-present',
   ),
   pathSep: createIPCHandler<() => Promise<string>>('path-sep'),
-  getAllFilenamesInDirectory: createIPCHandler<(dirName: string) => Promise<string[]>>('get-files-in-directory'),
 }
 
 const llm = {

src/App.tsx

@@ -8,7 +8,6 @@ import 'react-toastify/dist/ReactToastify.css'
 import IndexingProgress from './components/Common/IndexingProgress'
 import MainPageComponent from './components/MainPage'
 import InitialSetupSinglePage from './components/Settings/InitialSettingsSinglePage'
-import { ModalProvider } from './providers/ModalProvider'
 
 interface AppProps {}
 
@@ -83,11 +82,7 @@ const App: React.FC<AppProps> = () => {
       {userHasConfiguredSettingsForIndexing && indexingProgress < 1 && (
         <IndexingProgress indexingProgress={indexingProgress} />
       )}
-      {userHasConfiguredSettingsForIndexing && indexingProgress >= 1 && (
-        <ModalProvider>
-          <MainPageComponent />
-        </ModalProvider>
-      )}
+      {userHasConfiguredSettingsForIndexing && indexingProgress >= 1 && <MainPageComponent />}
     </div>
   )
 }

src/components/Chat/AddContextFiltersModal.tsx

@@ -17,12 +17,12 @@ import { ChatFilters } from './types'
 interface Props {
   isOpen: boolean
   onClose: () => void
-  vaultDirectory: string
   setChatFilters: (chatFilters: ChatFilters) => void
   chatFilters: ChatFilters
 }
 
-const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClose, chatFilters, setChatFilters }) => {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const AddContextFiltersModal: React.FC<Props> = ({ isOpen, onClose, chatFilters, setChatFilters }) => {
   const [internalFilesSelected, setInternalFilesSelected] = useState<string[]>(chatFilters?.files || [])
   const [searchText, setSearchText] = useState<string>('')
   const [suggestionsState, setSuggestionsState] = useState<SuggestionsState | null>(null)
@@ -41,16 +41,16 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
     { label: 'Past year', value: 'lastYear' },
   ]
 
-  useEffect(() => {
-    const updatedChatFilters: ChatFilters = {
-      ...chatFilters,
-      files: [...new Set([...chatFilters.files, ...internalFilesSelected])],
-      numberOfChunksToFetch,
-      minDate: minDate || undefined,
-      maxDate: maxDate || undefined,
-    }
-    setChatFilters(updatedChatFilters)
-  }, [internalFilesSelected, numberOfChunksToFetch, minDate, maxDate, chatFilters, setChatFilters])
+  // useEffect(() => {
+  //   const updatedChatFilters: ChatFilters = {
+  //     ...chatFilters,
+  //     files: [...new Set([...chatFilters.files, ...internalFilesSelected])],
+  //     numberOfChunksToFetch,
+  //     minDate: minDate || undefined,
+  //     maxDate: maxDate || undefined,
+  //   }
+  //   setChatFilters(updatedChatFilters)
+  // }, [internalFilesSelected, numberOfChunksToFetch, minDate, maxDate, setChatFilters])
 
   const handleNumberOfChunksChange = (event: Event, value: number | number[]) => {
     const newValue = Array.isArray(value) ? value[0] : value
@@ -110,7 +110,6 @@ const AddContextFiltersModal: React.FC<Props> = ({ vaultDirectory, isOpen, onClo
           <div className="flex-1">
             <h3 className="mb-2 text-lg text-white">Select files for context</h3>
             <SearchBarWithFilesSuggestion
-              vaultDirectory={vaultDirectory}
               searchText={searchText}
               setSearchText={setSearchText}
               onSelectSuggestion={(file: string) => {

src/components/Chat/ChatMessages.tsx

@@ -12,7 +12,8 @@ import PromptSuggestion from './ChatPrompts'
 import LoadingDots from '@/utils/animations'
 import '../../styles/chat.css'
 import { ReorChatMessage } from './types'
-import { useChatContext } from '@/providers/ChatContext'
+import { useChatContext } from '@/contexts/ChatContext'
+import { useTabsContext } from '@/contexts/TabContext'
 
 export enum AskOptions {
   Ask = 'Ask',
@@ -28,11 +29,9 @@ export const EXAMPLE_PROMPTS: { [key: string]: string[] } = {
 
 interface ChatMessagesProps {
   chatContainerRef: MutableRefObject<HTMLDivElement | null>
-  openFileAndOpenEditor: (path: string, optionalContentToWriteOnCreate?: string) => Promise<void>
   isAddContextFiltersModalOpen: boolean
   setUserTextFieldInput: Dispatch<SetStateAction<string>>
   defaultModelName: string
-  vaultDirectory: string
   setIsAddContextFiltersModalOpen: Dispatch<SetStateAction<boolean>>
   handlePromptSelection: (prompt: string | undefined) => void
   askText: AskOptions
@@ -41,20 +40,16 @@ interface ChatMessagesProps {
 
 const ChatMessages: React.FC<ChatMessagesProps> = ({
   chatContainerRef,
-  openFileAndOpenEditor,
-  // currentChatHistory,
   isAddContextFiltersModalOpen,
-  // chatFilters,
-  // setChatFilters,
   setUserTextFieldInput,
   defaultModelName,
-  vaultDirectory,
   setIsAddContextFiltersModalOpen,
   handlePromptSelection,
   askText,
   loadAnimation,
 }) => {
   const { currentChatHistory, chatFilters, setChatFilters } = useChatContext()
+  const { openTabContent } = useTabsContext()
   const [llmConfigs, setLLMConfigs] = useState<LLMConfig[]>([])
   const [selectedLlm, setSelectedLlm] = useState<string>(defaultModelName)
 
@@ -73,7 +68,7 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
 
   const createNewNote = async (message: ReorChatMessage) => {
     const title = `${(getDisplayMessage(message) ?? `${new Date().toDateString()}`).substring(0, 20)}...`
-    openFileAndOpenEditor(title, getDisplayMessage(message))
+    openTabContent(title, getDisplayMessage(message))
   }
 
   useEffect(() => {
@@ -216,7 +211,6 @@ const ChatMessages: React.FC<ChatMessagesProps> = ({
 
         {isAddContextFiltersModalOpen && (
           <AddContextFiltersModal
-            vaultDirectory={vaultDirectory}
             isOpen={isAddContextFiltersModalOpen}
             onClose={() => setIsAddContextFiltersModalOpen(false)}
             chatFilters={chatFilters}

src/components/Chat/ChatsSidebar.tsx

@@ -4,7 +4,7 @@ import { RiChatNewFill, RiArrowDownSLine } from 'react-icons/ri'
 import { IoChatbubbles } from 'react-icons/io5'
 import posthog from 'posthog-js'
 import { ChatHistoryMetadata } from './hooks/use-chat-history'
-import { useChatContext } from '@/providers/ChatContext'
+import { useChatContext } from '@/contexts/ChatContext'
 
 export interface ChatItemProps {
   chatMetadata: ChatHistoryMetadata

src/components/Chat/ChatWrapper.tsx → src/components/Chat/index.tsx

@@ -11,15 +11,14 @@ import SimilarEntriesComponent from '../Sidebars/SemanticSidebar/SimilarEntriesC
 import '../../styles/chat.css'
 import ChatMessages, { AskOptions } from './ChatMessages'
 import { Chat } from './types'
-import { useChatContext } from '@/providers/ChatContext'
+import { useChatContext } from '@/contexts/ChatContext'
+import { useTabsContext } from '@/contexts/TabContext'
 
-interface ChatWrapperProps {
-  vaultDirectory: string
-  openFileAndOpenEditor: (path: string, optionalContentToWriteOnCreate?: string) => Promise<void>
+interface ChatComponentProps {
   showSimilarFiles: boolean
 }
 
-const ChatWrapper: React.FC<ChatWrapperProps> = ({ vaultDirectory, openFileAndOpenEditor, showSimilarFiles }) => {
+const ChatComponent: React.FC<ChatComponentProps> = ({ showSimilarFiles }) => {
   const [userTextFieldInput, setUserTextFieldInput] = useState<string>('')
   const [askText] = useState<AskOptions>(AskOptions.Ask)
   const [loadingResponse, setLoadingResponse] = useState<boolean>(false)
@@ -32,6 +31,7 @@ const ChatWrapper: React.FC<ChatWrapperProps> = ({ vaultDirectory, openFileAndOp
   const chatContainerRef = useRef<HTMLDivElement>(null)
 
   const { setCurrentChatHistory, currentChatHistory, chatFilters } = useChatContext()
+  const { openTabContent } = useTabsContext()
 
   useEffect(() => {
     const fetchDefaultLLM = async () => {
@@ -181,11 +181,9 @@ const ChatWrapper: React.FC<ChatWrapperProps> = ({ vaultDirectory, openFileAndOp
       <div className="mx-auto flex size-full flex-col overflow-hidden border-y-0 border-l-[0.001px] border-r-0 border-solid border-neutral-700 bg-dark-gray-c-eleven">
         <ChatMessages
           chatContainerRef={chatContainerRef}
-          openFileAndOpenEditor={openFileAndOpenEditor}
           isAddContextFiltersModalOpen={isAddContextFiltersModalOpen}
           setUserTextFieldInput={setUserTextFieldInput}
           defaultModelName={defaultModelName}
-          vaultDirectory={vaultDirectory}
           setIsAddContextFiltersModalOpen={setIsAddContextFiltersModalOpen}
           handlePromptSelection={handleNewChatMessage}
           askText={askText}
@@ -205,16 +203,15 @@ const ChatWrapper: React.FC<ChatWrapperProps> = ({ vaultDirectory, openFileAndOp
         <SimilarEntriesComponent
           similarEntries={currentContext}
           titleText="Context used in chat"
-          onFileSelect={(path: string) => {
-            openFileAndOpenEditor(path)
+          onSelect={(path: string) => {
+            openTabContent(path)
             posthog.capture('open_file_from_chat_context')
           }}
-          saveCurrentFile={() => Promise.resolve()}
           isLoadingSimilarEntries={false}
         />
       )}
     </div>
   )
 }
 
-export default ChatWrapper
+export default ChatComponent

src/components/Common/EmptyPage.tsx

@@ -1,14 +1,10 @@
 import React from 'react'
 import { ImFileEmpty } from 'react-icons/im'
-import { useModalOpeners } from '../../providers/ModalProvider'
+import { useModalOpeners } from '../../contexts/ModalContext'
 import NewNoteComponent from '../File/NewNote'
 import NewDirectoryComponent from '../File/NewDirectory'
 
-interface EmptyPageProps {
-  openFileAndOpenEditor: (filePath: string, optionalContentToWriteOnCreate?: string) => Promise<void>
-}
-
-const EmptyPage: React.FC<EmptyPageProps> = ({ openFileAndOpenEditor }) => {
+const EmptyPage: React.FC = () => {
   const { isNewNoteModalOpen, setIsNewNoteModalOpen, isNewDirectoryModalOpen, setIsNewDirectoryModalOpen } =
     useModalOpeners()
 
@@ -35,17 +31,8 @@ const EmptyPage: React.FC<EmptyPageProps> = ({ openFileAndOpenEditor }) => {
           Create a Folder
         </button>
       </div>
-      <NewNoteComponent
-        isOpen={isNewNoteModalOpen}
-        onClose={() => setIsNewNoteModalOpen(false)}
-        openFileAndOpenEditor={openFileAndOpenEditor}
-        currentOpenFilePath=""
-      />
-      <NewDirectoryComponent
-        isOpen={isNewDirectoryModalOpen}
-        onClose={() => setIsNewDirectoryModalOpen(false)}
-        currentOpenFilePath=""
-      />
+      <NewNoteComponent isOpen={isNewNoteModalOpen} onClose={() => setIsNewNoteModalOpen(false)} />
+      <NewDirectoryComponent isOpen={isNewDirectoryModalOpen} onClose={() => setIsNewDirectoryModalOpen(false)} />
     </div>
   )
 }

src/components/Common/SearchBarWithFilesSuggestion.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react'
 
 import InEditorBacklinkSuggestionsDisplay, { SuggestionsState } from '../Editor/BacklinkSuggestionsDisplay'
-import useFileInfoTree from '../Sidebars/FileSideBar/hooks/use-file-info-tree'
+import useFileInfoTreeHook from '../Sidebars/FileSideBar/hooks/use-file-info-tree'
 
 interface Props {
-  vaultDirectory: string
   searchText: string
   setSearchText: (text: string) => void
   onSelectSuggestion: (suggestion: string) => void
@@ -13,14 +12,16 @@ interface Props {
 }
 
 const SearchBarWithFilesSuggestion = ({
-  vaultDirectory,
   searchText,
   setSearchText,
   onSelectSuggestion,
   suggestionsState,
   setSuggestionsState,
 }: Props) => {
-  const { flattenedFiles } = useFileInfoTree(vaultDirectory)
+  const [sidebarWidth, setSidebarWidth] = useState(0)
+  const [vaultDirectory, setVaultDirectory] = useState<string | null>(null)
+
+  const { flattenedFiles } = useFileInfoTreeHook(vaultDirectory)
   const inputRef = useRef<HTMLInputElement>(null)
 
   const initializeSuggestionsStateOnFocus = () => {
@@ -39,7 +40,13 @@ const SearchBarWithFilesSuggestion = ({
     })
   }
 
-  const [sidebarWidth, setSidebarWidth] = useState(0)
+  useEffect(() => {
+    const setFileDirectory = async () => {
+      const windowDirectory = await window.electronStore.getVaultDirectoryForWindow()
+      setVaultDirectory(windowDirectory)
+    }
+    setFileDirectory()
+  }, [])
 
   useEffect(() => {
     // Calculate the width of the sidebar

src/components/Editor/EditorManager.tsx

@@ -1,30 +1,19 @@
 import React, { useEffect, useState } from 'react'
-import { Editor, EditorContent } from '@tiptap/react'
-import InEditorBacklinkSuggestionsDisplay, { SuggestionsState } from './BacklinkSuggestionsDisplay'
+import { EditorContent } from '@tiptap/react'
+import InEditorBacklinkSuggestionsDisplay from './BacklinkSuggestionsDisplay'
 import EditorContextMenu from './EditorContextMenu'
 import SearchBar from './Search/SearchBar'
+import { useFileContext } from '@/contexts/FileContext'
 
-interface EditorManagerProps {
-  editor: Editor | null
-  suggestionsState: SuggestionsState | null | undefined
-  flattenedFiles: { relativePath: string }[]
-  showSimilarFiles: boolean
-}
-
-const EditorManager: React.FC<EditorManagerProps> = ({
-  editor,
-  suggestionsState,
-  flattenedFiles,
-  showSimilarFiles,
-}) => {
+const EditorManager: React.FC = () => {
   const [showSearchBar, setShowSearchBar] = useState(false)
   const [menuVisible, setMenuVisible] = useState(false)
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 })
   const [editorFlex, setEditorFlex] = useState(true)
   const [showPlaceholder, setShowPlaceholder] = useState(false)
   const [placeholderPosition, setPlaceholderPosition] = useState({ top: 0, left: 0 })
 
-  useEffect(() => {}, [showSimilarFiles])
+  const { editor, suggestionsState, flattenedFiles } = useFileContext()
 
   const handleContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault()

src/components/Editor/utils.ts

@@ -0,0 +1,14 @@
+import { Editor } from '@tiptap/core'
+
+function getMarkdown(editor: Editor) {
+  // Fetch the current markdown content from the editor
+  const originalMarkdown = editor.storage.markdown.getMarkdown()
+  // Replace the escaped square brackets with unescaped ones
+  const modifiedMarkdown = originalMarkdown
+    .replace(/\\\[/g, '[') // Replaces \[ with [
+    .replace(/\\\]/g, ']') // Replaces \] wi ]
+
+  return modifiedMarkdown
+}
+
+export default getMarkdown