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

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

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

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

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

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

@@ -18,6 +18,4 @@ const HomeLayout: FC = () => {
   );
 };
 
-HomeLayout.displayName = 'ResourceHomeLayout';
-
 export default HomeLayout;

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

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

package/src/app/[variants]/(main)/resource/library/_layout/index.tsx

@@ -21,6 +21,4 @@ const LibraryLayout: FC = () => {
   );
 };
 
-LibraryLayout.displayName = 'ResourceLibraryLayout';
-
 export default LibraryLayout;

package/src/app/[variants]/(main)/resource/library/features/Container.tsx

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

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

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

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

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

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

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

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

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

package/src/app/[variants]/(main)/settings/chat-appearance/index.tsx

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

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/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';

package/src/features/ModelSwitchPanel/index.tsx

@@ -1,4 +1,4 @@
-import { Popover, TooltipGroup } from '@lobehub/ui';
+import { Popover } from '@lobehub/ui';
 import { memo, useCallback, useState } from 'react';
 
 import { PanelContent } from './components/PanelContent';
@@ -29,28 +29,26 @@ const ModelSwitchPanel = memo<ModelSwitchPanelProps>(
     );
 
     return (
-      <TooltipGroup>
-        <Popover
-          classNames={{
-            content: styles.container,
-          }}
-          content={
-            <PanelContent
-              isOpen={isOpen}
-              model={modelProp}
-              onModelChange={onModelChange}
-              onOpenChange={handleOpenChange}
-              provider={providerProp}
-            />
-          }
-          nativeButton={false}
-          onOpenChange={handleOpenChange}
-          open={isOpen}
-          placement={placement}
-        >
-          {children}
-        </Popover>
-      </TooltipGroup>
+      <Popover
+        classNames={{
+          content: styles.container,
+        }}
+        content={
+          <PanelContent
+            isOpen={isOpen}
+            model={modelProp}
+            onModelChange={onModelChange}
+            onOpenChange={handleOpenChange}
+            provider={providerProp}
+          />
+        }
+        nativeButton={false}
+        onOpenChange={handleOpenChange}
+        open={isOpen}
+        placement={placement}
+      >
+        {children}
+      </Popover>
     );
   },
 );