@lobehub/chat 0.77.1 → 0.77.2

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.77.2](https://github.com/lobehub/lobe-chat/compare/v0.77.1...v0.77.2)
+
+<sup>Released on **2023-09-15**</sup>
+
+#### 🐛 Bug Fixes
+
+- **settings**: Fix settings route.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **settings**: Fix settings route, closes [#195](https://github.com/lobehub/lobe-chat/issues/195) ([1b7d84e](https://github.com/lobehub/lobe-chat/commit/1b7d84e))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.77.1](https://github.com/lobehub/lobe-chat/compare/v0.77.0...v0.77.1)
 
 <sup>Released on **2023-09-14**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.77.1",
+  "version": "0.77.2",
   "description": "Lobe Chat is an open-source chatbot client using Vercel AI SDK, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/pages/settings/features/Banner/index.tsx

@@ -0,0 +1,95 @@
+import { GridBackground, Icon, Logo } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { PackageCheck } from 'lucide-react';
+import { rgba } from 'polished';
+import { ReactNode, memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import pkg from '@/../package.json';
+
+const useStyles = createStyles(({ css, token, isDarkMode }) => ({
+  background: css`
+    position: absolute;
+    bottom: -10%;
+    left: 0;
+    width: 100%;
+  `,
+  banner: css`
+    position: relative;
+
+    overflow: hidden;
+
+    width: 100%;
+    max-width: 1024px;
+    height: 160px;
+    padding: 4px;
+
+    background: radial-gradient(
+      120% 120% at 20% 100%,
+      ${isDarkMode ? rgba(token.colorBgContainer, 0.5) : token.colorBgContainer} 32%,
+      ${isDarkMode ? token.colorPrimaryBgHover : rgba(token.colorPrimaryBgHover, 0.3)} 50%,
+      ${isDarkMode ? token.colorPrimaryHover : rgba(token.colorPrimaryHover, 0.3)} 100%
+    );
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  logo: css`
+    position: absolute;
+    top: 50%;
+    left: 32px;
+    transform: translateY(-50%);
+  `,
+  mobile: css`
+    margin-top: -16px;
+
+    .ant-tabs-tab,
+    .ant-tabs-tab + .ant-tabs-tab {
+      margin: 4px 8px !important;
+    }
+  `,
+  tag: css`
+    position: absolute;
+    top: 6px;
+    right: 12px;
+
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+    color: ${isDarkMode ? token.colorPrimaryBg : token.colorPrimaryActive};
+
+    opacity: 0.5;
+  `,
+}));
+
+const Banner = memo<{ nav: ReactNode }>(({ nav }) => {
+  const { styles, theme } = useStyles();
+  const { mobile } = useResponsive();
+
+  if (mobile)
+    return (
+      <Flexbox align={'flex-end'} className={styles.mobile} horizontal justify={'center'}>
+        {nav}
+      </Flexbox>
+    );
+
+  return (
+    <Flexbox align={'flex-end'} className={styles.banner} horizontal justify={'center'}>
+      <GridBackground
+        animation
+        className={styles.background}
+        colorBack={theme.colorFillSecondary}
+        colorFront={theme.colorPrimary}
+        random
+      />
+      {nav}
+      <div className={styles.logo}>
+        <Logo extra={'Chat'} type={'text'} />
+      </div>
+      <Flexbox align={'center'} className={styles.tag} gap={4} horizontal>
+        <Icon icon={PackageCheck} />
+        <div>{`${pkg.version}`}</div>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default Banner;

package/src/pages/settings/features/Header/Desktop.tsx

@@ -1,5 +1,4 @@
-import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
-import Router from 'next/router';
+import { ChatHeader, ChatHeaderTitle, Logo } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -8,9 +7,7 @@ const Index = memo(() => {
 
   return (
     <ChatHeader
-      left={<ChatHeaderTitle title={t('header.global')} />}
-      onBackClick={() => Router.back()}
-      showBackButton
+      left={<ChatHeaderTitle title={<Logo extra={t('header.global')} type={'text'} />} />}
     />
   );
 });

package/src/pages/settings/features/Header/Mobile.tsx

@@ -9,7 +9,7 @@ const Header = memo(() => {
   return (
     <MobileNavBar
       center={<MobileNavBarTitle title={t('header.global')} />}
-      onBackClick={() => Router.back()}
+      onBackClick={() => Router.push('/chat')}
       showBackButton
     />
   );

package/src/pages/settings/features/Settings/index.tsx

@@ -1,65 +1,16 @@
-import { GridBackground, Icon, Logo, TabsNav } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { PackageCheck } from 'lucide-react';
-import { rgba } from 'polished';
+import { TabsNav } from '@lobehub/ui';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Center, Flexbox } from 'react-layout-kit';
+import { Center } from 'react-layout-kit';
 
 import { useGlobalStore } from '@/store/global';
 
-import pkg from '../../../../../package.json';
+import Banner from '../Banner';
 import Agent from './Agent';
 import Common from './Common';
 import LLM from './LLM';
 
-const useStyles = createStyles(({ css, token, isDarkMode }) => ({
-  background: css`
-    position: absolute;
-    bottom: -10%;
-    left: 0;
-    width: 100%;
-  `,
-  logo: css`
-    position: absolute;
-    top: 50%;
-    left: 32px;
-    transform: translateY(-50%);
-  `,
-  tabs: css`
-    position: relative;
-
-    overflow: hidden;
-
-    width: 100%;
-    max-width: 1024px;
-    height: 160px;
-    padding: 4px;
-
-    background: radial-gradient(
-      120% 120% at 20% 100%,
-      ${isDarkMode ? rgba(token.colorBgContainer, 0.5) : token.colorBgContainer} 32%,
-      ${isDarkMode ? token.colorPrimaryBgHover : rgba(token.colorPrimaryBgHover, 0.3)} 50%,
-      ${isDarkMode ? token.colorPrimaryHover : rgba(token.colorPrimaryHover, 0.3)} 100%
-    );
-    border: 1px solid ${token.colorBorderSecondary};
-    border-radius: ${token.borderRadiusLG}px;
-  `,
-  tag: css`
-    position: absolute;
-    top: 6px;
-    right: 12px;
-
-    font-family: ${token.fontFamilyCode};
-    font-size: 12px;
-    color: ${isDarkMode ? token.colorPrimaryBg : token.colorPrimaryActive};
-
-    opacity: 0.5;
-  `,
-}));
-
 const Settings = memo(() => {
-  const { styles, theme } = useStyles();
   const { t } = useTranslation('setting');
 
   const [tab, setTab] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]);
@@ -81,31 +32,19 @@ const Settings = memo(() => {
 
   return (
     <Center gap={16} width={'100%'}>
-      <Flexbox align={'flex-end'} className={styles.tabs} horizontal justify={'center'}>
-        <GridBackground
-          animation
-          className={styles.background}
-          colorBack={theme.colorFillSecondary}
-          colorFront={theme.colorPrimary}
-          random
-        />
-        <TabsNav
-          activeKey={tab}
-          items={[
-            { key: 'common', label: t('tab.common') },
-            { key: 'llm', label: t('tab.llm') },
-            { key: 'agent', label: t('tab.agent') },
-          ]}
-          onChange={(e) => setTab(e as any)}
-        />
-        <div className={styles.logo}>
-          <Logo extra={'Chat'} type={'text'} />
-        </div>
-        <Flexbox align={'center'} className={styles.tag} gap={4} horizontal>
-          <Icon icon={PackageCheck} />
-          <div>{`${pkg.version}`}</div>
-        </Flexbox>
-      </Flexbox>
+      <Banner
+        nav={
+          <TabsNav
+            activeKey={tab}
+            items={[
+              { key: 'common', label: t('tab.common') },
+              { key: 'llm', label: t('tab.llm') },
+              { key: 'agent', label: t('tab.agent') },
+            ]}
+            onChange={(e) => setTab(e as any)}
+          />
+        }
+      />
       {content}
     </Center>
   );