import React from 'react';
|
import { RobotOutlined, UserOutlined } from '@ant-design/icons';
|
import './ConversationList.css';
|
|
/**
|
* 单条对话组件
|
* 展示单条对话消息
|
*/
|
const ConversationItem = ({ item, contactName }) => {
|
const isRobot = item.speaker === 'Robot';
|
|
// 格式化时间戳
|
const formatTimestamp = (timestamp) => {
|
if (!timestamp) return '';
|
const date = new Date(timestamp);
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
};
|
|
// 获取头像首字
|
const getAvatarText = () => {
|
if (isRobot) return <RobotOutlined />;
|
return contactName ? contactName.charAt(0) : <UserOutlined />;
|
};
|
|
return (
|
<div className={`conversation-item ${isRobot ? 'robot-item' : 'contact-item'}`}>
|
{/* 头像 */}
|
<div className={`avatar ${isRobot ? 'robot-avatar' : 'contact-avatar'}`}>
|
{getAvatarText()}
|
</div>
|
|
{/* 消息内容 */}
|
<div className="message-wrapper">
|
<div className="message-header">
|
<span className="speaker-name">
|
{isRobot ? 'AI调解员' : contactName}
|
</span>
|
</div>
|
|
<div className={`message-bubble ${isRobot ? 'robot-bubble' : 'contact-bubble'}`}>
|
{item.script}
|
</div>
|
|
<div className="message-time">
|
{formatTimestamp(item.timestamp)}
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
/**
|
* 对话记录列表组件
|
* 展示双方对话记录，类似微信聊天界面
|
*/
|
const ConversationList = ({ conversations, contactName }) => {
|
// 过滤无效对话记录
|
const validConversations = conversations.filter(
|
item => item.script && item.script.trim() !== ''
|
);
|
|
if (!validConversations || validConversations.length === 0) {
|
return (
|
<div className="conversation-empty">
|
暂无对话记录
|
</div>
|
);
|
}
|
|
return (
|
<div className="conversation-list">
|
{validConversations.map((item, index) => (
|
<ConversationItem
|
key={index}
|
item={item}
|
contactName={contactName}
|
/>
|
))}
|
</div>
|
);
|
};
|
|
export default ConversationList;
|
