update pay function
This commit is contained in:
@@ -0,0 +1,267 @@
|
||||
// src/views/AgentChat/components/MeetingRoom/MeetingMessageBubble.js
|
||||
// 会议消息气泡组件
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
HStack,
|
||||
VStack,
|
||||
Text,
|
||||
Avatar,
|
||||
Badge,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Card,
|
||||
CardBody,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
BarChart2,
|
||||
Users,
|
||||
Crown,
|
||||
Copy,
|
||||
ThumbsUp,
|
||||
} from 'lucide-react';
|
||||
import { getRoleConfig, MEETING_ROLES } from '../../constants/meetingRoles';
|
||||
import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';
|
||||
|
||||
/**
|
||||
* 获取角色图标
|
||||
*/
|
||||
const getRoleIcon = (roleType) => {
|
||||
switch (roleType) {
|
||||
case 'bull':
|
||||
return <TrendingUp className="w-4 h-4" />;
|
||||
case 'bear':
|
||||
return <TrendingDown className="w-4 h-4" />;
|
||||
case 'quant':
|
||||
return <BarChart2 className="w-4 h-4" />;
|
||||
case 'retail':
|
||||
return <Users className="w-4 h-4" />;
|
||||
case 'manager':
|
||||
return <Crown className="w-4 h-4" />;
|
||||
default:
|
||||
return <Users className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* MeetingMessageBubble - 会议消息气泡组件
|
||||
*
|
||||
* @param {Object} props
|
||||
* @param {Object} props.message - 消息对象
|
||||
* @param {boolean} props.isLatest - 是否是最新消息
|
||||
* @returns {JSX.Element}
|
||||
*/
|
||||
const MeetingMessageBubble = ({ message, isLatest }) => {
|
||||
const roleConfig = getRoleConfig(message.role_id) || {
|
||||
name: message.role_name,
|
||||
nickname: message.nickname,
|
||||
color: message.color,
|
||||
roleType: 'retail',
|
||||
};
|
||||
|
||||
const isUser = message.role_id === 'user';
|
||||
const isManager = roleConfig.roleType === 'manager';
|
||||
const isConclusion = message.is_conclusion;
|
||||
|
||||
// 复制到剪贴板
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(message.content);
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction="column"
|
||||
align={isUser ? 'flex-end' : 'flex-start'}
|
||||
w="100%"
|
||||
>
|
||||
{/* 消息头部：角色信息 */}
|
||||
<HStack
|
||||
spacing={2}
|
||||
mb={2}
|
||||
flexDirection={isUser ? 'row-reverse' : 'row'}
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.1 }}
|
||||
transition={{ type: 'spring', stiffness: 400 }}
|
||||
>
|
||||
<Avatar
|
||||
size="sm"
|
||||
icon={getRoleIcon(roleConfig.roleType)}
|
||||
bg={roleConfig.color}
|
||||
boxShadow={`0 0 12px ${roleConfig.color}40`}
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
<VStack spacing={0} align={isUser ? 'flex-end' : 'flex-start'}>
|
||||
<HStack spacing={2}>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
color={roleConfig.color}
|
||||
>
|
||||
{roleConfig.name}
|
||||
</Text>
|
||||
{roleConfig.nickname !== roleConfig.name && (
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
@{roleConfig.nickname}
|
||||
</Text>
|
||||
)}
|
||||
{isManager && (
|
||||
<Badge
|
||||
colorScheme="purple"
|
||||
size="sm"
|
||||
variant="subtle"
|
||||
>
|
||||
主持人
|
||||
</Badge>
|
||||
)}
|
||||
{isConclusion && (
|
||||
<Badge
|
||||
colorScheme="green"
|
||||
size="sm"
|
||||
variant="solid"
|
||||
>
|
||||
最终结论
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
第 {message.round_number} 轮 ·{' '}
|
||||
{new Date(message.timestamp).toLocaleTimeString('zh-CN', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
|
||||
{/* 消息内容卡片 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
style={{ maxWidth: isUser ? '70%' : '85%', width: '100%' }}
|
||||
>
|
||||
<Card
|
||||
bg={
|
||||
isUser
|
||||
? `linear-gradient(135deg, ${roleConfig.color}20, ${roleConfig.color}10)`
|
||||
: isConclusion
|
||||
? 'linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05))'
|
||||
: 'rgba(255, 255, 255, 0.05)'
|
||||
}
|
||||
border="1px solid"
|
||||
borderColor={
|
||||
isConclusion
|
||||
? 'purple.500'
|
||||
: `${roleConfig.color}30`
|
||||
}
|
||||
borderRadius="xl"
|
||||
overflow="hidden"
|
||||
boxShadow={
|
||||
isConclusion
|
||||
? '0 0 20px rgba(139, 92, 246, 0.3)'
|
||||
: isLatest
|
||||
? `0 4px 20px ${roleConfig.color}20`
|
||||
: 'none'
|
||||
}
|
||||
>
|
||||
{/* 结论标题 */}
|
||||
{isConclusion && (
|
||||
<Box
|
||||
bgGradient="linear(to-r, purple.600, violet.600)"
|
||||
px={4}
|
||||
py={2}
|
||||
>
|
||||
<HStack>
|
||||
<Crown className="w-4 h-4" />
|
||||
<Text fontWeight="bold" fontSize="sm" color="white">
|
||||
基金经理投资建议
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<CardBody p={4}>
|
||||
<Box
|
||||
fontSize="sm"
|
||||
color="gray.100"
|
||||
lineHeight="tall"
|
||||
sx={{
|
||||
'& p': { mb: 2 },
|
||||
'& h1, & h2, & h3': { color: 'gray.50', fontWeight: 'bold' },
|
||||
'& ul, & ol': { pl: 4 },
|
||||
'& li': { mb: 1 },
|
||||
'& code': {
|
||||
bg: 'rgba(255,255,255,0.1)',
|
||||
px: 1,
|
||||
borderRadius: 'sm',
|
||||
},
|
||||
'& blockquote': {
|
||||
borderLeftWidth: '3px',
|
||||
borderLeftColor: roleConfig.color,
|
||||
pl: 3,
|
||||
color: 'gray.300',
|
||||
fontStyle: 'italic',
|
||||
},
|
||||
'& strong': { color: roleConfig.color },
|
||||
}}
|
||||
>
|
||||
<MarkdownWithCharts content={message.content} variant="dark" />
|
||||
</Box>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<Flex mt={3} pt={3} borderTop="1px solid" borderColor="whiteAlpha.100">
|
||||
<HStack spacing={2}>
|
||||
<Tooltip label="复制">
|
||||
<IconButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
icon={<Copy className="w-3 h-3" />}
|
||||
onClick={handleCopy}
|
||||
color="gray.500"
|
||||
_hover={{ color: 'white', bg: 'whiteAlpha.100' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip label="有用">
|
||||
<IconButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
icon={<ThumbsUp className="w-3 h-3" />}
|
||||
color="gray.500"
|
||||
_hover={{ color: 'green.400', bg: 'green.900' }}
|
||||
/>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
|
||||
{/* 角色标签 */}
|
||||
<Box ml="auto">
|
||||
<Badge
|
||||
bg={`${roleConfig.color}20`}
|
||||
color={roleConfig.color}
|
||||
fontSize="xs"
|
||||
px={2}
|
||||
py={0.5}
|
||||
borderRadius="full"
|
||||
>
|
||||
{roleConfig.roleType === 'bull' && '📈 看多'}
|
||||
{roleConfig.roleType === 'bear' && '📉 看空'}
|
||||
{roleConfig.roleType === 'quant' && '📊 量化'}
|
||||
{roleConfig.roleType === 'retail' && '🌱 散户'}
|
||||
{roleConfig.roleType === 'manager' && '👔 决策'}
|
||||
</Badge>
|
||||
</Box>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default MeetingMessageBubble;
|
||||
Reference in New Issue
Block a user