@lobehub/chat 1.141.4 → 1.141.5

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

@@ -3,11 +3,10 @@
 import { Pagination as Page } from 'antd';
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import urlJoin from 'url-join';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import { SCROLL_PARENT_ID } from '@/app/[variants]/(main)/discover/features/const';
 import { useQuery } from '@/hooks/useQuery';
-import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { DiscoverTab } from '@/types/discover';
 
 const useStyles = createStyles(({ css, token, prefixCls }) => {
@@ -36,14 +35,14 @@ interface PaginationProps {
 const Pagination = memo<PaginationProps>(({ tab, currentPage, total, pageSize }) => {
   const { styles } = useStyles();
   const { page } = useQuery();
-  const router = useQueryRoute();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   const handlePageChange = (newPage: number) => {
-    router.push(urlJoin('/discover', tab), {
-      query: {
-        page: String(newPage),
-      },
-    });
+    const searchParams = new URLSearchParams(location.search);
+    searchParams.set('page', String(newPage));
+    navigate(`/${tab}?${searchParams.toString()}`);
+
     const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
     if (!scrollableElement) return;
     scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });

package/src/app/[variants]/(main)/discover/(list)/mcp/McpLayout.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { memo, PropsWithChildren } from 'react';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+interface McpLayoutProps extends PropsWithChildren {
+  mobile?: boolean;
+}
+
+const McpLayout = memo<McpLayoutProps>(({ children, mobile }) => {
+  if (mobile) {
+    return <Mobile>{children}</Mobile>;
+  }
+  return <Desktop>{children}</Desktop>;
+});
+
+McpLayout.displayName = 'McpLayout';
+
+export default McpLayout;

package/src/app/[variants]/(main)/discover/(list)/mcp/McpPage.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+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, McpQueryParams } from '@/types/discover';
+
+import Pagination from '../features/Pagination';
+import List from './features/List';
+import Loading from './loading';
+
+const McpPage = memo<{ mobile?: boolean }>(() => {
+  const { q, page, category, sort, order } = useQuery() as McpQueryParams;
+  const useMcpList = useDiscoverStore((s) => s.useFetchMcpList);
+  const { data, isLoading } = useMcpList({
+    category,
+    order,
+    page,
+    pageSize: 21,
+    q,
+    sort,
+  });
+
+  if (isLoading || !data) return <Loading />;
+
+  const { items, currentPage, pageSize, totalCount } = data;
+
+  return (
+    <Flexbox gap={32} width={'100%'}>
+      <List data={items} />
+      <Pagination
+        currentPage={currentPage}
+        pageSize={pageSize}
+        tab={DiscoverTab.Mcp}
+        total={totalCount}
+      />
+    </Flexbox>
+  );
+});
+
+export default withSuspense(McpPage);

package/src/app/[variants]/(main)/discover/(list)/mcp/features/Category/index.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { Icon, Tag } from '@lobehub/ui';
-import Link from 'next/link';
-import { useRouter } from 'nextjs-toploader/app';
+import { Link, useNavigate } from 'react-router-dom';
 import qs from 'query-string';
 import { memo, useMemo } from 'react';
 
@@ -19,20 +18,20 @@ const Category = memo(() => {
   const useMcpCategories = useDiscoverStore((s) => s.useMcpCategories);
   const { category = 'all', q } = useQuery() as { category?: McpCategory; q?: string };
   const { data: items = [] } = useMcpCategories({ q });
-  const route = useRouter();
+  const navigate = useNavigate();
   const cates = useCategory();
 
   const genUrl = (key: McpCategory) =>
     qs.stringifyUrl(
       {
         query: { category: key === McpCategory.All ? null : key, q },
-        url: '/discover/mcp',
+        url: '/mcp',
       },
       { skipNull: true },
     );
 
   const handleClick = (key: McpCategory) => {
-    route.push(genUrl(key));
+    navigate(genUrl(key));
     const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
     if (!scrollableElement) return;
     scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
@@ -70,7 +69,7 @@ const Category = memo(() => {
                 ),
           ...item,
           icon: <Icon icon={item.icon} size={18} />,
-          label: <Link href={genUrl(item.key)}>{item.label}</Link>,
+          label: <Link to={genUrl(item.key)}>{item.label}</Link>,
         };
       })}
       mode={'inline'}

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

@@ -5,11 +5,10 @@ import { ActionIcon, Avatar, Block, Icon, Tag, Text, Tooltip } from '@lobehub/ui
 import { Spotlight } from '@lobehub/ui/awesome';
 import { createStyles } from 'antd-style';
 import { ClockIcon } from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'nextjs-toploader/app';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { Link, useNavigate } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import InstallationIcon from '@/components/MCPDepsIcon';
@@ -78,14 +77,14 @@ const McpItem = memo<DiscoverMcpItem>(
   }) => {
     const { t } = useTranslation('discover');
     const { styles, theme } = useStyles();
-    const router = useRouter();
-    const link = urlJoin('/discover/mcp', identifier);
+    const navigate = useNavigate();
+    const link = urlJoin('/mcp', identifier);
     return (
       <Block
         clickable
         height={'100%'}
         onClick={() => {
-          router.push(link);
+          navigate(link);
         }}
         style={{
           overflow: 'hidden',
@@ -128,7 +127,7 @@ const McpItem = memo<DiscoverMcpItem>(
                   overflow: 'hidden',
                 }}
               >
-                <Link href={link} style={{ color: 'inherit', overflow: 'hidden' }}>
+                <Link style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
                   <Text as={'h2'} className={styles.title} ellipsis>
                     {name}
                   </Text>
@@ -145,9 +144,14 @@ const McpItem = memo<DiscoverMcpItem>(
           <Flexbox align={'center'} gap={4} horizontal>
             {installationMethods && <InstallationIcon type={installationMethods} />}
             {github && (
-              <Link href={github.url} onClick={(e) => e.stopPropagation()} target={'_blank'}>
+              <a
+                href={github.url}
+                onClick={(e) => e.stopPropagation()}
+                rel="noopener noreferrer"
+                target={'_blank'}
+              >
                 <ActionIcon fill={theme.colorTextDescription} icon={Github} />
-              </Link>
+              </a>
             )}
           </Flexbox>
         </Flexbox>

package/src/app/[variants]/(main)/discover/(list)/model/ModelLayout.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { memo, PropsWithChildren } from 'react';
+
+import Desktop from './_layout/Desktop';
+import Mobile from './_layout/Mobile';
+
+interface ModelLayoutProps extends PropsWithChildren {
+  mobile?: boolean;
+}
+
+const ModelLayout = memo<ModelLayoutProps>(({ children, mobile }) => {
+  if (mobile) {
+    return <Mobile>{children}</Mobile>;
+  }
+  return <Desktop>{children}</Desktop>;
+});
+
+ModelLayout.displayName = 'ModelLayout';
+
+export default ModelLayout;

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

@@ -0,0 +1,44 @@
+'use client';
+
+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';
+
+import Pagination from '../features/Pagination';
+import List from './features/List';
+import Loading from './loading';
+
+const ModelPage = memo<{ mobile?: boolean }>(() => {
+  const { q, page, category, sort, order } = useQuery() as ModelQueryParams;
+  const useModelList = useDiscoverStore((s) => s.useModelList);
+  const { data, isLoading } = useModelList({
+    category,
+    order,
+    page,
+    pageSize: 21,
+    q,
+    sort,
+  });
+
+  if (isLoading || !data) return <Loading />;
+
+  const { items, currentPage, pageSize, totalCount } = data;
+
+  return (
+    <Flexbox gap={32} width={'100%'}>
+      <List data={items} />
+      <Pagination
+        currentPage={currentPage}
+        pageSize={pageSize}
+        tab={DiscoverTab.Models}
+        total={totalCount}
+      />
+    </Flexbox>
+  );
+});
+
+export default withSuspense(ModelPage);

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

@@ -4,7 +4,7 @@ import { Flexbox } from 'react-layout-kit';
 import CategoryContainer from '../../../components/CategoryContainer';
 import Category from '../features/Category';
 
-const Layout = async ({ children }: PropsWithChildren) => {
+const Layout = ({ children }: PropsWithChildren) => {
   return (
     <Flexbox gap={24} horizontal style={{ position: 'relative' }} width={'100%'}>
       <CategoryContainer>

package/src/app/[variants]/(main)/discover/(list)/model/features/Category/index.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { Icon, Tag } from '@lobehub/ui';
-import Link from 'next/link';
-import { useRouter } from 'nextjs-toploader/app';
+import { Link, useNavigate } from 'react-router-dom';
 import qs from 'query-string';
 import { memo, useMemo } from 'react';
 
@@ -18,20 +17,20 @@ const Category = memo(() => {
   const useModelCategories = useDiscoverStore((s) => s.useModelCategories);
   const { category = 'all', q } = useQuery() as { category?: string; q?: string };
   const { data: items = [] } = useModelCategories({ q });
-  const route = useRouter();
+  const navigate = useNavigate();
   const cates = useCategory();
 
   const genUrl = (key: string) =>
     qs.stringifyUrl(
       {
         query: { category: key === 'all' ? null : key, q },
-        url: '/discover/model',
+        url: '/model',
       },
       { skipNull: true },
     );
 
   const handleClick = (key: string) => {
-    route.push(genUrl(key));
+    navigate(genUrl(key));
     const scrollableElement = document?.querySelector(`#${SCROLL_PARENT_ID}`);
     if (!scrollableElement) return;
     scrollableElement.scrollTo({ behavior: 'smooth', top: 0 });
@@ -69,7 +68,7 @@ const Category = memo(() => {
                 ),
           ...item,
           icon: <Icon icon={item.icon} size={18} />,
-          label: <Link href={genUrl(item.key)}>{item.label}</Link>,
+          label: <Link to={genUrl(item.key)}>{item.label}</Link>,
         };
       })}
       mode={'inline'}

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

@@ -6,11 +6,10 @@ import { Popover } from 'antd';
 import { createStyles } from 'antd-style';
 import dayjs from 'dayjs';
 import { ClockIcon } from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'nextjs-toploader/app';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { Link, useNavigate } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import { ModelInfoTags } from '@/components/ModelSelect';
@@ -57,14 +56,14 @@ const ModelItem = memo<DiscoverModelItem>(
   ({ identifier, displayName, contextWindowTokens, releasedAt, type, abilities, providers }) => {
     const { t } = useTranslation(['models', 'discover']);
     const { styles } = useStyles();
-    const router = useRouter();
-    const link = urlJoin('/discover/model', identifier);
+    const navigate = useNavigate();
+    const link = urlJoin('/model', identifier);
     return (
       <Block
         clickable
         height={'100%'}
         onClick={() => {
-          router.push(link);
+          navigate(link);
         }}
         style={{
           overflow: 'hidden',
@@ -106,7 +105,7 @@ const ModelItem = memo<DiscoverModelItem>(
                   overflow: 'hidden',
                 }}
               >
-                <Link href={link} style={{ color: 'inherit', overflow: 'hidden' }}>
+                <Link style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
                   <Text as={'h2'} className={styles.title} ellipsis>
                     {displayName}
                   </Text>

package/src/app/[variants]/(main)/discover/(list)/provider/ProviderPage.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+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';
+
+import Pagination from '../features/Pagination';
+import List from './features/List';
+import Loading from './loading';
+
+const ProviderPage = memo<{ mobile?: boolean }>(() => {
+  const { q, page, sort, order } = useQuery() as ProviderQueryParams;
+  const useProviderList = useDiscoverStore((s) => s.useProviderList);
+  const { data, isLoading } = useProviderList({
+    order,
+    page,
+    pageSize: 21,
+    q,
+    sort,
+  });
+
+  if (isLoading || !data) return <Loading />;
+
+  const { items, currentPage, pageSize, totalCount } = data;
+
+  return (
+    <Flexbox gap={32} width={'100%'}>
+      <List data={items} />
+      <Pagination
+        currentPage={currentPage}
+        pageSize={pageSize}
+        tab={DiscoverTab.Providers}
+        total={totalCount}
+      />
+    </Flexbox>
+  );
+});
+
+export default withSuspense(ProviderPage);

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

@@ -2,11 +2,10 @@ import { Github, ModelTag, ProviderCombine } from '@lobehub/icons';
 import { ActionIcon, Block, MaskShadow, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { GlobeIcon } from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'nextjs-toploader/app';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
+import { Link, useNavigate } from 'react-router-dom';
 import urlJoin from 'url-join';
 
 import { DiscoverProviderItem } from '@/types/discover';
@@ -48,8 +47,8 @@ const useStyles = createStyles(({ css, token }) => {
 const ProviderItem = memo<DiscoverProviderItem>(
   ({ url, name, description, identifier, models }) => {
     const { styles, theme } = useStyles();
-    const router = useRouter();
-    const link = urlJoin('/discover/provider', identifier);
+    const navigate = useNavigate();
+    const link = urlJoin('/provider', identifier);
     const { t } = useTranslation(['discover', 'providers']);
 
     return (
@@ -57,7 +56,7 @@ const ProviderItem = memo<DiscoverProviderItem>(
         clickable
         height={'100%'}
         onClick={() => {
-          router.push(link);
+          navigate(link);
         }}
         style={{
           overflow: 'hidden',
@@ -80,22 +79,28 @@ const ProviderItem = memo<DiscoverProviderItem>(
             }}
             title={identifier}
           >
-            <Link href={link} style={{ color: 'inherit', overflow: 'hidden' }}>
+            <Link style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
               <ProviderCombine provider={identifier} size={28} style={{ flex: 'none' }} />
             </Link>
             <div className={styles.author}>@{name}</div>
           </Flexbox>
           <Flexbox align={'center'} horizontal>
-            <Link href={url} onClick={(e) => e.stopPropagation()} target={'_blank'}>
+            <a
+              href={url}
+              onClick={(e) => e.stopPropagation()}
+              rel="noopener noreferrer"
+              target={'_blank'}
+            >
               <ActionIcon color={theme.colorTextDescription} icon={GlobeIcon} />
-            </Link>
-            <Link
+            </a>
+            <a
               href={`https://github.com/lobehub/lobe-chat/blob/main/src/config/modelProviders/${identifier}.ts`}
               onClick={(e) => e.stopPropagation()}
+              rel="noopener noreferrer"
               target={'_blank'}
             >
               <ActionIcon fill={theme.colorTextDescription} icon={Github} />
-            </Link>
+            </a>
           </Flexbox>
         </Flexbox>
         <Flexbox flex={1} gap={12} paddingInline={16}>
@@ -122,7 +127,7 @@ const ProviderItem = memo<DiscoverProviderItem>(
               .slice(0, 6)
               .filter(Boolean)
               .map((tag: string) => (
-                <Link href={urlJoin('/discover/model', tag)} key={tag}>
+                <Link key={tag} to={urlJoin('/model', tag)}>
                   <ModelTag model={tag} style={{ margin: 0 }} />
                 </Link>
               ))}

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

@@ -0,0 +1,167 @@
+'use client';
+
+import { memo, useEffect } from 'react';
+import { MemoryRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { useMediaQuery } from 'react-responsive';
+
+import DiscoverLayout from './_layout/DiscoverLayout';
+import ListLayout from './(list)/_layout/ListLayout';
+import DetailLayout from './(detail)/_layout/DetailLayout';
+import HomePage from './(list)/(home)/HomePage';
+import AssistantPage from './(list)/assistant/AssistantPage';
+import AssistantLayout from './(list)/assistant/AssistantLayout';
+import McpPage from './(list)/mcp/McpPage';
+import McpLayout from './(list)/mcp/McpLayout';
+import ModelPage from './(list)/model/ModelPage';
+import ModelLayout from './(list)/model/ModelLayout';
+import ProviderPage from './(list)/provider/ProviderPage';
+import AssistantDetailPage from './(detail)/assistant/AssistantDetailPage';
+import McpDetailPage from './(detail)/mcp/McpDetailPage';
+import ModelDetailPage from './(detail)/model/ModelDetailPage';
+import ProviderDetailPage from './(detail)/provider/ProviderDetailPage';
+
+// Get initial path from URL
+const getInitialPath = () => {
+  if (typeof window === 'undefined') return '/';
+  const fullPath = window.location.pathname;
+  const searchParams = window.location.search;
+  const discoverIndex = fullPath.indexOf('/discover');
+
+  if (discoverIndex !== -1) {
+    const pathAfterDiscover = fullPath.slice(discoverIndex + '/discover'.length) || '/';
+    return pathAfterDiscover + searchParams;
+  }
+  return '/';
+};
+
+// Helper component to sync URL with MemoryRouter
+const UrlSynchronizer = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Sync initial URL
+  useEffect(() => {
+    const fullPath = window.location.pathname;
+    const searchParams = window.location.search;
+    const discoverIndex = fullPath.indexOf('/discover');
+
+    if (discoverIndex !== -1) {
+      const pathAfterDiscover = fullPath.slice(discoverIndex + '/discover'.length) || '/';
+      const targetPath = pathAfterDiscover + searchParams;
+
+      if (location.pathname + location.search !== targetPath) {
+        navigate(targetPath, { replace: true });
+      }
+    }
+  }, []);
+
+  // Update browser URL when location changes
+  useEffect(() => {
+    const newUrl = `/discover${location.pathname}${location.search}`;
+    if (window.location.pathname + window.location.search !== newUrl) {
+      window.history.replaceState({}, '', newUrl);
+    }
+  }, [location.pathname, location.search]);
+
+  return null;
+};
+
+const DiscoverRouter = memo(() => {
+  const mobile = useMediaQuery({ maxWidth: 768 });
+
+  return (
+    <MemoryRouter initialEntries={[getInitialPath()]} initialIndex={0}>
+      <UrlSynchronizer />
+      <DiscoverLayout mobile={mobile}>
+        <Routes>
+          {/* List routes with ListLayout */}
+          <Route
+            element={
+              <ListLayout mobile={mobile}>
+                <HomePage mobile={mobile} />
+              </ListLayout>
+            }
+            path="/"
+          />
+          <Route
+            element={
+              <ListLayout mobile={mobile}>
+                <AssistantLayout mobile={mobile}>
+                  <AssistantPage mobile={mobile} />
+                </AssistantLayout>
+              </ListLayout>
+            }
+            path="/assistant"
+          />
+          <Route
+            element={
+              <ListLayout mobile={mobile}>
+                <ModelLayout mobile={mobile}>
+                  <ModelPage mobile={mobile} />
+                </ModelLayout>
+              </ListLayout>
+            }
+            path="/model"
+          />
+          <Route
+            element={
+              <ListLayout mobile={mobile}>
+                <ProviderPage mobile={mobile} />
+              </ListLayout>
+            }
+            path="/provider"
+          />
+          <Route
+            element={
+              <ListLayout mobile={mobile}>
+                <McpLayout mobile={mobile}>
+                  <McpPage mobile={mobile} />
+                </McpLayout>
+              </ListLayout>
+            }
+            path="/mcp"
+          />
+
+          {/* Detail routes with DetailLayout */}
+          <Route
+            element={
+              <DetailLayout mobile={mobile}>
+                <AssistantDetailPage mobile={mobile} />
+              </DetailLayout>
+            }
+            path="/assistant/*"
+          />
+          <Route
+            element={
+              <DetailLayout mobile={mobile}>
+                <ModelDetailPage mobile={mobile} />
+              </DetailLayout>
+            }
+            path="/model/*"
+          />
+          <Route
+            element={
+              <DetailLayout mobile={mobile}>
+                <ProviderDetailPage mobile={mobile} />
+              </DetailLayout>
+            }
+            path="/provider/*"
+          />
+          <Route
+            element={
+              <DetailLayout mobile={mobile}>
+                <McpDetailPage mobile={mobile} />
+              </DetailLayout>
+            }
+            path="/mcp/*"
+          />
+
+          {/* Fallback */}
+          <Route element={<Navigate replace to="/" />} path="*" />
+        </Routes>
+      </DiscoverLayout>
+    </MemoryRouter>
+  );
+});
+
+export default DiscoverRouter;

package/src/app/[variants]/(main)/discover/[[...path]]/page.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import DiscoverRouter from '../DiscoverRouter';
+
+const DiscoverPage = () => {
+  return <DiscoverRouter />;
+};
+
+DiscoverPage.displayName = 'DiscoverPage';
+
+export default DiscoverPage;