feat: add code highlight in markdown

Author: Shivansh-yadav13

app/components/Message.js

@@ -1,4 +1,6 @@
 import ReactMarkdown from 'react-markdown';
+import {dark} from "react-syntax-highlighter/src/styles/hljs";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 
 const Message = ({ message, isUser }) => {
   let containerClass = "bg-gray-50";
@@ -27,7 +29,32 @@ const Message = ({ message, isUser }) => {
       )}
 
       <div className="flex flex-col text-sm sm:text-base flex-1 gap-y-4 mt-1">
-        <ReactMarkdown>{message}</ReactMarkdown>
+        <ReactMarkdown
+            children={message}
+            components={{
+              code(props) {
+                const {children, className, node, ...rest} = props
+                const match = /language-(\w+)/.exec(className || '')
+                return match ? (
+                    <SyntaxHighlighter
+                        {...rest}
+                        PreTag="div"
+                        children={String(children).replace(/\n$/, '')}
+                        language={match[1]}
+                        style={dark}
+                    />
+                ) : (
+                    <code {...rest} className={className}>
+                      {children}
+                    </code>
+                )
+              }
+            }}
+        />
+        {/*<ReactMarkdown*/}
+        {/*>*/}
+        {/*  {message}*/}
+        {/*</ReactMarkdown>*/}
       </div>
     </div>
   );