@lobehub/chat 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 1.3.0](https://github.com/lobehub/lobe-chat/compare/v1.2.0...v1.3.0)
+
+<sup>Released on **2023-07-18**</sup>
+
+#### ✨ Features
+
+- **misc**: Implement settings and configuration functionality.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Implement settings and configuration functionality ([496c2d9](https://github.com/lobehub/lobe-chat/commit/496c2d9))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 1.2.0](https://github.com/lobehub/lobe-chat/compare/v1.1.0...v1.2.0)
+
+<sup>Released on **2023-07-18**</sup>
+
+#### ✨ Features
+
+- **misc**: Add new components, modify import statements, and update CSS styles.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add new components, modify import statements, and update CSS styles ([9b261db](https://github.com/lobehub/lobe-chat/commit/9b261db))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 1.1.0](https://github.com/lobehub/lobe-chat/compare/v1.0.0...v1.1.0)
 
 <sup>Released on **2023-07-18**</sup>

package/locales/en_US/setting.json

@@ -1,97 +1,117 @@
 {
   "danger": {
-    "reset": {
-      "title": "Reset All Settings",
-      "desc": "Reset all settings to default values",
-      "action": "Reset Now",
-      "confirm": "Confirm reset all settings?",
-      "currentVersion": "Current Version"
-    },
     "clear": {
-      "title": "Clear All Data",
-      "desc": "Clear all chat and settings data",
       "action": "Clear Now",
-      "confirm": "Confirm clear all chat and settings data?"
+      "confirm": "Are you sure you want to clear all chat and settings data?",
+      "desc": "Clear all chat and settings data",
+      "title": "Clear All Data"
+    },
+    "reset": {
+      "action": "Reset Now",
+      "confirm": "Are you sure you want to reset all settings?",
+      "currentVersion": "Current Version",
+      "desc": "Reset all settings to default values",
+      "title": "Reset All Settings"
     }
   },
   "header": "Settings",
   "settingChat": {
-    "title": "Chat Settings",
-    "inputTemplate": {
-      "title": "User Input Template",
-      "desc": "The latest user message will be filled into this template"
-    },
     "compressThreshold": {
-      "title": "History Message Length Compression Threshold",
-      "desc": "When the uncompressed history message exceeds this value, it will be compressed"
+      "desc": "When the uncompressed chat history exceeds this value, it will be compressed",
+      "title": "Chat History Compression Threshold"
+    },
+    "enableCompressThreshold": {
+      "title": "Enable Chat History Compression Threshold"
+    },
+    "enableHistoryCount": {
+      "title": "Enable History Message Count Limit"
     },
     "historyCount": {
-      "title": "Number of History Messages",
-      "desc": "Number of history messages carried in each request"
+      "desc": "Number of history messages to include in each request",
+      "title": "History Message Count"
     },
-    "maxTokens": {
-      "title": "Max Tokens per Response",
-      "desc": "The maximum number of tokens used for each interaction"
+    "inputTemplate": {
+      "desc": "The latest user message will be filled into this template",
+      "title": "User Input Preprocessing"
     },
-    "sendKey": {
-      "title": "Send Key"
-    }
+    "title": "Chat Settings"
   },
   "settingModel": {
-    "title": "Model Settings",
+    "enableMaxTokens": {
+      "title": "Enable Single Reply Limit"
+    },
+    "frequencyPenalty": {
+      "desc": "The higher the value, the more likely it is to reduce repeated words",
+      "title": "Frequency Penalty"
+    },
+    "maxTokens": {
+      "desc": "Maximum number of tokens used in a single interaction",
+      "title": "Single Reply Limit"
+    },
     "model": {
+      "desc": "ChatGPT Model",
       "title": "Model"
     },
+    "presencePenalty": {
+      "desc": "The higher the value, the more likely it is to expand to new topics",
+      "title": "Topic Freshness"
+    },
     "temperature": {
-      "title": "Randomness (temperature)",
-      "desc": "The higher the value, the more random the response"
+      "desc": "The higher the value, the more random the reply",
+      "title": "Randomness"
     },
+    "title": "Model Settings",
     "topP": {
-      "title": "Nucleus Sampling (top_p)",
-      "desc": "Similar to randomness, but do not change it together with randomness"
-    },
-    "presencePenalty": {
-      "title": "Topic Freshness (presence_penalty)",
-      "desc": "The higher the value, the more likely it is to expand to new topics"
-    },
-    "frequencyPenalty": {
-      "title": "Frequency Penalty (frequency_penalty)",
-      "desc": "The higher the value, the more likely it is to reduce repeated words"
+      "desc": "Similar to randomness, but do not change together with randomness",
+      "title": "Top-p Sampling"
     }
   },
   "settingOpenAI": {
+    "endpoint": {
+      "desc": "Must include http(s)://, in addition to the default address",
+      "placeholder": "https://api.openai.com/v1",
+      "title": "API Proxy Endpoint"
+    },
     "title": "OpenAI Settings",
     "token": {
-      "title": "API Key",
-      "desc": "Use your own key to bypass password access restrictions",
-      "placeholder": "OpenAI API Key"
-    },
-    "endpoint": {
-      "title": "API Endpoint",
-      "desc": "In addition to the default address, it must include http(s)://"
+      "desc": "Use your own OpenAI Key",
+      "placeholder": "OpenAI API Key",
+      "title": "API Key"
     }
   },
   "settingSystem": {
-    "title": "System Settings",
     "accessCode": {
-      "title": "Access Code",
-      "desc": "Encryption access has been enabled by the administrator",
-      "placeholder": "Please enter the access code"
-    }
+      "desc": "Encryption access is enabled by the administrator",
+      "placeholder": "Please enter the access password",
+      "title": "Access Password"
+    },
+    "title": "System Settings"
   },
   "settingTheme": {
-    "title": "Theme Settings",
     "avatar": {
-      "title": "Avatar",
-      "desc": "Supports URL / Base64 / Emoji"
+      "title": "Avatar"
     },
     "fontSize": {
-      "title": "Font Size",
-      "desc": "Font size of chat content"
+      "desc": "Font size of chat content",
+      "title": "Font Size"
     },
     "lang": {
-      "name": "Language Settings",
-      "all": "All Languages"
-    }
+      "title": "Language Settings"
+    },
+    "neutralColor": {
+      "desc": "Custom grayscale for different color biases",
+      "title": "Neutral Color"
+    },
+    "primaryColor": {
+      "desc": "Custom theme color",
+      "title": "Theme Color"
+    },
+    "themeMode": {
+      "auto": "Auto",
+      "dark": "Dark",
+      "light": "Light",
+      "title": "Theme"
+    },
+    "title": "Theme Settings"
   }
 }

package/locales/zh_CN/setting.json

@@ -20,6 +20,12 @@
       "desc": "当未压缩的历史消息超过该值时，将进行压缩",
       "title": "历史消息长度压缩阈值"
     },
+    "enableCompressThreshold": {
+      "title": "是否开启历史消息长度压缩阈值"
+    },
+    "enableHistoryCount": {
+      "title": "是否开启携带的历史消息数限制"
+    },
     "historyCount": {
       "desc": "每次请求携带的历史消息数",
       "title": "附带历史消息数"
@@ -28,45 +34,47 @@
       "desc": "用户最新的一条消息会填充到此模板",
       "title": "用户输入预处理"
     },
-    "maxTokens": {
-      "desc": "单次交互所用的最大 Token 数",
-      "title": "单次回复限制 (max_tokens)"
-    },
-    "sendKey": {
-      "title": "发送键"
-    },
     "title": "聊天设置"
   },
   "settingModel": {
+    "enableMaxTokens": {
+      "title": "开启单次回复限制"
+    },
     "frequencyPenalty": {
       "desc": "值越大，越有可能降低重复字词",
-      "title": "频率惩罚度 (frequency_penalty)"
+      "title": "频率惩罚度"
+    },
+    "maxTokens": {
+      "desc": "单次交互所用的最大 Token 数",
+      "title": "单次回复限制"
     },
     "model": {
+      "desc": "ChatGPT 模型",
       "title": "模型"
     },
     "presencePenalty": {
       "desc": "值越大，越有可能扩展到新话题",
-      "title": "话题新鲜度 (presence_penalty)"
+      "title": "话题新鲜度"
     },
     "temperature": {
       "desc": "值越大，回复越随机",
-      "title": "随机性 (temperature)"
+      "title": "随机性"
     },
     "title": "模型设置",
     "topP": {
       "desc": "与随机性类似，但不要和随机性一起更改",
-      "title": "核采样 (top_p)"
+      "title": "核采样"
     }
   },
   "settingOpenAI": {
     "endpoint": {
       "desc": "除默认地址外，必须包含 http(s)://",
-      "title": "接口地址"
+      "placeholder": "https://api.openai.com/v1",
+      "title": "接口代理地址"
     },
     "title": "OpenAI 设置",
     "token": {
-      "desc": "使用自己的 Key 可绕过密码访问限制",
+      "desc": "使用自己的 OpenAI Key",
       "placeholder": "OpenAI API Key",
       "title": "API Key"
     }
@@ -81,7 +89,6 @@
   },
   "settingTheme": {
     "avatar": {
-      "desc": "支持 URL / Base64 / Emoji 表情符号",
       "title": "头像"
     },
     "fontSize": {
@@ -89,8 +96,21 @@
       "title": "字体大小"
     },
     "lang": {
-      "all": "所有语言",
-      "name": "语言设置"
+      "title": "语言设置"
+    },
+    "neutralColor": {
+      "desc": "不同色彩倾向的灰阶自定义",
+      "title": "中性色"
+    },
+    "primaryColor": {
+      "desc": "自定义主题色",
+      "title": "主题色"
+    },
+    "themeMode": {
+      "auto": "自动",
+      "dark": "深色",
+      "light": "浅色",
+      "title": "主题"
     },
     "title": "主题设置"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/features/AvatarWithUpload/index.tsx

@@ -0,0 +1,27 @@
+import { Avatar, Logo } from '@lobehub/ui';
+import { Upload } from 'antd';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+import { createUploadImageHandler } from '@/utils/uploadFIle';
+
+interface AvatarWithUploadProps {
+  size?: number;
+}
+
+export default memo<AvatarWithUploadProps>(({ size = 40 }) => {
+  const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings], shallow);
+
+  const handleUploadAvatar = createUploadImageHandler((avatar) => {
+    setSettings({ avatar });
+  });
+
+  return (
+    <div style={{ maxHeight: size, maxWidth: size }}>
+      <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
+        {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
+      </Upload>
+    </div>
+  );
+});

package/src/features/FolderPanel/index.tsx

@@ -1,7 +1,7 @@
 import { DraggablePanel } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, memo, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
@@ -14,7 +14,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-export default ({ children }: PropsWithChildren) => {
+export default memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
   const [sessionsWidth, sessionExpandable] = useSettings(
     (s) => [s.sessionsWidth, s.sessionExpandable],
@@ -52,4 +52,4 @@ export default ({ children }: PropsWithChildren) => {
       {children}
     </DraggablePanel>
   );
-};
+});

package/src/{pages/Sidebar.tsx → features/SideBar/index.tsx}

@@ -1,16 +1,17 @@
-import { ActionIcon, Logo, SideNav } from '@lobehub/ui';
+import { ActionIcon, SideNav } from '@lobehub/ui';
 import { MessageSquare, Settings2, Sticker } from 'lucide-react';
 import Router from 'next/router';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
+import AvatarWithUpload from '@/features/AvatarWithUpload';
 import { useSettings } from '@/store/settings';
 
-const Sidebar = memo(() => {
+export default memo(() => {
   const [tab, setTab] = useSettings((s) => [s.sidebarKey, s.switchSideBar], shallow);
   return (
     <SideNav
-      avatar={<Logo size={40} />}
+      avatar={<AvatarWithUpload />}
       bottomActions={<ActionIcon icon={Settings2} onClick={() => Router.push('/setting')} />}
       style={{ height: '100vh' }}
       topActions={
@@ -32,5 +33,3 @@ const Sidebar = memo(() => {
     />
   );
 });
-
-export default Sidebar;

package/src/layout/index.tsx

@@ -1,8 +1,10 @@
-import { ThemeProvider } from '@lobehub/ui';
+import { ThemeProvider, lobeCustomTheme } from '@lobehub/ui';
 import { App, ConfigProvider } from 'antd';
+import { useThemeMode } from 'antd-style';
 import 'antd/dist/reset.css';
 import Zh_CN from 'antd/locale/zh_CN';
-import { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useCallback, useEffect } from 'react';
+import { shallow } from 'zustand/shallow';
 
 import { useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
@@ -27,14 +29,27 @@ const Layout = ({ children }: PropsWithChildren) => {
 };
 
 export default ({ children }: PropsWithChildren) => {
+  const themeMode = useSettings((s) => s.settings.themeMode, shallow);
+  const { primaryColor, neutralColor } = useSettings(
+    (s) => ({ neutralColor: s.settings.neutralColor, primaryColor: s.settings.primaryColor }),
+    shallow,
+  );
+  const { browserPrefers } = useThemeMode();
+  const isDarkMode = themeMode === 'auto' ? browserPrefers === 'dark' : themeMode === 'dark';
+
   useEffect(() => {
     // refs: https://github.com/pmndrs/zustand/blob/main/docs/integrations/persisting-store-data.md#hashydrated
     useSessionStore.persist.rehydrate();
     useSettings.persist.rehydrate();
   }, []);
 
+  const genCustomToken: any = useCallback(
+    () => lobeCustomTheme({ isDarkMode, neutralColor, primaryColor }),
+    [primaryColor, neutralColor, isDarkMode],
+  );
+
   return (
-    <ThemeProvider themeMode={'auto'}>
+    <ThemeProvider customToken={genCustomToken || {}} themeMode={themeMode}>
       <GlobalStyle />
       <Layout>{children}</Layout>
     </ThemeProvider>

package/src/locales/create.ts

@@ -3,20 +3,20 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import { isArray } from 'lodash-es';
 import { initReactI18next } from 'react-i18next';
 
-import type { Namespaces, Resources } from '@/types/locale';
+import type { Namespaces } from '@/types/locale';
 
 import resources from './resources';
 
-const getRes = (res: Resources, namespace: Namespaces[]) => {
-  const newRes: any = {};
-  for (const [locale, value] of Object.entries(res)) {
-    newRes[locale] = {};
-    for (const ns of namespace) {
-      newRes[locale][ns] = value[ns];
-    }
-  }
-  return newRes;
-};
+// const getRes = (res: Resources, namespace: Namespaces[]) => {
+//   const newRes: any = {};
+//   for (const [locale, value] of Object.entries(res)) {
+//     newRes[locale] = {};
+//     for (const ns of namespace) {
+//       newRes[locale][ns] = value[ns];
+//     }
+//   }
+//   return newRes;
+// };
 
 export const createI18nNext = (namespace?: Namespaces[] | Namespaces) => {
   const ns: Namespaces[] = namespace
@@ -42,7 +42,8 @@ export const createI18nNext = (namespace?: Namespaces[] | Namespaces) => {
           escapeValue: false, // not needed for react as it escapes by default
         },
         ns,
-        resources: getRes(resources, ns),
+        // resources: getRes(resources, ns),
+        resources,
       })
   );
 };

package/src/locales/default/setting.ts

@@ -20,6 +20,12 @@ export default {
       desc: '当未压缩的历史消息超过该值时，将进行压缩',
       title: '历史消息长度压缩阈值',
     },
+    enableCompressThreshold: {
+      title: '是否开启历史消息长度压缩阈值',
+    },
+    enableHistoryCount: {
+      title: '是否开启携带的历史消息数限制',
+    },
     historyCount: {
       desc: '每次请求携带的历史消息数',
       title: '附带历史消息数',
@@ -28,45 +34,47 @@ export default {
       desc: '用户最新的一条消息会填充到此模板',
       title: '用户输入预处理',
     },
-    maxTokens: {
-      desc: '单次交互所用的最大 Token 数',
-      title: '单次回复限制 (max_tokens)',
-    },
-    sendKey: {
-      title: '发送键',
-    },
     title: '聊天设置',
   },
   settingModel: {
+    enableMaxTokens: {
+      title: '开启单次回复限制',
+    },
     frequencyPenalty: {
       desc: '值越大，越有可能降低重复字词',
-      title: '频率惩罚度 (frequency_penalty)',
+      title: '频率惩罚度',
+    },
+    maxTokens: {
+      desc: '单次交互所用的最大 Token 数',
+      title: '单次回复限制',
     },
     model: {
+      desc: 'ChatGPT 模型',
       title: '模型',
     },
     presencePenalty: {
       desc: '值越大，越有可能扩展到新话题',
-      title: '话题新鲜度 (presence_penalty)',
+      title: '话题新鲜度',
     },
     temperature: {
       desc: '值越大，回复越随机',
-      title: '随机性 (temperature)',
+      title: '随机性',
     },
     title: '模型设置',
     topP: {
       desc: '与随机性类似，但不要和随机性一起更改',
-      title: '核采样 (top_p)',
+      title: '核采样',
     },
   },
   settingOpenAI: {
     endpoint: {
       desc: '除默认地址外，必须包含 http(s)://',
-      title: '接口地址',
+      placeholder: 'https://api.openai.com/v1',
+      title: '接口代理地址',
     },
     title: 'OpenAI 设置',
     token: {
-      desc: '使用自己的 Key 可绕过密码访问限制',
+      desc: '使用自己的 OpenAI Key',
       placeholder: 'OpenAI API Key',
       title: 'API Key',
     },
@@ -81,7 +89,6 @@ export default {
   },
   settingTheme: {
     avatar: {
-      desc: '支持 URL / Base64 / Emoji 表情符号',
       title: '头像',
     },
     fontSize: {
@@ -89,8 +96,21 @@ export default {
       title: '字体大小',
     },
     lang: {
-      all: '所有语言',
-      name: '语言设置',
+      title: '语言设置',
+    },
+    neutralColor: {
+      desc: '不同色彩倾向的灰阶自定义',
+      title: '中性色',
+    },
+    primaryColor: {
+      desc: '自定义主题色',
+      title: '主题色',
+    },
+    themeMode: {
+      auto: '自动',
+      dark: '深色',
+      light: '浅色',
+      title: '主题',
     },
     title: '主题设置',
   },

package/src/locales/options.ts

@@ -0,0 +1,19 @@
+import type { SelectProps } from 'antd';
+
+import type { Locales } from '@/types/locale';
+
+type LocaleOptions = SelectProps['options'] &
+  {
+    value: Locales;
+  }[];
+
+export const options: LocaleOptions = [
+  {
+    label: '简体中文',
+    value: 'zh-CN',
+  },
+  {
+    label: 'English',
+    value: 'en-US',
+  },
+] as LocaleOptions;

package/src/pages/chat/layout.tsx

@@ -3,11 +3,11 @@ import { PropsWithChildren, memo, useEffect } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
 import { useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
 
-import Sidebar from '../Sidebar';
 import { Sessions } from './SessionList';
 
 const initI18n = createI18nNext();
@@ -41,7 +41,7 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
 
   return (
     <Flexbox horizontal width={'100%'}>
-      <Sidebar />
+      <SideBar />
       <Sessions />
       {children}
     </Flexbox>

package/src/pages/setting/SettingForm.tsx

@@ -1,31 +1,96 @@
-import { Form, Input, type ItemGroup } from '@lobehub/ui';
+import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
+import { Form as AntForm, Button, Input, Popconfirm, Select, Switch } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { Palette } from 'lucide-react';
-import { memo, useMemo } from 'react';
+import { debounce } from 'lodash-es';
+import { AppWindow, Bot, MessagesSquare, Palette, Webhook } from 'lucide-react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
 
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { options } from '@/locales/options';
+import SliderWithInput from '@/pages/setting/SliderWithInput';
 import { settingsSelectors, useSettings } from '@/store/settings';
+import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
 import { ConfigKeys } from '@/types/exportConfig';
+import { LanguageModel } from '@/types/llm';
+
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
 
 type SettingItemGroup = ItemGroup & {
   children: {
-    name: ConfigKeys;
+    name?: ConfigKeys;
   }[];
 };
 
 const SettingForm = memo(() => {
+  const { t } = useTranslation('setting');
+  const [form] = AntForm.useForm();
   const settings = useSettings(settingsSelectors.currentSettings, isEqual);
+  const { setThemeMode, setSettings, resetSettings } = useSettings(
+    (s) => ({
+      resetSettings: s.resetSettings,
+      setSettings: s.setSettings,
+      setThemeMode: s.setThemeMode,
+    }),
+    shallow,
+  );
 
-  const { t } = useTranslation('setting');
+  const handleReset = useCallback(() => {
+    resetSettings();
+    form.setFieldsValue(DEFAULT_SETTINGS);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    handleReset();
+    // TODO: 删除聊天记录
+  }, []);
 
   const theme: SettingItemGroup = useMemo(
     () => ({
       children: [
         {
-          children: <Input />,
-          desc: t('settingTheme.avatar.desc'),
+          children: <AvatarWithUpload />,
           label: t('settingTheme.avatar.title'),
-          name: 'avatar',
+          minWidth: undefined,
+        },
+        {
+          children: (
+            <ThemeSwitch
+              labels={{
+                auto: t('settingTheme.themeMode.auto'),
+                dark: t('settingTheme.themeMode.dark'),
+                light: t('settingTheme.themeMode.light'),
+              }}
+              onThemeSwitch={setThemeMode}
+              themeMode={settings.themeMode}
+              type={'select'}
+            />
+          ),
+          label: t('settingTheme.themeMode.title'),
+        },
+        {
+          children: <Select options={options} />,
+          label: t('settingTheme.lang.title'),
+          name: 'language',
+        },
+        {
+          children: <SliderWithInput max={18} min={12} />,
+          desc: t('settingTheme.fontSize.desc'),
+          label: t('settingTheme.fontSize.title'),
+          name: 'fontSize',
+        },
+        {
+          children: <ThemeSwatchesPrimary />,
+          desc: t('settingTheme.primaryColor.desc'),
+          label: t('settingTheme.primaryColor.title'),
+          minWidth: undefined,
+        },
+        {
+          children: <ThemeSwatchesNeutral />,
+          desc: t('settingTheme.neutralColor.desc'),
+          label: t('settingTheme.neutralColor.title'),
+          minWidth: undefined,
         },
       ],
       icon: Palette,
@@ -34,8 +99,200 @@ const SettingForm = memo(() => {
     [settings],
   );
 
+  const OpenAI: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <Input.Password placeholder={t('settingOpenAI.token.placeholder')} />,
+          desc: t('settingOpenAI.token.desc'),
+          label: t('settingOpenAI.token.title'),
+          name: 'token',
+        },
+        {
+          children: <Input placeholder={t('settingOpenAI.endpoint.placeholder')} />,
+          desc: t('settingOpenAI.endpoint.desc'),
+
+          label: t('settingOpenAI.endpoint.title'),
+
+          name: 'endpoint',
+        },
+      ],
+      icon: Webhook,
+      title: t('settingOpenAI.title'),
+    }),
+    [settings],
+  );
+
+  const Chat: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <Switch />,
+          label: t('settingChat.enableHistoryCount.title'),
+          minWidth: undefined,
+          name: 'enableHistoryCount',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={0} />,
+          desc: t('settingChat.historyCount.desc'),
+          hidden: !settings.enableHistoryCount,
+          label: t('settingChat.historyCount.title'),
+          name: 'historyCount',
+        },
+        {
+          children: <Switch />,
+          label: t('settingChat.enableCompressThreshold.title'),
+          minWidth: undefined,
+          name: 'enableCompressThreshold',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32} min={0} />,
+          desc: t('settingChat.compressThreshold.desc'),
+          hidden: !settings.enableCompressThreshold,
+          label: t('settingChat.compressThreshold.title'),
+          name: 'compressThreshold',
+        },
+      ],
+      icon: MessagesSquare,
+      title: t('settingChat.title'),
+    }),
+    [settings],
+  );
+
+  const Model: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: (
+            <Select
+              options={Object.values(LanguageModel).map((value) => ({
+                label: value,
+                value,
+              }))}
+            />
+          ),
+          desc: t('settingModel.model.desc'),
+          label: t('settingModel.model.title'),
+          name: 'model',
+          tag: 'model',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.temperature.desc'),
+          label: t('settingModel.temperature.title'),
+          name: 'temperature',
+          tag: 'temperature',
+        },
+        {
+          children: <SliderWithInput max={1} min={0} step={0.1} />,
+          desc: t('settingModel.topP.desc'),
+          label: t('settingModel.topP.title'),
+          name: 'topP',
+          tag: 'top_p',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.presencePenalty.desc'),
+          label: t('settingModel.presencePenalty.title'),
+          name: 'presencePenalty',
+          tag: 'presence_penalty',
+        },
+        {
+          children: <SliderWithInput max={2} min={-2} step={0.1} />,
+          desc: t('settingModel.frequencyPenalty.desc'),
+          label: t('settingModel.frequencyPenalty.title'),
+          name: 'frequencyPenalty',
+          tag: 'frequency_penalty',
+        },
+        {
+          children: <Switch />,
+          label: t('settingModel.enableMaxTokens.title'),
+          minWidth: undefined,
+          name: 'enableMaxTokens',
+          valuePropName: 'checked',
+        },
+        {
+          children: <SliderWithInput max={32_000} min={0} step={100} />,
+          desc: t('settingModel.maxTokens.desc'),
+          hidden: !settings.enableMaxTokens,
+          label: t('settingModel.maxTokens.title'),
+          name: 'maxTokens',
+          tag: 'max_tokens',
+        },
+      ],
+      icon: Bot,
+      title: t('settingModel.title'),
+    }),
+    [settings],
+  );
+
+  const System: SettingItemGroup = useMemo(
+    () => ({
+      children: [
+        {
+          children: <Input.Password placeholder={t('settingSystem.accessCode.placeholder')} />,
+          desc: t('settingSystem.accessCode.desc'),
+          label: t('settingSystem.accessCode.title'),
+          name: 'accessCode',
+        },
+        {
+          children: (
+            <Popconfirm
+              arrow={false}
+              cancelText={t('cancel', { ns: 'common' })}
+              okButtonProps={{ danger: true }}
+              okText={t('ok', { ns: 'common' })}
+              onConfirm={handleReset}
+              title={t('danger.reset.confirm')}
+            >
+              <Button danger type="primary">
+                {t('danger.reset.action')}
+              </Button>
+            </Popconfirm>
+          ),
+          desc: t('danger.reset.title'),
+          label: t('danger.reset.desc'),
+          minWidth: undefined,
+        },
+        {
+          children: (
+            <Popconfirm
+              arrow={false}
+              cancelText={t('cancel', { ns: 'common' })}
+              okButtonProps={{ danger: true }}
+              okText={t('ok', { ns: 'common' })}
+              onConfirm={handleClear}
+              title={t('danger.clear.confirm')}
+            >
+              <Button danger type="primary">
+                {t('danger.clear.action')}
+              </Button>
+            </Popconfirm>
+          ),
+          desc: t('danger.clear.title'),
+          label: t('danger.clear.desc'),
+          minWidth: undefined,
+        },
+      ],
+      icon: AppWindow,
+      title: t('settingSystem.title'),
+    }),
+    [settings],
+  );
+
+  const items = useMemo(() => [theme, OpenAI, Chat, Model, System], [settings]);
+
   return (
-    <Form initialValues={settings} items={[theme]} style={{ maxWidth: 1024, width: '100%' }} />
+    <Form
+      form={form}
+      initialValues={settings}
+      itemMinWidth="max(30%,240px)"
+      items={items}
+      onValuesChange={debounce(setSettings, 100)}
+      style={{ maxWidth: 1024, width: '100%' }}
+    />
   );
 });
 

package/src/pages/setting/SliderWithInput/index.tsx

@@ -0,0 +1,34 @@
+import { InputNumber, Slider } from 'antd';
+import { SliderSingleProps } from 'antd/es/slider';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const SliderWithInput = memo<SliderSingleProps>(
+  ({ step, value, onChange, max, min, defaultValue, ...props }) => {
+    return (
+      <Flexbox direction={'horizontal'} gap={8}>
+        <Slider
+          defaultValue={defaultValue}
+          max={max}
+          min={min}
+          onChange={onChange}
+          step={step}
+          style={{ flex: 1 }}
+          value={value}
+          {...props}
+        />
+        <InputNumber
+          defaultValue={defaultValue}
+          max={max}
+          min={min}
+          onChange={onChange as any}
+          step={Number(step)}
+          style={{ flex: 1, maxWidth: 64 }}
+          value={value}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+export default SliderWithInput;

package/src/pages/setting/ThemeSwatches/ThemeSwatchesNeutral.tsx

@@ -0,0 +1,33 @@
+import {
+  NeutralColors,
+  Swatches,
+  findCustomThemeName,
+  neutralColors,
+  neutralColorsSwatches,
+} from '@lobehub/ui';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+
+const ThemeSwatchesNeutral = memo(() => {
+  const { neutralColor, setSettings } = useSettings(
+    (s) => ({ neutralColor: s.settings.neutralColor, setSettings: s.setSettings }),
+    shallow,
+  );
+
+  const handleSelect = (v: any) => {
+    const name = findCustomThemeName('neutral', v) as NeutralColors;
+    setSettings({ neutralColor: name || '' });
+  };
+
+  return (
+    <Swatches
+      activeColor={neutralColor ? neutralColors[neutralColor] : undefined}
+      colors={neutralColorsSwatches}
+      onSelect={handleSelect}
+    />
+  );
+});
+
+export default ThemeSwatchesNeutral;

package/src/pages/setting/ThemeSwatches/ThemeSwatchesPrimary.tsx

@@ -0,0 +1,33 @@
+import {
+  PrimaryColors,
+  Swatches,
+  findCustomThemeName,
+  primaryColors,
+  primaryColorsSwatches,
+} from '@lobehub/ui';
+import { memo } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { useSettings } from '@/store/settings';
+
+const ThemeSwatchesPrimary = memo(() => {
+  const { primaryColor, setSettings } = useSettings(
+    (s) => ({ primaryColor: s.settings.primaryColor, setSettings: s.setSettings }),
+    shallow,
+  );
+
+  const handleSelect = (v: any) => {
+    const name = findCustomThemeName('primary', v) as PrimaryColors;
+    setSettings({ primaryColor: name || '' });
+  };
+
+  return (
+    <Swatches
+      activeColor={primaryColor ? primaryColors[primaryColor] : undefined}
+      colors={primaryColorsSwatches}
+      onSelect={handleSelect}
+    />
+  );
+});
+
+export default ThemeSwatchesPrimary;

package/src/pages/setting/ThemeSwatches/index.ts

@@ -0,0 +1,2 @@
+export { default as ThemeSwatchesNeutral } from './ThemeSwatchesNeutral';
+export { default as ThemeSwatchesPrimary } from './ThemeSwatchesPrimary';

package/src/pages/setting/index.page.tsx

@@ -3,10 +3,10 @@ import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
 import { Sessions } from '@/pages/chat/SessionList';
 
-import Sidebar from '../Sidebar';
 import Header from './Header';
 import SettingForm from './SettingForm';
 
@@ -24,12 +24,12 @@ const SettingLayout = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Flexbox horizontal width={'100%'}>
-        <Sidebar />
+      <Flexbox height={'100vh'} horizontal width={'100%'}>
+        <SideBar />
         <Sessions />
         <Flexbox flex={1}>
           <Header />
-          <Flexbox align={'center'} padding={24}>
+          <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
             <SettingForm />
           </Flexbox>
         </Flexbox>

package/src/store/settings/action.ts

@@ -1,15 +1,17 @@
-import { merge } from 'lodash-es';
+import { ThemeMode } from 'antd-style';
 import type { StateCreator } from 'zustand/vanilla';
 
 import type { ConfigSettings } from '@/types/exportConfig';
 
 import type { SidebarTabKey } from './initialState';
-import { SettingsState } from './initialState';
+import { DEFAULT_SETTINGS, GlobalSettingsState } from './initialState';
 import type { SettingsStore } from './store';
 
 export interface SettingsAction {
-  importSettings: (settings: SettingsState) => void;
-  saveSettings: (settings: ConfigSettings) => void;
+  resetSettings: () => void;
+  setGlobalSettings: (settings: GlobalSettingsState) => void;
+  setSettings: (settings: Partial<ConfigSettings>) => void;
+  setThemeMode: (themeMode: ThemeMode) => void;
   switchSideBar: (key: SidebarTabKey) => void;
 }
 
@@ -19,11 +21,18 @@ export const createSettings: StateCreator<
   [],
   SettingsAction
 > = (set, get) => ({
-  importSettings: (settings) => {
+  resetSettings: () => {
+    set({ settings: DEFAULT_SETTINGS });
+  },
+  setGlobalSettings: (settings) => {
     set({ ...settings });
   },
-  saveSettings: (settings) => {
-    set({ settings: merge(get().settings, settings) });
+  setSettings: (settings) => {
+    const oldSetting = get().settings;
+    set({ settings: { ...oldSetting, ...settings } });
+  },
+  setThemeMode: (themeMode) => {
+    get().setSettings({ themeMode });
   },
   switchSideBar: (key) => {
     set({ sidebarKey: key });

package/src/store/settings/initialState.ts

@@ -1,22 +1,38 @@
-import type { ThemeMode } from 'antd-style';
-
 import type { ConfigSettings } from '@/types/exportConfig';
 
 export type SidebarTabKey = 'chat' | 'market';
 export const DEFAULT_SETTINGS: ConfigSettings = {
+  accessCode: '',
   avatar: '',
+  compressThreshold: 24,
+  enableCompressThreshold: true,
+  enableHistoryCount: true,
+  enableMaxTokens: true,
+  endpoint: '',
+  fontSize: 14,
+  frequencyPenalty: 0,
+  historyCount: 24,
+  language: 'zh-CN',
+  maxTokens: 2000,
+  model: 'gpt-3.5-turbo',
+  neutralColor: '',
+  presencePenalty: 0,
+  primaryColor: '',
+  temperature: 0.5,
+  themeMode: 'auto',
+  token: '',
+  topP: 1,
 };
 
-export interface SettingsState {
+export interface GlobalSettingsState {
   inputHeight: number;
   sessionExpandable?: boolean;
   sessionsWidth: number;
   settings: ConfigSettings;
   sidebarKey: SidebarTabKey;
-  themeMode?: ThemeMode;
 }
 
-export const initialState: SettingsState = {
+export const initialState: GlobalSettingsState = {
   inputHeight: 200,
   sessionExpandable: true,
   sessionsWidth: 320,

package/src/store/settings/selectors.ts

@@ -1,9 +1,17 @@
+import { defaults } from 'lodash-es';
+
 import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
 
 import { SettingsStore } from './store';
 
-const currentSettings = (s: SettingsStore) => s.settings || DEFAULT_SETTINGS;
+const currentSettings = (s: SettingsStore) => defaults(s.settings, DEFAULT_SETTINGS);
+
+const selecThemeMode = (s: SettingsStore) => ({
+  setThemeMode: s.setThemeMode,
+  themeMode: s.settings.themeMode,
+});
 
 export const settingsSelectors = {
   currentSettings,
+  selecThemeMode,
 };

package/src/store/settings/store.ts

@@ -1,9 +1,9 @@
 import { StateCreator } from 'zustand/vanilla';
 
 import { type SettingsAction, createSettings } from './action';
-import { type SettingsState, initialState } from './initialState';
+import { type GlobalSettingsState, initialState } from './initialState';
 
-export type SettingsStore = SettingsAction & SettingsState;
+export type SettingsStore = SettingsAction & GlobalSettingsState;
 
 export const createStore: StateCreator<SettingsStore, [['zustand/devtools', never]]> = (
   ...parameters

package/src/styles/antdOverride.ts

@@ -1,5 +1,5 @@
 import { Theme, css } from 'antd-style';
-import { rgba } from 'polished';
+import { readableColor } from 'polished';
 
 export default (token: Theme) => css`
   .ant-btn {
@@ -10,20 +10,24 @@ export default (token: Theme) => css`
     z-index: 1100;
   }
 
-  .ant-notification .ant-notification-notice.notification-primary-info {
+  .ant-slider-track,
+  .ant-tabs-ink-bar,
+  .ant-switch-checked {
+    background: ${token.colorPrimary} !important;
+  }
+
+  .ant-btn-primary:not(.ant-btn-dangerous) {
+    color: ${readableColor(token.colorPrimary)};
     background: ${token.colorPrimary};
-    box-shadow: 0 6px 16px 0 ${rgba(token.colorPrimary, 0.1)},
-      0 3px 6px -4px ${rgba(token.colorPrimary, 0.2)},
-      0 9px 28px 8px ${rgba(token.colorPrimary, 0.1)};
 
-    .anticon {
-      color: ${token.colorTextLightSolid};
+    &:hover {
+      color: ${readableColor(token.colorPrimary)} !important;
+      background: ${token.colorPrimaryHover} !important;
     }
 
-    .ant-notification-notice-message {
-      margin-bottom: 0;
-      padding-right: 0;
-      color: ${token.colorTextLightSolid};
+    &:active {
+      color: ${readableColor(token.colorPrimaryActive)} !important;
+      background: ${token.colorPrimaryActive} !important;
     }
   }
 `;

package/src/types/exportConfig.ts

@@ -1,11 +1,32 @@
+import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
+import { ThemeMode } from 'antd-style';
+
+import { Locales } from './locale';
+
 /**
  * 配置设置
  */
 export interface ConfigSettings {
-  /**
-   * 头像链接
-   */
-  avatar?: string;
+  accessCode: string;
+  avatar: string;
+  compressThreshold: number;
+  enableCompressThreshold: boolean;
+  enableHistoryCount: boolean;
+  enableMaxTokens: boolean;
+  endpoint: string;
+  fontSize: number;
+  frequencyPenalty: number;
+  historyCount: number;
+  language: Locales;
+  maxTokens: number;
+  model: string;
+  neutralColor: NeutralColors | '';
+  presencePenalty: number;
+  primaryColor: PrimaryColors | '';
+  temperature: number;
+  themeMode: ThemeMode;
+  token: string;
+  topP: number;
 }
 
 export type ConfigKeys = keyof ConfigSettings;

package/src/types/i18next.d.ts

@@ -2,7 +2,7 @@ import { DefaultResources } from '@/types/locale';
 
 declare module 'i18next' {
   interface CustomTypeOptions {
-    defaultNS: 'common';
+    defaultNS: ['common', 'setting'];
     resources: DefaultResources;
   }
 }