@lobehub/lobehub 2.0.0-next.374 → 2.0.0-next.375

package/src/features/Conversation/ChatItem/ChatItem.tsx

@@ -39,7 +39,7 @@ const ChatItem = memo<ChatItemProps>(
     disabled = false,
     id,
     style,
-    newScreen,
+    newScreenMinHeight,
     ...rest
   }) => {
     const isUser = placement === 'right';
@@ -63,15 +63,12 @@ const ChatItem = memo<ChatItemProps>(
     return (
       <Flexbox
         align={isUser ? 'flex-end' : 'flex-start'}
-        className={cx(
-          'message-wrapper',
-          styles.container,
-          newScreen && styles.newScreen,
-          className,
-        )}
+        className={cx('message-wrapper', styles.container, className)}
+        data-message-id={id}
         gap={8}
         paddingBlock={8}
         style={{
+          minHeight: newScreenMinHeight,
           paddingInlineStart: isUser ? 36 : 0,
           ...style,
         }}

package/src/features/Conversation/ChatItem/style.ts

@@ -51,8 +51,5 @@ export const styles = createStaticStyles(({ css, cssVar }) => {
 
       background: ${cssVar.colorPrimary};
     `,
-    newScreen: css`
-      min-height: calc(-300px + 100dvh);
-    `,
   };
 });

package/src/features/Conversation/ChatItem/type.ts

@@ -35,7 +35,10 @@ export interface ChatItemProps extends Omit<FlexboxProps, 'children' | 'onChange
    */
   message?: ReactNode;
   messageExtra?: ReactNode;
-  newScreen?: boolean;
+  /**
+   * Dynamic min-height for new screen effect, e.g. "calc(100dvh - 350px)"
+   */
+  newScreenMinHeight?: string;
   onAvatarClick?: () => void;
   onDoubleClick?: DivProps['onDoubleClick'];
   /**

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

@@ -58,7 +58,11 @@ const AssistantMessage = memo<AssistantMessageProps>(
     const editing = useConversationStore(messageStateSelectors.isMessageEditing(id));
     const generating = useConversationStore(messageStateSelectors.isMessageGenerating(id));
     const creating = useConversationStore(messageStateSelectors.isMessageCreating(id));
-    const newScreen = useNewScreen({ creating: creating || generating, isLatestItem });
+    const { minHeight } = useNewScreen({
+      creating: creating || generating,
+      isLatestItem,
+      messageId: id,
+    });
 
     const errorContent = useErrorContent(error);
 
@@ -114,7 +118,7 @@ const AssistantMessage = memo<AssistantMessageProps>(
             usage={usage! || metadata}
           />
         }
-        newScreen={newScreen}
+        newScreenMinHeight={minHeight}
         onDoubleClick={onDoubleClick}
         onMouseEnter={onMouseEnter}
         placement={'left'}

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

@@ -2,13 +2,13 @@
 
 import type { AssistantContentBlock } from '@lobechat/types';
 import isEqual from 'fast-deep-equal';
-import dynamic from '@/libs/next/dynamic';
 import { type MouseEventHandler, Suspense, memo, useCallback, useMemo } from 'react';
 
 import { MESSAGE_ACTION_BAR_PORTAL_ATTRIBUTES } from '@/const/messageActionPortal';
 import { ChatItem } from '@/features/Conversation/ChatItem';
 import { useNewScreen } from '@/features/Conversation/Messages/components/useNewScreen';
 import { useOpenChatSettings } from '@/hooks/useInterceptingRoutes';
+import dynamic from '@/libs/next/dynamic';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
 import { useGlobalStore } from '@/store/global';
@@ -68,7 +68,7 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat
   // Get editing state from ConversationStore
   const editing = useConversationStore(messageStateSelectors.isMessageEditing(contentId || ''));
   const creating = useConversationStore(messageStateSelectors.isMessageCreating(id));
-  const newScreen = useNewScreen({ creating, isLatestItem });
+  const { minHeight } = useNewScreen({ creating, isLatestItem, messageId: id });
 
   const setMessageItemActionElementPortialContext = useSetMessageItemActionElementPortialContext();
   const setMessageItemActionTypeContext = useSetMessageItemActionTypeContext();
@@ -113,7 +113,7 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat
         )
       }
       avatar={avatar}
-      newScreen={newScreen}
+      newScreenMinHeight={minHeight}
       onAvatarClick={onAvatarClick}
       onMouseEnter={onMouseEnter}
       placement={'left'}

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

@@ -56,7 +56,11 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat
   // Get editing state from ConversationStore
   const creating = useConversationStore(messageStateSelectors.isMessageCreating(id));
   const generating = useConversationStore(messageStateSelectors.isMessageGenerating(id));
-  const newScreen = useNewScreen({ creating: creating || generating, isLatestItem });
+  const { minHeight } = useNewScreen({
+    creating: creating || generating,
+    isLatestItem,
+    messageId: id,
+  });
 
   const setMessageItemActionElementPortialContext = useSetMessageItemActionElementPortialContext();
   const setMessageItemActionTypeContext = useSetMessageItemActionTypeContext();
@@ -98,7 +102,7 @@ const GroupMessage = memo<GroupMessageProps>(({ id, index, disableEditing, isLat
           memberAvatars={memberAvatars}
         />
       )}
-      newScreen={newScreen}
+      newScreenMinHeight={minHeight}
       onMouseEnter={onMouseEnter}
       placement={'left'}
       showTitle

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

@@ -44,7 +44,11 @@ const TaskMessage = memo<TaskMessageProps>(({ id, index, disableEditing, isLates
   const editing = useConversationStore(messageStateSelectors.isMessageEditing(id));
   const generating = useConversationStore(messageStateSelectors.isMessageGenerating(id));
   const creating = useConversationStore(messageStateSelectors.isMessageCreating(id));
-  const newScreen = useNewScreen({ creating: generating || creating, isLatestItem });
+  const { minHeight } = useNewScreen({
+    creating: generating || creating,
+    isLatestItem,
+    messageId: id,
+  });
 
   const errorContent = useErrorContent(error);
 
@@ -84,7 +88,7 @@ const TaskMessage = memo<TaskMessageProps>(({ id, index, disableEditing, isLates
       id={id}
       loading={generating}
       message={message}
-      newScreen={newScreen}
+      newScreenMinHeight={minHeight}
       onAvatarClick={onAvatarClick}
       onDoubleClick={onDoubleClick}
       placement={'left'}

package/src/features/Conversation/Messages/components/useNewScreen.test.ts

@@ -0,0 +1,331 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useNewScreen } from './useNewScreen';
+
+// Mock useConversationStore
+const mockGetViewportSize = vi.fn();
+vi.mock('../../store', () => ({
+  useConversationStore: vi.fn((selector) =>
+    selector({
+      virtuaScrollMethods: {
+        getViewportSize: mockGetViewportSize,
+      },
+    }),
+  ),
+}));
+
+describe('useNewScreen', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetViewportSize.mockReturnValue(800);
+  });
+
+  describe('when not the latest item', () => {
+    it('should return undefined minHeight', () => {
+      const { result } = renderHook(() =>
+        useNewScreen({
+          creating: true,
+          isLatestItem: false,
+          messageId: 'msg-1',
+        }),
+      );
+
+      expect(result.current.minHeight).toBeUndefined();
+    });
+
+    it('should clear minHeight when becoming not the latest item', () => {
+      const { result, rerender } = renderHook(
+        ({ isLatestItem }) =>
+          useNewScreen({
+            creating: true,
+            isLatestItem,
+            messageId: 'msg-1',
+          }),
+        {
+          initialProps: { isLatestItem: true },
+        },
+      );
+
+      // Initially, it will use fallback since no DOM elements exist
+      expect(result.current.minHeight).toBeDefined();
+
+      // When it's no longer the latest item
+      rerender({ isLatestItem: false });
+
+      expect(result.current.minHeight).toBeUndefined();
+    });
+  });
+
+  describe('when latest item but not creating', () => {
+    it('should not update minHeight (preserve existing value)', () => {
+      const { result, rerender } = renderHook(
+        ({ creating }) =>
+          useNewScreen({
+            creating,
+            isLatestItem: true,
+            messageId: 'msg-1',
+          }),
+        {
+          initialProps: { creating: true },
+        },
+      );
+
+      // Initially sets minHeight (fallback)
+      const initialMinHeight = result.current.minHeight;
+      expect(initialMinHeight).toBeDefined();
+
+      // When creating ends, should preserve the minHeight
+      rerender({ creating: false });
+
+      expect(result.current.minHeight).toBe(initialMinHeight);
+    });
+  });
+
+  describe('when latest item and creating', () => {
+    it('should calculate minHeight based on viewport and previous message height', () => {
+      // Setup DOM mocks
+      const mockPrevMessageEl = {
+        getBoundingClientRect: () => ({ height: 150 }),
+      };
+      const mockPrevWrapper = {
+        querySelector: vi.fn().mockReturnValue(mockPrevMessageEl),
+        getBoundingClientRect: () => ({ height: 150 }),
+      };
+      const mockCurrentWrapper = {
+        dataset: { index: '1' },
+      };
+      const mockMessageEl = {
+        closest: vi.fn().mockReturnValue(mockCurrentWrapper),
+      };
+
+      vi.spyOn(document, 'querySelector').mockImplementation((selector: string) => {
+        if (selector === '[data-message-id="msg-1"]') {
+          return mockMessageEl as unknown as Element;
+        }
+        if (selector === '[data-index="0"]') {
+          return mockPrevWrapper as unknown as Element;
+        }
+        return null;
+      });
+
+      mockGetViewportSize.mockReturnValue(800);
+
+      const { result } = renderHook(() =>
+        useNewScreen({
+          creating: true,
+          isLatestItem: true,
+          messageId: 'msg-1',
+        }),
+      );
+
+      // minHeight = viewportHeight - prevHeight - EXTRA_PADDING = 800 - 150 - 0 = 650
+      expect(result.current.minHeight).toBe('650px');
+    });
+
+    it('should use fallback height when previous message element not found', () => {
+      // Setup DOM mocks - no previous element
+      const mockCurrentWrapper = {
+        dataset: { index: '0' },
+        querySelector: vi.fn().mockReturnValue(null),
+      };
+      const mockMessageEl = {
+        closest: vi.fn().mockReturnValue(mockCurrentWrapper),
+      };
+
+      vi.spyOn(document, 'querySelector').mockImplementation((selector: string) => {
+        if (selector === '[data-message-id="msg-1"]') {
+          return mockMessageEl as unknown as Element;
+        }
+        return null;
+      });
+
+      mockGetViewportSize.mockReturnValue(800);
+
+      const { result } = renderHook(() =>
+        useNewScreen({
+          creating: true,
+          isLatestItem: true,
+          messageId: 'msg-1',
+        }),
+      );
+
+      // fallback: viewportHeight - DEFAULT_USER_MESSAGE_HEIGHT - EXTRA_PADDING = 800 - 200 - 0 = 600
+      expect(result.current.minHeight).toBe('600px');
+    });
+
+    it('should return undefined when calculated height is less than or equal to 0', () => {
+      // Setup DOM mocks with very large previous message
+      const mockPrevMessageEl = {
+        getBoundingClientRect: () => ({ height: 900 }), // Larger than viewport
+      };
+      const mockPrevWrapper = {
+        querySelector: vi.fn().mockReturnValue(mockPrevMessageEl),
+        getBoundingClientRect: () => ({ height: 900 }),
+      };
+      const mockCurrentWrapper = {
+        dataset: { index: '1' },
+      };
+      const mockMessageEl = {
+        closest: vi.fn().mockReturnValue(mockCurrentWrapper),
+      };
+
+      vi.spyOn(document, 'querySelector').mockImplementation((selector: string) => {
+        if (selector === '[data-message-id="msg-1"]') {
+          return mockMessageEl as unknown as Element;
+        }
+        if (selector === '[data-index="0"]') {
+          return mockPrevWrapper as unknown as Element;
+        }
+        return null;
+      });
+
+      mockGetViewportSize.mockReturnValue(800);
+
+      const { result } = renderHook(() =>
+        useNewScreen({
+          creating: true,
+          isLatestItem: true,
+          messageId: 'msg-1',
+        }),
+      );
+
+      // minHeight = 800 - 900 - 0 = -100, should be undefined
+      expect(result.current.minHeight).toBeUndefined();
+    });
+
+    it('should use window.innerHeight when virtuaScrollMethods is not available', () => {
+      // Reset mock to return undefined for virtuaScrollMethods
+      vi.mocked(mockGetViewportSize).mockReturnValue(undefined as unknown as number);
+
+      // Mock window.innerHeight
+      Object.defineProperty(window, 'innerHeight', { value: 768, writable: true });
+
+      // Setup DOM mocks - no previous element (fallback case)
+      const mockCurrentWrapper = {
+        dataset: { index: '0' },
+        querySelector: vi.fn().mockReturnValue(null),
+      };
+      const mockMessageEl = {
+        closest: vi.fn().mockReturnValue(mockCurrentWrapper),
+      };
+
+      vi.spyOn(document, 'querySelector').mockImplementation((selector: string) => {
+        if (selector === '[data-message-id="msg-1"]') {
+          return mockMessageEl as unknown as Element;
+        }
+        return null;
+      });
+
+      const { result } = renderHook(() =>
+        useNewScreen({
+          creating: true,
+          isLatestItem: true,
+          messageId: 'msg-1',
+        }),
+      );
+
+      // fallback: window.innerHeight - DEFAULT_USER_MESSAGE_HEIGHT = 768 - 200 = 568
+      expect(result.current.minHeight).toBe('568px');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle message element not found', () => {
+      vi.spyOn(document, 'querySelector').mockReturnValue(null);
+
+      const { result } = renderHook(() =>
+        useNewScreen({
+          creating: true,
+          isLatestItem: true,
+          messageId: 'non-existent',
+        }),
+      );
+
+      // Should use fallback
+      expect(result.current.minHeight).toBeDefined();
+    });
+
+    it('should handle negative prevIndex', () => {
+      const mockCurrentWrapper = {
+        dataset: { index: '0' }, // First item, prevIndex would be -1
+        querySelector: vi.fn().mockReturnValue(null),
+      };
+      const mockMessageEl = {
+        closest: vi.fn().mockReturnValue(mockCurrentWrapper),
+      };
+
+      vi.spyOn(document, 'querySelector').mockImplementation((selector: string) => {
+        if (selector === '[data-message-id="msg-1"]') {
+          return mockMessageEl as unknown as Element;
+        }
+        // Should not query for [data-index="-1"]
+        if (selector === '[data-index="-1"]') {
+          throw new Error('Should not query for negative index');
+        }
+        return null;
+      });
+
+      mockGetViewportSize.mockReturnValue(800);
+
+      const { result } = renderHook(() =>
+        useNewScreen({
+          creating: true,
+          isLatestItem: true,
+          messageId: 'msg-1',
+        }),
+      );
+
+      // Should use fallback without throwing
+      expect(result.current.minHeight).toBe('600px');
+    });
+
+    it('should recalculate when messageId changes', () => {
+      const mockPrevMessageEl = {
+        getBoundingClientRect: () => ({ height: 150 }),
+      };
+      const mockPrevWrapper = {
+        querySelector: vi.fn().mockReturnValue(mockPrevMessageEl),
+        getBoundingClientRect: () => ({ height: 150 }),
+      };
+      const mockCurrentWrapper = {
+        dataset: { index: '1' },
+      };
+      const mockMessageEl = {
+        closest: vi.fn().mockReturnValue(mockCurrentWrapper),
+      };
+
+      vi.spyOn(document, 'querySelector').mockImplementation((selector: string) => {
+        if (selector.includes('data-message-id')) {
+          return mockMessageEl as unknown as Element;
+        }
+        if (selector === '[data-index="0"]') {
+          return mockPrevWrapper as unknown as Element;
+        }
+        return null;
+      });
+
+      mockGetViewportSize.mockReturnValue(800);
+
+      const { result, rerender } = renderHook(
+        ({ messageId }) =>
+          useNewScreen({
+            creating: true,
+            isLatestItem: true,
+            messageId,
+          }),
+        {
+          initialProps: { messageId: 'msg-1' },
+        },
+      );
+
+      expect(result.current.minHeight).toBe('650px');
+
+      // Change messageId - should recalculate
+      rerender({ messageId: 'msg-2' });
+
+      // Still the same value since mocks return same values
+      expect(result.current.minHeight).toBe('650px');
+    });
+  });
+});

package/src/features/Conversation/Messages/components/useNewScreen.ts

@@ -1,16 +1,91 @@
+import debug from 'debug';
 import { useEffect, useState } from 'react';
 
+import { useConversationStore } from '../../store';
+
+const log = debug('lobe-render:Conversation:newScreen');
+
+/**
+ * Extra padding if needed
+ */
+const EXTRA_PADDING = 0;
+
+/**
+ * Default user message height (fallback)
+ */
+const DEFAULT_USER_MESSAGE_HEIGHT = 200;
+
 export const useNewScreen = ({
   isLatestItem,
   creating,
+  messageId,
 }: {
   creating?: boolean;
   isLatestItem?: boolean;
+  messageId: string;
 }) => {
-  const [newScreen, setNewScreen] = useState(false);
+  const [minHeight, setMinHeight] = useState<string | undefined>(undefined);
+  const virtuaScrollMethods = useConversationStore((s) => s.virtuaScrollMethods);
+
   useEffect(() => {
-    if (!isLatestItem) setNewScreen(false);
-    if (isLatestItem && creating) setNewScreen(true);
-  }, [isLatestItem, creating]);
-  return newScreen;
+    // Clear minHeight when no longer the latest item
+    if (!isLatestItem) {
+      setMinHeight(undefined);
+      return;
+    }
+
+    // Only calculate and set minHeight when creating, preserve after creating ends
+    if (!creating) {
+      return;
+    }
+
+    // Find current message element by data-message-id
+    const messageEl = document.querySelector(`[data-message-id="${messageId}"]`);
+    // Find VList item container (has data-index attribute)
+    const currentWrapper = messageEl?.closest('[data-index]') as HTMLElement | null;
+    // Get current index
+    const currentIndex = currentWrapper?.dataset.index;
+
+    // Find previous VList item by data-index (avoid sibling not existing due to virtualization)
+    const prevIndex = currentIndex ? Number(currentIndex) - 1 : -1;
+    const prevWrapper =
+      prevIndex >= 0 ? document.querySelector(`[data-index="${prevIndex}"]`) : null;
+    // Get previous message's .message-wrapper
+    const prevMessageEl = prevWrapper?.querySelector('.message-wrapper');
+
+    // Get real viewport height from VList
+    const viewportHeight = virtuaScrollMethods?.getViewportSize?.() || window.innerHeight;
+
+    if (prevMessageEl) {
+      const prevHeight = prevMessageEl.getBoundingClientRect().height;
+
+      // Goal: userMessage at top, so assistantMinHeight = viewportHeight - userMessageHeight
+      const calculatedHeight = viewportHeight - prevHeight - EXTRA_PADDING;
+
+      log(
+        'calculate minHeight: messageId=%s, index=%s, viewportHeight=%d, prevHeight=%d, result=%d',
+        messageId,
+        currentIndex,
+        viewportHeight,
+        prevHeight,
+        calculatedHeight,
+      );
+
+      // Don't set minHeight if calculated height <= 0
+      setMinHeight(calculatedHeight > 0 ? `${calculatedHeight}px` : undefined);
+    } else {
+      // Fallback: use default value
+      const fallbackHeight = viewportHeight - DEFAULT_USER_MESSAGE_HEIGHT - EXTRA_PADDING;
+      log(
+        'fallback minHeight: messageId=%s, viewportHeight=%d, fallbackHeight=%d',
+        messageId,
+        viewportHeight,
+        fallbackHeight,
+      );
+      // Don't set minHeight if calculated height <= 0
+      setMinHeight(fallbackHeight > 0 ? `${fallbackHeight}px` : undefined);
+    }
+  }, [isLatestItem, creating, messageId, virtuaScrollMethods]);
+
+  return { minHeight };
 };

package/src/locales/default/chat.ts

@@ -48,7 +48,7 @@ export default {
   'confirmRemoveChatGroupItemAlert':
     'This Group will be deleted. Group-specific assistants will also be deleted, while external assistants will not be affected.',
   'confirmRemoveGroupItemAlert':
-    'You are about to delete this group. After deletion, its agents will be moved to the default list. Please confirm your action.',
+    'You are about to delete this category. After deletion, its agents will be moved to the default list. Please confirm your action.',
   'confirmRemoveGroupSuccess': 'Group deleted successfully',
   'confirmRemoveSessionItemAlert':
     'You are about to delete this agent. Once deleted, it cannot be retrieved. Please confirm your action.',
@@ -267,29 +267,29 @@ export default {
   'searchAgents': 'Search agents...',
   'selectedAgents': 'Selected agents',
   'sendPlaceholder': 'Ask, create, or start a task, <hotkey><hotkey/>',
-  'sessionGroup.config': 'Group Management',
+  'sessionGroup.config': 'Category Management',
   'sessionGroup.confirmRemoveGroupAlert':
-    'This group is about to be deleted. After deletion, the agents in this group will be moved to the default list. Please confirm your operation.',
+    'This category is about to be deleted. After deletion, the agents in this category will be moved to the default list. Please confirm your operation.',
   'sessionGroup.createAgentSuccess': 'Agent created successfully',
-  'sessionGroup.createGroup': 'Add New Group',
-  'sessionGroup.createGroupFailed': 'Failed to create group chat',
-  'sessionGroup.createGroupSuccess': 'Group chat created successfully',
+  'sessionGroup.createGroup': 'Add New Category',
+  'sessionGroup.createGroupFailed': 'Failed to create category',
+  'sessionGroup.createGroupSuccess': 'Category created successfully',
   'sessionGroup.createSuccess': 'Created successfully',
   'sessionGroup.creatingAgent': 'Creating agent...',
-  'sessionGroup.groupName': 'Group Name',
-  'sessionGroup.inputPlaceholder': 'Please enter group name...',
-  'sessionGroup.moveGroup': 'Move to Group',
-  'sessionGroup.newGroup': 'New Group',
+  'sessionGroup.groupName': 'Category Name',
+  'sessionGroup.inputPlaceholder': 'Please enter category name...',
+  'sessionGroup.moveGroup': 'Move to Category',
+  'sessionGroup.newGroup': 'New Category',
   'sessionGroup.noAvailableAgents': 'No available agents',
   'sessionGroup.noMatchingAgents': 'No matching agents found',
   'sessionGroup.noSelectedAgents': 'Please select agents',
-  'sessionGroup.rename': 'Rename Group',
+  'sessionGroup.rename': 'Rename Category',
   'sessionGroup.renameSuccess': 'Renamed successfully',
   'sessionGroup.searchAgents': 'Search agents',
   'sessionGroup.selectedAgents': 'Selected agents ({{count}})',
   'sessionGroup.sortSuccess': 'Reorder successful',
-  'sessionGroup.sorting': 'Group sorting updating...',
-  'sessionGroup.tooLong': 'Group name length should be between 1-20',
+  'sessionGroup.sorting': 'Category sorting updating...',
+  'sessionGroup.tooLong': 'Category name length should be between 1-20',
   'shareModal.copy': 'Copy',
   'shareModal.copyLink': 'Copy Link',
   'shareModal.copyLinkSuccess': 'Link copied',