update pay function

src/views/AgentChat/components/MeetingRoom/MeetingMessageBubble.js

@@ -1,8 +1,8 @@
 // src/views/AgentChat/components/MeetingRoom/MeetingMessageBubble.js
-// 会议消息气泡组件
+// 会议消息气泡组件 - V2: 支持工具调用展示和流式输出
 
-import React from 'react';
-import { motion } from 'framer-motion';
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
 import {
   Box,
   Flex,
@@ -15,6 +15,9 @@ import {
   Tooltip,
   Card,
   CardBody,
+  Spinner,
+  Code,
+  Collapse,
 } from '@chakra-ui/react';
 import {
   TrendingUp,
@@ -24,6 +27,11 @@ import {
   Crown,
   Copy,
   ThumbsUp,
+  ChevronRight,
+  Database,
+  Check,
+  Wrench,
+  AlertCircle,
 } from 'lucide-react';
 import { getRoleConfig, MEETING_ROLES } from '../../constants/meetingRoles';
 import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';
@@ -48,6 +56,231 @@ const getRoleIcon = (roleType) => {
   }
 };
 
+/**
+ * 工具名称映射
+ */
+const TOOL_NAME_MAP = {
+  search_china_news: '搜索新闻',
+  search_research_reports: '搜索研报',
+  get_stock_basic_info: '获取股票信息',
+  get_stock_financial_index: '获取财务指标',
+  get_stock_balance_sheet: '获取资产负债表',
+  get_stock_cashflow: '获取现金流量表',
+  get_stock_trade_data: '获取交易数据',
+  search_limit_up_stocks: '搜索涨停股',
+  get_concept_statistics: '获取概念统计',
+};
+
+/**
+ * 格式化结果数据用于显示
+ */
+const formatResultData = (data) => {
+  if (data === null || data === undefined) return null;
+  if (typeof data === 'string') return data;
+  try {
+    return JSON.stringify(data, null, 2);
+  } catch {
+    return String(data);
+  }
+};
+
+/**
+ * 获取结果数据的预览文本
+ */
+const getResultPreview = (result) => {
+  if (!result) return '无数据';
+
+  if (result.data) {
+    const data = result.data;
+    if (data.chart_data) {
+      return `图表数据: ${data.chart_data.labels?.length || 0} 项`;
+    }
+    if (data.sector_data) {
+      const sectorCount = Object.keys(data.sector_data).length;
+      return `${sectorCount} 个板块分析`;
+    }
+    if (data.stocks) {
+      return `${data.stocks.length} 只股票`;
+    }
+    if (Array.isArray(data)) {
+      return `${data.length} 条记录`;
+    }
+  }
+
+  if (Array.isArray(result)) {
+    return `${result.length} 条记录`;
+  }
+
+  if (typeof result === 'object') {
+    const keys = Object.keys(result);
+    return `${keys.length} 个字段`;
+  }
+
+  return '查看详情';
+};
+
+/**
+ * 单个工具调用卡片
+ */
+const ToolCallCard = ({ toolCall, idx, roleColor }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+
+  const hasResult = toolCall.result && (
+    typeof toolCall.result === 'object'
+      ? Object.keys(toolCall.result).length > 0
+      : toolCall.result
+  );
+
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(formatResultData(toolCall.result));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('复制失败:', err);
+    }
+  };
+
+  const toolDisplayName = TOOL_NAME_MAP[toolCall.tool_name] || toolCall.tool_name;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: -10 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ delay: idx * 0.05 }}
+    >
+      <Card
+        bg="rgba(255, 255, 255, 0.03)"
+        border="1px solid"
+        borderColor={isExpanded ? `${roleColor}40` : 'rgba(255, 255, 255, 0.1)'}
+        borderRadius="md"
+        transition="all 0.2s"
+        _hover={{
+          borderColor: `${roleColor}30`,
+        }}
+        size="sm"
+      >
+        <CardBody p={2}>
+          {/* 工具调用头部 */}
+          <Flex
+            align="center"
+            justify="space-between"
+            gap={2}
+            cursor={hasResult ? 'pointer' : 'default'}
+            onClick={() => hasResult && setIsExpanded(!isExpanded)}
+          >
+            <HStack flex={1} spacing={2}>
+              {toolCall.status === 'calling' ? (
+                <Spinner size="xs" color={roleColor} />
+              ) : toolCall.status === 'success' ? (
+                <Box color="green.400">
+                  <Check className="w-3 h-3" />
+                </Box>
+              ) : (
+                <Box color="red.400">
+                  <AlertCircle className="w-3 h-3" />
+                </Box>
+              )}
+              <Wrench className="w-3 h-3" style={{ color: roleColor }} />
+              <Text fontSize="xs" fontWeight="medium" color="gray.300">
+                {toolDisplayName}
+              </Text>
+              {hasResult && (
+                <Box
+                  color="gray.500"
+                  transition="transform 0.2s"
+                  transform={isExpanded ? 'rotate(90deg)' : 'rotate(0deg)'}
+                >
+                  <ChevronRight className="w-3 h-3" />
+                </Box>
+              )}
+            </HStack>
+
+            <HStack spacing={2}>
+              {hasResult && (
+                <Tooltip label={copied ? '已复制' : '复制数据'} placement="top">
+                  <IconButton
+                    size="xs"
+                    variant="ghost"
+                    icon={copied ? <Check className="w-2 h-2" /> : <Copy className="w-2 h-2" />}
+                    onClick={handleCopy}
+                    color={copied ? 'green.400' : 'gray.500'}
+                    _hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
+                    aria-label="复制"
+                    minW="20px"
+                    h="20px"
+                  />
+                </Tooltip>
+              )}
+              {toolCall.execution_time && (
+                <Text fontSize="10px" color="gray.500">
+                  {toolCall.execution_time.toFixed(2)}s
+                </Text>
+              )}
+            </HStack>
+          </Flex>
+
+          {/* 展开的详细数据 */}
+          <Collapse in={isExpanded} animateOpacity>
+            {isExpanded && hasResult && (
+              <Box mt={2}>
+                <Code
+                  display="block"
+                  p={2}
+                  borderRadius="sm"
+                  fontSize="10px"
+                  whiteSpace="pre-wrap"
+                  bg="rgba(0, 0, 0, 0.3)"
+                  color="gray.300"
+                  maxH="200px"
+                  overflowY="auto"
+                  sx={{
+                    '&::-webkit-scrollbar': { width: '4px' },
+                    '&::-webkit-scrollbar-track': { bg: 'transparent' },
+                    '&::-webkit-scrollbar-thumb': { bg: 'gray.600', borderRadius: 'full' },
+                  }}
+                >
+                  {formatResultData(toolCall.result)}
+                </Code>
+              </Box>
+            )}
+          </Collapse>
+        </CardBody>
+      </Card>
+    </motion.div>
+  );
+};
+
+/**
+ * 工具调用列表组件
+ */
+const ToolCallsList = ({ toolCalls, roleColor }) => {
+  if (!toolCalls || toolCalls.length === 0) return null;
+
+  return (
+    <Box mt={3} mb={2}>
+      <HStack spacing={2} mb={2}>
+        <Wrench className="w-3 h-3" style={{ color: roleColor }} />
+        <Text fontSize="xs" color="gray.400">
+          工具调用 ({toolCalls.length})
+        </Text>
+      </HStack>
+      <VStack spacing={1} align="stretch">
+        {toolCalls.map((toolCall, idx) => (
+          <ToolCallCard
+            key={toolCall.tool_call_id || idx}
+            toolCall={toolCall}
+            idx={idx}
+            roleColor={roleColor}
+          />
+        ))}
+      </VStack>
+    </Box>
+  );
+};
+
 /**
  * MeetingMessageBubble - 会议消息气泡组件
  *
@@ -67,6 +300,8 @@ const MeetingMessageBubble = ({ message, isLatest }) => {
   const isUser = message.role_id === 'user';
   const isManager = roleConfig.roleType === 'manager';
   const isConclusion = message.is_conclusion;
+  const isStreaming = message.isStreaming;
+  const hasToolCalls = message.tool_calls && message.tool_calls.length > 0;
 
   // 复制到剪贴板
   const handleCopy = () => {
@@ -120,6 +355,19 @@ const MeetingMessageBubble = ({ message, isLatest }) => {
                 主持人
               </Badge>
             )}
+            {isStreaming && (
+              <Badge
+                colorScheme="blue"
+                size="sm"
+                variant="subtle"
+                display="flex"
+                alignItems="center"
+                gap={1}
+              >
+                <Spinner size="xs" />
+                发言中
+              </Badge>
+            )}
             {isConclusion && (
               <Badge
                 colorScheme="green"
@@ -188,6 +436,15 @@ const MeetingMessageBubble = ({ message, isLatest }) => {
           )}
 
           <CardBody p={4}>
+            {/* 工具调用列表 */}
+            {hasToolCalls && (
+              <ToolCallsList
+                toolCalls={message.tool_calls}
+                roleColor={roleConfig.color}
+              />
+            )}
+
+            {/* 消息内容 */}
             <Box
               fontSize="sm"
               color="gray.100"
@@ -212,7 +469,25 @@ const MeetingMessageBubble = ({ message, isLatest }) => {
                 '& strong': { color: roleConfig.color },
               }}
             >
-              <MarkdownWithCharts content={message.content} variant="dark" />
+              {message.content ? (
+                <MarkdownWithCharts content={message.content} variant="dark" />
+              ) : isStreaming ? (
+                <HStack spacing={2} color="gray.500">
+                  <Spinner size="sm" />
+                  <Text>正在思考...</Text>
+                </HStack>
+              ) : null}
+
+              {/* 流式输出时的光标 */}
+              {isStreaming && message.content && (
+                <motion.span
+                  animate={{ opacity: [1, 0, 1] }}
+                  transition={{ duration: 0.8, repeat: Infinity }}
+                  style={{ color: roleConfig.color }}
+                >
+                  ▌
+                </motion.span>
+              )}
             </Box>
 
             {/* 操作按钮 */}