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

package/src/features/Conversation/Messages/Group/Actions/WithContentId.tsx

@@ -6,7 +6,7 @@ import { memo, use, useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import ShareMessageModal from '@/features/Conversation/components/ShareMessageModal';
-import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { VirtuaContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useChatStore } from '@/store/chat';
 import { messageStateSelectors, threadSelectors } from '@/store/chat/selectors';
 import { useSessionStore } from '@/store/session';
@@ -24,19 +24,30 @@ interface GroupActionsProps {
 
 const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }) => {
   const { tools } = data;
-  const [isThreadMode, hasThread, isRegenerating] = useChatStore((s) => [
+  const [isThreadMode, hasThread, isRegenerating, isCollapsed] = useChatStore((s) => [
     !!s.activeThreadId,
     threadSelectors.hasThreadBySourceMsgId(id)(s),
     messageStateSelectors.isMessageRegenerating(id)(s),
+    messageStateSelectors.isMessageCollapsed(id)(s),
   ]);
   const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
   const [showShareModal, setShareModal] = useState(false);
 
-  const { edit, delAndRegenerate, regenerate, copy, divider, del, branching, share } =
-    useChatListActionsBar({
-      hasThread,
-      isRegenerating,
-    });
+  const {
+    edit,
+    delAndRegenerate,
+    regenerate,
+    copy,
+    divider,
+    del,
+    branching,
+    share,
+    expand,
+    collapse,
+  } = useChatListActionsBar({
+    hasThread,
+    isRegenerating,
+  });
 
   const hasTools = !!tools;
 
@@ -64,6 +75,7 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
     resendThreadMessage,
     delAndResendThreadMessage,
     toggleMessageEditing,
+    toggleMessageCollapsed,
   ] = useChatStore((s) => [
     s.deleteMessage,
     s.regenerateAssistantMessage,
@@ -74,9 +86,10 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
     s.resendThreadMessage,
     s.delAndResendThreadMessage,
     s.toggleMessageEditing,
+    s.toggleMessageCollapsed,
   ]);
   const { message } = App.useApp();
-  const virtuosoRef = use(VirtuosoContext);
+  const virtuaRef = use(VirtuaContext);
 
   const onActionClick = useCallback(
     async (action: ActionIconGroupEvent) => {
@@ -84,7 +97,7 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
         case 'edit': {
           toggleMessageEditing(id, true);
 
-          virtuosoRef?.current?.scrollIntoView({ align: 'start', behavior: 'auto', index });
+          virtuaRef?.current?.scrollToIndex(index, { align: 'start' });
         }
       }
       if (!data) return;
@@ -133,6 +146,12 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
           setShareModal(true);
           break;
         }
+
+        case 'collapse':
+        case 'expand': {
+          toggleMessageCollapsed(id);
+          break;
+        }
       }
 
       if (action.keyPath.at(-1) === 'translate') {
@@ -146,6 +165,8 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
     [data, topic],
   );
 
+  const collapseAction = isCollapsed ? expand : collapse;
+
   return (
     <>
       <ActionIconGroup
@@ -154,6 +175,7 @@ const WithContentId = memo<GroupActionsProps>(({ id, data, index, contentBlock }
           items: [
             edit,
             copy,
+            collapseAction,
             divider,
             share,
             divider,

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

@@ -0,0 +1,37 @@
+import { Button, Markdown, MaskShadow } from '@lobehub/ui';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+
+interface CollapsedMessageProps {
+  content: string;
+  id: string;
+}
+
+export const CollapsedMessage = memo<CollapsedMessageProps>(({ id, content }) => {
+  const { t } = useTranslation('chat');
+  const toggleMessageCollapsed = useChatStore((s) => s.toggleMessageCollapsed);
+
+  return (
+    <Flexbox>
+      <MaskShadow>
+        <Markdown variant={'chat'}>{content?.slice(0, 300)}</Markdown>
+      </MaskShadow>
+      <Flexbox padding={4}>
+        <Button
+          block
+          color={'default'}
+          onClick={() => {
+            toggleMessageCollapsed(id, false);
+          }}
+          size={'small'}
+          variant={'filled'}
+        >
+          {t('chatList.expandMessage')}
+        </Button>
+      </Flexbox>
+    </Flexbox>
+  );
+});

package/src/features/Conversation/Messages/Group/{GroupChildren.tsx → Group.tsx}

@@ -4,6 +4,10 @@ import isEqual from 'fast-deep-equal';
 import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { CollapsedMessage } from '@/features/Conversation/Messages/Group/CollapsedMessage';
+import { useChatStore } from '@/store/chat';
+import { messageStateSelectors } from '@/store/chat/slices/message/selectors';
+
 import { GroupMessageContext } from './GroupContext';
 import GroupItem from './GroupItem';
 
@@ -19,18 +23,28 @@ const useStyles = createStyles(({ css }) => {
 
 interface GroupChildrenProps {
   blocks: AssistantContentBlock[];
+  content?: string;
   contentId?: string;
   disableEditing?: boolean;
   id: string;
   messageIndex: number;
 }
 
-const GroupChildren = memo<GroupChildrenProps>(
-  ({ blocks, contentId, disableEditing, messageIndex, id }) => {
+const Group = memo<GroupChildrenProps>(
+  ({ blocks, contentId, disableEditing, messageIndex, id, content }) => {
     const { styles } = useStyles();
-
+    const [isCollapsed] = useChatStore((s) => [messageStateSelectors.isMessageCollapsed(id)(s)]);
     const contextValue = useMemo(() => ({ assistantGroupId: id }), [id]);
 
+    if (isCollapsed) {
+      return (
+        content && (
+          <Flexbox>
+            <CollapsedMessage content={content} id={id} />
+          </Flexbox>
+        )
+      );
+    }
     return (
       <GroupMessageContext value={contextValue}>
         <Flexbox className={styles.container} gap={8}>
@@ -53,4 +67,4 @@ const GroupChildren = memo<GroupChildrenProps>(
   isEqual,
 );
 
-export default GroupChildren;
+export default Group;

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

@@ -4,7 +4,7 @@ import { memo, use } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import { ContentBlock } from '@/features/Conversation/Messages/Group/ContentBlock';
-import { VirtuosoContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
+import { VirtuaContext } from '@/features/Conversation/components/VirtualizedList/VirtuosoContext';
 import { useChatStore } from '@/store/chat';
 
 interface GroupItemProps extends AssistantContentBlock {
@@ -17,7 +17,7 @@ interface GroupItemProps extends AssistantContentBlock {
 const GroupItem = memo<GroupItemProps>(
   ({ contentId, messageIndex, index, disableEditing, error, ...item }) => {
     const [toggleMessageEditing] = useChatStore((s) => [s.toggleMessageEditing]);
-    const virtuosoRef = use(VirtuosoContext);
+    const virtuaRef = use(VirtuaContext);
 
     return item.id === contentId ? (
       <Flexbox
@@ -25,10 +25,8 @@ const GroupItem = memo<GroupItemProps>(
           if (disableEditing || error || !e.altKey) return;
 
           toggleMessageEditing(item.id, true);
-          virtuosoRef?.current?.scrollIntoView({
+          virtuaRef?.current?.scrollToIndex(messageIndex, {
             align: 'start',
-            behavior: 'auto',
-            index: messageIndex,
           });
         }}
       >

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,33 +9,101 @@ 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 GroupChildren from '@/features/Conversation/Messages/Group/GroupChildren';
 import Usage from '@/features/Conversation/components/Extras/Usage';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
 import { useAgentStore } from '@/store/agent';
 import { agentChatConfigSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import {
-  displayMessageSelectors,
-  messageStateSelectors,
-} from '@/store/chat/slices/message/selectors';
+import { displayMessageSelectors, messageStateSelectors } from '@/store/chat/selectors';
 import { useGlobalStore } from '@/store/global';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 
 import { GroupActionsBar } from './Actions';
 import EditState from './EditState';
+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,
@@ -48,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]);
@@ -82,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'}
@@ -111,8 +175,9 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing }) =>
           width={'100%'}
         >
           {children && children.length > 0 && (
-            <GroupChildren
+            <Group
               blocks={children}
+              content={lastAssistantMsg?.content}
               contentId={contentId}
               disableEditing={disableEditing}
               id={id}

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 () => {