mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-25 15:25:50 +00:00
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import React from 'react'
|
||
import { Bot, User } from 'lucide-react'
|
||
|
||
interface ChatMessage {
|
||
id: string;
|
||
role: 'user' | 'ai';
|
||
content: string;
|
||
timestamp: number;
|
||
}
|
||
|
||
interface MessageBubbleProps {
|
||
message: ChatMessage;
|
||
}
|
||
|
||
/**
|
||
* 优化后的消息气泡组件
|
||
* 使用 React.memo 避免不必要的重新渲染
|
||
*/
|
||
export const MessageBubble = React.memo<MessageBubbleProps>(({ message }) => {
|
||
return (
|
||
<div className={`message-row ${message.role}`}>
|
||
<div className="avatar">
|
||
{message.role === 'ai' ? <Bot size={24} /> : <User size={24} />}
|
||
</div>
|
||
<div className="bubble">
|
||
<div className="content">{message.content}</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}, (prevProps, nextProps) => {
|
||
// 自定义比较函数：只有内容或ID变化时才重新渲染
|
||
return prevProps.message.content === nextProps.message.content &&
|
||
prevProps.message.id === nextProps.message.id
|
||
})
|
||
|
||
MessageBubble.displayName = 'MessageBubble'
|