Add File
This commit is contained in:
258
src/family/pages/InteractionHistory.tsx
Normal file
258
src/family/pages/InteractionHistory.tsx
Normal file
@@ -0,0 +1,258 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Bot, User, RefreshCw } from 'lucide-react';
|
||||
|
||||
/**
|
||||
* 聊天记录页面
|
||||
* 展示老人与数字人的聊天对话内容
|
||||
*/
|
||||
|
||||
interface ChatMessage {
|
||||
username: string;
|
||||
is_adopted: number;
|
||||
type: 'fay' | 'member';
|
||||
way: string;
|
||||
content: string;
|
||||
createtime: number;
|
||||
timetext: string;
|
||||
}
|
||||
|
||||
const API_BASE_URL = 'http://127.0.0.1:5000';
|
||||
|
||||
export const InteractionHistory: React.FC = () => {
|
||||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const username = 'User'; // 实际使用时从用户上下文获取
|
||||
|
||||
// 加载聊天记录
|
||||
const loadChatHistory = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/api/get-msg`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ username, limit: 100 }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('获取聊天记录失败');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
// 按时间倒序排列，最新的在前面
|
||||
const sortedMessages = (data.list || []).sort(
|
||||
(a: ChatMessage, b: ChatMessage) => b.createtime - a.createtime
|
||||
);
|
||||
setMessages(sortedMessages);
|
||||
} catch (err) {
|
||||
console.error('加载聊天记录失败:', err);
|
||||
setError('无法连接到数字人服务');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadChatHistory();
|
||||
// 每30秒刷新一次
|
||||
const interval = setInterval(loadChatHistory, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// 格式化时间戳
|
||||
const formatTime = (timestamp: number) => {
|
||||
const date = new Date(timestamp * 1000);
|
||||
const now = new Date();
|
||||
const isToday = date.toDateString() === now.toDateString();
|
||||
|
||||
const timeStr = date.toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
|
||||
if (isToday) {
|
||||
return timeStr;
|
||||
}
|
||||
|
||||
const yesterday = new Date(now);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
if (date.toDateString() === yesterday.toDateString()) {
|
||||
return `昨天 ${timeStr}`;
|
||||
}
|
||||
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}) + ' ' + timeStr;
|
||||
};
|
||||
|
||||
// 按日期分组消息
|
||||
const groupMessagesByDate = (msgs: ChatMessage[]) => {
|
||||
const groups: { [key: string]: ChatMessage[] } = {};
|
||||
|
||||
msgs.forEach(msg => {
|
||||
const date = new Date(msg.createtime * 1000);
|
||||
const now = new Date();
|
||||
const isToday = date.toDateString() === now.toDateString();
|
||||
|
||||
const yesterday = new Date(now);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
const isYesterday = date.toDateString() === yesterday.toDateString();
|
||||
|
||||
let dateKey: string;
|
||||
if (isToday) {
|
||||
dateKey = '今天';
|
||||
} else if (isYesterday) {
|
||||
dateKey = '昨天';
|
||||
} else {
|
||||
dateKey = date.toLocaleDateString('zh-CN', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
if (!groups[dateKey]) {
|
||||
groups[dateKey] = [];
|
||||
}
|
||||
groups[dateKey].push(msg);
|
||||
});
|
||||
|
||||
return groups;
|
||||
};
|
||||
|
||||
const groupedMessages = groupMessagesByDate(messages);
|
||||
|
||||
// 显示加载状态
|
||||
if (loading && messages.length === 0) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">正在加载聊天记录...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="px-4 py-4">
|
||||
{/* 顶部标题和刷新按钮 */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-lg font-bold text-gray-900">聊天记录</h2>
|
||||
<button
|
||||
onClick={loadChatHistory}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-1 px-3 py-1.5 text-sm text-primary-600 hover:bg-primary-50 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw size={16} className={loading ? 'animate-spin' : ''} />
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||||
<div className="card p-3 text-center">
|
||||
<div className="text-2xl font-bold text-primary-600">{messages.length}</div>
|
||||
<div className="text-xs text-gray-600 mt-1">消息总数</div>
|
||||
</div>
|
||||
<div className="card p-3 text-center">
|
||||
<div className="text-2xl font-bold text-green-600">
|
||||
{messages.filter(m => m.type === 'member').length}
|
||||
</div>
|
||||
<div className="text-xs text-gray-600 mt-1">老人发言</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 错误提示 */}
|
||||
{error && (
|
||||
<div className="mb-4 p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded-lg">
|
||||
<p className="text-sm text-yellow-800">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 聊天记录列表 */}
|
||||
{Object.keys(groupedMessages).length > 0 ? (
|
||||
Object.entries(groupedMessages).map(([dateKey, msgs]) => (
|
||||
<div key={dateKey} className="mb-6">
|
||||
{/* 日期分隔 */}
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<span className="px-3 py-1 bg-gray-200 text-gray-600 text-xs rounded-full">
|
||||
{dateKey}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 消息列表 - 按时间正序显示 */}
|
||||
<div className="space-y-3">
|
||||
{[...msgs].reverse().map((msg, index) => (
|
||||
<div
|
||||
key={`${msg.createtime}-${index}`}
|
||||
className={`flex gap-2 ${
|
||||
msg.type === 'member' ? 'flex-row-reverse' : ''
|
||||
}`}
|
||||
>
|
||||
{/* 头像 */}
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${
|
||||
msg.type === 'fay'
|
||||
? 'bg-primary-100'
|
||||
: 'bg-green-100'
|
||||
}`}
|
||||
>
|
||||
{msg.type === 'fay' ? (
|
||||
<Bot size={20} className="text-primary-600" />
|
||||
) : (
|
||||
<User size={20} className="text-green-600" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 消息气泡 */}
|
||||
<div
|
||||
className={`flex-1 ${
|
||||
msg.type === 'member' ? 'flex flex-col items-end' : ''
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`inline-block max-w-[80%] rounded-2xl px-4 py-2.5 ${
|
||||
msg.type === 'fay'
|
||||
? 'bg-white border border-gray-200 shadow-sm'
|
||||
: 'bg-primary-600 text-white shadow-sm'
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm leading-relaxed ${
|
||||
msg.type === 'fay' ? 'text-gray-800' : 'text-white'
|
||||
}`}
|
||||
>
|
||||
{msg.content}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`flex items-center gap-1 mt-1 px-2 ${
|
||||
msg.type === 'member' ? 'justify-end' : ''
|
||||
}`}
|
||||
>
|
||||
<span className="text-xs text-gray-400">
|
||||
{formatTime(msg.createtime)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<Bot size={48} className="mx-auto text-gray-300 mb-3" />
|
||||
<p className="text-gray-500">暂无聊天记录</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user