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,40 @@ 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-normal 
+      text-[#0D0D0D] dark:text-gray-100
+      [&>*]:text-base
+      [&>*]:leading-normal
+      [&>p]:my-[0.35em]
+      [&>p+p]:mt-[0.7em]
+      [&>ul]:my-[0.35em]
+      [&>ol]:my-[0.35em]
+      [&>h1]:text-xl [&>h1]:font-semibold [&>h1]:mb-[0.5em] [&>h1]:mt-[0.7em]
+      [&>h2]:text-lg [&>h2]:font-semibold [&>h2]:mb-[0.4em] [&>h2]:mt-[0.7em]
+      [&>h3]:text-base [&>h3]:font-semibold [&>h3]:mb-[0.3em] [&>h3]:mt-[0.6em]
+      [&>ul>li]:pl-0 [&>ol>li]:pl-0 
+      [&>ol>li]:relative [&>ul>li]:relative
+      [&>ul>li]:pl-5 [&>ol>li]:pl-5
+      [&>ul>li]:mb-[0.2em] [&>ol>li]:mb-[0.2em]
+      [&>ul]:pl-1 [&>ol]:pl-1
+      [&>pre]:bg-gray-100 [&>pre]:dark:bg-gray-800 [&>pre]:p-3 [&>pre]:rounded-md [&>pre]:my-[0.7em]
+      [&>code]:text-[0.9em] [&>code]:bg-gray-100 [&>code]:dark:bg-gray-800 [&>code]:px-1 [&>code]:py-0.5 [&>code]:rounded-md
+      [&>p>code]:text-[0.9em] [&>p>code]:bg-gray-100 [&>p>code]:dark:bg-gray-800 [&>p>code]:px-1 [&>p>code]:py-0.5 [&>p>code]:rounded-md
+      [&>blockquote]:border-l-4 [&>blockquote]:border-gray-200 [&>blockquote]:pl-4 [&>blockquote]:py-0.5 [&>blockquote]:my-[0.7em] [&>blockquote]:italic [&>blockquote]:text-gray-700 [&>blockquote]:dark:text-gray-300
+      [&>table]:border-collapse [&>table]:w-full [&>table]:my-[0.7em]
+      [&>table>thead>tr>th]:border [&>table>thead>tr>th]:border-gray-300 [&>table>thead>tr>th]:dark:border-gray-700 [&>table>thead>tr>th]:p-2 [&>table>thead>tr>th]:bg-gray-100 [&>table>thead>tr>th]:dark:bg-gray-800
+      [&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:border-gray-300 [&>table>tbody>tr>td]:dark:border-gray-700 [&>table>tbody>tr>td]:p-2"
+    >
+      <ReactMarkdown>{content}</ReactMarkdown>
+    </div>
+  )
+}
+
 // ChatGPT-style message component
 function ClientChatMessage({ message }: { message: ChatMessage }) {
   // Check if content is a JSON object
@@ -68,7 +103,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>