From 85b163037d575b23bcd0f76f1543beb7907f22c2 Mon Sep 17 00:00:00 2001
From: Arvin Xu <arvinx@foxmail.com>
Date: Thu, 14 Nov 2024 00:06:18 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20refactor=20the?=
 =?UTF-8?q?=20chat=20conversation=20implement=20(#4689)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(workspace)/@conversation/default.tsx     |   4 +-
 .../ChatInput/Desktop/Header/index.tsx        |   7 +-
 .../features/ChatInput/Desktop/index.tsx      | 106 +++++++++++-------
 .../features/ChatInput/Mobile/index.tsx       |  20 +++-
 .../features/ChatList/Content.tsx             |  35 ++++++
 .../@conversation/features/ChatList/index.tsx |  28 +++++
 src/features/ChatInput/ActionBar/config.ts    |  21 +---
 src/features/ChatInput/ActionBar/index.tsx    |  53 +++++----
 src/features/ChatInput/types.ts               |   1 +
 .../components/ChatItem/index.tsx             |   2 +-
 .../components/VirtualizedList/index.tsx      |  41 +++----
 src/features/Conversation/index.ts            |   2 +
 src/features/Conversation/index.tsx           |  30 -----
 13 files changed, 196 insertions(+), 154 deletions(-)
 create mode 100644 src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx
 create mode 100644 src/app/(main)/chat/(workspace)/@conversation/features/ChatList/index.tsx
 create mode 100644 src/features/ChatInput/types.ts
 create mode 100644 src/features/Conversation/index.ts
 delete mode 100644 src/features/Conversation/index.tsx

diff --git a/src/app/(main)/chat/(workspace)/@conversation/default.tsx b/src/app/(main)/chat/(workspace)/@conversation/default.tsx
index 734bd06e2c79..9acfb8ee3206 100644
--- a/src/app/(main)/chat/(workspace)/@conversation/default.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/default.tsx
@@ -1,9 +1,9 @@
-import Conversation from '@/features/Conversation';
 import { isMobileDevice } from '@/utils/server/responsive';
 
 import ChatHydration from './features/ChatHydration';
 import DesktopChatInput from './features/ChatInput/Desktop';
 import MobileChatInput from './features/ChatInput/Mobile';
+import ChatList from './features/ChatList';
 import ZenModeToast from './features/ZenModeToast';
 
 const ChatConversation = () => {
@@ -13,7 +13,7 @@ const ChatConversation = () => {
   return (
     <>
       <ZenModeToast />
-      <Conversation mobile={mobile} />
+      <ChatList mobile={mobile} />
       <ChatInput />
       <ChatHydration />
     </>
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Header/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Header/index.tsx
index 972ee6eaaa87..53dcce7f2da8 100644
--- a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Header/index.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/Header/index.tsx
@@ -3,14 +3,19 @@ import { Maximize2, Minimize2 } from 'lucide-react';
 import { memo } from 'react';
 
 import ActionBar from '@/features/ChatInput/ActionBar';
+import { ActionKeys } from '@/features/ChatInput/types';
 
 interface HeaderProps {
   expand: boolean;
+  leftActions: ActionKeys[];
+  rightActions: ActionKeys[];
   setExpand: (expand: boolean) => void;
 }
 
-const Header = memo<HeaderProps>(({ expand, setExpand }) => (
+const Header = memo<HeaderProps>(({ expand, setExpand, leftActions, rightActions }) => (
   <ActionBar
+    leftActions={leftActions}
+    rightActions={rightActions}
     rightAreaEndRender={
       <ActionIcon
         icon={expand ? Minimize2 : Maximize2}
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
index 061d90bca373..b265f526576c 100644
--- a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Desktop/index.tsx
@@ -4,11 +4,8 @@ import { DraggablePanel } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import {
-  CHAT_TEXTAREA_HEIGHT,
-  CHAT_TEXTAREA_MAX_HEIGHT,
-  HEADER_HEIGHT,
-} from '@/const/layoutTokens';
+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';
 
@@ -17,48 +14,71 @@ import Footer from './Footer';
 import Head from './Header';
 import TextArea from './TextArea';
 
-const DesktopChatInput = memo(() => {
-  const [expand, setExpand] = useState<boolean>(false);
+const defaultLeftActions = [
+  'model',
+  'fileUpload',
+  'knowledgeBase',
+  'temperature',
+  'history',
+  'stt',
+  'tools',
+  'token',
+] as ActionKeys[];
 
-  const [inputHeight, updatePreference] = useGlobalStore((s) => [
-    systemStatusSelectors.inputHeight(s),
-    s.updateSystemStatus,
-  ]);
+const defaultRightActions = ['clear'] as ActionKeys[];
 
-  return (
-    <>
-      {!expand && <LocalFiles />}
-      <DraggablePanel
-        fullscreen={expand}
-        headerHeight={HEADER_HEIGHT}
-        maxHeight={CHAT_TEXTAREA_MAX_HEIGHT}
-        minHeight={CHAT_TEXTAREA_HEIGHT}
-        onSizeChange={(_, size) => {
-          if (!size) return;
+interface DesktopChatInputProps {
+  leftActions?: ActionKeys[];
+  rightActions?: ActionKeys[];
+}
+const DesktopChatInput = memo<DesktopChatInputProps>(
+  ({ leftActions = defaultLeftActions, rightActions = defaultRightActions }) => {
+    const [expand, setExpand] = useState<boolean>(false);
 
-          updatePreference({
-            inputHeight:
-              typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
-          });
-        }}
-        placement="bottom"
-        size={{ height: inputHeight, width: '100%' }}
-        style={{ zIndex: 10 }}
-      >
-        <Flexbox
-          gap={8}
-          height={'100%'}
-          padding={'12px 0 16px'}
-          style={{ minHeight: CHAT_TEXTAREA_HEIGHT, position: 'relative' }}
+    const [inputHeight, updatePreference] = useGlobalStore((s) => [
+      systemStatusSelectors.inputHeight(s),
+      s.updateSystemStatus,
+    ]);
+
+    return (
+      <>
+        {!expand && <LocalFiles />}
+        <DraggablePanel
+          fullscreen={expand}
+          maxHeight={CHAT_TEXTAREA_MAX_HEIGHT}
+          minHeight={CHAT_TEXTAREA_HEIGHT}
+          onSizeChange={(_, size) => {
+            if (!size) return;
+
+            updatePreference({
+              inputHeight:
+                typeof size.height === 'string' ? Number.parseInt(size.height) : size.height,
+            });
+          }}
+          placement="bottom"
+          size={{ height: inputHeight, width: '100%' }}
+          style={{ zIndex: 10 }}
         >
-          <Head expand={expand} setExpand={setExpand} />
-          <TextArea setExpand={setExpand} />
-          <Footer expand={expand} setExpand={setExpand} />
-        </Flexbox>
-      </DraggablePanel>
-    </>
-  );
-});
+          <Flexbox
+            gap={8}
+            height={'100%'}
+            padding={'12px 0 16px'}
+            style={{ minHeight: CHAT_TEXTAREA_HEIGHT, position: 'relative' }}
+          >
+            <Head
+              expand={expand}
+              leftActions={leftActions}
+              rightActions={rightActions}
+              setExpand={setExpand}
+            />
+            <TextArea setExpand={setExpand} />
+            <Footer expand={expand} setExpand={setExpand} />
+          </Flexbox>
+        </DraggablePanel>
+      </>
+    );
+  },
+);
 
 DesktopChatInput.displayName = 'DesktopChatInput';
 
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/index.tsx
index 793601bfcfd0..5e0c4bc80ef4 100644
--- a/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/index.tsx
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatInput/Mobile/index.tsx
@@ -5,6 +5,7 @@ import { TextAreaRef } from 'antd/es/input/TextArea';
 import { memo, useRef, useState } from 'react';
 
 import ActionBar from '@/features/ChatInput/ActionBar';
+import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
 import STT from '@/features/ChatInput/STT';
 import SaveTopic from '@/features/ChatInput/Topic';
 import { useSendMessage } from '@/features/ChatInput/useSend';
@@ -15,6 +16,18 @@ import Files from './Files';
 import InputArea from './InputArea';
 import SendButton from './Send';
 
+const defaultLeftActions = [
+  'model',
+  'fileUpload',
+  'knowledgeBase',
+  'temperature',
+  'history',
+  'tools',
+  'token',
+] as ActionKeys[];
+
+const defaultRightActions = ['clear'] as ActionKeys[];
+
 const MobileChatInput = memo(() => {
   const theme = useTheme();
   const ref = useRef<TextAreaRef>(null);
@@ -52,7 +65,12 @@ const MobileChatInput = memo(() => {
       topAddons={
         <>
           <Files />
-          <ActionBar mobile padding={'0 8px'} rightAreaStartRender={<SaveTopic mobile />} />
+          <ActionBar
+            leftActions={defaultLeftActions}
+            padding={'0 8px'}
+            rightActions={defaultRightActions}
+            rightAreaStartRender={<SaveTopic mobile />}
+          />
         </>
       }
       value={value}
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx
new file mode 100644
index 000000000000..1565f44340bb
--- /dev/null
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/Content.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+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 { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+
+interface ListProps {
+  mobile?: boolean;
+}
+
+const Content = memo<ListProps>(({ mobile }) => {
+  const [activeTopicId, useFetchMessages] = useChatStore((s) => [
+    s.activeTopicId,
+    s.useFetchMessages,
+  ]);
+
+  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];
+
+    return chatSelectors.currentChatIDsWithGuideMessage(s);
+  }, isEqual);
+
+  return <VirtualizedList dataSource={data} mobile={mobile} />;
+});
+
+export default Content;
diff --git a/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/index.tsx b/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/index.tsx
new file mode 100644
index 000000000000..57c561cab0b2
--- /dev/null
+++ b/src/app/(main)/chat/(workspace)/@conversation/features/ChatList/index.tsx
@@ -0,0 +1,28 @@
+import { Suspense, lazy } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import { SkeletonList } from '@/features/Conversation';
+
+const Content = lazy(() => import('./Content'));
+
+interface ChatListProps {
+  mobile?: boolean;
+}
+
+const ChatList = ({ mobile }: ChatListProps) => (
+  <Flexbox
+    flex={1}
+    style={{
+      overflowX: 'hidden',
+      overflowY: 'auto',
+      position: 'relative',
+    }}
+    width={'100%'}
+  >
+    <Suspense fallback={<SkeletonList mobile={mobile} />}>
+      <Content mobile={mobile} />
+    </Suspense>
+  </Flexbox>
+);
+
+export default ChatList;
diff --git a/src/features/ChatInput/ActionBar/config.ts b/src/features/ChatInput/ActionBar/config.ts
index 24915ee988cc..3d86c2595aa3 100644
--- a/src/features/ChatInput/ActionBar/config.ts
+++ b/src/features/ChatInput/ActionBar/config.ts
@@ -20,23 +20,4 @@ export const actionMap = {
   tools: Tools,
 } as const;
 
-type ActionMap = typeof actionMap;
-
-export type ActionKeys = keyof ActionMap;
-
-type getActionList = (mobile?: boolean) => ActionKeys[];
-
-// we can make these action lists configurable in the future
-export const getLeftActionList: getActionList = (mobile) =>
-  [
-    'model',
-    'fileUpload',
-    'knowledgeBase',
-    'temperature',
-    'history',
-    !mobile && 'stt',
-    'tools',
-    'token',
-  ].filter(Boolean) as ActionKeys[];
-
-export const getRightActionList: getActionList = () => ['clear'].filter(Boolean) as ActionKeys[];
+export type ActionKeys = keyof typeof actionMap;
diff --git a/src/features/ChatInput/ActionBar/index.tsx b/src/features/ChatInput/ActionBar/index.tsx
index 5277d3a32c4d..d6482d2e8b37 100644
--- a/src/features/ChatInput/ActionBar/index.tsx
+++ b/src/features/ChatInput/ActionBar/index.tsx
@@ -1,7 +1,7 @@
 import { ChatInputActionBar } from '@lobehub/ui';
-import { ReactNode, memo, useMemo } from 'react';
+import { ReactNode, memo } from 'react';
 
-import { ActionKeys, actionMap, getLeftActionList, getRightActionList } from './config';
+import { ActionKeys, actionMap } from './config';
 
 const RenderActionList = ({ dataSource }: { dataSource: ActionKeys[] }) => (
   <>
@@ -13,10 +13,11 @@ const RenderActionList = ({ dataSource }: { dataSource: ActionKeys[] }) => (
 );
 
 export interface ActionBarProps {
+  leftActions: ActionKeys[];
   leftAreaEndRender?: ReactNode;
   leftAreaStartRender?: ReactNode;
-  mobile?: boolean;
   padding?: number | string;
+  rightActions: ActionKeys[];
   rightAreaEndRender?: ReactNode;
   rightAreaStartRender?: ReactNode;
 }
@@ -24,35 +25,31 @@ export interface ActionBarProps {
 const ActionBar = memo<ActionBarProps>(
   ({
     padding = '0 16px',
-    mobile,
     rightAreaStartRender,
     rightAreaEndRender,
     leftAreaStartRender,
     leftAreaEndRender,
-  }) => {
-    const leftActionList = useMemo(() => getLeftActionList(mobile), [mobile]);
-    const rightActionList = useMemo(() => getRightActionList(mobile), [mobile]);
-
-    return (
-      <ChatInputActionBar
-        leftAddons={
-          <>
-            {leftAreaStartRender}
-            <RenderActionList dataSource={leftActionList} />
-            {leftAreaEndRender}
-          </>
-        }
-        padding={padding}
-        rightAddons={
-          <>
-            {rightAreaStartRender}
-            <RenderActionList dataSource={rightActionList} />
-            {rightAreaEndRender}
-          </>
-        }
-      />
-    );
-  },
+    leftActions,
+    rightActions,
+  }) => (
+    <ChatInputActionBar
+      leftAddons={
+        <>
+          {leftAreaStartRender}
+          <RenderActionList dataSource={leftActions} />
+          {leftAreaEndRender}
+        </>
+      }
+      padding={padding}
+      rightAddons={
+        <>
+          {rightAreaStartRender}
+          <RenderActionList dataSource={rightActions} />
+          {rightAreaEndRender}
+        </>
+      }
+    />
+  ),
 );
 
 export default ActionBar;
diff --git a/src/features/ChatInput/types.ts b/src/features/ChatInput/types.ts
new file mode 100644
index 000000000000..755d6c687f2e
--- /dev/null
+++ b/src/features/ChatInput/types.ts
@@ -0,0 +1 @@
+export type { ActionKeys } from './ActionBar/config';
diff --git a/src/features/Conversation/components/ChatItem/index.tsx b/src/features/Conversation/components/ChatItem/index.tsx
index 74a17baba5a6..180809da98e9 100644
--- a/src/features/Conversation/components/ChatItem/index.tsx
+++ b/src/features/Conversation/components/ChatItem/index.tsx
@@ -166,7 +166,7 @@ const Item = memo<ChatListItemProps>(({ index, id }) => {
   return (
     item && (
       <>
-        {enableHistoryDivider && <History  />}
+        {enableHistoryDivider && <History />}
         <ChatItem
           actions={
             <ActionsBar
diff --git a/src/features/Conversation/components/VirtualizedList/index.tsx b/src/features/Conversation/components/VirtualizedList/index.tsx
index 087bda53daef..254b07ce06be 100644
--- a/src/features/Conversation/components/VirtualizedList/index.tsx
+++ b/src/features/Conversation/components/VirtualizedList/index.tsx
@@ -2,7 +2,6 @@
 
 import { Icon } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
-import isEqual from 'fast-deep-equal';
 import { Loader2Icon } from 'lucide-react';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -12,7 +11,6 @@ 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 { useSessionStore } from '@/store/session';
 
 import AutoScroll from '../AutoScroll';
 import Item from '../ChatItem';
@@ -20,33 +18,20 @@ import InboxWelcome from '../InboxWelcome';
 import SkeletonList from '../SkeletonList';
 
 interface VirtualizedListProps {
+  dataSource: string[];
   mobile?: boolean;
 }
-const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
+
+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 [activeTopicId, useFetchMessages, isFirstLoading, isCurrentChatLoaded] = useChatStore(
-    (s) => [
-      s.activeTopicId,
-      s.useFetchMessages,
-      chatSelectors.currentChatLoadingState(s),
-      chatSelectors.isCurrentChatLoaded(s),
-    ],
-  );
-
-  const [sessionId] = useSessionStore((s) => [s.activeId]);
-  useFetchMessages(sessionId, activeTopicId);
-
-  const data = useChatStore((s) => {
-    const showInboxWelcome = chatSelectors.showInboxWelcome(s);
-    return showInboxWelcome
-      ? [WELCOME_GUIDE_CHAT_ID]
-      : chatSelectors.currentChatIDsWithGuideMessage(s);
-  }, isEqual);
+  const [isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
+    chatSelectors.currentChatLoadingState(s),
+    chatSelectors.isCurrentChatLoaded(s),
+  ]);
 
   useEffect(() => {
     if (virtuosoRef.current) {
@@ -54,13 +39,13 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
     }
   }, [id]);
 
-  const prevDataLengthRef = useRef(data.length);
+  const prevDataLengthRef = useRef(dataSource.length);
 
   const getFollowOutput = useCallback(() => {
-    const newFollowOutput = data.length > prevDataLengthRef.current ? 'auto' : false;
-    prevDataLengthRef.current = data.length;
+    const newFollowOutput = dataSource.length > prevDataLengthRef.current ? 'auto' : false;
+    prevDataLengthRef.current = dataSource.length;
     return newFollowOutput;
-  }, [data.length]);
+  }, [dataSource.length]);
 
   const theme = useTheme();
   // overscan should be 3 times the height of the window
@@ -100,10 +85,10 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile }) => {
         atBottomStateChange={setAtBottom}
         atBottomThreshold={50 * (mobile ? 2 : 1)}
         computeItemKey={(_, item) => item}
-        data={data}
+        data={dataSource}
         followOutput={getFollowOutput}
         increaseViewportBy={overscan}
-        initialTopMostItemIndex={data?.length - 1}
+        initialTopMostItemIndex={dataSource?.length - 1}
         isScrolling={setIsScrolling}
         itemContent={itemContent}
         overscan={overscan}
diff --git a/src/features/Conversation/index.ts b/src/features/Conversation/index.ts
new file mode 100644
index 000000000000..41edbb27ea07
--- /dev/null
+++ b/src/features/Conversation/index.ts
@@ -0,0 +1,2 @@
+export { default as SkeletonList } from './components/SkeletonList';
+export { default as VirtualizedList } from './components/VirtualizedList';
diff --git a/src/features/Conversation/index.tsx b/src/features/Conversation/index.tsx
deleted file mode 100644
index 09d2c265ede3..000000000000
--- a/src/features/Conversation/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Suspense, lazy } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import SkeletonList from './components/SkeletonList';
-
-const ChatList = lazy(() => import('./components/VirtualizedList'));
-
-interface ConversationProps {
-  mobile?: boolean;
-}
-
-const Conversation = ({ mobile }: ConversationProps) => {
-  return (
-    <Flexbox
-      flex={1}
-      style={{
-        overflowX: 'hidden',
-        overflowY: 'auto',
-        position: 'relative',
-      }}
-      width={'100%'}
-    >
-      <Suspense fallback={<SkeletonList mobile={mobile} />}>
-        <ChatList mobile={mobile} />
-      </Suspense>
-    </Flexbox>
-  );
-};
-
-export default Conversation;