perf: completion chatId

2023-07-23 20:07:35 +08:00
parent b7d18e38d1
commit 67e10d6f2c
35 changed files with 447 additions and 385 deletions
--- a/client/src/pages/chat/index.tsx
+++ b/client/src/pages/chat/index.tsx
@@ -15,19 +15,24 @@ import { useQuery } from '@tanstack/react-query';
 import { streamFetch } from '@/api/fetch';
 import { useChatStore } from '@/store/chat';
 import { useLoading } from '@/hooks/useLoading';
+import { useToast } from '@/hooks/useToast';
+import { customAlphabet } from 'nanoid';
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
+import type { ChatHistoryItemType } from '@/types/chat';

 import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
-import { ChatHistoryItemType } from '@/types/chat';
 import PageContainer from '@/components/PageContainer';
 import SideBar from '@/components/SideBar';
 import ChatHistorySlider from './components/ChatHistorySlider';
 import SliderApps from './components/SliderApps';
 import ChatHeader from './components/ChatHeader';
+import { getErrText } from '@/utils/tools';
+import { useUserStore } from '@/store/user';

-const Chat = () => {
+const Chat = ({ appId, chatId }: { appId: string; chatId: string }) => {
  const router = useRouter();
-  const { appId = '', chatId = '' } = router.query as { appId: string; chatId: string };
  const theme = useTheme();
+  const { toast } = useToast();

  const ChatBoxRef = useRef<ComponentRef>(null);
  const forbidRefresh = useRef(false);
@@ -44,6 +49,7 @@ const Chat = () => {
    chatData,
    setChatData
  } = useChatStore();
+  const { myApps, userInfo } = useUserStore();

  const { isPc } = useGlobalStore();
  const { Loading, setIsLoading } = useLoading();
@@ -52,12 +58,14 @@ const Chat = () => {
  const startChat = useCallback(
    async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
      const prompts = messages.slice(-2);
-      const { responseText, newChatId, rawSearch } = await streamFetch({
+      const completionChatId = chatId ? chatId : nanoid();
+
+      const { responseText } = await streamFetch({
        data: {
          messages: prompts,
          variables,
          appId,
-          chatId
+          chatId: completionChatId
        },
        onMessage: generatingMessage,
        abortSignal: controller
@@ -66,10 +74,10 @@ const Chat = () => {
      const newTitle = prompts[0].content?.slice(0, 20) || '新对话';

      // update history
-      if (newChatId && !controller.signal.aborted) {
+      if (completionChatId !== chatId && !controller.signal.aborted) {
        forbidRefresh.current = true;
        const newHistory: ChatHistoryItemType = {
-          _id: newChatId,
+          chatId: completionChatId,
          updateTime: new Date(),
          title: newTitle,
          appId,
@@ -78,12 +86,12 @@ const Chat = () => {
        updateHistory(newHistory);
        router.replace({
          query: {
-            chatId: newChatId,
+            chatId: completionChatId,
            appId
          }
        });
      } else {
-        const currentChat = history.find((item) => item._id === chatId);
+        const currentChat = history.find((item) => item.chatId === chatId);
        currentChat &&
          updateHistory({
            ...currentChat,
@@ -98,7 +106,7 @@ const Chat = () => {
        history: ChatBoxRef.current?.getChatHistory() || state.history
      }));

-      return { responseText, rawSearch };
+      return { responseText };
    },
    [appId, chatId, history, router, setChatData, updateHistory]
  );
@@ -153,38 +161,43 @@ const Chat = () => {
            ChatBoxRef.current?.scrollToBottom('auto');
          }, 200);
        }
-
-        // empty appId request, return first app
-        if (res.appId !== appId) {
-          forbidRefresh.current = true;
-          router.replace({
-            query: {
-              appId: res.appId
-            }
-          });
-        }
      } catch (e: any) {
        // reset all chat tore
        setLastChatAppId('');
        setLastChatId('');
-        router.replace('/chat');
+        toast({
+          title: getErrText(e, '初始化聊天失败'),
+          status: 'error'
+        });
+        if (e?.code === 501) {
+          router.replace('/app/list');
+        } else {
+          router.replace('/chat');
+        }
      }
      setIsLoading(false);
      return null;
    },
-    [setIsLoading, setChatData, router, setLastChatAppId, setLastChatId]
+    [setIsLoading, setChatData, router, setLastChatAppId, setLastChatId, toast]
  );
  // 初始化聊天框
  useQuery(['init', appId, chatId], () => {
    // pc: redirect to latest model chat
    if (!appId && lastChatAppId) {
-      router.replace({
+      return router.replace({
        query: {
          appId: lastChatAppId,
          chatId: lastChatId
        }
      });
-      return null;
+    }
+    if (!appId && myApps[0]) {
+      return router.replace({
+        query: {
+          appId: myApps[0]._id,
+          chatId: lastChatId
+        }
+      });
    }

    // store id
@@ -196,11 +209,15 @@ const Chat = () => {
      return null;
    }

-    return loadChatInfo({
-      appId,
-      chatId,
-      loading: appId !== chatData.appId
-    });
+    if (appId) {
+      return loadChatInfo({
+        appId,
+        chatId,
+        loading: appId !== chatData.appId
+      });
+    }
+
+    return null;
  });

  useQuery(['loadHistory', appId], () => (appId ? loadHistory({ appId }) : null));
@@ -233,7 +250,7 @@ const Chat = () => {
              appAvatar={chatData.app.avatar}
              activeChatId={chatId}
              history={history.map((item) => ({
-                id: item._id,
+                id: item.chatId,
                title: item.title,
                customTitle: item.customTitle,
                top: item.top
@@ -253,7 +270,7 @@ const Chat = () => {
              onSetHistoryTop={async (e) => {
                try {
                  await putChatHistory(e);
-                  const historyItem = history.find((item) => item._id === e.chatId);
+                  const historyItem = history.find((item) => item.chatId === e.chatId);
                  if (!historyItem) return;
                  updateHistory({
                    ...historyItem,
@@ -267,7 +284,7 @@ const Chat = () => {
                    chatId: e.chatId,
                    customTitle: e.title
                  });
-                  const historyItem = history.find((item) => item._id === e.chatId);
+                  const historyItem = history.find((item) => item.chatId === e.chatId);
                  if (!historyItem) return;
                  updateHistory({
                    ...historyItem,
@@ -300,6 +317,7 @@ const Chat = () => {
                showEmptyIntro
                chatId={chatId}
                appAvatar={chatData.app.avatar}
+                userAvatar={userInfo?.avatar}
                variableModules={chatData.app.variableModules}
                welcomeText={chatData.app.welcomeText}
                onUpdateVariable={(e) => {}}
@@ -315,4 +333,13 @@ const Chat = () => {
  );
 };

+export async function getServerSideProps(context: any) {
+  return {
+    props: {
+      appId: context?.query?.appId || '',
+      chatId: context?.query?.chatId || ''
+    }
+  };
+}
+
 export default Chat;
--- a/client/src/pages/chat/share.tsx
+++ b/client/src/pages/chat/share.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { initShareChatInfo } from '@/api/chat';
 import { Box, Flex, useDisclosure, Drawer, DrawerOverlay, DrawerContent } from '@chakra-ui/react';
@@ -10,14 +10,14 @@ import { useShareChatStore, defaultHistory } from '@/store/shareChat';
 import SideBar from '@/components/SideBar';
 import { gptMessage2ChatType } from '@/utils/adapt';
 import { getErrText } from '@/utils/tools';
-import dynamic from 'next/dynamic';
+import { ChatSiteItemType } from '@/types/chat';
+import { customAlphabet } from 'nanoid';
+const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
+
 import ChatBox, { type ComponentRef, type StartChatFnProps } from '@/components/ChatBox';
 import PageContainer from '@/components/PageContainer';
 import ChatHeader from './components/ChatHeader';
-
-const ChatHistorySlider = dynamic(() => import('./components/ChatHistorySlider'), {
-  ssr: false
-});
+import ChatHistorySlider from './components/ChatHistorySlider';

 const ShareChat = ({ shareId, chatId }: { shareId: string; chatId: string }) => {
  const router = useRouter();
@@ -36,44 +36,46 @@ const ShareChat = ({ shareId, chatId }: { shareId: string; chatId: string }) =>
    delOneShareHistoryByChatId,
    delManyShareChatHistoryByShareId
  } = useShareChatStore();
+  const history = useMemo(
+    () => shareChatHistory.filter((item) => item.shareId === shareId),
+    [shareChatHistory, shareId]
+  );

  const startChat = useCallback(
    async ({ messages, controller, generatingMessage, variables }: StartChatFnProps) => {
-      const prompts = messages.slice(-shareChatData.maxContext - 2);
+      const prompts = messages.slice(-2);
+      const completionChatId = chatId ? chatId : nanoid();
+
      const { responseText } = await streamFetch({
        data: {
-          history,
          messages: prompts,
          variables,
-          shareId
+          shareId,
+          chatId: completionChatId
        },
        onMessage: generatingMessage,
        abortSignal: controller
      });

-      const result = {
-        question: messages[messages.length - 2].content || '',
-        answer: responseText
-      };
-
-      prompts[prompts.length - 1].content = responseText;
+      const result: ChatSiteItemType[] = gptMessage2ChatType(prompts).map((item) => ({
+        ...item,
+        status: 'finish'
+      }));
+      result[1].value = responseText;

      /* save chat */
-      const { newChatId } = saveChatResponse({
-        chatId,
-        prompts: gptMessage2ChatType(prompts).map((item) => ({
-          ...item,
-          status: 'finish'
-        })),
+      saveChatResponse({
+        chatId: completionChatId,
+        prompts: result,
        variables,
        shareId
      });

-      if (newChatId && !controller.signal.aborted) {
+      if (completionChatId !== chatId && !controller.signal.aborted) {
        router.replace({
          query: {
            shareId,
-            chatId: newChatId
+            chatId: completionChatId
          }
        });
      }
@@ -81,14 +83,17 @@ const ShareChat = ({ shareId, chatId }: { shareId: string; chatId: string }) =>
      window.top?.postMessage(
        {
          type: 'shareChatFinish',
-          data: result
+          data: {
+            question: result[0]?.value,
+            answer: result[1]?.value
+          }
        },
        '*'
      );

      return { responseText };
    },
-    [chatId, router, saveChatResponse, shareChatData.maxContext, shareId]
+    [chatId, router, saveChatResponse, shareId]
  );

  const loadAppInfo = useCallback(
@@ -96,7 +101,7 @@ const ShareChat = ({ shareId, chatId }: { shareId: string; chatId: string }) =>
      console.log(shareId, chatId);

      if (!shareId) return null;
-      const history = shareChatHistory.find((item) => item._id === chatId) || defaultHistory;
+      const history = shareChatHistory.find((item) => item.chatId === chatId) || defaultHistory;

      ChatBoxRef.current?.resetHistory(history.chats);
      ChatBoxRef.current?.resetVariables(history.variables);
@@ -157,11 +162,13 @@ const ShareChat = ({ shareId, chatId }: { shareId: string; chatId: string }) =>
            appName={shareChatData.app.name}
            appAvatar={shareChatData.app.avatar}
            activeChatId={chatId}
-            history={shareChatHistory.map((item) => ({
-              id: item._id,
+            history={history.map((item) => ({
+              id: item.chatId,
              title: item.title
            }))}
            onChangeChat={(chatId) => {
+              console.log(chatId);
+
              router.push({
                query: {
                  chatId: chatId || '',
@@ -196,6 +203,7 @@ const ShareChat = ({ shareId, chatId }: { shareId: string; chatId: string }) =>
            <ChatBox
              ref={ChatBoxRef}
              appAvatar={shareChatData.app.avatar}
+              userAvatar={shareChatData.userAvatar}
              variableModules={shareChatData.app.variableModules}
              welcomeText={shareChatData.app.welcomeText}
              onUpdateVariable={(e) => {