⚡ perf: Fix ChatIntpuArea rerender

wang991 · Dec 8, 2023 · 8f0aaa0 · 8f0aaa0
1 parent 30bac89
commit 8f0aaa0
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 40 deletions.
diff --git a/src/app/chat/(desktop)/features/ChatInput/index.tsx b/src/app/chat/(desktop)/features/ChatInput/index.tsx
@@ -1,6 +1,6 @@
 import { ActionIcon, ChatInputArea, ChatSendButton } from '@lobehub/ui';
 import { Maximize2, Minimize2 } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ActionBar from '@/app/chat/features/ChatInput/ActionBar';
@@ -27,50 +27,64 @@ const ChatInputDesktopLayout = memo(() => {
     canUpload,
   } = useChatInput();
 
+  const handleSizeChange = useCallback(
+    (_: any, size: any) => {
+      if (!size) return;
+      updatePreference({
+        inputHeight: typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+      });
+    },
+    [updatePreference],
+  );
+
+  const buttonAddons = useMemo(
+    () => (
+      <ChatSendButton
+        leftAddons={canUpload && <LocalFiles />}
+        loading={loading}
+        onSend={onSend}
+        onStop={onStop}
+        rightAddons={<SaveTopic />}
+        texts={{
+          send: t('send'),
+          stop: t('stop'),
+          warp: t('warp'),
+        }}
+      />
+    ),
+    [canUpload, loading, onSend, onStop, t],
+  );
+
+  const topAddons = useMemo(
+    () => (
+      <ActionBar
+        rightAreaEndRender={
+          <ActionIcon
+            icon={expand ? Minimize2 : Maximize2}
+            onClick={() => {
+              setExpand(!expand);
+            }}
+          />
+        }
+      />
+    ),
+    [expand],
+  );
+
   return (
     <>
       {canUpload && <DragUpload />}
       <ChatInputArea
-        bottomAddons={
-          <ChatSendButton
-            leftAddons={canUpload && <LocalFiles />}
-            loading={loading}
-            onSend={onSend}
-            onStop={onStop}
-            rightAddons={<SaveTopic />}
-            texts={{
-              send: t('send'),
-              stop: t('stop'),
-              warp: t('warp'),
-            }}
-          />
-        }
+        bottomAddons={buttonAddons}
         expand={expand}
         heights={{ headerHeight: HEADER_HEIGHT, inputHeight, minHeight: CHAT_TEXTAREA_HEIGHT }}
         loading={loading}
         onInput={onInput}
         onSend={onSend}
-        onSizeChange={(_, size) => {
-          if (!size) return;
-          updatePreference({
-            inputHeight:
-              typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-          });
-        }}
+        onSizeChange={handleSizeChange}
         placeholder={t('sendPlaceholder')}
         ref={ref}
-        topAddons={
-          <ActionBar
-            rightAreaEndRender={
-              <ActionIcon
-                icon={expand ? Minimize2 : Maximize2}
-                onClick={() => {
-                  setExpand(!expand);
-                }}
-              />
-            }
-          />
-        }
+        topAddons={topAddons}
         value={value}
       />
     </>

diff --git a/src/app/chat/features/ChatInput/useChatInput.ts b/src/app/chat/features/ChatInput/useChatInput.ts
@@ -1,5 +1,5 @@
 import { TextAreaRef } from 'antd/es/input/TextArea';
-import { useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { useGlobalStore } from '@/store/global';
@@ -24,17 +24,19 @@ export const useChatInput = () => {
     s.stopGenerateMessage,
   ]);
 
+  const handleSend = useCallback(() => {
+    setExpand(false);
+    ref?.current?.blur();
+    onSend();
+  }, [onSend]);
+
   return {
     canUpload,
     expand,
     inputHeight,
     loading,
     onInput,
-    onSend: () => {
-      setExpand(false);
-      ref?.current?.blur();
-      onSend();
-    },
+    onSend: handleSend,
     onStop,
     ref,
     setExpand,