improvement(chat-client): added markdown support

Author: emir-karabeg

sim/app/chat/[subdomain]/components/chat-client.tsx

@@ -2,6 +2,7 @@
 
 import { KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react'
 import { ArrowUp, Loader2, Lock, Mail } from 'lucide-react'
+import ReactMarkdown from 'react-markdown'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { OTPInputForm } from '@/components/ui/input-otp-form'
@@ -30,6 +31,15 @@ interface ChatConfig {
   authType?: 'public' | 'password' | 'email'
 }
 
+// Markdown renderer component with proper styling
+function MarkdownRenderer({ content }: { content: string }) {
+  return (
+    <div className="prose dark:prose-invert max-w-none text-base leading-relaxed [&>*]:text-base [&>*]:leading-relaxed text-[#0D0D0D] dark:text-gray-100 [&>*]:text-[#0D0D0D] [&>*]:dark:text-gray-100 [&>p]:my-1 [&>p+p]:mt-3 [&>ul]:my-1 [&>ol]:my-1 [&>h1]:mb-2 [&>h2]:mb-2 [&>h3]:mb-1">
+      <ReactMarkdown>{content}</ReactMarkdown>
+    </div>
+  )
+}
+
 // ChatGPT-style message component
 function ClientChatMessage({ message }: { message: ChatMessage }) {
   // Check if content is a JSON object
@@ -68,7 +78,7 @@ function ClientChatMessage({ message }: { message: ChatMessage }) {
               {isJsonObject ? (
                 <pre>{JSON.stringify(message.content, null, 2)}</pre>
               ) : (
-                <span>{message.content}</span>
+                <MarkdownRenderer content={message.content as string} />
               )}
             </div>
           </div>