@lobehub/chat 0.83.2 → 0.83.3

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.83.3](https://github.com/lobehub/lobe-chat/compare/v0.83.2...v0.83.3)
+
+<sup>Released on **2023-10-06**</sup>
+
+#### ♻ Code Refactoring
+
+- **misc**: Refactor the settings layout to rsc.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Code refactoring
+
+- **misc**: Refactor the settings layout to rsc ([b840f44](https://github.com/lobehub/lobe-chat/commit/b840f44))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.83.2](https://github.com/lobehub/lobe-chat/compare/v0.83.1...v0.83.2)
 
 <sup>Released on **2023-10-06**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.83.2",
+  "version": "0.83.3",
   "description": "An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application",
   "keywords": [
     "chatbot",

package/src/app/settings/agent/page.tsx

@@ -1,21 +1,32 @@
 'use client';
 
+import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
+import AgentSetting from '@/features/AgentSetting';
+import { settingsSelectors, useGlobalStore } from '@/store/global';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
 
-import Layout from '../index';
-import Agent from './Agent';
-
-const AgentSetting = memo(() => {
+const Agent = memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.Agent);
 
+  const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
+  const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
+  const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
+
   return (
-    <Layout>
-      <Agent />
-    </Layout>
+    <AgentSetting
+      config={config}
+      meta={meta}
+      onConfigChange={(config) => {
+        updateAgent({ config });
+      }}
+      onMetaChange={(meta) => {
+        updateAgent({ meta });
+      }}
+    />
   );
 });
 
-export default AgentSetting;
+export default Agent;

package/src/app/settings/common/page.tsx

@@ -5,16 +5,11 @@ import { memo } from 'react';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
 
-import Layout from '../index';
 import Common from './Common';
 
 const CommonSetting = memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.Common);
-  return (
-    <Layout>
-      <Common />
-    </Layout>
-  );
+  return <Common />;
 });
 
 export default CommonSetting;

package/src/app/settings/{layout.desktop.tsx → layout.desktop/Desktop.tsx}

@@ -4,8 +4,8 @@ import { Center, Flexbox } from 'react-layout-kit';
 import SafeSpacing from '@/components/SafeSpacing';
 import AppLayout from '@/layout/AppLayout';
 
-import Header from './features/Header';
-import SideBar from './features/SideBar';
+import Header from '../features/Header';
+import SideBar from '../features/SideBar';
 
 const SettingLayout = memo<{ children: ReactNode }>(({ children }) => {
   return (

package/src/app/settings/{index.tsx → layout.desktop/index.tsx}

@@ -1,16 +1,16 @@
 'use client';
 
 import { useResponsive } from 'antd-style';
-import Head from 'next/head';
 import { ReactNode, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import PageTitle from '@/components/PageTitle';
 import { useSwitchSideBarOnInit } from '@/store/global';
 import { SidebarTabKey } from '@/store/global/initialState';
 import { genSiteHeadTitle } from '@/utils/genSiteHeadTitle';
 
-import DesktopLayout from './layout.desktop';
-import MobileLayout from './layout.mobile';
+import MobileLayout from '../layout.mobile';
+import DesktopLayout from './Desktop';
 
 const Setting = memo<{ children: ReactNode }>(({ children }) => {
   const { mobile } = useResponsive();
@@ -23,9 +23,7 @@ const Setting = memo<{ children: ReactNode }>(({ children }) => {
 
   return (
     <>
-      <Head>
-        <title>{pageTitle}</title>
-      </Head>
+      <PageTitle title={pageTitle} />
       <RenderLayout>{children}</RenderLayout>
     </>
   );

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 

package/src/app/settings/layout.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+
+import { isMobileDevice } from '@/utils/responsive';
+
+import Desktop from './layout.desktop';
+import Mobile from './layout.mobile';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  const mobile = isMobileDevice();
+
+  return mobile ? <Mobile>{children}</Mobile> : <Desktop>{children}</Desktop>;
+};
+
+export default Layout;

package/src/app/settings/llm/page.tsx

@@ -5,16 +5,11 @@ import { memo } from 'react';
 import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
 import { SettingsTabs } from '@/store/global/initialState';
 
-import Layout from '../index';
 import LLM from './LLM';
 
 const LLMSetting = memo(() => {
   useSwitchSideBarOnInit(SettingsTabs.LLM);
-  return (
-    <Layout>
-      <LLM />
-    </Layout>
-  );
+  return <LLM />;
 });
 
 export default LLMSetting;

package/src/app/settings/agent/Agent.tsx

@@ -1,26 +0,0 @@
-import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
-
-import AgentSetting from '@/features/AgentSetting';
-import { settingsSelectors, useGlobalStore } from '@/store/global';
-
-const Agent = memo(() => {
-  const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
-  const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
-  const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);
-
-  return (
-    <AgentSetting
-      config={config}
-      meta={meta}
-      onConfigChange={(config) => {
-        updateAgent({ config });
-      }}
-      onMetaChange={(meta) => {
-        updateAgent({ meta });
-      }}
-    />
-  );
-});
-
-export default Agent;