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

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

package/src/features/Conversation/Messages/AssistantGroup/Tool/Detail/Intervention/ApprovalActions.tsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown, Flexbox, Popover } from '@lobehub/ui';
+import { Button, DropdownMenu, Flexbox, Popover } from '@lobehub/ui';
 import { Input, Space } from 'antd';
 import { ChevronDown } from 'lucide-react';
 import { memo, useState } from 'react';
@@ -140,17 +140,15 @@ const ApprovalActions = memo<ApprovalActionsProps>(
             >
               {t('tool.intervention.approveAndRemember')}
             </Button>
-            <Dropdown
-              menu={{
-                items: [
-                  {
-                    disabled: approveLoading || isMessageCreating,
-                    key: 'once',
-                    label: t('tool.intervention.approveOnce'),
-                    onClick: () => handleApprove(false),
-                  },
-                ],
-              }}
+            <DropdownMenu
+              items={[
+                {
+                  disabled: approveLoading || isMessageCreating,
+                  key: 'once',
+                  label: t('tool.intervention.approveOnce'),
+                  onClick: () => handleApprove(false),
+                },
+              ]}
             >
               <Button
                 disabled={approveLoading || isMessageCreating}
@@ -158,7 +156,7 @@ const ApprovalActions = memo<ApprovalActionsProps>(
                 size="small"
                 type="primary"
               />
-            </Dropdown>
+            </DropdownMenu>
           </Space.Compact>
         ) : (
           <Button

package/src/features/Conversation/Messages/AssistantGroup/Tool/Detail/Intervention/ModeSelector.tsx

@@ -1,7 +1,6 @@
-import { Button, Dropdown, Icon, type MenuProps } from '@lobehub/ui';
-import { Center } from '@lobehub/ui';
+import { Button, Center, DropdownMenu, Icon, type MenuProps } from '@lobehub/ui';
 import { createStaticStyles } from 'antd-style';
-import { ChevronDown, Hand, ListChecks, Zap } from 'lucide-react';
+import { Check, ChevronDown, Hand, ListChecks, Zap } from 'lucide-react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -61,6 +60,7 @@ const ModeSelector = memo(() => {
   const menuItems = useMemo<MenuProps['items']>(
     () => [
       {
+        extra: approvalMode === 'auto-run' ? <Icon icon={Check} /> : undefined,
         icon: (
           <Center className={styles.icon} height={32} width={32}>
             <Icon icon={Zap} />
@@ -76,6 +76,7 @@ const ModeSelector = memo(() => {
         onClick: () => handleModeChange('auto-run'),
       },
       {
+        extra: approvalMode === 'allow-list' ? <Icon icon={Check} /> : undefined,
         icon: (
           <Center className={styles.icon} height={32} width={32}>
             <Icon icon={ListChecks} />
@@ -91,6 +92,7 @@ const ModeSelector = memo(() => {
         onClick: () => handleModeChange('allow-list'),
       },
       {
+        extra: approvalMode === 'manual' ? <Icon icon={Check} /> : undefined,
         icon: (
           <Center className={styles.icon} height={32} width={32}>
             <Icon icon={Hand} />
@@ -106,15 +108,11 @@ const ModeSelector = memo(() => {
         onClick: () => handleModeChange('manual'),
       },
     ],
-    [modeLabels, handleModeChange, styles, t],
+    [approvalMode, modeLabels, handleModeChange, styles, t],
   );
 
   return (
-    <Dropdown
-      // @ts-expect-error activeKey 没在 Dropdown key 里很奇怪
-      menu={{ activeKey: approvalMode, items: menuItems }}
-      placement="bottomLeft"
-    >
+    <DropdownMenu items={menuItems} placement="bottomLeft">
       <Button
         className={styles.modeButton}
         color={'default'}
@@ -125,7 +123,7 @@ const ModeSelector = memo(() => {
       >
         {modeLabels[approvalMode]}
       </Button>
-    </Dropdown>
+    </DropdownMenu>
   );
 });
 

package/src/features/Conversation/Messages/Supervisor/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

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

@@ -18,16 +18,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