feat(ui): changed Markdown rendering library

- Markdown render library changed to [react-markdown](https://github.com/remarkjs/react-markdown) - Added basic hightling via [rehype-highlight](https://github.com/rehypejs/rehype-highlight) Signed-off-by: minicx <[email protected]>
ItzCrazyKns · Dec 13, 2024 · 7ba6c7d · 7ba6c7d
1 parent 2c5ca94
commit 7ba6c7d
Show file tree

Hide file tree

Showing 3 changed files with 715 additions and 10 deletions.
diff --git a/ui/components/MessageBox.tsx b/ui/components/MessageBox.tsx
@@ -12,7 +12,8 @@ import {
   Layers3,
   Plus,
 } from 'lucide-react';
-import Markdown from 'markdown-to-jsx';
+import Markdown from 'react-markdown';
+import highlight from 'rehype-highlight';
 import Copy from './MessageActions/Copy';
 import Rewrite from './MessageActions/Rewrite';
 import MessageSources from './MessageSources';
@@ -54,7 +55,7 @@ const MessageBox = ({
         message.content.replace(
           regex,
           (_, number) =>
-            `<a href="${message.sources?.[number - 1]?.metadata?.url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${number}</a>`,
+            `[${number}](${message.sources?.[number - 1]?.metadata?.url})`,
         ),
       );
     }
@@ -110,6 +111,18 @@ const MessageBox = ({
                   'prose prose-h1:mb-3 prose-h2:mb-2 prose-h2:mt-6 prose-h2:font-[800] prose-h3:mt-4 prose-h3:mb-1.5 prose-h3:font-[600] dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 font-[400]',
                   'max-w-none break-words text-black dark:text-white',
                 )}
+                rehypePlugins={[[highlight, { detect: true }]]}
+                components={{
+                  a(props) {
+                    return (
+                      <a
+                        {...props}
+                        target="_blank"
+                        className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative"
+                      />
+                    );
+                  },
+                }}
               >
                 {parsedMessage}
               </Markdown>

diff --git a/ui/package.json b/ui/package.json
@@ -18,13 +18,14 @@
     "clsx": "^2.1.0",
     "langchain": "^0.1.30",
     "lucide-react": "^0.363.0",
-    "markdown-to-jsx": "^7.6.2",
     "next": "14.1.4",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-markdown": "^9.0.1",
     "react-text-to-speech": "^0.14.5",
     "react-textarea-autosize": "^8.5.3",
+    "rehype-highlight": "^7.0.1",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
     "yet-another-react-lightbox": "^3.17.2",