83 lines
2.8 KiB
JavaScript
83 lines
2.8 KiB
JavaScript
// src/views/AgentChat/components/LeftSidebar/SessionCard.js
|
|
// 会话卡片组件
|
|
|
|
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Card, CardBody, Flex, Box, Text, Badge } from '@chakra-ui/react';
|
|
|
|
/**
|
|
* SessionCard - 会话卡片组件
|
|
*
|
|
* @param {Object} props
|
|
* @param {Object} props.session - 会话数据
|
|
* @param {boolean} props.isActive - 是否为当前选中的会话
|
|
* @param {Function} props.onPress - 点击回调函数
|
|
* @returns {JSX.Element}
|
|
*/
|
|
const SessionCard = ({ session, isActive, onPress }) => {
|
|
return (
|
|
<motion.div
|
|
whileHover={{ scale: 1.02, y: -4 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Card
|
|
cursor="pointer"
|
|
onClick={onPress}
|
|
bg={isActive ? 'rgba(139, 92, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)'}
|
|
backdropFilter="blur(12px)"
|
|
borderWidth={1}
|
|
borderColor={isActive ? 'purple.400' : 'rgba(255, 255, 255, 0.1)'}
|
|
_hover={{
|
|
bg: isActive ? 'rgba(139, 92, 246, 0.2)' : 'rgba(255, 255, 255, 0.08)',
|
|
borderColor: isActive ? 'purple.400' : 'rgba(255, 255, 255, 0.2)',
|
|
boxShadow: isActive
|
|
? '0 12px 24px rgba(139, 92, 246, 0.4)'
|
|
: '0 4px 12px rgba(0, 0, 0, 0.3)',
|
|
}}
|
|
transition="all 0.3s"
|
|
>
|
|
<CardBody p={3}>
|
|
<Flex align="start" justify="space-between" gap={2}>
|
|
<Box flex={1} minW={0}>
|
|
<Text fontSize="sm" fontWeight="medium" color="gray.100" noOfLines={2}>
|
|
{session.title || session.last_message?.substring(0, 30) || '新对话'}
|
|
</Text>
|
|
<Text fontSize="xs" color="gray.500" mt={1}>
|
|
{(() => {
|
|
const dateStr = session.created_at || session.last_timestamp || session.timestamp;
|
|
if (!dateStr) return '刚刚';
|
|
const date = new Date(dateStr);
|
|
if (isNaN(date.getTime())) return '刚刚';
|
|
return date.toLocaleString('zh-CN', {
|
|
month: 'numeric',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
})()}
|
|
</Text>
|
|
</Box>
|
|
{session.message_count && (
|
|
<Badge
|
|
bgGradient={
|
|
isActive
|
|
? 'linear(to-r, blue.500, purple.500)'
|
|
: 'linear(to-r, gray.600, gray.700)'
|
|
}
|
|
color={isActive ? 'white' : 'gray.400'}
|
|
variant="subtle"
|
|
boxShadow={isActive ? '0 2px 8px rgba(139, 92, 246, 0.3)' : 'none'}
|
|
>
|
|
{session.message_count}
|
|
</Badge>
|
|
)}
|
|
</Flex>
|
|
</CardBody>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default SessionCard;
|