@lobehub/lobehub 2.0.0-next.306 → 2.0.0-next.308

package/src/app/[variants]/(main)/settings/common/index.tsx

@@ -16,6 +16,4 @@ const Page = () => {
   );
 };
 
-Page.displayName = 'CommonSetting';
-
 export default Page;

package/src/app/[variants]/(main)/settings/hotkey/index.tsx

@@ -19,6 +19,4 @@ const Page = () => {
   );
 };
 
-Page.displayName = 'HotkeySetting';
-
 export default Page;

package/src/app/[variants]/(main)/settings/image/index.tsx

@@ -14,6 +14,4 @@ const Page = () => {
   );
 };
 
-Page.displayName = 'ImageSetting';
-
 export default Page;

package/src/app/[variants]/(main)/settings/memory/index.tsx

@@ -14,6 +14,4 @@ const Page = () => {
   );
 };
 
-Page.displayName = 'MemorySetting';
-
 export default Page;

package/src/app/[variants]/(main)/settings/provider/(list)/index.tsx

@@ -33,6 +33,4 @@ const Page = (props: { mobile?: boolean }) => {
   );
 };
 
-Page.displayName = 'ProviderGrid';
-
 export default Page;

package/src/app/[variants]/(main)/settings/proxy/index.tsx

@@ -14,6 +14,4 @@ const Page = () => {
   );
 };
 
-Page.displayName = 'ProxySetting';
-
 export default Page;

package/src/app/[variants]/(main)/settings/security/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from '@lobehub/ui';
-import dynamic from '@/libs/next/dynamic';
 import { useTranslation } from 'react-i18next';
 import { Navigate } from 'react-router-dom';
 
 import SettingHeader from '@/app/[variants]/(main)/settings/features/SettingHeader';
 import { enableClerk } from '@/envs/auth';
+import dynamic from '@/libs/next/dynamic';
 
 const ClerkProfile = dynamic(() => import('./features/ClerkProfile'), {
   loading: () => (
@@ -27,6 +27,4 @@ const Page = () => {
   );
 };
 
-Page.displayName = 'SecuritySetting';
-
 export default Page;

package/src/app/[variants]/(main)/settings/storage/index.tsx

@@ -14,6 +14,4 @@ const Page = () => {
   );
 };
 
-Page.displayName = 'StorageSetting';
-
 export default Page;

package/src/app/[variants]/(main)/settings/tts/index.tsx

@@ -16,6 +16,4 @@ const Page = () => {
   );
 };
 
-Page.displayName = 'TtsSetting';
-
 export default Page;

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

@@ -15,6 +15,4 @@ const Layout: FC = () => {
   );
 };
 
-Layout.displayName = 'MobileHomeLayout';
-
 export default Layout;

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

@@ -1,11 +1,11 @@
 'use client';
 
-import dynamic from '@/libs/next/dynamic';
 import { type FC, Suspense } from 'react';
 import { Outlet, useLocation } from 'react-router-dom';
 
 import Loading from '@/components/Loading/BrandTextLoading';
 import { MarketAuthProvider } from '@/layout/AuthProvider/MarketAuth';
+import dynamic from '@/libs/next/dynamic';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 import { NavigatorRegistrar } from '@/utils/router';
 
@@ -42,6 +42,4 @@ const MobileMainLayout: FC = () => {
   );
 };
 
-MobileMainLayout.displayName = 'MobileMainLayout';
-
 export default MobileMainLayout;

package/src/app/[variants]/(mobile)/chat/_layout/index.tsx

@@ -23,6 +23,4 @@ const Layout: FC = () => {
   );
 };
 
-Layout.displayName = 'MobileChatLayout';
-
 export default Layout;

package/src/app/[variants]/(mobile)/chat/settings/_layout/index.tsx

@@ -14,6 +14,4 @@ const Layout = ({ children }: PropsWithChildren) => (
   </MobileContentLayout>
 );
 
-Layout.displayName = 'MobileSessionSettingsLayout';
-
 export default Layout;

package/src/app/[variants]/(mobile)/community/(detail)/_layout/index.tsx

@@ -16,6 +16,4 @@ const Layout = () => {
   );
 };
 
-Layout.displayName = 'MobileDiscoverDetailLayout';
-
 export default Layout;

package/src/app/[variants]/(mobile)/community/(list)/_layout/index.tsx

@@ -23,6 +23,4 @@ const Layout = () => {
   );
 };
 
-Layout.displayName = 'MobileDiscoverLayout';
-
 export default Layout;

package/src/app/[variants]/(mobile)/community/_layout/index.tsx

@@ -4,6 +4,4 @@ const Layout = () => {
   return <Outlet />;
 };
 
-Layout.displayName = 'MobileDiscoverStoreLayout';
-
 export default Layout;

package/src/app/[variants]/(mobile)/router/MobileClientRouter.tsx

@@ -14,6 +14,4 @@ const ClientRouter = () => {
   );
 };
 
-ClientRouter.displayName = 'ClientRouter';
-
 export default ClientRouter;

package/src/app/[variants]/(mobile)/settings/index.tsx

@@ -19,6 +19,4 @@ const Layout = () => {
   );
 };
 
-Layout.displayName = 'MobileSettingsLayout';
-
 export default Layout;

package/src/app/[variants]/onboarding/_layout/index.tsx

@@ -48,6 +48,4 @@ const OnBoardingContainer: FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-OnBoardingContainer.displayName = 'OnBoardingContainer';
-
 export default OnBoardingContainer;

package/src/app/[variants]/router/DesktopClientRouter.tsx

@@ -36,6 +36,4 @@ const ClientRouter = () => {
   );
 };
 
-ClientRouter.displayName = 'ClientRouter';
-
 export default ClientRouter;

package/src/components/ModelSelect/index.tsx

@@ -14,7 +14,7 @@ import {
 } from 'lucide-react';
 import { type ModelAbilities } from 'model-bank';
 import numeral from 'numeral';
-import { CSSProperties, type ComponentProps, type FC, memo, useState } from 'react';
+import { CSSProperties, type ComponentProps, type FC, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { type AiProviderSourceType } from '@/types/aiProvider';
@@ -65,13 +65,6 @@ interface ModelInfoTagsProps extends ModelAbilities {
   isCustom?: boolean;
   placement?: 'top' | 'right';
   style?: CSSProperties;
-  /**
-   * Whether to render tooltip overlays for each tag.
-   * Disable this when rendering a large list (e.g. dropdown menus) to avoid mounting hundreds of Tooltip instances.
-   *
-   * When `false`, tags are rendered without any tooltip/title fallback by design.
-   */
-  withTooltip?: boolean;
 }
 
 interface FeatureTagsProps extends Pick<
@@ -80,7 +73,6 @@ interface FeatureTagsProps extends Pick<
 > {
   placement: 'top' | 'right';
   tagClassName: string;
-  withTooltip: boolean;
 }
 
 interface FeatureTagItemProps {
@@ -91,11 +83,10 @@ interface FeatureTagItemProps {
   placement: 'top' | 'right';
   title: string;
   tooltipStyles?: ComponentProps<typeof Tooltip>['styles'];
-  withTooltip: boolean;
 }
 
 const FeatureTagItem = memo<FeatureTagItemProps>(
-  ({ className, color, enabled, icon, placement, title, tooltipStyles, withTooltip }) => {
+  ({ className, color, enabled, icon, placement, title, tooltipStyles }) => {
     if (!enabled) return null;
 
     const tag = (
@@ -104,8 +95,6 @@ const FeatureTagItem = memo<FeatureTagItemProps>(
       </Tag>
     );
 
-    if (!withTooltip) return tag;
-
     return (
       <Tooltip placement={placement} styles={tooltipStyles ?? DEFAULT_TOOLTIP_STYLES} title={title}>
         {tag}
@@ -125,7 +114,6 @@ const FeatureTags = memo<FeatureTagsProps>(
     tagClassName,
     video,
     vision,
-    withTooltip,
   }) => {
     const { t } = useTranslation('components');
 
@@ -138,7 +126,6 @@ const FeatureTags = memo<FeatureTagsProps>(
           icon={LucidePaperclip}
           placement={placement}
           title={t('ModelSelect.featureTag.file')}
-          withTooltip={withTooltip}
         />
         <FeatureTagItem
           className={tagClassName}
@@ -147,7 +134,6 @@ const FeatureTags = memo<FeatureTagsProps>(
           icon={LucideImage}
           placement={placement}
           title={t('ModelSelect.featureTag.imageOutput')}
-          withTooltip={withTooltip}
         />
         <FeatureTagItem
           className={tagClassName}
@@ -156,7 +142,6 @@ const FeatureTags = memo<FeatureTagsProps>(
           icon={LucideEye}
           placement={placement}
           title={t('ModelSelect.featureTag.vision')}
-          withTooltip={withTooltip}
         />
         <FeatureTagItem
           className={tagClassName}
@@ -165,7 +150,6 @@ const FeatureTags = memo<FeatureTagsProps>(
           icon={Video}
           placement={placement}
           title={t('ModelSelect.featureTag.video')}
-          withTooltip={withTooltip}
         />
         <FeatureTagItem
           className={tagClassName}
@@ -175,7 +159,6 @@ const FeatureTags = memo<FeatureTagsProps>(
           placement={placement}
           title={t('ModelSelect.featureTag.functionCall')}
           tooltipStyles={FUNCTION_CALL_TOOLTIP_STYLES}
-          withTooltip={withTooltip}
         />
         <FeatureTagItem
           className={tagClassName}
@@ -184,7 +167,6 @@ const FeatureTags = memo<FeatureTagsProps>(
           icon={AtomIcon}
           placement={placement}
           title={t('ModelSelect.featureTag.reasoning')}
-          withTooltip={withTooltip}
         />
         <FeatureTagItem
           className={tagClassName}
@@ -193,7 +175,6 @@ const FeatureTags = memo<FeatureTagsProps>(
           icon={LucideGlobe}
           placement={placement}
           title={t('ModelSelect.featureTag.search')}
-          withTooltip={withTooltip}
         />
       </>
     );
@@ -203,14 +184,12 @@ const FeatureTags = memo<FeatureTagsProps>(
 const Context = memo(
   ({
     contextWindowTokens,
-    withTooltip,
     placement,
     styles,
   }: {
     contextWindowTokens: number;
     placement: 'top' | 'right';
     styles: TooltipStyles;
-    withTooltip: boolean;
   }) => {
     const { t } = useTranslation('components');
     const tokensText = contextWindowTokens === 0 ? '∞' : formatTokenNumber(contextWindowTokens);
@@ -221,8 +200,6 @@ const Context = memo(
       </Tag>
     );
 
-    if (!withTooltip) return tag;
-
     return (
       <Tooltip
         placement={placement}
@@ -238,7 +215,7 @@ const Context = memo(
 );
 
 export const ModelInfoTags = memo<ModelInfoTagsProps>(
-  ({ directionReverse, placement = 'top', withTooltip = true, style, ...model }) => {
+  ({ directionReverse, placement = 'top', style, ...model }) => {
     return (
       <Flexbox
         className={TAG_CLASSNAME}
@@ -257,14 +234,12 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
           tagClassName={styles.tag}
           video={model.video}
           vision={model.vision}
-          withTooltip={withTooltip}
         />
         {typeof model.contextWindowTokens === 'number' && (
           <Context
             contextWindowTokens={model.contextWindowTokens}
             placement={placement}
             styles={styles}
-            withTooltip={withTooltip}
           />
         )}
       </Flexbox>
@@ -274,15 +249,6 @@ export const ModelInfoTags = memo<ModelInfoTagsProps>(
 
 interface ModelItemRenderProps extends ChatModelCard, Partial<Omit<FlexboxProps, 'id' | 'title'>> {
   abilities?: ModelAbilities;
-  infoTagTooltip?: boolean;
-  /**
-   * Only mounts Tooltip components while hovering the item, to reduce initial render cost in large dropdown lists.
-   *
-   * Note: hover is not available on mobile, so this will be ignored on mobile.
-   * Also note: since tooltips are mounted lazily, the very first hover may require a tiny pointer movement
-   * before the tooltip system detects the hover target (depends on the underlying tooltip implementation).
-   */
-  infoTagTooltipOnHover?: boolean;
   newBadgeLabel?: string;
   showInfoTag?: boolean;
 }
@@ -291,8 +257,6 @@ export const ModelItemRender = memo<ModelItemRenderProps>(
   ({
     showInfoTag = true,
     abilities,
-    infoTagTooltip = true,
-    infoTagTooltipOnHover = false,
     contextWindowTokens,
     files,
     functionCall,
@@ -308,14 +272,6 @@ export const ModelItemRender = memo<ModelItemRenderProps>(
     ...rest
   }) => {
     const { mobile } = useResponsive();
-    const [hovered, setHovered] = useState(false);
-
-    const shouldLazyMountTooltip = infoTagTooltipOnHover && !mobile;
-    /**
-     * When `infoTagTooltipOnHover` is enabled, we don't mount Tooltip components until the row is hovered.
-     * This avoids creating many overlays on dropdown open, while keeping the tooltip UX on demand.
-     */
-    const withTooltip = infoTagTooltip && (!shouldLazyMountTooltip || hovered);
     const displayNameOrId = displayName || id;
 
     return (
@@ -324,7 +280,6 @@ export const ModelItemRender = memo<ModelItemRenderProps>(
         gap={32}
         horizontal
         justify={'space-between'}
-        onMouseEnter={shouldLazyMountTooltip && !hovered ? () => setHovered(true) : undefined}
         {...rest}
         style={{
           overflow: 'hidden',
@@ -341,13 +296,9 @@ export const ModelItemRender = memo<ModelItemRenderProps>(
         >
           <ModelIcon model={id} size={20} />
           <Text
-            ellipsis={
-              withTooltip
-                ? {
-                    tooltip: displayNameOrId,
-                  }
-                : true
-            }
+            ellipsis={{
+              tooltip: displayNameOrId,
+            }}
             style={mobile ? { maxWidth: '60vw' } : { minWidth: 0, overflow: 'hidden' }}
           >
             {displayNameOrId}
@@ -369,7 +320,6 @@ export const ModelItemRender = memo<ModelItemRenderProps>(
             style={{ zoom: 0.9 }}
             video={video ?? abilities?.video}
             vision={vision ?? abilities?.vision}
-            withTooltip={withTooltip}
           />
         )}
       </Flexbox>

package/src/components/server/MobileNavLayout.tsx

@@ -58,6 +58,4 @@ const MobileContentLayout = ({
   );
 };
 
-MobileContentLayout.displayName = 'MobileContentLayout';
-
 export default MobileContentLayout;

package/src/components/server/ServerLayout.tsx

@@ -28,6 +28,4 @@ const ServerLayout =
     return isMobile ? <Mobile {...(res as T)} /> : <Desktop {...(res as T)} />;
   };
 
-ServerLayout.displayName = 'ServerLayout';
-
 export default ServerLayout;

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

@@ -1,5 +1,5 @@
 import { validateVideoFileSize } from '@lobechat/utils/client';
-import { Icon, type ItemType, type MenuProps, Tooltip } from '@lobehub/ui';
+import { Icon, type ItemType, Tooltip } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { css, cx } from 'antd-style';
 import isEqual from 'fast-deep-equal';
@@ -21,6 +21,7 @@ import { preferenceSelectors } from '@/store/user/selectors';
 
 import { useAgentId } from '../../hooks/useAgentId';
 import Action from '../components/Action';
+import type { ActionDropdownMenuItems } from '../components/ActionDropdown';
 import CheckboxItem from '../components/CheckboxWithLoading';
 
 const hotArea = css`
@@ -48,6 +49,7 @@ const FileUpload = memo(() => {
     s.updateGuideState,
   ]);
   const [modalOpen, setModalOpen] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const [updating, setUpdating] = useState(false);
 
   const files = useAgentStore((s) => agentByIdSelectors.getAgentFilesById(agentId)(s), isEqual);
@@ -61,8 +63,9 @@ const FileUpload = memo(() => {
     s.toggleKnowledgeBase,
   ]);
 
-  const uploadItems: MenuProps['items'] = [
+  const uploadItems: ActionDropdownMenuItems = [
     {
+      closeOnClick: false,
       disabled: !canUploadImage,
       icon: ImageUp,
       key: 'upload-image',
@@ -70,6 +73,7 @@ const FileUpload = memo(() => {
         <Upload
           accept={'image/*'}
           beforeUpload={async (file) => {
+            setDropdownOpen(false);
             await upload([file]);
 
             return false;
@@ -86,6 +90,7 @@ const FileUpload = memo(() => {
       ),
     },
     {
+      closeOnClick: false,
       icon: FileUp,
       key: 'upload-file',
       label: (
@@ -105,6 +110,7 @@ const FileUpload = memo(() => {
               return false;
             }
 
+            setDropdownOpen(false);
             await upload([file]);
 
             return false;
@@ -117,6 +123,7 @@ const FileUpload = memo(() => {
       ),
     },
     {
+      closeOnClick: false,
       icon: FolderUp,
       key: 'upload-folder',
       label: (
@@ -136,6 +143,7 @@ const FileUpload = memo(() => {
               return false;
             }
 
+            setDropdownOpen(false);
             await upload([file]);
 
             return false;
@@ -214,7 +222,7 @@ const FileUpload = memo(() => {
     },
   );
 
-  const items: MenuProps['items'] = [
+  const items: ActionDropdownMenuItems = [
     ...uploadItems,
     ...(knowledgeItems.length > 0 ? knowledgeItems : []),
   ];
@@ -229,6 +237,8 @@ const FileUpload = memo(() => {
       }}
       icon={Paperclip}
       loading={updating}
+      onOpenChange={setDropdownOpen}
+      open={dropdownOpen}
       showTooltip={false}
       title={t('upload.action.tooltip')}
       trigger={'both'}

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

@@ -8,6 +8,7 @@ import {
   type DropdownMenuProps,
   DropdownMenuRoot,
   DropdownMenuTrigger,
+  type MenuItemType,
   type MenuProps,
   type PopoverTrigger,
   renderDropdownMenuItems,
@@ -16,6 +17,7 @@ import { createStaticStyles, cx } from 'antd-style';
 import {
   type CSSProperties,
   type ReactNode,
+  isValidElement,
   memo,
   useCallback,
   useEffect,
@@ -34,8 +36,15 @@ const styles = createStaticStyles(({ css }) => ({
   `,
 }));
 
-type ActionDropdownMenu = Omit<Pick<MenuProps, 'className' | 'onClick' | 'style'>, 'items'> & {
-  items: MenuProps['items'] | (() => MenuProps['items']);
+export type ActionDropdownMenuItem = MenuItemType;
+
+export type ActionDropdownMenuItems = MenuProps<ActionDropdownMenuItem>['items'];
+
+type ActionDropdownMenu = Omit<
+  Pick<MenuProps<ActionDropdownMenuItem>, 'className' | 'onClick' | 'style'>,
+  'items'
+> & {
+  items: ActionDropdownMenuItems | (() => ActionDropdownMenuItems);
 };
 
 export interface ActionDropdownProps extends Omit<DropdownMenuProps, 'items'> {
@@ -116,7 +125,7 @@ const ActionDropdown = memo<ActionDropdownProps>(
     }, [openOnHover, triggerProps]);
 
     const decorateMenuItems = useCallback(
-      (items: MenuProps['items']): MenuProps['items'] => {
+      (items: ActionDropdownMenuItems): ActionDropdownMenuItems => {
         if (!items) return items;
 
         return items.map((item) => {
@@ -136,10 +145,24 @@ const ActionDropdown = memo<ActionDropdownProps>(
             };
           }
           const itemOnClick = 'onClick' in item ? item.onClick : undefined;
+          const closeOnClick = 'closeOnClick' in item ? item.closeOnClick : undefined;
+          const keepOpenOnClick = closeOnClick === false;
+          const itemLabel = 'label' in item ? item.label : undefined;
+          const shouldKeepOpen = isValidElement(itemLabel);
+
+          const resolvedCloseOnClick = closeOnClick ?? (shouldKeepOpen ? false : undefined);
 
           return {
             ...item,
+            ...(resolvedCloseOnClick !== undefined ? { closeOnClick: resolvedCloseOnClick } : null),
             onClick: (info) => {
+              if (keepOpenOnClick) {
+                info.domEvent.stopPropagation();
+                menu.onClick?.(info);
+                itemOnClick?.(info);
+                return;
+              }
+
               info.domEvent.preventDefault();
               menu.onClick?.(info);
               itemOnClick?.(info);

package/src/features/ModelSwitchPanel/components/Footer.tsx

@@ -38,5 +38,3 @@ export const Footer: FC<FooterProps> = ({ onClose }) => {
     </Flexbox>
   );
 };
-
-Footer.displayName = 'Footer';

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

@@ -89,7 +89,6 @@ export const MultipleProvidersModelItem = memo<MultipleProvidersModelItemProps>(
         <ModelItemRender
           {...data.model}
           {...data.model.abilities}
-          infoTagTooltip={false}
           newBadgeLabel={newLabel}
           showInfoTag={true}
         />

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

@@ -14,7 +14,6 @@ export const SingleProviderModelItem = memo<SingleProviderModelItemProps>(({ dat
     <ModelItemRender
       {...data.model}
       {...data.model.abilities}
-      infoTagTooltip={false}
       newBadgeLabel={newLabel}
       showInfoTag={true}
     />

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

@@ -116,7 +116,6 @@ export const VirtualItemRenderer = memo<VirtualItemRendererProps>(
             <ModelItemRender
               {...item.model}
               {...item.model.abilities}
-              infoTagTooltip={false}
               newBadgeLabel={newLabel}
               showInfoTag
             />

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

@@ -1,4 +1,4 @@
-import { Flexbox } from '@lobehub/ui';
+import { Flexbox, TooltipGroup } from '@lobehub/ui';
 import type { FC } from 'react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -82,18 +82,20 @@ export const List: FC<ListProps> = ({
         paddingBlock: groupMode === 'byModel' ? 8 : 0,
       }}
     >
-      {virtualItems.slice(0, renderAll ? virtualItems.length : INITIAL_RENDER_COUNT).map((item) => (
-        <VirtualItemRenderer
-          activeKey={activeKey}
-          item={item}
-          key={getVirtualItemKey(item)}
-          newLabel={newLabel}
-          onClose={handleClose}
-          onModelChange={handleModelChange}
-        />
-      ))}
+      <TooltipGroup>
+        {virtualItems
+          .slice(0, renderAll ? virtualItems.length : INITIAL_RENDER_COUNT)
+          .map((item) => (
+            <VirtualItemRenderer
+              activeKey={activeKey}
+              item={item}
+              key={getVirtualItemKey(item)}
+              newLabel={newLabel}
+              onClose={handleClose}
+              onModelChange={handleModelChange}
+            />
+          ))}
+      </TooltipGroup>
     </Flexbox>
   );
 };
-
-List.displayName = 'List';

package/src/features/ModelSwitchPanel/components/PanelContent.tsx

@@ -73,5 +73,3 @@ export const PanelContent: FC<PanelContentProps> = ({
     </Rnd>
   );
 };
-
-PanelContent.displayName = 'PanelContent';