@lobehub/lobehub 2.0.0-next.109 → 2.0.0-next.110

package/src/features/ChatList/components/ContextMenu.tsx

@@ -0,0 +1,391 @@
+'use client';
+
+import { UIChatMessage } from '@lobechat/types';
+import { ActionIcon } from '@lobehub/ui';
+import type { ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
+import { Dropdown, type MenuProps } from 'antd';
+import { App } from 'antd';
+import { createStyles } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { isValidElement, memo, useCallback, useMemo, useState, type RefObject , ComponentType, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import type { VListHandle } from 'virtua';
+
+import ShareMessageModal from './ShareMessageModal';
+import { useChatListActionsBar } from '../hooks/useChatListActionsBar';
+import { getChatStoreState, useChatStore } from '@/store/chat';
+import {
+  displayMessageSelectors,
+  messageStateSelectors,
+  threadSelectors,
+} from '@/store/chat/selectors';
+import { useSessionStore } from '@/store/session';
+import { sessionSelectors } from '@/store/session/selectors';
+
+interface ActionMenuItem extends ActionIconGroupItemType {
+  children?: { key: string; label: ReactNode }[];
+  disable?: boolean;
+  popupClassName?: string;
+}
+
+type MenuItem = ActionMenuItem | { type: 'divider' };
+type ContextMenuEvent = ActionIconGroupEvent & { selectedText?: string };
+
+const useStyles = createStyles(({ css }) => ({
+  contextMenu: css`
+    position: fixed;
+    z-index: 1000;
+    min-width: 160px;
+
+    .ant-dropdown-menu {
+      border: none;
+      border-radius: 6px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 15%);
+    }
+  `,
+  trigger: css`
+    pointer-events: none;
+
+    position: fixed;
+
+    width: 1px;
+    height: 1px;
+
+    opacity: 0;
+  `,
+}));
+
+interface ContextMenuProps {
+  id: string;
+  inPortalThread: boolean;
+  index: number;
+  onClose: () => void;
+  position: { x: number; y: number };
+  selectedText?: string;
+  topic: string | null;
+  virtuaRef?: RefObject<VListHandle | null> | null;
+  visible: boolean;
+}
+
+const ContextMenu = memo<ContextMenuProps>(
+  ({ visible, position, selectedText, id, index, inPortalThread, topic, virtuaRef, onClose }) => {
+    const { styles } = useStyles();
+    const { message } = App.useApp();
+    const { t } = useTranslation('common');
+    const [shareMessage, setShareMessage] = useState<UIChatMessage | null>(null);
+    const [isShareModalOpen, setShareModalOpen] = useState(false);
+
+    const [role, error, isCollapsed, hasThread, isRegenerating] = useChatStore(
+      (s) => {
+        const item = displayMessageSelectors.getDisplayMessageById(id)(s);
+        return [
+          item?.role,
+          item?.error,
+          messageStateSelectors.isMessageCollapsed(id)(s),
+          threadSelectors.hasThreadBySourceMsgId(id)(s),
+          messageStateSelectors.isMessageRegenerating(id)(s),
+        ];
+      },
+      isEqual,
+    );
+
+    const isThreadMode = useChatStore((s) => !!s.activeThreadId);
+    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,
+    ] = useChatStore((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(
+      () => displayMessageSelectors.getDisplayMessageById(id)(getChatStoreState()),
+      [id],
+    );
+
+    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 === '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 handleShare = useCallback(() => {
+      const item = getMessage();
+      if (!item || item.role !== 'assistant') return;
+
+      setShareMessage(item);
+      setShareModalOpen(true);
+    }, [getMessage]);
+
+    const handleShareClose = useCallback(() => {
+      setShareModalOpen(false);
+      setShareMessage(null);
+    }, []);
+
+    const handleAction = useCallback(
+      async (action: ContextMenuEvent) => {
+        const item = getMessage();
+        if (!item) return;
+
+        if (action.key === 'edit') {
+          toggleMessageEditing(id, true);
+          virtuaRef?.current?.scrollToIndex(index, { align: 'start' });
+        }
+
+        switch (action.key) {
+          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?.at(-1) === 'translate') {
+          const lang = action.keyPath[0];
+          translateMessage(id, lang);
+        }
+      },
+      [
+        copyMessage,
+        deleteMessage,
+        delAndRegenerateMessage,
+        delAndResendThreadMessage,
+        getMessage,
+        handleShare,
+        id,
+        index,
+        inPortalThread,
+        message,
+        openThreadCreator,
+        regenerateAssistantMessage,
+        regenerateUserMessage,
+        resendThreadMessage,
+        role,
+        t,
+        toggleMessageCollapsed,
+        toggleMessageEditing,
+        topic,
+        translateMessage,
+        ttsMessage,
+        virtuaRef,
+      ],
+    );
+
+    const renderIcon = useCallback((iconComponent: ActionIconGroupItemType['icon']) => {
+      if (!iconComponent) return null;
+
+      if (isValidElement(iconComponent)) {
+        return <ActionIcon icon={iconComponent} size={'small'} />;
+      }
+
+      const IconComponent = iconComponent as ComponentType<{ size?: number }>;
+
+      return <ActionIcon icon={<IconComponent size={16} />} size={'small'} />;
+    }, []);
+
+    const dropdownMenuItems = useMemo(() => {
+      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,
+        }));
+        const disabled =
+          actionItem.disabled ??
+          (typeof actionItem.disable === 'boolean' ? actionItem.disable : undefined);
+
+        return {
+          children,
+          danger: actionItem.danger,
+          disabled,
+          icon: renderIcon(actionItem.icon),
+          key: actionItem.key,
+          label: actionItem.label,
+          popupClassName: actionItem.popupClassName,
+        };
+      });
+    }, [menuItems, renderIcon]);
+
+    const handleMenuClick = useCallback(
+      (info: Parameters<NonNullable<MenuProps['onClick']>>[0]) => {
+        const event = {
+          ...info,
+          selectedText,
+        } as ContextMenuEvent;
+
+        handleAction(event);
+        onClose();
+      },
+      [handleAction, onClose, selectedText],
+    );
+
+    if (!visible || menuItems.length === 0) return null;
+
+    return (
+      <>
+        {createPortal(
+          <>
+            <div
+              className={styles.trigger}
+              style={{
+                left: position.x,
+                top: position.y,
+              }}
+            />
+            <Dropdown
+              menu={{
+                items: dropdownMenuItems,
+                onClick: handleMenuClick,
+              }}
+              open={visible}
+              placement="bottomLeft"
+              trigger={[]}
+            >
+              <div
+                className={styles.contextMenu}
+                style={{
+                  left: position.x,
+                  top: position.y,
+                }}
+              />
+            </Dropdown>
+          </>,
+          document.body,
+        )}
+        {shareMessage && (
+          <ShareMessageModal
+            message={shareMessage}
+            onCancel={handleShareClose}
+            open={isShareModalOpen}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+ContextMenu.displayName = 'ContextMenu';
+
+export default ContextMenu;

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

@@ -0,0 +1,135 @@
+import { type ActionIconGroupEvent } from '@lobehub/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import { useUserStore } from '@/store/user';
+import { userGeneralSettingsSelectors } from '@/store/user/selectors';
+
+import { MessageContentClassName } from '../Messages/Default';
+
+interface ContextMenuState {
+  position: { x: number; y: number };
+  selectedText?: string;
+  visible: boolean;
+}
+
+interface UseChatItemContextMenuProps {
+  editing?: boolean;
+  id: string;
+  onActionClick: (action: ActionIconGroupEvent) => void;
+}
+
+export const useChatItemContextMenu = ({
+  onActionClick,
+  editing,
+}: Omit<UseChatItemContextMenuProps, 'id'>) => {
+  const contextMenuMode = useUserStore(userGeneralSettingsSelectors.contextMenuMode);
+
+  const [contextMenuState, setContextMenuState] = useState<ContextMenuState>({
+    position: { x: 0, y: 0 },
+    visible: false,
+  });
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleContextMenu = useCallback(
+    (event: React.MouseEvent) => {
+      // Don't show context menu if disabled in settings
+      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;
+
+      while (target && target !== document.body) {
+        if (target.className.includes(MessageContentClassName)) {
+          hasMessageId = true;
+          break;
+        }
+        target = target.parentElement as HTMLElement;
+      }
+
+      if (!hasMessageId) {
+        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 }));
+  }, []);
+
+  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();
+    },
+    [contextMenuState.selectedText, onActionClick, hideContextMenu],
+  );
+
+  // 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,
+    contextMenuState,
+    handleContextMenu,
+    handleMenuClick,
+    hideContextMenu,
+  };
+};

package/src/locales/default/setting.ts

@@ -297,6 +297,12 @@ export default {
       elegant: '优雅',
       title: '响应动画',
     },
+    contextMenuMode: {
+      default: '默认',
+      desc: '选择聊天消息右键菜单的显示方案',
+      disabled: '不使用',
+      title: '右键菜单方案',
+    },
     neutralColor: {
       desc: '不同色彩倾向的灰阶自定义',
       title: '中性色',

package/src/store/user/slices/settings/selectors/general.ts

@@ -1,3 +1,5 @@
+import { isDesktop } from '@lobechat/const';
+
 import { UserStore } from '../../../store';
 import { currentSettings } from './settings';
 
@@ -10,10 +12,16 @@ const highlighterTheme = (s: UserStore) => generalConfig(s).highlighterTheme;
 const mermaidTheme = (s: UserStore) => generalConfig(s).mermaidTheme;
 const transitionMode = (s: UserStore) => generalConfig(s).transitionMode;
 const animationMode = (s: UserStore) => generalConfig(s).animationMode;
+const contextMenuMode = (s: UserStore) => {
+  const config = generalConfig(s).contextMenuMode;
+  if (config !== undefined) return config;
+  return isDesktop ? 'default' : 'disabled';
+};
 
 export const userGeneralSettingsSelectors = {
   animationMode,
   config: generalConfig,
+  contextMenuMode,
   fontSize,
   highlighterTheme,
   mermaidTheme,