update pay function

2025-11-28 15:32:03 +08:00
parent 9b7a221315
commit 8cf2850660
6 changed files with 1278 additions and 666 deletions
--- a/src/views/AgentChat/components/MeetingRoom/MeetingMessageBubble.js
+++ b/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>

            {/* 操作按钮 */}
--- a/src/views/AgentChat/components/MeetingRoom/index.js
+++ b/src/views/AgentChat/components/MeetingRoom/index.js
@@ -91,18 +91,18 @@ const MeetingRoom = ({ user, onToast }) => {
      // 启动新会议
      startMeeting(inputValue.trim());
      setInputValue('');
+    } else if (status === MeetingStatus.CONCLUDED) {
+      // 如果已结论，开始新会议
+      resetMeeting();
+      startMeeting(inputValue.trim());
+      setInputValue('');
    } else if (
      status === MeetingStatus.WAITING_INPUT ||
-      status === MeetingStatus.CONCLUDED
+      status === MeetingStatus.DISCUSSING ||
+      status === MeetingStatus.SPEAKING
    ) {
-      // 用户插话或开始新话题
-      if (isConcluded) {
-        // 如果已结论，开始新会议
-        resetMeeting();
-        startMeeting(inputValue.trim());
-      } else {
-        sendUserMessage(inputValue.trim());
-      }
+      // 用户可以在任何时候插话（包括讨论中和发言中）
+      sendUserMessage(inputValue.trim());
      setInputValue('');
    }
  };
@@ -135,11 +135,15 @@ const MeetingRoom = ({ user, onToast }) => {
    if (status === MeetingStatus.IDLE) {
      return '输入投研议题，如：分析茅台最新财报...';
    } else if (status === MeetingStatus.WAITING_INPUT) {
-      return '输入您的观点参与讨论，或等待继续...';
+      return '输入您的观点参与讨论，或点击继续按钮...';
    } else if (status === MeetingStatus.CONCLUDED) {
      return '会议已结束，输入新议题开始新会议...';
+    } else if (status === MeetingStatus.STARTING) {
+      return '正在召集会议成员...';
+    } else if (status === MeetingStatus.DISCUSSING || status === MeetingStatus.SPEAKING) {
+      return '随时输入您的观点参与讨论...';
    }
-    return '会议进行中...';
+    return '输入您的观点...';
  };

  return (
@@ -352,11 +356,7 @@ const MeetingRoom = ({ user, onToast }) => {
              onChange={(e) => setInputValue(e.target.value)}
              onKeyDown={handleKeyPress}
              placeholder={getPlaceholder()}
-              isDisabled={
-                isLoading ||
-                status === MeetingStatus.DISCUSSING ||
-                status === MeetingStatus.SPEAKING
-              }
+              isDisabled={status === MeetingStatus.STARTING}
              size="lg"
              bg="rgba(255, 255, 255, 0.05)"
              border="1px solid"
@@ -378,13 +378,11 @@ const MeetingRoom = ({ user, onToast }) => {
            >
              <IconButton
                size="lg"
-                icon={isLoading ? <Spinner size="sm" /> : <Send className="w-5 h-5" />}
+                icon={isLoading && status === MeetingStatus.STARTING ? <Spinner size="sm" /> : <Send className="w-5 h-5" />}
                onClick={handleSend}
                isDisabled={
                  !inputValue.trim() ||
-                  isLoading ||
-                  status === MeetingStatus.DISCUSSING ||
-                  status === MeetingStatus.SPEAKING
+                  status === MeetingStatus.STARTING
                }
                bgGradient="linear(to-r, orange.400, red.500)"
                color="white"
@@ -427,9 +425,11 @@ const MeetingRoom = ({ user, onToast }) => {
                {status === MeetingStatus.IDLE ? '开始会议' : '发送消息'}
              </Text>
            </HStack>
-            {status === MeetingStatus.WAITING_INPUT && (
+            {(status === MeetingStatus.WAITING_INPUT ||
+              status === MeetingStatus.DISCUSSING ||
+              status === MeetingStatus.SPEAKING) && (
              <Text color="orange.400">
-                💡 您可以插话参与讨论，或点击继续按钮进行下一轮
+                💡 随时输入观点参与讨论，您的发言会影响分析师的判断
              </Text>
            )}
          </HStack>