update pay function

src/views/AgentChat/index.js

@@ -63,6 +63,7 @@ import { StepResultCard } from '@components/ChatBot/StepResultCard';
 import { MarkdownWithCharts } from '@components/ChatBot/MarkdownWithCharts';
 import { logger } from '@utils/logger';
 import axios from 'axios';
+import HomeNavbar from '@components/Navbars/HomeNavbar';
 
 /**
  * Agent消息类型
@@ -174,6 +175,18 @@ const AgentChatV4 = () => {
   const { user } = useAuth();
   const toast = useToast();
 
+  // 确保组件总是返回有效的 React 元素
+  if (!user) {
+    return (
+      <Flex w="100vw" h="100vh" align="center" justify="center" bg="#1a1d23">
+        <VStack spacing={4}>
+          <Spinner size="xl" color="#FFD700" />
+          <Text color="#E8E8E8">正在加载...</Text>
+        </VStack>
+      </Flex>
+    );
+  }
+
   // 会话相关状态
   const [sessions, setSessions] = useState([]);
   const [currentSessionId, setCurrentSessionId] = useState(null);
@@ -333,18 +346,47 @@ const AgentChatV4 = () => {
 
   // 在 AgentChat 页面隐藏 Bytedesk 客服插件（避免遮挡页面）
   useEffect(() => {
-    // 隐藏 Bytedesk
-    const bytedeskElements = document.querySelectorAll('[class*="bytedesk"], [id*="bytedesk"], [class*="BytedeskWeb"]');
+    // 隐藏 Bytedesk - 更安全的方式
+    const hideBytedeskElements = () => {
+      try {
+        // 查找所有 Bytedesk 相关元素
+        const bytedeskElements = document.querySelectorAll(
+          '[class*="bytedesk"], [id*="bytedesk"], [class*="BytedeskWeb"], .bytedesk-widget'
+        );
+
+        // 保存原始 display 值
+        const originalDisplays = new Map();
+
         bytedeskElements.forEach(el => {
-      if (el) el.style.display = 'none';
+          if (el && el.style) {
+            originalDisplays.set(el, el.style.display);
+            el.style.display = 'none';
+          }
         });
 
-    // 组件卸载时恢复显示
+        // 返回清理函数
         return () => {
           bytedeskElements.forEach(el => {
-        if (el) el.style.display = '';
+            if (el && el.style) {
+              const originalDisplay = originalDisplays.get(el);
+              if (originalDisplay !== undefined) {
+                el.style.display = originalDisplay;
+              } else {
+                el.style.display = '';
+              }
+            }
           });
         };
+      } catch (error) {
+        console.warn('Failed to hide Bytedesk elements:', error);
+        return () => {}; // 返回空清理函数
+      }
+    };
+
+    const cleanup = hideBytedeskElements();
+
+    // 组件卸载时恢复显示
+    return cleanup;
   }, []);
 
   const addMessage = (message) => {
@@ -716,26 +758,13 @@ const AgentChatV4 = () => {
   );
 
   return (
-    <>
-      {/* 全局样式：确保页面占满整个视口 */}
+    <Box w="100%" h="100vh" bg={darkBg} display="flex" flexDirection="column">
+      {/* 顶部导航栏 */}
+      <HomeNavbar />
+
+      {/* 全局样式：确保页面正确显示 */}
       <Global
         styles={css`
-          /* 重置全局样式，确保AgentChat页面正确显示 */
-          html, body {
-            margin: 0 !important;
-            padding: 0 !important;
-            width: 100% !important;
-            height: 100% !important;
-            overflow: hidden !important;
-          }
-
-          /* 确保根元素不影响布局 */
-          #root {
-            position: relative;
-            width: 100%;
-            height: 100%;
-          }
-
           /* 隐藏可能干扰的全局元素 */
           .chakra-portal {
             z-index: 9999;
@@ -743,14 +772,13 @@ const AgentChatV4 = () => {
         `}
       />
 
+      {/* 主内容区域 */}
       <Flex
-        w="100vw"
-        h="100vh"
+        flex="1"
+        w="100%"
         bg={darkBg}
         overflow="hidden"
-        position="fixed"
-        top="0"
-        left="0"
+        position="relative"
         flexDirection="row"
       >
       <Box
@@ -962,25 +990,18 @@ const AgentChatV4 = () => {
           backdropFilter="blur(20px)"
           borderBottom="1px solid"
           borderColor={borderGold}
-          px={{ base: 3, md: 6 }}
-          py={{ base: 2, md: 3 }}
-          minH={{ base: "60px", md: "72px" }}
+          px={{ base: 2, md: 4 }}
+          py={{ base: 2, md: 2 }}
+          minH={{ base: "56px", md: "64px" }}
           boxShadow="0 4px 16px rgba(255, 215, 0, 0.1)"
+          flexShrink={0}
+          zIndex={10}
         >
-          <HStack justify="space-between" h="full">
-            <HStack spacing={{ base: 2, md: 4 }} align="center">
-              <IconButton
-                icon={<FiMessageSquare />}
-                size="sm"
-                variant="ghost"
-                color={goldAccent}
-                _hover={{ bg: 'rgba(255, 215, 0, 0.1)' }}
-                aria-label="切换侧边栏"
-                onClick={toggleSidebar}
-              />
+          <Flex justify="space-between" align="center" h="full">
+            <HStack spacing={{ base: 2, md: 3 }} align="center" flex={1} minW={0}>
               <Box
-                w={{ base: "28px", md: "36px" }}
-                h={{ base: "28px", md: "36px" }}
+                w={{ base: "24px", md: "32px" }}
+                h={{ base: "24px", md: "32px" }}
                 borderRadius="lg"
                 bg={goldGradient}
                 display="flex"
@@ -989,17 +1010,17 @@ const AgentChatV4 = () => {
                 boxShadow="0 4px 12px rgba(255, 215, 0, 0.3)"
                 flexShrink={0}
               >
-                <FiCpu fontSize={{ base: "1rem", md: "1.3rem" }} color={darkBg} />
+                <FiCpu fontSize={{ base: "0.9rem", md: "1.2rem" }} color={darkBg} />
               </Box>
-              <VStack align="start" spacing={0} flex={1}>
+              <VStack align="start" spacing={0} flex={1} minW={0}>
+                <HStack spacing={2} align="baseline">
                   <Heading
-                  size={{ base: "xs", sm: "sm", md: "md" }}
+                    size={{ base: "xs", md: "sm" }}
                     color={textWhite}
                     noOfLines={1}
                   >
                     价小前投研
                   </Heading>
-                <HStack spacing={{ base: 1, md: 2 }} flexWrap="wrap">
                   <Badge
                     bg="rgba(255, 215, 0, 0.2)"
                     color={goldAccent}
@@ -1007,12 +1028,14 @@ const AgentChatV4 = () => {
                     borderRadius="full"
                     px={{ base: 1, md: 2 }}
                     whiteSpace="nowrap"
+                    display="inline-flex"
+                    alignItems="center"
+                    gap={1}
                   >
-                    <Flex align="center" gap={1}>
-                      <FiZap size={10} />
-                      <Text>AI 深度分析</Text>
-                    </Flex>
+                    <Box as={FiZap} display="inline-block" width="10px" height="10px" />
+                    <Text as="span" fontSize="inherit">AI 深度分析</Text>
                   </Badge>
+                </HStack>
                 <Text
                   fontSize={{ base: "xx-small", md: "xs" }}
                   color={textGray}
@@ -1021,11 +1044,19 @@ const AgentChatV4 = () => {
                 >
                   {AVAILABLE_MODELS.find(m => m.id === selectedModel)?.name || '智能模型'}
                 </Text>
-                </HStack>
               </VStack>
             </HStack>
 
-            <HStack spacing={{ base: 1, md: 2 }}>
+            <HStack spacing={{ base: 1, md: 2 }} flexShrink={0}>
+              <IconButton
+                icon={<FiMessageSquare />}
+                size="sm"
+                variant="ghost"
+                color={goldAccent}
+                _hover={{ bg: 'rgba(255, 215, 0, 0.1)' }}
+                aria-label="历史对话"
+                onClick={toggleSidebar}
+              />
               <IconButton
                 icon={<FiRefreshCw />}
                 size="sm"
@@ -1043,6 +1074,7 @@ const AgentChatV4 = () => {
                 _hover={{ color: goldAccent, bg: 'rgba(255, 215, 0, 0.1)' }}
                 aria-label="导出对话"
                 onClick={handleExportChat}
+                display={{ base: "none", sm: "inline-flex" }}
               />
               <IconButton
                 icon={<FiSettings />}
@@ -1054,7 +1086,7 @@ const AgentChatV4 = () => {
                 onClick={toggleRightPanel}
               />
             </HStack>
-          </HStack>
+          </Flex>
 
           {/* 进度条 */}
           {isProcessing && (
@@ -1364,7 +1396,7 @@ const AgentChatV4 = () => {
         </Box>
       </Collapse>
       </Flex>
-    </>
+    </Box>
   );
 };