@lobehub/lobehub 2.0.0-next.66 → 2.0.0-next.67

package/src/features/Conversation/Messages/Group/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { UIChatMessage } from '@lobechat/types';
-import { useResponsive } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -9,7 +9,6 @@ import { Flexbox } from 'react-layout-kit';
 import Avatar from '@/features/ChatItem/components/Avatar';
 import BorderSpacing from '@/features/ChatItem/components/BorderSpacing';
 import Title from '@/features/ChatItem/components/Title';
-import { useStyles } from '@/features/ChatItem/style';
 import Usage from '@/features/Conversation/components/Extras/Usage';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
@@ -26,13 +25,85 @@ import Group from './Group';
 
 const MOBILE_AVATAR_SIZE = 32;
 
+const useStyles = createStyles(
+  ({ cx, css, token, responsive }, { variant }: { variant?: 'bubble' | 'docs' }) => {
+    const rawContainerStylish = css`
+      margin-block-end: -16px;
+      transition: background-color 100ms ${token.motionEaseOut};
+    `;
+
+    return {
+      actions: css`
+        flex: none;
+        align-self: flex-end;
+        justify-content: flex-end;
+      `,
+      container: cx(
+        variant === 'docs' && rawContainerStylish,
+        css`
+          position: relative;
+
+          width: 100%;
+          max-width: 100vw;
+          padding-block: 24px 12px;
+          padding-inline: 12px;
+
+          @supports (content-visibility: auto) {
+            contain-intrinsic-size: auto 100lvh;
+          }
+
+          time {
+            display: inline-block;
+            white-space: nowrap;
+          }
+
+          div[role='menubar'] {
+            display: flex;
+          }
+
+          time,
+          div[role='menubar'] {
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 200ms ${token.motionEaseOut};
+          }
+
+          &:hover {
+            time,
+            div[role='menubar'] {
+              pointer-events: unset;
+              opacity: 1;
+            }
+          }
+
+          ${responsive.mobile} {
+            padding-block-start: ${variant === 'docs' ? '16px' : '12px'};
+            padding-inline: 8px;
+          }
+        `,
+      ),
+      messageContent: css`
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        max-width: 100%;
+
+        ${responsive.mobile} {
+          flex-direction: column !important;
+        }
+      `,
+    };
+  },
+);
+
 interface GroupMessageProps {
   disableEditing?: boolean;
   id: string;
   index: number;
+  isLatestItem?: boolean;
 }
 
-const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing }) => {
+const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLatestItem }) => {
   const item = useChatStore(
     displayMessageSelectors.getDisplayMessageById(id),
     isEqual,
@@ -45,15 +116,7 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing }) =>
   const type = useAgentStore(agentChatConfigSelectors.displayMode);
   const variant = type === 'chat' ? 'bubble' : 'docs';
 
-  const { styles } = useStyles({
-    editing: false,
-    placement,
-    primary: false,
-    showTitle: true,
-    time: createdAt,
-    title: avatar.title,
-    variant,
-  });
+  const { styles } = useStyles({ variant });
 
   const [isInbox] = useSessionStore((s) => [sessionSelectors.isInboxSession(s)]);
   const [toggleSystemRole] = useGlobalStore((s) => [s.toggleSystemRole]);
@@ -79,7 +142,11 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing }) =>
   }, [isInbox]);
 
   return (
-    <Flexbox className={styles.container} gap={mobile ? 6 : 12}>
+    <Flexbox
+      className={styles.container}
+      gap={mobile ? 6 : 12}
+      style={isLatestItem ? { minHeight: 'calc(-300px + 100dvh)' } : undefined}
+    >
       <Flexbox gap={4} horizontal>
         <Avatar
           alt={avatar.title || 'avatar'}

package/src/features/Conversation/Messages/User/Actions/ActionsBar.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { useChatStore } from '@/store/chat';
 import { messageStateSelectors, threadSelectors } from '@/store/chat/selectors';
 
-import { VirtuosoContext } from '../../../components/VirtualizedList/VirtuosoContext';
+import { VirtuaContext } from '../../../components/VirtualizedList/VirtuosoContext';
 import { InPortalThreadContext } from '../../../context/InPortalThreadContext';
 import { useChatListActionsBar } from '../../../hooks/useChatListActionsBar';
 
@@ -76,7 +76,7 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
 
   // remove line breaks in artifact tag to make the ast transform easier
 
-  const virtuosoRef = use(VirtuosoContext);
+  const virtuaRef = use(VirtuaContext);
 
   const onActionClick = useCallback(
     async (action: ActionIconGroupEvent) => {
@@ -84,7 +84,7 @@ export const UserActionsBar = memo<UserActionsProps>(({ id, data, index }) => {
         case 'edit': {
           toggleMessageEditing(id, true);
 
-          virtuosoRef?.current?.scrollIntoView({ align: 'start', behavior: 'auto', index });
+          virtuaRef?.current?.scrollToIndex(index, { align: 'start' });
         }
       }
 

package/src/features/Conversation/Messages/index.tsx

@@ -7,8 +7,8 @@ import { ReactNode, memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { Flexbox } from 'react-layout-kit';
 
 import {
-  removeVirtuosoVisibleItem,
-  upsertVirtuosoVisibleItem,
+  removeVirtuaVisibleItem,
+  upsertVirtuaVisibleItem,
 } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { getChatStoreState, useChatStore } from '@/store/chat';
 import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
@@ -42,6 +42,7 @@ export interface ChatListItemProps {
   id: string;
   inPortalThread?: boolean;
   index: number;
+  isLatestItem?: boolean;
 }
 
 const Item = memo<ChatListItemProps>(
@@ -53,6 +54,7 @@ const Item = memo<ChatListItemProps>(
     disableEditing,
     inPortalThread = false,
     index,
+    isLatestItem,
   }) => {
     const { styles, cx } = useStyles();
     const containerRef = useRef<HTMLDivElement | null>(null);
@@ -86,13 +88,13 @@ const Item = memo<ChatListItemProps>(
           if (entry.isIntersecting) {
             const { bottom, top } = entry.intersectionRect;
 
-            upsertVirtuosoVisibleItem(index, {
+            upsertVirtuaVisibleItem(index, {
               bottom,
               ratio: entry.intersectionRatio,
               top,
             });
           } else {
-            removeVirtuosoVisibleItem(index);
+            removeVirtuaVisibleItem(index);
           }
         });
       }, options);
@@ -101,7 +103,7 @@ const Item = memo<ChatListItemProps>(
 
       return () => {
         observer.disconnect();
-        removeVirtuosoVisibleItem(index);
+        removeVirtuaVisibleItem(index);
       };
     }, [index]);
 
@@ -127,11 +129,25 @@ const Item = memo<ChatListItemProps>(
         }
 
         case 'assistant': {
-          return <AssistantMessage disableEditing={disableEditing} id={id} index={index} />;
+          return (
+            <AssistantMessage
+              disableEditing={disableEditing}
+              id={id}
+              index={index}
+              isLatestItem={isLatestItem}
+            />
+          );
         }
 
         case 'assistantGroup': {
-          return <GroupMessage disableEditing={disableEditing} id={id} index={index} />;
+          return (
+            <GroupMessage
+              disableEditing={disableEditing}
+              id={id}
+              index={index}
+              isLatestItem={isLatestItem}
+            />
+          );
         }
 
         case 'tool': {
@@ -144,7 +160,7 @@ const Item = memo<ChatListItemProps>(
       }
 
       return null;
-    }, [role, disableEditing, id, index]);
+    }, [role, disableEditing, id, index, isLatestItem]);
 
     if (!role) return;
 

package/src/features/Conversation/components/VirtualizedList/VirtuosoContext.ts

@@ -1,11 +1,11 @@
 import { RefObject, createContext } from 'react';
-import { VirtuosoHandle } from 'react-virtuoso';
+import { VListHandle } from 'virtua';
 
-export const VirtuosoContext = createContext<RefObject<VirtuosoHandle | null> | null>(null);
+export const VirtuaContext = createContext<RefObject<VListHandle | null> | null>(null);
 
-type VirtuosoRef = RefObject<VirtuosoHandle | null> | null;
+type VirtuaRef = RefObject<VListHandle | null> | null;
 
-let currentVirtuosoRef: VirtuosoRef = null;
+let currentVirtuaRef: VirtuaRef = null;
 const refListeners = new Set<() => void>();
 
 const visibleItems = new Map<number, { bottom: number; ratio: number; top: number }>();
@@ -45,14 +45,14 @@ const recalculateActiveIndex = () => {
   notifyActiveIndex(candidate ?? null);
 };
 
-export const setVirtuosoGlobalRef = (ref: VirtuosoRef) => {
-  currentVirtuosoRef = ref;
+export const setVirtuaGlobalRef = (ref: VirtuaRef) => {
+  currentVirtuaRef = ref;
   refListeners.forEach((listener) => listener());
 };
 
-export const getVirtuosoGlobalRef = () => currentVirtuosoRef;
+export const getVirtuaGlobalRef = () => currentVirtuaRef;
 
-export const subscribeVirtuosoGlobalRef = (listener: () => void) => {
+export const subscribeVirtuaGlobalRef = (listener: () => void) => {
   refListeners.add(listener);
 
   return () => {
@@ -60,7 +60,7 @@ export const subscribeVirtuosoGlobalRef = (listener: () => void) => {
   };
 };
 
-export const upsertVirtuosoVisibleItem = (
+export const upsertVirtuaVisibleItem = (
   index: number,
   metrics: { bottom: number; ratio: number; top: number },
 ) => {
@@ -68,22 +68,22 @@ export const upsertVirtuosoVisibleItem = (
   recalculateActiveIndex();
 };
 
-export const removeVirtuosoVisibleItem = (index: number) => {
+export const removeVirtuaVisibleItem = (index: number) => {
   if (!visibleItems.delete(index)) return;
 
   recalculateActiveIndex();
 };
 
-export const resetVirtuosoVisibleItems = () => {
+export const resetVirtuaVisibleItems = () => {
   if (visibleItems.size === 0 && currentActiveIndex === null) return;
 
   visibleItems.clear();
   notifyActiveIndex(null);
 };
 
-export const getVirtuosoActiveIndex = () => currentActiveIndex;
+export const getVirtuaActiveIndex = () => currentActiveIndex;
 
-export const subscribeVirtuosoActiveIndex = (listener: () => void) => {
+export const subscribeVirtuaActiveIndex = (listener: () => void) => {
   activeIndexListeners.add(listener);
 
   return () => {

package/src/features/Conversation/components/VirtualizedList/index.tsx

@@ -1,18 +1,8 @@
 'use client';
 
 import isEqual from 'fast-deep-equal';
-import {
-  ReactNode,
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { Flexbox } from 'react-layout-kit';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { ReactNode, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { VList, VListHandle } from 'virtua';
 
 import WideScreenContainer from '@/features/Conversation/components/WideScreenContainer';
 import { useChatStore } from '@/store/chat';
@@ -20,11 +10,7 @@ import { displayMessageSelectors } from '@/store/chat/selectors';
 
 import AutoScroll from '../AutoScroll';
 import SkeletonList from '../SkeletonList';
-import {
-  VirtuosoContext,
-  resetVirtuosoVisibleItems,
-  setVirtuosoGlobalRef,
-} from './VirtuosoContext';
+import { VirtuaContext, resetVirtuaVisibleItems, setVirtuaGlobalRef } from './VirtuosoContext';
 
 interface VirtualizedListProps {
   dataSource: string[];
@@ -32,78 +18,124 @@ interface VirtualizedListProps {
   mobile?: boolean;
 }
 
-const List = forwardRef(({ ...props }, ref) => {
-  return (
-    <Flexbox>
-      <WideScreenContainer id={'chatlist-list'} ref={ref} {...props} />
-    </Flexbox>
-  );
-});
-
 const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemContent }) => {
-  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const virtuaRef = useRef<VListHandle>(null);
   const prevDataLengthRef = useRef(dataSource.length);
   const [atBottom, setAtBottom] = useState(true);
   const [isScrolling, setIsScrolling] = useState(false);
+  // eslint-disable-next-line no-undef
+  const scrollEndTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const [isFirstLoading, isCurrentChatLoaded] = useChatStore((s) => [
     displayMessageSelectors.currentChatLoadingState(s),
     displayMessageSelectors.isCurrentDisplayChatLoaded(s),
   ]);
 
-  const getFollowOutput = useCallback(() => {
-    const newFollowOutput = dataSource.length > prevDataLengthRef.current ? 'auto' : false;
+  const atBottomThreshold = 200 * (mobile ? 2 : 1);
+
+  // Check if at bottom based on scroll position
+  const checkAtBottom = useCallback(() => {
+    const ref = virtuaRef.current;
+    if (!ref) return false;
+
+    const scrollOffset = ref.scrollOffset;
+    const scrollSize = ref.scrollSize;
+    const viewportSize = ref.viewportSize;
+
+    return scrollSize - scrollOffset - viewportSize <= atBottomThreshold;
+  }, [atBottomThreshold]);
+
+  // Handle scroll events
+  const handleScroll = useCallback(() => {
+    setIsScrolling(true);
+
+    // Check if at bottom
+    const isAtBottom = checkAtBottom();
+    setAtBottom(isAtBottom);
+
+    // Clear existing timer
+    if (scrollEndTimerRef.current) {
+      clearTimeout(scrollEndTimerRef.current);
+    }
+
+    // Set new timer for scroll end
+    scrollEndTimerRef.current = setTimeout(() => {
+      setIsScrolling(false);
+    }, 150);
+  }, [checkAtBottom]);
+
+  const handleScrollEnd = useCallback(() => {
+    setIsScrolling(false);
+  }, []);
+
+  // Auto scroll to bottom when new messages arrive
+  useEffect(() => {
+    const shouldScroll = dataSource.length > prevDataLengthRef.current;
     prevDataLengthRef.current = dataSource.length;
-    return newFollowOutput;
+
+    if (shouldScroll && virtuaRef.current) {
+      virtuaRef.current.scrollToIndex(dataSource.length - 2, { align: 'start', smooth: true });
+    }
   }, [dataSource.length]);
 
   const scrollToBottom = useCallback(
     (behavior: 'auto' | 'smooth' = 'smooth') => {
       if (atBottom) return;
-      if (!virtuosoRef.current) return;
-      virtuosoRef.current.scrollToIndex({ align: 'end', behavior, index: 'LAST' });
+      if (!virtuaRef.current) return;
+      virtuaRef.current.scrollToIndex(dataSource.length - 1, {
+        align: 'end',
+        smooth: behavior === 'smooth',
+      });
     },
-    [atBottom],
+    [atBottom, dataSource.length],
   );
 
-  const components = useMemo(() => ({ List }), []);
-  const computeItemKey = useCallback((index: number, item: string) => item, []);
-
   useEffect(() => {
-    setVirtuosoGlobalRef(virtuosoRef);
+    setVirtuaGlobalRef(virtuaRef);
 
     return () => {
-      setVirtuosoGlobalRef(null);
+      setVirtuaGlobalRef(null);
     };
-  }, [virtuosoRef]);
+  }, [virtuaRef]);
 
   useEffect(() => {
     return () => {
-      resetVirtuosoVisibleItems();
+      resetVirtuaVisibleItems();
+      if (scrollEndTimerRef.current) {
+        clearTimeout(scrollEndTimerRef.current);
+      }
     };
   }, []);
 
-  // overscan should be 2 times the height of the window
-  const overscan = typeof window !== 'undefined' ? window.innerHeight * 2 : 0;
+  // Scroll to bottom on initial render
+  useEffect(() => {
+    if (virtuaRef.current && dataSource.length > 0) {
+      virtuaRef.current.scrollToIndex(dataSource.length - 1, { align: 'end' });
+    }
+  }, [isCurrentChatLoaded]);
 
   // first time loading or not loaded
   if (isFirstLoading || !isCurrentChatLoaded) return <SkeletonList mobile={mobile} />;
 
   return (
-    <VirtuosoContext value={virtuosoRef}>
-      <Virtuoso
-        atBottomStateChange={setAtBottom}
-        atBottomThreshold={200 * (mobile ? 2 : 1)}
-        components={components}
-        computeItemKey={computeItemKey}
+    <VirtuaContext value={virtuaRef}>
+      <VList
+        // bufferSize should be 2 times the height of the window
+        bufferSize={typeof window !== 'undefined' ? window.innerHeight : 0}
         data={dataSource}
-        followOutput={getFollowOutput}
-        increaseViewportBy={overscan}
-        initialTopMostItemIndex={dataSource?.length - 1}
-        isScrolling={setIsScrolling}
-        itemContent={itemContent}
-        ref={virtuosoRef}
-      />
+        onScroll={handleScroll}
+        onScrollEnd={handleScrollEnd}
+        ref={virtuaRef}
+        reverse
+        style={{ height: '100%' }}
+      >
+        {(data, index) => (
+          <WideScreenContainer key={data} style={{ position: 'relative' }}>
+            {itemContent(index, data, { virtuaRef })}
+          </WideScreenContainer>
+        )}
+      </VList>
+
       <WideScreenContainer
         onChange={() => {
           if (!atBottom) return;
@@ -117,21 +149,23 @@ const VirtualizedList = memo<VirtualizedListProps>(({ mobile, dataSource, itemCo
           atBottom={atBottom}
           isScrolling={isScrolling}
           onScrollToBottom={(type) => {
-            const virtuoso = virtuosoRef.current;
+            const virtua = virtuaRef.current;
+            if (!virtua) return;
+
             switch (type) {
               case 'auto': {
-                virtuoso?.scrollToIndex({ align: 'end', behavior: 'auto', index: 'LAST' });
+                virtua.scrollToIndex(dataSource.length - 1, { align: 'end' });
                 break;
               }
               case 'click': {
-                virtuoso?.scrollToIndex({ align: 'end', behavior: 'smooth', index: 'LAST' });
+                virtua.scrollToIndex(dataSource.length - 1, { align: 'end', smooth: true });
                 break;
               }
             }
           }}
         />
       </WideScreenContainer>
-    </VirtuosoContext>
+    </VirtuaContext>
   );
 }, isEqual);
 

package/src/features/Conversation/components/WideScreenContainer/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
 import { memo, useEffect } from 'react';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 
@@ -32,15 +33,18 @@ const WideScreenContainer = memo<WideScreenContainerProps>(
     }, [wideScreen]);
 
     return (
-      <Flexbox
-        className={cx(styles.container, className)}
-        width={wideScreen ? '100%' : `min(${CONVERSATION_MIN_WIDTH}px, 100%)`}
-        {...rest}
-      >
-        {children}
+      <Flexbox width={'100%'}>
+        <Flexbox
+          className={cx(styles.container, className)}
+          width={wideScreen ? '100%' : `min(${CONVERSATION_MIN_WIDTH}px, 100%)`}
+          {...rest}
+        >
+          {children}
+        </Flexbox>
       </Flexbox>
     );
   },
+  isEqual,
 );
 
 export default WideScreenContainer;

package/src/features/Conversation/hooks/useDoubleClickEdit.ts

@@ -2,7 +2,7 @@ import { MouseEventHandler, use, useCallback } from 'react';
 
 import { useChatStore } from '@/store/chat';
 
-import { VirtuosoContext } from '../components/VirtualizedList/VirtuosoContext';
+import { VirtuaContext } from '../components/VirtualizedList/VirtuosoContext';
 
 interface UseDoubleClickEditProps {
   disableEditing?: boolean;
@@ -20,7 +20,7 @@ export const useDoubleClickEdit = ({
   index,
 }: UseDoubleClickEditProps) => {
   const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
-  const virtuosoRef = use(VirtuosoContext);
+  const virtuaRef = use(VirtuaContext);
 
   return useCallback<MouseEventHandler<HTMLDivElement>>(
     (e) => {
@@ -35,7 +35,7 @@ export const useDoubleClickEdit = ({
 
       toggleMessageEditing(id, true);
 
-      virtuosoRef?.current?.scrollIntoView({ align: 'start', behavior: 'auto', index });
+      virtuaRef?.current?.scrollToIndex(index, { align: 'start' });
     },
     [role, disableEditing],
   );

package/src/store/chat/slices/aiChat/actions/conversationLifecycle.ts

@@ -1,6 +1,6 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 // Disable the auto sort key eslint rule to make the code more logic and readable
-import { DEFAULT_AGENT_CHAT_CONFIG, INBOX_SESSION_ID } from '@lobechat/const';
+import { DEFAULT_AGENT_CHAT_CONFIG, INBOX_SESSION_ID, LOADING_FLAT } from '@lobechat/const';
 import {
   ChatImageItem,
   ChatVideoItem,
@@ -124,6 +124,14 @@ export const conversationLifecycle: StateCreator<
       imageList: tempImages.length > 0 ? tempImages : undefined,
       videoList: tempVideos.length > 0 ? tempVideos : undefined,
     });
+    get().optimisticCreateTmpMessage({
+      content: LOADING_FLAT,
+      role: 'assistant',
+      sessionId: activeId,
+      // if there is activeTopicId，then add topicId to message
+      topicId: activeTopicId,
+      threadId: activeThreadId,
+    });
     get().internal_toggleMessageLoading(true, tempId);
 
     const operationKey = messageMapKey(activeId, activeTopicId);