@lobehub/chat 0.127.0 → 0.127.1

package/CHANGELOG.md

@@ -2,6 +2,31 @@
 
 # Changelog
 
+### [Version 0.127.1](https://github.com/lobehub/lobe-chat/compare/v0.127.0...v0.127.1)
+
+<sup>Released on **2024-02-14**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve settings tabs style and refactor the LLM setting page.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve settings tabs style and refactor the LLM setting page, closes [#1299](https://github.com/lobehub/lobe-chat/issues/1299) ([31f6f15](https://github.com/lobehub/lobe-chat/commit/31f6f15))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.127.0](https://github.com/lobehub/lobe-chat/compare/v0.126.5...v0.127.0)
 
 <sup>Released on **2024-02-13**</sup>

package/package.json

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

package/src/app/chat/features/ChatHeader/SettingButton.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE, MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { SettingsTabs, SidebarTabKey } from '@/store/global/slices/common/initialState';
+import { SidebarTabKey } from '@/store/global/slices/common/initialState';
 import { useSessionStore } from '@/store/session';
 import { sessionSelectors } from '@/store/session/selectors';
 import { pathString } from '@/utils/url';
@@ -22,7 +22,6 @@ const SettingButton = memo<{ mobile?: boolean }>(({ mobile }) => {
       onClick={() => {
         if (isInbox) {
           useGlobalStore.setState({
-            settingsTab: SettingsTabs.Agent,
             sidebarKey: SidebarTabKey.Setting,
           });
           router.push('/settings/agent');

package/src/app/settings/(desktop)/features/Header.tsx

@@ -2,17 +2,16 @@ import { ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-const Header = memo(() => {
+const Header = memo(({ activeTab }: { activeTab: SettingsTabs }) => {
   const { t } = useTranslation('setting');
-  const tab = useGlobalStore((s) => s.settingsTab);
 
   return (
     <ChatHeader
       left={
         <div style={{ paddingLeft: 8 }}>
-          <ChatHeaderTitle title={t(`tab.${tab}`)} />
+          <ChatHeaderTitle title={t(`tab.${activeTab}`)} />
         </div>
       }
     />

package/src/app/settings/(desktop)/features/SideBar.tsx

@@ -0,0 +1,42 @@
+import { createStyles, useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import SettingList, { SettingListProps } from '../../features/SettingList';
+import UpgradeAlert from '../../features/UpgradeAlert';
+
+const useStyles = createStyles(({ stylish, token, css }) => ({
+  body: stylish.noScrollbar,
+  container: css`
+    border-inline-end: 1px solid ${token.colorBorder};
+  `,
+  logo: css`
+    fill: ${token.colorText};
+  `,
+  top: css`
+    font-size: 20px;
+    font-weight: bold;
+  `,
+}));
+
+const SideBar = memo<SettingListProps>(({ activeTab }) => {
+  const { styles } = useStyles();
+
+  const { t } = useTranslation('common');
+  const { mobile } = useResponsive();
+
+  return (
+    <Flexbox className={styles.container} width={280}>
+      <Flexbox className={styles.top} padding={16}>
+        {t('setting')}
+      </Flexbox>
+      <Flexbox gap={8} style={{ paddingInline: 8 }}>
+        <UpgradeAlert />
+        <SettingList activeTab={activeTab} mobile={mobile} />
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default SideBar;

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

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

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

@@ -1,23 +1,29 @@
 'use client';
 
-import { PropsWithChildren, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
 import AppLayoutDesktop from '@/layout/AppLayout.desktop';
 import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
-import SideBar from '../features/SideBar';
 import Header from './features/Header';
+import SideBar from './features/SideBar';
 
-export default memo(({ children }: PropsWithChildren) => {
+export interface DesktopLayoutProps {
+  activeTab: SettingsTabs;
+  children: ReactNode;
+}
+
+const DesktopLayout = memo<DesktopLayoutProps>(({ children, activeTab }) => {
   useSwitchSideBarOnInit(SidebarTabKey.Setting);
+
   return (
     <AppLayoutDesktop>
-      <SideBar />
+      <SideBar activeTab={activeTab} />
       <Flexbox flex={1} height={'100%'} style={{ position: 'relative' }}>
-        <Header />
+        <Header activeTab={activeTab} />
         <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
           <SafeSpacing />
           <Center gap={16} width={'100%'}>
@@ -28,3 +34,5 @@ export default memo(({ children }: PropsWithChildren) => {
     </AppLayoutDesktop>
   );
 });
+
+export default DesktopLayout;

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

@@ -1,16 +1,16 @@
 'use client';
 
 import dynamic from 'next/dynamic';
-import { FC, PropsWithChildren, memo } from 'react';
+import { FC, memo } from 'react';
 
 import ResponsiveLayout from '@/layout/ResponsiveLayout.client';
 
-import DesktopLayout from './layout.desktop';
+import DesktopLayout, { DesktopLayoutProps } from './layout.desktop';
 
 const MobileLayout = dynamic(() => import('../(mobile)/layout.mobile'), { ssr: false }) as FC;
 
-export default memo(({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+export default memo<DesktopLayoutProps>(({ children, activeTab }) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} activeTab={activeTab}>
     {children}
   </ResponsiveLayout>
 ));

package/src/app/settings/(mobile)/features/ExtraList.tsx

@@ -7,15 +7,17 @@ import { useTranslation } from 'react-i18next';
 import { ABOUT, CHANGELOG, FEEDBACK } from '@/const/url';
 import { useImportConfig } from '@/hooks/useImportConfig';
 import { configService } from '@/services/config';
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-import Item from '../../features/SideBar/Item';
+import Item from '../../features/SettingList/Item';
 
-const ExtraList = memo(() => {
+interface ExtraListProps {
+  activeTab?: SettingsTabs;
+}
+const ExtraList = memo<ExtraListProps>(({ activeTab }) => {
   const { t } = useTranslation('common');
 
   const { importConfig } = useImportConfig();
-  const tab = useGlobalStore((s) => s.settingsTab);
   const { mobile } = useResponsive();
   const items = [
     {
@@ -59,7 +61,7 @@ const ExtraList = memo(() => {
       </Upload>
       {items.map(({ value, icon, label, onClick }) => (
         <div key={value} onClick={onClick}>
-          <Item active={mobile ? false : tab === value} icon={icon} label={label} />
+          <Item active={mobile ? false : activeTab === value} icon={icon} label={label} />
         </div>
       ))}
     </>

package/src/app/settings/(mobile)/features/Header/index.tsx

@@ -3,18 +3,21 @@ import { useRouter } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
+import { SettingsTabs } from '@/store/global/initialState';
 
-const Header = memo(() => {
+interface HeaderProps {
+  activeTab: SettingsTabs;
+}
+
+const Header = memo<HeaderProps>(({ activeTab }) => {
   const { t } = useTranslation('setting');
-  const tab = useGlobalStore((s) => s.settingsTab);
 
   const router = useRouter();
 
   return (
     <MobileNavBar
-      center={<MobileNavBarTitle title={t(`tab.${tab}`)} />}
-      onBackClick={() => router.back()}
+      center={<MobileNavBarTitle title={t(`tab.${activeTab}`)} />}
+      onBackClick={() => router.push('/settings')}
       showBackButton
     />
   );

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

@@ -1,3 +1 @@
-import Index from './mobile';
-
-export default () => <Index />;
+export { default } from './mobile';

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

@@ -1,18 +1,22 @@
 'use client';
 
-import { PropsWithChildren, memo } from 'react';
+import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AppLayoutMobile from '@/layout/AppLayout.mobile';
 import { useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { SettingsTabs, SidebarTabKey } from '@/store/global/initialState';
 
 import Header from './features/Header';
 
-export default memo(({ children }: PropsWithChildren) => {
+export interface SettingLayoutProps {
+  activeTab: SettingsTabs;
+  children: ReactNode;
+}
+export default memo(({ children, activeTab }: SettingLayoutProps) => {
   useSwitchSideBarOnInit(SidebarTabKey.Setting);
   return (
-    <AppLayoutMobile navBar={<Header />}>
+    <AppLayoutMobile navBar={<Header activeTab={activeTab} />}>
       <Flexbox style={{ overflow: 'auto' }}>{children}</Flexbox>
     </AppLayoutMobile>
   );

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

@@ -7,11 +7,10 @@ import { Center } from 'react-layout-kit';
 
 import { CURRENT_VERSION } from '@/const/version';
 import AvatarWithUpload from '@/features/AvatarWithUpload';
-import { useGlobalStore, useSwitchSideBarOnInit } from '@/store/global';
-import { SidebarTabKey } from '@/store/global/initialState';
+import { useGlobalStore } from '@/store/global';
 import { commonSelectors } from '@/store/global/selectors';
 
-import List from '../../features/SideBar/List';
+import SettingList from '../../features/SettingList';
 import AvatarBanner from '../features/AvatarBanner';
 import ExtraList from '../features/ExtraList';
 import Layout from './layout.mobile';
@@ -28,7 +27,6 @@ const useStyles = createStyles(({ css, token }) => ({
 }));
 
 const Setting = memo(() => {
-  useSwitchSideBarOnInit(SidebarTabKey.Setting);
   const avatar = useGlobalStore(commonSelectors.userAvatar);
   const { styles } = useStyles();
 
@@ -40,7 +38,7 @@ const Setting = memo(() => {
         </Center>
       </AvatarBanner>
       <div style={{ width: '100%' }}>
-        <List />
+        <SettingList />
         <div className={styles.divider} />
         <ExtraList />
         <Center style={{ paddingInline: 64 }}>

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

@@ -3,13 +3,9 @@ import { memo } from 'react';
 
 import AgentSetting from '@/features/AgentSetting';
 import { useGlobalStore } from '@/store/global';
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
 import { settingsSelectors } from '@/store/global/selectors';
 
 const Agent = memo(() => {
-  useSwitchSideBarOnInit(SettingsTabs.Agent);
-
   const config = useGlobalStore(settingsSelectors.defaultAgentConfig, isEqual);
   const meta = useGlobalStore(settingsSelectors.defaultAgentMeta, isEqual);
   const [updateAgent] = useGlobalStore((s) => [s.updateDefaultAgent]);

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

@@ -1 +1,9 @@
-export { default } from '../layout.server';
+import { PropsWithChildren } from 'react';
+
+import { SettingsTabs } from '@/store/global/initialState';
+
+import SettingLayout from '../layout.server';
+
+export default ({ children }: PropsWithChildren) => {
+  return <SettingLayout activeTab={SettingsTabs.Agent}>{children}</SettingLayout>;
+};

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

@@ -1,3 +1,18 @@
-import Index from './index';
+'use client';
 
-export default () => <Index />;
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PageTitle from '@/components/PageTitle';
+
+import Agent from './Agent';
+
+export default memo(() => {
+  const { t } = useTranslation('setting');
+  return (
+    <>
+      <PageTitle title={t('tab.agent')} />
+      <Agent />
+    </>
+  );
+});

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

@@ -5,14 +5,11 @@ import { useTranslation } from 'react-i18next';
 
 import PageTitle from '@/components/PageTitle';
 import { CURRENT_VERSION } from '@/const/version';
-import { useSwitchSideBarOnInit } from '@/store/global/hooks/useSwitchSettingsOnInit';
-import { SettingsTabs } from '@/store/global/initialState';
 
 import Footer from '../features/Footer';
 import Common, { SettingsCommonProps } from './Common';
 
 export default memo<SettingsCommonProps>((props) => {
-  useSwitchSideBarOnInit(SettingsTabs.Common);
   const { t } = useTranslation('setting');
 
   return (

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

@@ -1 +1,9 @@
-export { default } from '../layout.server';
+import { PropsWithChildren } from 'react';
+
+import { SettingsTabs } from '@/store/global/initialState';
+
+import SettingLayout from '../layout.server';
+
+export default ({ children }: PropsWithChildren) => {
+  return <SettingLayout activeTab={SettingsTabs.Common}>{children}</SettingLayout>;
+};

package/src/app/settings/features/SettingList/Item.tsx

@@ -0,0 +1,50 @@
+import { Icon, List } from '@lobehub/ui';
+import { createStyles, useResponsive } from 'antd-style';
+import { ChevronRight, type LucideIcon } from 'lucide-react';
+import { CSSProperties, ReactNode, memo } from 'react';
+
+const { Item } = List;
+
+const useStyles = createStyles(({ css, token, responsive }) => ({
+  container: css`
+    position: relative;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    border-radius: ${token.borderRadius}px;
+    ${responsive.mobile} {
+      border-radius: 0;
+    }
+  `,
+  noHover: css`
+    pointer-events: none;
+  `,
+}));
+
+export interface ItemProps {
+  active?: boolean;
+  className?: string;
+  hoverable?: boolean;
+  icon: LucideIcon;
+  label: ReactNode;
+  style?: CSSProperties;
+}
+
+const SettingItem = memo<ItemProps>(
+  ({ label, icon, hoverable = true, active = false, style, className }) => {
+    const { cx, styles } = useStyles();
+    const { mobile } = useResponsive();
+    return (
+      <Item
+        active={active}
+        avatar={<Icon icon={icon} size={{ fontSize: 20 }} />}
+        className={cx(styles.container, !hoverable && styles.noHover, className)}
+        style={style}
+        title={label as string}
+      >
+        {mobile && <Icon icon={ChevronRight} size={{ fontSize: 16 }} />}
+      </Item>
+    );
+  },
+);
+
+export default SettingItem;

package/src/app/settings/features/{SideBar/List.tsx → SettingList/index.tsx}

@@ -1,18 +1,19 @@
-import { useResponsive } from 'antd-style';
 import { Bot, Mic2, Settings2, Webhook } from 'lucide-react';
 import Link from 'next/link';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useGlobalStore } from '@/store/global';
 import { SettingsTabs } from '@/store/global/initialState';
 
 import Item from './Item';
 
-const List = memo(() => {
+export interface SettingListProps {
+  activeTab?: SettingsTabs;
+  mobile?: boolean;
+}
+
+const SettingList = memo<SettingListProps>(({ activeTab, mobile }) => {
   const { t } = useTranslation('setting');
-  const [tab, switchSettingTabs] = useGlobalStore((s) => [s.settingsTab, s.switchSettingTabs]);
-  const { mobile } = useResponsive();
 
   const items = [
     { icon: Settings2, label: t('tab.common'), value: SettingsTabs.Common },
@@ -22,17 +23,15 @@ const List = memo(() => {
   ];
 
   return items.map(({ value, icon, label }) => (
-    <Link
-      aria-label={label}
-      href={`/settings/${value}`}
-      key={value}
-      onClick={() => {
-        switchSettingTabs(value);
-      }}
-    >
-      <Item active={mobile ? false : tab === value} icon={icon} label={label} />
+    <Link aria-label={label} href={`/settings/${value}`} key={value}>
+      <Item
+        active={mobile ? false : activeTab === value}
+        hoverable={!mobile}
+        icon={icon}
+        label={label}
+      />
     </Link>
   ));
 });
 
-export default List;
+export default SettingList;

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

@@ -1,12 +1,19 @@
-import { PropsWithChildren, memo } from 'react';
+import { PropsWithChildren, ReactNode, memo } from 'react';
 
 import ResponsiveLayout from '@/layout/ResponsiveLayout.server';
+import { SettingsTabs } from '@/store/global/initialState';
 
 import DesktopLayout from './(desktop)/layout.responsive';
 import MobileLayout from './(mobile)/layout.mobile';
 
-export default memo(({ children }: PropsWithChildren) => (
-  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout}>
+export interface SettingLayoutProps {
+  activeTab: SettingsTabs;
+  children: ReactNode;
+}
+const SettingLayout = memo<SettingLayoutProps>(({ children, ...res }: PropsWithChildren) => (
+  <ResponsiveLayout Desktop={DesktopLayout} Mobile={MobileLayout} {...res}>
     {children}
   </ResponsiveLayout>
 ));
+
+export default SettingLayout;