@lobehub/chat 1.31.5 → 1.31.6

package/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

package/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}

package/src/features/Conversation/index.ts

@@ -0,0 +1,2 @@
+export { default as SkeletonList } from './components/SkeletonList';
+export { default as VirtualizedList } from './components/VirtualizedList';

package/src/features/Conversation/index.tsx

@@ -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;