支持markdown解析

package.json

@@ -20,11 +20,13 @@
     "openai": "^4.83.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.3",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@shadcn/ui": "^0.0.4",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^22.13.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",

src/components/ChatUI.tsx

@@ -21,6 +21,7 @@ import {
 import {generateAICharacters} from "@/config/aiCharacters";
 import { groups } from "@/config/groups";
 import type { AICharacter } from "@/config/aiCharacters";
+import ReactMarkdown from 'react-markdown';
 
 // 使用本地头像数据，避免外部依赖
 const getAvatarData = (name: string) => {
@@ -362,7 +363,11 @@ const ChatUI = () => {
                   <div className={`mt-1 p-3 rounded-lg shadow-sm ${
                     message.sender.name === "我" ? "bg-blue-500 text-white text-left" : "bg-white"
                   }`}>
-                    {message.content}
+                    <ReactMarkdown className={`prose dark:prose-invert max-w-none ${
+                      message.sender.name === "我" ? "text-white [&_*]:text-white" : ""
+                    }`}>
+                      {message.content}
+                    </ReactMarkdown>
                     {message.isAI && isTyping && currentMessageRef.current === message.id && (
                       <span className="typing-indicator ml-1">▋</span>
                     )}

tailwind.config.js

@@ -53,5 +53,8 @@ module.exports = {
   		}
   	}
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require("tailwindcss-animate")
+  ],
 }