@lobehub/chat 1.18.1 → 1.18.2

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.18.2](https://github.com/lobehub/lobe-chat/compare/v1.18.1...v1.18.2)
+
+<sup>Released on **2024-09-18**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix InterceptingRoutes in discover.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix InterceptingRoutes in discover, closes [#4011](https://github.com/lobehub/lobe-chat/issues/4011) ([2b75040](https://github.com/lobehub/lobe-chat/commit/2b75040))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.18.1](https://github.com/lobehub/lobe-chat/compare/v1.18.0...v1.18.1)
 
 <sup>Released on **2024-09-18**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.18.1",
+  "version": "1.18.2",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -172,6 +172,7 @@
     "next-auth": "beta",
     "next-mdx-remote": "^4.4.1",
     "next-sitemap": "^4.2.3",
+    "nextjs-toploader": "^3.6.15",
     "numeral": "^2.0.6",
     "nuqs": "^1.17.8",
     "officeparser": "^4.1.1",

package/src/app/(main)/discover/(detail)/assistant/[slug]/features/InfoSidebar/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverAssistantItem, DiscoverPlugintem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -28,13 +28,13 @@ const InfoSidebar = memo<InfoSidebarProps>(({ pluginData, data, ...rest }) => {
       {pluginData && pluginData?.length > 0 && (
         <Block gap={12} title={t('assistants.plugins')}>
           {pluginData.map((item) => (
-            <InterceptingLink
+            <Link
               href={urlJoin('/discover/plugin', item.identifier)}
               key={item.identifier}
               style={{ color: 'inherit' }}
             >
               <ToolItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))}
         </Block>
       )}
@@ -46,12 +46,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ pluginData, data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/assistant', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/assistant', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

package/src/app/(main)/discover/(detail)/features/Back.tsx

@@ -8,8 +8,6 @@ import { CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
-
 const useStyles = createStyles(({ css, token }) => {
   return {
     back: css`
@@ -23,12 +21,9 @@ const useStyles = createStyles(({ css, token }) => {
 });
 
 const Back = memo<{ href: string; style?: CSSProperties }>(({ href, style }) => {
-  const { isIntercepted } = useInterceptingRoutes();
   const { t } = useTranslation('discover');
   const { styles } = useStyles();
 
-  if (isIntercepted) return null;
-
   return (
     <Link className={styles.back} href={href} style={{ marginBottom: 8, ...style }}>
       <Flexbox align={'center'} gap={8} horizontal>

package/src/app/(main)/discover/(detail)/features/DetailLayout.tsx

@@ -5,7 +5,6 @@ import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Footer from '@/features/Setting/Footer';
-import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
 
 import SidebarContainer from './SidebarContainer';
 
@@ -20,10 +19,9 @@ interface DetailLayoutProps {
 
 const DetailLayout = memo<DetailLayoutProps>(
   ({ statistics, mobile, header, sidebar, children, actions }) => {
-    const { md = true, xl = true } = useResponsive();
-    const { isIntercepted } = useInterceptingRoutes();
+    const { md = true } = useResponsive();
 
-    if (mobile || !md || (isIntercepted && !xl))
+    if (mobile || !md)
       return (
         <>
           {header}
@@ -37,36 +35,6 @@ const DetailLayout = memo<DetailLayoutProps>(
         </>
       );
 
-    if (isIntercepted) {
-      return (
-        <>
-          <Flexbox flex={1} gap={24} style={{ overflow: 'hidden', position: 'relative' }}>
-            <Flexbox style={{ paddingRight: 16 }}>{header}</Flexbox>
-            <Flexbox
-              gap={24}
-              style={{
-                overflowX: 'hidden',
-                overflowY: 'auto',
-                paddingBottom: 48,
-                paddingRight: 16,
-                position: 'relative',
-              }}
-            >
-              {children}
-              <Footer />
-            </Flexbox>
-          </Flexbox>
-          <SidebarContainer style={{ position: 'sticky', top: '0' }}>
-            <Flexbox gap={16} width={'100%'}>
-              {actions}
-              {statistics}
-            </Flexbox>
-            {sidebar}
-          </SidebarContainer>
-        </>
-      );
-    }
-
     return (
       <>
         {header}

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/InfoSidebar/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/model', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/model', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

package/src/app/(main)/discover/(detail)/model/[...slugs]/features/ProviderList/ProviderItem.tsx

@@ -1,7 +1,7 @@
 import { ModelTag, ProviderCombine } from '@lobehub/icons';
 import { ActionIcon, Grid, Icon, Tooltip } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { BadgeCheck, BookIcon, ChevronRightIcon, KeyIcon } from 'lucide-react';
 import Link from 'next/link';
 import { memo, useMemo } from 'react';
@@ -9,7 +9,6 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DEFAULT_MODEL_PROVIDER_LIST } from '@/config/modelProviders';
 import { BASE_PROVIDER_DOC_URL } from '@/const/url';
 import { DiscoverProviderItem } from '@/types/discover';
@@ -31,9 +30,12 @@ interface ProviderItemProps extends DiscoverProviderItem {
 
 const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) => {
   const { t } = useTranslation('discover');
+  const { xl = true } = useResponsive();
   const { styles, theme } = useStyles();
   const isLobeHub = identifier === 'lobehub';
 
+  const isMobile = mobile || !xl;
+
   const model = useMemo(() => {
     const prividerItem = DEFAULT_MODEL_PROVIDER_LIST.find((v) => v.id === identifier);
     if (!prividerItem) return;
@@ -70,13 +72,10 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
 
   const header = (
     <Flexbox gap={4} style={{ minWidth: 240 }}>
-      <InterceptingLink
-        href={urlJoin('/discover/provider', identifier)}
-        style={{ color: 'inherit' }}
-      >
+      <Link href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
         <ProviderCombine provider={identifier} size={24} />
-      </InterceptingLink>
-      <Flexbox align={'center'} gap={6} horizontal>
+      </Link>
+      <Flexbox align={'center'} gap={6} horizontal wrap={'wrap'}>
         <ModelTag model={modelId} style={{ background: theme.colorFillQuaternary, margin: 0 }} />
         {isLobeHub && (
           <Tooltip title={t('models.providerInfo.officialTooltip')}>
@@ -103,9 +102,9 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
   );
 
   const button = (
-    <InterceptingLink href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
+    <Link href={urlJoin('/discover/provider', identifier)} style={{ color: 'inherit' }}>
       <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
-    </InterceptingLink>
+    </Link>
   );
 
   return (
@@ -117,7 +116,7 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
       padding={16}
       wrap={'wrap'}
     >
-      {mobile && (
+      {isMobile && (
         <Flexbox align={'center'} horizontal justify={'space-between'}>
           {header}
           {button}
@@ -129,13 +128,13 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
         gap={16}
         horizontal
         maxItemWidth={100}
-        rows={mobile ? 2 : items.length + 1}
+        rows={isMobile ? 2 : items.length + 1}
         style={{ minWidth: 240 }}
       >
-        {!mobile && header}
+        {!isMobile && header}
         {items.map((item, index) => (
           <Statistic
-            align={mobile ? 'flex-start' : 'center'}
+            align={isMobile ? 'flex-start' : 'center'}
             gap={4}
             key={index}
             valuePlacement={'bottom'}
@@ -144,7 +143,7 @@ const ProviderItem = memo<ProviderItemProps>(({ mobile, modelId, identifier }) =
           />
         ))}
       </Grid>
-      {!mobile && button}
+      {!isMobile && button}
     </Flexbox>
   );
 });

package/src/app/(main)/discover/(detail)/plugin/[slug]/features/InfoSidebar/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverPlugintem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/plugin', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/plugin', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

package/src/app/(main)/discover/(detail)/provider/[slug]/features/InfoSidebar/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { Skeleton } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverProviderItem } from '@/types/discover';
 
 import Block from '../../../../features/Block';
@@ -31,12 +31,9 @@ const InfoSidebar = memo<InfoSidebarProps>(({ data, ...rest }) => {
       >
         {data?.suggestions?.length > 0 ? (
           data?.suggestions.map((item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/provider', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/provider', item.identifier)} key={item.identifier}>
               <SuggestionItem {...item} />
-            </InterceptingLink>
+            </Link>
           ))
         ) : (
           <Skeleton active paragraph={{ rows: 5 }} title={false} />

package/src/app/(main)/discover/(detail)/provider/[slug]/features/ModelList/ModelItem.tsx

@@ -1,14 +1,14 @@
 import { ModelIcon } from '@lobehub/icons';
 import { ActionIcon, Grid } from '@lobehub/ui';
 import { Typography } from 'antd';
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { ChevronRightIcon } from 'lucide-react';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox, FlexboxProps } from 'react-layout-kit';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 import { formatPriceByCurrency, formatTokenNumber } from '@/utils/format';
 
@@ -48,9 +48,12 @@ export interface SuggestionItemProps
 
 const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
   const { title, tokens, vision, functionCall } = meta;
+  const { xl = true } = useResponsive();
   const { t } = useTranslation('discover');
   const { styles, theme } = useStyles();
 
+  const isMobile = mobile || !xl;
+
   const items: StatisticProps[] = [
     {
       title: t('models.contentLength'),
@@ -81,7 +84,7 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
 
   const header = (
     <Flexbox gap={12}>
-      <InterceptingLink href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
+      <Link href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
         <Flexbox align={'center'} gap={12} horizontal width={'100%'}>
           <ModelIcon model={identifier} size={36} type={'avatar'} />
           <Flexbox style={{ overflow: 'hidden' }}>
@@ -93,15 +96,15 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
             </Paragraph>
           </Flexbox>
         </Flexbox>
-      </InterceptingLink>
+      </Link>
       <ModelFeatureTags functionCall={functionCall} tokens={tokens} vision={vision} />
     </Flexbox>
   );
 
   const button = (
-    <InterceptingLink href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
+    <Link href={urlJoin('/discover/model', identifier)} style={{ color: 'inherit' }}>
       <ActionIcon color={theme.colorTextDescription} icon={ChevronRightIcon} />
-    </InterceptingLink>
+    </Link>
   );
 
   return (
@@ -113,7 +116,7 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
       padding={16}
       wrap={'wrap'}
     >
-      {mobile && (
+      {isMobile && (
         <Flexbox align={'center'} horizontal justify={'space-between'}>
           {header}
           {button}
@@ -125,13 +128,13 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
         gap={16}
         horizontal
         maxItemWidth={100}
-        rows={mobile ? 2 : items.length + 1}
+        rows={isMobile ? 2 : items.length + 1}
         style={{ minWidth: 240 }}
       >
-        {!mobile && header}
+        {!isMobile && header}
         {items.map((item, index) => (
           <Statistic
-            align={mobile ? 'flex-start' : 'center'}
+            align={isMobile ? 'flex-start' : 'center'}
             gap={4}
             key={index}
             valuePlacement={'bottom'}
@@ -140,7 +143,7 @@ const ModelItem = memo<SuggestionItemProps>(({ mobile, meta, identifier }) => {
           />
         ))}
       </Grid>
-      {!mobile && button}
+      {!isMobile && button}
     </Flexbox>
   );
 });

package/src/app/(main)/discover/(list)/(home)/features/AssistantList.tsx

@@ -1,8 +1,8 @@
 import { Grid } from '@lobehub/ui';
+import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverAssistantItem } from '@/types/discover';
 
 import Card from '../../assistants/features/Card';
@@ -11,20 +11,14 @@ const AssistantList = memo<{ data: DiscoverAssistantItem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.slice(0, 8).map((item) => (
-        <InterceptingLink
-          href={urlJoin('/discover/assistant/', item.identifier)}
-          key={item.identifier}
-        >
+        <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
           <Card showCategory {...item} />
-        </InterceptingLink>
+        </Link>
       ))}
       {data.slice(8, 16).map((item) => (
-        <InterceptingLink
-          href={urlJoin('/discover/assistant/', item.identifier)}
-          key={item.identifier}
-        >
+        <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
           <Card showCategory variant={'compact'} {...item} />
-        </InterceptingLink>
+        </Link>
       ))}
     </Grid>
   );

package/src/app/(main)/discover/(list)/(home)/features/ModelList.tsx

@@ -1,8 +1,8 @@
 import { Grid } from '@lobehub/ui';
+import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 
 import Card from '../../models/features/Card';
@@ -11,9 +11,9 @@ const ModelList = memo<{ data: DiscoverModelItem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.map((item) => (
-        <InterceptingLink href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
+        <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
           <Card {...item} />
-        </InterceptingLink>
+        </Link>
       ))}
     </Grid>
   );

package/src/app/(main)/discover/(list)/(home)/features/PluginList.tsx

@@ -1,8 +1,8 @@
 import { Grid } from '@lobehub/ui';
+import Link from 'next/link';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverPlugintem } from '@/types/discover';
 
 import Card from '../../plugins/features/Card';
@@ -11,12 +11,9 @@ const PluginList = memo<{ data: DiscoverPlugintem[] }>(({ data }) => {
   return (
     <Grid maxItemWidth={280} rows={4}>
       {data.map((item) => (
-        <InterceptingLink
-          href={urlJoin('/discover/plugin/', item.identifier)}
-          key={item.identifier}
-        >
+        <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
           <Card showCategory variant={'compact'} {...item} />
-        </InterceptingLink>
+        </Link>
       ))}
     </Grid>
   );

package/src/app/(main)/discover/(list)/assistants/features/List.tsx

@@ -2,11 +2,11 @@
 
 import { Grid } from '@lobehub/ui';
 import { Empty } from 'antd';
+import Link from 'next/link';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverAssistantItem } from '@/types/discover';
 
 import SearchResultCount from '../../../components/SearchResultCount';
@@ -42,12 +42,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           data={all}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/assistant/', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
               <Card showCategory variant={'compact'} {...item} />
-            </InterceptingLink>
+            </Link>
           )}
           style={{
             minHeight: '75vh',
@@ -62,12 +59,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
       <Title>{t('assistants.recentSubmits')}</Title>
       <Grid maxItemWidth={280} rows={4}>
         {recent.map((item) => (
-          <InterceptingLink
-            href={urlJoin('/discover/assistant/', item.identifier)}
-            key={item.identifier}
-          >
+          <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
             <Card showCategory={!category} {...item} />
-          </InterceptingLink>
+          </Link>
         ))}
       </Grid>
       {last && last?.length > 0 && (
@@ -77,12 +71,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             data={last}
             initialItemCount={12}
             itemContent={(_, item) => (
-              <InterceptingLink
-                href={urlJoin('/discover/assistant/', item.identifier)}
-                key={item.identifier}
-              >
+              <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
                 <Card showCategory={!category} variant={'compact'} {...item} />
-              </InterceptingLink>
+              </Link>
             )}
             style={{
               minHeight: '75vh',

package/src/app/(main)/discover/(list)/models/features/List.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Empty } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverModelItem } from '@/types/discover';
 
 import SearchResultCount from '../../../components/SearchResultCount';
@@ -32,12 +32,9 @@ const List = memo<ListProps>(({ category, searchKeywords, items = [] }) => {
           data={items}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/model/', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
               <Card showCategory {...item} />
-            </InterceptingLink>
+            </Link>
           )}
           style={{
             minHeight: '75vh',
@@ -54,12 +51,9 @@ const List = memo<ListProps>(({ category, searchKeywords, items = [] }) => {
         data={items}
         initialItemCount={24}
         itemContent={(_, item) => (
-          <InterceptingLink
-            href={urlJoin('/discover/model/', item.identifier)}
-            key={item.identifier}
-          >
+          <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
             <Card showCategory={!category} {...item} />
-          </InterceptingLink>
+          </Link>
         )}
         style={{
           minHeight: '75vh',

package/src/app/(main)/discover/(list)/plugins/features/List.tsx

@@ -2,11 +2,11 @@
 
 import { Grid } from '@lobehub/ui';
 import { Empty } from 'antd';
+import Link from 'next/link';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverPlugintem } from '@/types/discover';
 
 import SearchResultCount from '../../../components/SearchResultCount';
@@ -41,12 +41,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           data={all}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/plugin/', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
               <Card showCategory variant={'compact'} {...item} />
-            </InterceptingLink>
+            </Link>
           )}
           style={{
             minHeight: '75vh',
@@ -61,12 +58,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
       <Title>{t('plugins.recentSubmits')}</Title>
       <Grid maxItemWidth={280} rows={4}>
         {recent.map((item) => (
-          <InterceptingLink
-            href={urlJoin('/discover/plugin/', item.identifier)}
-            key={item.identifier}
-          >
+          <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
             <Card showCategory={!category} {...item} />
-          </InterceptingLink>
+          </Link>
         ))}
       </Grid>
       {last && last?.length > 0 && (
@@ -76,12 +70,9 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             data={last}
             initialItemCount={12}
             itemContent={(_, item) => (
-              <InterceptingLink
-                href={urlJoin('/discover/plugin/', item.identifier)}
-                key={item.identifier}
-              >
+              <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
                 <Card showCategory={!category} variant={'compact'} {...item} />
-              </InterceptingLink>
+              </Link>
             )}
             style={{
               minHeight: '75vh',

package/src/app/(main)/discover/(list)/providers/features/List.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import { Empty } from 'antd';
+import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { DiscoverProviderItem } from '@/types/discover';
 
 import SearchResultCount from '../../../components/SearchResultCount';
@@ -31,12 +31,9 @@ const List = memo<ListProps>(({ searchKeywords, items = [], mobile }) => {
           data={items}
           initialItemCount={6}
           itemContent={(_, item) => (
-            <InterceptingLink
-              href={urlJoin('/discover/provider/', item.identifier)}
-              key={item.identifier}
-            >
+            <Link href={urlJoin('/discover/provider/', item.identifier)} key={item.identifier}>
               <Card {...item} mobile={mobile} style={{ minHeight: 'unset' }} />
-            </InterceptingLink>
+            </Link>
           )}
           style={{
             minHeight: '75vh',
@@ -53,12 +50,9 @@ const List = memo<ListProps>(({ searchKeywords, items = [], mobile }) => {
         data={items}
         initialItemCount={6}
         itemContent={(_, item) => (
-          <InterceptingLink
-            href={urlJoin('/discover/provider/', item.identifier)}
-            key={item.identifier}
-          >
+          <Link href={urlJoin('/discover/provider/', item.identifier)} key={item.identifier}>
             <Card {...item} mobile={mobile} style={{ minHeight: 'unset' }} />
-          </InterceptingLink>
+          </Link>
         )}
         style={{
           minHeight: '75vh',

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

@@ -1,11 +1,14 @@
 import { PropsWithChildren } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import NProgress from '@/components/NProgress';
+
 import Header from './Header';
 
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <>
+      <NProgress />
       <Flexbox height={'100%'} style={{ overflow: 'hidden', position: 'relative' }} width={'100%'}>
         <Header />
         {children}

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

@@ -1,7 +1,14 @@
 import { PropsWithChildren } from 'react';
 
+import NProgress from '@/components/NProgress';
+
 const Layout = ({ children }: PropsWithChildren) => {
-  return children;
+  return (
+    <>
+      <NProgress />
+      {children}
+    </>
+  );
 };
 
 Layout.displayName = 'MobileDiscoverStoreLayout';

package/src/app/layout.tsx

@@ -24,6 +24,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
 
   const lang = cookieStore.get(LOBE_LOCALE_COOKIE);
   const direction = isRtlLang(lang?.value || DEFAULT_LANG) ? 'rtl' : 'ltr';
+  const mobile = isMobileDevice();
 
   return (
     <html dir={direction} lang={lang?.value || DEFAULT_LANG} suppressHydrationWarning>
@@ -31,7 +32,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
         <GlobalProvider>
           <AuthProvider>
             {children}
-            {modal}
+            {!mobile && modal}
           </AuthProvider>
           <PWAInstall />
         </GlobalProvider>

package/src/components/NProgress/index.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { useTheme } from 'antd-style';
+import NextTopLoader from 'nextjs-toploader';
+import { memo } from 'react';
+
+const NProgress = memo(() => {
+  const theme = useTheme();
+  return <NextTopLoader color={theme.colorText} height={2} shadow={false} showSpinner={false} />;
+});
+
+export default NProgress;

package/src/features/Conversation/components/InboxWelcome/AgentsSuggest.tsx

@@ -4,13 +4,13 @@ import { ActionIcon, Avatar, Grid } from '@lobehub/ui';
 import { Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { RefreshCw } from 'lucide-react';
+import Link from 'next/link';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import useSWR from 'swr';
 import urlJoin from 'url-join';
 
-import InterceptingLink from '@/components/InterceptingLink';
 import { assistantService } from '@/services/assistant';
 import { useUserStore } from '@/store/user';
 import { userGeneralSettingsSelectors } from '@/store/user/selectors';
@@ -105,10 +105,7 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
           : assistantList
               .slice(sliceStart, sliceStart + agentLength)
               .map((item: DiscoverAssistantItem) => (
-                <InterceptingLink
-                  href={urlJoin('/discover/assistant/', item.identifier)}
-                  key={item.identifier}
-                >
+                <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
                   <Flexbox className={styles.card} gap={8} horizontal>
                     <Avatar avatar={item.meta.avatar} style={{ flex: 'none' }} />
                     <Flexbox gap={mobile ? 2 : 8} style={{ overflow: 'hidden', width: '100%' }}>
@@ -120,7 +117,7 @@ const AgentsSuggest = memo<{ mobile?: boolean }>(({ mobile }) => {
                       </Paragraph>
                     </Flexbox>
                   </Flexbox>
-                </InterceptingLink>
+                </Link>
               ))}
       </Grid>
     </Flexbox>

package/src/hooks/useInterceptingRoutes.ts

@@ -47,20 +47,5 @@ export const useOpenChatSettings = (tab: ChatSettingsTabs = ChatSettingsTabs.Met
 };
 
 export const useInterceptingRoutes = () => {
-  const router = useQueryRoute();
-  const mobile = useIsMobile();
-  const isIntercepted = useContext(InterceptContext);
-  return useMemo(
-    () => ({
-      isIntercepted,
-      push: (url: string, disableIntercepting?: boolean) => {
-        if (disableIntercepting || mobile) {
-          router.push(`/redirect`, { query: { url } });
-          return;
-        }
-        router.push(url);
-      },
-    }),
-    [mobile, router, isIntercepted],
-  );
+  return useContext(InterceptContext);
 };

package/src/app/@modal/(.)discover/assistant/[slug]/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/discover/(detail)/assistant/[slug]/page';

package/src/app/@modal/(.)discover/layout.tsx

@@ -1,29 +0,0 @@
-'use client';
-
-import { useResponsive } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-const Layout = memo<PropsWithChildren>(({ children }) => {
-  const { xl = true } = useResponsive();
-
-  return (
-    <Flexbox
-      flex={1}
-      gap={16}
-      horizontal={xl}
-      paddingInline={48}
-      style={{
-        overflow: xl ? 'hidden' : 'auto',
-        paddingBottom: xl ? 0 : 24,
-        paddingTop: 48,
-        position: 'relative',
-      }}
-      width={'100%'}
-    >
-      {children}
-    </Flexbox>
-  );
-});
-
-export default Layout;

package/src/app/@modal/(.)discover/loading.tsx

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from '@/app/(main)/discover/(detail)/loading';

package/src/app/@modal/(.)discover/model/[...slugs]/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/discover/(detail)/model/[...slugs]/page';

package/src/app/@modal/(.)discover/plugin/[slug]/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/discover/(detail)/plugin/[slug]/page';

package/src/app/@modal/(.)discover/provider/[slug]/page.tsx

@@ -1 +0,0 @@
-export { default } from '@/app/(main)/discover/(detail)/provider/[slug]/page';

package/src/app/redirect/page.tsx

@@ -1,15 +0,0 @@
-import type { Metadata } from 'next';
-import { redirect } from 'next/navigation';
-
-export default function Page({ searchParams }: { searchParams: { url: string } }) {
-  redirect(searchParams.url);
-}
-
-export function generateMetadata(): Metadata {
-  return {
-    robots: {
-      follow: false,
-      index: false,
-    },
-  };
-}

package/src/components/InterceptingLink/index.tsx

@@ -1,27 +0,0 @@
-import Link, { LinkProps } from 'next/link';
-import { CSSProperties, ReactNode, memo } from 'react';
-
-import { useInterceptingRoutes } from '@/hooks/useInterceptingRoutes';
-
-interface InterceptingLinkProps extends LinkProps {
-  children: ReactNode;
-  className?: string;
-  disableIntercepting?: boolean;
-  style?: CSSProperties;
-}
-
-const InterceptingLink = memo<InterceptingLinkProps>(({ href, disableIntercepting, ...rest }) => {
-  const router = useInterceptingRoutes();
-  return (
-    <Link
-      href={href}
-      onClick={(e) => {
-        e.preventDefault();
-        router.push(href as any, disableIntercepting);
-      }}
-      {...rest}
-    />
-  );
-});
-
-export default InterceptingLink;