@lobehub/chat 0.133.4 → 0.133.5

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 # Changelog
 
+### [Version 0.133.5](https://github.com/lobehub/lobe-chat/compare/v0.133.4...v0.133.5)
+
+<sup>Released on **2024-03-12**</sup>
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.133.4](https://github.com/lobehub/lobe-chat/compare/v0.133.3...v0.133.4)
 
 <sup>Released on **2024-03-11**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.133.4",
+  "version": "0.133.5",
   "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/chat/(desktop)/index.tsx

@@ -4,7 +4,8 @@ import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 
 import PageTitle from '../features/PageTitle';
 import ChatHeader from './features/ChatHeader';
@@ -12,10 +13,13 @@ import Conversation from './features/Conversation';
 import SideBar from './features/SideBar';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 const DesktopPage = memo(() => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveContainer Mobile={Mobile}>
     <Layout>
       <PageTitle />
       <ChatHeader />
@@ -24,6 +28,6 @@ const DesktopPage = memo(() => (
         <SideBar />
       </Flexbox>
     </Layout>
-  </ResponsiveIndex>
+  </ResponsiveContainer>
 ));
 export default DesktopPage;

package/src/app/chat/settings/(desktop)/index.tsx

@@ -4,20 +4,24 @@ import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
 import SessionHydration from '@/app/chat/components/SessionHydration';
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 
 import EditPage from '../features/EditPage';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 const ChatSettings = memo(() => (
   <>
-    <ResponsiveIndex Mobile={Mobile}>
+    <ResponsiveContainer Mobile={Mobile}>
       <Layout>
         <EditPage />
       </Layout>
-    </ResponsiveIndex>
+    </ResponsiveContainer>
     <SessionHydration />
   </>
 ));

package/src/app/market/(desktop)/index.tsx

@@ -4,19 +4,23 @@ import { SpotlightCard, SpotlightCardProps } from '@lobehub/ui';
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import AgentCard from '@/app/market/features/AgentCard';
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 
+import AgentCard from '../features/AgentCard';
 import Index from '../index';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 export default memo(() => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveContainer Mobile={Mobile}>
     <Layout>
       <Index />
       <AgentCard CardRender={SpotlightCard as FC<SpotlightCardProps>} />
     </Layout>
-  </ResponsiveIndex>
+  </ResponsiveContainer>
 ));

package/src/app/settings/(desktop)/index.tsx

@@ -3,19 +3,23 @@
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import Common from '../common';
 import { SettingsCommonProps } from '../common/Common';
 import DesktopLayout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 export default memo<SettingsCommonProps>((props) => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveContainer Mobile={Mobile}>
     <DesktopLayout activeTab={SettingsTabs.Common}>
       <Common {...props} />
     </DesktopLayout>
-  </ResponsiveIndex>
+  </ResponsiveContainer>
 ));

package/src/app/settings/(desktop)/layout.responsive.tsx

@@ -3,11 +3,16 @@
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
+// TODO: need to be removed
+import ResponsiveLayout from '@/layout/ServerResponsiveLayout/Client';
 
 import DesktopLayout, { DesktopLayoutProps } from './layout.desktop';
 
-const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), { ssr: false }) as FC;
+const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 export default memo<DesktopLayoutProps>(({ children, activeTab }) => (
   <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} activeTab={activeTab}>

package/src/app/settings/layout.server.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode, memo } from 'react';
 
-import ResponsiveLayout from '@/layout/ResponsiveLayout.server';
+import ResponsiveLayout from '@/layout/ServerResponsiveLayout';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import DesktopLayout from './(desktop)/layout.responsive';

package/src/app/welcome/(desktop)/index.tsx

@@ -3,19 +3,23 @@
 import dynamic from 'next/dynamic';
 import { FC, memo } from 'react';
 
-import ResponsiveIndex from '@/components/ResponsiveIndex';
+import ResponsiveContainer from '@/components/ResponsiveContainer';
+import MobileSwitchLoading from '@/features/MobileSwitchLoading';
 
 import Footer from './features/Footer';
 import Showcase from './features/Showcase';
 import Layout from './layout.desktop';
 
-const Mobile: FC = dynamic(() => import('../(mobile)'), { ssr: false }) as FC;
+const Mobile: FC = dynamic(() => import('../(mobile)'), {
+  loading: MobileSwitchLoading,
+  ssr: false,
+}) as FC;
 
 export default memo(() => (
-  <ResponsiveIndex Mobile={Mobile}>
+  <ResponsiveContainer Mobile={Mobile}>
     <Layout>
       <Showcase />
       <Footer />
     </Layout>
-  </ResponsiveIndex>
+  </ResponsiveContainer>
 ));

package/src/components/ResponsiveContainer/index.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { FC, ReactNode, memo } from 'react';
+
+import { useIsMobile } from '@/hooks/useIsMobile';
+
+interface ResponsiveContainerProps {
+  Mobile: FC;
+  children: ReactNode;
+}
+
+const ResponsiveContainer = memo(({ children, Mobile }: ResponsiveContainerProps) => {
+  const mobile = useIsMobile();
+
+  return mobile ? <Mobile /> : children;
+});
+
+ResponsiveContainer.displayName = 'ResponsiveContainer';
+
+export default ResponsiveContainer;

package/src/features/MobileSwitchLoading/index.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next';
+
+import FullscreenLoading from '@/components/FullscreenLoading';
+
+const MobileSwitchLoading = () => {
+  const { t } = useTranslation('common');
+
+  return <FullscreenLoading title={t('layoutInitializing')} />;
+};
+
+export default MobileSwitchLoading;

package/src/layout/{ResponsiveLayout.client.tsx → ServerResponsiveLayout/Client.tsx}

@@ -1,9 +1,7 @@
 'use client';
 
-import { ReactNode, Suspense, memo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { ReactNode, memo } from 'react';
 
-import FullscreenLoading from '@/components/FullscreenLoading';
 import { useIsMobile } from '@/hooks/useIsMobile';
 
 interface ServerResponsiveLayoutProps extends Record<string, any> {
@@ -14,16 +12,9 @@ interface ServerResponsiveLayoutProps extends Record<string, any> {
 
 const ResponsiveLayout = memo(
   ({ children, Desktop, Mobile, ...res }: ServerResponsiveLayoutProps) => {
-    const { t } = useTranslation();
     const mobile = useIsMobile();
 
-    return mobile ? (
-      <Suspense fallback={<FullscreenLoading title={t('layoutInitializing', { ns: 'common' })} />}>
-        <Mobile {...res}>{children}</Mobile>
-      </Suspense>
-    ) : (
-      <Desktop {...res}>{children}</Desktop>
-    );
+    return mobile ? <Mobile {...res}>{children}</Mobile> : <Desktop {...res}>{children}</Desktop>;
   },
 );
 

package/src/layout/{ResponsiveLayout.server.tsx → ServerResponsiveLayout/index.tsx}

@@ -7,10 +7,15 @@ interface ServerResponsiveLayoutProps extends Record<string, any> {
   Mobile: (props: any) => ReactNode;
   children?: ReactNode;
 }
-const ResponsiveLayout = ({ children, Desktop, Mobile, ...res }: ServerResponsiveLayoutProps) => {
+const ServerResponsiveLayout = ({
+  children,
+  Desktop,
+  Mobile,
+  ...res
+}: ServerResponsiveLayoutProps) => {
   const mobile = isMobileDevice();
 
   return mobile ? <Mobile {...res}>{children}</Mobile> : <Desktop {...res}>{children}</Desktop>;
 };
 
-export default ResponsiveLayout;
+export default ServerResponsiveLayout;

package/src/components/ResponsiveIndex/index.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import { FC, ReactNode, Suspense } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import FullscreenLoading from '@/components/FullscreenLoading';
-import { useIsMobile } from '@/hooks/useIsMobile';
-
-interface ResponsiveIndexProps {
-  Mobile: FC;
-  children: ReactNode;
-}
-const ResponsiveIndex = ({ children, Mobile }: ResponsiveIndexProps) => {
-  const { t } = useTranslation();
-  const mobile = useIsMobile();
-
-  return mobile ? (
-    <Suspense fallback={<FullscreenLoading title={t('layoutInitializing', { ns: 'common' })} />}>
-      <Mobile />
-    </Suspense>
-  ) : (
-    children
-  );
-};
-
-export default ResponsiveIndex;