init

src/components/chat-view/MarkdownReferenceBlock.tsx

@@ -0,0 +1,75 @@
+import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
+
+import { useApp } from '../../contexts/AppContext'
+import { useDarkModeContext } from '../../contexts/DarkModeContext'
+import { openMarkdownFile, readTFileContent } from '../../utils/obsidian'
+
+import { MemoizedSyntaxHighlighterWrapper } from './SyntaxHighlighterWrapper'
+
+export default function MarkdownReferenceBlock({
+  filename,
+  startLine,
+  endLine,
+  language,
+}: PropsWithChildren<{
+  filename: string
+  startLine: number
+  endLine: number
+  language?: string
+}>) {
+  const app = useApp()
+  const { isDarkMode } = useDarkModeContext()
+  const [blockContent, setBlockContent] = useState<string | null>(null)
+
+  const wrapLines = useMemo(() => {
+    return !language || ['markdown'].includes(language)
+  }, [language])
+
+  useEffect(() => {
+    async function fetchBlockContent() {
+      const file = app.vault.getFileByPath(filename)
+      if (!file) {
+        setBlockContent(null)
+        return
+      }
+      const fileContent = await readTFileContent(file, app.vault)
+      const content = fileContent
+        .split('\n')
+        .slice(startLine - 1, endLine)
+        .join('\n')
+      setBlockContent(content)
+    }
+
+    fetchBlockContent()
+  }, [filename, startLine, endLine, app.vault])
+
+  const handleClick = () => {
+    openMarkdownFile(app, filename, startLine)
+  }
+
+  // TODO: Update styles
+  return (
+    blockContent && (
+      <div
+        className={`infio-chat-code-block ${filename ? 'has-filename' : ''}`}
+        onClick={handleClick}
+      >
+        <div className={'infio-chat-code-block-header'}>
+          {filename && (
+            <div className={'infio-chat-code-block-header-filename'}>
+              {filename}
+            </div>
+          )}
+        </div>
+        <MemoizedSyntaxHighlighterWrapper
+          isDarkMode={isDarkMode}
+          language={language}
+          hasFilename={!!filename}
+          wrapLines={wrapLines}
+        >
+          {blockContent}
+        </MemoizedSyntaxHighlighterWrapper>
+      </div>
+    )
+  )
+}