light/dark code highlight

components/Chat/Chat.tsx

@@ -9,11 +9,12 @@ interface Props {
   model: OpenAIModel;
   messages: Message[];
   loading: boolean;
+  lightMode: "light" | "dark";
   onSend: (message: Message) => void;
   onSelect: (model: OpenAIModel) => void;
 }
 
-export const Chat: FC<Props> = ({ model, messages, loading, onSend, onSelect }) => {
+export const Chat: FC<Props> = ({ model, messages, loading, lightMode, onSend, onSelect }) => {
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = () => {
@@ -44,7 +45,10 @@ export const Chat: FC<Props> = ({ model, messages, loading, onSend, onSelect })
 
             {messages.map((message, index) => (
               <div key={index}>
-                <ChatMessage message={message} />
+                <ChatMessage
+                  message={message}
+                  lightMode={lightMode}
+                />
               </div>
             ))}
             {loading && <ChatLoader />}

components/Chat/ChatMessage.tsx

@@ -5,9 +5,10 @@ import { CodeBlock } from "../Markdown/CodeBlock";
 
 interface Props {
   message: Message;
+  lightMode: "light" | "dark";
 }
 
-export const ChatMessage: FC<Props> = ({ message }) => {
+export const ChatMessage: FC<Props> = ({ message, lightMode }) => {
   return (
     <div
       className={`flex justify-center px-[120px] py-[30px] whitespace-pre-wrap] ${message.role === "assistant" ? "dark:bg-[#444654] dark:text-neutral-100 bg-neutral-100 text-neutral-900 border border-neutral-300 dark:border-none" : "dark:bg-[#343541] dark:text-white text-neutral-900"}`}
@@ -26,6 +27,7 @@ export const ChatMessage: FC<Props> = ({ message }) => {
                     key={Math.random()}
                     language={match[1]}
                     value={String(children).replace(/\n$/, "")}
+                    lightMode={lightMode}
                     {...props}
                   />
                 ) : (