4.8.5 test (#1819)

2024-06-21 18:32:05 +08:00
parent 5cc01b8509
commit 24596a6e21
40 changed files with 908 additions and 1058 deletions
--- 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,
-  onOpenSlider
+  onRoute2AppDetail
 }: {
  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,
-  onClose
+  onSetCustomTitle
 }: {
  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
-      position={'relative'}
+    <MyBox
+      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('App'), id: TabEnum.app },
-              { label: t('core.chat.History'), id: TabEnum.history }
+              { label: t('core.chat.Recent use'), value: TabEnum.recently },
+              { label: t('App'), value: TabEnum.app },
+              { label: t('core.chat.History'), value: TabEnum.history }
            ]}
-            activeId={currentTab}
-            onChange={(e) => setCurrentTab(e as `${TabEnum}`)}
+            value={currentTab}
+            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: () => {
-                          onChangeApp(item._id);
-                          onClose();
-                        }
+                        onClick: () => onChangeAppId(item._id)
                      })}
                >
                  <Avatar src={item.avatar} w={'24px'} />
@@ -344,8 +340,7 @@ const ChatHistorySlider = ({
              value={appId}
              onSelect={(id) => {
                if (!id) return;
-                onChangeApp(id);
-                onClose();
+                onChangeAppId(id);
              }}
              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,19 +76,19 @@ 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}
-                color={'myGray.500'}
-                fontSize={'sm'}
-                justifyContent={'space-between'}
-              >
-                <Box>{t('core.chat.Recent use')}</Box>
+          <HStack
+            px={4}
+            my={2}
+            color={'myGray.500'}
+            fontSize={'sm'}
+            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,23 +104,23 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI
                  <Box>{t('common.More')}</Box>
                  <MyIcon name={'common/select'} w={'1rem'} />
                </HStack>
-              </HStack>
-            }
-          >
-            {({ onClose }) => (
-              <Box minH={'200px'}>
-                <SelectOneResource
-                  value={activeAppId}
-                  onSelect={(id) => {
-                    if (!id) return;
-                    onChangeApp(id);
-                    onClose();
-                  }}
-                  server={getAppList}
-                />
-              </Box>
-            )}
-          </MyPopover>
+              }
+            >
+              {({ onClose }) => (
+                <Box minH={'200px'}>
+                  <SelectOneResource
+                    value={activeAppId}
+                    onSelect={(id) => {
+                      if (!id) return;
+                      onChangeApp(id);
+                      onClose();
+                    }}
+                    server={getAppList}
+                  />
+                </Box>
+              )}
+            </MyPopover>
+          </HStack>
        </>
      )}