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

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

@@ -16,16 +16,20 @@ import { useUserActions } from './useUserActions';
 // Helper to strip handleClick from action items before passing to ActionIconGroup
 const stripHandleClick = (item: MessageActionItemOrDivider): ActionIconGroupItemType => {
   if ('type' in item && item.type === 'divider') return item as unknown as ActionIconGroupItemType;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { handleClick, children, ...rest } = item as MessageActionItem;
+  const { children, ...rest } = item as MessageActionItem;
+  const baseItem = { ...rest } as MessageActionItem;
+  delete (baseItem as { handleClick?: unknown }).handleClick;
   if (children) {
     return {
-      ...rest,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      children: children.map(({ handleClick: _, ...child }) => child),
+      ...baseItem,
+      children: children.map((child) => {
+        const nextChild = { ...child } as MessageActionItem;
+        delete (nextChild as { handleClick?: unknown }).handleClick;
+        return nextChild;
+      }),
     } as ActionIconGroupItemType;
   }
-  return rest as ActionIconGroupItemType;
+  return baseItem as ActionIconGroupItemType;
 };
 
 // Build action items map for handleAction lookup

package/src/features/Conversation/StoreUpdater.tsx

@@ -30,7 +30,7 @@ export interface StoreUpdaterProps {
   /**
    * Callback when messages are fetched or changed internally
    */
-  onMessagesChange?: (messages: UIChatMessage[]) => void;
+  onMessagesChange?: (messages: UIChatMessage[], context: ConversationContext) => void;
   /**
    * External operation state (from ChatStore)
    */

package/src/features/Conversation/store/initialState.ts

@@ -33,8 +33,10 @@ export interface State extends DataState, InputState, MessageStateState, VirtuaL
 
   /**
    * Callback when messages are fetched or changed internally
+   * @param messages - The updated messages array
+   * @param context - The context that this data belongs to (prevents race conditions)
    */
-  onMessagesChange?: (messages: UIChatMessage[]) => void;
+  onMessagesChange?: (messages: UIChatMessage[], context: ConversationContext) => void;
 
   /**
    * External operation state (from ChatStore)

package/src/features/Conversation/store/slices/data/action.ts

@@ -74,7 +74,7 @@ export const dataSlice: StateCreator<
     });
 
     // Sync changes to external store (ChatStore)
-    get().onMessagesChange?.(newDbMessages);
+    get().onMessagesChange?.(newDbMessages, get().context);
   },
 
   replaceMessages: (messages) => {
@@ -84,7 +84,7 @@ export const dataSlice: StateCreator<
     set({ dbMessages: messages, displayMessages: flatList }, false, 'replaceMessages');
 
     // Sync changes to external store (ChatStore)
-    get().onMessagesChange?.(messages);
+    get().onMessagesChange?.(messages, get().context);
   },
 
   switchMessageBranch: async (messageId, branchIndex) => {
@@ -106,7 +106,6 @@ export const dataSlice: StateCreator<
     // Also skip fetch when topicId is null (new conversation state) - there's no server data,
     // only local optimistic updates. Fetching would return empty array and overwrite local data.
     const shouldFetch = !skipFetch && !!context.agentId && !!context.topicId;
-
     return useClientDataSWRWithSync<UIChatMessage[]>(
       shouldFetch ? ['CONVERSATION_FETCH_MESSAGES', context] : null,
 
@@ -116,6 +115,7 @@ export const dataSlice: StateCreator<
       {
         onData: (data) => {
           if (!data) return;
+          if (!context.topicId) return;
 
           // Parse messages using conversation-flow
           const { flatList } = parse(data);
@@ -126,8 +126,9 @@ export const dataSlice: StateCreator<
             messagesInit: true,
           });
 
-          // Call onMessagesChange callback if provided
-          get().onMessagesChange?.(data);
+          // Call onMessagesChange callback with the request context (not current context)
+          // This ensures data is stored to the correct topic even if user switched topics
+          get().onMessagesChange?.(data, context);
         },
       },
     );

package/src/features/LibraryModal/AssignKnowledgeBase/Item/Action.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Dropdown, Flexbox, Icon } from '@lobehub/ui';
+import { ActionIcon, Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
 import { InfoIcon, MoreVerticalIcon, Trash2 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -54,36 +54,33 @@ const Actions = memo<ActionsProps>(({ id, type, enabled }) => {
   return (
     <Flexbox align={'center'} horizontal>
       {enabled ? (
-        <Dropdown
-          menu={{
-            items: [
-              {
-                icon: <Icon icon={InfoIcon} />,
-                key: 'detail',
-                label: t('knowledgeBase.library.action.detail'),
-                onClick: () => {
-                  if (type === KnowledgeType.KnowledgeBase) {
-                    window.open(`/resource/library/${id}`);
-                    return;
-                  }
+        <DropdownMenu
+          items={[
+            {
+              icon: <Icon icon={InfoIcon} />,
+              key: 'detail',
+              label: t('knowledgeBase.library.action.detail'),
+              onClick: () => {
+                if (type === KnowledgeType.KnowledgeBase) {
+                  window.open(`/resource/library/${id}`);
+                  return;
+                }
 
-                  window.open(`/knowledge?file=${id}`);
-                },
+                window.open(`/knowledge?file=${id}`);
               },
-              {
-                danger: true,
-                icon: <Icon icon={Trash2} />,
-                key: 'remove',
-                label: t('knowledgeBase.library.action.remove'),
-                onClick: removeKnowledge,
-              },
-            ],
-          }}
+            },
+            {
+              danger: true,
+              icon: <Icon icon={Trash2} />,
+              key: 'remove',
+              label: t('knowledgeBase.library.action.remove'),
+              onClick: removeKnowledge,
+            },
+          ]}
           placement="bottomRight"
-          trigger={['click']}
         >
           <ActionIcon icon={MoreVerticalIcon} loading={loading} />
-        </Dropdown>
+        </DropdownMenu>
       ) : (
         <Button
           loading={loading}

package/src/features/ModelSwitchPanel/components/List/MultipleProvidersModelItem.tsx

@@ -1,6 +1,5 @@
-import { ActionIcon, Dropdown } from '@lobehub/ui';
-import { MenuItemType } from 'antd/es/menu/interface';
-import { LucideBolt } from 'lucide-react';
+import { ActionIcon, type DropdownItem, DropdownMenu } from '@lobehub/ui';
+import { Check, LucideBolt } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -34,6 +33,8 @@ export const MultipleProvidersModelItem = memo<MultipleProvidersModelItemProps>(
             type: 'group',
           },
           ...data.providers.map((p) => {
+            const key = menuKey(p.id, data.model.id);
+
             return {
               extra: (
                 <ActionIcon
@@ -53,7 +54,8 @@ export const MultipleProvidersModelItem = memo<MultipleProvidersModelItemProps>(
                   title={t('ModelSwitchPanel.goToSettings')}
                 />
               ),
-              key: menuKey(p.id, data.model.id),
+              icon: activeKey === key ? Check : undefined,
+              key,
               label: (
                 <ProviderItemRender
                   logo={p.logo}
@@ -70,23 +72,19 @@ export const MultipleProvidersModelItem = memo<MultipleProvidersModelItemProps>(
               },
             };
           }),
-        ] as MenuItemType[],
-      [data.model.id, data.providers, navigate, onModelChange, onClose, t],
+        ] as DropdownItem[],
+      [activeKey, data.model.id, data.providers, navigate, onModelChange, onClose, t],
     );
 
     return (
-      <Dropdown
-        align={{ offset: [12, -48] }}
-        arrow={false}
-        classNames={{
-          item: styles.menuItem,
-        }}
-        menu={{
-          items,
-          selectedKeys: [activeKey],
-        }}
-        // @ts-ignore
+      <DropdownMenu
+        items={items}
         placement="rightTop"
+        popupProps={{ className: styles.dropdownMenu }}
+        positionerProps={{
+          alignOffset: -48,
+          sideOffset: 12,
+        }}
       >
         <ModelItemRender
           {...data.model}
@@ -95,7 +93,7 @@ export const MultipleProvidersModelItem = memo<MultipleProvidersModelItemProps>(
           newBadgeLabel={newLabel}
           showInfoTag={true}
         />
-      </Dropdown>
+      </DropdownMenu>
     );
   },
 );

package/src/features/ModelSwitchPanel/styles.ts

@@ -5,10 +5,27 @@ export const styles = createStaticStyles(({ css, cssVar }) => ({
     overflow: hidden;
     padding: 0 !important;
   `,
+  dropdownMenu: css`
+    [role='menuitem'] {
+      margin-block: 1px;
+      margin-inline: 4px;
+      padding-block: 8px;
+      padding-inline: 8px;
+      border-radius: ${cssVar.borderRadiusSM};
+    }
+
+    [role='menuitem'] .settings-icon {
+      opacity: 0;
+    }
+
+    [role='menuitem']:hover .settings-icon {
+      opacity: 1;
+    }
+  `,
+
   footer: css`
     border-block-start: 1px solid ${cssVar.colorBorderSecondary};
   `,
-
   groupHeader: css`
     width: 100%;
     color: ${cssVar.colorTextSecondary};

package/src/features/PageEditor/Copilot/AgentSelector/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';
 
@@ -7,21 +7,14 @@ interface ActionsProps {
 }
 
 const Actions = memo<ActionsProps>(({ dropdownMenu }) => {
-  if (!dropdownMenu || dropdownMenu.length === 0) return null;
+  const menuItems = dropdownMenu ?? [];
+
+  if (menuItems.length === 0) return null;
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items: dropdownMenu,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      trigger={['click']}
-    >
+    <DropdownMenu items={menuItems}>
       <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/PageEditor/PageAgentProvider.tsx

@@ -49,8 +49,8 @@ const PageAgentProvider = memo<PageAgentProviderProps>(({ pageAgentId, children
       context={context}
       hasInitMessages={!!messages}
       messages={messages}
-      onMessagesChange={(msgs) => {
-        replaceMessages(msgs, { context });
+      onMessagesChange={(msgs, ctx) => {
+        replaceMessages(msgs, { context: ctx });
       }}
       operationState={operationState}
     >

package/src/features/PluginStore/InstalledList/List/Item/Action.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Dropdown, Flexbox, Icon } from '@lobehub/ui';
+import { ActionIcon, Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
 import { App } from 'antd';
 import { InfoIcon, MoreVerticalIcon, PackageSearch, Settings, Trash2 } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -72,46 +72,43 @@ const Actions = memo<ActionsProps>(({ identifier, type, isMCP }) => {
                 title={t('store.actions.settings')}
               />
             )}
-            <Dropdown
-              menu={{
-                items: [
-                  {
-                    icon: <Icon icon={InfoIcon} />,
-                    key: 'detail',
-                    label: t('store.actions.detail'),
-                    onClick: () => {
-                      setOpen(true);
-                      setTab('info');
-                    },
+            <DropdownMenu
+              items={[
+                {
+                  icon: <Icon icon={InfoIcon} />,
+                  key: 'detail',
+                  label: t('store.actions.detail'),
+                  onClick: () => {
+                    setOpen(true);
+                    setTab('info');
                   },
-                  {
-                    danger: true,
-                    icon: <Icon icon={Trash2} />,
-                    key: 'uninstall',
-                    label: t('store.actions.uninstall'),
-                    onClick: () => {
-                      modal.confirm({
-                        centered: true,
-                        okButtonProps: { danger: true },
-                        onOk: async () => {
-                          // If plugin is enabled in current agent, disable it first
-                          if (isPluginEnabledInAgent) {
-                            await togglePlugin(identifier, false);
-                          }
-                          await unInstallPlugin(identifier);
-                        },
-                        title: t('store.actions.confirmUninstall'),
-                        type: 'error',
-                      });
-                    },
+                },
+                {
+                  danger: true,
+                  icon: <Icon icon={Trash2} />,
+                  key: 'uninstall',
+                  label: t('store.actions.uninstall'),
+                  onClick: () => {
+                    modal.confirm({
+                      centered: true,
+                      okButtonProps: { danger: true },
+                      onOk: async () => {
+                        // If plugin is enabled in current agent, disable it first
+                        if (isPluginEnabledInAgent) {
+                          await togglePlugin(identifier, false);
+                        }
+                        await unInstallPlugin(identifier);
+                      },
+                      title: t('store.actions.confirmUninstall'),
+                      type: 'error',
+                    });
                   },
-                ],
-              }}
+                },
+              ]}
               placement="bottomRight"
-              trigger={['click']}
             >
               <ActionIcon icon={MoreVerticalIcon} loading={installing} />
-            </Dropdown>
+            </DropdownMenu>
           </>
         ) : (
           <Button

package/src/features/PluginStore/McpList/List/Action.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Dropdown, Flexbox, Icon } from '@lobehub/ui';
+import { ActionIcon, Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
 import { App } from 'antd';
 import { MoreVerticalIcon, Trash2 } from 'lucide-react';
 import { memo } from 'react';
@@ -39,34 +39,31 @@ const Actions = memo<ActionsProps>(({ identifier }) => {
   return (
     <Flexbox align={'center'} horizontal>
       {installed ? (
-        <Dropdown
-          menu={{
-            items: [
-              {
-                danger: true,
-                icon: <Icon icon={Trash2} />,
-                key: 'uninstall',
-                label: t('store.actions.uninstall'),
-                onClick: () => {
-                  modal.confirm({
-                    centered: true,
-                    okButtonProps: { danger: true },
-                    onOk: async () => {
-                      // If plugin is enabled in current agent, disable it first
-                      if (isPluginEnabledInAgent) {
-                        await togglePlugin(identifier, false);
-                      }
-                      await unInstallPlugin(identifier);
-                    },
-                    title: t('store.actions.confirmUninstall'),
-                    type: 'error',
-                  });
-                },
+        <DropdownMenu
+          items={[
+            {
+              danger: true,
+              icon: <Icon icon={Trash2} />,
+              key: 'uninstall',
+              label: t('store.actions.uninstall'),
+              onClick: () => {
+                modal.confirm({
+                  centered: true,
+                  okButtonProps: { danger: true },
+                  onOk: async () => {
+                    // If plugin is enabled in current agent, disable it first
+                    if (isPluginEnabledInAgent) {
+                      await togglePlugin(identifier, false);
+                    }
+                    await unInstallPlugin(identifier);
+                  },
+                  title: t('store.actions.confirmUninstall'),
+                  type: 'error',
+                });
               },
-            ],
-          }}
+            },
+          ]}
           placement="bottomRight"
-          trigger={['click']}
         >
           <ActionIcon
             icon={MoreVerticalIcon}
@@ -75,7 +72,7 @@ const Actions = memo<ActionsProps>(({ identifier }) => {
               e.stopPropagation();
             }}
           />
-        </Dropdown>
+        </DropdownMenu>
       ) : installing ? (
         <Button
           onClick={async (e) => {

package/src/features/PluginStore/PluginList/List/Action.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Button, Dropdown, Flexbox, Icon } from '@lobehub/ui';
+import { ActionIcon, Button, DropdownMenu, Flexbox, Icon } from '@lobehub/ui';
 import { App } from 'antd';
 import { MoreVerticalIcon, Trash2 } from 'lucide-react';
 import { memo } from 'react';
@@ -31,37 +31,34 @@ const Actions = memo<ActionsProps>(({ identifier }) => {
   return (
     <Flexbox align={'center'} horizontal>
       {installed ? (
-        <Dropdown
-          menu={{
-            items: [
-              {
-                danger: true,
-                icon: <Icon icon={Trash2} />,
-                key: 'uninstall',
-                label: t('store.actions.uninstall'),
-                onClick: () => {
-                  modal.confirm({
-                    centered: true,
-                    okButtonProps: { danger: true },
-                    onOk: async () => {
-                      // If plugin is enabled in current agent, disable it first
-                      if (isPluginEnabledInAgent) {
-                        await togglePlugin(identifier, false);
-                      }
-                      await unInstallPlugin(identifier);
-                    },
-                    title: t('store.actions.confirmUninstall'),
-                    type: 'error',
-                  });
-                },
+        <DropdownMenu
+          items={[
+            {
+              danger: true,
+              icon: <Icon icon={Trash2} />,
+              key: 'uninstall',
+              label: t('store.actions.uninstall'),
+              onClick: () => {
+                modal.confirm({
+                  centered: true,
+                  okButtonProps: { danger: true },
+                  onOk: async () => {
+                    // If plugin is enabled in current agent, disable it first
+                    if (isPluginEnabledInAgent) {
+                      await togglePlugin(identifier, false);
+                    }
+                    await unInstallPlugin(identifier);
+                  },
+                  title: t('store.actions.confirmUninstall'),
+                  type: 'error',
+                });
               },
-            ],
-          }}
+            },
+          ]}
           placement="bottomRight"
-          trigger={['click']}
         >
           <ActionIcon icon={MoreVerticalIcon} loading={installing} />
-        </Dropdown>
+        </DropdownMenu>
       ) : (
         <Button
           loading={installing}

package/src/features/PluginTag/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Dropdown, Icon, type MenuProps, Tag } from '@lobehub/ui';
-import { Center } from '@lobehub/ui';
+import { Center, DropdownMenu, Icon, type MenuProps, Tag } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
@@ -49,7 +48,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
   const count = plugins.length;
 
   return (
-    <Dropdown menu={{ items }}>
+    <DropdownMenu items={items}>
       <div>
         <Tag>
           {<Icon icon={LucideToyBrick} />}
@@ -57,7 +56,7 @@ const PluginTag = memo<PluginTagProps>(({ plugins }) => {
           {count > 1 && <div>({plugins.length - 1}+)</div>}
         </Tag>
       </div>
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/Portal/Artifacts/Body/Renderer/SVG.tsx

@@ -1,6 +1,6 @@
 import { BRANDING_NAME } from '@lobechat/business-const';
 import { copyImageToClipboard, sanitizeSVGContent } from '@lobechat/utils/client';
-import { Button, Center, Dropdown, Flexbox, Tooltip } from '@lobehub/ui';
+import { Button, Center, DropdownMenu, Flexbox, Tooltip } from '@lobehub/ui';
 import { snapdom } from '@zumer/snapdom';
 import { App, Space } from 'antd';
 import { css, cx } from 'antd-style';
@@ -98,19 +98,22 @@ const SVGRenderer = ({ content }: SVGRendererProps) => {
       />
       <Flexbox className={cx(actions)}>
         <Space.Compact>
-          <Dropdown
-            menu={{
-              items: [
-                { key: 'png', label: t('artifacts.svg.download.png') },
-                { key: 'svg', label: t('artifacts.svg.download.svg') },
-              ],
-              onClick: ({ key }) => {
-                downloadImage(key);
+          <DropdownMenu
+            items={[
+              {
+                key: 'png',
+                label: t('artifacts.svg.download.png'),
+                onClick: () => downloadImage('png'),
               },
-            }}
+              {
+                key: 'svg',
+                label: t('artifacts.svg.download.svg'),
+                onClick: () => downloadImage('svg'),
+              },
+            ]}
           >
             <Button icon={DownloadIcon} />
-          </Dropdown>
+          </DropdownMenu>
           <Tooltip title={t('artifacts.svg.copyAsImage')}>
             <Button
               icon={CopyIcon}

package/src/features/Portal/Thread/Chat/index.tsx

@@ -204,8 +204,8 @@ const ThreadChat = memo(() => {
       hasInitMessages={!!messages}
       hooks={hooks}
       messages={messages}
-      onMessagesChange={(msgs) => {
-        replaceMessages(msgs, { context });
+      onMessagesChange={(msgs, ctx) => {
+        replaceMessages(msgs, { context: ctx });
       }}
       operationState={operationState}
       skipFetch={isCreatingNewThread}

package/src/features/ProfileEditor/AgentTool.tsx

@@ -617,7 +617,7 @@ const AgentTool = memo<AgentToolProps>(
                   </div>
                 </div>
               )}
-              trigger={['click']}
+              trigger={'click'}
             >
               {button}
             </ActionDropdown>