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

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"

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

@@ -1,4 +1,4 @@
-import { ActionIcon, Dropdown, Icon } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, Icon } from '@lobehub/ui';
 import { App } from 'antd';
 import { createStaticStyles } from 'antd-style';
 import { type ItemType } from 'antd/es/menu/interface';
@@ -183,17 +183,7 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, parentType
   );
 
   return (
-    <Dropdown
-      arrow={false}
-      menu={{
-        items,
-        onClick: ({ domEvent }) => {
-          domEvent.stopPropagation();
-        },
-      }}
-      onOpenChange={setOpen}
-      trigger={['click']}
-    >
+    <DropdownMenu items={items} onOpenChange={setOpen}>
       <ActionIcon
         icon={MoreVertical}
         size={{
@@ -201,7 +191,7 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, parentType
           size: 16,
         }}
       />
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/app/[variants]/share/t/[id]/SharedMessageList.tsx

@@ -40,8 +40,8 @@ const SharedMessageList = memo<SharedMessageListProps>(({ agentId, groupId, shar
       context={context}
       hasInitMessages={!!messages}
       messages={messages}
-      onMessagesChange={(messages) => {
-        replaceMessages(messages, { context });
+      onMessagesChange={(messages, ctx) => {
+        replaceMessages(messages, { context: ctx });
       }}
     >
       <Flexbox flex={1}>

package/src/business/server/lambda-routers/file.ts

@@ -8,5 +8,5 @@ export interface BusinessFileUploadCheckParams {
 
 export async function businessFileUploadCheck(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  params: BusinessFileUploadCheckParams,
+  _params: BusinessFileUploadCheckParams,
 ): Promise<void> {}

package/src/features/AgentBuilder/AgentBuilderProvider.tsx

@@ -46,8 +46,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/features/ChatInput/ActionBar/History/index.tsx

@@ -55,7 +55,7 @@ const History = memo(() => {
       popover={{
         content: <Controls setUpdating={setUpdating} updating={updating} />,
         minWidth: 240,
-        trigger: isMobile ? ['click'] : ['hover'],
+        trigger: isMobile ? 'click' : 'hover',
       }}
       showTooltip={false}
       title={title}

package/src/features/ChatInput/ActionBar/STT/common.tsx

@@ -104,7 +104,7 @@ const CommonSTT = memo<{
                 />
               )
             : undefined,
-          trigger: ['click'],
+          trigger: 'click',
         }}
         icon={isLoading ? MicOff : Mic}
         onClick={handleTriggerStartStop}

package/src/features/ChatInput/ActionBar/Search/index.tsx

@@ -51,7 +51,7 @@ const Search = memo(() => {
             padding: 4,
           },
         },
-        trigger: isMobile ? ['click'] : ['hover'],
+        trigger: isMobile ? 'click' : 'hover',
       }}
       showTooltip={false}
       title={t('search.title')}

package/src/features/ChatInput/ActionBar/Upload/ServerMode.tsx

@@ -231,6 +231,7 @@ const FileUpload = memo(() => {
       loading={updating}
       showTooltip={false}
       title={t('upload.action.tooltip')}
+      trigger={'both'}
     />
   );
 

package/src/features/ChatInput/ActionBar/components/Action.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ActionIcon, type ActionIconProps } from '@lobehub/ui';
+import { ActionIcon, type ActionIconProps, type PopoverTrigger } from '@lobehub/ui';
 import { isUndefined } from 'es-toolkit/compat';
 import { memo } from 'react';
 import useMergeState from 'use-merge-value';
@@ -12,12 +12,12 @@ import ActionDropdown, { type ActionDropdownProps } from './ActionDropdown';
 import ActionPopover, { type ActionPopoverProps } from './ActionPopover';
 
 interface ActionProps extends Omit<ActionIconProps, 'popover'> {
-  dropdown?: ActionDropdownProps;
+  dropdown?: Omit<ActionDropdownProps, 'children'>;
   onOpenChange?: (open: boolean) => void;
   open?: boolean;
   popover?: ActionPopoverProps;
   showTooltip?: boolean;
-  trigger?: ActionDropdownProps['trigger'];
+  trigger?: PopoverTrigger;
 }
 
 const Action = memo<ActionProps>(
@@ -84,11 +84,7 @@ const Action = memo<ActionProps>(
         <ActionPopover
           onOpenChange={setShow}
           open={show}
-          trigger={
-            Array.isArray(trigger)
-              ? (trigger.filter((t) => t !== 'contextMenu') as ('click' | 'hover')[])
-              : trigger
-          }
+          trigger={trigger}
           {...popover}
           minWidth={mobile ? '100%' : popover.minWidth}
           placement={mobile ? 'top' : (dropdownPlacement ?? popover.placement)}

package/src/features/ChatInput/ActionBar/components/ActionDropdown.tsx

@@ -1,68 +1,256 @@
 'use client';
 
-import { Dropdown, type DropdownProps } from '@lobehub/ui';
+import {
+  DropdownMenuPopup,
+  type DropdownMenuPopupProps,
+  DropdownMenuPortal,
+  DropdownMenuPositioner,
+  type DropdownMenuProps,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  type MenuProps,
+  type PopoverTrigger,
+  renderDropdownMenuItems,
+} from '@lobehub/ui';
 import { createStaticStyles, cx } from 'antd-style';
-import { memo } from 'react';
+import {
+  type CSSProperties,
+  type ReactNode,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { useIsMobile } from '@/hooks/useIsMobile';
 
-const prefixCls = 'ant';
-
 const styles = createStaticStyles(({ css }) => ({
   dropdownMenu: css`
-    &.${prefixCls}-dropdown-menu {
-      .${prefixCls}-dropdown-menu-item-group-list {
-        margin: 0;
-      }
-      .${prefixCls}-avatar {
-        margin-inline-end: var(--ant-margin-xs);
-      }
+    .ant-avatar {
+      margin-inline-end: var(--ant-margin-xs);
     }
   `,
 }));
 
-export interface ActionDropdownProps extends DropdownProps {
+type ActionDropdownMenu = Omit<Pick<MenuProps, 'className' | 'onClick' | 'style'>, 'items'> & {
+  items: MenuProps['items'] | (() => MenuProps['items']);
+};
+
+export interface ActionDropdownProps extends Omit<DropdownMenuProps, 'items'> {
   maxHeight?: number | string;
   maxWidth?: number | string;
+  menu: ActionDropdownMenu;
   minHeight?: number | string;
   minWidth?: number | string;
+  popupRender?: (menu: ReactNode) => ReactNode;
   /**
    * 是否在挂载时预渲染弹层，避免首次触发展开时的渲染卡顿
    */
   prefetch?: boolean;
+  trigger?: PopoverTrigger;
 }
 
 const ActionDropdown = memo<ActionDropdownProps>(
-  ({ menu, maxHeight, minWidth, maxWidth, children, placement = 'top', minHeight, ...rest }) => {
+  ({
+    children,
+    defaultOpen,
+    menu,
+    trigger,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    onOpenChange,
+    onOpenChangeComplete,
+    open,
+    placement = 'top',
+    popupProps,
+    popupRender,
+    portalProps,
+    positionerProps,
+    prefetch,
+
+    triggerProps,
+    ...rest
+  }) => {
     const isMobile = useIsMobile();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
+    const menuItemsRef = useRef<ReactNode[] | null>(null);
+
+    useEffect(() => {
+      if (open === undefined) return;
+      setUncontrolledOpen(open);
+    }, [open]);
+
+    const handleOpenChange = useCallback(
+      (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {
+        onOpenChange?.(nextOpen, details);
+        if (open === undefined) setUncontrolledOpen(nextOpen);
+      },
+      [onOpenChange, open],
+    );
+
+    const handleOpenChangeComplete = useCallback(
+      (nextOpen: boolean) => {
+        onOpenChangeComplete?.(nextOpen);
+        if (!nextOpen) menuItemsRef.current = null;
+      },
+      [onOpenChangeComplete],
+    );
+
+    const isOpen = open ?? uncontrolledOpen;
+    const openOnHover = useMemo(() => {
+      if (!trigger) return undefined;
+      if (trigger === 'both') return true;
+      if (Array.isArray(trigger)) return trigger.includes('hover');
+      return trigger === 'hover';
+    }, [trigger]);
+    const resolvedTriggerProps = useMemo(() => {
+      if (openOnHover === undefined) return triggerProps;
+      return {
+        ...triggerProps,
+        openOnHover,
+      };
+    }, [openOnHover, triggerProps]);
+
+    const decorateMenuItems = useCallback(
+      (items: MenuProps['items']): MenuProps['items'] => {
+        if (!items) return items;
+
+        return items.map((item) => {
+          if (!item) return item;
+          if ('type' in item && item.type === 'divider') return item;
+          if ('type' in item && item.type === 'group') {
+            return {
+              ...item,
+              children: item.children ? decorateMenuItems(item.children) : item.children,
+            };
+          }
+
+          if ('children' in item && item.children) {
+            return {
+              ...item,
+              children: decorateMenuItems(item.children),
+            };
+          }
+          const itemOnClick = 'onClick' in item ? item.onClick : undefined;
+
+          return {
+            ...item,
+            onClick: (info) => {
+              info.domEvent.preventDefault();
+              menu.onClick?.(info);
+              itemOnClick?.(info);
+            },
+          };
+        });
+      },
+      [menu],
+    );
+
+    const renderedItems = useMemo(() => {
+      if (!prefetch && !isOpen) return menuItemsRef.current;
+      const sourceItems = typeof menu.items === 'function' ? menu.items() : menu.items;
+      const nextItems = renderDropdownMenuItems(decorateMenuItems(sourceItems ?? []));
+
+      menuItemsRef.current = nextItems;
+
+      return nextItems;
+    }, [decorateMenuItems, isOpen, menu.items, prefetch]);
+
+    const menuContent = useMemo(() => {
+      if (!popupRender) return renderedItems;
+      return popupRender(renderedItems ?? null);
+    }, [popupRender, renderedItems]);
+
+    const resolvedPopupClassName = useMemo<DropdownMenuPopupProps['className']>(() => {
+      const popupClassName = popupProps?.className;
+      if (typeof popupClassName === 'function') {
+        return (state) => cx(styles.dropdownMenu, menu.className, popupClassName(state));
+      }
+      return cx(styles.dropdownMenu, menu.className, popupClassName);
+    }, [menu.className, popupProps?.className]);
+
+    const resolvedPopupStyle = useMemo<DropdownMenuPopupProps['style']>(() => {
+      const baseStyle: CSSProperties = {
+        maxHeight,
+        maxWidth: isMobile ? undefined : maxWidth,
+        minHeight,
+        minWidth: isMobile ? undefined : minWidth,
+        overflowX: 'hidden',
+        overflowY: 'scroll',
+        width: isMobile ? '100vw' : undefined,
+      };
+      const popupStyle = popupProps?.style;
+
+      if (typeof popupStyle === 'function') {
+        return (state) => ({
+          ...baseStyle,
+          ...menu.style,
+          ...popupStyle(state),
+        });
+      }
+
+      return {
+        ...baseStyle,
+        ...menu.style,
+        ...popupStyle,
+      };
+    }, [isMobile, maxHeight, maxWidth, menu.style, minHeight, minWidth, popupProps?.style]);
+
+    const resolvedPopupProps = useMemo(() => {
+      if (!popupProps) {
+        return {
+          className: resolvedPopupClassName,
+          style: resolvedPopupStyle,
+        };
+      }
+
+      return {
+        ...popupProps,
+        className: resolvedPopupClassName,
+        style: resolvedPopupStyle,
+      };
+    }, [popupProps, resolvedPopupClassName, resolvedPopupStyle]);
+
+    const { container: portalContainer, ...restPortalProps } = portalProps ?? {};
+    const resolvedPortalContainer = useMemo<HTMLElement | null | undefined>(() => {
+      if (!portalContainer) return portalContainer ?? undefined;
+      if (typeof portalContainer === 'object' && 'current' in portalContainer) {
+        const current = portalContainer.current;
+        if (!current) return null;
+        if (typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot) {
+          return current.host as HTMLElement;
+        }
+        return current as HTMLElement;
+      }
+      if (typeof ShadowRoot !== 'undefined' && portalContainer instanceof ShadowRoot) {
+        return portalContainer.host as HTMLElement;
+      }
+      return portalContainer as HTMLElement;
+    }, [portalContainer]);
 
     return (
-      <Dropdown
-        arrow={false}
-        destroyOnHidden={false}
-        menu={{
-          ...menu,
-          className: cx(styles.dropdownMenu, menu.className),
-          onClick: (e) => {
-            e.domEvent.preventDefault();
-            menu.onClick?.(e);
-          },
-          style: {
-            maxHeight,
-            maxWidth: isMobile ? undefined : maxWidth,
-            minHeight,
-            minWidth: isMobile ? undefined : minWidth,
-            overflowX: 'hidden',
-            overflowY: 'scroll',
-            width: isMobile ? '100vw' : undefined,
-            ...menu.style,
-          },
-        }}
-        placement={isMobile ? 'top' : placement}
+      <DropdownMenuRoot
         {...rest}
+        defaultOpen={defaultOpen}
+        onOpenChange={handleOpenChange}
+        onOpenChangeComplete={handleOpenChangeComplete}
+        open={open}
       >
-        {children}
-      </Dropdown>
+        <DropdownMenuTrigger {...resolvedTriggerProps}>{children}</DropdownMenuTrigger>
+        <DropdownMenuPortal container={resolvedPortalContainer} {...restPortalProps}>
+          <DropdownMenuPositioner
+            {...positionerProps}
+            hoverTrigger={Boolean(resolvedTriggerProps?.openOnHover)}
+            placement={isMobile ? 'top' : placement}
+          >
+            <DropdownMenuPopup {...resolvedPopupProps}>{menuContent}</DropdownMenuPopup>
+          </DropdownMenuPositioner>
+        </DropdownMenuPortal>
+      </DropdownMenuRoot>
     );
   },
 );

package/src/features/Conversation/ConversationProvider.tsx

@@ -42,8 +42,9 @@ export interface ConversationProviderProps {
    * Use this to sync messages back to external state (e.g., ChatStore)
    *
    * @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/Messages/Assistant/Actions/index.tsx

@@ -22,16 +22,20 @@ import { useAssistantActions } from './useAssistantActions';
 // 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/Messages/AssistantGroup/Actions/index.tsx

@@ -21,16 +21,20 @@ import { useGroupActions } from './useGroupActions';
 // 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