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

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/Item/Actions.tsx

@@ -1,25 +1,16 @@
-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 ActionProps {
-  dropdownMenu: MenuProps['items'];
+  dropdownMenu: DropdownItem[] | (() => DropdownItem[]);
 }
 
 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
   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/app/[variants]/(main)/home/_layout/Body/Agent/List/Item/useDropdownMenu.tsx

@@ -1,5 +1,5 @@
 import { type MenuProps } from '@lobehub/ui';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 
 import { useSessionItemMenuItems } from '../../../../hooks';
 
@@ -21,7 +21,7 @@ export const useDropdownMenu = ({
   pinned,
   sessionType,
   toggleEditing,
-}: ActionProps): MenuProps['items'] => {
+}: ActionProps): (() => MenuProps['items']) => {
   const {
     pinMenuItem,
     renameMenuItem,
@@ -31,7 +31,7 @@ export const useDropdownMenu = ({
     deleteMenuItem,
   } = useSessionItemMenuItems();
 
-  return useMemo(
+  return useCallback(
     () =>
       [
         pinMenuItem(id, pinned, parentType),

package/src/app/[variants]/(main)/home/_layout/Body/Project/List/Actions.tsx

@@ -1,25 +1,16 @@
-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 }) => {
   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/app/[variants]/(main)/home/_layout/Body/Project/List/Item.tsx

@@ -1,4 +1,3 @@
-import { Dropdown } from '@lobehub/ui';
 import { BoxIcon } from 'lucide-react';
 import { memo, useCallback } from 'react';
 
@@ -39,20 +38,14 @@ const ProjectItem = memo<ProjectItemProps>(({ id, name }) => {
 
   return (
     <>
-      <Dropdown
-        menu={{
-          items: dropdownMenu,
-        }}
-        trigger={['contextMenu']}
-      >
-        <NavItem
-          actions={<Actions dropdownMenu={dropdownMenu} />}
-          disabled={editing || isUpdating}
-          icon={BoxIcon}
-          loading={isLoading || isUpdating}
-          title={name}
-        />
-      </Dropdown>
+      <NavItem
+        actions={<Actions dropdownMenu={dropdownMenu} />}
+        contextMenuItems={dropdownMenu}
+        disabled={editing || isUpdating}
+        icon={BoxIcon}
+        loading={isLoading || isUpdating}
+        title={name}
+      />
       <Editing id={id} name={name} toggleEditing={toggleEditing} />
     </>
   );

package/src/app/[variants]/(main)/home/_layout/Body/Project/List/useDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { Icon, type MenuProps } from '@lobehub/ui';
 import { App } from 'antd';
 import { PencilLine, Trash } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
@@ -14,12 +14,12 @@ interface ProjectItemDropdownMenuProps {
 export const useProjectItemDropdownMenu = ({
   id,
   toggleEditing,
-}: ProjectItemDropdownMenuProps): MenuProps['items'] => {
+}: ProjectItemDropdownMenuProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['home', 'common']);
   const [removeKnowledgeBase] = useKnowledgeBaseStore((s) => [s.removeKnowledgeBase]);
   const { modal } = App.useApp();
 
-  return useMemo<MenuProps['items']>(
+  return useCallback(
     () => [
       {
         icon: <Icon icon={PencilLine} />,

package/src/app/[variants]/(main)/home/_layout/Header/components/AddButton.tsx

@@ -1,6 +1,5 @@
-import { ActionIcon, Flexbox } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, Flexbox } from '@lobehub/ui';
 import { CreateBotIcon } from '@lobehub/ui/icons';
-import { Dropdown } from 'antd';
 import { cssVar } from 'antd-style';
 import { ChevronDownIcon } from 'lucide-react';
 import React, { memo, useCallback, useMemo } from 'react';
@@ -45,7 +44,7 @@ const AddButton = memo(() => {
         size={DESKTOP_HEADER_ICON_SIZE}
         title={tChat('newAgent')}
       />
-      <Dropdown menu={{ items: dropdownItems || [] }}>
+      <DropdownMenu items={dropdownItems}>
         <ActionIcon
           color={cssVar.colorTextQuaternary}
           icon={ChevronDownIcon}
@@ -54,7 +53,7 @@ const AddButton = memo(() => {
             width: 16,
           }}
         />
-      </Dropdown>
+      </DropdownMenu>
     </Flexbox>
   );
 });

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/Actions.tsx

@@ -1,25 +1,16 @@
-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 ActionProps {
-  dropdownMenu: MenuProps['items'];
+  dropdownMenu: DropdownItem[] | (() => DropdownItem[]);
 }
 
 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
   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/app/[variants]/(main)/page/_layout/Body/List/Item/index.tsx

@@ -1,5 +1,4 @@
-import { Avatar, type MenuProps } from '@lobehub/ui';
-import { Dropdown } from '@lobehub/ui';
+import { Avatar } from '@lobehub/ui';
 import { FileTextIcon } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -56,7 +55,7 @@ const PageListItem = memo<DocumentItemProps>(({ pageId, className }) => {
     return FileTextIcon;
   }, [emoji]);
 
-  const dropdownMenu: MenuProps['items'] = useDropdownMenu({
+  const dropdownMenu = useDropdownMenu({
     documentContent: document?.content || undefined,
     pageId,
     toggleEditing,
@@ -64,23 +63,17 @@ const PageListItem = memo<DocumentItemProps>(({ pageId, className }) => {
 
   return (
     <>
-      <Dropdown
-        menu={{
-          items: dropdownMenu,
-        }}
-        trigger={['contextMenu']}
-      >
-        <NavItem
-          actions={<Actions dropdownMenu={dropdownMenu} />}
-          active={active}
-          className={className}
-          disabled={editing}
-          icon={icon}
-          key={pageId}
-          onClick={handleClick}
-          title={title}
-        />
-      </Dropdown>
+      <NavItem
+        actions={<Actions dropdownMenu={dropdownMenu} />}
+        active={active}
+        className={className}
+        contextMenuItems={dropdownMenu}
+        disabled={editing}
+        icon={icon}
+        key={pageId}
+        onClick={handleClick}
+        title={title}
+      />
       <Editing
         currentEmoji={emoji}
         documentId={pageId}

package/src/app/[variants]/(main)/page/_layout/Body/List/Item/useDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { Icon, type MenuProps } from '@lobehub/ui';
 import { App } from 'antd';
 import { Copy, CopyPlus, Pencil, Trash2 } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useFileStore } from '@/store/file';
@@ -16,7 +16,7 @@ export const useDropdownMenu = ({
   documentContent,
   pageId,
   toggleEditing,
-}: ActionProps): MenuProps['items'] => {
+}: ActionProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['common', 'file']);
   const { message, modal } = App.useApp();
   const removeDocument = useFileStore((s) => s.removeDocument);
@@ -59,7 +59,7 @@ export const useDropdownMenu = ({
     }
   };
 
-  return useMemo(
+  return useCallback(
     () =>
       [
         {

package/src/app/[variants]/(main)/resource/(home)/_layout/Body/LibraryList/List/Item/Actions.tsx

@@ -1,25 +1,16 @@
-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 ActionProps {
-  dropdownMenu: MenuProps['items'];
+  dropdownMenu: DropdownItem[] | (() => DropdownItem[]);
 }
 
 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
   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/app/[variants]/(main)/resource/(home)/_layout/Body/LibraryList/List/Item/index.tsx

@@ -1,5 +1,4 @@
-import { Icon, type MenuProps } from '@lobehub/ui';
-import { Dropdown } from '@lobehub/ui';
+import { Icon } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { Loader2Icon } from 'lucide-react';
 import React, { type CSSProperties, memo, useCallback, useMemo } from 'react';
@@ -66,33 +65,27 @@ const KnowledgeBaseItem = memo<KnowledgeBaseItemProps>(({ id, name, active, styl
     return <RepoIcon size={18} />;
   }, [isLoading]);
 
-  const dropdownMenu: MenuProps['items'] = useDropdownMenu({
+  const dropdownMenu = useDropdownMenu({
     id,
     toggleEditing,
   });
 
   return (
     <>
-      <Dropdown
-        menu={{
-          items: dropdownMenu,
-        }}
-        trigger={['contextMenu']}
-      >
-        <NavItem
-          actions={<Actions dropdownMenu={dropdownMenu} />}
-          active={active}
-          className={className}
-          disabled={editing}
-          icon={icon}
-          key={id}
-          loading={isLoading}
-          onClick={handleClick}
-          onDoubleClick={handleDoubleClick}
-          style={style}
-          title={name}
-        />
-      </Dropdown>
+      <NavItem
+        actions={<Actions dropdownMenu={dropdownMenu} />}
+        active={active}
+        className={className}
+        contextMenuItems={dropdownMenu}
+        disabled={editing}
+        icon={icon}
+        key={id}
+        loading={isLoading}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        style={style}
+        title={name}
+      />
       <Editing id={id} name={name} toggleEditing={toggleEditing} />
     </>
   );

package/src/app/[variants]/(main)/resource/(home)/_layout/Body/LibraryList/List/Item/useDropdownMenu.tsx

@@ -1,7 +1,7 @@
 import { Icon, type MenuProps } from '@lobehub/ui';
 import { App } from 'antd';
 import { PencilLine, Trash } from 'lucide-react';
-import { useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
@@ -11,7 +11,7 @@ interface ActionProps {
   toggleEditing: (visible?: boolean) => void;
 }
 
-export const useDropdownMenu = ({ id, toggleEditing }: ActionProps): MenuProps['items'] => {
+export const useDropdownMenu = ({ id, toggleEditing }: ActionProps): (() => MenuProps['items']) => {
   const { t } = useTranslation(['file', 'common']);
   const { modal } = App.useApp();
   const removeKnowledgeBase = useKnowledgeBaseStore((s) => s.removeKnowledgeBase);
@@ -29,7 +29,7 @@ export const useDropdownMenu = ({ id, toggleEditing }: ActionProps): MenuProps['
     });
   };
 
-  return useMemo(
+  return useCallback(
     () =>
       [
         {

package/src/app/[variants]/(main)/resource/library/_layout/Header/LibraryHead.tsx

@@ -1,9 +1,7 @@
 'use client';
 
 import { useDroppable } from '@dnd-kit/core';
-import { Center, Flexbox, Skeleton, Text } from '@lobehub/ui';
-import { Dropdown } from 'antd';
-import type { MenuProps } from 'antd';
+import { Center, type DropdownItem, DropdownMenu, Flexbox, Skeleton, Text } from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
 import { ChevronsUpDown } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
@@ -81,7 +79,7 @@ const Head = memo<{ id: string }>(({ id }) => {
     [navigate, setMode],
   );
 
-  const menuItems: MenuProps['items'] = useMemo(() => {
+  const menuItems = useMemo<DropdownItem[]>(() => {
     if (!libraries) return [];
 
     return libraries.map((library) => ({
@@ -120,14 +118,14 @@ const Head = memo<{ id: string }>(({ id }) => {
         </Flexbox>
       )}
       {name && (
-        <Dropdown menu={{ items: menuItems }} placement="bottomRight" trigger={['click']}>
+        <DropdownMenu items={menuItems} placement="bottomRight">
           <ChevronsUpDown
             className={styles.icon}
             onClick={(e) => e.stopPropagation()}
             size={16}
             style={{ cursor: 'pointer', flex: 'none' }}
           />
-        </Dropdown>
+        </DropdownMenu>
       )}
     </Flexbox>
   );

package/src/features/AgentBuilder/TopicSelector.tsx

@@ -1,7 +1,5 @@
-import { ActionIcon, Flexbox } from '@lobehub/ui';
-import { Dropdown } from 'antd';
+import { ActionIcon, DropdownMenu, type DropdownMenuCheckboxItem, Flexbox } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import type { ItemType } from 'antd/es/menu/interface';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { Clock3Icon, PlusIcon } from 'lucide-react';
@@ -53,7 +51,7 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
     [topics, activeTopicId],
   );
 
-  const items = useMemo<ItemType[]>(
+  const items = useMemo<DropdownMenuCheckboxItem[]>(
     () =>
       (topics || []).map((topic) => {
         const displayTime =
@@ -62,6 +60,8 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
             : dayjs(topic.updatedAt).format('YYYY-MM-DD');
 
         return {
+          checked: topic.id === activeTopicId,
+          closeOnClick: true,
           key: topic.id,
           label: (
             <Flexbox align="center" gap={4} horizontal justify="space-between" width="100%">
@@ -69,11 +69,17 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
               <span className={styles.time}>{displayTime}</span>
             </Flexbox>
           ),
-          onClick: () => switchTopic(topic.id),
+          onCheckedChange: (checked) => {
+            if (checked) {
+              switchTopic(topic.id);
+            }
+          },
+          type: 'checkbox',
         };
       }),
-    [topics, switchTopic, styles],
+    [topics, switchTopic, styles, activeTopicId],
   );
+  const isEmpty = !topics || topics.length === 0;
 
   return (
     <NavHeader
@@ -88,19 +94,14 @@ const TopicSelector = memo<TopicSelectorProps>(({ agentId }) => {
             size={DESKTOP_HEADER_ICON_SIZE}
             title={t('actions.addNewTopic')}
           />
-          <Dropdown
-            disabled={!topics || topics.length === 0}
-            menu={{
-              items,
-              selectedKeys: activeTopicId ? [activeTopicId] : [],
-              style: { maxHeight: 400, overflowY: 'auto' },
-            }}
-            overlayStyle={{ minWidth: 280 }}
+          <DropdownMenu
+            items={items}
             placement="bottomRight"
-            trigger={['click']}
+            popupProps={{ style: { maxHeight: 400, minWidth: 280, overflowY: 'auto' } }}
+            triggerProps={{ disabled: isEmpty }}
           >
-            <ActionIcon disabled={!topics || topics.length === 0} icon={Clock3Icon} />
-          </Dropdown>
+            <ActionIcon disabled={isEmpty} icon={Clock3Icon} />
+          </DropdownMenu>
         </>
       }
       showTogglePanelButton={false}

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

@@ -22,6 +22,13 @@ export const styles = createStaticStyles(({ css, cssVar }) => {
         display: flex;
       }
 
+      &:has([data-popup-open]) {
+        div[role='menubar'] {
+          pointer-events: unset;
+          opacity: 1;
+        }
+      }
+
       &:hover {
         time,
         div[role='menubar'] {

package/src/features/Conversation/Messages/Assistant/Actions/Error.tsx

@@ -15,9 +15,7 @@ export const ErrorActionsBar = memo<ErrorActionsBarProps>(({ actions, onActionCl
   return (
     <ActionIconGroup
       items={[regenerate, del]}
-      menu={{
-        items: [edit, copy, divider, del],
-      }}
+      menu={[edit, copy, divider, del]}
       onActionClick={onActionClick}
     />
   );

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

@@ -1,10 +1,16 @@
 import { type UIChatMessage } from '@lobechat/types';
-import { ActionIconGroup } from '@lobehub/ui';
+import { ActionIconGroup, createRawModal } from '@lobehub/ui';
 import type { ActionIconGroupEvent, ActionIconGroupItemType } from '@lobehub/ui';
-import { memo, useCallback, useMemo, useState } from 'react';
-
-import ShareMessageModal from '../../../components/ShareMessageModal';
-import { messageStateSelectors, useConversationStore } from '../../../store';
+import { memo, useCallback, useMemo } from 'react';
+
+import ShareMessageModal, { type ShareModalProps } from '../../../components/ShareMessageModal';
+import {
+  Provider,
+  createStore,
+  messageStateSelectors,
+  useConversationStore,
+  useConversationStoreApi,
+} from '../../../store';
 import type {
   MessageActionItem,
   MessageActionItemOrDivider,
@@ -57,7 +63,30 @@ interface AssistantActionsBarProps {
 export const AssistantActionsBar = memo<AssistantActionsBarProps>(
   ({ actionsConfig, id, data, index }) => {
     const { error, tools } = data;
-    const [showShareModal, setShareModal] = useState(false);
+    const store = useConversationStoreApi();
+
+    const handleOpenShareModal = useCallback(() => {
+      createRawModal(
+        (props: ShareModalProps) => (
+          <Provider
+            createStore={() => {
+              const state = store.getState();
+              return createStore({
+                context: state.context,
+                hooks: state.hooks,
+                skipFetch: state.skipFetch,
+              });
+            }}
+          >
+            <ShareMessageModal {...props} />
+          </Provider>
+        ),
+        {
+          message: data,
+        },
+        { onCloseKey: 'onCancel', openKey: 'open' },
+      );
+    }, [data, store]);
 
     const isCollapsed = useConversationStore(messageStateSelectors.isMessageCollapsed(id));
 
@@ -65,7 +94,7 @@ export const AssistantActionsBar = memo<AssistantActionsBarProps>(
       data,
       id,
       index,
-      onOpenShareModal: () => setShareModal(true),
+      onOpenShareModal: handleOpenShareModal,
     });
 
     const hasTools = !!tools;
@@ -174,17 +203,9 @@ export const AssistantActionsBar = memo<AssistantActionsBarProps>(
       [allActions],
     );
 
-    const shareOnCancel = useCallback(() => {
-      setShareModal(false);
-    }, []);
     if (error) return <ErrorActionsBar actions={defaultActions} onActionClick={handleAction} />;
 
-    return (
-      <>
-        <ActionIconGroup items={items} menu={{ items: menu }} onActionClick={handleAction} />
-        <ShareMessageModal message={data} onCancel={shareOnCancel} open={showShareModal} />
-      </>
-    );
+    return <ActionIconGroup items={items} menu={menu} onActionClick={handleAction} />;
   },
 );