@lobehub/lobehub 2.0.0-next.72 → 2.0.0-next.74

package/src/app/[variants]/(main)/profile/@category/features/CategoryContent.tsx

@@ -1,20 +1,19 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
 import { memo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { ProfileTabs } from '@/store/global/initialState';
 
 import { useCategory } from '../../hooks/useCategory';
 
 const CategoryContent = memo(() => {
-  const pathname = usePathname();
-  const activeTab = pathname.split('/').at(-1);
+  const location = useLocation();
+  const navigate = useNavigate();
+  const activeTab = location.pathname.split('/').at(-1);
   const cateItems = useCategory();
-  const router = useQueryRoute();
 
   return (
     <Menu
@@ -22,8 +21,7 @@ const CategoryContent = memo(() => {
       items={cateItems}
       onClick={({ key }) => {
         const activeKey = key === ProfileTabs.Profile ? '/' : key;
-
-        router.push(urlJoin('/profile', activeKey));
+        navigate(urlJoin('/profile', activeKey));
       }}
       selectable
       selectedKeys={activeTab ? [activeTab] : []}

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

@@ -3,6 +3,7 @@
 import { useResponsive } from 'antd-style';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Outlet } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import Footer from '@/features/Setting/Footer';
@@ -13,7 +14,7 @@ import { LayoutProps } from '../type';
 import Header from './Header';
 import SideBar from './SideBar';
 
-const Layout = memo<LayoutProps>(({ children, category }) => {
+const Layout = memo<Omit<LayoutProps, 'children'>>(({ category }) => {
   const ref = useRef<any>(null);
   const { md = true } = useResponsive();
   const { t } = useTranslation('auth');
@@ -41,7 +42,7 @@ const Layout = memo<LayoutProps>(({ children, category }) => {
             paddingInline: 32,
           }}
         >
-          {children}
+          <Outlet />
         </SettingContainer>
       </Flexbox>
   );

package/src/app/[variants]/(main)/profile/_layout/DesktopWrapper.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { memo } from 'react';
+
+import Category from '../@category/default';
+import Desktop from './Desktop';
+
+const DesktopProfileWrapper = memo(() => {
+  return <Desktop category={<Category />} />;
+});
+
+DesktopProfileWrapper.displayName = 'DesktopProfileWrapper';
+
+export default DesktopProfileWrapper;

package/src/app/[variants]/(main)/profile/_layout/Mobile/Header.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { useActiveProfileKey } from '@/hooks/useActiveTabKey';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
@@ -14,12 +14,12 @@ import ShareButton from '../../stats/features/ShareButton';
 const Header = memo(() => {
   const { t } = useTranslation('auth');
 
-  const router = useRouter();
+  const navigate = useNavigate();
   const activeSettingsKey = useActiveProfileKey();
   const isStats = activeSettingsKey === 'stats';
 
   const handleBackClick = () => {
-    router.push('/me/profile');
+    navigate('/me/profile');
   };
 
   return (

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

@@ -1,13 +1,14 @@
+import { Outlet } from 'react-router-dom';
+
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Footer from '@/features/Setting/Footer';
 
-import { LayoutProps } from '../type';
 import Header from './Header';
 
-const Layout = ({ children }: LayoutProps) => {
+const Layout = () => {
   return (
     <MobileContentLayout header={<Header />}>
-      {children}
+      <Outlet />
       <div style={{ flex: 1 }} />
       <Footer />
     </MobileContentLayout>

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

@@ -0,0 +1,18 @@
+import NotFound from '@/components/404';
+import { serverFeatureFlags } from '@/config/featureFlags';
+
+import Page from '../../settings/system-agent';
+import Client from './Client';
+
+
+const page = () => {
+  const { showApiKeyManage } = serverFeatureFlags();
+
+  if (!showApiKeyManage) return <NotFound />;
+
+  return <Client />;
+};
+
+Page.displayName = 'ApiKey';
+
+export default page;

package/src/app/[variants]/(main)/profile/hooks/useCategory.tsx

@@ -1,6 +1,6 @@
 import { Icon } from '@lobehub/ui';
 import { BadgeCentIcon, ChartColumnBigIcon, KeyIcon, ShieldCheck, UserCircle } from 'lucide-react';
-import Link from 'next/link';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import type { MenuProps } from '@/components/Menu';
@@ -19,7 +19,7 @@ export const useCategory = () => {
       icon: <Icon icon={UserCircle} />,
       key: ProfileTabs.Profile,
       label: (
-        <Link href={'/profile'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile'}>
           {t('tab.profile')}
         </Link>
       ),
@@ -28,7 +28,7 @@ export const useCategory = () => {
       icon: <Icon icon={ShieldCheck} />,
       key: ProfileTabs.Security,
       label: (
-        <Link href={'/profile/security'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile/security'}>
           {t('tab.security')}
         </Link>
       ),
@@ -37,7 +37,7 @@ export const useCategory = () => {
       icon: <Icon icon={ChartColumnBigIcon} />,
       key: ProfileTabs.Stats,
       label: (
-        <Link href={'/profile/stats'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile/stats'}>
           {t('tab.stats')}
         </Link>
       ),
@@ -46,7 +46,7 @@ export const useCategory = () => {
       icon: <Icon icon={KeyIcon} />,
       key: ProfileTabs.APIKey,
       label: (
-        <Link href={'/profile/apikey'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile/apikey'}>
           {t('tab.apikey')}
         </Link>
       ),
@@ -55,7 +55,7 @@ export const useCategory = () => {
       icon: <Icon icon={BadgeCentIcon} />,
       key: ProfileTabs.Usage,
       label: (
-        <Link href={'/profile/usage'} onClick={(e) => e.preventDefault()}>
+        <Link onClick={(e) => e.preventDefault()} to={'/profile/usage'}>
           {t('tab.usage')}
         </Link>
       ),

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { Skeleton } from 'antd';
+import dynamic from 'next/dynamic';
+import { memo } from 'react';
+import { Navigate } from 'react-router-dom';
+
+import { enableClerk } from '@/const/auth';
+
+const ClerkProfile = dynamic(() => import('../features/ClerkProfile'), {
+  loading: () => (
+    <div style={{ flex: 1 }}>
+      <Skeleton paragraph={{ rows: 8 }} title={false} />
+    </div>
+  ),
+});
+
+const MobileProfileSecurityPage = memo(() => {
+  const mobile = true;
+  return enableClerk ? <ClerkProfile mobile={mobile} /> : <Navigate replace to="/profile" />;
+});
+
+
+const DesktopProfileSecurityPage = memo(() => {
+  const mobile = false;
+  return enableClerk ? <ClerkProfile mobile={mobile} /> : <Navigate replace to="/profile" />;
+});
+
+export { DesktopProfileSecurityPage,MobileProfileSecurityPage };

package/src/app/[variants]/(main)/profile/stats/features/AssistantsRank.tsx

@@ -2,11 +2,11 @@ import { BarList } from '@lobehub/charts';
 import { ActionIcon, Avatar, FormGroup, Modal } from '@lobehub/ui';
 import { MaximizeIcon } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import qs from 'query-string';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { DEFAULT_AVATAR } from '@/const/meta';
@@ -18,7 +18,7 @@ import { SessionRankItem } from '@/types/session';
 export const AssistantsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation(['auth', 'chat']);
-  const router = useRouter();
+  const navigate = useNavigate();
   const { data, isLoading } = useClientDataSWR('rank-sessions', async () =>
     sessionService.rankSessions(),
   );
@@ -86,7 +86,7 @@ export const AssistantsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
               desc: t('stats.empty.desc'),
               title: t('stats.empty.title'),
             }}
-            onValueChange={(item) => router.push(item.link)}
+            onValueChange={(item) => navigate(item.link)}
             rightLabel={t('stats.assistantsRank.right')}
           />
         </Flexbox>
@@ -104,7 +104,7 @@ export const AssistantsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
             height={340}
             leftLabel={t('stats.assistantsRank.left')}
             loading={isLoading || !data}
-            onValueChange={(item) => router.push(item.link)}
+            onValueChange={(item) => navigate(item.link)}
             rightLabel={t('stats.assistantsRank.right')}
           />
         </Modal>

package/src/app/[variants]/(main)/profile/stats/features/TopicsRank.tsx

@@ -3,11 +3,11 @@ import { ActionIcon, FormGroup, Icon, Modal } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { MaximizeIcon, MessageSquareIcon } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import qs from 'query-string';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { INBOX_SESSION_ID } from '@/const/session';
@@ -19,7 +19,7 @@ export const TopicsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation('auth');
   const theme = useTheme();
-  const router = useRouter();
+  const navigate = useNavigate();
   const { data, isLoading } = useClientDataSWR('rank-topics', async () =>
     topicService.rankTopics(),
   );
@@ -73,7 +73,7 @@ export const TopicsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
               desc: t('stats.empty.desc'),
               title: t('stats.empty.title'),
             }}
-            onValueChange={(item) => router.push(item.link)}
+            onValueChange={(item) => navigate(item.link)}
             rightLabel={t('stats.topicsRank.right')}
           />
         </Flexbox>
@@ -91,7 +91,7 @@ export const TopicsRank = memo<{ mobile?: boolean }>(({ mobile }) => {
             height={340}
             leftLabel={t('stats.topicsRank.left')}
             loading={isLoading || !data}
-            onValueChange={(item) => router.push(item.link)}
+            onValueChange={(item) => navigate(item.link)}
             rightLabel={t('stats.topicsRank.right')}
           />
         </Modal>

package/src/app/[variants]/(main)/profile/stats/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { memo } from 'react';
+
+import StatsClient from './Client';
+
+const MobileProfileStatsPage = memo(() => {
+  const mobile = true;
+  return <StatsClient mobile={mobile} />;
+});
+
+MobileProfileStatsPage.displayName = 'MobileProfileStatsPage';
+
+
+const DesktopProfileStatsPage = memo(() => {
+  const mobile = false;
+  return <StatsClient mobile={mobile} />;
+});
+
+export { DesktopProfileStatsPage,MobileProfileStatsPage };

package/src/app/[variants]/(main)/profile/usage/features/UsageTable.tsx

@@ -2,11 +2,11 @@ import { ProviderIcon } from '@lobehub/icons';
 import { Tag } from '@lobehub/ui';
 import { Table, TableColumnType, Typography } from 'antd';
 import { useTheme } from 'antd-style';
-import { parseAsInteger, useQueryState } from 'nuqs';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { parseAsInteger, useQueryParam } from '@/hooks/useQueryParam';
 import { useClientDataSWR } from '@/libs/swr';
 import { usageService } from '@/services/usage';
 import { formatDate, formatNumber } from '@/utils/format';
@@ -21,14 +21,12 @@ const UsageTable = memo<UsageChartProps>(({ dateStrings }) => {
     usageService.findByMonth(dateStrings),
   );
 
-  const [currentPage, setCurrentPage] = useQueryState(
-    'current',
-    parseAsInteger.withDefault(1).withOptions({ clearOnDefault: true }),
-  );
-  const [pageSize, setPageSize] = useQueryState(
-    'pageSize',
-    parseAsInteger.withDefault(5).withOptions({ clearOnDefault: true }),
-  );
+  const [currentPage, setCurrentPage] = useQueryParam('current', parseAsInteger.withDefault(1), {
+    clearOnDefault: true,
+  });
+  const [pageSize, setPageSize] = useQueryParam('pageSize', parseAsInteger.withDefault(5), {
+    clearOnDefault: true,
+  });
 
   useEffect(() => {
     if (dateStrings) {

package/src/app/[variants]/(main)/profile/usage/index.tsx

@@ -0,0 +1,13 @@
+
+import Client from './Client';
+
+
+const MobileProfileUsagePage = async () => {
+  return <Client mobile={true} />;
+};
+
+const DesktopProfileUsagePage = async () => {
+  return <Client mobile={false} />;
+};
+
+export { DesktopProfileUsagePage,MobileProfileUsagePage };

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

@@ -5,10 +5,10 @@ import { ChatHeader } from '@lobehub/ui/chat';
 import { Drawer, type DrawerProps } from 'antd';
 import { createStyles } from 'antd-style';
 import { Menu } from 'lucide-react';
-import { useSearchParams } from 'next/navigation';
 import { ReactNode, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useSearchParams } from 'react-router-dom';
 
 import BrandWatermark from '@/components/BrandWatermark';
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
@@ -40,7 +40,7 @@ const Header = memo<HeaderProps>(({ children, getContainer, title }) => {
   const activeKey = useActiveSettingsKey();
   const providerName = useProviderName(activeKey);
 
-  const search = useSearchParams();
+  const [search] = useSearchParams();
   const active = search.get('active');
   const { t } = useTranslation('setting');
 

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

@@ -1,11 +1,11 @@
 'use client';
 
 import { useResponsive, useTheme } from 'antd-style';
-import { parseAsStringEnum, useQueryState } from 'nuqs';
 import { memo, useRef } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import SettingContainer from '@/features/Setting/SettingContainer';
+import { parseAsStringEnum, useQueryParam } from '@/hooks/useQueryParam';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import CategoryContent from '../CategoryContent';
@@ -19,7 +19,7 @@ const Layout = memo<LayoutProps>(() => {
   const { md = true } = useResponsive();
   const theme = useTheme();
 
-  const [activeTab, setActiveTab] = useQueryState(
+  const [activeTab, setActiveTab] = useQueryParam(
     'active',
     parseAsStringEnum(Object.values(SettingsTabs)).withDefault(SettingsTabs.Common),
   );

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import SettingsContextProvider from './ContextProvider';
+
+const DesktopSettingsWrapper = memo(() => {
+  return (
+    <SettingsContextProvider
+      value={{
+        showOpenAIApiKey: true,
+        showOpenAIProxyUrl: true,
+      }}
+    >
+      <Outlet />
+    </SettingsContextProvider>
+  );
+});
+
+DesktopSettingsWrapper.displayName = 'DesktopSettingsWrapper';
+
+export default DesktopSettingsWrapper;

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

@@ -1,23 +1,22 @@
 'use client';
 
 import { ChatHeader } from '@lobehub/ui/mobile';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { enableAuth } from '@/const/auth';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { SettingsTabs } from '@/store/global/initialState';
 import { useSessionStore } from '@/store/session';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
+import { useNavigate } from 'react-router-dom';
 
 const Header = memo(() => {
   const { t } = useTranslation('setting');
-  const router = useQueryRoute();
   const showMobileWorkspace = useShowMobileWorkspace();
-
+  const navigate = useNavigate();
   const [activeSettingsKey, setActiveSettingsKey] = useQueryState('active');
   const [providerName, setProviderName] = useQueryState('provider');
 
@@ -25,13 +24,15 @@ const Header = memo(() => {
   const isProvider = providerName ? true : false;
 
   const handleBackClick = () => {
+    console.log('gobackclick', isSessionActive, showMobileWorkspace, activeSettingsKey, providerName);
     if (isSessionActive && showMobileWorkspace) {
-      router.push('/chat');
-    } else if (activeSettingsKey === 'provider' && providerName !== null) {
+      navigate('/chat');
+    } else if (activeSettingsKey === 'provider' && providerName) {
       setProviderName(null);
       setActiveSettingsKey('provider');
+      navigate(-1);
     } else {
-      router.push(enableAuth ? '/me/settings' : '/me');
+      navigate(enableAuth ? '/me/settings' : '/me');
     }
   };
 

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

@@ -1,18 +1,15 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
-
 import MobileContentLayout from '@/components/server/MobileNavLayout';
 import Footer from '@/features/Setting/Footer';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import SettingsContent from '../SettingsContent';
 import Header from './Header';
 
 const Layout = () => {
-  const [activeTab] = useQueryState('active', {
-    defaultValue: SettingsTabs.Common,
-  });
+  const [activeTab] = useQueryState('active', parseAsString.withDefault(SettingsTabs.Common));
 
   return (
     <MobileContentLayout header={<Header />}>

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+import SettingsContextProvider from './ContextProvider';
+
+const MobileSettingsWrapper = memo(() => {
+  return (
+    <SettingsContextProvider
+      value={{
+        showOpenAIApiKey: true,
+        showOpenAIProxyUrl: true,
+      }}
+    >
+      <Outlet />
+    </SettingsContextProvider>
+  );
+});
+
+MobileSettingsWrapper.displayName = 'MobileSettingsWrapper';
+
+export default MobileSettingsWrapper;

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

@@ -1,15 +1,13 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 
 import { AgentCategory } from '@/features/AgentSetting';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 
 const Menu = memo(() => {
-  const [tab, setTab] = useQueryState('tab', {
-    defaultValue: ChatSettingsTabs.Prompt,
-  });
+  const [tab, setTab] = useQueryState('tab', parseAsString.withDefault(ChatSettingsTabs.Prompt));
 
   return <AgentCategory setTab={setTab} tab={tab} />;
 });

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

@@ -4,12 +4,12 @@ import { Tabs } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { useTheme } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { useQueryState } from 'nuqs';
 import { memo } from 'react';
 
 import { INBOX_SESSION_ID } from '@/const/session';
 import { AgentSettings } from '@/features/AgentSetting';
 import { useCategory } from '@/features/AgentSetting/AgentCategory/useCategory';
+import { parseAsString, useQueryState } from '@/hooks/useQueryParam';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 import { useUserStore } from '@/store/user';
 import { settingsSelectors } from '@/store/user/selectors';
@@ -24,9 +24,7 @@ type AgentPageType = {
 const Page = memo((props: AgentPageType) => {
   const { mobile } = props;
   const cateItems = useCategory();
-  const [tab, setTab] = useQueryState('tab', {
-    defaultValue: ChatSettingsTabs.Prompt,
-  });
+  const [tab, setTab] = useQueryState('tab', parseAsString.withDefault(ChatSettingsTabs.Prompt));
   const config = useUserStore(settingsSelectors.defaultAgentConfig, isEqual);
   const meta = useUserStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent, isUserStateInit] = useUserStore((s) => [

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

@@ -1,8 +1,7 @@
 'use client';
 
-import { parseAsString, useQueryState } from 'nuqs';
-
 import { isCustomBranding } from '@/const/version';
+import { parseAsString, useQueryParam } from '@/hooks/useQueryParam';
 
 import DesktopLayout from '../_layout/Desktop';
 import MobileLayout from '../_layout/Mobile';
@@ -10,7 +9,7 @@ import ProviderDetailPage from '../detail';
 import Footer from './Footer';
 
 const Page = (props: { mobile?: boolean }) => {
-  const [Provider, setProvider] = useQueryState('provider', parseAsString.withDefault('all'));
+  const [Provider, setProvider] = useQueryParam('provider', parseAsString.withDefault('all'));
   const { mobile } = props;
   const ProviderLayout = mobile ? MobileLayout : DesktopLayout;
   return (

package/src/app/[variants]/(main)/settings/provider/ProviderMenu/All.tsx

@@ -1,9 +1,9 @@
 import { Icon } from '@lobehub/ui';
 import { WalletCards } from 'lucide-react';
-import { useSearchParams } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
+import { useSearchParams } from 'react-router-dom';
 
 import { useStyles } from './Item';
 
@@ -13,7 +13,7 @@ const All = memo((props: { onClick: (activeTab: string) => void }) => {
   const { onClick } = props;
   const { t } = useTranslation('modelProvider');
   const { styles, cx } = useStyles();
-  const searchParams = useSearchParams();
+  const [searchParams] = useSearchParams();
   const activeKey = searchParams.get('provider');
 
   return (