diff --git a/app/components/ChatMessage.tsx b/app/components/ChatMessage.tsx index 38dffbc..8e5544c 100644 --- a/app/components/ChatMessage.tsx +++ b/app/components/ChatMessage.tsx @@ -2,11 +2,11 @@ import React from 'react'; interface ChatMessageProps { content: string; - sender: 'user' | 'bot'; + role: 'user' | 'assistant'; timestamp: Date; } -export const ChatMessage: React.FC = ({ content, sender, timestamp }) => { +export const ChatMessage: React.FC = ({ content, role, timestamp }) => { // 格式化时间戳 const formattedTime = timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); @@ -14,14 +14,14 @@ export const ChatMessage: React.FC = ({ content, sender, times const messageParts = content.split('\n'); return ( -
- {sender === 'bot' && ( +
+ {role === 'assistant' && (
AI
)} -
+
{messageParts.map((part, index) => ( {part} @@ -30,7 +30,7 @@ export const ChatMessage: React.FC = ({ content, sender, times ))}
- {sender === 'user' && ( + {role === 'user' && (
diff --git a/app/components/Message.tsx b/app/components/Message.tsx index 98f1116..c253cfc 100644 --- a/app/components/Message.tsx +++ b/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 = ({ 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(null); @@ -67,14 +72,49 @@ const Message: React.FC = ({ message, isLast = false }) => { } }} > -
- {message.content.split('\n').map((line, index) => ( - - {line} - {index < message.content.split('\n').length - 1 &&
} -
- ))} -
+ + {String(children).replace(/\n$/, '')} + + ) : ( + + {children} + + ); + }, + p: ({ ...props }) => , + h1: ({ ...props }) => , + h2: ({ ...props }) => , + h3: ({ ...props }) => , + ul: ({ ...props }) =>