@lobehub/chat 1.49.0 → 1.49.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 1.49.1](https://github.com/lobehub/lobe-chat/compare/v1.49.0...v1.49.1)
+
+<sup>Released on **2025-01-27**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: UseMobileWorkspace use nqus to replace useQuery.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: UseMobileWorkspace use nqus to replace useQuery, closes [#5603](https://github.com/lobehub/lobe-chat/issues/5603) ([70e5272](https://github.com/lobehub/lobe-chat/commit/70e5272))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 1.49.0](https://github.com/lobehub/lobe-chat/compare/v1.48.4...v1.49.0)
 
 <sup>Released on **2025-01-27**</sup>

package/changelog/v1.json

@@ -1,4 +1,13 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "UseMobileWorkspace use nqus to replace useQuery."
+      ]
+    },
+    "date": "2025-01-27",
+    "version": "1.49.1"
+  },
   {
     "children": {
       "features": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.49.0",
+  "version": "1.49.1",
   "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",
@@ -129,7 +129,7 @@
     "@lobehub/chat-plugins-gateway": "^1.9.0",
     "@lobehub/icons": "^1.61.1",
     "@lobehub/tts": "^1.28.0",
-    "@lobehub/ui": "^1.164.2",
+    "@lobehub/ui": "^1.164.8",
     "@neondatabase/serverless": "^0.10.4",
     "@next/third-parties": "^15.1.4",
     "@react-spring/web": "^9.7.5",

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

@@ -5,7 +5,7 @@ import { usePathname } from 'next/navigation';
 import qs from 'query-string';
 import { PropsWithChildren, memo } from 'react';
 
-import { useQuery } from '@/hooks/useQuery';
+import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfig';
 
 import NavBar from './NavBar';
@@ -22,7 +22,7 @@ const MOBILE_NAV_ROUTES = new Set([
 ]);
 
 const Layout = memo(({ children }: PropsWithChildren) => {
-  const { showMobileWorkspace } = useQuery();
+  const showMobileWorkspace = useShowMobileWorkspace();
   const pathname = usePathname();
   const { url } = qs.parseUrl(pathname);
   const showNav = !showMobileWorkspace && MOBILE_NAV_ROUTES.has(url);

package/src/app/(main)/chat/_layout/Mobile.tsx

@@ -5,7 +5,7 @@ import { Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import InitClientDB from '@/features/InitClientDB';
-import { useQuery } from '@/hooks/useQuery';
+import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
 import { LayoutProps } from './type';
 
@@ -18,7 +18,7 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 const Layout = memo<LayoutProps>(({ children, session }) => {
-  const { showMobileWorkspace } = useQuery();
+  const showMobileWorkspace = useShowMobileWorkspace();
   const { styles } = useStyles();
 
   return (

package/src/app/(main)/files/(content)/_layout/Mobile.tsx

@@ -4,7 +4,7 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useQuery } from '@/hooks/useQuery';
+import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
 import { LayoutProps } from './type';
 
@@ -17,7 +17,7 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 const Layout = memo<LayoutProps>(({ children, menu }) => {
-  const { showMobileWorkspace } = useQuery();
+  const showMobileWorkspace = useShowMobileWorkspace();
   const { styles } = useStyles();
 
   return (

package/src/app/(main)/repos/[id]/_layout/Mobile.tsx

@@ -4,7 +4,7 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useQuery } from '@/hooks/useQuery';
+import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 
 import { LayoutProps } from './type';
 
@@ -17,7 +17,7 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 const Layout = memo<LayoutProps>(({ children, menu }) => {
-  const { showMobileWorkspace } = useQuery();
+  const showMobileWorkspace = useShowMobileWorkspace();
   const { styles } = useStyles();
 
   return (

package/src/components/DataStyleModal/index.tsx

@@ -26,6 +26,7 @@ const useStyles = createStyles(({ css, token, prefixCls, isDarkMode }) => ({
 
 interface DataStyleModalProps {
   children: ReactNode;
+  height?: number | string;
   icon: LucideIcon;
   onOpenChange?: (open: boolean) => void;
   open: boolean;
@@ -34,7 +35,7 @@ interface DataStyleModalProps {
 }
 
 const DataStyleModal = memo<DataStyleModalProps>(
-  ({ icon, onOpenChange, title, open, children, width = 550 }) => {
+  ({ icon, onOpenChange, title, open, children, width = 550, height }) => {
     const { styles } = useStyles();
 
     return (
@@ -46,6 +47,7 @@ const DataStyleModal = memo<DataStyleModalProps>(
         }}
         closable={false}
         footer={null}
+        height={height}
         open={open}
         title={
           <Flexbox gap={8} horizontal>

package/src/features/InitClientDB/EnableModal.tsx

@@ -8,6 +8,7 @@ import { Center, Flexbox } from 'react-layout-kit';
 
 import DataStyleModal from '@/components/DataStyleModal';
 import { useGlobalStore } from '@/store/global';
+import { useServerConfigStore } from '@/store/serverConfig';
 
 import PGliteIcon from './PGliteIcon';
 
@@ -56,6 +57,8 @@ interface EnableClientDBModalProps {
 const EnableClientDBModal = memo<EnableClientDBModalProps>(({ open }) => {
   const { t } = useTranslation('common');
   const { styles } = useStyles();
+  const isMobile = useServerConfigStore((s) => s.isMobile);
+
   const markPgliteEnabled = useGlobalStore((s) => s.markPgliteEnabled);
   const features = [
     {
@@ -76,7 +79,12 @@ const EnableClientDBModal = memo<EnableClientDBModalProps>(({ open }) => {
   ];
 
   return (
-    <DataStyleModal icon={CpuIcon} open={open} title={t('clientDB.modal.title')}>
+    <DataStyleModal
+      height={isMobile ? '80vh' : undefined}
+      icon={CpuIcon}
+      open={open}
+      title={t('clientDB.modal.title')}
+    >
       <Center gap={48}>
         <Flexbox>
           <Flexbox className={styles.intro} style={{ textAlign: 'center' }} width={460}>

package/src/hooks/useShowMobileWorkspace.ts

@@ -0,0 +1,7 @@
+import { parseAsBoolean, useQueryState } from 'nuqs';
+
+export const useShowMobileWorkspace = () => {
+  const [showMobileWorkspace] = useQueryState('showMobileWorkspace', parseAsBoolean);
+
+  return showMobileWorkspace;
+};

package/src/hooks/useWorkspaceModal.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import useMergeState from 'use-merge-value';
 
-import { useQuery } from '@/hooks/useQuery';
+import { useShowMobileWorkspace } from '@/hooks/useShowMobileWorkspace';
 import { useServerConfigStore } from '@/store/serverConfig';
 
 export const useWorkspaceModal = (
@@ -9,7 +9,7 @@ export const useWorkspaceModal = (
   onChange?: (v: boolean) => void,
 ): [boolean, (v: boolean) => void] => {
   const mobile = useServerConfigStore((s) => s.isMobile);
-  const { showMobileWorkspace } = useQuery();
+  const showMobileWorkspace = useShowMobileWorkspace();
   const [isModalOpen, setIsModalOpen] = useMergeState(false, {
     defaultValue: false,
     onChange,

package/src/middleware.ts

@@ -12,8 +12,12 @@ export const config = {
     '/(api|trpc|webapi)(.*)',
     // include the /
     '/',
+    '/discover',
+    '/discover(.*)',
+    '/chat',
     '/chat(.*)',
     '/settings(.*)',
+    '/files',
     '/files(.*)',
     '/repos(.*)',
     // ↓ cloud ↓