4.8.5 test (#1819)

projects/app/src/components/ChatBox/Input/ChatInput.tsx

@@ -364,6 +364,7 @@ const ChatInput = ({
             color={'myGray.900'}
             isDisabled={isSpeaking}
             value={inputValue}
+            fontSize={['md', 'sm']}
             onChange={(e) => {
               const textarea = e.target;
               textarea.style.height = textareaMinH;

projects/app/src/components/ChatBox/components/WholeResponseModal.tsx

@@ -4,9 +4,8 @@ import type { ChatHistoryItemResType } from '@fastgpt/global/core/chat/type.d';
 import { useTranslation } from 'next-i18next';
 import { moduleTemplatesFlat } from '@fastgpt/global/core/workflow/template/constants';
 
-import Tabs from '../../Tabs';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 import MyModal from '@fastgpt/web/components/common/MyModal';
-import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import Markdown from '../../Markdown';
 import { QuoteList } from './QuoteModal';
 import { DatasetSearchModeMap } from '@fastgpt/global/core/dataset/constants';
@@ -142,7 +141,7 @@ export const ResponseBox = React.memo(function ResponseBox({
             {t(item.moduleName)}
           </Flex>
         ),
-        id: `${i}`
+        value: `${i}`
       })),
     [response, t]
   );
@@ -155,7 +154,7 @@ export const ResponseBox = React.memo(function ResponseBox({
     <>
       {!hideTabs && (
         <Box>
-          <Tabs list={list} activeId={currentTab} onChange={setCurrentTab} />
+          <LightRowTabs list={list} value={currentTab} onChange={setCurrentTab} />
         </Box>
       )}
       <Box py={2} px={4} flex={'1 0 0'} overflow={'auto'}>

projects/app/src/components/ChatBox/index.tsx

@@ -997,7 +997,7 @@ const ChatBox = (
         </Box>
       </Box>
       {/* message input */}
-      {onStartChat && (chatStarted || filterVariableNodes.length === 0) && active && (
+      {onStartChat && (chatStarted || filterVariableNodes.length === 0) && active && appId && (
         <ChatInput
           onSendMessage={sendPrompt}
           onStop={() => chatController.current?.abort('stop')}

projects/app/src/components/Layout/navbar.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Box, BoxProps, Flex, Link, LinkProps } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useUserStore } from '@/web/support/user/useUserStore';
-import { useChatStore } from '@/web/core/chat/storeChat';
+import { useChatStore } from '@/web/core/chat/context/storeChat';
 import { HUMAN_ICON } from '@fastgpt/global/common/system/constants';
 import NextLink from 'next/link';
 import Badge from '../Badge';

projects/app/src/components/Layout/navbarPhone.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { Flex, Box } from '@chakra-ui/react';
-import { useChatStore } from '@/web/core/chat/storeChat';
+import { useChatStore } from '@/web/core/chat/context/storeChat';
 import { useTranslation } from 'next-i18next';
 import Badge from '../Badge';
 import MyIcon from '@fastgpt/web/components/common/Icon';

projects/app/src/components/SideTabs/index.tsx

@@ -4,15 +4,20 @@ import type { GridProps } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import type { IconNameType } from '@fastgpt/web/components/common/Icon/type.d';
 
-// @ts-ignore
-export interface Props extends GridProps {
-  list: { id: string; label: string; icon: string }[];
-  activeId: string;
+export type Props<ValueType = string> = Omit<GridProps, 'onChange'> & {
+  list: { value: ValueType; label: string; icon: string }[];
+  value: ValueType;
   size?: 'sm' | 'md' | 'lg';
-  onChange: (id: string) => void;
-}
+  onChange: (value: ValueType) => void;
+};
 
-const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
+const SideTabs = <ValueType = string,>({
+  list,
+  size = 'md',
+  value,
+  onChange,
+  ...props
+}: Props<ValueType>) => {
   const sizeMap = useMemo(() => {
     switch (size) {
       case 'sm':
@@ -37,14 +42,14 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
     <Box fontSize={sizeMap.fontSize} {...props}>
       {list.map((item) => (
         <Flex
-          key={item.id}
+          key={item.value as string}
           py={sizeMap.inlineP}
           borderRadius={'md'}
           px={3}
           mb={2}
           fontWeight={'medium'}
           alignItems={'center'}
-          {...(activeId === item.id
+          {...(value === item.value
             ? {
                 bg: ' primary.100 !important',
                 color: 'primary.600 ',
@@ -59,8 +64,8 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
             bg: 'myGray.100'
           }}
           onClick={() => {
-            if (activeId === item.id) return;
-            onChange(item.id);
+            if (value === item.value) return;
+            onChange(item.value);
           }}
         >
           <MyIcon mr={2} name={item.icon as IconNameType} w={'20px'} />
@@ -71,4 +76,4 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
   );
 };
 
-export default React.memo(SideTabs);
+export default SideTabs;

projects/app/src/components/Tabs/index.tsx

@@ -1,91 +0,0 @@
-import React, { useMemo } from 'react';
-import { Box, Flex, Grid, Image } from '@chakra-ui/react';
-import type { FlexProps, GridProps } from '@chakra-ui/react';
-import { useTranslation } from 'next-i18next';
-import MyIcon from '@fastgpt/web/components/common/Icon';
-
-// @ts-ignore
-interface Props extends GridProps {
-  list: { id: string; icon?: string; label: string | React.ReactNode }[];
-  activeId: string;
-  size?: 'sm' | 'md' | 'lg';
-  inlineStyles?: FlexProps;
-  onChange: (id: string) => void;
-}
-
-const Tabs = ({ list, size = 'md', activeId, onChange, inlineStyles, ...props }: Props) => {
-  const { t } = useTranslation();
-  const sizeMap = useMemo(() => {
-    switch (size) {
-      case 'sm':
-        return {
-          fontSize: 'xs',
-          outP: '3px',
-          inlineP: 1
-        };
-      case 'md':
-        return {
-          fontSize: 'sm',
-          outP: '4px',
-          inlineP: 1
-        };
-      case 'lg':
-        return {
-          fontSize: ['sm', 'md'],
-          outP: '5px',
-          inlineP: 2
-        };
-    }
-  }, [size]);
-
-  return (
-    <Grid
-      gridTemplateColumns={`repeat(${list.length},1fr)`}
-      p={sizeMap.outP}
-      borderRadius={'sm'}
-      fontSize={sizeMap.fontSize}
-      overflowX={'auto'}
-      {...props}
-    >
-      {list.map((item) => (
-        <Flex
-          key={item.id}
-          py={sizeMap.inlineP}
-          alignItems={'center'}
-          justifyContent={'center'}
-          borderBottom={'2px solid transparent'}
-          px={3}
-          whiteSpace={'nowrap'}
-          {...inlineStyles}
-          {...(activeId === item.id
-            ? {
-                color: 'primary.600',
-                cursor: 'default',
-                fontWeight: 'bold',
-                borderBottomColor: 'primary.600'
-              }
-            : {
-                cursor: 'pointer'
-              })}
-          onClick={() => {
-            if (activeId === item.id) return;
-            onChange(item.id);
-          }}
-        >
-          {item.icon && (
-            <>
-              {item.icon.startsWith('/') ? (
-                <Image mr={1} src={item.icon} alt={''} w={'16px'} />
-              ) : (
-                <MyIcon mr={1} name={item.icon as any} w={'16px'} />
-              )}
-            </>
-          )}
-          {typeof item.label === 'string' ? t(item.label) : item.label}
-        </Flex>
-      ))}
-    </Grid>
-  );
-};
-
-export default Tabs;

projects/app/src/components/common/folder/SelectOneResource.tsx

@@ -136,7 +136,7 @@ const SelectOneResource = ({
                   </Flex>
                 )}
                 <Avatar ml={index !== 0 ? '0.5rem' : 0} src={item.avatar} w={'1.25rem'} />
-                <Box fontSize={'sm'} ml={2}>
+                <Box fontSize={['md', 'sm']} ml={2}>
                   {item.name}
                 </Box>
               </Flex>

projects/app/src/components/core/app/DatasetParamsModal.tsx

@@ -23,7 +23,7 @@ import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
 import { DatasetSearchModeMap } from '@fastgpt/global/core/dataset/constants';
 import MyRadio from '@/components/common/MyRadio';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import Tabs from '@/components/Tabs';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 import PromptEditor from '@fastgpt/web/components/common/Textarea/PromptEditor';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useToast } from '@fastgpt/web/hooks/useToast';
@@ -127,27 +127,27 @@ const DatasetParamsModal = ({
       w={['90vw', '550px']}
     >
       <ModalBody flex={'auto'} overflow={'auto'}>
-        <Tabs
+        <LightRowTabs<SearchSettingTabEnum>
           mb={3}
           list={[
             {
               icon: 'modal/setting',
               label: t('core.dataset.search.search mode'),
-              id: SearchSettingTabEnum.searchMode
+              value: SearchSettingTabEnum.searchMode
             },
             {
               icon: 'support/outlink/apikeyFill',
               label: t('core.dataset.search.Filter'),
-              id: SearchSettingTabEnum.limit
+              value: SearchSettingTabEnum.limit
             },
             {
               label: t('core.module.template.Query extension'),
-              id: SearchSettingTabEnum.queryExtension,
+              value: SearchSettingTabEnum.queryExtension,
               icon: '/imgs/workflow/cfr.svg'
             }
           ]}
-          activeId={currentTabType}
-          onChange={(e) => setCurrentTabType(e as any)}
+          value={currentTabType}
+          onChange={setCurrentTabType}
         />
         {currentTabType === SearchSettingTabEnum.searchMode && (
           <>

projects/app/src/components/support/user/team/TeamManageModal/TeamCard.tsx

@@ -3,7 +3,6 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useContextSelector } from 'use-context-selector';
 import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
-import RowTabs from '@fastgpt/web/components/common/Tabs/RowTabs';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
@@ -15,6 +14,7 @@ import { TeamModalContext } from './context';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { delLeaveTeam } from '@/web/support/user/team/api';
 import dynamic from 'next/dynamic';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 
 enum TabListEnum {
   member = 'member',
@@ -124,14 +124,12 @@ function TeamCard() {
       </Flex>
 
       <Flex px={5} alignItems={'center'} justifyContent={'space-between'}>
-        <RowTabs
+        <LightRowTabs<TabListEnum>
           overflow={'auto'}
           list={Tablist}
           value={tab}
-          onChange={(v) => {
-            setTab(v as TabListEnum);
-          }}
-        ></RowTabs>
+          onChange={setTab}
+        ></LightRowTabs>
         {/* ctrl buttons */}
         <Flex alignItems={'center'}>
           {tab === TabListEnum.member && userInfo?.team.permission.hasManagePer && (