perf: abort

client/src/components/ChatBox/index.tsx

@@ -5,7 +5,8 @@ import React, {
   useMemo,
   forwardRef,
   useImperativeHandle,
-  ForwardedRef
+  ForwardedRef,
+  useEffect
 } from 'react';
 import { throttle } from 'lodash';
 import { ChatItemType, ChatSiteItemType, ExportChatType } from '@/types/chat';
@@ -31,6 +32,7 @@ import { MessageItemType } from '@/pages/api/openapi/v1/chat/completions';
 import MyTooltip from '../MyTooltip';
 import { fileDownload } from '@/utils/file';
 import { htmlTemplate } from '@/constants/common';
+import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
 
 const QuoteModal = dynamic(() => import('./QuoteModal'));
@@ -133,6 +135,7 @@ const ChatBox = (
 ) => {
   const ChatBoxRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
+  const router = useRouter();
   const { copyData } = useCopyData();
   const { toast } = useToast();
   const { userInfo } = useUserStore();
@@ -392,6 +395,12 @@ const ChatBox = (
     [chatHistory.length, showEmptyIntro, variableModules, welcomeText]
   );
 
+  useEffect(() => {
+    return () => {
+      controller.current?.abort();
+    };
+  }, [router.query]);
+
   return (
     <Flex flexDirection={'column'} h={'100%'}>
       <Box ref={ChatBoxRef} flex={'1 0 0'} h={0} overflow={'overlay'} px={[2, 5, 7]} pt={[0, 5]}>

client/src/components/Markdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import RemarkGfm from 'remark-gfm';
 import RemarkMath from 'remark-math';
@@ -48,13 +48,16 @@ const Markdown = ({
   isChatting?: boolean;
   onClick?: (e: any) => void;
 }) => {
-  const components = useRef({
-    a: Link,
-    img: Image,
-    pre: 'div',
-    p: 'div',
-    code: (props: any) => <Code {...props} onClick={onClick} />
-  });
+  const components = useMemo(
+    () => ({
+      a: Link,
+      img: Image,
+      pre: 'div',
+      p: 'div',
+      code: (props: any) => <Code {...props} onClick={onClick} />
+    }),
+    [onClick]
+  );
 
   return (
     <ReactMarkdown
@@ -64,7 +67,7 @@ const Markdown = ({
       remarkPlugins={[RemarkGfm, RemarkMath, RemarkBreaks]}
       rehypePlugins={[RehypeKatex]}
       // @ts-ignore
-      components={components.current}
+      components={components}
     >
       {source}
     </ReactMarkdown>