fix: chat 页有些手机无法加载

src/pages/chat/index.tsx

@@ -1,13 +1,7 @@
 import React, { useCallback, useState, useRef, useMemo, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
-import {
-  getInitChatSiteInfo,
-  getChatSiteId,
-  postGPT3SendPrompt,
-  delChatRecordByIndex,
-  postSaveChat
-} from '@/api/chat';
+import { getInitChatSiteInfo, getChatSiteId, delChatRecordByIndex, postSaveChat } from '@/api/chat';
 import type { InitChatResponse } from '@/api/response/chat';
 import { ChatSiteItemType } from '@/types/chat';
 import {
@@ -33,12 +27,11 @@ import { useGlobalStore } from '@/store/global';
 import { useChatStore } from '@/store/chat';
 import { useCopyData } from '@/utils/tools';
 import { streamFetch } from '@/api/fetch';
-import SlideBar from './components/SlideBar';
-import Empty from './components/Empty';
 import Icon from '@/components/Icon';
-import { encode } from 'gpt-token-utils';
 import { modelList } from '@/constants/model';
 
+const SlideBar = dynamic(() => import('./components/SlideBar'));
+const Empty = dynamic(() => import('./components/Empty'));
 const Markdown = dynamic(() => import('@/components/Markdown'));
 
 const textareaMinH = '22px';
@@ -48,10 +41,12 @@ interface ChatType extends InitChatResponse {
 }
 
 const Chat = ({ chatId }: { chatId: string }) => {
-  const { toast } = useToast();
-  const router = useRouter();
   const ChatBox = useRef<HTMLDivElement>(null);
   const TextareaDom = useRef<HTMLTextAreaElement>(null);
+
+  const { toast } = useToast();
+  const router = useRouter();
+
   // 中断请求
   const controller = useRef(new AbortController());
   const [chatData, setChatData] = useState<ChatType>({
@@ -70,11 +65,11 @@ const Chat = ({ chatId }: { chatId: string }) => {
     () => chatData.history[chatData.history.length - 1]?.status === 'loading',
     [chatData.history]
   );
+  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
+
   const { copyData } = useCopyData();
   const { isPc, media } = useScreen();
   const { setLoading } = useGlobalStore();
-
-  const { isOpen: isOpenSlider, onClose: onCloseSlider, onOpen: onOpenSlider } = useDisclosure();
   const { pushChatHistory } = useChatStore();
 
   // 滚动到底部
@@ -211,12 +206,11 @@ const Chat = ({ chatId }: { chatId: string }) => {
     }
 
     // 长度校验
-    const tokens = encode(val).length;
     const model = modelList.find((item) => item.model === chatData.modelName);
 
-    if (model && tokens >= model.maxToken) {
+    if (model && val.length >= model.maxToken) {
       toast({
-        title: '单次输入超出 4000 tokens',
+        title: '单次输入超出 4000 字符',
         status: 'warning'
       });
       return;
@@ -314,14 +308,6 @@ const Chat = ({ chatId }: { chatId: string }) => {
     [copyData]
   );
 
-  useEffect(() => {
-    controller.current = new AbortController();
-    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      controller.current?.abort();
-    };
-  }, [chatId]);
-
   // 初始化聊天框
   useQuery(
     ['init', chatId],
@@ -359,6 +345,14 @@ const Chat = ({ chatId }: { chatId: string }) => {
     }
   );
 
+  // 更新流中断对象
+  useEffect(() => {
+    controller.current = new AbortController();
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      controller.current?.abort();
+    };
+  }, [chatId]);
   return (
     <Flex
       h={'100%'}
@@ -546,7 +540,7 @@ const Chat = ({ chatId }: { chatId: string }) => {
 export default Chat;
 
 export async function getServerSideProps(context: any) {
-  const chatId = context.query?.chatId || '';
+  const chatId = context?.query?.chatId || 'noid';
 
   return {
     props: { chatId }