@lobehub/lobehub 2.0.0-next.187 → 2.0.0-next.189

package/src/features/Conversation/hooks/useChatItemContextMenu.tsx

@@ -1,49 +1,338 @@
-import { type ActionIconGroupEvent } from '@lobehub/ui';
-import type React from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  type ActionIconGroupEvent,
+  type ActionIconGroupItemType,
+  type DropdownItem,
+  type GenericItemType,
+  createRawModal,
+  showContextMenu,
+} from '@lobehub/ui';
+import { App } from 'antd';
+import isEqual from 'fast-deep-equal';
+import type { MouseEvent, ReactNode } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { MSG_CONTENT_CLASSNAME } from '@/features/Conversation/ChatItem/components/MessageContent';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
 import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
 
-interface ContextMenuState {
-  position: { x: number; y: number };
-  selectedText?: string;
-  visible: boolean;
+import ShareMessageModal from '../components/ShareMessageModal';
+import {
+  dataSelectors,
+  messageStateSelectors,
+  useConversationStore,
+  useConversationStoreApi,
+} from '../store';
+import { useChatListActionsBar } from './useChatListActionsBar';
+
+interface ActionMenuItem extends ActionIconGroupItemType {
+  children?: { key: string; label: ReactNode }[];
+  disable?: boolean;
+  popupClassName?: string;
 }
 
+type MenuItem = ActionMenuItem | { type: 'divider' };
+type ContextMenuEvent = ActionIconGroupEvent & { selectedText?: string };
+
 interface UseChatItemContextMenuProps {
   editing?: boolean;
   id: string;
-  onActionClick: (action: ActionIconGroupEvent) => void;
+  inPortalThread: boolean;
+  topic?: string | null;
 }
 
 export const useChatItemContextMenu = ({
-  onActionClick,
   editing,
-}: Omit<UseChatItemContextMenuProps, 'id'>) => {
+  id,
+  inPortalThread,
+  topic,
+}: UseChatItemContextMenuProps) => {
   const contextMenuMode = useUserStore(userGeneralSettingsSelectors.contextMenuMode);
+  const { message } = App.useApp();
+  const { t } = useTranslation('common');
+
+  const selectedTextRef = useRef<string | undefined>(undefined);
+
+  const storeApi = useConversationStoreApi();
+
+  const [role, error, isCollapsed, hasThread, isRegenerating] = useConversationStore((s) => {
+    const item = dataSelectors.getDisplayMessageById(id)(s);
+    return [
+      item?.role,
+      item?.error,
+      messageStateSelectors.isMessageCollapsed(id)(s),
+      messageStateSelectors.hasThreadBySourceMsgId(id)(s),
+      messageStateSelectors.isMessageRegenerating(id)(s),
+    ];
+  }, isEqual);
+
+  const isThreadMode = useConversationStore(messageStateSelectors.isThreadMode);
+  const isGroupSession = useSessionStore(sessionSelectors.isCurrentSessionGroupSession);
+  const actionsBar = useChatListActionsBar({ hasThread, isRegenerating });
+  const inThread = isThreadMode || inPortalThread;
+
+  const [
+    toggleMessageEditing,
+    deleteMessage,
+    regenerateUserMessage,
+    regenerateAssistantMessage,
+    translateMessage,
+    ttsMessage,
+    delAndRegenerateMessage,
+    copyMessage,
+    openThreadCreator,
+    resendThreadMessage,
+    delAndResendThreadMessage,
+    toggleMessageCollapsed,
+  ] = useConversationStore((s) => [
+    s.toggleMessageEditing,
+    s.deleteMessage,
+    s.regenerateUserMessage,
+    s.regenerateAssistantMessage,
+    s.translateMessage,
+    s.ttsMessage,
+    s.delAndRegenerateMessage,
+    s.copyMessage,
+    s.openThreadCreator,
+    s.resendThreadMessage,
+    s.delAndResendThreadMessage,
+    s.toggleMessageCollapsed,
+  ]);
+
+  const getMessage = useCallback(
+    () => dataSelectors.getDisplayMessageById(id)(storeApi.getState()),
+    [id, storeApi],
+  );
+
+  const menuItems = useMemo<MenuItem[]>(() => {
+    if (!role) return [];
+
+    const {
+      branching,
+      collapse,
+      copy,
+      del,
+      delAndRegenerate,
+      divider,
+      edit,
+      expand,
+      regenerate,
+      share,
+      translate,
+      tts,
+    } = actionsBar;
+
+    if (role === 'assistant') {
+      if (error) {
+        return [edit, copy, divider, del, divider, regenerate].filter(Boolean) as MenuItem[];
+      }
+
+      const collapseAction = isCollapsed ? expand : collapse;
+      const list: MenuItem[] = [edit, copy, collapseAction];
+
+      if (!inThread && !isGroupSession) list.push(branching);
+
+      list.push(
+        divider,
+        tts,
+        translate,
+        divider,
+        share,
+        divider,
+        regenerate,
+        delAndRegenerate,
+        del,
+      );
+
+      return list.filter(Boolean) as MenuItem[];
+    }
+
+    if (role === 'assistantGroup') {
+      if (error) {
+        return [edit, copy, divider, del, divider, regenerate].filter(Boolean) as MenuItem[];
+      }
+
+      const collapseAction = isCollapsed ? expand : collapse;
+      const list: MenuItem[] = [
+        edit,
+        copy,
+        collapseAction,
+        divider,
+        share,
+        divider,
+        regenerate,
+        del,
+      ];
+
+      return list.filter(Boolean) as MenuItem[];
+    }
+
+    if (role === 'user') {
+      const list: MenuItem[] = [edit, copy];
+
+      if (!inThread) list.push(branching);
+
+      list.push(divider, tts, translate, divider, regenerate, del);
+
+      return list.filter(Boolean) as MenuItem[];
+    }
+
+    return [];
+  }, [actionsBar, error, inThread, isCollapsed, isGroupSession, role]);
 
-  const [contextMenuState, setContextMenuState] = useState<ContextMenuState>({
-    position: { x: 0, y: 0 },
-    visible: false,
-  });
+  const handleShare = useCallback(() => {
+    const item = getMessage();
+    if (!item || item.role !== 'assistant') return;
 
-  const containerRef = useRef<HTMLDivElement>(null);
+    createRawModal(
+      ShareMessageModal,
+      {
+        message: item,
+      },
+      { onCloseKey: 'onCancel', openKey: 'open' },
+    );
+  }, [getMessage]);
+
+  const handleAction = useCallback(
+    async (action: ContextMenuEvent) => {
+      const item = getMessage();
+      if (!item) return;
+
+      switch (action.key) {
+        case 'edit': {
+          toggleMessageEditing(id, true);
+          break;
+        }
+        case 'copy': {
+          await copyMessage(id, item.content);
+          message.success(t('copySuccess'));
+          break;
+        }
+        case 'expand':
+        case 'collapse': {
+          toggleMessageCollapsed(id);
+          break;
+        }
+        case 'branching': {
+          if (!topic) {
+            message.warning(t('branchingRequiresSavedTopic'));
+            break;
+          }
+          openThreadCreator(id);
+          break;
+        }
+        case 'del': {
+          deleteMessage(id);
+          break;
+        }
+        case 'regenerate': {
+          if (inPortalThread) {
+            resendThreadMessage(id);
+          } else if (role === 'assistant') {
+            regenerateAssistantMessage(id);
+          } else {
+            regenerateUserMessage(id);
+          }
+
+          if (item.error) deleteMessage(id);
+          break;
+        }
+        case 'delAndRegenerate': {
+          if (inPortalThread) {
+            delAndResendThreadMessage(id);
+          } else {
+            delAndRegenerateMessage(id);
+          }
+          break;
+        }
+        case 'tts': {
+          ttsMessage(id);
+          break;
+        }
+        case 'share': {
+          handleShare();
+          break;
+        }
+      }
+
+      if (action.keyPath?.[0] === 'translate') {
+        const lang = action.keyPath.at(-1);
+        if (lang) translateMessage(id, lang);
+      }
+    },
+    [
+      copyMessage,
+      deleteMessage,
+      delAndRegenerateMessage,
+      delAndResendThreadMessage,
+      getMessage,
+      handleShare,
+      id,
+      inPortalThread,
+      message,
+      openThreadCreator,
+      regenerateAssistantMessage,
+      regenerateUserMessage,
+      resendThreadMessage,
+      role,
+      t,
+      toggleMessageCollapsed,
+      toggleMessageEditing,
+      topic,
+      translateMessage,
+      ttsMessage,
+    ],
+  );
+
+  const handleMenuClick = useCallback(
+    (info: ActionIconGroupEvent) => {
+      handleAction({
+        ...info,
+        selectedText: selectedTextRef.current,
+      } as ContextMenuEvent);
+    },
+    [handleAction],
+  );
+
+  const contextMenuItems = useMemo<GenericItemType[]>(() => {
+    if (!menuItems) return [];
+    return menuItems.filter(Boolean).map((item) => {
+      if ('type' in item && item.type === 'divider') return { type: 'divider' as const };
+
+      const actionItem = item as ActionMenuItem;
+      const children = actionItem.children?.map((child) => ({
+        key: child.key,
+        label: child.label,
+        onClick: handleMenuClick,
+      }));
+      const disabled =
+        actionItem.disabled ??
+        (typeof actionItem.disable === 'boolean' ? actionItem.disable : undefined);
+
+      return {
+        children,
+        danger: actionItem.danger,
+        disabled,
+        icon: actionItem.icon,
+        key: actionItem.key,
+        label: actionItem.label,
+        onClick: children ? undefined : handleMenuClick,
+      } satisfies DropdownItem;
+    });
+  }, [handleMenuClick, menuItems]);
 
   const handleContextMenu = useCallback(
-    (event: React.MouseEvent) => {
-      // Don't show context menu if disabled in settings
+    (event: MouseEvent<HTMLDivElement>) => {
       if (contextMenuMode === 'disabled') {
         return;
       }
 
-      // Don't show context menu in editing mode
       if (editing) {
         return;
       }
 
-      // Check if the clicked element or its parents have an id containing "msg_"
       let target = event.target as HTMLElement;
       let hasMessageId = false;
 
@@ -55,82 +344,23 @@ export const useChatItemContextMenu = ({
         target = target.parentElement as HTMLElement;
       }
 
-      if (!hasMessageId) {
+      if (!hasMessageId || contextMenuItems.length === 0) {
         return;
       }
 
       event.preventDefault();
       event.stopPropagation();
 
-      // Get selected text
       const selection = window.getSelection();
-      const selectedText = selection?.toString().trim() || '';
-
-      setContextMenuState({
-        position: { x: event.clientX, y: event.clientY },
-        selectedText,
-        visible: true,
-      });
-    },
-    [contextMenuMode, editing],
-  );
-
-  const hideContextMenu = useCallback(() => {
-    setContextMenuState((prev) => ({ ...prev, visible: false }));
-  }, []);
+      selectedTextRef.current = selection?.toString().trim() || '';
 
-  const handleMenuClick = useCallback(
-    (action: ActionIconGroupEvent) => {
-      if (action.key === 'quote' && contextMenuState.selectedText) {
-        // Handle quote action - this will be integrated with ChatInput
-        onActionClick({
-          ...action,
-          selectedText: contextMenuState.selectedText,
-        } as ActionIconGroupEvent & { selectedText: string });
-      } else {
-        onActionClick(action);
-      }
-      hideContextMenu();
+      console.log(contextMenuItems);
+      showContextMenu(contextMenuItems);
     },
-    [contextMenuState.selectedText, onActionClick, hideContextMenu],
+    [contextMenuItems, contextMenuMode, editing],
   );
 
-  // Close context menu when clicking outside
-  useEffect(() => {
-    const handleClickOutside = () => {
-      if (contextMenuState.visible) {
-        hideContextMenu();
-      }
-    };
-
-    const handleScroll = (event: Event) => {
-      if (contextMenuState.visible) {
-        // Check if the scroll event is from a dropdown sub-menu
-        const target = event.target as HTMLElement;
-        if (target && target.classList && target.classList.contains('ant-dropdown-menu-sub')) {
-          return; // Don't hide the context menu when scrolling within sub-menu
-        }
-        hideContextMenu();
-      }
-    };
-
-    if (contextMenuState.visible) {
-      document.addEventListener('click', handleClickOutside);
-      document.addEventListener('scroll', handleScroll, true);
-
-      return () => {
-        document.removeEventListener('click', handleClickOutside);
-        document.removeEventListener('scroll', handleScroll, true);
-      };
-    }
-  }, [contextMenuState.visible, hideContextMenu]);
-
   return {
-    containerRef,
-    contextMenuMode,
-    contextMenuState,
     handleContextMenu,
-    handleMenuClick,
-    hideContextMenu,
   };
 };

package/src/features/NavPanel/components/NavItem.tsx

@@ -1,6 +1,16 @@
 'use client';
 
-import { Block, type BlockProps, Center, Flexbox, Icon, type IconProps, Text } from '@lobehub/ui';
+import {
+  Block,
+  type BlockProps,
+  Center,
+  ContextMenuTrigger,
+  Flexbox,
+  type GenericItemType,
+  Icon,
+  type IconProps,
+  Text,
+} from '@lobehub/ui';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
 import { Loader2Icon } from 'lucide-react';
 import { type ReactNode, memo } from 'react';
@@ -18,6 +28,11 @@ const styles = createStaticStyles(({ css }) => ({
       margin-inline-end: 2px;
       opacity: 0;
       transition: opacity 0.2s ${cssVar.motionEaseOut};
+
+      &:has([data-popup-open]) {
+        width: unset;
+        opacity: 1;
+      }
     }
 
     &:hover {
@@ -32,6 +47,7 @@ const styles = createStaticStyles(({ css }) => ({
 export interface NavItemProps extends Omit<BlockProps, 'children' | 'title'> {
   actions?: ReactNode;
   active?: boolean;
+  contextMenuItems?: GenericItemType[] | (() => GenericItemType[]);
   disabled?: boolean;
   extra?: ReactNode;
   icon?: IconProps['icon'];
@@ -40,13 +56,25 @@ export interface NavItemProps extends Omit<BlockProps, 'children' | 'title'> {
 }
 
 const NavItem = memo<NavItemProps>(
-  ({ className, actions, active, icon, title, onClick, disabled, loading, extra, ...rest }) => {
+  ({
+    className,
+    actions,
+    contextMenuItems,
+    active,
+    icon,
+    title,
+    onClick,
+    disabled,
+    loading,
+    extra,
+    ...rest
+  }) => {
     const iconColor = active ? cssVar.colorText : cssVar.colorTextDescription;
     const textColor = active ? cssVar.colorText : cssVar.colorTextSecondary;
     const variant = active ? 'filled' : 'borderless';
     const iconComponent = loading ? Loader2Icon : icon;
 
-    return (
+    const Content = (
       <Block
         align={'center'}
         className={cx(styles.container, className)}
@@ -102,6 +130,8 @@ const NavItem = memo<NavItemProps>(
         </Flexbox>
       </Block>
     );
+    if (!contextMenuItems) return Content;
+    return <ContextMenuTrigger items={contextMenuItems}>{Content}</ContextMenuTrigger>;
   },
 );
 

package/src/features/PageEditor/Copilot/TopicSelector/Actions.tsx

@@ -1,27 +1,19 @@
-import { ActionIcon, Dropdown, type MenuProps } from '@lobehub/ui';
+import { ActionIcon, type DropdownItem, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontalIcon } from 'lucide-react';
 import { memo } from 'react';
 
 interface ActionsProps {
-  dropdownMenu: MenuProps['items'];
+  dropdownMenu: DropdownItem[] | (() => DropdownItem[]);
 }
 
 const Actions = memo<ActionsProps>(({ dropdownMenu }) => {
-  if (!dropdownMenu || dropdownMenu.length === 0) return null;
+  if (!dropdownMenu || (typeof dropdownMenu !== 'function' && dropdownMenu.length === 0))
+    return null;
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={dropdownMenu}>
       <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/PageEditor/Copilot/TopicSelector/TopicItem.tsx

@@ -28,6 +28,7 @@ const TopicItem = memo<TopicItemProps>(
       <NavItem
         actions={<Actions dropdownMenu={dropdownMenu} />}
         active={active}
+        contextMenuItems={dropdownMenu}
         onClick={() => {
           onTopicChange(topicId);
           onClose();

package/src/features/PageEditor/Copilot/TopicSelector/useDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { Icon, type MenuProps } from '@lobehub/ui';
 import { App } from 'antd';
 import { Trash2 } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useChatStore } from '@/store/chat';
@@ -12,7 +12,10 @@ interface UseDropdownMenuProps {
   topicTitle: string;
 }
 
-export const useDropdownMenu = ({ onClose, topicId }: UseDropdownMenuProps): MenuProps['items'] => {
+export const useDropdownMenu = ({
+  onClose,
+  topicId,
+}: UseDropdownMenuProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['common', 'topic']);
   const { modal } = App.useApp();
   const removeTopic = useChatStore((s) => s.removeTopic);
@@ -32,7 +35,7 @@ export const useDropdownMenu = ({ onClose, topicId }: UseDropdownMenuProps): Men
     });
   };
 
-  return useMemo(
+  return useCallback(
     () =>
       [
         {

package/src/features/ResourceManager/components/Explorer/ItemDropdown/DropdownMenu.tsx

@@ -1,42 +1,19 @@
-import { ActionIcon, Dropdown } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu as DropdownMenuUI } from '@lobehub/ui';
+import { type ItemType } from 'antd/es/menu/interface';
 import { MoreHorizontalIcon } from 'lucide-react';
-import { memo, useState } from 'react';
-
-import { useFileItemDropdown } from './useFileItemDropdown';
+import { memo } from 'react';
 
 interface DropdownMenuProps {
-  fileType: string;
-  filename: string;
-  id: string;
-  knowledgeBaseId?: string;
-  onRenameStart?: () => void;
-  sourceType?: string;
-  url: string;
+  className?: string;
+  items: ItemType[] | (() => ItemType[]);
 }
 
-const DropdownMenu = memo<DropdownMenuProps>(
-  ({ id, knowledgeBaseId, url, filename, fileType, sourceType, onRenameStart }) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    // Only compute dropdown items when dropdown is actually open
-    // This prevents expensive hook execution for all 20-25 visible items
-    const { menuItems } = useFileItemDropdown({
-      enabled: isOpen,
-      fileType,
-      filename,
-      id,
-      knowledgeBaseId,
-      onRenameStart,
-      sourceType,
-      url,
-    });
-
-    return (
-      <Dropdown menu={{ items: menuItems }} onOpenChange={setIsOpen} open={isOpen}>
-        <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
-      </Dropdown>
-    );
-  },
-);
+const DropdownMenu = memo<DropdownMenuProps>(({ items, className }) => {
+  return (
+    <DropdownMenuUI items={items}>
+      <ActionIcon className={className} icon={MoreHorizontalIcon} size={'small'} />
+    </DropdownMenuUI>
+  );
+});
 
 export default DropdownMenu;

package/src/features/ResourceManager/components/Explorer/ItemDropdown/useFileItemDropdown.tsx

@@ -10,7 +10,7 @@ import {
   PencilIcon,
   Trash,
 } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import RepoIcon from '@/components/LibIcon';
@@ -33,11 +33,10 @@ interface UseFileItemDropdownParams {
 }
 
 interface UseFileItemDropdownReturn {
-  menuItems: ItemType[];
+  menuItems: () => ItemType[];
 }
 
 export const useFileItemDropdown = ({
-  enabled = true,
   id,
   knowledgeBaseId,
   url,
@@ -65,10 +64,7 @@ export const useFileItemDropdown = ({
   const isFolder = fileType === 'custom/folder';
   const isPage = sourceType === 'document' || fileType === 'custom/document';
 
-  const menuItems = useMemo(() => {
-    // Skip building menu items when dropdown is not open (performance optimization)
-    if (!enabled) return [];
-
+  const menuItems = useCallback(() => {
     // Filter out current knowledge base and create submenu items
     const availableKnowledgeBases = (knowledgeBases || []).filter(
       (kb) => kb.id !== knowledgeBaseId,
@@ -264,7 +260,7 @@ export const useFileItemDropdown = ({
         },
       ] as ItemType[]
     ).filter(Boolean);
-  }, [enabled, inKnowledgeBase, isFolder, knowledgeBases, knowledgeBaseId, id]);
+  }, [inKnowledgeBase, isFolder, knowledgeBases, knowledgeBaseId, id]);
 
   return { menuItems };
 };