44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ChatMessageProps {
|
|
content: string;
|
|
role: 'user' | 'assistant';
|
|
timestamp: Date;
|
|
}
|
|
|
|
export const ChatMessage: React.FC<ChatMessageProps> = ({ content, role, timestamp }) => {
|
|
// 格式化时间戳
|
|
const formattedTime = timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
|
|
// 将消息内容按换行符分割
|
|
const messageParts = content.split('\n');
|
|
|
|
return (
|
|
<div className={`flex items-end mb-4 ${role === 'user' ? 'justify-end' : 'justify-start'}`}>
|
|
{role === 'assistant' && (
|
|
<div className="user-avatar mr-2">
|
|
<span>AI</span>
|
|
</div>
|
|
)}
|
|
|
|
<div className={`p-3 rounded-lg ${role === 'user' ? 'message-user' : 'message-bot'}`}>
|
|
{messageParts.map((part, index) => (
|
|
<React.Fragment key={index}>
|
|
{part}
|
|
{index < messageParts.length - 1 && <br />}
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
|
|
{role === 'user' && (
|
|
<div className="user-avatar ml-2">
|
|
<span>我</span>
|
|
</div>
|
|
)}
|
|
|
|
<span className="text-xs text-gray-500 ml-2 opacity-70">
|
|
{formattedTime}
|
|
</span>
|
|
</div>
|
|
);
|
|
}; |