From ebfb10391155c1ed1a88a7304ac2cb233c0dae0e Mon Sep 17 00:00:00 2001
From: ItzCrazyKns <95534749+ItzCrazyKns@users.noreply.github.com>
Date: Tue, 5 Aug 2025 19:11:09 +0530
Subject: [PATCH] feat(message-box): add syntax highlighted code

---
 src/components/MessageBox.tsx            |  5 ++++
 src/components/SyntaxHighlightedCode.tsx | 30 ++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/SyntaxHighlightedCode.tsx

diff --git a/src/components/MessageBox.tsx b/src/components/MessageBox.tsx
index dc43aa2..d567aa8 100644
--- a/src/components/MessageBox.tsx
+++ b/src/components/MessageBox.tsx
@@ -20,6 +20,8 @@ import SearchImages from './SearchImages';
 import SearchVideos from './SearchVideos';
 import { useSpeech } from 'react-text-to-speech';
 import ThinkBox from './ThinkBox';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { SyntaxHighlightedCode } from './SyntaxHighlightedCode';
 
 const ThinkTagProcessor = ({
   children,
@@ -136,6 +138,9 @@ const MessageBox = ({
           thinkingEnded: thinkingEnded,
         },
       },
+      code: {
+        component: SyntaxHighlightedCode,
+      },
     },
   };
 
diff --git a/src/components/SyntaxHighlightedCode.tsx b/src/components/SyntaxHighlightedCode.tsx
new file mode 100644
index 0000000..2615786
--- /dev/null
+++ b/src/components/SyntaxHighlightedCode.tsx
@@ -0,0 +1,30 @@
+import React, { HTMLProps } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import {
+  coldarkDark,
+  coldarkCold,
+} from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+export const SyntaxHighlightedCode = (props: HTMLProps<HTMLDivElement>) => {
+  const isDarkTheme = document.documentElement.classList.contains('dark');
+  const language = props.className?.match(/lang-([a-zA-Z0-9_-]+)/)![1];
+
+  return language ? (
+    <div className="not-prose">
+      <SyntaxHighlighter
+        customStyle={{
+          margin: 0,
+          backgroundColor: isDarkTheme ? '#111111' : '#f3f3ee',
+        }}
+        language={language}
+        style={isDarkTheme ? coldarkDark : coldarkCold}
+      >
+        {props.children as string}
+      </SyntaxHighlighter>
+    </div>
+  ) : (
+    <code className="inline bg-light-100 dark:bg-dark-100 px-2 py-1 rounded-lg text-sm not-prose">
+      {props.children}
+    </code>
+  );
+};