Writing assistant v2

src/components/Editor/AIEdit.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { useCompletion } from 'ai/react'
+import { ArrowUp, Sparkles, ShrinkIcon, ExpandIcon, Play } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+
+interface AiEditMenuProps {
+  selectedText: string
+  onEdit: (newText: string) => void
+}
+
+const AiEditMenu = ({ selectedText, onEdit }: AiEditMenuProps) => {
+  const { complete } = useCompletion({
+    api: '/api/generate',
+  })
+
+  const handleAction = async (action: string) => {
+    const prompt = `${action} the following text: ${selectedText}`
+    const completion = await complete(prompt)
+    if (completion) {
+      onEdit(completion)
+    }
+  }
+
+  return (
+    <Card className="w-[400px] border-gray-800 bg-[#1a1b1e]">
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <div className="flex items-center gap-2">
+          <Sparkles className="size-5 text-purple-500" />
+          <CardTitle className="text-sm text-gray-300">Ask AI to edit or generate...</CardTitle>
+        </div>
+        <Button size="icon" variant="ghost" className="text-purple-500">
+          <ArrowUp className="size-5" />
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1">
+          <p className="text-sm text-gray-400">Edit or review selection</p>
+          <div className="space-y-2">
+            <Button
+              variant="ghost"
+              className="w-full justify-start text-gray-300 hover:bg-gray-800"
+              onClick={() => handleAction('improve')}
+            >
+              <Sparkles className="mr-2 size-5 text-purple-500" />
+              Improve writing
+            </Button>
+            <Button
+              variant="ghost"
+              className="w-full justify-start text-gray-300 hover:bg-gray-800"
+              onClick={() => handleAction('fix grammar in')}
+            >
+              Fix grammar
+            </Button>
+            <Button
+              variant="ghost"
+              className="w-full justify-start text-gray-300 hover:bg-gray-800"
+              onClick={() => handleAction('make shorter')}
+            >
+              <ShrinkIcon className="mr-2 size-5 text-purple-500" />
+              Make shorter
+            </Button>
+            <Button
+              variant="ghost"
+              className="w-full justify-start text-gray-300 hover:bg-gray-800"
+              onClick={() => handleAction('make longer')}
+            >
+              <ExpandIcon className="mr-2 size-5 text-purple-500" />
+              Make longer
+            </Button>
+          </div>
+        </div>
+        <div className="space-y-1">
+          <p className="text-sm text-gray-400">Use AI to do more</p>
+          <Button variant="ghost" className="w-full justify-start text-gray-300 hover:bg-gray-800">
+            <Play className="mr-2 size-5 text-purple-500" />
+            Continue writing
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default AiEditMenu

src/components/Editor/DocumentStats.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react'
+import { Editor } from '@tiptap/react'
+
+interface DocumentStatsProps {
+  editor: Editor | null
+}
+
+const DocumentStats: React.FC<DocumentStatsProps> = ({ editor }) => {
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    const initDocumentStats = async () => {
+      const showStats = await window.electronStore.getDocumentStats()
+      setShow(showStats)
+    }
+
+    initDocumentStats()
+
+    const handleDocStatsChange = (event: Electron.IpcRendererEvent, value: boolean) => {
+      setShow(value)
+    }
+
+    window.ipcRenderer.on('show-doc-stats-changed', handleDocStatsChange)
+  }, [])
+
+  if (!editor || !show) return null
+
+  return (
+    <div className="absolute bottom-2 right-2 flex gap-4 text-sm text-gray-500">
+      <div>Characters: {editor.storage.characterCount.characters()}</div>
+      <div>Words: {editor.storage.characterCount.words()}</div>
+    </div>
+  )
+}
+
+export default DocumentStats

src/components/Editor/EditorManager.tsx

@@ -1,20 +1,19 @@
+/* eslint-disable react/button-has-type */
 import React, { useEffect, useState } from 'react'
-import { EditorContent } from '@tiptap/react'
-import InEditorBacklinkSuggestionsDisplay from './BacklinkSuggestionsDisplay'
+import { EditorContent, BubbleMenu } from '@tiptap/react'
 import EditorContextMenu from './EditorContextMenu'
 import SearchBar from './Search/SearchBar'
 import { useFileContext } from '@/contexts/FileContext'
-import { useContentContext } from '@/contexts/ContentContext'
+import DocumentStats from './DocumentStats'
+import AiEditMenu from './AIEdit'
 
 const EditorManager: React.FC = () => {
   const [showSearchBar, setShowSearchBar] = useState(false)
   const [contextMenuVisible, setContextMenuVisible] = useState(false)
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 })
   const [editorFlex, setEditorFlex] = useState(true)
-
-  const { editor, suggestionsState, vaultFilesFlattened } = useFileContext()
-  const [showDocumentStats, setShowDocumentStats] = useState(false)
-  const { openContent } = useContentContext()
+  const [showAIPopup, setShowAIPopup] = useState(false)
+  const { editor } = useFileContext()
 
   const handleContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault()
@@ -29,15 +28,6 @@ const EditorManager: React.FC = () => {
     if (contextMenuVisible) setContextMenuVisible(false)
   }
 
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    const { target } = event
-    if (target instanceof HTMLElement && target.getAttribute('data-backlink') === 'true') {
-      event.preventDefault()
-      const backlinkPath = target.textContent
-      if (backlinkPath) openContent(backlinkPath)
-    }
-  }
-
   useEffect(() => {
     const initEditorContentCenter = async () => {
       const isCenter = await window.electronStore.getEditorFlexCenter()
@@ -52,26 +42,40 @@ const EditorManager: React.FC = () => {
     window.ipcRenderer.on('editor-flex-center-changed', handleEditorChange)
   }, [])
 
-  useEffect(() => {
-    const initDocumentStats = async () => {
-      const showStats = await window.electronStore.getDocumentStats()
-      setShowDocumentStats(showStats)
-    }
-
-    initDocumentStats()
-
-    const handleDocStatsChange = (event: Electron.IpcRendererEvent, value: boolean) => {
-      setShowDocumentStats(value)
-    }
-
-    window.ipcRenderer.on('show-doc-stats-changed', handleDocStatsChange)
-  }, [])
-
   return (
     <div
       className="relative size-full cursor-text overflow-hidden bg-dark-gray-c-eleven py-4 text-slate-400 opacity-80"
       onClick={() => editor?.commands.focus()}
     >
+      {editor && (
+        <BubbleMenu
+          className="flex gap-2 rounded-lg border border-gray-700 bg-dark-gray-c-eleven p-2 shadow-lg"
+          editor={editor}
+          tippyOptions={{
+            duration: 1000,
+            placement: 'auto',
+            offset: [0, 10],
+            onHidden: () => {
+              setShowAIPopup(false)
+            },
+          }}
+        >
+          <div
+            onMouseDown={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+          >
+            {showAIPopup ? (
+              <AiEditMenu selectedText={editor.getText()} onEdit={() => {}} />
+            ) : (
+              <button onClick={() => setShowAIPopup(true)} className="rounded p-2 hover:bg-gray-700">
+                Ask AI
+              </button>
+            )}
+          </div>
+        </BubbleMenu>
+      )}
       <SearchBar editor={editor} showSearch={showSearchBar} setShowSearch={setShowSearchBar} />
       {contextMenuVisible && (
         <EditorContextMenu
@@ -82,33 +86,19 @@ const EditorManager: React.FC = () => {
         />
       )}
 
-      <div
-        className={`relative h-full ${editorFlex ? 'flex justify-center py-4 pl-4' : ''} ${showDocumentStats ? 'pb-3' : ''}`}
-      >
+      <div className={`relative h-full ${editorFlex ? 'flex justify-center py-4 pl-4' : ''}`}>
         <div className="relative size-full overflow-y-auto">
           <EditorContent
             className={`relative size-full bg-dark-gray-c-eleven ${editorFlex ? 'max-w-xl' : ''}`}
             style={{
               wordBreak: 'break-word',
             }}
             onContextMenu={handleContextMenu}
-            onClick={handleClick}
             editor={editor}
           />
         </div>
       </div>
-      {suggestionsState && (
-        <InEditorBacklinkSuggestionsDisplay
-          suggestionsState={suggestionsState}
-          suggestions={vaultFilesFlattened.map((file) => file.relativePath)}
-        />
-      )}
-      {editor && showDocumentStats && (
-        <div className="absolute bottom-2 right-2 flex gap-4 text-sm text-gray-500">
-          <div>Characters: {editor.storage.characterCount.characters()}</div>
-          <div>Words: {editor.storage.characterCount.words()}</div>
-        </div>
-      )}
+      <DocumentStats editor={editor} />
     </div>
   )
 }

src/contexts/FileContext.tsx

@@ -28,7 +28,6 @@ import {
   getNextAvailableFileNameGivenBaseName,
   sortFilesAndDirectories,
 } from '@/lib/file'
-import { SuggestionsState } from '@/components/Editor/BacklinkSuggestionsDisplay'
 import HighlightExtension, { HighlightData } from '@/components/Editor/HighlightExtension'
 import { RichTextLink } from '@/components/Editor/RichTextLink'
 import '@/styles/tiptap.scss'
@@ -49,15 +48,13 @@ type FileContextType = {
   navigationHistory: string[]
   addToNavigationHistory: (value: string) => void
   openOrCreateFile: (filePath: string, optionalContentToWriteOnCreate?: string) => Promise<void>
-  suggestionsState: SuggestionsState | null | undefined
   spellCheckEnabled: boolean
   highlightData: HighlightData
   noteToBeRenamed: string
   setNoteToBeRenamed: React.Dispatch<React.SetStateAction<string>>
   fileDirToBeRenamed: string
   setFileDirToBeRenamed: React.Dispatch<React.SetStateAction<string>>
   renameFile: (oldFilePath: string, newFilePath: string) => Promise<void>
-  setSuggestionsState: React.Dispatch<React.SetStateAction<SuggestionsState | null | undefined>>
   setSpellCheckEnabled: React.Dispatch<React.SetStateAction<boolean>>
   deleteFile: (path: string | undefined) => Promise<boolean>
   selectedDirectory: string | null
@@ -80,7 +77,6 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   const [expandedDirectories, setExpandedDirectories] = useState<Map<string, boolean>>(new Map())
   const [selectedDirectory, setSelectedDirectory] = useState<string | null>(null)
   const [currentlyOpenFilePath, setCurrentlyOpenFilePath] = useState<string | null>(null)
-  const [suggestionsState, setSuggestionsState] = useState<SuggestionsState | null>()
   const [needToWriteEditorContentToDisk, setNeedToWriteEditorContentToDisk] = useState<boolean>(false)
   const [needToIndexEditorContent, setNeedToIndexEditorContent] = useState<boolean>(false)
   const [spellCheckEnabled, setSpellCheckEnabled] = useState<boolean>(false)
@@ -369,15 +365,13 @@ export const FileProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
     navigationHistory,
     addToNavigationHistory,
     openOrCreateFile,
-    suggestionsState,
     spellCheckEnabled,
     highlightData,
     noteToBeRenamed,
     setNoteToBeRenamed,
     fileDirToBeRenamed,
     setFileDirToBeRenamed,
     renameFile,
-    setSuggestionsState,
     setSpellCheckEnabled,
     deleteFile,
     selectedDirectory,