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

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+## [Version 2.0.0-next.299](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.298...v2.0.0-next.299)
+
+<sup>Released on **2026-01-17**</sup>
+
+#### ♻ Code Refactoring
+
+- **ui**: Migrate from Dropdown to DropdownMenu/ContextMenuTrigger components.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix topic messages display error when switch topic quickly.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **ui**: Migrate from Dropdown to DropdownMenu/ContextMenuTrigger components, closes [#11539](https://github.com/lobehub/lobe-chat/issues/11539) ([9c9d4b1](https://github.com/lobehub/lobe-chat/commit/9c9d4b1))
+
+#### What's fixed
+
+- **misc**: Fix topic messages display error when switch topic quickly, closes [#11542](https://github.com/lobehub/lobe-chat/issues/11542) ([371d91e](https://github.com/lobehub/lobe-chat/commit/371d91e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.298](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.297...v2.0.0-next.298)
 
 <sup>Released on **2026-01-16**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Fix topic messages display error when switch topic quickly."
+      ]
+    },
+    "date": "2026-01-17",
+    "version": "2.0.0-next.299"
+  },
   {
     "children": {
       "fixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.298",
+  "version": "2.0.0-next.299",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -206,7 +206,7 @@
     "@lobehub/icons": "^4.0.2",
     "@lobehub/market-sdk": "0.29.0",
     "@lobehub/tts": "^4.0.2",
-    "@lobehub/ui": "^4.19.0",
+    "@lobehub/ui": "^4.21.0",
     "@modelcontextprotocol/sdk": "^1.25.1",
     "@neondatabase/serverless": "^1.0.2",
     "@next/third-parties": "^16.1.1",

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Cron/Actions.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Dropdown } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 
@@ -10,21 +10,12 @@ interface ActionsProps {
 }
 
 const Actions = memo<ActionsProps>(({ cronJobId, topics }) => {
-  const dropdownMenu = useCronJobDropdownMenu(cronJobId, topics);
+  const menuItems = useCronJobDropdownMenu(cronJobId, topics);
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontal} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Topic/Actions.tsx

@@ -1,25 +1,16 @@
-import { ActionIcon, Dropdown } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 
 import { useTopicActionsDropdownMenu } from './useDropdownMenu';
 
 const Actions = memo(() => {
-  const dropdownMenu = useTopicActionsDropdownMenu();
+  const menuItems = useTopicActionsDropdownMenu();
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontal} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/agent/_layout/Sidebar/Topic/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 } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -28,14 +28,7 @@ const Topic = memo<TopicProps>(({ 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)/agent/features/Conversation/ConversationArea.tsx

@@ -48,8 +48,8 @@ const Conversation = memo(() => {
       context={context}
       hasInitMessages={!!messages}
       messages={messages}
-      onMessagesChange={(messages) => {
-        replaceMessages(messages, { context });
+      onMessagesChange={(messages, ctx) => {
+        replaceMessages(messages, { context: ctx });
       }}
       operationState={operationState}
     >

package/src/app/[variants]/(main)/agent/features/Conversation/Header/Tags/KnowledgeTag.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Dropdown, Icon, type MenuProps, Tag } from '@lobehub/ui';
-import { Flexbox } from '@lobehub/ui';
+import { DropdownMenu, Flexbox, Icon, type MenuProps, Tag } from '@lobehub/ui';
 import { LibraryBig } from 'lucide-react';
 import { memo } from 'react';
 
@@ -25,7 +24,7 @@ const PluginTag = memo<PluginTagProps>(({ data }) => {
   const count = data.length;
 
   return (
-    <Dropdown menu={{ items }}>
+    <DropdownMenu items={items}>
       <div>
         <Tag>
           {<Icon icon={LibraryBig} />}
@@ -35,7 +34,7 @@ const PluginTag = memo<PluginTagProps>(({ data }) => {
           {count > 1 && <div>({data.length - 1}+)</div>}
         </Tag>
       </div>
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/agent/profile/features/ProfileEditor/MentionList/types.ts

@@ -1,5 +1,5 @@
 import type { API } from '@lobechat/prompts';
-import type { DropdownMenuItemType } from '@lobehub/ui';
+import type { DropdownItem } from '@lobehub/ui';
 
 export type MentionEntityType = 'collection' | 'api';
 
@@ -14,7 +14,9 @@ export interface MentionMetadata {
   type?: MentionEntityType;
 }
 
-export type MentionListOption = DropdownMenuItemType & {
+type MentionMenuItem = Extract<DropdownItem, { type?: 'item' }>;
+
+export type MentionListOption = MentionMenuItem & {
   description?: string;
   metadata?: MentionMetadata;
 };

package/src/app/[variants]/(main)/community/(detail)/model/features/Sidebar/ActionButton/ChatWithModel.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ProviderIcon } from '@lobehub/icons';
-import { Button, Icon } from '@lobehub/ui';
+import { Button, DropdownMenu, Icon } from '@lobehub/ui';
 import { Dropdown } from 'antd';
 import { createStaticStyles } from 'antd-style';
 import { ChevronDownIcon } from 'lucide-react';
@@ -69,12 +69,7 @@ const ChatWithModel = memo(() => {
     );
 
   return (
-    <Dropdown
-      menu={{
-        items,
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu data-no-highlight items={items}>
       <Button
         className={styles.button}
         size={'large'}
@@ -83,7 +78,7 @@ const ChatWithModel = memo(() => {
       >
         {t('models.guide')}
       </Button>
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/community/(list)/assistant/features/MarketSourceSwitch.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { Dropdown, type DropdownMenuItemType, Icon , Button } from '@lobehub/ui';
+import {
+  Button,
+  type DropdownItem,
+  DropdownMenu,
+  type DropdownMenuCheckboxItem,
+  Icon,
+} from '@lobehub/ui';
 import { ChevronDown, Store } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,18 +21,22 @@ const MarketSourceSwitch = memo(() => {
   const query = useQuery() as { source?: AssistantMarketSource };
   const currentSource = (query.source as AssistantMarketSource) ?? 'new';
 
-  const items = useMemo(
-    () =>
-      [
-        {
-          key: 'new',
-          label: t('assistants.marketSource.new'),
-        },
-        {
-          key: 'legacy',
-          label: t('assistants.marketSource.legacy'),
-        },
-      ] satisfies DropdownMenuItemType[],
+  type MarketSourceItem = Extract<DropdownItem, { type?: 'item' }> & {
+    key: AssistantMarketSource;
+    label: string;
+  };
+
+  const items = useMemo<MarketSourceItem[]>(
+    () => [
+      {
+        key: 'new',
+        label: t('assistants.marketSource.new'),
+      },
+      {
+        key: 'legacy',
+        label: t('assistants.marketSource.legacy'),
+      },
+    ],
     [t],
   );
 
@@ -39,22 +49,33 @@ const MarketSourceSwitch = memo(() => {
     });
   };
 
+  const menuItems = useMemo<DropdownMenuCheckboxItem[]>(
+    () =>
+      items.map(
+        (item): DropdownMenuCheckboxItem => ({
+          checked: item.key === currentSource,
+          closeOnClick: true,
+          key: item.key,
+          label: item.label,
+          onCheckedChange: (checked: boolean) => {
+            if (checked) {
+              handleChange(item.key);
+            }
+          },
+          type: 'checkbox',
+        }),
+      ),
+    [currentSource, handleChange, items],
+  );
+
   return (
-    <Dropdown
-      menu={{
-        // @ts-expect-error 等待 antd 修复
-        activeKey: currentSource,
-        items,
-        onClick: ({ key }) => handleChange(key as AssistantMarketSource),
-      }}
-      trigger={['click', 'hover']}
-    >
+    <DropdownMenu items={menuItems} trigger="both">
       <Button icon={<Icon icon={Store} />} type={'text'}>
         {t('assistants.marketSource.label')}:{' '}
         {items.find((item) => item.key === currentSource)?.label}
         <Icon icon={ChevronDown} />
       </Button>
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/community/(list)/features/SortButton/index.tsx

@@ -1,11 +1,17 @@
-import { Button, Dropdown, type DropdownMenuItemType, Icon } from '@lobehub/ui';
+import {
+  Button,
+  type DropdownItem,
+  DropdownMenu,
+  type DropdownMenuCheckboxItem,
+  Icon,
+} from '@lobehub/ui';
 import { ArrowDownWideNarrow, ChevronDown } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { useMarketAuth } from '@/layout/AuthProvider/MarketAuth';
-import { usePathname , useQuery } from '@/libs/router/navigation';
+import { usePathname, useQuery } from '@/libs/router/navigation';
 import {
   AssistantSorts,
   DiscoverTab,
@@ -22,7 +28,11 @@ const SortButton = memo(() => {
   const router = useQueryRoute();
   const { isAuthenticated, getCurrentUserInfo } = useMarketAuth();
   const activeTab = useMemo(() => pathname.split('community/')[1] as DiscoverTab, [pathname]);
-  const items = useMemo(() => {
+  type SortItem = Extract<DropdownItem, { type?: 'item' }> & {
+    key: string;
+  };
+
+  const items = useMemo<SortItem[]>(() => {
     switch (activeTab) {
       case DiscoverTab.Assistants: {
         const baseItems = [
@@ -153,8 +163,8 @@ const SortButton = memo(() => {
             label: t('mcp.sorts.updatedAt'),
           },
           {
+            key: McpSorts.CreatedAt,
             label: t('mcp.sorts.createdAt'),
-            value: McpSorts.CreatedAt,
           },
         ];
       }
@@ -164,12 +174,12 @@ const SortButton = memo(() => {
     }
   }, [t, activeTab, isAuthenticated]);
 
-  const activeItem: any = useMemo(() => {
+  const activeItem = useMemo<SortItem | undefined>(() => {
     if (sort) {
-      const findItem = items?.find((item: any) => item.key === sort);
+      const findItem = items.find((item) => String(item.key) === sort);
       if (findItem) return findItem;
     }
-    return items?.[0];
+    return items[0];
   }, [items, sort]);
 
   const handleSort = (config: string) => {
@@ -187,23 +197,34 @@ const SortButton = memo(() => {
     router.push(pathname, { query });
   };
 
-  if (items?.length === 0) return null;
+  const menuItems = useMemo<DropdownMenuCheckboxItem[]>(
+    () =>
+      items.map(
+        (item): DropdownMenuCheckboxItem => ({
+          checked: item.key === activeItem?.key,
+          closeOnClick: true,
+          key: item.key,
+          label: item.label,
+          onCheckedChange: (checked: boolean) => {
+            if (checked) {
+              handleSort(String(item.key));
+            }
+          },
+          type: 'checkbox',
+        }),
+      ),
+    [activeItem?.key, handleSort, items],
+  );
+
+  if (menuItems.length === 0) return null;
 
   return (
-    <Dropdown
-      menu={{
-        // @ts-expect-error 等待 antd 修复
-        activeKey: activeItem.key,
-        items: items as DropdownMenuItemType[],
-        onClick: ({ key }) => handleSort(key),
-      }}
-      trigger={['click', 'hover']}
-    >
+    <DropdownMenu items={menuItems} trigger="both">
       <Button data-testid="sort-dropdown" icon={<Icon icon={ArrowDownWideNarrow} />} type={'text'}>
-        {activeItem.label}
+        {activeItem?.label ?? menuItems[0]?.label}
         <Icon icon={ChevronDown} />
       </Button>
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/Actions.tsx

@@ -1,25 +1,16 @@
-import { ActionIcon, Dropdown } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu } from '@lobehub/ui';
 import { MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 
 import { useTopicActionsDropdownMenu } from './useDropdownMenu';
 
 const Actions = memo(() => {
-  const dropdownMenu = useTopicActionsDropdownMenu();
+  const menuItems = useTopicActionsDropdownMenu();
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontal} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/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 } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -28,14 +28,7 @@ const Topic = memo<TopicProps>(({ 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)/group/features/Conversation/ConversationArea.tsx

@@ -58,8 +58,8 @@ const Conversation = memo<ConversationAreaProps>(({ mobile = false }) => {
       hasInitMessages={!!messages}
       // hooks={groupHooks}
       messages={messages}
-      onMessagesChange={(messages) => {
-        replaceMessages(messages, { context });
+      onMessagesChange={(messages, ctx) => {
+        replaceMessages(messages, { context: ctx });
       }}
       operationState={operationState}
     >

package/src/app/[variants]/(main)/group/features/Conversation/Header/Tags/KnowledgeTag.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Dropdown, Icon, type MenuProps, Tag } from '@lobehub/ui';
-import { Flexbox } from '@lobehub/ui';
+import { DropdownMenu, Flexbox, Icon, type MenuProps, Tag } from '@lobehub/ui';
 import { LibraryBig } from 'lucide-react';
 import { memo } from 'react';
 
@@ -25,7 +24,7 @@ const PluginTag = memo<PluginTagProps>(({ data }) => {
   const count = data.length;
 
   return (
-    <Dropdown menu={{ items }}>
+    <DropdownMenu items={items}>
       <div>
         <Tag>
           {<Icon icon={LibraryBig} />}
@@ -35,7 +34,7 @@ const PluginTag = memo<PluginTagProps>(({ data }) => {
           {count > 1 && <div>({data.length - 1}+)</div>}
         </Tag>
       </div>
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/(main)/group/profile/features/AgentBuilder/AgentBuilderProvider.tsx

@@ -47,8 +47,8 @@ const AgentBuilderProvider = memo<AgentBuilderProviderProps>(({ agentId, childre
       context={context}
       hasInitMessages={!!messages}
       messages={messages}
-      onMessagesChange={(msgs) => {
-        replaceMessages(msgs, { context });
+      onMessagesChange={(msgs, ctx) => {
+        replaceMessages(msgs, { context: ctx });
       }}
       operationState={operationState}
     >

package/src/app/[variants]/(main)/group/profile/features/MemberProfile/MentionList/types.ts

@@ -1,5 +1,5 @@
 import type { API } from '@lobechat/prompts';
-import type { DropdownMenuItemType } from '@lobehub/ui';
+import type { DropdownItem } from '@lobehub/ui';
 
 export type MentionEntityType = 'collection' | 'api';
 
@@ -14,7 +14,9 @@ export interface MentionMetadata {
   type?: MentionEntityType;
 }
 
-export type MentionListOption = DropdownMenuItemType & {
+type MentionMenuItem = Extract<DropdownItem, { type?: 'item' }>;
+
+export type MentionListOption = MentionMenuItem & {
   description?: string;
   metadata?: MentionMetadata;
 };

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}