@lobehub/chat 1.49.1 → 1.49.3

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+### [Version 1.49.3](https://github.com/lobehub/lobe-chat/compare/v1.49.2...v1.49.3)
+
+<sup>Released on **2025-01-27**</sup>
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix discover ssr hydration error.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **misc**: Fix discover ssr hydration error, closes [#5605](https://github.com/lobehub/lobe-chat/issues/5605) ([e3702a6](https://github.com/lobehub/lobe-chat/commit/e3702a6))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+### [Version 1.49.2](https://github.com/lobehub/lobe-chat/compare/v1.49.1...v1.49.2)
+
+<sup>Released on **2025-01-27**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Remove use query.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Remove use query, closes [#5604](https://github.com/lobehub/lobe-chat/issues/5604) ([58c60de](https://github.com/lobehub/lobe-chat/commit/58c60de))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 1.49.1](https://github.com/lobehub/lobe-chat/compare/v1.49.0...v1.49.1)
 
 <sup>Released on **2025-01-27**</sup>

package/changelog/v1.json

@@ -1,4 +1,22 @@
 [
+  {
+    "children": {
+      "fixes": [
+        "Fix discover ssr hydration error."
+      ]
+    },
+    "date": "2025-01-27",
+    "version": "1.49.3"
+  },
+  {
+    "children": {
+      "improvements": [
+        "Remove use query."
+      ]
+    },
+    "date": "2025-01-27",
+    "version": "1.49.2"
+  },
   {
     "children": {
       "improvements": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.49.1",
+  "version": "1.49.3",
   "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",

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

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

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

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

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

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

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

@@ -3,6 +3,7 @@ import { Skeleton, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { startCase } from 'lodash-es';
 import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
 import qs from 'query-string';
 import { CSSProperties, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -26,8 +27,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     opacity: ${isDarkMode ? 0.9 : 0.4};
   `,
   container: css`
-    cursor: pointer;
-
     position: relative;
 
     overflow: hidden;
@@ -64,18 +63,19 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 export interface AssistantCardProps
   extends Omit<DiscoverAssistantItem, 'suggestions' | 'socialData' | 'config'> {
   className?: string;
+  href: string;
   showCategory?: boolean;
   style?: CSSProperties;
   variant?: 'default' | 'compact';
 }
 
 const AssistantCard = memo<AssistantCardProps>(
-  ({ showCategory, className, meta, createdAt, author, variant, style }) => {
+  ({ showCategory, className, meta, createdAt, author, variant, style, href }) => {
     const { avatar, title, description, tags = [], category } = meta;
     const { cx, styles, theme } = useStyles();
     const categoryItem = useCategoryItem(category, 12);
     const isCompact = variant === 'compact';
-
+    const router = useRouter();
     const user = (
       <Flexbox
         align={'center'}
@@ -90,60 +90,79 @@ const AssistantCard = memo<AssistantCardProps>(
 
     return (
       <Flexbox className={cx(styles.container, className)} gap={24} style={style}>
-        {!isCompact && <CardBanner avatar={avatar} />}
-        <Flexbox gap={12} padding={16}>
-          <Flexbox
-            align={isCompact ? 'flex-start' : 'flex-end'}
-            gap={16}
-            horizontal
-            justify={'space-between'}
-            style={{ position: 'relative' }}
-            width={'100%'}
+        {!isCompact && (
+          <div
+            onClick={() => {
+              router.push(href);
+            }}
           >
-            <Flexbox
-              gap={8}
-              style={{ overflow: 'hidden', paddingTop: isCompact ? 4 : 0, position: 'relative' }}
-            >
-              <Title
-                className={styles.title}
-                ellipsis={{ rows: 1, tooltip: title }}
-                level={3}
-                style={{ fontSize: isCompact ? 16 : 18 }}
-              >
-                {title}
-              </Title>
-              {isCompact && user}
-            </Flexbox>
-            {isCompact ? (
-              <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
-            ) : (
-              <Center
-                flex={'none'}
-                height={64}
-                style={{
-                  background: theme.colorBgContainer,
-                  borderRadius: '50%',
-                  marginTop: -6,
-                  overflow: 'hidden',
-                  zIndex: 2,
-                }}
-                width={64}
+            <CardBanner avatar={avatar} />
+          </div>
+        )}
+        <Flexbox gap={12} padding={16}>
+          <Link href={href}>
+            <Flexbox gap={12}>
+              <Flexbox
+                align={isCompact ? 'flex-start' : 'flex-end'}
+                gap={16}
+                horizontal
+                justify={'space-between'}
+                style={{ position: 'relative' }}
+                width={'100%'}
               >
-                <Avatar avatar={avatar} size={56} style={{ display: 'block' }} title={title} />
-              </Center>
-            )}
-          </Flexbox>
-          {!isCompact && (
-            <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
-              {user}
-              <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
-                {createdAt}
-              </time>
+                <Flexbox
+                  gap={8}
+                  style={{
+                    overflow: 'hidden',
+                    paddingTop: isCompact ? 4 : 0,
+                    position: 'relative',
+                  }}
+                >
+                  <Title
+                    className={styles.title}
+                    ellipsis={{ rows: 1, tooltip: title }}
+                    level={3}
+                    style={{ fontSize: isCompact ? 16 : 18 }}
+                  >
+                    {title}
+                  </Title>
+                  {isCompact && user}
+                </Flexbox>
+
+                {isCompact ? (
+                  <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
+                ) : (
+                  <Center
+                    flex={'none'}
+                    height={64}
+                    style={{
+                      background: theme.colorBgContainer,
+                      borderRadius: '50%',
+                      marginTop: -6,
+                      overflow: 'hidden',
+                      zIndex: 2,
+                    }}
+                    width={64}
+                  >
+                    <Avatar avatar={avatar} size={56} style={{ display: 'block' }} title={title} />
+                  </Center>
+                )}
+              </Flexbox>
+
+              {!isCompact && (
+                <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
+                  {user}
+                  <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
+                    {createdAt}
+                  </time>
+                </Flexbox>
+              )}
+              <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+                {description}
+              </Paragraph>
             </Flexbox>
-          )}
-          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
-            {description}
-          </Paragraph>
+          </Link>
+
           <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
             {showCategory && categoryItem ? (
               <Link href={urlJoin('/discover/assistants', categoryItem.key)}>

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

@@ -2,7 +2,6 @@
 
 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';
@@ -42,9 +41,13 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           data={all}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
-              <Card showCategory variant={'compact'} {...item} />
-            </Link>
+            <Card
+              href={urlJoin('/discover/assistant/', item.identifier)}
+              key={item.identifier}
+              showCategory
+              variant={'compact'}
+              {...item}
+            />
           )}
           style={{
             minHeight: '75vh',
@@ -59,9 +62,12 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
       <Title>{t('assistants.recentSubmits')}</Title>
       <Grid maxItemWidth={280} rows={4}>
         {recent.map((item) => (
-          <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
-            <Card showCategory={!category} {...item} />
-          </Link>
+          <Card
+            href={urlJoin('/discover/assistant/', item.identifier)}
+            key={item.identifier}
+            showCategory={!category}
+            {...item}
+          />
         ))}
       </Grid>
       {last && last?.length > 0 && (
@@ -71,9 +77,13 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             data={last}
             initialItemCount={12}
             itemContent={(_, item) => (
-              <Link href={urlJoin('/discover/assistant/', item.identifier)} key={item.identifier}>
-                <Card showCategory={!category} variant={'compact'} {...item} />
-              </Link>
+              <Card
+                href={urlJoin('/discover/assistant/', item.identifier)}
+                key={item.identifier}
+                showCategory={!category}
+                variant={'compact'}
+                {...item}
+              />
             )}
             style={{
               minHeight: '75vh',

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

@@ -1,6 +1,7 @@
 import { ModelIcon } from '@lobehub/icons';
 import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
+import Link from 'next/link';
 import { CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -16,8 +17,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     opacity: ${isDarkMode ? 0.9 : 0.4};
   `,
   container: css`
-    cursor: pointer;
-
     position: relative;
 
     overflow: hidden;
@@ -69,53 +68,56 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 
 export interface ModelCardProps extends DiscoverModelItem {
   className?: string;
+  href: string;
   showCategory?: boolean;
   style?: CSSProperties;
 }
 
-const ModelCard = memo<ModelCardProps>(({ className, meta, identifier, style }) => {
+const ModelCard = memo<ModelCardProps>(({ className, meta, identifier, style, href }) => {
   const { description, title, functionCall, vision, contextWindowTokens } = meta;
   const { t } = useTranslation('models');
   const { cx, styles } = useStyles();
 
   return (
-    <Flexbox className={cx(styles.container, className)} gap={24} key={identifier} style={style}>
-      <Flexbox
-        gap={12}
-        padding={16}
-        style={{ overflow: 'hidden', position: 'relative' }}
-        width={'100%'}
-      >
+    <Link href={href}>
+      <Flexbox className={cx(styles.container, className)} gap={24} key={identifier} style={style}>
         <Flexbox
-          align={'center'}
           gap={12}
-          horizontal
+          padding={16}
           style={{ overflow: 'hidden', position: 'relative' }}
           width={'100%'}
         >
-          <ModelIcon model={identifier} size={32} type={'avatar'} />
-          <Flexbox style={{ overflow: 'hidden', position: 'relative' }}>
-            <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
-              {title}
-            </Title>
-            <Paragraph className={styles.id} ellipsis={{ rows: 1 }}>
-              {identifier}
-            </Paragraph>
+          <Flexbox
+            align={'center'}
+            gap={12}
+            horizontal
+            style={{ overflow: 'hidden', position: 'relative' }}
+            width={'100%'}
+          >
+            <ModelIcon model={identifier} size={32} type={'avatar'} />
+            <Flexbox style={{ overflow: 'hidden', position: 'relative' }}>
+              <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+                {title}
+              </Title>
+              <Paragraph className={styles.id} ellipsis={{ rows: 1 }}>
+                {identifier}
+              </Paragraph>
+            </Flexbox>
           </Flexbox>
-        </Flexbox>
-        {description && (
-          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
-            {t(`${identifier}.description`)}
-          </Paragraph>
-        )}
+          {description && (
+            <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+              {t(`${identifier}.description`)}
+            </Paragraph>
+          )}
 
-        <ModelFeatureTags
-          functionCall={functionCall}
-          tokens={contextWindowTokens}
-          vision={vision}
-        />
+          <ModelFeatureTags
+            functionCall={functionCall}
+            tokens={contextWindowTokens}
+            vision={vision}
+          />
+        </Flexbox>
       </Flexbox>
-    </Flexbox>
+    </Link>
   );
 });
 

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

@@ -1,7 +1,6 @@
 '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';
@@ -32,9 +31,12 @@ const List = memo<ListProps>(({ category, searchKeywords, items = [] }) => {
           data={items}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
-              <Card showCategory {...item} />
-            </Link>
+            <Card
+              href={urlJoin('/discover/model', item.identifier)}
+              key={item.identifier}
+              showCategory
+              {...item}
+            />
           )}
           style={{
             minHeight: '75vh',
@@ -51,9 +53,12 @@ const List = memo<ListProps>(({ category, searchKeywords, items = [] }) => {
         data={items}
         initialItemCount={24}
         itemContent={(_, item) => (
-          <Link href={urlJoin('/discover/model/', item.identifier)} key={item.identifier}>
-            <Card showCategory={!category} {...item} />
-          </Link>
+          <Card
+            href={urlJoin('/discover/model/', item.identifier)}
+            key={item.identifier}
+            showCategory={!category}
+            {...item}
+          />
         )}
         style={{
           minHeight: '75vh',

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

@@ -25,8 +25,6 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
     opacity: ${isDarkMode ? 0.9 : 0.4};
   `,
   container: css`
-    cursor: pointer;
-
     position: relative;
 
     overflow: hidden;
@@ -66,13 +64,14 @@ const useStyles = createStyles(({ css, token, isDarkMode }) => ({
 interface PluginCardProps
   extends Omit<DiscoverPlugintem, 'manifest' | 'suggestions' | 'socialData'> {
   className?: string;
+  href: string;
   showCategory?: boolean;
   style?: CSSProperties;
   variant?: 'default' | 'compact';
 }
 
 const PluginCard = memo<PluginCardProps>(
-  ({ className, showCategory, meta, createdAt, author, variant, style }) => {
+  ({ className, showCategory, meta, createdAt, author, variant, style, href }) => {
     const { avatar, title, description, tags = [], category } = meta;
     const categoryItem = useCategoryItem(category, 12);
     const { cx, styles, theme } = useStyles();
@@ -81,47 +80,57 @@ const PluginCard = memo<PluginCardProps>(
     return (
       <Flexbox className={cx(styles.container, className)} gap={24} style={style}>
         {!isCompact && <CardBanner avatar={avatar} />}
-        <Flexbox className={styles.inner} gap={12}>
-          <Flexbox align={'flex-end'} gap={16} horizontal justify={'space-between'} width={'100%'}>
-            <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
-              {title}
-            </Title>
-            {isCompact ? (
-              <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
-            ) : (
-              <Center
-                flex={'none'}
-                height={64}
-                style={{
-                  background: theme.colorBgContainer,
-                  borderRadius: '50%',
-                  marginTop: -6,
-                  overflow: 'hidden',
-                  zIndex: 2,
-                }}
-                width={64}
+        <Flexbox gap={12} padding={16}>
+          <Link href={href}>
+            <Flexbox gap={12}>
+              <Flexbox
+                align={'flex-end'}
+                gap={16}
+                horizontal
+                justify={'space-between'}
+                width={'100%'}
               >
-                <Avatar
-                  alt={title}
-                  avatar={avatar}
-                  size={56}
-                  style={{ display: 'block' }}
-                  title={title}
-                />
-              </Center>
-            )}
-          </Flexbox>
-          <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
-            <div style={{ color: theme.colorTextSecondary }}>@{author}</div>
-            {!isCompact && (
-              <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
-                {createdAt}
-              </time>
-            )}
-          </Flexbox>
-          <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
-            {description}
-          </Paragraph>
+                <Title className={styles.title} ellipsis={{ rows: 1, tooltip: title }} level={3}>
+                  {title}
+                </Title>
+                {isCompact ? (
+                  <Avatar avatar={avatar} size={40} style={{ display: 'block' }} title={title} />
+                ) : (
+                  <Center
+                    flex={'none'}
+                    height={64}
+                    style={{
+                      background: theme.colorBgContainer,
+                      borderRadius: '50%',
+                      marginTop: -6,
+                      overflow: 'hidden',
+                      zIndex: 2,
+                    }}
+                    width={64}
+                  >
+                    <Avatar
+                      alt={title}
+                      avatar={avatar}
+                      size={56}
+                      style={{ display: 'block' }}
+                      title={title}
+                    />
+                  </Center>
+                )}
+              </Flexbox>
+              <Flexbox gap={8} horizontal style={{ fontSize: 12 }}>
+                <div style={{ color: theme.colorTextSecondary }}>@{author}</div>
+                {!isCompact && (
+                  <time className={styles.time} dateTime={new Date(createdAt).toISOString()}>
+                    {createdAt}
+                  </time>
+                )}
+              </Flexbox>
+              <Paragraph className={styles.desc} ellipsis={{ rows: 2 }}>
+                {description}
+              </Paragraph>
+            </Flexbox>
+          </Link>
           <Flexbox gap={6} horizontal style={{ flexWrap: 'wrap' }}>
             {showCategory && categoryItem ? (
               <Link href={urlJoin('/discover/plugins', categoryItem.key)}>

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

@@ -2,7 +2,6 @@
 
 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';
@@ -41,9 +40,13 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
           data={all}
           initialItemCount={24}
           itemContent={(_, item) => (
-            <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
-              <Card showCategory variant={'compact'} {...item} />
-            </Link>
+            <Card
+              showCategory
+              variant={'compact'}
+              {...item}
+              href={urlJoin('/discover/plugin/', item.identifier)}
+              key={item.identifier}
+            />
           )}
           style={{
             minHeight: '75vh',
@@ -58,9 +61,12 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
       <Title>{t('plugins.recentSubmits')}</Title>
       <Grid maxItemWidth={280} rows={4}>
         {recent.map((item) => (
-          <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
-            <Card showCategory={!category} {...item} />
-          </Link>
+          <Card
+            showCategory={!category}
+            {...item}
+            href={urlJoin('/discover/plugin/', item.identifier)}
+            key={item.identifier}
+          />
         ))}
       </Grid>
       {last && last?.length > 0 && (
@@ -70,9 +76,13 @@ const List = memo<ListProps>(({ category, mobile, searchKeywords, items = [] })
             data={last}
             initialItemCount={12}
             itemContent={(_, item) => (
-              <Link href={urlJoin('/discover/plugin/', item.identifier)} key={item.identifier}>
-                <Card showCategory={!category} variant={'compact'} {...item} />
-              </Link>
+              <Card
+                showCategory={!category}
+                variant={'compact'}
+                {...item}
+                href={urlJoin('/discover/plugin/', item.identifier)}
+                key={item.identifier}
+              />
             )}
             style={{
               minHeight: '75vh',

package/src/app/(main)/discover/features/StoreSearchBar.tsx

@@ -8,7 +8,6 @@ import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
-import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
 import { DiscoverTab } from '@/types/discover';
 
@@ -32,9 +31,8 @@ interface StoreSearchBarProps extends SearchBarProps {
 const StoreSearchBar = memo<StoreSearchBarProps>(({ mobile, onBlur, onFocus, ...rest }) => {
   const [active, setActive] = useState(false);
   const pathname = usePathname();
-  const { q } = useQuery();
   const { activeKey } = useNav();
-  const [searchKey, setSearchKey] = useQueryState('q');
+  const [searchKey, setSearchKey] = useQueryState('q', { clearOnDefault: true, defaultValue: '' });
 
   const { t } = useTranslation('discover');
   const { cx, styles } = useStyles();
@@ -45,8 +43,8 @@ const StoreSearchBar = memo<StoreSearchBarProps>(({ mobile, onBlur, onFocus, ...
   useEffect(() => {
     if (!pathname.includes('/discover/search')) return;
     // 使用 useQueryState 时，当 handleSearch 为空时无法回跳
-    if (!q) router.push(urlJoin('/discover', activeType), { query: {}, replace: true });
-  }, [q, pathname, activeType]);
+    if (!searchKey) router.push(urlJoin('/discover', activeType), { query: {}, replace: true });
+  }, [searchKey, pathname, activeType]);
 
   const handleSearch = (value: string) => {
     router.push('/discover/search', { query: { q: value, type: activeType } });

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

@@ -6,19 +6,19 @@ import { useTranslation } from 'react-i18next';
 import urlJoin from 'url-join';
 
 import type { MenuProps } from '@/components/Menu';
-import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverTab } from '@/hooks/useDiscoverTab';
 import { DiscoverTab } from '@/types/discover';
 
 export const useNav = () => {
   const pathname = usePathname();
-  const { type } = useQuery();
+  const type = useDiscoverTab();
   const { t } = useTranslation('discover');
   const iconSize = { fontSize: 16 };
 
   const activeKey = useMemo(() => {
     for (const value of Object.values(DiscoverTab)) {
       if (pathname === '/discover/search') {
-        return (type as DiscoverTab) || DiscoverTab.Assistants;
+        return type;
       } else if (pathname.includes(urlJoin('/discover', value))) {
         return value;
       }

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

@@ -5,14 +5,14 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import urlJoin from 'url-join';
 
-import { useQuery } from '@/hooks/useQuery';
+import { useDiscoverTab } from '@/hooks/useDiscoverTab';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
 
 import StoreSearchBar from '../../../features/StoreSearchBar';
 
 const Header = memo(() => {
   const router = useRouter();
-  const { type = 'assistants' } = useQuery();
+  const type = useDiscoverTab();
 
   return (
     <MobileNavBar

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

@@ -5,15 +5,13 @@ import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
-import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { ProfileTabs, SettingsTabs } from '@/store/global/initialState';
+import { ProfileTabs } from '@/store/global/initialState';
 
 import { useCategory } from '../../hooks/useCategory';
 
-const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
+const CategoryContent = memo(() => {
   const activeTab = useActiveSettingsKey();
-  const { tab = SettingsTabs.Common } = useQuery();
   const cateItems = useCategory();
   const router = useQueryRoute();
 
@@ -22,14 +20,11 @@ const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
       items={cateItems}
       onClick={({ key }) => {
         const activeKey = key === ProfileTabs.Profile ? '/' : key;
-        if (modal) {
-          router.replace('/profile/modal', { query: { tab: activeKey } });
-        } else {
-          router.push(urlJoin('/profile', activeKey));
-        }
+
+        router.push(urlJoin('/profile', activeKey));
       }}
       selectable
-      selectedKeys={[modal ? tab : (activeTab as any)]}
+      selectedKeys={[activeTab]}
       variant={'compact'}
     />
   );

package/src/app/(main)/settings/@category/features/CategoryContent.tsx

@@ -5,15 +5,12 @@ import urlJoin from 'url-join';
 
 import Menu from '@/components/Menu';
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
-import { useQuery } from '@/hooks/useQuery';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { SettingsTabs } from '@/store/global/initialState';
 
 import { useCategory } from '../../hooks/useCategory';
 
-const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
+const CategoryContent = memo(() => {
   const activeTab = useActiveSettingsKey();
-  const { tab = SettingsTabs.Common } = useQuery();
   const cateItems = useCategory();
   const router = useQueryRoute();
 
@@ -21,14 +18,10 @@ const CategoryContent = memo<{ modal?: boolean }>(({ modal }) => {
     <Menu
       items={cateItems}
       onClick={({ key }) => {
-        if (modal) {
-          router.replace('/settings/modal', { query: { tab: key } });
-        } else {
-          router.push(urlJoin('/settings', key));
-        }
+        router.push(urlJoin('/settings', key));
       }}
       selectable
-      selectedKeys={[modal ? tab : (activeTab as any)]}
+      selectedKeys={[activeTab]}
       variant={'compact'}
     />
   );

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

@@ -2,13 +2,15 @@
 
 import { MobileNavBar, MobileNavBarTitle } from '@lobehub/ui';
 import { Tag } from 'antd';
-import { useRouter, useSearchParams } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { useActiveSettingsKey } from '@/hooks/useActiveTabKey';
+import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { SettingsTabs } from '@/store/global/initialState';
+import { useSessionStore } from '@/store/session';
 import { useUserStore } from '@/store/user';
 import { authSelectors } from '@/store/user/selectors';
 import { mobileHeaderSticky } from '@/styles/mobileHeader';
@@ -16,14 +18,15 @@ import { mobileHeaderSticky } from '@/styles/mobileHeader';
 const Header = memo(() => {
   const { t } = useTranslation('setting');
 
-  const router = useRouter();
-  const searchParams = useSearchParams();
+  const router = useQueryRoute();
+  const showMobileWorkspace = useShowMobileWorkspace();
   const activeSettingsKey = useActiveSettingsKey();
-
+  const isSessionActive = useSessionStore((s) => !!s.activeId);
   const enableAuth = useUserStore(authSelectors.enabledAuth);
+
   const handleBackClick = () => {
-    if (searchParams.has('session') && searchParams.has('showMobileWorkspace')) {
-      router.push(`/chat?${searchParams.toString()}`);
+    if (isSessionActive && showMobileWorkspace) {
+      router.push('/chat');
     } else {
       router.push(enableAuth ? '/me/settings' : '/me');
     }

package/src/app/@modal/chat/(.)settings/modal/features/CategoryContent.tsx

@@ -5,15 +5,14 @@ import { Flexbox } from 'react-layout-kit';
 
 import HeaderContent from '@/app/(main)/chat/settings/features/HeaderContent';
 import Menu from '@/components/Menu';
-import { useQuery } from '@/hooks/useQuery';
+import { useChatSettingsTab } from '@/hooks/useChatSettingsTab';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
-import { ChatSettingsTabs } from '@/store/global/initialState';
 
 import { useCategory } from './useCategory';
 
 const CategoryContent = memo(() => {
   const cateItems = useCategory();
-  const { tab = ChatSettingsTabs.Meta } = useQuery();
+  const tab = useChatSettingsTab();
   const router = useQueryRoute();
 
   return (

package/src/app/@modal/chat/(.)settings/modal/layout.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import ModalLayout from '@/app/@modal/_layout/ModalLayout';
 import StoreUpdater from '@/features/AgentSetting/StoreUpdater';
 import { Provider, createStore } from '@/features/AgentSetting/store';
-import { useQuery } from '@/hooks/useQuery';
+import { useChatSettingsTab } from '@/hooks/useChatSettingsTab';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { ChatSettingsTabs } from '@/store/global/initialState';
@@ -24,7 +24,7 @@ const CategoryContent = dynamic(() => import('./features/CategoryContent'), {
 });
 
 const Layout = memo<PropsWithChildren>(({ children }) => {
-  const { tab = ChatSettingsTabs.Meta } = useQuery();
+  const tab = useChatSettingsTab();
   const { t } = useTranslation('setting');
   const id = useSessionStore((s) => s.activeId);
   const config = useAgentStore(agentSelectors.currentAgentConfig, isEqual);

package/src/app/@modal/chat/(.)settings/modal/page.tsx

@@ -2,7 +2,7 @@
 
 import dynamic from 'next/dynamic';
 
-import { useQuery } from '@/hooks/useQuery';
+import { useChatSettingsTab } from '@/hooks/useChatSettingsTab';
 import { ChatSettingsTabs } from '@/store/global/initialState';
 
 import Skeleton from './loading';
@@ -37,7 +37,8 @@ const AgentTTS = dynamic(() => import('@/features/AgentSetting/AgentTTS'), { loa
  */
 
 const Page = () => {
-  const { tab = ChatSettingsTabs.Meta } = useQuery();
+  const tab = useChatSettingsTab();
+
   return (
     <>
       {tab === ChatSettingsTabs.Meta && <AgentMeta />}

package/src/components/withSuspense.tsx

@@ -0,0 +1,8 @@
+import { ComponentType, Suspense } from 'react';
+
+// @ts-ignore
+export const withSuspense: <T>(Comp: T) => T = (Component: ComponentType<any>) => (props: any) => (
+  <Suspense>
+    <Component {...props} />
+  </Suspense>
+);

package/src/features/AgentSetting/AgentTTS/index.tsx

@@ -28,8 +28,8 @@ const AgentTTS = memo(() => {
     return (all?: boolean) => new VoiceList(all ? undefined : locale);
   });
   const [showAllLocaleVoice, ttsService, updateConfig] = useStore((s) => [
-    s.config.tts.showAllLocaleVoice,
-    s.config.tts.ttsService,
+    s.config.tts?.showAllLocaleVoice,
+    s.config.tts?.ttsService,
     s.setAgentConfig,
   ]);
 

package/src/hooks/useActiveTabKey.ts

@@ -1,6 +1,6 @@
 import { usePathname } from 'next/navigation';
+import { useQueryState } from 'nuqs';
 
-import { useQuery } from '@/hooks/useQuery';
 import { ProfileTabs, SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 /**
@@ -17,7 +17,7 @@ export const useActiveTabKey = () => {
  */
 export const useActiveSettingsKey = () => {
   const pathname = usePathname();
-  const { tab } = useQuery();
+  const [tab] = useQueryState('tab');
 
   const tabs = pathname.split('/').at(-1);
 
@@ -33,7 +33,7 @@ export const useActiveSettingsKey = () => {
  */
 export const useActiveProfileKey = () => {
   const pathname = usePathname();
-  const { tab } = useQuery();
+  const [tab] = useQueryState('tab');
 
   const tabs = pathname.split('/').at(-1);
 

package/src/hooks/useChatSettingsTab.ts

@@ -0,0 +1,12 @@
+import { useQueryState } from 'nuqs';
+
+import { ChatSettingsTabs } from '@/store/global/initialState';
+
+export const useChatSettingsTab = () => {
+  const [type] = useQueryState('tab', {
+    clearOnDefault: true,
+    defaultValue: ChatSettingsTabs.Meta,
+  });
+
+  return type as ChatSettingsTabs;
+};

package/src/hooks/useDiscoverTab.ts

@@ -0,0 +1,12 @@
+import { useQueryState } from 'nuqs';
+
+import { DiscoverTab } from '@/types/discover';
+
+export const useDiscoverTab = () => {
+  const [type] = useQueryState('type', {
+    clearOnDefault: true,
+    defaultValue: DiscoverTab.Assistants,
+  });
+
+  return type as DiscoverTab;
+};

package/src/hooks/useQueryRoute.test.ts

@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { useQueryRoute } from './useQueryRoute';
 
@@ -10,13 +10,15 @@ vi.mock('next/navigation', () => ({
     replace: vi.fn((href) => href),
   })),
 }));
-vi.mock('@/hooks/useQuery', () => ({
-  useQuery: vi.fn(() => ({ foo: 'bar' })),
-}));
+
 vi.mock('@/utils/env', () => ({
   isOnServerSide: false,
 }));
 
+beforeEach(() => {
+  location.search = 'foo=bar';
+});
+
 describe('useQueryRoute', () => {
   it('should generate correct href without hash and replace', () => {
     const { result } = renderHook(() =>

package/src/hooks/useQueryRoute.ts

@@ -2,7 +2,6 @@ import { useRouter } from 'next/navigation';
 import qs, { type ParsedQuery } from 'query-string';
 import { useMemo } from 'react';
 
-import { useQuery } from '@/hooks/useQuery';
 import { isOnServerSide } from '@/utils/env';
 
 interface QueryRouteOptions {
@@ -30,17 +29,19 @@ const genHref = ({ hash, replace, url, prevQuery = {}, query = {} }: GenHrefOpti
 
 export const useQueryRoute = () => {
   const router = useRouter();
-  const prevQuery = useQuery();
 
   return useMemo(
     () => ({
       push: (url: string, options: QueryRouteOptions = {}) => {
+        const prevQuery = qs.parse(window.location.search);
+
         return router.push(genHref({ prevQuery, url, ...options }));
       },
       replace: (url: string, options: QueryRouteOptions = {}) => {
+        const prevQuery = qs.parse(window.location.search);
         return router.replace(genHref({ prevQuery, url, ...options }));
       },
     }),
-    [prevQuery],
+    [],
   );
 };

package/src/hooks/useSettingsTab.ts

@@ -0,0 +1,12 @@
+import { useQueryState } from 'nuqs';
+
+import { SettingsTabs } from '@/store/global/initialState';
+
+export const useSettingsTab = () => {
+  const [type] = useQueryState('tab', {
+    clearOnDefault: true,
+    defaultValue: SettingsTabs.Common,
+  });
+
+  return type as SettingsTabs;
+};

package/src/layout/GlobalProvider/ReactScan.tsx

@@ -4,6 +4,8 @@ import { useSearchParams } from 'next/navigation';
 import Script from 'next/script';
 import React, { memo } from 'react';
 
+import { withSuspense } from '@/components/withSuspense';
+
 const ReactScan = memo(() => {
   const searchParams = useSearchParams();
 
@@ -12,4 +14,4 @@ const ReactScan = memo(() => {
   return !!debug && <Script src="https://unpkg.com/react-scan/dist/auto.global.js" />;
 });
 
-export default ReactScan;
+export default withSuspense(ReactScan);

package/src/hooks/useQuery.test.ts

@@ -1,19 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import { useQuery } from './useQuery';
-
-// Mocks
-vi.mock('next/navigation', () => ({
-  useSearchParams: vi.fn(() => 'baz=qux&foo=bar'),
-}));
-
-describe('useQuery', () => {
-  it('should parse query', () => {
-    const { result } = renderHook(() => useQuery());
-    expect(result.current).toEqual({
-      baz: 'qux',
-      foo: 'bar',
-    });
-  });
-});

package/src/hooks/useQuery.ts

@@ -1,8 +0,0 @@
-import { useSearchParams } from 'next/navigation';
-import qs from 'query-string';
-import { useMemo } from 'react';
-
-export const useQuery = () => {
-  const rawQuery = useSearchParams();
-  return useMemo(() => qs.parse(rawQuery.toString()), [rawQuery]);
-};