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

package/src/app/[variants]/(main)/home/_layout/Body/Agent/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';
 
@@ -9,22 +9,14 @@ interface ActionsProps {
 
 const Actions = memo<ActionsProps>(({ dropdownMenu, isLoading }) => {
   return (
-    <Dropdown
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={dropdownMenu}>
       <ActionIcon
         icon={MoreHorizontalIcon}
         loading={isLoading}
         size={'small'}
         style={{ flex: 'none' }}
       />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/home/_layout/Body/Agent/List/Group/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';
 
@@ -9,16 +9,7 @@ interface ActionsProps {
 
 const Actions = memo<ActionsProps>(({ dropdownMenu, isLoading }) => {
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={dropdownMenu}>
       <ActionIcon
         icon={MoreHorizontalIcon}
         loading={isLoading}
@@ -27,7 +18,7 @@ const Actions = memo<ActionsProps>(({ dropdownMenu, isLoading }) => {
         }}
         size={'small'}
       />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

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

@@ -1,5 +1,5 @@
 import type { SidebarGroup } from '@lobechat/types';
-import { AccordionItem, Dropdown, Flexbox, Icon, Text } from '@lobehub/ui';
+import { AccordionItem, ContextMenuTrigger, Flexbox, Icon, Text } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
 import { HashIcon, Loader2 } from 'lucide-react';
 import React, { memo, useCallback, useMemo } from 'react';
@@ -61,14 +61,7 @@ const GroupItem = memo<SidebarGroup>(({ items, id, name }) => {
       action={<Actions dropdownMenu={dropdownMenu} isLoading={isLoading} />}
       disabled={editing || isUpdating}
       headerWrapper={(header) => (
-        <Dropdown
-          menu={{
-            items: dropdownMenu,
-          }}
-          trigger={['contextMenu']}
-        >
-          {header}
-        </Dropdown>
+        <ContextMenuTrigger items={dropdownMenu}>{header}</ContextMenuTrigger>
       )}
       itemKey={id}
       key={id}

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/_layout/HomeAgentIdSync.tsx

@@ -0,0 +1,23 @@
+import { useUnmount } from 'ahooks';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useAgentStore } from '@/store/agent';
+import { builtinAgentSelectors } from '@/store/agent/selectors';
+
+const HomeAgentIdSync = () => {
+  const useAgentStoreUpdater = createStoreUpdater(useAgentStore);
+
+  const inboxAgentId = useAgentStore(builtinAgentSelectors.inboxAgentId);
+
+  // Sync inbox agent id to activeAgentId when on home page
+  useAgentStoreUpdater('activeAgentId', inboxAgentId);
+
+  // Clear activeAgentId when unmounting (leaving home page)
+  useUnmount(() => {
+    useAgentStore.setState({ activeAgentId: undefined });
+  });
+
+  return null;
+};
+
+export default HomeAgentIdSync;

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

@@ -6,6 +6,7 @@ import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 import { useIsDark } from '@/hooks/useIsDark';
 import { useHomeStore } from '@/store/home';
 
+import HomeAgentIdSync from './HomeAgentIdSync';
 import RecentHydration from './RecentHydration';
 import Sidebar from './Sidebar';
 import { styles } from './style';
@@ -56,6 +57,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
           {content}
         </Flexbox>
 
+        <HomeAgentIdSync />
         <RecentHydration />
       </Flexbox>
     </Activity>

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}