qwe

app/components/Message.tsx

@@ -1,5 +1,10 @@
 import React, { useRef } from 'react';
 import { Box, Paper, Typography, Avatar, useMediaQuery, useTheme } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+// @ts-ignore  // 临时忽略类型声明缺失，等待官方类型包或自定义声明
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+// @ts-ignore
+import { dark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import type { Message as MessageType } from '../types/types';
 
 interface MessageProps {
@@ -8,7 +13,7 @@ interface MessageProps {
 }
 
 const Message: React.FC<MessageProps> = ({ message, isLast = false }) => {
-  const isUser = message.sender === 'user';
+  const isUser = message.role === 'user';
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const paperRef = useRef<HTMLDivElement>(null);
@@ -67,14 +72,49 @@ 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>
-            ))}
-          </div>
+          <ReactMarkdown
+            components={{
+//@ts-ignore  // 临时忽略类型声明缺失，等待官方类型包或自定义声明
+              code({ inline, className, children, ...props }) {
+                const match = /language-(\w+)/.exec(className || '');
+                return !inline && match ? (
+                  <SyntaxHighlighter
+                    style={dark}
+                    language={match[1]}
+                    PreTag="div"
+                    {...props}
+                  >
+                    {String(children).replace(/\n$/, '')}
+                  </SyntaxHighlighter>
+                ) : (
+                  <code className={className} {...props}>
+                    {children}
+                  </code>
+                );
+              },
+              p: ({ ...props }) => <Typography variant="body1" paragraph sx={{ margin: '0.5em 0' }} {...props} />,
+              h1: ({ ...props }) => <Typography variant="h4" gutterBottom {...props} />,
+              h2: ({ ...props }) => <Typography variant="h5" gutterBottom {...props} />,
+              h3: ({ ...props }) => <Typography variant="h6" gutterBottom {...props} />,
+              ul: ({ ...props }) => <ul style={{ paddingLeft: '1.5em', margin: '0.5em 0' }} {...props} />,
+              ol: ({ ...props }) => <ol style={{ paddingLeft: '1.5em', margin: '0.5em 0' }} {...props} />,
+              li: ({ ...props }) => <li style={{ margin: '0.25em 0' }} {...props} />,
+              a: ({ ...props }) => <a style={{ color: theme.palette.primary.main, textDecoration: 'underline' }} {...props} />,
+              blockquote: ({ ...props }) => (
+                <blockquote style={{ 
+                  borderLeft: `4px solid ${theme.palette.divider}`,
+                  marginLeft: 0,
+                  paddingLeft: '1em',
+                  fontStyle: 'italic',
+                  color: theme.palette.text.secondary
+                }} {...props} />
+              ),
+              strong: ({ ...props }) => <strong style={{ fontWeight: 600 }} {...props} />,
+              em: ({ ...props }) => <em style={{ fontStyle: 'italic' }} {...props} />
+            }}
+          >
+            {message.content}
+          </ReactMarkdown>
           
           <Typography 
             variant="caption"