q'weqwe

app/components/Message.tsx

@@ -1,5 +1,8 @@
 import React, { useRef } from 'react';
 import { Box, Paper, Typography, Avatar, useMediaQuery, useTheme } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
 import type { Message as MessageType } from '../types/types';
 
 interface MessageProps {
@@ -11,7 +14,7 @@ const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
   const isUser = message.sender === 'user';
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const paperRef = useRef(null);
+  const paperRef = useRef<HTMLDivElement>(null);
   
   // 计算气泡的borderRadius
   const borderRadius = isUser 
@@ -67,12 +70,61 @@ const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
           }}
         >
           <div style={{ lineHeight: 1.6 }}>
-            {message.content.split('\n').map((line, index) => (
-              <React.Fragment key={index}>
-                {line}
-                {index < message.content.split('\n').length - 1 && <br />}
-              </React.Fragment>
-            ))}
+            {isUser ? (
+              // 用户消息仍然使用普通文本展示
+              message.content.split('\n').map((line: string, index: number) => (
+                <React.Fragment key={index}>
+                  {line}
+                  {index < message.content.split('\n').length - 1 && <br />}
+                </React.Fragment>
+              ))
+            ) : (
+              // 大模型回复使用markdown格式展示
+              <ReactMarkdown
+                rehypePlugins={[rehypeRaw]}
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  // 自定义标题样式
+                  h1: (props: any) => (
+                    <h1 style={{ fontSize: '1.4rem', fontWeight: 'bold', margin: '12px 0 8px 0' }} {...props} />
+                  ),
+                  h2: (props: any) => (
+                    <h2 style={{ fontSize: '1.2rem', fontWeight: 'bold', margin: '10px 0 6px 0' }} {...props} />
+                  ),
+                  h3: (props: any) => (
+                    <h3 style={{ fontSize: '1.1rem', fontWeight: 'bold', margin: '8px 0 4px 0' }} {...props} />
+                  ),
+                  // 自定义列表样式
+                  ul: (props: any) => (
+                    <ul style={{ paddingLeft: '20px', margin: '6px 0' }} {...props} />
+                  ),
+                  ol: (props: any) => (
+                    <ol style={{ paddingLeft: '20px', margin: '6px 0' }} {...props} />
+                  ),
+                  li: (props: any) => (
+                    <li style={{ margin: '4px 0' }} {...props} />
+                  ),
+                  // 自定义代码块样式
+                  // 简化代码块处理，移除对 node 对象内部属性的访问
+                  code: (props: any) => (
+                    <code style={{ backgroundColor: '#f5f5f5', padding: '2px 4px', borderRadius: '3px', fontFamily: 'monospace' }} {...props} />
+                  ),
+                  pre: (props: any) => (
+                    <pre style={{ backgroundColor: '#f5f5f5', padding: '12px', borderRadius: '6px', overflowX: 'auto', fontFamily: 'monospace', fontSize: '0.9rem' }} {...props} />
+                  ),
+                  // 自定义引用样式
+                  blockquote: (props: any) => (
+                    <blockquote style={{ borderLeft: '4px solid #ccc', margin: '10px 0', paddingLeft: '12px', color: '#666' }} {...props} />
+                  ),
+                  // 自定义链接样式
+                  a: (props: any) => (
+                    <a style={{ color: theme.palette.primary.main, textDecoration: 'underline' }} {...props} />
+                  )
+                }}
+              >
+                {message.content}
+              </ReactMarkdown>
+            )}
           </div>
           
           <Typography