show file preview on MentionableBadge & go to file on click

package.json

@@ -45,6 +45,7 @@
     "@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",
@@ -62,4 +63,4 @@
     "remark-gfm": "^4.0.0",
     "uuid": "^10.0.0"
   }
-}
+}

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

@@ -1,6 +1,10 @@
+import * as HoverCard from '@radix-ui/react-hover-card'
+import { useQuery } from '@tanstack/react-query'
 import { X } from 'lucide-react'
+import { MarkdownView } from 'obsidian'
 import { PropsWithChildren } from 'react'
 
+import { useApp } from '../../../contexts/app-context'
 import {
   Mentionable,
   MentionableBlock,
@@ -34,12 +38,44 @@ function FileBadge({
   mentionable: MentionableFile
   onDelete: () => void
 }) {
+  const app = useApp()
+  const { data: fileContent } = useQuery({
+    queryKey: ['file', mentionable.file.path],
+    queryFn: () => app.vault.cachedRead(mentionable.file),
+  })
+
+  const handleClick = () => {
+    const existingLeaf = app.workspace
+      .getLeavesOfType('markdown')
+      .find(
+        (leaf) =>
+          leaf.view instanceof MarkdownView &&
+          leaf.view.file?.path === mentionable.file.path,
+      )
+
+    if (existingLeaf) {
+      app.workspace.setActiveLeaf(existingLeaf, { focus: true })
+    } else {
+      const leaf = app.workspace.getLeaf('tab')
+      leaf.openFile(mentionable.file)
+    }
+  }
+
   return (
-    <BadgeBase onDelete={onDelete}>
-      <div className="smtcmp-chat-user-input-file-badge-name">
-        <span>{mentionable.file.name}</span>
-      </div>
-    </BadgeBase>
+    <HoverCard.Root>
+      <HoverCard.Trigger onClick={handleClick}>
+        <BadgeBase onDelete={onDelete}>
+          <div className="smtcmp-chat-user-input-file-badge-name">
+            <span>{mentionable.file.name}</span>
+          </div>
+        </BadgeBase>
+      </HoverCard.Trigger>
+      <HoverCard.Portal>
+        <HoverCard.Content className="smtcmp-chat-mentionable-hover-content">
+          {fileContent}
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
   )
 }
 
@@ -50,15 +86,31 @@ function CurrentFileBadge({
   mentionable: MentionableCurrentFile
   onDelete: () => void
 }) {
+  const app = useApp()
+  const { data: fileContent } = useQuery({
+    queryKey: ['file', mentionable.file?.path],
+    queryFn: () =>
+      mentionable.file ? app.vault.cachedRead(mentionable?.file) : null,
+  })
+
   return mentionable.file ? (
-    <BadgeBase onDelete={onDelete}>
-      <div className="smtcmp-chat-user-input-file-badge-name">
-        <span>{`${mentionable.file.name}`}</span>
-      </div>
-      <div className="smtcmp-chat-user-input-file-badge-name-block-suffix">
-        {' (Current File)'}
-      </div>
-    </BadgeBase>
+    <HoverCard.Root>
+      <HoverCard.Trigger>
+        <BadgeBase onDelete={onDelete}>
+          <div className="smtcmp-chat-user-input-file-badge-name">
+            <span>{`${mentionable.file.name}`}</span>
+          </div>
+          <div className="smtcmp-chat-user-input-file-badge-name-block-suffix">
+            {' (Current File)'}
+          </div>
+        </BadgeBase>
+      </HoverCard.Trigger>
+      <HoverCard.Portal>
+        <HoverCard.Content className="smtcmp-chat-mentionable-hover-content">
+          {fileContent}
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
   ) : null
 }
 

styles.css

@@ -252,6 +252,20 @@ button:not(.clickable-icon).smtcmp-chat-list-dropdown {
   color: var(--color-base-50);
 }
 
+.smtcmp-chat-mentionable-hover-content {
+  background-color: var(--background-primary);
+  border-radius: var(--radius-m);
+  border: 1px solid var(--background-modifier-border);
+  padding: var(--size-4-2);
+  box-shadow: var(--shadow-s);
+  white-space: pre-line;
+  max-width: 300px;
+  z-index: 1000;
+  max-height: 300px;
+  overflow-y: auto;
+  font-size: var(--font-ui-small);
+}
+
 /**
  * ChatUserInput
  */