Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 7aa75f8e by Archer Committed by GitHub
Options

fix: chat page render performance (#2784) 

* fix: chat page render performance

* fix: ts
parent afd2c394
Showing with 183 additions and 141 deletions
docSite/content/zh-cn/docs/development/upgrading/4811.md
...@@ -103,3 +103,4 @@ weight: 813 ...@@ -103,3 +103,4 @@ weight: 813
17. 修复 - 知识库选择权限问题。 17. 修复 - 知识库选择权限问题。
18. 修复 - 空 chatId 发起对话，首轮携带用户选择时会异常。 18. 修复 - 空 chatId 发起对话，首轮携带用户选择时会异常。
19. 修复 - createDataset 接口，intro 为赋值。 19. 修复 - createDataset 接口，intro 为赋值。
20. 修复 - 对话框渲染性能问题。
projects/app/src/components/core/chat/ChatContainer/useChat.ts
...@@ -11,12 +11,12 @@ import { eventBus, EventNameEnum } from '@/web/common/utils/eventbus'; ...@@ -11,12 +11,12 @@ import { eventBus, EventNameEnum } from '@/web/common/utils/eventbus';
import { getChatRecords } from '@/web/core/chat/api'; import { getChatRecords } from '@/web/core/chat/api';
import { ChatStatusEnum } from '@fastgpt/global/core/chat/constants'; import { ChatStatusEnum } from '@fastgpt/global/core/chat/constants';
import { getNanoid } from '@fastgpt/global/common/string/tools'; import { getNanoid } from '@fastgpt/global/common/string/tools';
import { GetChatRecordsProps } from '@/global/core/chat/api';
import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination'; import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
import { PaginationResponse } from '../../../../../../../packages/web/common/fetch/type'; import { PaginationResponse } from '@fastgpt/web/common/fetch/type';
import type { getPaginationRecordsBody } from '@/pages/api/core/chat/getPaginationRecords'; import type { getPaginationRecordsBody } from '@/pages/api/core/chat/getPaginationRecords';
import { GetChatTypeEnum } from '@/global/core/chat/constants';
export const useChat = () => { export const useChat = (params?: { chatId?: string; appId: string; type?: GetChatTypeEnum }) => {
const ChatBoxRef = useRef<ChatComponentRef>(null); const ChatBoxRef = useRef<ChatComponentRef>(null);
const variablesForm = useForm<ChatBoxInputFormType>(); const variablesForm = useForm<ChatBoxInputFormType>();
// plugin // plugin
...@@ -49,8 +49,12 @@ export const useChat = () => { ...@@ -49,8 +49,12 @@ export const useChat = () => {
ChatBoxRef.current?.restartChat?.(); ChatBoxRef.current?.restartChat?.();
}, [variablesForm]); }, [variablesForm]);
const useChatScrollData = useCallback((params: GetChatRecordsProps) => { const {
return useScrollPagination( data: chatRecords,
ScrollData,
setData: setChatRecords,
total: totalRecordsCount
} = useScrollPagination(
async (data: getPaginationRecordsBody): Promise<PaginationResponse<ChatSiteItemType>> => { async (data: getPaginationRecordsBody): Promise<PaginationResponse<ChatSiteItemType>> => {
const res = await getChatRecords(data); const res = await getChatRecords(data);
...@@ -80,7 +84,6 @@ export const useChat = () => { ...@@ -80,7 +84,6 @@ export const useChat = () => {
scrollLoadType: 'top' scrollLoadType: 'top'
} }
); );
}, []);
return { return {
ChatBoxRef, ChatBoxRef,
...@@ -89,7 +92,10 @@ export const useChat = () => { ...@@ -89,7 +92,10 @@ export const useChat = () => {
setPluginRunTab, setPluginRunTab,
clearChatRecords, clearChatRecords,
resetVariables, resetVariables,
useChatScrollData chatRecords,
ScrollData,
setChatRecords,
totalRecordsCount
}; };
}; };
......
projects/app/src/pages/app/detail/components/Logs/DetailLogsModal.tsx
...@@ -47,14 +47,11 @@ const DetailLogsModal = ({ ...@@ -47,14 +47,11 @@ const DetailLogsModal = ({
pluginRunTab, pluginRunTab,
setPluginRunTab, setPluginRunTab,
resetVariables, resetVariables,
useChatScrollData chatRecords,
} = useChat();
const {
data: chatRecords,
ScrollData, ScrollData,
setData: setChatRecords, setChatRecords,
total: totalRecordsCount totalRecordsCount
} = useChatScrollData(params); } = useChat(params);
const { data: chat, isFetching } = useQuery( const { data: chat, isFetching } = useQuery(
['getChatDetail', chatId], ['getChatDetail', chatId],
......
projects/app/src/pages/chat/components/SliderApps.tsx
...@@ -164,4 +164,4 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI ...@@ -164,4 +164,4 @@ const SliderApps = ({ apps, activeAppId }: { apps: AppListItemType[]; activeAppI
); );
}; };
export default SliderApps; export default React.memo(SliderApps);
projects/app/src/pages/chat/index.tsx
...@@ -77,14 +77,11 @@ const Chat = ({ ...@@ -77,14 +77,11 @@ const Chat = ({
pluginRunTab, pluginRunTab,
setPluginRunTab, setPluginRunTab,
resetVariables, resetVariables,
useChatScrollData chatRecords,
} = useChat();
const {
data: chatRecords,
ScrollData, ScrollData,
setData: setChatRecords, setChatRecords,
total: totalRecordsCount totalRecordsCount
} = useChatScrollData(params); } = useChat(params);
// get chat app info // get chat app info
const [chatData, setChatData] = useState<InitChatResponse>(defaultChatData); const [chatData, setChatData] = useState<InitChatResponse>(defaultChatData);
...@@ -166,35 +163,8 @@ const Chat = ({ ...@@ -166,35 +163,8 @@ const Chat = ({
); );
const loading = isLoading; const loading = isLoading;
return ( const RenderHistorySlider = useMemo(() => {
<Flex h={'100%'}> const Children = (
<NextHead title={chatData.app.name} icon={chatData.app.avatar}></NextHead>
{/* pc show myself apps */}
{isPc && (
<Box borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
<SliderApps apps={myApps} activeAppId={appId} />
</Box>
)}
<PageContainer isLoading={loading} flex={'1 0 0'} w={0} p={[0, '16px']} position={'relative'}>
<Flex h={'100%'} flexDirection={['column', 'row']}>
{/* pc always show history. */}
{((children: React.ReactNode) => {
return isPc || !appId ? (
<SideBar>{children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
placement="left"
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'75vw'}>{children}</DrawerContent>
</Drawer>
);
})(
<ChatHistorySlider <ChatHistorySlider
confirmClearText={t('common:core.chat.Confirm to clear history')} confirmClearText={t('common:core.chat.Confirm to clear history')}
appId={appId} appId={appId}
...@@ -215,7 +185,49 @@ const Chat = ({ ...@@ -215,7 +185,49 @@ const Chat = ({
}); });
}} }}
/> />
);
return isPc || !appId ? (
<SideBar>{Children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
placement="left"
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'75vw'}>{Children}</DrawerContent>
</Drawer>
);
}, [
appId,
chatData.app.avatar,
chatData.app.name,
isOpenSlider,
isPc,
onClearHistories,
onCloseSlider,
onDelHistory,
onUpdateHistory,
t
]);
return (
<Flex h={'100%'}>
<NextHead title={chatData.app.name} icon={chatData.app.avatar}></NextHead>
{/* pc show myself apps */}
{isPc && (
<Box borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
<SliderApps apps={myApps} activeAppId={appId} />
</Box>
)} )}
<PageContainer isLoading={loading} flex={'1 0 0'} w={0} p={[0, '16px']} position={'relative'}>
<Flex h={'100%'} flexDirection={['column', 'row']}>
{/* pc always show history. */}
{RenderHistorySlider}
{/* chat container */} {/* chat container */}
<Flex <Flex
position={'relative'} position={'relative'}
......
projects/app/src/pages/chat/share.tsx
...@@ -4,11 +4,7 @@ import { Box, Flex, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/reac ...@@ -4,11 +4,7 @@ import { Box, Flex, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/reac
import { streamFetch } from '@/web/common/api/fetch'; import { streamFetch } from '@/web/common/api/fetch';
import SideBar from '@/components/SideBar'; import SideBar from '@/components/SideBar';
import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt'; import { GPTMessages2Chats } from '@fastgpt/global/core/chat/adapt';
import { customAlphabet } from 'nanoid';
const nanoid = customAlphabet(
'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWSYZ1234567890_',
24
);
import ChatBox from '@/components/core/chat/ChatContainer/ChatBox'; import ChatBox from '@/components/core/chat/ChatContainer/ChatBox';
import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type'; import type { StartChatFnProps } from '@/components/core/chat/ChatContainer/type';
...@@ -19,7 +15,6 @@ import { serviceSideProps } from '@/web/common/utils/i18n'; ...@@ -19,7 +15,6 @@ import { serviceSideProps } from '@/web/common/utils/i18n';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { delChatRecordById, getInitOutLinkChatInfo } from '@/web/core/chat/api'; import { delChatRecordById, getInitOutLinkChatInfo } from '@/web/core/chat/api';
import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils'; import { getChatTitleFromChatMessage } from '@fastgpt/global/core/chat/utils';
import { ChatStatusEnum } from '@fastgpt/global/core/chat/constants';
import { MongoOutLink } from '@fastgpt/service/support/outLink/schema'; import { MongoOutLink } from '@fastgpt/service/support/outLink/schema';
import { OutLinkWithAppType } from '@fastgpt/global/support/outLink/type'; import { OutLinkWithAppType } from '@fastgpt/global/support/outLink/type';
import { addLog } from '@fastgpt/service/common/system/log'; import { addLog } from '@fastgpt/service/common/system/log';
...@@ -87,14 +82,6 @@ const OutLink = ({ ...@@ -87,14 +82,6 @@ const OutLink = ({
onChangeChatId onChangeChatId
} = useContextSelector(ChatContext, (v) => v); } = useContextSelector(ChatContext, (v) => v);
const {
ChatBoxRef,
variablesForm,
pluginRunTab,
setPluginRunTab,
resetVariables,
useChatScrollData
} = useChat();
const params = useMemo(() => { const params = useMemo(() => {
return { return {
chatId, chatId,
...@@ -105,11 +92,16 @@ const OutLink = ({ ...@@ -105,11 +92,16 @@ const OutLink = ({
}; };
}, [chatData.appId, chatId, outLinkUid, shareId]); }, [chatData.appId, chatId, outLinkUid, shareId]);
const { const {
data: chatRecords, ChatBoxRef,
variablesForm,
pluginRunTab,
setPluginRunTab,
resetVariables,
chatRecords,
ScrollData, ScrollData,
setData: setChatRecords, setChatRecords,
total: totalRecordsCount totalRecordsCount
} = useChatScrollData(params); } = useChat(params);
const startChat = useCallback( const startChat = useCallback(
async ({ async ({
...@@ -233,36 +225,9 @@ const OutLink = ({ ...@@ -233,36 +225,9 @@ const OutLink = ({
useMount(() => { useMount(() => {
setIdEmbed(window !== top); setIdEmbed(window !== top);
}); });
const loading = isLoading;
return ( const RenderHistoryList = useMemo(() => {
<> const Children = (
<PageContainer
isLoading={loading}
{...(isEmbed
? { p: '0 !important', insertProps: { borderRadius: '0', boxShadow: 'none' } }
: { p: [0, 5] })}
>
<Flex h={'100%'} flexDirection={['column', 'row']}>
{showHistory === '1' &&
((children: React.ReactNode) => {
return isPc ? (
<SideBar>{children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
placement="left"
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'75vw'} boxShadow={'2px 0 10px rgba(0,0,0,0.15)'}>
{children}
</DrawerContent>
</Drawer>
);
})(
<ChatHistorySlider <ChatHistorySlider
appName={chatData.app.name} appName={chatData.app.name}
appAvatar={chatData.app.avatar} appAvatar={chatData.app.avatar}
...@@ -291,7 +256,54 @@ const OutLink = ({ ...@@ -291,7 +256,54 @@ const OutLink = ({
}); });
}} }}
/> />
)} );
if (showHistory !== '1') return null;
return isPc ? (
<SideBar>{Children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
placement="left"
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'75vw'} boxShadow={'2px 0 10px rgba(0,0,0,0.15)'}>
{Children}
</DrawerContent>
</Drawer>
);
}, [
chatData.app.avatar,
chatData.app.name,
chatData.appId,
isOpenSlider,
isPc,
onClearHistories,
onCloseSlider,
onDelHistory,
onUpdateHistory,
outLinkUid,
shareId,
showHistory,
t
]);
const loading = isLoading;
return (
<>
<PageContainer
isLoading={loading}
{...(isEmbed
? { p: '0 !important', insertProps: { borderRadius: '0', boxShadow: 'none' } }
: { p: [0, 5] })}
>
<Flex h={'100%'} flexDirection={['column', 'row']}>
{RenderHistoryList}
{/* chat container */} {/* chat container */}
<Flex <Flex
......
projects/app/src/pages/chat/team.tsx
...@@ -67,14 +67,6 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => { ...@@ -67,14 +67,6 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
onChangeChatId onChangeChatId
} = useContextSelector(ChatContext, (v) => v); } = useContextSelector(ChatContext, (v) => v);
const {
ChatBoxRef,
variablesForm,
pluginRunTab,
setPluginRunTab,
resetVariables,
useChatScrollData
} = useChat();
const params = useMemo(() => { const params = useMemo(() => {
return { return {
appId, appId,
...@@ -85,11 +77,16 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => { ...@@ -85,11 +77,16 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
}; };
}, [appId, chatId, teamId, teamToken]); }, [appId, chatId, teamId, teamToken]);
const { const {
data: chatRecords, ChatBoxRef,
variablesForm,
pluginRunTab,
setPluginRunTab,
resetVariables,
chatRecords,
ScrollData, ScrollData,
setData: setChatRecords, setChatRecords,
total: totalRecordsCount totalRecordsCount
} = useChatScrollData(params); } = useChat(params);
const startChat = useCallback( const startChat = useCallback(
async ({ async ({
...@@ -181,36 +178,8 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => { ...@@ -181,36 +178,8 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
} }
); );
const loading = isLoading; const RenderHistoryList = useMemo(() => {
const Children = (
return (
<Flex h={'100%'}>
<NextHead title={chatData.app.name} icon={chatData.app.avatar}></NextHead>
{/* pc show myself apps */}
{isPc && (
<Box borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
<SliderApps apps={myApps} activeAppId={appId} />
</Box>
)}
<PageContainer isLoading={loading} flex={'1 0 0'} w={0} p={[0, '16px']} position={'relative'}>
<Flex h={'100%'} flexDirection={['column', 'row']} bg={'white'}>
{((children: React.ReactNode) => {
return isPc || !appId ? (
<SideBar>{children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
placement="left"
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'75vw'}>{children}</DrawerContent>
</Drawer>
);
})(
<ChatHistorySlider <ChatHistorySlider
appId={appId} appId={appId}
appName={chatData.app.name} appName={chatData.app.name}
...@@ -233,7 +202,52 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => { ...@@ -233,7 +202,52 @@ const Chat = ({ myApps }: { myApps: AppListItemType[] }) => {
}); });
}} }}
/> />
);
return isPc || !appId ? (
<SideBar>{Children}</SideBar>
) : (
<Drawer
isOpen={isOpenSlider}
placement="left"
autoFocus={false}
size={'xs'}
onClose={onCloseSlider}
>
<DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
<DrawerContent maxWidth={'75vw'}>{Children}</DrawerContent>
</Drawer>
);
}, [
appId,
chatData.app.avatar,
chatData.app.name,
isOpenSlider,
isPc,
onClearHistories,
onCloseSlider,
onDelHistory,
onUpdateHistory,
t,
teamId,
teamToken
]);
const loading = isLoading;
return (
<Flex h={'100%'}>
<NextHead title={chatData.app.name} icon={chatData.app.avatar}></NextHead>
{/* pc show myself apps */}
{isPc && (
<Box borderRight={theme.borders.base} w={'220px'} flexShrink={0}>
<SliderApps apps={myApps} activeAppId={appId} />
</Box>
)} )}
<PageContainer isLoading={loading} flex={'1 0 0'} w={0} p={[0, '16px']} position={'relative'}>
<Flex h={'100%'} flexDirection={['column', 'row']} bg={'white'}>
{RenderHistoryList}
{/* chat container */} {/* chat container */}
<Flex <Flex
position={'relative'} position={'relative'}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment