From 5512a8206c823de83625ff00b0315ea95f91ece0 Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Sun, 17 Nov 2024 00:53:47 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20perf:=20refactor=20to=20im?=
 =?UTF-8?q?prove=20chat=20performance=20(#4708)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ⚡️ perf: refactor to improve chat performance

* ⚡️ perf: refactor to improve chat performance
---
 .../ChatInput/Desktop/TextArea.test.tsx       |  26 +--
 .../features/ChatInput/Desktop/TextArea.tsx   |  29 +++
 .../features/ChatInput/Desktop/index.tsx      |  46 +++++
 .../features/ChatInput/index.tsx              |   3 +-
 .../features/ChatList/Content.tsx             |  24 +--
 src/const/message.ts                          |   4 +
 .../ChatInput/Desktop/Footer/ShortcutHint.tsx |  61 ++++++
 .../ChatInput/Desktop/Footer/index.tsx        |  57 ++----
 .../{TextArea.tsx => InputArea/index.tsx}     |  31 ++-
 src/features/ChatInput/Desktop/index.tsx      |  55 +++---
 src/features/Conversation/Messages/index.ts   |  22 +--
 .../components/ChatItem/index.tsx             | 127 +++++++-----
 .../components/VirtualizedList/index.tsx      | 182 +++++++++---------
 src/features/Conversation/index.ts            |   2 +
 src/types/topic/index.ts                      |   1 +
 src/types/{ => topic}/topic.ts                |   0
 16 files changed, 400 insertions(+), 270 deletions(-)
 rename src/{ => app/(main)/chat/(workspace)/@conversation}/features/ChatInput/Desktop/TextArea.test.tsx (94%)
 create mode 100644 src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.tsx
 create mode 100644 src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx
 create mode 100644 src/features/ChatInput/Desktop/Footer/ShortcutHint.tsx
 rename src/features/ChatInput/Desktop/{TextArea.tsx => InputArea/index.tsx} (78%)
 create mode 100644 src/types/topic/index.ts
 rename src/types/{ => topic}/topic.ts (100%)

diff --git a/src/features/ChatInput/Desktop/TextArea.test.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.test.tsx
similarity index 94%
rename from src/features/ChatInput/Desktop/TextArea.test.tsx
rename to src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.test.tsx
index 524ecbe18167..9e5d5a686484 100644
--- a/src/features/ChatInput/Desktop/TextArea.test.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.test.tsx
@@ -7,10 +7,10 @@ import { useUserStore } from '@/store/user';
 
 import InputArea from './TextArea';
 
-let setExpandMock: (expand: boolean) => void;
+let onSendMock: () => void;
 
 beforeEach(() => {
-  setExpandMock = vi.fn();
+  onSendMock = vi.fn();
 });
 
 describe('<InputArea />', () => {
@@ -29,13 +29,13 @@ describe('<InputArea />', () => {
   });
 
   it('renders with correct placeholder text', () => {
-    render(<InputArea setExpand={setExpandMock} />);
+    render(<InputArea onSend={onSendMock} />);
     const textArea = screen.getByPlaceholderText('sendPlaceholder');
     expect(textArea).toBeInTheDocument();
   });
 
   it('has the correct initial value', () => {
-    render(<InputArea setExpand={setExpandMock} />);
+    render(<InputArea onSend={onSendMock} />);
     const textArea = screen.getByRole('textbox');
     expect(textArea).toHaveValue('');
   });
@@ -82,7 +82,7 @@ describe('<InputArea />', () => {
         useChatStore.setState({ updateInputMessage: updateInputMessageMock });
       });
 
-      render(<InputArea setExpand={setExpandMock} />);
+      render(<InputArea onSend={onSendMock} />);
       const textArea = screen.getByRole('textbox');
 
       // Start composition (IME input starts)
@@ -92,7 +92,7 @@ describe('<InputArea />', () => {
       fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter' });
 
       // Since we are in the middle of IME composition, the message should not be sent
-      expect(setExpandMock).not.toHaveBeenCalled();
+      expect(onSendMock).not.toHaveBeenCalled();
       expect(updateInputMessageMock).not.toHaveBeenCalled();
 
       // End composition (IME input ends)
@@ -102,7 +102,7 @@ describe('<InputArea />', () => {
       fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter' });
 
       // Since IME composition has ended, now the message should be sent
-      expect(setExpandMock).toHaveBeenCalled();
+      expect(onSendMock).toHaveBeenCalled();
       expect(updateInputMessageMock).toHaveBeenCalled();
     });
 
@@ -112,7 +112,7 @@ describe('<InputArea />', () => {
         useChatStore.setState({ updateInputMessage: updateInputMessageMock });
       });
 
-      render(<InputArea setExpand={setExpandMock} />);
+      render(<InputArea onSend={onSendMock} />);
       const textArea = screen.getByRole('textbox');
       const newText = 'New input text';
 
@@ -199,7 +199,7 @@ describe('<InputArea />', () => {
         useChatStore.setState({ chatLoadingIds: ['123'], sendMessage: sendMessageMock });
       });
 
-      render(<InputArea setExpand={setExpandMock} />);
+      render(<InputArea onSend={onSendMock} />);
       const textArea = screen.getByRole('textbox');
 
       fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter', shiftKey: true });
@@ -236,7 +236,7 @@ describe('<InputArea />', () => {
           useUserStore.getState().updatePreference({ useCmdEnterToSend: true });
         });
 
-        render(<InputArea setExpand={setExpandMock} />);
+        render(<InputArea onSend={onSendMock} />);
         const textArea = screen.getByRole('textbox');
 
         fireEvent.keyDown(textArea, { code: 'Enter', ctrlKey: true, key: 'Enter' });
@@ -256,7 +256,7 @@ describe('<InputArea />', () => {
           useUserStore.getState().updatePreference({ useCmdEnterToSend: false });
         });
 
-        render(<InputArea setExpand={setExpandMock} />);
+        render(<InputArea onSend={onSendMock} />);
         const textArea = screen.getByRole('textbox');
 
         fireEvent.keyDown(textArea, { code: 'Enter', ctrlKey: true, key: 'Enter' });
@@ -279,7 +279,7 @@ describe('<InputArea />', () => {
           useUserStore.getState().updatePreference({ useCmdEnterToSend: true });
         });
 
-        render(<InputArea setExpand={setExpandMock} />);
+        render(<InputArea onSend={onSendMock} />);
         const textArea = screen.getByRole('textbox');
 
         fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter', metaKey: true });
@@ -304,7 +304,7 @@ describe('<InputArea />', () => {
           useUserStore.getState().updatePreference({ useCmdEnterToSend: false });
         });
 
-        render(<InputArea setExpand={setExpandMock} />);
+        render(<InputArea onSend={onSendMock} />);
         const textArea = screen.getByRole('textbox');
 
         fireEvent.keyDown(textArea, { code: 'Enter', key: 'Enter', metaKey: true });
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.tsx
new file mode 100644
index 000000000000..d87624c9e567
--- /dev/null
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/TextArea.tsx
@@ -0,0 +1,29 @@
+import { memo } from 'react';
+
+import InputArea from '@/features/ChatInput/Desktop/InputArea';
+import { useSendMessage } from '@/features/ChatInput/useSend';
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/slices/message/selectors';
+
+const TextArea = memo<{ onSend?: () => void }>(({ onSend }) => {
+  const [loading, value, updateInputMessage] = useChatStore((s) => [
+    chatSelectors.isAIGenerating(s),
+    s.inputMessage,
+    s.updateInputMessage,
+  ]);
+  const { send: sendMessage } = useSendMessage();
+
+  return (
+    <InputArea
+      loading={loading}
+      onChange={updateInputMessage}
+      onSend={() => {
+        sendMessage();
+        onSend?.();
+      }}
+      value={value}
+    />
+  );
+});
+
+export default TextArea;
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx
new file mode 100644
index 000000000000..2e1ee205d9c5
--- /dev/null
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { memo } from 'react';
+
+import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
+import DesktopChatInput from '@/features/ChatInput/Desktop';
+import { useGlobalStore } from '@/store/global';
+import { systemStatusSelectors } from '@/store/global/selectors';
+
+import TextArea from './TextArea';
+
+const leftActions = [
+  'model',
+  'fileUpload',
+  'knowledgeBase',
+  'temperature',
+  'history',
+  'stt',
+  'tools',
+  'token',
+] as ActionKeys[];
+
+const rightActions = ['clear'] as ActionKeys[];
+
+const renderTextArea = (onSend: () => void) => <TextArea onSend={onSend} />;
+
+const Desktop = memo(() => {
+  const [inputHeight, updatePreference] = useGlobalStore((s) => [
+    systemStatusSelectors.inputHeight(s),
+    s.updateSystemStatus,
+  ]);
+
+  return (
+    <DesktopChatInput
+      inputHeight={inputHeight}
+      leftActions={leftActions}
+      onInputHeightChange={(height) => {
+        updatePreference({ inputHeight: height });
+      }}
+      renderTextArea={renderTextArea}
+      rightActions={rightActions}
+    />
+  );
+});
+
+export default Desktop;
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx
index aef9bbbfc523..907baa4d8a39 100644
--- a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/index.tsx
@@ -1,7 +1,8 @@
-import DesktopChatInput from '@/features/ChatInput/Desktop';
 import MobileChatInput from '@/features/ChatInput/Mobile';
 import { isMobileDevice } from '@/utils/server/responsive';
 
+import DesktopChatInput from './Desktop';
+
 const ChatInput = () => {
   const mobile = isMobileDevice();
   const Input = mobile ? MobileChatInput : DesktopChatInput;
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx
index 1565f44340bb..6c491515a8f3 100644
--- a/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx
@@ -3,8 +3,7 @@
 import isEqual from 'fast-deep-equal';
 import React, { memo } from 'react';
 
-import { WELCOME_GUIDE_CHAT_ID } from '@/const/session';
-import { VirtualizedList } from '@/features/Conversation';
+import { InboxWelcome, VirtualizedList } from '@/features/Conversation';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
@@ -14,22 +13,25 @@ interface ListProps {
 }
 
 const Content = memo<ListProps>(({ mobile }) => {
-  const [activeTopicId, useFetchMessages] = useChatStore((s) => [
-    s.activeTopicId,
-    s.useFetchMessages,
-  ]);
+  const [activeTopicId, useFetchMessages, showInboxWelcome, isCurrentChatLoaded] = useChatStore(
+    (s) => [
+      s.activeTopicId,
+      s.useFetchMessages,
+      chatSelectors.showInboxWelcome(s),
+      chatSelectors.isCurrentChatLoaded(s),
+    ],
+  );
 
   const [sessionId] = useSessionStore((s) => [s.activeId]);
   useFetchMessages(sessionId, activeTopicId);
 
-  const data = useChatStore((s) => {
-    const showInboxWelcome = chatSelectors.showInboxWelcome(s);
-    if (showInboxWelcome) return [WELCOME_GUIDE_CHAT_ID];
+  const data = useChatStore(chatSelectors.currentChatIDsWithGuideMessage, isEqual);
 
-    return chatSelectors.currentChatIDsWithGuideMessage(s);
-  }, isEqual);
+  if (showInboxWelcome && isCurrentChatLoaded) return <InboxWelcome />;
 
   return <VirtualizedList dataSource={data} mobile={mobile} />;
 });
 
+Content.displayName = 'ChatListRender';
+
 export default Content;
diff --git a/src/const/message.ts b/src/const/message.ts
index f3ef4fa26a07..d028536591c3 100644
--- a/src/const/message.ts
+++ b/src/const/message.ts
@@ -1,3 +1,7 @@
 export const LOADING_FLAT = '...';
 
 export const MESSAGE_CANCEL_FLAT = 'canceled';
+
+export const MESSAGE_THREAD_DIVIDER_ID = 'thread-divider';
+
+export const MESSAGE_WELCOME_GUIDE_ID = 'welcome';
diff --git a/src/features/ChatInput/Desktop/Footer/ShortcutHint.tsx b/src/features/ChatInput/Desktop/Footer/ShortcutHint.tsx
new file mode 100644
index 000000000000..429959b98e5e
--- /dev/null
+++ b/src/features/ChatInput/Desktop/Footer/ShortcutHint.tsx
@@ -0,0 +1,61 @@
+import { Icon } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { useTheme } from 'antd-style';
+import { ChevronUp, CornerDownLeft, LucideCommand } from 'lucide-react';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center, Flexbox } from 'react-layout-kit';
+
+import { useUserStore } from '@/store/user';
+import { preferenceSelectors } from '@/store/user/selectors';
+import { isMacOS } from '@/utils/platform';
+
+const ShortcutHint = memo(() => {
+  const { t } = useTranslation('chat');
+  const theme = useTheme();
+  const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
+  const [isMac, setIsMac] = useState<boolean>();
+
+  useEffect(() => {
+    setIsMac(isMacOS());
+  }, []);
+
+  const cmdEnter = (
+    <Flexbox gap={2} horizontal>
+      {typeof isMac === 'boolean' ? (
+        <Icon icon={isMac ? LucideCommand : ChevronUp} />
+      ) : (
+        <Skeleton.Node active style={{ height: '100%', width: 12 }}>
+          {' '}
+        </Skeleton.Node>
+      )}
+      <Icon icon={CornerDownLeft} />
+    </Flexbox>
+  );
+
+  const enter = (
+    <Center>
+      <Icon icon={CornerDownLeft} />
+    </Center>
+  );
+
+  const sendShortcut = useCmdEnterToSend ? cmdEnter : enter;
+
+  const wrapperShortcut = useCmdEnterToSend ? enter : cmdEnter;
+
+  return (
+    <Flexbox
+      gap={4}
+      horizontal
+      style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
+    >
+      {sendShortcut}
+      <span>{t('input.send')}</span>
+      <span>/</span>
+      {wrapperShortcut}
+      <span>{t('input.warp')}</span>
+    </Flexbox>
+  );
+});
+
+export default ShortcutHint;
diff --git a/src/features/ChatInput/Desktop/Footer/index.tsx b/src/features/ChatInput/Desktop/Footer/index.tsx
index a155b6bbee4f..594b1836da67 100644
--- a/src/features/ChatInput/Desktop/Footer/index.tsx
+++ b/src/features/ChatInput/Desktop/Footer/index.tsx
@@ -1,23 +1,20 @@
-import { Icon } from '@lobehub/ui';
-import { Button, Skeleton, Space } from 'antd';
+import { Button, Space } from 'antd';
 import { createStyles } from 'antd-style';
-import { ChevronUp, CornerDownLeft, LucideCommand } from 'lucide-react';
 import { rgba } from 'polished';
 import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Flexbox } from 'react-layout-kit';
 
 import StopLoadingIcon from '@/components/StopLoading';
-import SaveTopic from '@/features/ChatInput/Topic';
 import { useSendMessage } from '@/features/ChatInput/useSend';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
-import { useUserStore } from '@/store/user';
-import { preferenceSelectors } from '@/store/user/selectors';
 import { isMacOS } from '@/utils/platform';
 
+import SaveTopic from '../../Topic';
 import LocalFiles from '../FilePreview';
 import SendMore from './SendMore';
+import ShortcutHint from './ShortcutHint';
 
 const useStyles = createStyles(({ css, prefixCls, token }) => {
   return {
@@ -48,51 +45,29 @@ const useStyles = createStyles(({ css, prefixCls, token }) => {
 
 interface FooterProps {
   expand: boolean;
+  saveTopic?: boolean;
   setExpand?: (expand: boolean) => void;
+  shortcutHint?: boolean;
 }
 
-const Footer = memo<FooterProps>(({ setExpand, expand }) => {
+const Footer = memo<FooterProps>(({ setExpand, expand, shortcutHint = true, saveTopic = true }) => {
   const { t } = useTranslation('chat');
 
-  const { theme, styles } = useStyles();
+  const { styles } = useStyles();
 
   const [isAIGenerating, stopGenerateMessage] = useChatStore((s) => [
     chatSelectors.isAIGenerating(s),
     s.stopGenerateMessage,
   ]);
 
-  const [useCmdEnterToSend] = useUserStore((s) => [preferenceSelectors.useCmdEnterToSend(s)]);
-
   const { send: sendMessage, canSend } = useSendMessage();
 
   const [isMac, setIsMac] = useState<boolean>();
+
   useEffect(() => {
     setIsMac(isMacOS());
   }, [setIsMac]);
 
-  const cmdEnter = (
-    <Flexbox gap={2} horizontal>
-      {typeof isMac === 'boolean' ? (
-        <Icon icon={isMac ? LucideCommand : ChevronUp} />
-      ) : (
-        <Skeleton.Node active style={{ height: '100%', width: 12 }}>
-          {' '}
-        </Skeleton.Node>
-      )}
-      <Icon icon={CornerDownLeft} />
-    </Flexbox>
-  );
-
-  const enter = (
-    <Center>
-      <Icon icon={CornerDownLeft} />
-    </Center>
-  );
-
-  const sendShortcut = useCmdEnterToSend ? cmdEnter : enter;
-
-  const wrapperShortcut = useCmdEnterToSend ? enter : cmdEnter;
-
   return (
     <Flexbox
       align={'end'}
@@ -107,18 +82,8 @@ const Footer = memo<FooterProps>(({ setExpand, expand }) => {
         {expand && <LocalFiles />}
       </Flexbox>
       <Flexbox align={'center'} flex={'none'} gap={8} horizontal>
-        <Flexbox
-          gap={4}
-          horizontal
-          style={{ color: theme.colorTextDescription, fontSize: 12, marginRight: 12 }}
-        >
-          {sendShortcut}
-          <span>{t('input.send')}</span>
-          <span>/</span>
-          {wrapperShortcut}
-          <span>{t('input.warp')}</span>
-        </Flexbox>
-        <SaveTopic />
+        {shortcutHint && <ShortcutHint />}
+        {saveTopic && <SaveTopic />}
         <Flexbox style={{ minWidth: 92 }}>
           {isAIGenerating ? (
             <Button
diff --git a/src/features/ChatInput/Desktop/TextArea.tsx b/src/features/ChatInput/Desktop/InputArea/index.tsx
similarity index 78%
rename from src/features/ChatInput/Desktop/TextArea.tsx
rename to src/features/ChatInput/Desktop/InputArea/index.tsx
index 5ec62ccb1f94..82862ac9fb70 100644
--- a/src/features/ChatInput/Desktop/TextArea.tsx
+++ b/src/features/ChatInput/Desktop/InputArea/index.tsx
@@ -4,14 +4,11 @@ import { TextAreaRef } from 'antd/es/input/TextArea';
 import { memo, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useSendMessage } from '@/features/ChatInput/useSend';
-import { useChatStore } from '@/store/chat';
-import { chatSelectors } from '@/store/chat/selectors';
 import { useUserStore } from '@/store/user';
 import { preferenceSelectors } from '@/store/user/selectors';
 import { isCommandPressed } from '@/utils/keyboard';
 
-import { useAutoFocus } from './useAutoFocus';
+import { useAutoFocus } from '../useAutoFocus';
 
 const useStyles = createStyles(({ css }) => {
   return {
@@ -34,25 +31,20 @@ const useStyles = createStyles(({ css }) => {
 });
 
 interface InputAreaProps {
-  setExpand?: (expand: boolean) => void;
+  loading?: boolean;
+  onChange: (string: string) => void;
+  onSend: () => void;
+  value: string;
 }
 
-const InputArea = memo<InputAreaProps>(({ setExpand }) => {
+const InputArea = memo<InputAreaProps>(({ onSend, value, loading, onChange }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
   const ref = useRef<TextAreaRef>(null);
   const isChineseInput = useRef(false);
 
-  const [loading, value, updateInputMessage] = useChatStore((s) => [
-    chatSelectors.isAIGenerating(s),
-    s.inputMessage,
-    s.updateInputMessage,
-  ]);
-
   const useCmdEnterToSend = useUserStore(preferenceSelectors.useCmdEnterToSend);
 
-  const { send: sendMessage } = useSendMessage();
-
   useAutoFocus(ref);
 
   const hasValue = !!value;
@@ -78,10 +70,10 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
         autoFocus
         className={styles.textarea}
         onBlur={(e) => {
-          updateInputMessage?.(e.target.value);
+          onChange?.(e.target.value);
         }}
         onChange={(e) => {
-          updateInputMessage?.(e.target.value);
+          onChange?.(e.target.value);
         }}
         onCompositionEnd={() => {
           isChineseInput.current = false;
@@ -98,8 +90,7 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
             // refs: https://github.com/lobehub/lobe-chat/pull/989
             e.preventDefault();
 
-            sendMessage();
-            setExpand?.(false);
+            onSend();
           };
           const commandKey = isCommandPressed(e);
 
@@ -109,7 +100,7 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
           } else {
             // cmd + enter to wrap
             if (commandKey) {
-              updateInputMessage?.((e.target as any).value + '\n');
+              onChange?.((e.target as any).value + '\n');
               return;
             }
 
@@ -125,6 +116,6 @@ const InputArea = memo<InputAreaProps>(({ setExpand }) => {
   );
 });
 
-InputArea.displayName = 'InputArea';
+InputArea.displayName = 'DesktopInputArea';
 
 export default InputArea;
diff --git a/src/features/ChatInput/Desktop/index.tsx b/src/features/ChatInput/Desktop/index.tsx
index b265f526576c..8c9695dd8d42 100644
--- a/src/features/ChatInput/Desktop/index.tsx
+++ b/src/features/ChatInput/Desktop/index.tsx
@@ -1,59 +1,50 @@
 'use client';
 
 import { DraggablePanel } from '@lobehub/ui';
-import { memo, useState } from 'react';
+import { ReactNode, memo, useCallback, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { CHAT_TEXTAREA_HEIGHT, CHAT_TEXTAREA_MAX_HEIGHT } from '@/const/layoutTokens';
-import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
-import { useGlobalStore } from '@/store/global';
-import { systemStatusSelectors } from '@/store/global/selectors';
 
+import { ActionKeys } from '../ActionBar/config';
 import LocalFiles from './FilePreview';
 import Footer from './Footer';
 import Head from './Header';
-import TextArea from './TextArea';
-
-const defaultLeftActions = [
-  'model',
-  'fileUpload',
-  'knowledgeBase',
-  'temperature',
-  'history',
-  'stt',
-  'tools',
-  'token',
-] as ActionKeys[];
-
-const defaultRightActions = ['clear'] as ActionKeys[];
 
 interface DesktopChatInputProps {
-  leftActions?: ActionKeys[];
-  rightActions?: ActionKeys[];
+  footer?: {
+    saveTopic?: boolean;
+    shortcutHint?: boolean;
+  };
+  inputHeight: number;
+  leftActions: ActionKeys[];
+  onInputHeightChange?: (height: number) => void;
+  renderTextArea: (onSend: () => void) => ReactNode;
+  rightActions: ActionKeys[];
 }
+
 const DesktopChatInput = memo<DesktopChatInputProps>(
-  ({ leftActions = defaultLeftActions, rightActions = defaultRightActions }) => {
+  ({ leftActions, rightActions, footer, renderTextArea, inputHeight, onInputHeightChange }) => {
     const [expand, setExpand] = useState<boolean>(false);
 
-    const [inputHeight, updatePreference] = useGlobalStore((s) => [
-      systemStatusSelectors.inputHeight(s),
-      s.updateSystemStatus,
-    ]);
+    const onSend = useCallback(() => {
+      setExpand(false);
+    }, []);
 
     return (
       <>
-        {!expand && <LocalFiles />}
+        {!expand && leftActions.includes('fileUpload') && <LocalFiles />}
         <DraggablePanel
           fullscreen={expand}
           maxHeight={CHAT_TEXTAREA_MAX_HEIGHT}
           minHeight={CHAT_TEXTAREA_HEIGHT}
           onSizeChange={(_, size) => {
             if (!size) return;
+            const height =
+              typeof size.height === 'string' ? Number.parseInt(size.height) : size.height;
+            if (!height) return;
 
-            updatePreference({
-              inputHeight:
-                typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-            });
+            onInputHeightChange?.(height);
           }}
           placement="bottom"
           size={{ height: inputHeight, width: '100%' }}
@@ -71,8 +62,8 @@ const DesktopChatInput = memo<DesktopChatInputProps>(
               rightActions={rightActions}
               setExpand={setExpand}
             />
-            <TextArea setExpand={setExpand} />
-            <Footer expand={expand} setExpand={setExpand} />
+            {renderTextArea(onSend)}
+            <Footer expand={expand} setExpand={setExpand} {...footer} />
           </Flexbox>
         </DraggablePanel>
       </>
diff --git a/src/features/Conversation/Messages/index.ts b/src/features/Conversation/Messages/index.ts
index ecdc49c7053a..fd0fc04b4ae3 100644
--- a/src/features/Conversation/Messages/index.ts
+++ b/src/features/Conversation/Messages/index.ts
@@ -1,9 +1,11 @@
+import { useCallback } from 'react';
+
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
-import { MarkdownCustomRender, OnAvatarsClick, RenderBelowMessage, RenderMessage } from '../types';
+import { MarkdownCustomRender, RenderBelowMessage, RenderMessage } from '../types';
 import { AssistantMessage } from './Assistant';
 import { DefaultBelowMessage, DefaultMessage } from './Default';
 import { ToolMessage } from './Tool';
@@ -26,22 +28,20 @@ export const markdownCustomRenders: Record<string, MarkdownCustomRender> = {
   user: UserMarkdownRender,
 };
 
-export const useAvatarsClick = (): OnAvatarsClick => {
+export const useAvatarsClick = (role?: string) => {
   const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
   const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
   const openChatSettings = useOpenChatSettings();
 
-  return (role) => {
+  return useCallback(() => {
     switch (role) {
       case 'assistant': {
-        return () => {
-          if (!isInbox) {
-            toggleSystemRole(true);
-          } else {
-            openChatSettings();
-          }
-        };
+        if (!isInbox) {
+          toggleSystemRole(true);
+        } else {
+          openChatSettings();
+        }
       }
     }
-  };
+  }, [isInbox, role]);
 };
diff --git a/src/features/Conversation/components/ChatItem/index.tsx b/src/features/Conversation/components/ChatItem/index.tsx
index 180809da98e9..9f02f8ab11bb 100644
--- a/src/features/Conversation/components/ChatItem/index.tsx
+++ b/src/features/Conversation/components/ChatItem/index.tsx
@@ -1,7 +1,9 @@
+'use client';
+
 import { ChatItem } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { ReactNode, memo, useCallback, useMemo } from 'react';
+import { MouseEventHandler, ReactNode, memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
@@ -42,11 +44,13 @@ const useStyles = createStyles(({ css, prefixCls }) => ({
 }));
 
 export interface ChatListItemProps {
+  hideActionBar?: boolean;
   id: string;
   index: number;
+  showThreadDivider?: boolean;
 }
 
-const Item = memo<ChatListItemProps>(({ index, id }) => {
+const Item = memo<ChatListItemProps>(({ index, id, hideActionBar }) => {
   const fontSize = useUserStore(userGeneralSettingsSelectors.fontSize);
   const { t } = useTranslation('common');
   const { styles, cx } = useStyles();
@@ -61,7 +65,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
 
     if (index >= chats.length) return;
 
-    return chats[index];
+    return chats.find((s) => s.id === id);
   }, isEqual);
 
   const [
@@ -83,18 +87,18 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   // when the message is in RAG flow or the AI generating, it should be in loading state
   const isProcessing = isInRAGFlow || generating;
 
-  const onAvatarsClick = useAvatarsClick();
+  const onAvatarsClick = useAvatarsClick(item?.role);
 
-  const RenderMessage = useCallback(
-    ({ editableContent, data }: { data: ChatMessage; editableContent: ReactNode }) => {
+  const renderMessage = useCallback(
+    (editableContent: ReactNode) => {
       if (!item?.role) return;
       const RenderFunction = renderMessages[item.role] ?? renderMessages['default'];
 
       if (!RenderFunction) return;
 
-      return <RenderFunction {...data} editableContent={editableContent} />;
+      return <RenderFunction {...item} editableContent={editableContent} />;
     },
-    [item?.role],
+    [item],
   );
 
   const BelowMessage = useCallback(
@@ -136,7 +140,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
 
   const error = useErrorContent(item?.error);
 
-  const historyLength = useChatStore((s) => chatSelectors.currentChats(s).length);
+  const [historyLength] = useChatStore((s) => [chatSelectors.currentChats(s).length]);
 
   const enableHistoryDivider = useAgentStore((s) => {
     const config = agentSelectors.currentAgentChatConfig(s);
@@ -151,6 +155,11 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   const message =
     !editing && item?.role === 'assistant' ? processWithArtifact(item?.content) : item?.content;
 
+  // ======================= Performance Optimization ======================= //
+  // these useMemo/useCallback are all for the performance optimization
+  // maybe we can remove it in React 19
+  // ======================================================================== //
+
   const components = useMemo(
     () =>
       Object.fromEntries(
@@ -163,55 +172,83 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
     [id],
   );
 
+  const markdownProps = useMemo(
+    () => ({
+      components,
+      customRender: markdownCustomRender,
+      rehypePlugins,
+    }),
+    [components, markdownCustomRender],
+  );
+
+  const onChange = useCallback((value: string) => updateMessageContent(id, value), [id]);
+
+  const onDoubleClick = useCallback<MouseEventHandler<HTMLDivElement>>(
+    (e) => {
+      if (!item) return;
+      if (item.id === 'default' || item.error) return;
+      if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
+        toggleMessageEditing(id, true);
+      }
+    },
+    [item],
+  );
+
+  const text = useMemo(
+    () => ({
+      cancel: t('cancel'),
+      confirm: t('ok'),
+      edit: t('edit'),
+    }),
+    [t],
+  );
+
+  const onEditingChange = useCallback((edit: boolean) => {
+    toggleMessageEditing(id, edit);
+  }, []);
+
+  const actions = useMemo(
+    () =>
+      !hideActionBar && (
+        <ActionsBar
+          index={index}
+          setEditing={(edit) => {
+            toggleMessageEditing(id, edit);
+          }}
+        />
+      ),
+    [hideActionBar, index, id],
+  );
+
+  const belowMessage = useMemo(() => item && <BelowMessage data={item} />, [item]);
+  const errorMessage = useMemo(() => item && <ErrorMessageExtra data={item} />, [item]);
+  const messageExtra = useMemo(() => item && <MessageExtra data={item} />, [item]);
+
   return (
     item && (
       <>
         {enableHistoryDivider && <History />}
         <ChatItem
-          actions={
-            <ActionsBar
-              index={index}
-              setEditing={(edit) => {
-                toggleMessageEditing(id, edit);
-              }}
-            />
-          }
+          actions={actions}
           avatar={item.meta}
-          belowMessage={<BelowMessage data={item} />}
+          belowMessage={belowMessage}
           className={cx(styles.message, isMessageLoading && styles.loading)}
           editing={editing}
           error={error}
-          errorMessage={<ErrorMessageExtra data={item} />}
+          errorMessage={errorMessage}
           fontSize={fontSize}
           loading={isProcessing}
-          markdownProps={{
-            components,
-            customRender: markdownCustomRender,
-            rehypePlugins,
-          }}
+          markdownProps={markdownProps}
           message={message}
-          messageExtra={<MessageExtra data={item} />}
-          onAvatarClick={onAvatarsClick?.(item.role)}
-          onChange={(value) => updateMessageContent(item.id, value)}
-          onDoubleClick={(e) => {
-            if (item.id === 'default' || item.error) return;
-            if (item.role && ['assistant', 'user'].includes(item.role) && e.altKey) {
-              toggleMessageEditing(id, true);
-            }
-          }}
-          onEditingChange={(edit) => {
-            toggleMessageEditing(id, edit);
-          }}
+          messageExtra={messageExtra}
+          onAvatarClick={onAvatarsClick}
+          onChange={onChange}
+          onDoubleClick={onDoubleClick}
+          onEditingChange={onEditingChange}
           placement={type === 'chat' ? (item.role === 'user' ? 'right' : 'left') : 'left'}
           primary={item.role === 'user'}
-          renderMessage={(editableContent) => (
-            <RenderMessage data={item} editableContent={editableContent} />
-          )}
-          text={{
-            cancel: t('cancel'),
-            confirm: t('ok'),
-            edit: t('edit'),
-          }}
+          renderMessage={renderMessage}
+          text={text}
           time={item.updatedAt || item.createdAt}
           type={type === 'chat' ? 'block' : 'pure'}
         />
@@ -220,4 +257,6 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   );
 });
 
+Item.displayName = 'ChatItem';
+
 export default Item;
diff --git a/src/features/Conversation/components/VirtualizedList/index.tsx b/src/features/Conversation/components/VirtualizedList/index.tsx
index 254b07ce06be..495dc913313b 100644
--- a/src/features/Conversation/components/VirtualizedList/index.tsx
+++ b/src/features/Conversation/components/VirtualizedList/index.tsx
@@ -3,116 +3,114 @@
 import { Icon } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { Loader2Icon } from 'lucide-react';
-import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import React, { ReactNode, memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 
-import { WELCOME_GUIDE_CHAT_ID } from '@/const/session';
 import { isServerMode } from '@/const/version';
 import { useChatStore } from '@/store/chat';
 import { chatSelectors } from '@/store/chat/selectors';
 
 import AutoScroll from '../AutoScroll';
 import Item from '../ChatItem';
-import InboxWelcome from '../InboxWelcome';
 import SkeletonList from '../SkeletonList';
 
 interface VirtualizedListProps {
   dataSource: string[];
+  hideActionBar?: boolean;
+  itemContent?: (index: number, data: any, context: any) => ReactNode;
   mobile?: boolean;
 }
 
-const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource }) => {
-  const virtuosoRef = useRef<VirtuosoHandle>(null);
-  const [atBottom, setAtBottom] = useState(true);
-  const [isScrolling, setIsScrolling] = useState(false);
-
-  const [id] = useChatStore((s) => [chatSelectors.currentChatKey(s)]);
-  const [isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
-    chatSelectors.currentChatLoadingState(s),
-    chatSelectors.isCurrentChatLoaded(s),
-  ]);
-
-  useEffect(() => {
-    if (virtuosoRef.current) {
-      virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
-    }
-  }, [id]);
-
-  const prevDataLengthRef = useRef(dataSource.length);
-
-  const getFollowOutput = useCallback(() => {
-    const newFollowOutput = dataSource.length > prevDataLengthRef.current ? 'auto' : false;
-    prevDataLengthRef.current = dataSource.length;
-    return newFollowOutput;
-  }, [dataSource.length]);
-
-  const theme = useTheme();
-  // overscan should be 3 times the height of the window
-  const overscan = typeof window !== 'undefined' ? window.innerHeight * 3 : 0;
-
-  const itemContent = useCallback(
-    (index: number, id: string) => {
-      if (id === WELCOME_GUIDE_CHAT_ID) return <InboxWelcome />;
-
-      return <Item id={id} index={index} />;
-    },
-    [mobile],
-  );
-
-  // first time loading or not loaded
-  if (isFirstLoading) return <SkeletonList mobile={mobile} />;
-
-  if (!isCurrentChatLoaded)
-    // use skeleton list when not loaded in server mode due to the loading duration is much longer than client mode
-    return isServerMode ? (
-      <SkeletonList mobile={mobile} />
-    ) : (
-      // in client mode and switch page, using the center loading for smooth transition
-      <Center height={'100%'} width={'100%'}>
-        <Icon
-          icon={Loader2Icon}
-          size={{ fontSize: 32 }}
-          spin
-          style={{ color: theme.colorTextTertiary }}
-        />
-      </Center>
+const VirtualizedList = memo<VirtualizedListProps>(
+  ({ mobile, dataSource, hideActionBar, itemContent }) => {
+    const virtuosoRef = useRef<VirtuosoHandle>(null);
+    const [atBottom, setAtBottom] = useState(true);
+    const [isScrolling, setIsScrolling] = useState(false);
+
+    const [id, isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
+      chatSelectors.currentChatKey(s),
+      chatSelectors.currentChatLoadingState(s),
+      chatSelectors.isCurrentChatLoaded(s),
+    ]);
+
+    useEffect(() => {
+      if (virtuosoRef.current) {
+        virtuosoRef.current.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
+      }
+    }, [id]);
+
+    const prevDataLengthRef = useRef(dataSource.length);
+
+    const getFollowOutput = useCallback(() => {
+      const newFollowOutput = dataSource.length > prevDataLengthRef.current ? 'auto' : false;
+      prevDataLengthRef.current = dataSource.length;
+      return newFollowOutput;
+    }, [dataSource.length]);
+
+    const theme = useTheme();
+    // overscan should be 3 times the height of the window
+    const overscan = typeof window !== 'undefined' ? window.innerHeight * 3 : 0;
+
+    const defaultItemContent = useCallback(
+      (index: number, id: string) => <Item hideActionBar={hideActionBar} id={id} index={index} />,
+      [mobile, hideActionBar],
     );
 
-  return (
-    <Flexbox height={'100%'}>
-      <Virtuoso
-        atBottomStateChange={setAtBottom}
-        atBottomThreshold={50 * (mobile ? 2 : 1)}
-        computeItemKey={(_, item) => item}
-        data={dataSource}
-        followOutput={getFollowOutput}
-        increaseViewportBy={overscan}
-        initialTopMostItemIndex={dataSource?.length - 1}
-        isScrolling={setIsScrolling}
-        itemContent={itemContent}
-        overscan={overscan}
-        ref={virtuosoRef}
-      />
-      <AutoScroll
-        atBottom={atBottom}
-        isScrolling={isScrolling}
-        onScrollToBottom={(type) => {
-          const virtuoso = virtuosoRef.current;
-          switch (type) {
-            case 'auto': {
-              virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
-              break;
-            }
-            case 'click': {
-              virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
-              break;
+    // first time loading or not loaded
+    if (isFirstLoading) return <SkeletonList mobile={mobile} />;
+
+    if (!isCurrentChatLoaded)
+      // use skeleton list when not loaded in server mode due to the loading duration is much longer than client mode
+      return isServerMode ? (
+        <SkeletonList mobile={mobile} />
+      ) : (
+        // in client mode and switch page, using the center loading for smooth transition
+        <Center height={'100%'} width={'100%'}>
+          <Icon
+            icon={Loader2Icon}
+            size={{ fontSize: 32 }}
+            spin
+            style={{ color: theme.colorTextTertiary }}
+          />
+        </Center>
+      );
+
+    return (
+      <Flexbox height={'100%'}>
+        <Virtuoso
+          atBottomStateChange={setAtBottom}
+          atBottomThreshold={50 * (mobile ? 2 : 1)}
+          computeItemKey={(_, item) => item}
+          data={dataSource}
+          followOutput={getFollowOutput}
+          increaseViewportBy={overscan}
+          initialTopMostItemIndex={dataSource?.length - 1}
+          isScrolling={setIsScrolling}
+          itemContent={itemContent ?? defaultItemContent}
+          overscan={overscan}
+          ref={virtuosoRef}
+        />
+        <AutoScroll
+          atBottom={atBottom}
+          isScrolling={isScrolling}
+          onScrollToBottom={(type) => {
+            const virtuoso = virtuosoRef.current;
+            switch (type) {
+              case 'auto': {
+                virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
+                break;
+              }
+              case 'click': {
+                virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
+                break;
+              }
             }
-          }
-        }}
-      />
-    </Flexbox>
-  );
-});
+          }}
+        />
+      </Flexbox>
+    );
+  },
+);
 
 export default VirtualizedList;
diff --git a/src/features/Conversation/index.ts b/src/features/Conversation/index.ts
index 41edbb27ea07..446c3ee40ebc 100644
--- a/src/features/Conversation/index.ts
+++ b/src/features/Conversation/index.ts
@@ -1,2 +1,4 @@
+export { default as ChatItem } from './components/ChatItem';
+export { default as InboxWelcome } from './components/InboxWelcome';
 export { default as SkeletonList } from './components/SkeletonList';
 export { default as VirtualizedList } from './components/VirtualizedList';
diff --git a/src/types/topic/index.ts b/src/types/topic/index.ts
new file mode 100644
index 000000000000..204b72e3fc5a
--- /dev/null
+++ b/src/types/topic/index.ts
@@ -0,0 +1 @@
+export * from './topic';
diff --git a/src/types/topic.ts b/src/types/topic/topic.ts
similarity index 100%
rename from src/types/topic.ts
rename to src/types/topic/topic.ts