@lobehub/lobehub 2.0.0-next.298 → 2.0.0-next.299

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { AccordionItem, Dropdown, Flexbox, Text } from '@lobehub/ui';
+import { AccordionItem, ContextMenuTrigger, Flexbox, Text } from '@lobehub/ui';
 import React, { Suspense, memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -39,14 +39,7 @@ const Agent = memo<AgentProps>(({ itemKey }) => {
     <AccordionItem
       action={<Actions dropdownMenu={dropdownMenu} isLoading={isLoading} />}
       headerWrapper={(header) => (
-        <Dropdown
-          menu={{
-            items: dropdownMenu,
-          }}
-          trigger={['contextMenu']}
-        >
-          {header}
-        </Dropdown>
+        <ContextMenuTrigger items={dropdownMenu}>{header}</ContextMenuTrigger>
       )}
       itemKey={itemKey}
       paddingBlock={4}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { AccordionItem, Dropdown, Text } from '@lobehub/ui';
+import { AccordionItem, ContextMenuTrigger, Text } from '@lobehub/ui';
 import React, { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -21,14 +21,7 @@ const Project = memo<ProjectProps>(({ itemKey }) => {
     <AccordionItem
       action={<Actions />}
       headerWrapper={(header) => (
-        <Dropdown
-          menu={{
-            items: dropdownMenu,
-          }}
-          trigger={['contextMenu']}
-        >
-          {header}
-        </Dropdown>
+        <ContextMenuTrigger items={dropdownMenu}>{header}</ContextMenuTrigger>
       )}
       itemKey={itemKey}
       paddingBlock={4}

package/src/app/[variants]/(main)/home/features/CommunityAgents/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon, Dropdown } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu } from '@lobehub/ui';
 import { BotIcon, MoreHorizontal } from 'lucide-react';
 import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,21 +18,19 @@ const CommunityAgents = memo(() => {
   return (
     <GroupBlock
       action={
-        <Dropdown
-          menu={{
-            items: [
-              {
-                key: 'all-assistants',
-                label: t('home.more'),
-                onClick: () => {
-                  navigate('/community/assistant');
-                },
+        <DropdownMenu
+          items={[
+            {
+              key: 'all-assistants',
+              label: t('home.more'),
+              onClick: () => {
+                navigate('/community/assistant');
               },
-            ],
-          }}
+            },
+          ]}
         >
           <ActionIcon icon={MoreHorizontal} size="small" />
-        </Dropdown>
+        </DropdownMenu>
       }
       icon={BotIcon}
       title={t('home.communityAgents')}

package/src/app/[variants]/(main)/home/features/FeaturedPlugins/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { MCP } from '@lobehub/icons';
-import { ActionIcon, Dropdown, Grid } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, Grid } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { MoreHorizontal } from 'lucide-react';
 import { Suspense, memo } from 'react';
@@ -20,21 +20,19 @@ const FeaturedPlugins = memo(() => {
   return (
     <GroupBlock
       action={
-        <Dropdown
-          menu={{
-            items: [
-              {
-                key: 'all-plugins',
-                label: t('home.more'),
-                onClick: () => {
-                  navigate('/community/mcp');
-                },
+        <DropdownMenu
+          items={[
+            {
+              key: 'all-plugins',
+              label: t('home.more'),
+              onClick: () => {
+                navigate('/community/mcp');
               },
-            ],
-          }}
+            },
+          ]}
         >
           <ActionIcon icon={MoreHorizontal} size="small" />
-        </Dropdown>
+        </DropdownMenu>
       }
       icon={<MCP color={cssVar.colorTextDescription} size={18} />}
       title={t('home.featuredPlugins')}

package/src/app/[variants]/(main)/home/features/RecentPage/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon, Dropdown } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu } from '@lobehub/ui';
 import { FileTextIcon, MoreHorizontal } from 'lucide-react';
 import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,22 +37,20 @@ const RecentPage = memo(() => {
       action={
         <>
           {isRevalidating && <NeuralNetworkLoading size={14} />}
-          <Dropdown
-            menu={{
-              items: [
-                {
-                  key: 'all-documents',
-                  label: t('menu.allPages'),
-                  onClick: () => {
-                    setCategory(FilesTabs.Pages);
-                    navigate('/resource');
-                  },
+          <DropdownMenu
+            items={[
+              {
+                key: 'all-documents',
+                label: t('menu.allPages'),
+                onClick: () => {
+                  setCategory(FilesTabs.Pages);
+                  navigate('/resource');
                 },
-              ],
-            }}
+              },
+            ]}
           >
             <ActionIcon icon={MoreHorizontal} size="small" />
-          </Dropdown>
+          </DropdownMenu>
         </>
       }
       icon={FileTextIcon}

package/src/app/[variants]/(main)/home/features/RecentResource/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon, Dropdown } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu } from '@lobehub/ui';
 import { Clock, MoreHorizontal } from 'lucide-react';
 import { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -37,22 +37,20 @@ const RecentResource = memo(() => {
       action={
         <>
           {isRevalidating && <NeuralNetworkLoading size={14} />}
-          <Dropdown
-            menu={{
-              items: [
-                {
-                  key: 'all-files',
-                  label: t('menu.allFiles'),
-                  onClick: () => {
-                    setCategory(FilesTabs.All);
-                    navigate('/resource');
-                  },
+          <DropdownMenu
+            items={[
+              {
+                key: 'all-files',
+                label: t('menu.allFiles'),
+                onClick: () => {
+                  setCategory(FilesTabs.All);
+                  navigate('/resource');
                 },
-              ],
-            }}
+              },
+            ]}
           >
             <ActionIcon icon={MoreHorizontal} size="small" />
-          </Dropdown>
+          </DropdownMenu>
         </>
       }
       icon={Clock}

package/src/app/[variants]/(main)/memory/contexts/features/ContextDropdown.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, type ActionIconProps, Dropdown } from '@lobehub/ui';
+import { ActionIcon, type ActionIconProps, DropdownMenu } from '@lobehub/ui';
 import { App } from 'antd';
 import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
 import { type KeyboardEvent, type MouseEvent, memo } from 'react';
@@ -47,19 +47,21 @@ const ContextDropdown = memo<ContextDropdownProps>(({ id, size = 'small' }) => {
       icon: <Pencil size={14} />,
       key: 'edit',
       label: t('context.actions.edit'),
+      onClick: handleMenuClick,
     },
     {
       danger: true,
       icon: <Trash2 size={14} />,
       key: 'delete',
       label: t('context.actions.delete'),
+      onClick: handleMenuClick,
     },
   ];
 
   return (
-    <Dropdown menu={{ items: menuItems, onClick: handleMenuClick }} trigger={['click']}>
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontal} size={size} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/memory/experiences/features/ExperienceDropdown.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, type ActionIconProps, Dropdown } from '@lobehub/ui';
+import { ActionIcon, type ActionIconProps, DropdownMenu } from '@lobehub/ui';
 import { App } from 'antd';
 import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
 import { type KeyboardEvent, type MouseEvent, memo } from 'react';
@@ -47,19 +47,21 @@ const ExperienceDropdown = memo<ExperienceDropdownProps>(({ id, size = 'small' }
       icon: <Pencil size={14} />,
       key: 'edit',
       label: t('experience.actions.edit'),
+      onClick: handleMenuClick,
     },
     {
       danger: true,
       icon: <Trash2 size={14} />,
       key: 'delete',
       label: t('experience.actions.delete'),
+      onClick: handleMenuClick,
     },
   ];
 
   return (
-    <Dropdown menu={{ items: menuItems, onClick: handleMenuClick }} trigger={['click']}>
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontal} size={size} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/memory/identities/features/IdentityDropdown.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, type ActionIconProps, Dropdown } from '@lobehub/ui';
+import { ActionIcon, type ActionIconProps, DropdownMenu } from '@lobehub/ui';
 import { App } from 'antd';
 import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
 import { type KeyboardEvent, type MouseEvent, memo } from 'react';
@@ -47,19 +47,21 @@ const IdentityDropdown = memo<IdentityDropdownProps>(({ id, size = 'small' }) =>
       icon: <Pencil size={14} />,
       key: 'edit',
       label: t('edit', { ns: 'common' }),
+      onClick: handleMenuClick,
     },
     {
       danger: true,
       icon: <Trash2 size={14} />,
       key: 'delete',
       label: t('delete', { ns: 'common' }),
+      onClick: handleMenuClick,
     },
   ];
 
   return (
-    <Dropdown menu={{ items: menuItems, onClick: handleMenuClick }} trigger={['click']}>
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontal} size={size} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/memory/preferences/features/PreferenceDropdown.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, type ActionIconProps, Dropdown } from '@lobehub/ui';
+import { ActionIcon, type ActionIconProps, DropdownMenu } from '@lobehub/ui';
 import { App } from 'antd';
 import { MoreHorizontal, Pencil, Trash2 } from 'lucide-react';
 import { type KeyboardEvent, type MouseEvent, memo } from 'react';
@@ -47,19 +47,21 @@ const PreferenceDropdown = memo<PreferenceDropdownProps>(({ id, size = 'small' }
       icon: <Pencil size={14} />,
       key: 'edit',
       label: t('preference.actions.edit'),
+      onClick: handleMenuClick,
     },
     {
       danger: true,
       icon: <Trash2 size={14} />,
       key: 'delete',
       label: t('preference.actions.delete'),
+      onClick: handleMenuClick,
     },
   ];
 
   return (
-    <Dropdown menu={{ items: menuItems, onClick: handleMenuClick }} trigger={['click']}>
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontal} size={size} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { ActionIcon, Dropdown } from '@lobehub/ui';
-import type { MenuProps } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, type MenuProps } from '@lobehub/ui';
 import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 
@@ -11,18 +10,9 @@ const Actions = memo(() => {
   const items: MenuProps['items'] = useDropdownMenu();
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={items}>
       <ActionIcon icon={MoreHorizontal} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/page/_layout/Body/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Accordion, AccordionItem, Dropdown, Flexbox, Text } from '@lobehub/ui';
+import { Accordion, AccordionItem, ContextMenuTrigger, Flexbox, Text } from '@lobehub/ui';
 import React, { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -44,14 +44,7 @@ const Body = memo(() => {
         <AccordionItem
           action={<Actions />}
           headerWrapper={(header) => (
-            <Dropdown
-              menu={{
-                items: dropdownMenu,
-              }}
-              trigger={['contextMenu']}
-            >
-              {header}
-            </Dropdown>
+            <ContextMenuTrigger items={dropdownMenu}>{header}</ContextMenuTrigger>
           )}
           itemKey={GroupKey.AllPages}
           paddingBlock={4}

package/src/app/[variants]/(main)/resource/features/DndContextWrapper.tsx

@@ -61,7 +61,7 @@ interface DragState {
 const DragStateContext = createContext<{
   currentDrag: DragState | null;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setCurrentDrag: (state: DragState | null) => void;
+  setCurrentDrag: (_state: DragState | null) => void;
 }>({
   currentDrag: null,
   setCurrentDrag: () => {},

package/src/app/[variants]/(main)/settings/profile/features/SSOProvidersList/index.tsx

@@ -1,5 +1,5 @@
 import { isDesktop } from '@lobechat/const';
-import { ActionIcon, Dropdown, Flexbox, type MenuProps, Text } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, Flexbox, type MenuProps, Text } from '@lobehub/ui';
 import { ArrowRight, Plus, Unlink } from 'lucide-react';
 import { type CSSProperties, memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -120,13 +120,13 @@ export const SSOProvidersList = memo(() => {
 
       {/* Link Account Button - Only show for Better-Auth users with available providers */}
       {enableBetterAuthActions && availableProviders.length > 0 && (
-        <Dropdown menu={{ items: linkMenuItems, style: { maxWidth: '200px' } }} trigger={['click']}>
+        <DropdownMenu items={linkMenuItems} popupProps={{ style: { maxWidth: '200px' } }}>
           <Flexbox align={'center'} gap={6} horizontal style={{ cursor: 'pointer', fontSize: 12 }}>
             <Plus size={14} />
             <span>{t('profile.sso.link.button')}</span>
             <ArrowRight size={14} />
           </Flexbox>
-        </Dropdown>
+        </DropdownMenu>
       )}
     </Flexbox>
   );

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/Actions.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Dropdown, type MenuProps } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, type MenuProps } from '@lobehub/ui';
 import { MoreHorizontalIcon } from 'lucide-react';
 import { memo } from 'react';
 
@@ -8,17 +8,9 @@ interface ActionsProps {
 
 const Actions = memo<ActionsProps>(({ dropdownMenu }) => {
   return (
-    <Dropdown
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={dropdownMenu}>
       <ActionIcon icon={MoreHorizontalIcon} size={'small'} style={{ flex: 'none' }} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/List.tsx

@@ -1,6 +1,13 @@
 'use client';
 
-import { Accordion, AccordionItem, ActionIcon, Dropdown, Flexbox, Text } from '@lobehub/ui';
+import {
+  Accordion,
+  AccordionItem,
+  ActionIcon,
+  ContextMenuTrigger,
+  Flexbox,
+  Text,
+} from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { ArrowDownUpIcon } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
@@ -113,16 +120,7 @@ const ProviderList = (props: {
               />
             </div>
           }
-          headerWrapper={(header) => (
-            <Dropdown
-              menu={{
-                items: [],
-              }}
-              trigger={['contextMenu']}
-            >
-              {header}
-            </Dropdown>
-          )}
+          headerWrapper={(header) => <ContextMenuTrigger items={[]}>{header}</ContextMenuTrigger>}
           itemKey="enabled"
           paddingBlock={4}
           paddingInline={'8px 4px'}
@@ -142,16 +140,7 @@ const ProviderList = (props: {
         {/* Custom Providers */}
         {disabledCustomProviderList.length > 0 && (
           <AccordionItem
-            headerWrapper={(header) => (
-              <Dropdown
-                menu={{
-                  items: [],
-                }}
-                trigger={['contextMenu']}
-              >
-                {header}
-              </Dropdown>
-            )}
+            headerWrapper={(header) => <ContextMenuTrigger items={[]}>{header}</ContextMenuTrigger>}
             itemKey="custom"
             paddingBlock={4}
             paddingInline={'8px 4px'}
@@ -177,14 +166,9 @@ const ProviderList = (props: {
             ) : undefined
           }
           headerWrapper={(header) => (
-            <Dropdown
-              menu={{
-                items: disabledModelProviderList.length > 1 ? dropdownMenu : [],
-              }}
-              trigger={['contextMenu']}
-            >
+            <ContextMenuTrigger items={disabledModelProviderList.length > 1 ? dropdownMenu : []}>
               {header}
-            </Dropdown>
+            </ContextMenuTrigger>
           )}
           itemKey="disabled"
           paddingBlock={4}

package/src/app/[variants]/(main)/settings/provider/features/ModelList/DisabledModels.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Dropdown, Flexbox, Icon, Text, TooltipGroup } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, Flexbox, Icon, Text, TooltipGroup } from '@lobehub/ui';
 import type { ItemType } from 'antd/es/menu/interface';
 import isEqual from 'fast-deep-equal';
 import { ArrowDownUpIcon, LucideCheck } from 'lucide-react';
@@ -240,9 +240,9 @@ const DisabledModels = memo<DisabledModelsProps>(({ activeTab, providerId }) =>
             {t('providerModels.list.disabled')}
           </Text>
           {sourceDisabledModels.length > 1 && (
-            <Dropdown
-              menu={{
-                items: [
+            <DropdownMenu
+              items={
+                [
                   {
                     icon: sortType === SortType.Default ? <Icon icon={LucideCheck} /> : <div />,
                     key: 'default',
@@ -286,16 +286,15 @@ const DisabledModels = memo<DisabledModelsProps>(({ activeTab, providerId }) =>
                     label: t('providerModels.list.disabledActions.sortReleasedAtDesc'),
                     onClick: () => updateSortType(SortType.ReleasedAtDesc),
                   },
-                ] as ItemType[],
-              }}
-              trigger={['click']}
+                ] as ItemType[]
+              }
             >
               <ActionIcon
                 icon={ArrowDownUpIcon}
                 size={'small'}
                 title={t('providerModels.list.disabledActions.sort')}
               />
-            </Dropdown>
+            </DropdownMenu>
           )}
         </Flexbox>
         <TooltipGroup>

package/src/app/[variants]/(main)/settings/provider/features/ModelList/ModelTitle/index.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Dropdown, Flexbox, Skeleton, Text } from '@lobehub/ui';
+import { ActionIcon, Button, DropdownMenu, Flexbox, Skeleton, Text } from '@lobehub/ui';
 import { App, Space } from 'antd';
 import { cssVar } from 'antd-style';
 import { CircleX, EllipsisVertical, LucideRefreshCcwDot, PlusIcon } from 'lucide-react';
@@ -137,28 +137,26 @@ const ModelTitle = memo<ModelFetcherProps>(
                     <CreateNewModelModal open={showModal} setOpen={setShowModal} />
                   </>
                 )}
-                <Dropdown
-                  menu={{
-                    items: [
-                      {
-                        key: 'reset',
-                        label: t('providerModels.list.resetAll.title'),
-                        onClick: async () => {
-                          modal.confirm({
-                            content: t('providerModels.list.resetAll.conform'),
-                            onOk: async () => {
-                              await clearModelsByProvider(provider);
-                              message.success(t('providerModels.list.resetAll.success'));
-                            },
-                            title: t('providerModels.list.resetAll.title'),
-                          });
-                        },
+                <DropdownMenu
+                  items={[
+                    {
+                      key: 'reset',
+                      label: t('providerModels.list.resetAll.title'),
+                      onClick: async () => {
+                        modal.confirm({
+                          content: t('providerModels.list.resetAll.conform'),
+                          onOk: async () => {
+                            await clearModelsByProvider(provider);
+                            message.success(t('providerModels.list.resetAll.success'));
+                          },
+                          title: t('providerModels.list.resetAll.title'),
+                        });
                       },
-                    ],
-                  }}
+                    },
+                  ]}
                 >
                   <Button icon={EllipsisVertical} size={'small'} />
-                </Dropdown>
+                </DropdownMenu>
               </Space.Compact>
             </Flexbox>
           )}

package/src/app/[variants]/(mobile)/(home)/features/SessionListContent/CollapseGroup/Actions.tsx

@@ -1,4 +1,10 @@
-import { ActionIcon, Dropdown, type DropdownProps, Icon, type MenuProps } from '@lobehub/ui';
+import {
+  ActionIcon,
+  DropdownMenu,
+  type DropdownMenuProps,
+  Icon,
+  type MenuProps,
+} from '@lobehub/ui';
 import { App } from 'antd';
 import { createStaticStyles } from 'antd-style';
 import { MoreVertical, PencilLine, Plus, Settings2, Trash, UsersRound } from 'lucide-react';
@@ -15,7 +21,7 @@ const styles = createStaticStyles(({ css }) => ({
     z-index: 2000;
   `,
 }));
-interface ActionsProps extends Pick<DropdownProps, 'onOpenChange'> {
+interface ActionsProps extends Pick<DropdownMenuProps, 'onOpenChange'> {
   id?: string;
   isCustomGroup?: boolean;
   isPinned?: boolean;
@@ -170,17 +176,7 @@ const Actions = memo<ActionsProps>(
 
     return (
       <>
-        <Dropdown
-          arrow={false}
-          menu={{
-            items: menuItems,
-            onClick: ({ domEvent }) => {
-              domEvent.stopPropagation();
-            },
-          }}
-          onOpenChange={onOpenChange}
-          trigger={['click']}
-        >
+        <DropdownMenu items={menuItems} onOpenChange={onOpenChange}>
           <ActionIcon
             active={isMobile ? true : false}
             icon={MoreVertical}
@@ -191,7 +187,7 @@ const Actions = memo<ActionsProps>(
             size={{ blockSize: 22, size: 16 }}
             style={{ background: isMobile ? 'transparent' : '', marginRight: -8 }}
           />
-        </Dropdown>
+        </DropdownMenu>
 
         <MemberSelectionModal
           mode="create"