@lobehub/chat 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [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>
+
+#### ✨ Features
+
+- **misc**: Add i18n auto flow `pnpm run i18n`.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add i18n auto flow `pnpm run i18n` ([e18fc57](https://github.com/lobehub/lobe-chat/commit/e18fc57))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## Version 1.0.0
 
 <sup>Released on **2023-07-18**</sup>

package/locales/en_US/common.json

@@ -13,6 +13,7 @@
   "agentTagPlaceholder": "Please enter a tag",
   "archive": "Archive",
   "autoGenerate": "Auto Generate",
+  "autoGenerateTooltip": "Description of the autocomplete assistant based on prompts",
   "cancel": "Cancel",
   "close": "Close",
   "confirmRemoveSessionItemAlert": "You are about to remove this agent. Once removed, it cannot be recovered. Please confirm your action.",

package/locales/en_US/setting.json

@@ -1,97 +1,109 @@
 {
   "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"
     },
     "historyCount": {
-      "title": "Number of History Messages",
-      "desc": "Number of history messages carried in each request"
+      "desc": "Number of chat history messages carried in each request",
+      "title": "History Message Count"
+    },
+    "inputTemplate": {
+      "desc": "The latest user message will be filled into this template",
+      "title": "User Input Preprocessing"
     },
     "maxTokens": {
-      "title": "Max Tokens per Response",
-      "desc": "The maximum number of tokens used for each interaction"
+      "desc": "Maximum number of tokens used for each interaction",
+      "title": "Reply Limit (max_tokens)"
     },
     "sendKey": {
       "title": "Send Key"
-    }
+    },
+    "title": "Chat Settings"
   },
   "settingModel": {
-    "title": "Model Settings",
+    "frequencyPenalty": {
+      "desc": "The higher the value, the more likely it is to reduce repeated words",
+      "title": "Frequency Penalty (frequency_penalty)"
+    },
     "model": {
       "title": "Model"
     },
+    "presencePenalty": {
+      "desc": "The higher the value, the more likely it is to expand to new topics",
+      "title": "Topic Freshness (presence_penalty)"
+    },
     "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 (temperature)"
     },
+    "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": "Nucleus Sampling (top_p)"
     }
   },
   "settingOpenAI": {
+    "endpoint": {
+      "desc": "Must include http(s)://, in addition to the default address",
+      "title": "API 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 Key to bypass password access restrictions",
+      "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"
-    }
+      "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 tendencies",
+      "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/common.json

@@ -13,6 +13,7 @@
   "agentTagPlaceholder": "请输入标签",
   "archive": "归档",
   "autoGenerate": "自动补全",
+  "autoGenerateTooltip": "基于提示词自动补全助手描述",
   "cancel": "取消",
   "close": "关闭",
   "confirmRemoveSessionItemAlert": "即将删除该助手，删除后该将无法找回，请确认你的操作",
@@ -29,7 +30,7 @@
   "newAgent": "新建助手",
   "noDescription": "暂无描述",
   "ok": "确定",
-  "profile": "身份卡",
+  "profile": "助手身份",
   "reset": "重置",
   "searchAgentPlaceholder": "搜索助手和对话...",
   "sessionSetting": "会话设置",

package/locales/zh_CN/setting.json

@@ -1,98 +1,109 @@
 {
   "danger": {
+    "clear": {
+      "action": "立即清除",
+      "confirm": "确认清除所有聊天、设置数据？",
+      "desc": "清除所有聊天、设置数据",
+      "title": "清除所有数据"
+    },
     "reset": {
-      "title": "重置所有设置",
-      "desc": "重置所有设置项回默认值",
       "action": "立即重置",
       "confirm": "确认重置所有设置？",
-      "currentVersion": "当前版本"
-    },
-    "clear": {
-      "title": "清除所有数据",
-      "desc": "清除所有聊天、设置数据",
-      "action": "立即清除",
-      "confirm": "确认清除所有聊天、设置数据？"
+      "currentVersion": "当前版本",
+      "desc": "重置所有设置项回默认值",
+      "title": "重置所有设置"
     }
   },
-
   "header": "设置",
   "settingChat": {
-    "title": "聊天设置",
-    "inputTemplate": {
-      "title": "用户输入预处理",
-      "desc": "用户最新的一条消息会填充到此模板"
-    },
     "compressThreshold": {
-      "title": "历史消息长度压缩阈值",
-      "desc": "当未压缩的历史消息超过该值时，将进行压缩"
+      "desc": "当未压缩的历史消息超过该值时，将进行压缩",
+      "title": "历史消息长度压缩阈值"
     },
     "historyCount": {
-      "title": "附带历史消息数",
-      "desc": "每次请求携带的历史消息数"
+      "desc": "每次请求携带的历史消息数",
+      "title": "附带历史消息数"
+    },
+    "inputTemplate": {
+      "desc": "用户最新的一条消息会填充到此模板",
+      "title": "用户输入预处理"
     },
     "maxTokens": {
-      "title": "单次回复限制 (max_tokens)",
-      "desc": "单次交互所用的最大 Token 数"
+      "desc": "单次交互所用的最大 Token 数",
+      "title": "单次回复限制 (max_tokens)"
     },
     "sendKey": {
       "title": "发送键"
-    }
+    },
+    "title": "聊天设置"
   },
   "settingModel": {
-    "title": "模型设置",
+    "frequencyPenalty": {
+      "desc": "值越大，越有可能降低重复字词",
+      "title": "频率惩罚度 (frequency_penalty)"
+    },
     "model": {
       "title": "模型"
     },
+    "presencePenalty": {
+      "desc": "值越大，越有可能扩展到新话题",
+      "title": "话题新鲜度 (presence_penalty)"
+    },
     "temperature": {
-      "title": "随机性 (temperature)",
-      "desc": "值越大，回复越随机"
+      "desc": "值越大，回复越随机",
+      "title": "随机性 (temperature)"
     },
+    "title": "模型设置",
     "topP": {
-      "title": "核采样 (top_p)",
-      "desc": "与随机性类似，但不要和随机性一起更改"
-    },
-    "presencePenalty": {
-      "title": "话题新鲜度 (presence_penalty)",
-      "desc": "值越大，越有可能扩展到新话题"
-    },
-    "frequencyPenalty": {
-      "title": "频率惩罚度 (frequency_penalty)",
-      "desc": "值越大，越有可能降低重复字词"
+      "desc": "与随机性类似，但不要和随机性一起更改",
+      "title": "核采样 (top_p)"
     }
   },
   "settingOpenAI": {
+    "endpoint": {
+      "desc": "除默认地址外，必须包含 http(s)://",
+      "title": "接口地址"
+    },
     "title": "OpenAI 设置",
     "token": {
-      "title": "API Key",
       "desc": "使用自己的 Key 可绕过密码访问限制",
-      "placeholder": "OpenAI API Key"
-    },
-    "endpoint": {
-      "title": "接口地址",
-      "desc": "除默认地址外，必须包含 http(s)://"
+      "placeholder": "OpenAI API Key",
+      "title": "API Key"
     }
   },
   "settingSystem": {
-    "title": "系统设置",
     "accessCode": {
-      "title": "访问密码",
       "desc": "管理员已开启加密访问",
-      "placeholder": "请输入访问密码"
-    }
+      "placeholder": "请输入访问密码",
+      "title": "访问密码"
+    },
+    "title": "系统设置"
   },
   "settingTheme": {
-    "title": "主题设置",
     "avatar": {
-      "title": "头像",
-      "desc": "支持 URL / Base64 / Emoji 表情符号"
+      "title": "头像"
     },
     "fontSize": {
-      "title": "字体大小",
-      "desc": "聊天内容的字体大小"
+      "desc": "聊天内容的字体大小",
+      "title": "字体大小"
     },
     "lang": {
-      "name": "语言设置",
-      "all": "所有语言"
-    }
+      "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.0.0",
+  "version": "1.2.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",
@@ -23,7 +23,8 @@
   "scripts": {
     "build": "next build",
     "dev": "next dev -p 3010",
-    "i18n": "lobe-i18n",
+    "i18n": "npm run i18n:toc && lobe-i18n",
+    "i18n:toc": "ts-node --project ./tsconfig.json scripts/toc.ts",
     "lint": "eslint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
     "lint:md": "remark . --quiet --frail --output",
     "lint:style": "stylelint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
@@ -35,7 +36,6 @@
     "test": "vitest --passWithNoTests",
     "test:coverage": "vitest run --coverage --passWithNoTests",
     "test:update": "vitest -u",
-    "toc": "node scripts/toc.mjs",
     "type-check": "tsc --noEmit"
   },
   "lint-staged": {
@@ -107,6 +107,7 @@
     "@umijs/lint": "^4",
     "@vitest/coverage-v8": "latest",
     "commitlint": "^17",
+    "consola": "^3",
     "eslint": "^8",
     "husky": "^8",
     "i18next-browser-languagedetector": "^7",
@@ -122,6 +123,7 @@
     "semantic-release": "^21",
     "semantic-release-config-gitmoji": "^1",
     "stylelint": "^15",
+    "ts-node": "^10",
     "typescript": "^5",
     "vitest": "latest"
   },

package/scripts/genDefaultLocale.ts

@@ -0,0 +1,18 @@
+import { consola } from 'consola';
+import { colors } from 'consola/utils';
+import fs from 'node:fs';
+import { resolve } from 'node:path';
+
+import i18nConfig from '../.i18nrc';
+
+export const genDefaultLocale = (input: string) => {
+  consola.info(`Default locale is ${i18nConfig.entryLocale}...`);
+  const resources = require(`../${input}/${i18nConfig.entryLocale}`);
+  const data = Object.entries(resources.default);
+  consola.start(`Generate default locale json, found ${data.length} namespaces...`);
+  for (const [ns, value] of data) {
+    const filepath = resolve(i18nConfig.output, i18nConfig.entryLocale, `${ns}.json`);
+    fs.writeFileSync(filepath, JSON.stringify(value, null, 2));
+    consola.success(colors.bgWhiteBright(colors.black(` ${ns} `)), colors.gray(filepath));
+  }
+};

package/scripts/genResources.ts

@@ -0,0 +1,51 @@
+import { consola } from 'consola';
+import { colors } from 'consola/utils';
+import { tocForResources } from 'i18next-resources-for-ts';
+import fs from 'node:fs';
+import { resolve } from 'node:path';
+
+import i18nConfig from '../.i18nrc.js';
+
+const locales = [i18nConfig.entryLocale, ...i18nConfig.outputLocales];
+export const genResources = (output: string) => {
+  let index = '';
+  let indexObj = '';
+  consola.start(`Generate locale resources and types, found ${locales.length} locales...`);
+  for (const locale of locales) {
+    const files = fs
+      .readdirSync(resolve(i18nConfig.output, locale))
+      .filter((name) => name.includes('.json'));
+    index += `import ${locale} from "./${locale}";\n`;
+    indexObj += `   "${locale.replace('_', '-')}": ${locale},\n`;
+    const ns = [];
+    for (const file of files) {
+      ns.push({
+        name: file.replace('.json', ''),
+        path: resolve(i18nConfig.output, locale, file),
+      });
+    }
+    let toc = tocForResources(ns, resolve(output)).replaceAll('\\', '/');
+    if (locale === i18nConfig.entryLocale) {
+      toc = toc.replaceAll('.json', '').replaceAll('../../../locales/zh_CN', '../default');
+    }
+    const filepath = resolve(output, `${locale}.ts`);
+    fs.writeFileSync(filepath, toc);
+    consola.success(colors.bgBlue(colors.black(` ${locale} `)), colors.gray(filepath));
+  }
+  const indexFilepath = resolve(output, `index.ts`);
+  fs.writeFileSync(
+    indexFilepath,
+    `${index}
+const resources = {
+${indexObj}} as const;
+export default resources;
+export const defaultResources = ${i18nConfig.entryLocale};
+export type Resources = typeof resources;
+export type DefaultResources = typeof defaultResources;
+export type Namespaces = keyof DefaultResources;
+export type Locales = keyof Resources;
+`,
+  );
+
+  consola.success(colors.bgGreen(colors.black(` INDEX `)), colors.gray(indexFilepath));
+};

package/scripts/toc.ts

@@ -0,0 +1,7 @@
+import { genDefaultLocale } from './genDefaultLocale';
+import { genResources } from './genResources';
+
+const RES_OUTPUT = 'src/locales/resources';
+
+genDefaultLocale(RES_OUTPUT);
+genResources(RES_OUTPUT);

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

@@ -81,7 +81,6 @@ export default {
   },
   settingTheme: {
     avatar: {
-      desc: '支持 URL / Base64 / Emoji 表情符号',
       title: '头像',
     },
     fontSize: {
@@ -89,8 +88,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/locales/resources/en_US.ts

@@ -1,9 +1,7 @@
 import common from '../../../locales/en_US/common.json';
-import setting from '../../../locales/en_US/setting.json';
 
 const resources = {
   common,
-  setting,
 } as const;
 
 export default resources;

package/src/locales/resources/index.ts

@@ -1,7 +1,13 @@
 import en_US from './en_US';
 import zh_CN from './zh_CN';
 
-export default {
+const resources = {
   'en-US': en_US,
   'zh-CN': zh_CN,
-};
+} as const;
+export default resources;
+export const defaultResources = zh_CN;
+export type Resources = typeof resources;
+export type DefaultResources = typeof defaultResources;
+export type Namespaces = keyof DefaultResources;
+export type Locales = keyof Resources;

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,20 +1,31 @@
-import { Form, Input, type ItemGroup } from '@lobehub/ui';
+import { Form, type ItemGroup, ThemeSwitch } from '@lobehub/ui';
+import { Select, Slider } from 'antd';
 import isEqual from 'fast-deep-equal';
+import { debounce } from 'lodash-es';
 import { Palette } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { shallow } from 'zustand/shallow';
 
+import AvatarWithUpload from '@/features/AvatarWithUpload';
+import { options } from '@/locales/options';
 import { settingsSelectors, useSettings } from '@/store/settings';
 import { ConfigKeys } from '@/types/exportConfig';
 
+import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
+
 type SettingItemGroup = ItemGroup & {
   children: {
-    name: ConfigKeys;
+    name?: ConfigKeys;
   }[];
 };
 
 const SettingForm = memo(() => {
   const settings = useSettings(settingsSelectors.currentSettings, isEqual);
+  const { setThemeMode, setSettings } = useSettings(
+    (s) => ({ setSettings: s.setSettings, setThemeMode: s.setThemeMode }),
+    shallow,
+  );
 
   const { t } = useTranslation('setting');
 
@@ -22,10 +33,47 @@ const SettingForm = memo(() => {
     () => ({
       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: <Slider 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,
@@ -35,7 +83,13 @@ const SettingForm = memo(() => {
   );
 
   return (
-    <Form initialValues={settings} items={[theme]} style={{ maxWidth: 1024, width: '100%' }} />
+    <Form
+      initialValues={settings}
+      itemMinWidth="min(30%,200px)"
+      items={[theme]}
+      onValuesChange={debounce(setSettings, 100)}
+      style={{ maxWidth: 1024, width: '100%' }}
+    />
   );
 });
 

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';
 
@@ -25,7 +25,7 @@ const SettingLayout = memo(() => {
         <title>{pageTitle}</title>
       </Head>
       <Flexbox horizontal width={'100%'}>
-        <Sidebar />
+        <SideBar />
         <Sessions />
         <Flexbox flex={1}>
           <Header />

package/src/store/settings/action.ts

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

package/src/store/settings/initialState.ts

@@ -1,22 +1,24 @@
-import type { ThemeMode } from 'antd-style';
-
 import type { ConfigSettings } from '@/types/exportConfig';
 
 export type SidebarTabKey = 'chat' | 'market';
 export const DEFAULT_SETTINGS: ConfigSettings = {
   avatar: '',
+  fontSize: 14,
+  language: 'zh-CN',
+  neutralColor: '',
+  primaryColor: '',
+  themeMode: 'auto',
 };
 
-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 { merge } 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) => merge(DEFAULT_SETTINGS, s.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 {
+    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,18 @@
+import type { NeutralColors, PrimaryColors } from '@lobehub/ui';
+import { ThemeMode } from 'antd-style';
+
+import { Locales } from './locale';
+
 /**
  * 配置设置
  */
 export interface ConfigSettings {
-  /**
-   * 头像链接
-   */
   avatar?: string;
+  fontSize: number;
+  language: Locales;
+  neutralColor?: NeutralColors | '';
+  primaryColor?: PrimaryColors | '';
+  themeMode: ThemeMode;
 }
 
 export type ConfigKeys = keyof ConfigSettings;

package/src/types/locale.ts

@@ -1,7 +1 @@
-import resources from '@/locales/resources';
-import defaultResources from '@/locales/resources/zh_CN';
-
-export type Resources = typeof resources;
-export type DefaultResources = typeof defaultResources;
-export type Namespaces = keyof DefaultResources;
-export type Locales = keyof Resources;
+export type * from '@/locales/resources';

package/tsconfig.json

@@ -22,5 +22,10 @@
     }
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.d.ts", "**/*.tsx"]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.d.ts", "**/*.tsx"],
+  "ts-node": {
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+  }
 }

package/scripts/genDefaultLocale.mjs

@@ -1,12 +0,0 @@
-import fs from 'node:fs';
-import { resolve } from 'node:path';
-
-import i18nConfig from '../.i18nrc.js';
-import resources from '../src/locales/resources/zh_CN.ts';
-
-for (const [ns, value] of Object.entries(resources)) {
-  fs.writeFileSync(
-    resolve(i18nConfig.output, i18nConfig.entryLocale, `${ns}.json`),
-    JSON.stringify(value, null, 2),
-  );
-}

package/scripts/toc.mjs

@@ -1,40 +0,0 @@
-import { tocForResources } from 'i18next-resources-for-ts';
-import fs from 'node:fs';
-import { resolve } from 'node:path';
-
-import i18nConfig from '../.i18nrc.js';
-
-const locales = [i18nConfig.entryLocale, ...i18nConfig.outputLocales];
-
-const RES_OUTPUT = 'src/locales/resources';
-
-let index = '';
-let indexObj = '';
-locales.forEach((locale) => {
-  const files = fs
-    .readdirSync(resolve(i18nConfig.output, locale))
-    .filter((name) => name.includes('.json'));
-  index += `import ${locale} from "./${locale}";\n`;
-  indexObj += `   "${locale.replace('_', '-')}": ${locale},\n`;
-  const ns = [];
-  files.forEach((file) => {
-    ns.push({
-      name: file.replace('.json', ''),
-      path: resolve(i18nConfig.output, locale, file),
-    });
-  });
-  let toc = tocForResources(ns, resolve(RES_OUTPUT)).replaceAll('\\', '/');
-  if (locale === i18nConfig.entryLocale) {
-    toc = toc.replaceAll('.json', '').replaceAll('../../../locales/zh_CN', '../default');
-  }
-  fs.writeFileSync(resolve(RES_OUTPUT, `${locale}.ts`), toc);
-});
-
-fs.writeFileSync(
-  resolve(RES_OUTPUT, `index.ts`),
-  `${index}
-
-export default {
-${indexObj}};
-`,
-);