fix UI & show mentionable content on added

package.json

@@ -45,7 +45,6 @@
     "@anthropic-ai/sdk": "^0.27.3",
     "@lexical/react": "^0.17.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-hover-card": "^1.1.2",
     "@tanstack/react-query": "^5.56.2",
     "diff": "^7.0.0",
     "fuzzysort": "^3.1.0",

src/components/chat-view/Chat.tsx

@@ -30,6 +30,10 @@ import {
   LLMAPIKeyInvalidException,
   LLMAPIKeyNotSetException,
 } from '../../utils/llm/exception'
+import {
+  getMentionableKey,
+  serializeMentionable,
+} from '../../utils/mentionable'
 import { readTFileContent } from '../../utils/obsidian'
 import { parseRequestMessages } from '../../utils/prompt'
 
@@ -87,6 +91,16 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
     }
     return newMessage
   })
+  const [addedBlockKey, setAddedBlockKey] = useState<string | null>(
+    props.selectedBlock
+      ? getMentionableKey(
+          serializeMentionable({
+            type: 'block',
+            ...props.selectedBlock,
+          }),
+        )
+      : null,
+  )
   const [chatMessages, setChatMessages] = useState<ChatMessage[]>([])
   const [focusedMessageId, setFocusedMessageId] = useState<string | null>(null)
   const [currentConversationId, setCurrentConversationId] =
@@ -356,6 +370,8 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
         ...data,
       }
 
+      setAddedBlockKey(getMentionableKey(serializeMentionable(mentionable)))
+
       if (focusedMessageId === inputMessage.id) {
         setInputMessage((prevInputMessage) => ({
           ...prevInputMessage,
@@ -498,6 +514,7 @@ const Chat = forwardRef<ChatRef, ChatProps>((props, ref) => {
           }))
         }}
         autoFocus
+        addedBlockKey={addedBlockKey}
       />
     </div>
   )

src/components/chat-view/chat-input/ChatUserInput.tsx

@@ -9,13 +9,16 @@ import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { useQuery } from '@tanstack/react-query'
 import { $nodesOfType, LexicalEditor, SerializedEditorState } from 'lexical'
+import { MarkdownView } from 'obsidian'
 import {
   forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react'
 import {
   deserializeMentionable,
@@ -26,6 +29,7 @@ import { useApp } from '../../../contexts/app-context'
 import { Mentionable, SerializedMentionable } from '../../../types/mentionable'
 import { fuzzySearch } from '../../../utils/fuzzy-search'
 import { getMentionableKey } from '../../../utils/mentionable'
+import { readTFileContent } from '../../../utils/obsidian'
 
 import MentionableBadge from './MentionableBadge'
 import { ModelSelect } from './ModelSelect'
@@ -53,6 +57,7 @@ export type ChatUserInputProps = {
   mentionables: Mentionable[]
   setMentionables: (mentionables: Mentionable[]) => void
   autoFocus?: boolean
+  addedBlockKey?: string | null
 }
 
 const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
@@ -65,6 +70,7 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
       mentionables,
       setMentionables,
       autoFocus = false,
+      addedBlockKey,
     },
     ref,
   ) => {
@@ -74,6 +80,16 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
     const contentEditableRef = useRef<HTMLDivElement>(null)
     const updaterRef = useRef<UpdaterPluginRef | null>(null)
 
+    const [displayedMentionableKey, setDisplayedMentionableKey] = useState<
+      string | null
+    >(addedBlockKey ?? null)
+
+    useEffect(() => {
+      if (addedBlockKey) {
+        setDisplayedMentionableKey(addedBlockKey)
+      }
+    }, [addedBlockKey])
+
     useImperativeHandle(ref, () => ({
       focus: () => {
         contentEditableRef.current?.focus()
@@ -120,6 +136,7 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
         return
       }
       setMentionables([...mentionables, mentionable])
+      setDisplayedMentionableKey(mentionableKey)
     }
 
     const handleMentionNodeMutation = (
@@ -196,6 +213,48 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
       })
     }
 
+    const { data: fileContent } = useQuery({
+      queryKey: [
+        'file',
+        displayedMentionableKey,
+        mentionables.map((m) => getMentionableKey(serializeMentionable(m))), // should be updated when mentionables change (especially on delete)
+      ],
+      queryFn: async () => {
+        if (!displayedMentionableKey) return null
+
+        const displayedMentionable = mentionables.find(
+          (m) =>
+            getMentionableKey(serializeMentionable(m)) ===
+            displayedMentionableKey,
+        )
+
+        if (!displayedMentionable) return null
+
+        if (
+          displayedMentionable.type === 'file' ||
+          displayedMentionable.type === 'current-file'
+        ) {
+          if (!displayedMentionable.file) return null
+          return await readTFileContent(displayedMentionable.file, app.vault)
+        } else if (displayedMentionable.type === 'block') {
+          const fileContent = await readTFileContent(
+            displayedMentionable.file,
+            app.vault,
+          )
+
+          return fileContent
+            .split('\n')
+            .slice(
+              displayedMentionable.startLine - 1,
+              displayedMentionable.endLine,
+            )
+            .join('\n')
+        }
+
+        return null
+      },
+    })
+
     return (
       <div className="smtcmp-chat-user-input-container">
         {mentionables.length > 0 && (
@@ -205,11 +264,49 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
                 key={getMentionableKey(serializeMentionable(m))}
                 mentionable={m}
                 onDelete={() => handleMentionableDelete(m)}
+                onClick={() => {
+                  const mentionableKey = getMentionableKey(
+                    serializeMentionable(m),
+                  )
+                  if (
+                    (m.type === 'current-file' ||
+                      m.type === 'file' ||
+                      m.type === 'block') &&
+                    m.file &&
+                    mentionableKey === displayedMentionableKey
+                  ) {
+                    setDisplayedMentionableKey(null)
+
+                    // Open the file if clicked again
+                    const existingLeaf = app.workspace
+                      .getLeavesOfType('markdown')
+                      .find(
+                        (leaf) =>
+                          leaf.view instanceof MarkdownView &&
+                          leaf.view.file?.path === m.file?.path,
+                      )
+
+                    if (existingLeaf) {
+                      app.workspace.setActiveLeaf(existingLeaf, { focus: true })
+                    } else {
+                      const leaf = app.workspace.getLeaf('tab')
+                      leaf.openFile(m.file)
+                    }
+                  } else {
+                    setDisplayedMentionableKey(mentionableKey)
+                  }
+                }}
               />
             ))}
           </div>
         )}
 
+        {fileContent && (
+          <div className="smtcmp-chat-user-input-file-content-preview">
+            {fileContent}
+          </div>
+        )}
+
         <LexicalComposer initialConfig={initialConfig}>
           {/* 
             There was two approach to make mentionable node copy and pasteable.