4.8.5 test (#1819)

24596a6e · Archer · GitHub · 5cc01b85 · 24596a6e · 24596a6e
Commit 24596a6e authored Jun 21, 2024 by Archer Committed by GitHub Jun 21, 2024
40 changed files
--- a/.github/workflows/build-sandbox-image.yml
+++ b/.github/workflows/build-sandbox-image.yml
@@ -10,6 +10,7 @@ jobs:
  build-fastgpt-sandbox-images:
    runs-on: ubuntu-20.04
    steps:
+      # install env
      - name: Checkout
        uses: actions/checkout@v3
        with:
@@ -31,6 +32,7 @@ jobs:
          restore-keys: |
            ${{ runner.os }}-buildx-
+      # login docker
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v2
        with:
@@ -49,6 +51,7 @@ jobs:
          username: ${{ secrets.DOCKER_HUB_NAME }}
          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
+      # Set tag
      - name: Set image name and tag
        run: |
          if [[ "${{ github.ref_name }}" == "main" ]]; then
@@ -66,6 +69,7 @@ jobs:
            echo "Docker_Hub_Tag=${{ secrets.DOCKER_IMAGE_NAME }}/fastgpt-sandbox:${{ github.ref_name }}" >> $GITHUB_ENV
            echo "Docker_Hub_Latest=${{ secrets.DOCKER_IMAGE_NAME }}/fastgpt-sandbox:latest" >> $GITHUB_ENV
          fi
      - name: Build and publish image for main branch or tag push event
        env:
          Git_Tag: ${{ env.Git_Tag }}

--- a/.github/workflows/fastgpt-image.yml
+++ b/.github/workflows/fastgpt-image.yml
@@ -11,6 +11,7 @@ jobs:
  build-fastgpt-images:
    runs-on: ubuntu-20.04
    steps:
+      # install env
      - name: Checkout
        uses: actions/checkout@v3
        with:
@@ -31,19 +32,45 @@ jobs:
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: |
            ${{ runner.os }}-buildx-
+      # login docker
      - name: Login to GitHub Container Registry
        uses: docker/login-action@v2
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GH_PAT }}
-      - name: Set DOCKER_REPO_TAGGED based on branch or tag
+      - name: Login to Ali Hub
+        uses: docker/login-action@v2
+        with:
+          registry: registry.cn-hangzhou.aliyuncs.com
+          username: ${{ secrets.ALI_HUB_USERNAME }}
+          password: ${{ secrets.ALI_HUB_PASSWORD }}
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKER_HUB_NAME }}
+          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
+      # Set tag
+      - name: Set image name and tag
        run: |
          if [[ "${{ github.ref_name }}" == "main" ]]; then
-            echo "DOCKER_REPO_TAGGED=ghcr.io/${{ github.repository_owner }}/fastgpt:latest" >> $GITHUB_ENV
+            echo "Git_Tag=ghcr.io/${{ github.repository_owner }}/fastgpt:latest" >> $GITHUB_ENV
+            echo "Git_Latest=ghcr.io/${{ github.repository_owner }}/fastgpt:latest" >> $GITHUB_ENV
+            echo "Ali_Tag=${{ secrets.ALI_IMAGE_NAME }}/fastgpt:latest" >> $GITHUB_ENV
+            echo "Ali_Latest=${{ secrets.ALI_IMAGE_NAME }}/fastgpt:latest" >> $GITHUB_ENV
+            echo "Docker_Hub_Tag=${{ secrets.DOCKER_IMAGE_NAME }}/fastgpt:latest" >> $GITHUB_ENV
+            echo "Docker_Hub_Latest=${{ secrets.DOCKER_IMAGE_NAME }}/fastgpt:latest" >> $GITHUB_ENV
          else
-            echo "DOCKER_REPO_TAGGED=ghcr.io/${{ github.repository_owner }}/fastgpt:${{ github.ref_name }}" >> $GITHUB_ENV
+            echo "Git_Tag=ghcr.io/${{ github.repository_owner }}/fastgpt:${{ github.ref_name }}" >> $GITHUB_ENV
+            echo "Git_Latest=ghcr.io/${{ github.repository_owner }}/fastgpt:latest" >> $GITHUB_ENV
+            echo "Ali_Tag=${{ secrets.ALI_IMAGE_NAME }}/fastgpt:${{ github.ref_name }}" >> $GITHUB_ENV
+            echo "Ali_Latest=${{ secrets.ALI_IMAGE_NAME }}/fastgpt:latest" >> $GITHUB_ENV
+            echo "Docker_Hub_Tag=${{ secrets.DOCKER_IMAGE_NAME }}/fastgpt:${{ github.ref_name }}" >> $GITHUB_ENV
+            echo "Docker_Hub_Latest=${{ secrets.DOCKER_IMAGE_NAME }}/fastgpt:latest" >> $GITHUB_ENV
          fi
      - name: Build and publish image for main branch or tag push event
        env:
          DOCKER_REPO_TAGGED: ${{ env.DOCKER_REPO_TAGGED }}
@@ -56,56 +83,10 @@ jobs:
          --push \
          --cache-from=type=local,src=/tmp/.buildx-cache \
          --cache-to=type=local,dest=/tmp/.buildx-cache \
-          -t ${DOCKER_REPO_TAGGED} \
+          -t ${Git_Tag} \
+          -t ${Git_Latest} \
+          -t ${Ali_Tag} \
+          -t ${Ali_Latest} \
+          -t ${Docker_Hub_Tag} \
+          -t ${Docker_Hub_Latest} \
          .
-  push-to-docker-hub:
-    needs: build-fastgpt-images
-    runs-on: ubuntu-20.04
-    if: github.repository == 'labring/FastGPT'
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Login to Docker Hub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKER_HUB_NAME }}
-          password: ${{ secrets.DOCKER_HUB_PASSWORD }}
-      - name: Set DOCKER_REPO_TAGGED based on branch or tag
-        run: |
-          if [[ "${{ github.ref_name }}" == "main" ]]; then
-            echo "IMAGE_TAG=latest" >> $GITHUB_ENV
-          else
-            echo "IMAGE_TAG=${{ github.ref_name }}" >> $GITHUB_ENV
-          fi
-      - name: Pull image from GitHub Container Registry
-        run: docker pull ghcr.io/${{ github.repository_owner }}/fastgpt:${{env.IMAGE_TAG}}
-      - name: Tag image with Docker Hub repository name and version tag
-        run: docker tag ghcr.io/${{ github.repository_owner }}/fastgpt:${{env.IMAGE_TAG}} ${{ secrets.DOCKER_IMAGE_NAME }}/fastgpt:${{env.IMAGE_TAG}}
-      - name: Push image to Docker Hub
-        run: docker push ${{ secrets.DOCKER_IMAGE_NAME }}/fastgpt:${{env.IMAGE_TAG}}
-  push-to-ali-hub:
-    needs: build-fastgpt-images
-    if: github.repository == 'labring/FastGPT'
-    runs-on: ubuntu-20.04
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-      - name: Login to Ali Hub
-        uses: docker/login-action@v2
-        with:
-          registry: registry.cn-hangzhou.aliyuncs.com
-          username: ${{ secrets.ALI_HUB_USERNAME }}
-          password: ${{ secrets.ALI_HUB_PASSWORD }}
-      - name: Set DOCKER_REPO_TAGGED based on branch or tag
-        run: |
-          if [[ "${{ github.ref_name }}" == "main" ]]; then
-            echo "IMAGE_TAG=latest" >> $GITHUB_ENV
-          else
-            echo "IMAGE_TAG=${{ github.ref_name }}" >> $GITHUB_ENV
-          fi
-      - name: Pull image from GitHub Container Registry
-        run: docker pull ghcr.io/${{ github.repository_owner }}/fastgpt:${{env.IMAGE_TAG}}
-      - name: Tag image with Docker Hub repository name and version tag
-        run: docker tag ghcr.io/${{ github.repository_owner }}/fastgpt:${{env.IMAGE_TAG}} ${{ secrets.ALI_IMAGE_NAME }}/fastgpt:${{env.IMAGE_TAG}}
-      - name: Push image to Docker Hub
-        run: docker push ${{ secrets.ALI_IMAGE_NAME }}/fastgpt:${{env.IMAGE_TAG}}
--- a/docSite/content/zh-cn/docs/development/faq.md
+++ b/docSite/content/zh-cn/docs/development/faq.md
@@ -31,7 +31,9 @@ images: []
 ### 页面崩溃
 1. 关闭翻译
-2. 检查配置文件是否正常加载，如果没有正常加载会导致缺失系统信息，在某些操作下会导致空指针。（95%情况是配置文件不对，可以F12打开控制台，看具体的空指针情况）
+2. 检查配置文件是否正常加载，如果没有正常加载会导致缺失系统信息，在某些操作下会导致空指针。
+  * 95%情况是配置文件不对。会提示 xxx undefined
+  * 提示`URI malformed`，请 Issue 反馈具体操作和页面，这是由于特殊字符串编码解析报错。
 3. 某些api不兼容问题（较少）
 ### 开启内容补全后，响应速度变慢

--- a/docSite/content/zh-cn/docs/development/upgrading/485.md
+++ b/docSite/content/zh-cn/docs/development/upgrading/485.md
@@ -36,6 +36,8 @@ curl --location --request POST 'https://{{host}}/api/admin/initv485' \
 3. 优化 - 原文件编码存取
 4. 优化 - 文件夹读取，支持单个文件夹超出 100 个文件
 5. 优化 - 问答拆分/手动录入，当有`a`字段时，自动将`q`作为补充索引。
-6. 修复 - SSR渲染
+6. 优化 - 对话框页面代码
-7. 修复 - 定时任务无法实际关闭
+7. 修复 - SSR渲染
-8. 修复 - 输入引导特殊字符导致正则报错
+8. 修复 - 定时任务无法实际关闭
\ No newline at end of file
+9. 修复 - 输入引导特殊字符导致正则报错
+10. 修复 - 文件包含特殊字符`%`，且为转义时会导致页面崩溃
\ No newline at end of file
--- a/packages/global/core/dataset/utils.ts
+++ b/packages/global/core/dataset/utils.ts
@@ -24,13 +24,15 @@ export function getSourceNameIcon({
  sourceName: string;
  sourceId?: string;
 }) {
-  const fileIcon = getFileIcon(decodeURIComponent(sourceName), '');
+  try {
+    const fileIcon = getFileIcon(decodeURIComponent(sourceName.replace(/%/g, '%25')), '');
    if (fileIcon) {
      return fileIcon;
    }
    if (strIsLink(sourceId)) {
      return 'common/linkBlue';
    }
+  } catch (error) {}
  return 'file/fill/manual';
 }

--- a/packages/web/components/common/Tabs/RowTabs.tsx
+++ b/packages/web/components/common/Tabs/RowTabs.tsx
@@ -12,7 +12,7 @@ type Props = Omit<BoxProps, 'onChange'> & {
  onChange: (e: string) => void;
 };
-const RowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props }: Props) => {
+const FillRowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props }: Props) => {
  return (
    <Box
      display={'inline-flex'}
@@ -55,4 +55,4 @@ const RowTabs = ({ list, value, onChange, py = '7px', px = '12px', ...props }: P
  );
 };
-export default RowTabs;
+export default FillRowTabs;
--- a/projects/app/src/components/Tabs/index.tsx
+++ b/projects/app/src/components/Tabs/index.tsx
@@ -2,18 +2,24 @@ 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';
+import MyIcon from '../Icon';
-// @ts-ignore
+type Props<ValueType = string> = Omit<GridProps, 'onChange'> & {
-interface Props extends GridProps {
+  list: { icon?: string; label: string | React.ReactNode; value: ValueType }[];
-  list: { id: string; icon?: string; label: string | React.ReactNode }[];
+  value: ValueType;
-  activeId: string;
  size?: 'sm' | 'md' | 'lg';
  inlineStyles?: FlexProps;
-  onChange: (id: string) => void;
+  onChange: (value: ValueType) => void;
-}
+};
-const Tabs = ({ list, size = 'md', activeId, onChange, inlineStyles, ...props }: Props) => {
+const LightRowTabs = <ValueType = string,>({
+  list,
+  size = 'md',
+  value,
+  onChange,
+  inlineStyles,
+  ...props
+}: Props<ValueType>) => {
  const { t } = useTranslation();
  const sizeMap = useMemo(() => {
    switch (size) {
@@ -49,7 +55,7 @@ const Tabs = ({ list, size = 'md', activeId, onChange, inlineStyles, ...props }:
    >
      {list.map((item) => (
        <Flex
-          key={item.id}
+          key={item.value as string}
          py={sizeMap.inlineP}
          alignItems={'center'}
          justifyContent={'center'}
@@ -57,7 +63,7 @@ const Tabs = ({ list, size = 'md', activeId, onChange, inlineStyles, ...props }:
          px={3}
          whiteSpace={'nowrap'}
          {...inlineStyles}
-          {...(activeId === item.id
+          {...(value === item.value
            ? {
                color: 'primary.600',
                cursor: 'default',
@@ -68,8 +74,8 @@ const Tabs = ({ list, size = 'md', activeId, onChange, inlineStyles, ...props }:
                cursor: 'pointer'
              })}
          onClick={() => {
-            if (activeId === item.id) return;
+            if (value === item.value) return;
-            onChange(item.id);
+            onChange(item.value);
          }}
        >
          {item.icon && (
@@ -88,4 +94,4 @@ const Tabs = ({ list, size = 'md', activeId, onChange, inlineStyles, ...props }:
  );
 };
-export default Tabs;
+export default LightRowTabs;
--- a/packages/web/styles/theme.ts
+++ b/packages/web/styles/theme.ts
@@ -551,7 +551,8 @@ export const theme = extendTheme({
        color: 'myGray.600',
        fontWeight: 'normal',
        height: '100%',
-        overflow: 'hidden'
+        overflow: 'hidden',
+        fontSize: '16px'
      },
      a: {
        color: 'primary.600'

--- a/projects/app/src/components/ChatBox/Input/ChatInput.tsx
+++ b/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;

--- a/projects/app/src/components/ChatBox/components/WholeResponseModal.tsx
+++ b/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'}>

--- a/projects/app/src/components/ChatBox/index.tsx
+++ b/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')}

--- a/projects/app/src/components/Layout/navbar.tsx
+++ b/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';

--- a/projects/app/src/components/Layout/navbarPhone.tsx
+++ b/projects/app/src/components/Layout/navbarPhone.tsx
 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';

--- a/projects/app/src/components/SideTabs/index.tsx
+++ b/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 type Props<ValueType = string> = Omit<GridProps, 'onChange'> & {
-export interface Props extends GridProps {
+  list: { value: ValueType; label: string; icon: string }[];
-  list: { id: string; label: string; icon: string }[];
+  value: ValueType;
-  activeId: string;
  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;
+            if (value === item.value) return;
-            onChange(item.id);
+            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;
--- a/projects/app/src/components/common/folder/SelectOneResource.tsx
+++ b/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>

--- a/projects/app/src/components/core/app/DatasetParamsModal.tsx
+++ b/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}
+          value={currentTabType}
-          onChange={(e) => setCurrentTabType(e as any)}
+          onChange={setCurrentTabType}
        />
        {currentTabType === SearchSettingTabEnum.searchMode && (
          <>

--- a/projects/app/src/components/support/user/team/TeamManageModal/TeamCard.tsx
+++ b/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) => {
+          onChange={setTab}
-            setTab(v as TabListEnum);
+        ></LightRowTabs>
-          }}
-        ></RowTabs>
        {/* ctrl buttons */}
        <Flex alignItems={'center'}>
          {tab === TabListEnum.member && userInfo?.team.permission.hasManagePer && (

--- a/projects/app/src/global/core/chat/api.d.ts
+++ b/projects/app/src/global/core/chat/api.d.ts
@@ -51,6 +51,7 @@ export type GetHistoriesProps = OutLinkChatAuthProps & {
 export type UpdateHistoryProps = OutLinkChatAuthProps & {
  appId: string;
  chatId: string;
+  title?: string;
  customTitle?: string;
  top?: boolean;
 };

--- a/projects/app/src/pages/account/index.tsx
+++ b/projects/app/src/pages/account/index.tsx
 import React, { useCallback } from 'react';
-import { Box, Flex, useDisclosure, useTheme } from '@chakra-ui/react';
+import { Box, Flex, useTheme } from '@chakra-ui/react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
@@ -7,7 +7,7 @@ import { useUserStore } from '@/web/support/user/useUserStore';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import PageContainer from '@/components/PageContainer';
 import SideTabs from '@/components/SideTabs';
-import Tabs from '@/components/Tabs';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 import UserInfo from './components/Info';
 import { serviceSideProps } from '@/web/common/utils/i18n';
 import { useTranslation } from 'next-i18next';
@@ -31,7 +31,7 @@ enum TabEnum {
  'loginout' = 'loginout'
 }
-const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
+const Account = ({ currentTab }: { currentTab: TabEnum }) => {
  const { t } = useTranslation();
  const { userInfo, setUserInfo } = useUserStore();
  const { feConfigs, isPc, systemVersion } = useSystemStore();
@@ -40,14 +40,14 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
    {
      icon: 'support/user/userLight',
      label: t('user.Personal Information'),
-      id: TabEnum.info
+      value: TabEnum.info
    },
    ...(feConfigs?.isPlus
      ? [
          {
            icon: 'support/usage/usageRecordLight',
            label: t('user.Usage Record'),
-            id: TabEnum.usage
+            value: TabEnum.usage
          }
        ]
      : []),
@@ -56,7 +56,7 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
          {
            icon: 'support/bill/payRecordLight',
            label: t('support.wallet.Bills'),
-            id: TabEnum.bill
+            value: TabEnum.bill
          }
        ]
      : []),
@@ -66,7 +66,7 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
          {
            icon: 'support/account/promotionLight',
            label: t('user.Promotion Record'),
-            id: TabEnum.promotion
+            value: TabEnum.promotion
          }
        ]
      : []),
@@ -75,21 +75,21 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
          {
            icon: 'support/outlink/apikeyLight',
            label: t('user.apikey.key'),
-            id: TabEnum.apikey
+            value: TabEnum.apikey
          }
        ]
      : []),
    {
      icon: 'support/user/individuation',
      label: t('support.account.Individuation'),
-      id: TabEnum.individuation
+      value: TabEnum.individuation
    },
    ...(feConfigs.isPlus
      ? [
          {
            icon: 'support/user/informLight',
            label: t('user.Notice'),
-            id: TabEnum.inform
+            value: TabEnum.inform
          }
        ]
      : []),
@@ -97,7 +97,7 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
    {
      icon: 'support/account/loginoutLight',
      label: t('user.Sign Out'),
-      id: TabEnum.loginout
+      value: TabEnum.loginout
    }
  ];
@@ -139,13 +139,13 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
              flex={'0 0 200px'}
              borderRight={theme.borders.base}
            >
-              <SideTabs
+              <SideTabs<TabEnum>
                flex={1}
                mx={'auto'}
                mt={2}
                w={'100%'}
                list={tabList}
-                activeId={currentTab}
+                value={currentTab}
                onChange={setCurrentTab}
              />
              <Flex alignItems={'center'}>
@@ -157,14 +157,14 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
            </Flex>
          ) : (
            <Box mb={3}>
-              <Tabs
+              <LightRowTabs<TabEnum>
                m={'auto'}
                size={isPc ? 'md' : 'sm'}
                list={tabList.map((item) => ({
-                  id: item.id,
+                  value: item.value,
                  label: item.label
                }))}
-                activeId={currentTab}
+                value={currentTab}
                onChange={setCurrentTab}
              />
            </Box>

--- a/projects/app/src/pages/api/core/chat/updateHistory.ts
+++ b/projects/app/src/pages/api/core/chat/updateHistory.ts
@@ -8,7 +8,7 @@ import { ApiRequestProps } from '@fastgpt/service/type/next';
 /* update chat top, custom title */
 async function handler(req: ApiRequestProps<UpdateHistoryProps>, res: NextApiResponse) {
-  const { appId, chatId, customTitle, top } = req.body;
+  const { appId, chatId, title, customTitle, top } = req.body;
  await autChatCrud({
    req,
    authToken: true,
@@ -20,6 +20,7 @@ async function handler(req: ApiRequestProps<UpdateHistoryProps>, res: NextApiRes
    { appId, chatId },
    {
      updateTime: new Date(),
+      ...(title !== undefined && { title }),
      ...(customTitle !== undefined && { customTitle }),
      ...(top !== undefined && { top })
    }

--- a/projects/app/src/pages/app/detail/components/SimpleApp/components/ToolSelectModal.tsx
+++ b/projects/app/src/pages/app/detail/components/SimpleApp/components/ToolSelectModal.tsx
@@ -19,7 +19,7 @@ import {
  Switch,
  Textarea
 } from '@chakra-ui/react';
-import RowTabs from '@fastgpt/web/components/common/Tabs/RowTabs';
+import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs';
 import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
 import { FlowNodeTemplateType } from '@fastgpt/global/core/workflow/type/index.d';
@@ -97,7 +97,7 @@ const ToolSelectModal = ({ onClose, ...props }: Props & { onClose: () => void })
    >
      {/* Header: row and search */}
      <Box px={[3, 6]} pt={4} display={'flex'} justifyContent={'space-between'} w={'full'}>
-        <RowTabs
+        <FillRowTabs
          list={[
            {
              icon: 'core/modules/teamPlugin',

--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/NodeTemplatesModal.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/NodeTemplatesModal.tsx
@@ -15,7 +15,7 @@ import { getPreviewPluginNode, getSystemPlugTemplates } from '@/web/core/app/api
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { workflowNodeTemplateList } from '@fastgpt/web/core/workflow/constants';
-import RowTabs from '@fastgpt/web/components/common/Tabs/RowTabs';
+import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useRouter } from 'next/router';
@@ -143,7 +143,7 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
        >
          <Box pl={'20px'} mb={3} pr={'10px'} whiteSpace={'nowrap'} overflow={'hidden'}>
            <Flex flex={'1 0 0'} alignItems={'center'} gap={3}>
-              <RowTabs
+              <FillRowTabs
                list={[
                  {
                    icon: 'core/modules/basicNode',

--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeHttp/index.tsx
@@ -21,11 +21,10 @@ import {
 } from '@chakra-ui/react';
 import { NodeInputKeyEnum } from '@fastgpt/global/core/workflow/constants';
 import { useTranslation } from 'next-i18next';
-import Tabs from '@/components/Tabs';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { FlowNodeInputItemType } from '@fastgpt/global/core/workflow/type/io.d';
 import { useToast } from '@fastgpt/web/hooks/useToast';
-import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import JSONEditor from '@fastgpt/web/components/common/Textarea/JsonEditor';
 import { formatEditorVariablePickerIcon } from '@fastgpt/global/core/workflow/utils';
 import { EditorVariablePickerType } from '@fastgpt/web/components/common/Textarea/PromptEditor/type';
@@ -310,9 +309,9 @@ export function RenderHttpProps({
            label={t('core.module.http.Props tip', { variable: variableText })}
          ></QuestionTip>
        </Flex>
-        <Tabs
+        <LightRowTabs<TabEnum>
          list={[
-            { label: <RenderPropsItem text="Params" num={paramsLength} />, id: TabEnum.params },
+            { label: <RenderPropsItem text="Params" num={paramsLength} />, value: TabEnum.params },
            ...(!['GET', 'DELETE'].includes(requestMethods)
              ? [
                  {
@@ -322,14 +321,17 @@ export function RenderHttpProps({
                        {jsonBody?.value && <Box ml={1}>✅</Box>}
                      </Flex>
                    ),
-                    id: TabEnum.body
+                    value: TabEnum.body
                  }
                ]
              : []),
-            { label: <RenderPropsItem text="Headers" num={headersLength} />, id: TabEnum.headers }
+            {
+              label: <RenderPropsItem text="Headers" num={headersLength} />,
+              value: TabEnum.headers
+            }
          ]}
-          activeId={selectedTab}
+          value={selectedTab}
-          onChange={(e) => setSelectedTab(e as any)}
+          onChange={setSelectedTab}
        />
        <Box bg={'white'} borderRadius={'md'}>
          {params &&

--- a/projects/app/src/pages/app/list/index.tsx
+++ b/projects/app/src/pages/app/list/index.tsx
 import React, { useCallback, useState } from 'react';
-import { Box, Flex, Button, useDisclosure, HStack } from '@chakra-ui/react';
+import { Box, Flex, Button, useDisclosure } from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
 import { serviceSideProps } from '@/web/common/utils/i18n';
-import PageContainer from '@/components/PageContainer';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useI18n } from '@/web/context/I18n';
 import { useTranslation } from 'next-i18next';
@@ -32,8 +31,8 @@ import {
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import type { CreateAppType } from './components/CreateModal';
 import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
-import Tabs from '@/components/Tabs';
 import MyBox from '@fastgpt/web/components/common/MyBox';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 const CreateModal = dynamic(() => import('./components/CreateModal'));
 const EditFolderModal = dynamic(
@@ -121,26 +120,26 @@ const MyApps = () => {
            alignItems={'center'}
            justifyContent={'space-between'}
          >
-            <Tabs
+            <LightRowTabs
              list={[
                {
                  label: appT('type.All'),
-                  id: 'ALL'
+                  value: 'ALL'
                },
                {
                  label: appT('type.Simple bot'),
-                  id: AppTypeEnum.simple
+                  value: AppTypeEnum.simple
                },
                {
                  label: appT('type.Workflow bot'),
-                  id: AppTypeEnum.workflow
+                  value: AppTypeEnum.workflow
                },
                {
                  label: appT('type.Plugin'),
-                  id: AppTypeEnum.plugin
+                  value: AppTypeEnum.plugin
                }
              ]}
-              activeId={appType}
+              value={appType}
              inlineStyles={{ px: 0.5 }}
              gap={5}
              display={'flex'}

--- a/projects/app/src/pages/chat/components/ChatHeader.tsx
+++ b/projects/app/src/pages/chat/components/ChatHeader.tsx
@@ -9,6 +9,8 @@ import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';
 import MyTag from '@fastgpt/web/components/common/Tag/index';
+import { useContextSelector } from 'use-context-selector';
+import { ChatContext } from '@/web/core/chat/context/chatContext';
 const ChatHeader = ({
  history,
@@ -16,8 +18,7 @@ const ChatHeader = ({
  appAvatar,
  chatModels,
  showHistory,
-  onRoute2AppDetail,
+  onRoute2AppDetail
-  onOpenSlider
 }: {
  history: ChatItemType[];
  appName: string;
@@ -25,7 +26,6 @@ const ChatHeader = ({
  chatModels?: string[];
  showHistory?: boolean;
  onRoute2AppDetail?: () => void;
-  onOpenSlider: () => void;
 }) => {
  const theme = useTheme();
  const { t } = useTranslation();
@@ -36,6 +36,8 @@ const ChatHeader = ({
    [appName, history, t]
  );
+  const onOpenSlider = useContextSelector(ChatContext, (v) => v.onOpenSlider);
  return (
    <Flex
      alignItems={'center'}

--- a/projects/app/src/pages/chat/components/ChatHistorySlider.tsx
+++ b/projects/app/src/pages/chat/components/ChatHistorySlider.tsx
@@ -8,7 +8,7 @@ import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import Tabs from '@/components/Tabs';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { AppListItemType } from '@fastgpt/global/core/app/type';
 import { useI18n } from '@/web/context/I18n';
@@ -20,6 +20,9 @@ import {
 } from '@fastgpt/global/common/parentFolder/type';
 import { getMyApps } from '@/web/core/app/api';
 import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import { useContextSelector } from 'use-context-selector';
+import { ChatContext } from '@/web/core/chat/context/chatContext';
+import MyBox from '@fastgpt/web/components/common/MyBox';
 type HistoryItemType = {
  id: string;
@@ -38,30 +41,22 @@ const ChatHistorySlider = ({
  appId,
  appName,
  appAvatar,
-  history,
  apps = [],
  confirmClearText,
-  activeChatId,
-  onChangeChat,
  onDelHistory,
  onClearHistory,
  onSetHistoryTop,
-  onSetCustomTitle,
+  onSetCustomTitle
-  onClose
 }: {
  appId?: string;
  appName: string;
  appAvatar: string;
-  history: HistoryItemType[];
-  activeChatId: string;
  apps?: AppListItemType[];
  confirmClearText: string;
-  onChangeChat: (chatId?: string) => void;
  onDelHistory: (e: { chatId: string }) => void;
  onClearHistory: () => void;
  onSetHistoryTop?: (e: { chatId: string; top: boolean }) => void;
  onSetCustomTitle?: (e: { chatId: string; title: string }) => void;
-  onClose: () => void;
 }) => {
  const theme = useTheme();
  const router = useRouter();
@@ -73,7 +68,28 @@ const ChatHistorySlider = ({
  const { isPc } = useSystemStore();
  const { userInfo } = useUserStore();
-  const [currentTab, setCurrentTab] = useState<`${TabEnum}`>(TabEnum.history);
+  const [currentTab, setCurrentTab] = useState<TabEnum>(TabEnum.history);
+  const {
+    histories,
+    onChangeChatId,
+    onChangeAppId,
+    chatId: activeChatId,
+    isLoading
+  } = useContextSelector(ChatContext, (v) => v);
+  const concatHistory = useMemo(() => {
+    const formatHistories: HistoryItemType[] = histories.map((item) => ({
+      id: item.chatId,
+      title: item.title,
+      customTitle: item.customTitle,
+      top: item.top
+    }));
+    const newChat: HistoryItemType = { id: activeChatId, title: t('core.chat.New Chat') };
+    const activeChat = histories.find((item) => item.chatId === activeChatId);
+    return !activeChat ? [newChat].concat(formatHistories) : formatHistories;
+  }, [activeChatId, histories, t]);
  const showApps = apps?.length > 0;
@@ -86,15 +102,6 @@ const ChatHistorySlider = ({
    content: confirmClearText
  });
-  const concatHistory = useMemo<HistoryItemType[]>(
-    () =>
-      !activeChatId
-        ? //@ts-ignore
-          [{ id: activeChatId, title: t('core.chat.New Chat') }].concat(history)
-        : history,
-    [activeChatId, history, t]
-  );
  const canRouteToDetail = useMemo(
    () => appId && userInfo?.team.permission.hasWritePer,
    [appId, userInfo?.team.permission.hasWritePer]
@@ -111,22 +118,10 @@ const ChatHistorySlider = ({
    );
  }, []);
-  const onChangeApp = useCallback(
-    (appId: string) => {
-      router.replace({
-        query: {
-          ...router.query,
-          chatId: '',
-          appId
-        }
-      });
-    },
-    [router]
-  );
  return (
-    <Flex
+    <MyBox
-      position={'relative'}
+      isLoading={isLoading}
+      display={'flex'}
      flexDirection={'column'}
      w={'100%'}
      h={'100%'}
@@ -162,27 +157,27 @@ const ChatHistorySlider = ({
      {/* menu */}
      <Flex w={'100%'} px={[2, 5]} h={'36px'} my={5} alignItems={'center'}>
        {!isPc && appId && (
-          <Tabs
+          <LightRowTabs<TabEnum>
            flex={'1 0 0'}
            mr={2}
            list={[
-              { label: t('core.chat.Recent use'), id: TabEnum.recently },
+              { label: t('core.chat.Recent use'), value: TabEnum.recently },
-              { label: t('App'), id: TabEnum.app },
+              { label: t('App'), value: TabEnum.app },
-              { label: t('core.chat.History'), id: TabEnum.history }
+              { label: t('core.chat.History'), value: TabEnum.history }
            ]}
-            activeId={currentTab}
+            value={currentTab}
-            onChange={(e) => setCurrentTab(e as `${TabEnum}`)}
+            onChange={setCurrentTab}
          />
        )}
        <Button
          variant={'whitePrimary'}
-          flex={['0', 1]}
+          flex={['0 0 auto', 1]}
          h={'100%'}
          color={'primary.600'}
          borderRadius={'xl'}
          leftIcon={<MyIcon name={'core/chat/chatLight'} w={'16px'} />}
          overflow={'hidden'}
-          onClick={() => onChangeChat()}
+          onClick={() => onChangeChatId()}
        >
          {t('core.chat.New Chat')}
        </Button>
@@ -195,7 +190,11 @@ const ChatHistorySlider = ({
            size={'mdSquare'}
            aria-label={''}
            borderRadius={'50%'}
-            onClick={openConfirm(onClearHistory)}
+            onClick={() =>
+              openConfirm(() => {
+                onClearHistory();
+              })()
+            }
          >
            <MyIcon name={'common/clearLight'} w={'16px'} />
          </IconButton>
@@ -232,7 +231,7 @@ const ChatHistorySlider = ({
                    }
                  : {
                      onClick: () => {
-                        onChangeChat(item.id);
+                        onChangeChatId(item.id);
                      }
                    })}
              >
@@ -292,7 +291,7 @@ const ChatHistorySlider = ({
                              onClick: () => {
                                onDelHistory({ chatId: item.id });
                                if (item.id === activeChatId) {
-                                  onChangeChat();
+                                  onChangeChatId();
                                }
                              },
                              type: 'danger'
@@ -324,10 +323,7 @@ const ChatHistorySlider = ({
                        color: 'primary.600'
                      }
                    : {
-                        onClick: () => {
+                        onClick: () => onChangeAppId(item._id)
-                          onChangeApp(item._id);
-                          onClose();
-                        }
                      })}
                >
                  <Avatar src={item.avatar} w={'24px'} />
@@ -344,8 +340,7 @@ const ChatHistorySlider = ({
              value={appId}
              onSelect={(id) => {
                if (!id) return;
-                onChangeApp(id);
+                onChangeAppId(id);
-                onClose();
              }}
              server={getAppList}
            />
@@ -377,7 +372,7 @@ const ChatHistorySlider = ({
      )}
      <EditTitleModal />
      <ConfirmModal />
-    </Flex>
+    </MyBox>
  );
 };

--- a/projects/app/src/pages/chat/components/SliderApps.tsx
+++ b/projects/app/src/pages/chat/components/SliderApps.tsx
@@ -7,13 +7,15 @@ import Avatar from '@/components/Avatar';
 import { AppListItemType } from '@fastgpt/global/core/app/type';
 import MyDivider from '@fastgpt/web/components/common/MyDivider';
 import MyPopover from '@fastgpt/web/components/common/MyPopover/index';
-import SelectOneResource from '@/components/common/folder/SelectOneResource';
 import { getMyApps } from '@/web/core/app/api';
 import {
  GetResourceFolderListProps,
  GetResourceListItemResponse
 } from '@fastgpt/global/common/parentFolder/type';
 import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
+import dynamic from 'next/dynamic';
+const SelectOneResource = dynamic(() => import('@/components/common/folder/SelectOneResource'));
 const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppId: string }) => {
  const { t } = useTranslation();
@@ -74,11 +76,6 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI
      {!isTeamChat && (
        <>
          <MyDivider h={2} my={1} />
-          <MyPopover
-            placement="right-start"
-            offset={[30, -65]}
-            trigger="hover"
-            Trigger={
          <HStack
            px={4}
            my={2}
@@ -87,6 +84,11 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI
            justifyContent={'space-between'}
          >
            <Box>{t('core.chat.Recent use')}</Box>
+            <MyPopover
+              placement="bottom-end"
+              offset={[20, 10]}
+              trigger="hover"
+              Trigger={
                <HStack
                  spacing={0.5}
                  cursor={'pointer'}
@@ -102,7 +104,6 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI
                  <Box>{t('common.More')}</Box>
                  <MyIcon name={'common/select'} w={'1rem'} />
                </HStack>
-              </HStack>
              }
            >
              {({ onClose }) => (
@@ -119,6 +120,7 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI
                </Box>
              )}
            </MyPopover>
+          </HStack>
        </>
      )}

--- a/projects/app/src/pages/chat/index.tsx
+++ b/projects/app/src/pages/chat/index.tsx
--- a/projects/app/src/pages/chat/share.tsx
+++ b/projects/app/src/pages/chat/share.tsx
--- a/projects/app/src/pages/chat/team.tsx
+++ b/projects/app/src/pages/chat/team.tsx
--- a/projects/app/src/pages/dataset/detail/components/InputDataModal.tsx
+++ b/projects/app/src/pages/dataset/detail/components/InputDataModal.tsx
@@ -75,16 +75,16 @@ const InputDataModal = ({
  });
  const tabList = [
-    { label: t('dataset.data.edit.Content'), id: TabEnum.content, icon: 'common/overviewLight' },
+    { label: t('dataset.data.edit.Content'), value: TabEnum.content, icon: 'common/overviewLight' },
    {
      label: t('dataset.data.edit.Index', { amount: indexes.length }),
-      id: TabEnum.index,
+      value: TabEnum.index,
      icon: 'kbTest'
    },
    ...(dataId
-      ? [{ label: t('dataset.data.edit.Delete'), id: TabEnum.delete, icon: 'delete' }]
+      ? [{ label: t('dataset.data.edit.Delete'), value: TabEnum.delete, icon: 'delete' }]
      : []),
-    { label: t('dataset.data.edit.Course'), id: TabEnum.doc, icon: 'common/courseLight' }
+    { label: t('dataset.data.edit.Course'), value: TabEnum.doc, icon: 'common/courseLight' }
  ];
  const { ConfirmModal, openConfirm } = useConfirm({
@@ -243,10 +243,10 @@ const InputDataModal = ({
            mb={6}
            fontSize={'sm'}
          />
-          <SideTabs
+          <SideTabs<TabEnum>
            list={tabList}
-            activeId={currentTab}
+            value={currentTab}
-            onChange={async (e: any) => {
+            onChange={async (e) => {
              if (e === TabEnum.delete) {
                return openConfirm(onDeleteData)();
              }

--- a/projects/app/src/pages/dataset/detail/components/Slider.tsx
+++ b/projects/app/src/pages/dataset/detail/components/Slider.tsx
@@ -8,9 +8,9 @@ import DatasetTypeTag from '@/components/core/dataset/DatasetTypeTag';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import SideTabs from '@/components/SideTabs';
 import { useRouter } from 'next/router';
-import Tabs from '@/components/Tabs';
 import { useContextSelector } from 'use-context-selector';
 import { DatasetPageContext } from '@/web/core/dataset/context/datasetPageContext';
+import LightRowTabs from '@fastgpt/web/components/common/Tabs/LightRowTabs';
 import { useI18n } from '@/web/context/I18n';
 export enum TabEnum {
@@ -34,12 +34,12 @@ const Slider = ({ currentTab }: { currentTab: TabEnum }) => {
  const tabList = [
    {
      label: t('core.dataset.Collection'),
-      id: TabEnum.collectionCard,
+      value: TabEnum.collectionCard,
      icon: 'common/overviewLight'
    },
-    { label: t('core.dataset.test.Search Test'), id: TabEnum.test, icon: 'kbTest' },
+    { label: t('core.dataset.test.Search Test'), value: TabEnum.test, icon: 'kbTest' },
    ...(datasetDetail.permission.hasManagePer
-      ? [{ label: t('common.Config'), id: TabEnum.info, icon: 'common/settingLight' }]
+      ? [{ label: t('common.Config'), value: TabEnum.info, icon: 'common/settingLight' }]
      : [])
  ];
@@ -78,16 +78,14 @@ const Slider = ({ currentTab }: { currentTab: TabEnum }) => {
              </Flex>
            )}
          </Box>
-          <SideTabs
+          <SideTabs<TabEnum>
            px={4}
            flex={1}
            mx={'auto'}
            w={'100%'}
            list={tabList}
-            activeId={currentTab}
+            value={currentTab}
-            onChange={(e: any) => {
+            onChange={setCurrentTab}
-              setCurrentTab(e);
-            }}
          />
          <Box px={4}>
            {rebuildingCount > 0 && (
@@ -149,16 +147,13 @@ const Slider = ({ currentTab }: { currentTab: TabEnum }) => {
        </Flex>
      ) : (
        <Box mb={3}>
-          <Tabs
+          <LightRowTabs<TabEnum>
            m={'auto'}
            w={'260px'}
            size={isPc ? 'md' : 'sm'}
-            list={tabList.map((item) => ({
+            list={tabList}
-              id: item.id,
+            value={currentTab}
-              label: item.label
+            onChange={setCurrentTab}
-            }))}
-            activeId={currentTab}
-            onChange={(e: any) => setCurrentTab(e)}
          />
        </Box>
      )}

--- a/projects/app/src/pages/login/fastlogin.tsx
+++ b/projects/app/src/pages/login/fastlogin.tsx
 import React, { useCallback, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import type { ResLogin } from '@/global/support/api/userRes.d';
-import { useChatStore } from '@/web/core/chat/storeChat';
+import { useChatStore } from '@/web/core/chat/context/storeChat';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { clearToken, setToken } from '@/web/support/user/auth';
 import { postFastLogin } from '@/web/support/user/api';

--- a/projects/app/src/pages/login/index.tsx
+++ b/projects/app/src/pages/login/index.tsx
@@ -5,7 +5,7 @@ import { useSystemStore } from '@/web/common/system/useSystemStore';
 import type { ResLogin } from '@/global/support/api/userRes.d';
 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 LoginForm from './components/LoginForm/LoginForm';
 import dynamic from 'next/dynamic';
 import { serviceSideProps } from '@/web/common/utils/i18n';

--- a/projects/app/src/pages/login/provider.tsx
+++ b/projects/app/src/pages/login/provider.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import type { ResLogin } from '@/global/support/api/userRes.d';
-import { useChatStore } from '@/web/core/chat/storeChat';
+import { useChatStore } from '@/web/core/chat/context/storeChat';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { clearToken, setToken } from '@/web/support/user/auth';
 import { oauthLogin } from '@/web/support/user/api';

--- a/projects/app/src/web/core/chat/api.ts
+++ b/projects/app/src/web/core/chat/api.ts
@@ -43,7 +43,7 @@ export const delChatHistoryById = (data: DelHistoryProps) => DELETE(`/core/chat/
 /**
 * clear all history by appid
 */
-export const clearChatHistoryByAppId = (data: ClearHistoriesProps) =>
+export const delClearChatHistories = (data: ClearHistoriesProps) =>
  DELETE(`/core/chat/clearHistories`, data);
 /**

--- a/projects/app/src/web/core/chat/context/chatContext.tsx
+++ b/projects/app/src/web/core/chat/context/chatContext.tsx
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useRouter } from 'next/router';
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import { createContext } from 'use-context-selector';
+import { delClearChatHistories, delChatHistoryById, putChatHistory } from '../api';
+import { ChatHistoryItemType } from '@fastgpt/global/core/chat/type';
+import { ClearHistoriesProps, DelHistoryProps, UpdateHistoryProps } from '@/global/core/chat/api';
+import { useDisclosure } from '@chakra-ui/react';
+import { useChatStore } from './storeChat';
+type ChatContextValueType = {
+  histories: ChatHistoryItemType[];
+  loadHistories: () => Promise<ChatHistoryItemType[]>;
+};
+type ChatContextType = ChatContextValueType & {
+  chatId: string;
+  onUpdateHistory: (data: UpdateHistoryProps) => void;
+  onDelHistory: (data: DelHistoryProps) => Promise<undefined>;
+  onClearHistories: (data: ClearHistoriesProps) => Promise<undefined>;
+  isOpenSlider: boolean;
+  onCloseSlider: () => void;
+  onOpenSlider: () => void;
+  forbidLoadChat: React.MutableRefObject<boolean>;
+  onChangeChatId: (chatId?: string, forbid?: boolean) => void;
+  onChangeAppId: (appId: string) => void;
+  isLoading: boolean;
+};
+export const ChatContext = createContext<ChatContextType>({
+  chatId: '',
+  // forbidLoadChat: undefined,
+  histories: [],
+  loadHistories: function (): Promise<ChatHistoryItemType[]> {
+    throw new Error('Function not implemented.');
+  },
+  onUpdateHistory: function (data: UpdateHistoryProps): void {
+    throw new Error('Function not implemented.');
+  },
+  onDelHistory: function (data: DelHistoryProps): Promise<undefined> {
+    throw new Error('Function not implemented.');
+  },
+  onClearHistories: function (data: ClearHistoriesProps): Promise<undefined> {
+    throw new Error('Function not implemented.');
+  },
+  isOpenSlider: false,
+  onCloseSlider: function (): void {
+    throw new Error('Function not implemented.');
+  },
+  onOpenSlider: function (): void {
+    throw new Error('Function not implemented.');
+  },
+  forbidLoadChat: { current: false },
+  onChangeChatId: function (chatId?: string | undefined, forbid?: boolean | undefined): void {
+    throw new Error('Function not implemented.');
+  },
+  onChangeAppId: function (appId: string): void {
+    throw new Error('Function not implemented.');
+  },
+  isLoading: false
+});
+const ChatContextProvider = ({
+  children,
+  histories,
+  loadHistories
+}: ChatContextValueType & { children: ReactNode }) => {
+  const router = useRouter();
+  const { chatId = '' } = router.query as { chatId: string };
+  const isSystemChat = router.pathname === '/chat';
+  const forbidLoadChat = useRef(false);
+  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
+  const { setLastChatId } = useChatStore();
+  const onChangeChatId = useCallback(
+    (changeChatId = '', forbid = false) => {
+      if (chatId !== changeChatId) {
+        forbidLoadChat.current = forbid;
+        setLastChatId(changeChatId);
+        router.replace({
+          query: {
+            ...router.query,
+            chatId: changeChatId || ''
+          }
+        });
+      }
+      onCloseSlider();
+    },
+    [chatId, onCloseSlider, router, setLastChatId]
+  );
+  useEffect(() => {
+    setLastChatId(chatId);
+  }, [chatId, setLastChatId]);
+  const onChangeAppId = useCallback(
+    (appId: string) => {
+      router.replace({
+        query: {
+          ...router.query,
+          chatId: '',
+          appId
+        }
+      });
+      onCloseSlider();
+    },
+    [onCloseSlider, router]
+  );
+  const { runAsync: onUpdateHistory, loading: isUpdatingHistory } = useRequest2(putChatHistory, {
+    onSuccess() {
+      loadHistories();
+    }
+  });
+  const { runAsync: onDelHistory, loading: isDeletingHistory } = useRequest2(delChatHistoryById, {
+    onSuccess() {
+      loadHistories();
+    }
+  });
+  const { runAsync: onClearHistories, loading: isClearingHistory } = useRequest2(
+    delClearChatHistories,
+    {
+      onSuccess() {
+        loadHistories();
+      },
+      onFinally() {
+        onChangeChatId('');
+      }
+    }
+  );
+  const isLoading = isUpdatingHistory || isDeletingHistory || isClearingHistory;
+  const contextValue = {
+    chatId,
+    histories,
+    loadHistories,
+    onUpdateHistory,
+    onDelHistory,
+    onClearHistories,
+    isOpenSlider,
+    onCloseSlider,
+    onOpenSlider,
+    forbidLoadChat,
+    onChangeChatId,
+    onChangeAppId,
+    isLoading
+  };
+  return <ChatContext.Provider value={contextValue}>{children}</ChatContext.Provider>;
+};
+export default ChatContextProvider;
--- a/projects/app/src/web/core/chat/context/storeChat.ts
+++ b/projects/app/src/web/core/chat/context/storeChat.ts
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import type { DeleteChatItemProps } from '@/global/core/chat/api';
+type State = {
+  lastChatAppId: string;
+  setLastChatAppId: (id: string) => void;
+  lastChatId: string;
+  setLastChatId: (id: string) => void;
+};
+export const useChatStore = create<State>()(
+  devtools(
+    persist(
+      immer((set, get) => ({
+        lastChatAppId: '',
+        setLastChatAppId(id: string) {
+          set((state) => {
+            state.lastChatAppId = id;
+          });
+        },
+        lastChatId: '',
+        setLastChatId(id: string) {
+          set((state) => {
+            state.lastChatId = id;
+          });
+        }
+      })),
+      {
+        name: 'chatStore',
+        partialize: (state) => ({
+          lastChatAppId: state.lastChatAppId,
+          lastChatId: state.lastChatId
+        })
+      }
+    )
+  )
+);
--- a/projects/app/src/web/core/chat/storeChat.ts
+++ b/projects/app/src/web/core/chat/storeChat.ts
-import { create } from 'zustand';
-import { devtools, persist } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
-import type { ChatHistoryItemType } from '@fastgpt/global/core/chat/type.d';
-import type {
-  InitChatResponse,
-  GetHistoriesProps,
-  ClearHistoriesProps,
-  DelHistoryProps,
-  UpdateHistoryProps,
-  DeleteChatItemProps
-} from '@/global/core/chat/api';
-import {
-  delChatHistoryById,
-  getChatHistories,
-  clearChatHistoryByAppId,
-  delChatRecordById,
-  putChatHistory
-} from '@/web/core/chat/api';
-import { defaultChatData } from '@/global/core/chat/constants';
-type State = {
-  histories: ChatHistoryItemType[];
-  loadHistories: (data: GetHistoriesProps) => Promise<null>;
-  delOneHistory(data: DelHistoryProps): Promise<void>;
-  clearHistories(data: ClearHistoriesProps): Promise<void>;
-  pushHistory: (history: ChatHistoryItemType) => void;
-  updateHistory: (e: UpdateHistoryProps & { updateTime?: Date; title?: string }) => Promise<any>;
-  chatData: InitChatResponse;
-  setChatData: (e: InitChatResponse | ((e: InitChatResponse) => InitChatResponse)) => void;
-  lastChatAppId: string;
-  setLastChatAppId: (id: string) => void;
-  lastChatId: string;
-  setLastChatId: (id: string) => void;
-  delOneHistoryItem: (e: DeleteChatItemProps) => Promise<any>;
-};
-export const useChatStore = create<State>()(
-  devtools(
-    persist(
-      immer((set, get) => ({
-        lastChatAppId: '',
-        setLastChatAppId(id: string) {
-          set((state) => {
-            state.lastChatAppId = id;
-          });
-        },
-        lastChatId: '',
-        setLastChatId(id: string) {
-          set((state) => {
-            state.lastChatId = id;
-          });
-        },
-        histories: [],
-        async loadHistories(e) {
-          const data = await getChatHistories(e);
-          set((state) => {
-            state.histories = data;
-          });
-          return null;
-        },
-        async delOneHistory(props) {
-          set((state) => {
-            state.histories = state.histories.filter((item) => item.chatId !== props.chatId);
-          });
-          await delChatHistoryById(props);
-        },
-        async clearHistories(data) {
-          set((state) => {
-            state.histories = [];
-          });
-          await clearChatHistoryByAppId(data);
-        },
-        pushHistory(history) {
-          set((state) => {
-            state.histories = [history, ...state.histories];
-          });
-        },
-        async updateHistory(props) {
-          const { chatId, customTitle, top, title, updateTime } = props;
-          const index = get().histories.findIndex((item) => item.chatId === chatId);
-          if (index > -1) {
-            const newHistory = {
-              ...get().histories[index],
-              ...(title && { title }),
-              ...(updateTime && { updateTime }),
-              ...(customTitle !== undefined && { customTitle }),
-              ...(top !== undefined && { top })
-            };
-            if (customTitle !== undefined || top !== undefined) {
-              try {
-                putChatHistory(props);
-              } catch (error) {}
-            }
-            set((state) => {
-              const newHistories = (() => {
-                return [
-                  newHistory,
-                  ...get().histories.slice(0, index),
-                  ...get().histories.slice(index + 1)
-                ];
-              })();
-              state.histories = newHistories;
-            });
-          }
-        },
-        chatData: defaultChatData,
-        setChatData(e = defaultChatData) {
-          if (typeof e === 'function') {
-            set((state) => {
-              state.chatData = e(state.chatData);
-            });
-          } else {
-            set((state) => {
-              state.chatData = e;
-            });
-          }
-        },
-        async delOneHistoryItem(props) {
-          const { chatId, contentId } = props;
-          if (!chatId || !contentId) return;
-          try {
-            get().setChatData((state) => ({
-              ...state,
-              history: state.history.filter((item) => item.dataId !== contentId)
-            }));
-            await delChatRecordById(props);
-          } catch (err) {
-            console.log(err);
-          }
-        }
-      })),
-      {
-        name: 'chatStore',
-        partialize: (state) => ({
-          lastChatAppId: state.lastChatAppId,
-          lastChatId: state.lastChatId
-        })
-      }
-    )
-  )
-);
--- a/projects/app/src/web/core/chat/storeShareChat.ts
+++ b/projects/app/src/web/core/chat/storeShareChat.ts
@@ -10,32 +10,16 @@ const nanoid = customAlphabet(
 type State = {
  localUId: string;
-  shareChatHistory: (ChatHistoryItemType & { delete?: boolean })[];
-  clearLocalHistory: (shareId?: string) => void;
 };
 export const useShareChatStore = create<State>()(
  devtools(
    persist(
      immer((set, get) => ({
-        localUId: `shareChat-${Date.now()}-${nanoid()}`,
+        localUId: `shareChat-${Date.now()}-${nanoid()}`
-        shareChatHistory: [], // old version field
-        clearLocalHistory() {
-          // abandon
-          set((state) => {
-            state.shareChatHistory = state.shareChatHistory.map((item) => ({
-              ...item,
-              delete: true
-            }));
-          });
-        }
      })),
      {
-        name: 'shareChatStore',
+        name: 'shareChatStore'
-        partialize: (state) => ({
-          localUId: state.localUId,
-          shareChatHistory: state.shareChatHistory
-        })
      }
    )
  )