@lobehub/lobehub 2.0.0-next.71 → 2.0.0-next.73

package/src/app/[variants]/(main)/discover/(list)/model/{ModelPage.tsx → index.tsx}

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab, ModelQueryParams } from '@/types/discover';
@@ -41,4 +40,12 @@ const ModelPage = memo<{ mobile?: boolean }>(() => {
   );
 });
 
-export default withSuspense(ModelPage);
+const DesktopModelPage = memo<{ mobile?: boolean }>(() => {
+  return <ModelPage mobile={false} />;
+});
+
+const MobileModelPage = memo<{ mobile?: boolean }>(() => {
+  return <ModelPage mobile={true} />;
+});
+
+export { DesktopModelPage, MobileModelPage };

package/src/app/[variants]/(main)/discover/(list)/provider/features/List/Item.tsx

@@ -48,7 +48,7 @@ const ProviderItem = memo<DiscoverProviderItem>(
   ({ url, name, description, identifier, models }) => {
     const { styles, theme } = useStyles();
     const navigate = useNavigate();
-    const link = urlJoin('/provider', identifier);
+    const link = urlJoin('/discover/provider', identifier);
     const { t } = useTranslation(['discover', 'providers']);
 
     return (

package/src/app/[variants]/(main)/discover/(list)/provider/{Client.tsx → index.tsx}

@@ -3,7 +3,6 @@
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { withSuspense } from '@/components/withSuspense';
 import { useQuery } from '@/hooks/useQuery';
 import { useDiscoverStore } from '@/store/discover';
 import { DiscoverTab, ProviderQueryParams } from '@/types/discover';
@@ -40,4 +39,12 @@ const Client = memo<{ mobile?: boolean }>(() => {
   );
 });
 
-export default withSuspense(Client);
+const DesktopProviderPage = memo<{ mobile?: boolean }>(() => {
+  return <Client mobile={false} />;
+});
+
+const MobileProviderPage = memo<{ mobile?: boolean }>(() => {
+  return <Client mobile={true} />;
+});
+
+export { DesktopProviderPage, MobileProviderPage };

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

@@ -1,17 +1,17 @@
-import { PropsWithChildren } from 'react';
 
 import NProgress from '@/components/NProgress';
 
 import Container from './Container';
-import Header from './Header';
+import Header from './Header';  
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <>
       <NProgress />
       <Container>
         <Header />
-        {children}
+        <Outlet />
       </Container>
       {/* ↓ cloud slot ↓ */}
 

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

@@ -1,12 +1,12 @@
-import { PropsWithChildren } from 'react';
 
 import NProgress from '@/components/NProgress';
+import { Outlet } from 'react-router-dom';
 
-const Layout = ({ children }: PropsWithChildren) => {
+const Layout = () => {
   return (
     <>
       <NProgress />
-      {children}
+      <Outlet />
     </>
   );
 };

package/src/app/[variants]/(main)/discover/components/Title.tsx

@@ -59,7 +59,7 @@ const Title = memo<TitleProps>(({ tag, children, moreLink, more }) => {
         title
       )}
       {moreLink && (
-        <Link target={moreLink.startsWith('http') ? '_blank' : undefined} to={moreLink}>
+        <Link target={moreLink.startsWith('http') ? '_blank' : undefined} to={`/discover${moreLink}`}>
           <Button className={styles.more} style={{ paddingInline: 6 }} type={'text'}>
             <span>{more}</span>
             <Icon icon={ChevronRight} />

package/src/app/[variants]/(main)/discover/features/Search.tsx

@@ -2,13 +2,13 @@
 
 import { SearchBar, SearchBarProps } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { usePathname } from 'next/navigation';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
+import { usePathname } from '@/app/[variants]/(main)/hooks/usePathname';
+import { useQuery } from '@/app/[variants]/(main)/hooks/useQuery';
 import { withSuspense } from '@/components/withSuspense';
-import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 
 export const useStyles = createStyles(({ css, prefixCls, token }) => ({

package/src/app/[variants]/(main)/discover/features/useNav.tsx

@@ -3,7 +3,7 @@ import { Icon } from '@lobehub/ui';
 import { Bot, Brain, BrainCircuit, House } from 'lucide-react';
 import { ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 import type { MenuProps } from '@/components/Menu';
 import { DiscoverTab } from '@/types/discover';
@@ -13,7 +13,6 @@ const ICON_SIZE = 16;
 export const useNav = () => {
   const location = useLocation();
   const { t } = useTranslation('discover');
-
   const activeKey = useMemo(() => {
     const pathname = location.pathname;
     for (const value of Object.values(DiscoverTab)) {
@@ -32,45 +31,45 @@ export const useNav = () => {
         icon: <Icon icon={House} size={ICON_SIZE} />,
         key: DiscoverTab.Home,
         label: (
-          <Link style={{ color: 'inherit' }} to={'/'}>
+          <div style={{ color: 'inherit', display: 'inline' }}>
             {t('tab.home')}
-          </Link>
+          </div>
         ),
       },
       {
         icon: <Icon icon={Bot} size={ICON_SIZE} />,
         key: DiscoverTab.Assistants,
         label: (
-          <Link style={{ color: 'inherit' }} to={`/${DiscoverTab.Assistants}`}>
+          <div style={{ color: 'inherit', display: 'inline' }} >
             {t('tab.assistant')}
-          </Link>
+          </div>
         ),
       },
       {
         icon: <MCP className={'anticon'} size={ICON_SIZE} />,
         key: DiscoverTab.Mcp,
         label: (
-          <Link style={{ color: 'inherit' }} to={`/${DiscoverTab.Mcp}`}>
+          <div style={{ color: 'inherit', display: 'inline' }} >
             {`MCP ${t('tab.plugin')}`}
-          </Link>
+          </div>
         ),
       },
       {
         icon: <Icon icon={Brain} size={ICON_SIZE} />,
         key: DiscoverTab.Models,
         label: (
-          <Link style={{ color: 'inherit' }} to={`/${DiscoverTab.Models}`}>
+          <div style={{ color: 'inherit', display: 'inline' }} >
             {t('tab.model')}
-          </Link>
+          </div>
         ),
       },
       {
         icon: <Icon icon={BrainCircuit} size={ICON_SIZE} />,
         key: DiscoverTab.Providers,
         label: (
-          <Link style={{ color: 'inherit' }} to={`/${DiscoverTab.Providers}`}>
+          <div style={{ color: 'inherit', display: 'inline' }} >
             {t('tab.provider')}
-          </Link>
+          </div>
         ),
       },
     ],

package/src/app/[variants]/(main)/hooks/useActiveTabKey.ts

@@ -0,0 +1,40 @@
+import { useLocation, useSearchParams } from 'react-router-dom';
+
+import { ProfileTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
+
+/**
+ * Returns the active tab key (chat/discover/settings/...)
+ * React Router version for (main) directory
+ */
+export const useActiveTabKey = () => {
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  return pathname.split('/').find(Boolean) as SidebarTabKey;
+};
+
+/**
+ * Returns the active setting page key (?active=common/sync/agent/...)
+ * React Router version for (main) directory
+ */
+export const useActiveSettingsKey = () => {
+  const [searchParams] = useSearchParams();
+  const tabs = searchParams.get('active');
+  if (!tabs) return SettingsTabs.Common;
+  return tabs as SettingsTabs;
+};
+
+/**
+ * Returns the active profile page key (profile/security/stats/...)
+ * React Router version for (main) directory
+ */
+export const useActiveProfileKey = () => {
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  const tabs = pathname.split('/').findLast(Boolean);
+
+  if (tabs === 'profile') return ProfileTabs.Profile;
+
+  return tabs as ProfileTabs;
+};

package/src/app/[variants]/(main)/hooks/usePathname.ts

@@ -0,0 +1,10 @@
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Hook to get current pathname
+ * React Router version for (main) directory
+ */
+export const usePathname = () => {
+  const location = useLocation();
+  return location.pathname;
+};

package/src/app/[variants]/(main)/hooks/useQuery.ts

@@ -0,0 +1,12 @@
+import qs from 'query-string';
+import { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+/**
+ * Hook to get query parameters
+ * React Router version for (main) directory
+ */
+export const useQuery = () => {
+  const [searchParams] = useSearchParams();
+  return useMemo(() => qs.parse(searchParams.toString()), [searchParams]);
+};

package/src/app/[variants]/(main)/hooks/useRouter.ts

@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * Hook to get router navigation functions
+ * React Router version for (main) directory
+ *
+ * Provides a Next.js-like API using React Router
+ */
+export const useRouter = () => {
+  const navigate = useNavigate();
+
+  return {
+    back: () => navigate(-1),
+    forward: () => navigate(1),
+    // Note: prefetch is not supported in React Router
+    prefetch: () => {},
+
+    push: (href: string) => navigate(href),
+
+    replace: (href: string) => navigate(href, { replace: true }),
+  };
+};

package/src/app/[variants]/(main)/hooks/useSearchParams.ts

@@ -0,0 +1,11 @@
+import { useSearchParams as useReactRouterSearchParams } from 'react-router-dom';
+
+/**
+ * Hook to get search params
+ * React Router version for (main) directory
+ *
+ * Returns [searchParams, setSearchParams] tuple similar to React Router
+ */
+export const useSearchParams = () => {
+  return useReactRouterSearchParams();
+};

package/src/app/[variants]/(main)/image/@menu/features/ConfigPanel/components/ModelSelect/index.tsx

@@ -3,10 +3,10 @@ import { ActionIcon, Icon, Select, type SelectProps } from '@lobehub/ui';
 import { createStyles, useTheme } from 'antd-style';
 import { LucideArrowRight, LucideBolt } from 'lucide-react';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { useNavigate } from 'react-router-dom';
 
 import { ProviderItemRender } from '@/components/ModelSelect';
 import { useAiInfraStore } from '@/store/aiInfra';
@@ -34,7 +34,7 @@ const ModelSelect = memo(() => {
   const { styles } = useStyles();
   const { t } = useTranslation('components');
   const theme = useTheme();
-  const router = useRouter();
+  const navigate = useNavigate();
 
   const [currentModel, currentProvider] = useImageStore((s) => [
     imageGenerationConfigSelectors.model(s),
@@ -64,7 +64,7 @@ const ModelSelect = memo(() => {
               </Flexbox>
             ),
             onClick: () => {
-              router.push(`/settings?active=provider&provider=${provider.id}`);
+              navigate(`/settings?active=provider&provider=${provider.id}`);
             },
             value: `${provider.id}/empty`,
           },
@@ -86,7 +86,7 @@ const ModelSelect = memo(() => {
             </Flexbox>
           ),
           onClick: () => {
-            router.push('/settings?active=provider');
+            navigate('/settings?active=provider');
           },
           value: 'no-provider',
         },
@@ -118,7 +118,7 @@ const ModelSelect = memo(() => {
       ),
       options: getImageModels(provider),
     }));
-  }, [enabledImageModelList, t, theme.colorTextTertiary, router]);
+  }, [enabledImageModelList, t, theme.colorTextTertiary, navigate]);
 
   const labelRender: SelectProps['labelRender'] = (props) => {
     const modelInfo = enabledImageModelList

package/src/app/[variants]/(main)/image/@topic/features/Topics/TopicUrlSync.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
 import { useLayoutEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
 
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useImageStore } from '@/store/image';
 
 /**

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { memo } from 'react';
+
+const ComingSoonPage = memo(() => {
+  return (
+    <div>
+      <h2>Coming Soon!</h2>
+    </div>
+  );
+});
+
+ComingSoonPage.displayName = 'ComingSoonPage';
+
+export default ComingSoonPage;

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

@@ -1,3 +1,4 @@
+import { Outlet } from 'react-router-dom';
 import { Flexbox } from 'react-layout-kit';
 
 import ImagePanel from '@/features/ImageSidePanel';
@@ -7,7 +8,7 @@ import { LayoutProps } from '../type';
 import Container from './Container';
 import RegisterHotkeys from './RegisterHotkeys';
 
-const Layout = ({ children, menu, topic }: LayoutProps) => {
+const Layout = ({ menu, topic }: Omit<LayoutProps, 'children'>) => {
   return (
     <>
       <Flexbox
@@ -17,7 +18,9 @@ const Layout = ({ children, menu, topic }: LayoutProps) => {
         width={'100%'}
       >
         <ImagePanel>{menu}</ImagePanel>
-        <Container>{children}</Container>
+        <Container>
+          <Outlet />
+        </Container>
         <ImageTopicPanel>{topic}</ImageTopicPanel>
       </Flexbox>
       <RegisterHotkeys />

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { memo } from 'react';
+
+import Menu from '../@menu/default';
+import Topic from '../@topic/default';
+import Desktop from './Desktop';
+
+const DesktopImageWrapper = memo(() => {
+  return <Desktop menu={<Menu />} topic={<Topic />} />;
+});
+
+DesktopImageWrapper.displayName = 'DesktopImageWrapper';
+
+export default DesktopImageWrapper;

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

@@ -1,10 +1,12 @@
+import { Outlet } from 'react-router-dom';
+
 import NProgress from '@/components/NProgress';
 
 const Layout = () => {
   return (
     <>
       <NProgress />
-      <h2>Coming Soon!</h2>
+      <Outlet />
     </>
   );
 };

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

@@ -1,7 +1,6 @@
 'use client';
 
-import { useQueryState } from 'nuqs';
-
+import { useQueryState } from '@/hooks/useQueryParam';
 import { useImageStore } from '@/store/image';
 
 import Content from './Content';

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

@@ -0,0 +1,18 @@
+'use client';
+
+import { Suspense, memo } from 'react';
+
+import ImageWorkspace from './features/ImageWorkspace';
+import SkeletonList from './features/ImageWorkspace/SkeletonList';
+
+const DesktopImagePage = memo(() => {
+  return (
+    <Suspense fallback={<SkeletonList />}>
+      <ImageWorkspace />
+    </Suspense>
+  );
+});
+
+DesktopImagePage.displayName = 'DesktopImagePage';
+
+export default DesktopImagePage;

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { App } from 'antd';
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+const DesktopKnowledgeLayout = memo(() => {
+  return (
+    <App style={{ display: 'flex', flex: 1, height: '100%' }}>
+      <Outlet />
+    </App>
+  );
+});
+
+DesktopKnowledgeLayout.displayName = 'DesktopKnowledgeLayout';
+
+export default DesktopKnowledgeLayout;

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { App } from 'antd';
+import { memo } from 'react';
+import { Outlet } from 'react-router-dom';
+
+const MobileKnowledgeLayout = memo(() => {
+  return (
+    <App style={{ display: 'flex', flex: 1, height: '100%' }}>
+      <Outlet />
+    </App>
+  );
+});
+
+MobileKnowledgeLayout.displayName = 'MobileKnowledgeLayout';
+
+export default MobileKnowledgeLayout;

package/src/app/[variants]/(main)/knowledge/components/KnowledgeBaseItem/index.tsx

@@ -45,7 +45,7 @@ const KnowledgeBaseItem = memo<KnowledgeBaseItemProps>(({ name, active, id }) =>
   const navigate = useNavigate();
 
   const handleClick = () => {
-    navigate(`/bases/${id}`);
+    navigate(`/knowledge/bases/${id}`);
   };
 
   return (

package/src/app/[variants]/(main)/knowledge/components/modal/ModalPageClient.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
 import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import FileDetail from './FileDetail';
 import FilePreview from './FilePreview';
@@ -12,15 +12,15 @@ interface ModalPageClientProps {
 }
 
 const ModalPageClient = ({ id }: ModalPageClientProps) => {
-  const router = useRouter();
+  const navigate = useNavigate();
   const handleClose = useCallback(() => {
     if (typeof window === 'undefined') return;
 
     const { pathname, search } = window.location;
     const basePath = pathname.replace(/\/modal\/?$/, '');
 
-    router.replace(`${basePath || '/'}${search}`);
-  }, [router]);
+    navigate(`${basePath || '/'}${search}`, { replace: true });
+  }, [navigate]);
 
   return (
     <FullscreenModal detail={<FileDetail id={id} />} onClose={handleClose}>

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeBaseDetail/index.tsx

@@ -2,8 +2,9 @@
 
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { useParams } from 'react-router-dom';
+import { useLoaderData } from 'react-router-dom';
 
+import type { IdParams } from '@/app/[variants]/loaders/routeParams';
 import FileModalQueryRoute from '@/app/[variants]/(main)/knowledge/shared/FileModalQueryRoute';
 import { useSetFileModalId } from '@/app/[variants]/(main)/knowledge/shared/useFileQueryParam';
 import FilePanel from '@/features/FileSidePanel';
@@ -19,15 +20,11 @@ import Menu from './menu/Menu';
  * Supports ?file=[fileId] query param for file preview modal
  */
 const KnowledgeBaseDetailPage = memo(() => {
-  const { id } = useParams<{ id: string }>();
+  const { id } = useLoaderData() as IdParams;
   const setFileModalId = useSetFileModalId();
 
-  useKnowledgeBaseItem(id!);
-  const name = useKnowledgeBaseStore(knowledgeBaseSelectors.getKnowledgeBaseNameById(id!));
-
-  if (!id) {
-    return <div>Knowledge base ID is required</div>;
-  }
+  useKnowledgeBaseItem(id);
+  const name = useKnowledgeBaseStore(knowledgeBaseSelectors.getKnowledgeBaseNameById(id));
 
   return (
     <>

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeBaseDetail/menu/Head.tsx

@@ -15,7 +15,7 @@ const Head = memo<{ id: string }>(({ id }) => {
 
   return (
     <Flexbox gap={8}>
-      <GoBack to="/" />
+      <GoBack to="/knowledge" />
       <Flexbox align={'center'} gap={8} height={36} horizontal>
         <Center style={{ minWidth: 24 }} width={24}>
           <RepoIcon />

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeHome/menu/CategoryMenu.tsx

@@ -93,7 +93,7 @@ const CategoryMenu = memo(() => {
         className={cx(styles.header, isHomeActive && styles.headerActive)}
         horizontal
         onClick={() => {
-          navigate('/', { replace: true });
+          navigate('/knowledge', { replace: true });
         }}
         paddingBlock={6}
         paddingInline={8}
@@ -132,7 +132,7 @@ const CategoryMenu = memo(() => {
             onClick={({ key }) => {
               // Navigate to home route and set category
               const categoryParam = key === FilesTabs.Home ? '' : `?category=${key}`;
-              navigate(`/${categoryParam}`, { replace: true });
+              navigate(`/knowledge${categoryParam}`, { replace: true });
             }}
             selectable
             selectedKeys={[activeKey]}

package/src/app/[variants]/(main)/knowledge/routes/KnowledgeHome/menu/KnowledgeBase.tsx

@@ -37,7 +37,7 @@ const Collection = () => {
   const handleCreate = () => {
     open({
       onSuccess: (id) => {
-        navigate(`/bases/${id}`);
+        navigate(`/knowledge/bases/${id}`);
       },
     });
   };

package/src/app/[variants]/(main)/{_layout/Desktop → layouts/desktop}/DesktopLayoutContainer.tsx

@@ -1,13 +1,14 @@
 import { useTheme } from 'antd-style';
-import { usePathname } from 'next/navigation';
 import { PropsWithChildren, Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { useLocation } from 'react-router-dom';
 
 import SideBar from './SideBar';
 
 const DesktopLayoutContainer = memo<PropsWithChildren>(({ children }) => {
   const theme = useTheme();
-  const pathname = usePathname();
+  const location = useLocation();
+  const pathname = location.pathname;
   const hideSideBar = pathname.startsWith('/settings');
   return (
     <>

package/src/app/[variants]/(main)/{_layout/Desktop → layouts/desktop}/SideBar/BottomActions.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, ActionIconProps } from '@lobehub/ui';
 import { FlaskConical, Github } from 'lucide-react';
-import Link from 'next/link';
 import { memo } from 'react';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
@@ -22,16 +22,16 @@ const BottomActions = memo(() => {
   return (
     <Flexbox gap={8}>
       {!hideGitHub && (
-        <Link aria-label={'GitHub'} href={GITHUB} target={'_blank'}>
+        <a aria-label={'GitHub'} href={GITHUB} rel="noopener noreferrer" target={'_blank'}>
           <ActionIcon
             icon={Github}
             size={ICON_SIZE}
             title={'GitHub'}
             tooltipProps={{ placement: 'right' }}
           />
-        </Link>
+        </a>
       )}
-      <Link aria-label={t('labs')} href={'/labs'}>
+      <Link aria-label={t('labs')} to={'/labs'}>
         <ActionIcon
           icon={FlaskConical}
           size={ICON_SIZE}