From 6bb08c2297be1b6415c8bc02e6917eba6ee355e5 Mon Sep 17 00:00:00 2001
From: shimai <shimai@example.com>
Date: Fri, 03 Apr 2026 10:42:08 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/test/tony.cheng/260312' into test/shimai.huang/260309
---
web-app/src/components/call-record/ConversationList.jsx | 88 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 88 insertions(+), 0 deletions(-)
diff --git a/web-app/src/components/call-record/ConversationList.jsx b/web-app/src/components/call-record/ConversationList.jsx
new file mode 100644
index 0000000..826c32d
--- /dev/null
+++ b/web-app/src/components/call-record/ConversationList.jsx
@@ -0,0 +1,88 @@
+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;
--
Gitblit v1.8.0