V4.7-alpha (#985)

Co-authored-by: heheer <71265218+newfish-cmyk@users.noreply.github.com>

projects/app/src/pages/chat/components/ChatHeader.tsx

@@ -2,13 +2,13 @@ import React, { useMemo } from 'react';
 import { Flex, useTheme, Box } from '@chakra-ui/react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import Tag from '@/components/Tag';
 import Avatar from '@/components/Avatar';
 import ToolMenu from './ToolMenu';
 import type { ChatItemType } from '@fastgpt/global/core/chat/type';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import { chatContentReplaceBlock } from '@fastgpt/global/core/chat/utils';
+import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';
+import FillTag from '@fastgpt/web/components/common/Tag/Fill';
 
 const ChatHeader = ({
   history,
@@ -33,10 +33,8 @@ const ChatHeader = ({
   const { isPc } = useSystemStore();
   const title = useMemo(
     () =>
-      chatContentReplaceBlock(history[history.length - 2]?.value)?.slice(0, 8) ||
-      appName ||
-      t('core.chat.New Chat'),
-    [appName, history]
+      getChatTitleFromChatMessage(history[history.length - 2], appName || t('core.chat.New Chat')),
+    [appName, history, t]
   );
 
   return (
@@ -52,19 +50,19 @@ const ChatHeader = ({
           <Box mr={3} color={'myGray.1000'}>
             {title}
           </Box>
-          <Tag>
+          <FillTag>
             <MyIcon name={'history'} w={'14px'} />
             <Box ml={1}>
               {history.length === 0
                 ? t('core.chat.New Chat')
                 : t('core.chat.History Amount', { amount: history.length })}
             </Box>
-          </Tag>
+          </FillTag>
           {!!chatModels && chatModels.length > 0 && (
-            <Tag ml={2} colorSchema={'green'}>
+            <FillTag ml={2} colorSchema={'green'}>
               <MyIcon name={'core/chat/chatModelTag'} w={'14px'} />
               <Box ml={1}>{chatModels.join(',')}</Box>
-            </Tag>
+            </FillTag>
           )}
           <Box flex={1} />
         </>

projects/app/src/pages/chat/components/ToolMenu.tsx

@@ -1,10 +1,11 @@
 import React, { useMemo } from 'react';
-import { useChatBox } from '@/components/ChatBox';
+import { useChatBox } from '@/components/ChatBox/hooks/useChatBox';
 import type { ChatItemType } from '@fastgpt/global/core/chat/type.d';
-import { Menu, MenuButton, MenuList, MenuItem, Box } from '@chakra-ui/react';
+import { Menu, MenuButton, MenuList, MenuItem, Box, IconButton } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useRouter } from 'next/router';
+import MyMenu from '@/components/MyMenu';
 
 const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
   const { t } = useTranslation();
@@ -41,30 +42,21 @@ const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
         onClick: () => onExportChat({ type: 'pdf', history })
       }
     ],
-    [history, onExportChat, router]
+    [history, onExportChat, router, t]
   );
 
   return history.length > 0 ? (
-    <Menu autoSelect={false} isLazy>
-      <MenuButton
-        _hover={{ bg: 'myWhite.600  ' }}
-        cursor={'pointer'}
-        borderRadius={'md'}
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        <MyIcon name={'more'} w={'14px'} p={2} />
-      </MenuButton>
-      <MenuList color={'myGray.700'} minW={`120px !important`} zIndex={10}>
-        {menuList.map((item) => (
-          <MenuItem key={item.label} onClick={item.onClick} py={[2, 3]}>
-            <MyIcon name={item.icon as any} w={['14px', '16px']} />
-            <Box ml={[1, 2]}>{item.label}</Box>
-          </MenuItem>
-        ))}
-      </MenuList>
-    </Menu>
+    <MyMenu
+      Button={
+        <IconButton
+          icon={<MyIcon name={'more'} w={'14px'} p={2} />}
+          aria-label={''}
+          size={'sm'}
+          variant={'whitePrimary'}
+        />
+      }
+      menuList={menuList}
+    />
   ) : (
     <Box w={'28px'} h={'28px'} />
   );