use SyntaxHighlighterWrapper for mentionable preview

glowingjade · Oct 23, 2024 · e3f1f3e · e3f1f3e
1 parent e7030b6
commit e3f1f3e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/chat-view/chat-input/ChatUserInput.tsx b/src/components/chat-view/chat-input/ChatUserInput.tsx
@@ -26,10 +26,12 @@ import {
 } from 'src/utils/mentionable'
 
 import { useApp } from '../../../contexts/app-context'
+import { useDarkModeContext } from '../../../contexts/dark-mode-context'
 import { Mentionable, SerializedMentionable } from '../../../types/mentionable'
 import { fuzzySearch } from '../../../utils/fuzzy-search'
 import { getMentionableKey } from '../../../utils/mentionable'
 import { readTFileContent } from '../../../utils/obsidian'
+import { MemoizedSyntaxHighlighterWrapper } from '../SyntaxHighlighterWrapper'
 
 import MentionableBadge from './MentionableBadge'
 import { ModelSelect } from './ModelSelect'
@@ -76,6 +78,7 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
     ref,
   ) => {
     const app = useApp()
+    const { isDarkMode } = useDarkModeContext()
 
     const editorRef = useRef<LexicalEditor | null>(null)
     const contentEditableRef = useRef<HTMLDivElement>(null)
@@ -309,7 +312,14 @@ const ChatUserInput = forwardRef<ChatUserInputRef, ChatUserInputProps>(
 
         {fileContent && (
           <div className="smtcmp-chat-user-input-file-content-preview">
-            {fileContent}
+            <MemoizedSyntaxHighlighterWrapper
+              isDarkMode={isDarkMode}
+              language="markdown"
+              hasFilename={false}
+              wrapLines={false}
+            >
+              {fileContent}
+            </MemoizedSyntaxHighlighterWrapper>
           </div>
         )}
 

diff --git a/styles.css b/styles.css
@@ -304,8 +304,7 @@ button:not(.clickable-icon).smtcmp-chat-list-dropdown {
   background-color: var(--background-primary);
   border-radius: var(--radius-s);
   border: 1px solid var(--background-modifier-border);
-  padding: var(--size-4-2);
-  max-height: 400px;
+  max-height: 350px;
   overflow-y: auto;
   white-space: pre-line;
 }