chore(version): 0.4.2

LICENSE

@@ -1,21 +1,101 @@
-MIT License
+### Cherry Studio 商业许可协议
 
-Copyright (c) 2024 亢奋猫
+---
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+#### 中文版
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+**Cherry Studio 商业许可协议**
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+本协议（以下简称“协议”）由以下双方签订：
+
+- 许可方：王谦（kangfenmao@qq.com）
+- 被许可方：[被许可方名称]
+
+**1. 定义**
+
+- “软件”指 Cherry Studio 软件，网址为 https://cherry-ai.com。
+- “商业用途”指任何以盈利为目的的使用。
+
+**2. 许可**
+
+- 未经许可方明确书面许可，被许可方不得将软件用于商业用途。
+- 未经许可方事先书面同意，被许可方不得将软件全部或部分用于商业用途分发。
+- 未经许可方明确授权，被许可方不得再许可、租赁、销售、出租或以其他方式将软件转让给任何第三方用于商业用途。
+
+**3. 责任限制**
+
+开发者不对因使用本软件而产生的任何直接或间接损失承担责任。用户应自行承担使用本软件的风险。
+
+**4. 许可协议生效日期**
+
+本许可协议自用户首次下载或使用本软件之日起生效。
+
+**5. 许可终止**
+
+如发现用户违反上述条款，开发者有权随时终止本许可，并要求用户停止使用本软件及删除所有相关副本。
+
+**6. 其他**
+
+本协议的解释、效力及争议的解决，均适用中华人民共和国法律。
+
+**7. 联系信息**
+
+- 许可方联系方式：
+  - 手机号：18539907620
+  - 邮箱：kangfenmao@qq.com
+
+**许可方（签字）：**  
+**日期：**
+
+**被许可方（签字）：**  
+**日期：**
+
+---
+
+#### English Version
+
+**Cherry Studio Commercial License Agreement**
+
+This Agreement ("Agreement") is entered into by and between:
+
+- Licensor: Wang Qian (kangfenmao)
+- Licensee: [Licensee Name]
+
+**1. Definitions**
+
+- "Software" refers to the Cherry Studio software, available at https://cherry-ai.com.
+- "Commercial Use" refers to any use for profit.
+
+**2. License**
+
+- The Licensee may not use the Software for Commercial Use without the Licensor's explicit written permission.
+- The Licensee may not distribute the Software in whole or in part for Commercial Use without the Licensor's prior written consent.
+- The Licensee may not sublicense, lease, sell, rent, or otherwise transfer the Software to any third party for Commercial Use without the Licensor's explicit authorization.
+
+**3. Termination of License**
+
+The developer reserves the right to terminate this license at any time if the terms are violated, and may require the user to cease using the software and delete all related copies.
+
+**4. Effective Date of License Agreement**
+
+This license agreement becomes effective from the date the user first downloads or uses the software.
+
+**5. Termination of License**
+
+The developer reserves the right to terminate this license at any time if the terms are violated, and may require the user to cease using the software and delete all related copies.
+
+**6. Miscellaneous**
+
+This Agreement shall be governed by and construed in accordance with the laws of the People's Republic of China.
+
+**7. Contact Information**
+
+- Licensor's Contact Details:
+  - Phone: 18539907620
+  - Email: kangfenmao@qq.com
+
+**Licensor (Signature):**  
+**Date:**
+
+**Licensee (Signature):**  
+**Date:**

README.md

@@ -4,7 +4,7 @@
 
 # Screenshot
 
-![image](https://github.com/user-attachments/assets/1763dc38-bece-4d24-9c21-ed82f6142694)
+![](https://github.com/user-attachments/assets/e32b244f-3a84-473a-89ef-0b12ef4127b2)
 
 ![](https://github.com/user-attachments/assets/18c10eed-4711-4975-bf9c-b274c61924f3)
 
@@ -18,6 +18,7 @@
 4. Allows using multiple models to answer questions in the same conversation.
 5. Supports drag-and-drop sorting.
 6. Code highlighting.
+7. Mermaid chart
 
 # Develop
 ## Recommended IDE Setup

electron-builder.yml

@@ -56,5 +56,5 @@ electronDownload:
 afterSign: scripts/notarize.js
 releaseInfo:
   releaseNotes: |
-    支持配置网络代理
-    支持隐藏左侧智能体
+    支持主题切换
+    修复一些问题

electron.vite.config.ts

@@ -16,9 +16,6 @@ export default defineConfig({
       }
     },
     plugins: [react()],
-    assetsInclude: ['**/*.md'],
-    server: {
-      host: '0.0.0.0'
-    }
+    assetsInclude: ['**/*.md']
   }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-studio",
-  "version": "0.3.3",
+  "version": "0.4.2",
   "description": "A powerful AI assistant for producer.",
   "main": "./out/main/index.js",
   "author": "kangfenmao@qq.com",
@@ -18,13 +18,15 @@
     "build:unpack": "dotenv npm run build && electron-builder --dir",
     "build:win": "dotenv npm run build && electron-builder --win --publish never",
     "build:mac": "dotenv electron-vite build && electron-builder --mac --publish never",
-    "build:linux": "dotenv electron-vite build && electron-builder --linux --publish never"
+    "build:linux": "dotenv electron-vite build && electron-builder --linux --publish never",
+    "release": "node scripts/version.js"
   },
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
     "@sentry/electron": "^5.2.0",
     "electron-log": "^5.1.5",
+    "electron-store": "^8.2.0",
     "electron-updater": "^6.1.7",
     "electron-window-state": "^5.0.3"
   },
@@ -33,7 +35,6 @@
     "@electron-toolkit/eslint-config-prettier": "^2.0.0",
     "@electron-toolkit/eslint-config-ts": "^1.0.1",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@fontsource/inter": "^5.0.18",
     "@hello-pangea/dnd": "^16.6.0",
     "@kangfenmao/keyv-storage": "^0.1.0",
     "@reduxjs/toolkit": "^2.2.5",

scripts/version.js

@@ -0,0 +1,40 @@
+const { execSync } = require('child_process')
+const fs = require('fs')
+
+// 执行命令并返回输出
+function exec(command) {
+  return execSync(command, { encoding: 'utf8' }).trim()
+}
+
+// 获取命令行参数
+const args = process.argv.slice(2)
+const versionType = args[0] || 'patch'
+const shouldPush = args.includes('push')
+
+// 验证版本类型
+if (!['patch', 'minor', 'major'].includes(versionType)) {
+  console.error('Invalid version type. Use patch, minor, or major.')
+  process.exit(1)
+}
+
+// 更新版本
+exec(`yarn version ${versionType} --immediate`)
+
+// 读取更新后的 package.json 获取新版本号
+const updatedPackageJson = JSON.parse(fs.readFileSync('package.json', 'utf8'))
+const newVersion = updatedPackageJson.version
+
+// Git 操作
+exec('git add .')
+exec(`git commit -m "chore(version): ${newVersion}"`)
+exec(`git tag -a v${newVersion} -m "Version ${newVersion}"`)
+
+console.log(`Version bumped to ${newVersion}`)
+
+if (shouldPush) {
+  console.log('Pushing to remote...')
+  exec('git push && git push --tags')
+  console.log('Pushed to remote.')
+} else {
+  console.log('Changes are committed locally. Use "git push && git push --tags" to push to remote.')
+}

src/main/config.ts

@@ -0,0 +1,15 @@
+import Store from 'electron-store'
+
+export const appConfig = new Store()
+
+export const titleBarOverlayDark = {
+  height: 41,
+  color: '#1f1f1f',
+  symbolColor: '#ffffff'
+}
+
+export const titleBarOverlayLight = {
+  height: 41,
+  color: '#f8f8f8',
+  symbolColor: '#000000'
+}

src/main/event.ts

@@ -0,0 +1,24 @@
+import { dialog, SaveDialogOptions, SaveDialogReturnValue } from 'electron'
+import { writeFile } from 'fs'
+import logger from 'electron-log'
+
+export async function saveFile(_: Electron.IpcMainInvokeEvent, fileName: string, content: string): Promise<void> {
+  try {
+    const options: SaveDialogOptions = {
+      title: '保存文件',
+      defaultPath: fileName
+    }
+
+    const result: SaveDialogReturnValue = await dialog.showSaveDialog(options)
+
+    if (!result.canceled && result.filePath) {
+      writeFile(result.filePath, content, { encoding: 'utf-8' }, (err) => {
+        if (err) {
+          logger.error('[IPC - Error]', 'An error occurred saving the file:', err)
+        }
+      })
+    }
+  } catch (err) {
+    logger.error('[IPC - Error]', 'An error occurred saving the file:', err)
+  }
+}

src/main/index.ts

@@ -5,6 +5,8 @@ import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer'
 import windowStateKeeper from 'electron-window-state'
 import { join } from 'path'
 import icon from '../../resources/icon.png?asset'
+import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
+import { saveFile } from './event'
 import AppUpdater from './updater'
 
 function createWindow() {
@@ -14,6 +16,8 @@ function createWindow() {
     defaultHeight: 670
   })
 
+  const theme = appConfig.get('theme') || 'light'
+
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     x: mainWindowState.x,
@@ -24,14 +28,15 @@ function createWindow() {
     minHeight: 500,
     show: true,
     autoHideMenuBar: true,
-    titleBarStyle: 'hiddenInset',
+    titleBarStyle: 'hidden',
+    titleBarOverlay: theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight,
     trafficLightPosition: { x: 8, y: 12 },
     ...(process.platform === 'linux' ? { icon } : {}),
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
-      devTools: !app.isPackaged,
       webSecurity: false
+      // devTools: !app.isPackaged,
     }
   })
 
@@ -47,6 +52,11 @@ function createWindow() {
     menu.popup()
   })
 
+  mainWindow.webContents.on('will-navigate', (event, url) => {
+    event.preventDefault()
+    shell.openExternal(url)
+  })
+
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
   })
@@ -105,6 +115,14 @@ app.whenReady().then(() => {
     session.defaultSession.setProxy(proxy ? { proxyRules: proxy } : {})
   })
 
+  ipcMain.handle('save-file', saveFile)
+
+  ipcMain.handle('set-theme', (_, theme: 'light' | 'dark') => {
+    appConfig.set('theme', theme)
+    mainWindow?.setTitleBarOverlay &&
+      mainWindow.setTitleBarOverlay(theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight)
+  })
+
   // 触发检查更新(此方法用于被渲染线程调用，例如页面点击检查更新按钮来调用此方法)
   ipcMain.handle('check-for-update', async () => {
     autoUpdater.logger?.info('触发检查更新')

src/preload/index.d.ts

@@ -11,6 +11,8 @@ declare global {
       checkForUpdate: () => void
       openWebsite: (url: string) => void
       setProxy: (proxy: string | undefined) => void
+      saveFile: (path: string, content: string) => void
+      setTheme: (theme: 'light' | 'dark') => void
     }
   }
 }

src/preload/index.ts

@@ -6,7 +6,9 @@ const api = {
   getAppInfo: () => ipcRenderer.invoke('get-app-info'),
   checkForUpdate: () => ipcRenderer.invoke('check-for-update'),
   openWebsite: (url: string) => ipcRenderer.invoke('open-website', url),
-  setProxy: (proxy: string) => ipcRenderer.invoke('set-proxy', proxy)
+  setProxy: (proxy: string) => ipcRenderer.invoke('set-proxy', proxy),
+  saveFile: (path: string, content: string) => ipcRenderer.invoke('save-file', path, content),
+  setTheme: (theme: 'light' | 'dark') => ipcRenderer.invoke('set-theme', theme)
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

src/renderer/index.html

@@ -4,13 +4,11 @@
     <meta charset="UTF-8" />
     <title>Cherry Studio</title>
     <meta name="viewport" content="initial-scale=1, width=device-width" />
-    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; connect-src *; script-src 'self'; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' *; img-src 'self' data:" />
+      content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data:" />
   </head>
-
-  <body theme-mode="dark">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

src/renderer/src/App.tsx

@@ -1,34 +1,37 @@
-import '@fontsource/inter'
 import store, { persistor } from '@renderer/store'
-import { ConfigProvider } from 'antd'
 import { Provider } from 'react-redux'
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import { PersistGate } from 'redux-persist/integration/react'
 import Sidebar from './components/app/Sidebar'
 import TopViewContainer from './components/TopView'
-import { AntdThemeConfig, getAntdLocale } from './config/antd'
 import AppsPage from './pages/apps/AppsPage'
 import HomePage from './pages/home/HomePage'
 import SettingsPage from './pages/settings/SettingsPage'
+import TranslatePage from './pages/translate/TranslatePage'
+import AntdProvider from './providers/AntdProvider'
+import { ThemeProvider } from './providers/ThemeProvider'
 
 function App(): JSX.Element {
   return (
-    <ConfigProvider theme={AntdThemeConfig} locale={getAntdLocale()}>
-      <Provider store={store}>
-        <PersistGate loading={null} persistor={persistor}>
-          <TopViewContainer>
-            <HashRouter>
-              <Sidebar />
-              <Routes>
-                <Route path="/" element={<HomePage />} />
-                <Route path="/apps" element={<AppsPage />} />
-                <Route path="/settings/*" element={<SettingsPage />} />
-              </Routes>
-            </HashRouter>
-          </TopViewContainer>
-        </PersistGate>
-      </Provider>
-    </ConfigProvider>
+    <Provider store={store}>
+      <ThemeProvider>
+        <AntdProvider>
+          <PersistGate loading={null} persistor={persistor}>
+            <TopViewContainer>
+              <HashRouter>
+                <Sidebar />
+                <Routes>
+                  <Route path="/" element={<HomePage />} />
+                  <Route path="/apps" element={<AppsPage />} />
+                  <Route path="/translate" element={<TranslatePage />} />
+                  <Route path="/settings/*" element={<SettingsPage />} />
+                </Routes>
+              </HashRouter>
+            </TopViewContainer>
+          </PersistGate>
+        </AntdProvider>
+      </ThemeProvider>
+    </Provider>
   )
 }
 

src/renderer/src/assets/fonts/icon-fonts/iconfont.css

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4563475 */
+  src: url('iconfont.woff2?t=1722242729348') format('woff2'),
+       url('iconfont.woff?t=1722242729348') format('woff'),
+       url('iconfont.ttf?t=1722242729348') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-dark1:before {
+  content: "\e72f";
+}
+
+.icon-theme-light:before {
+  content: "\e6b7";
+}
+
+.icon-translate_line:before {
+  content: "\e7de";
+}
+
+.icon-history:before {
+  content: "\e758";
+}
+
+.icon-hidesidebarhoriz:before {
+  content: "\e8eb";
+}
+
+.icon-showsidebarhoriz:before {
+  content: "\e944";
+}
+
+.icon-a-addchat:before {
+  content: "\e658";
+}
+
+.icon-appstore:before {
+  content: "\e792";
+}
+
+.icon-chat:before {
+  content: "\e615";
+}
+
+.icon-setting:before {
+  content: "\e78e";
+}
+

src/renderer/src/assets/styles/index.scss

@@ -1,10 +1,6 @@
-@import 'https://at.alicdn.com/t/c/font_4563475_hrx8c92awui.css';
+@import '../fonts/icon-fonts/iconfont.css';
 @import './markdown.scss';
-
-// @font-face {
-//   font-family: 'Playwrite';
-//   src: url(../fonts/Playwrite.ttf) format('truetype');
-// }
+@import './scrollbar.scss';
 
 :root {
   --color-white: #ffffff;
@@ -27,20 +23,69 @@
   --color-background-soft: var(--color-black-soft);
   --color-background-mute: var(--color-black-mute);
 
+  --color-primary: #135200;
+  --color-primary-soft: #13520099;
+  --color-primary-mute: #13520033;
+
   --color-text: var(--color-text-1);
   --color-icon: #ffffff99;
   --color-icon-white: #ffffff;
   --color-border: #ffffff20;
+  --color-error: #f44336;
+  --color-code-background: #323232;
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+
+  --navbar-background: #1f1f1f;
+  --sidebar-background: #1f1f1f;
 
   --navbar-height: 42px;
   --sidebar-width: 55px;
-  --assistants-width: 250px;
-  --topic-list-width: 250px;
+  --assistants-width: 245px;
+  --topic-list-width: 260px;
   --settings-width: var(--assistants-width);
   --status-bar-height: 40px;
   --input-bar-height: 125px;
 }
 
+body[theme-mode='light'] {
+  --color-white: #ffffff;
+  --color-white-soft: #f8f8f8;
+  --color-white-mute: #efefef;
+
+  --color-black: #1b1b1f;
+  --color-black-soft: #262626;
+  --color-black-mute: #363636;
+
+  --color-gray-1: #8e8e93;
+  --color-gray-2: #aeaeb2;
+  --color-gray-3: #c7c7cc;
+
+  --color-text-1: rgba(0, 0, 0, 1);
+  --color-text-2: rgba(0, 0, 0, 0.6);
+  --color-text-3: rgba(0, 0, 0, 0.38);
+
+  --color-background: #ffffff;
+  --color-background-soft: var(--color-white-soft);
+  --color-background-mute: var(--color-white-mute);
+
+  --color-primary: #00b96b;
+  --color-primary-soft: #00b96b99;
+  --color-primary-mute: #00b96b33;
+
+  --color-text: var(--color-text-1);
+  --color-icon: #00000099;
+  --color-icon-white: #000000;
+  --color-border: #00000028;
+  --color-error: #f44336;
+  --color-code-background: #e3e3e3;
+  --color-scrollbar-thumb: rgba(0, 0, 0, 0.15);
+  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
+
+  --navbar-background: #f8f8f8;
+  --sidebar-background: #f8f8f8;
+}
+
 *,
 *::before,
 *::after {
@@ -62,9 +107,9 @@ body {
   overflow: hidden;
   background-size: cover;
   font-family:
-    Inter,
     -apple-system,
     BlinkMacSystemFont,
+    'Microsoft YaHei',
     'Segoe UI',
     Roboto,
     Oxygen,
@@ -72,8 +117,7 @@ body {
     Cantarell,
     'Fira Sans',
     'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
+    'Helvetica Neue' sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -102,28 +146,8 @@ body,
   resize: none;
 }
 
-/* 全局初始化滚动条样式 */
-::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.4);
-}
-
-/* Safari 和 Chrome */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  body {
-    scrollbar-width: thin; /* 告诉 FF 用细滚动条 */
-    scrollbar-color: rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.1); /* FF 前面色后面色 */
+.chat-nav-dropdown {
+  .ant-dropdown-menu {
+    padding-bottom: 12px;
   }
 }

src/renderer/src/assets/styles/markdown.scss

@@ -1,20 +1,23 @@
 .markdown {
-  color: #fff;
+  color: var(--color-text);
   font-size: 15px;
   line-height: 1.6;
   user-select: text;
-  margin-top: 4px;
 
-  p:first-of-type {
+  p:last-child {
+    margin-bottom: 5px;
+  }
+
+  p:first-child {
     margin-top: 0;
   }
 
-  h1:first-of-type,
-  h2:first-of-type,
-  h3:first-of-type,
-  h4:first-of-type,
-  h5:first-of-type,
-  h6:first-of-type {
+  h1:first-child,
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  h5:first-child,
+  h6:first-child {
     margin-top: 0;
   }
 
@@ -30,44 +33,36 @@
 
   h1 {
     font-size: 2em;
-    color: #fff;
   }
 
   h2 {
     font-size: 1.5em;
-    color: #fff;
   }
 
   h3 {
     font-size: 1.2em;
-    color: #fff;
   }
 
   h4 {
     font-size: 1em;
-    color: #fff;
   }
 
   h5 {
     font-size: 0.9em;
-    color: #fff;
   }
 
   h6 {
     font-size: 0.8em;
-    color: #fff;
   }
 
   p {
     margin: 1em 0;
-    color: #fff;
   }
 
   ul,
   ol {
     padding-left: 1.5em;
     margin: 1em 0;
-    color: #ccc;
   }
 
   li {
@@ -84,4 +79,8 @@
   span {
     word-break: break-all;
   }
+
+  code {
+    white-space: pre-wrap;
+  }
 }

src/renderer/src/assets/styles/scrollbar.scss

@@ -0,0 +1,15 @@
+/* 全局初始化滚动条样式 */
+::-webkit-scrollbar {
+  width: 3px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-scrollbar-thumb);
+  &:hover {
+    background: var(--color-scrollbar-thumb-hover);
+  }
+}

src/renderer/src/components/app/Navbar.tsx

@@ -26,11 +26,10 @@ const NavbarContainer = styled.div`
   min-height: var(--navbar-height);
   max-height: var(--navbar-height);
   -webkit-app-region: drag;
-  background-color: #1f1f1f;
+  background-color: var(--navbar-background);
   margin-left: calc(var(--sidebar-width) * -1);
   padding-left: var(--sidebar-width);
   border-bottom: 0.5px solid var(--color-border);
-  border-top: 0.5px solid var(--color-border);
 `
 
 const NavbarLeftContainer = styled.div`

src/renderer/src/components/app/Sidebar.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { Link, useLocation } from 'react-router-dom'
 import useAvatar from '@renderer/hooks/useAvatar'
 import { isMac, isWindows } from '@renderer/config/constant'
+import { TranslationOutlined } from '@ant-design/icons'
 
 const Sidebar: FC = () => {
   const { pathname } = useLocation()
@@ -13,7 +14,7 @@ const Sidebar: FC = () => {
 
   return (
     <Container style={isWindows ? { paddingTop: 0 } : {}}>
-      {isMac && <PlaceholderBorder />}
+      {isMac ? <PlaceholderBorderMac /> : <PlaceholderBorderWin />}
       <StyledLink to="/">
         <AvatarImg src={avatar || Logo} draggable={false} />
       </StyledLink>
@@ -29,6 +30,11 @@ const Sidebar: FC = () => {
               <i className="iconfont icon-appstore"></i>
             </Icon>
           </StyledLink>
+          <StyledLink to="/translate">
+            <Icon className={isRoute('/translate')}>
+              <TranslationOutlined />
+            </Icon>
+          </StyledLink>
         </Menus>
       </MainMenus>
       <Menus>
@@ -50,9 +56,8 @@ const Container = styled.div`
   min-width: var(--sidebar-width);
   min-height: 100%;
   -webkit-app-region: drag !important;
-  background-color: #1f1f1f;
+  background-color: var(--sidebar-background);
   border-right: 0.5px solid var(--color-border);
-  border-top: 0.5px solid var(--color-border);
   padding-top: var(--navbar-height);
   position: relative;
 `
@@ -63,7 +68,7 @@ const AvatarImg = styled.img`
   height: 28px;
   background-color: var(--color-background-soft);
   margin: 5px 0;
-  margin-top: ${isMac ? '16px' : '7px'};
+  margin-top: ${isMac ? '16px' : '9px'};
 `
 const MainMenus = styled.div`
   display: flex;
@@ -86,22 +91,28 @@ const Icon = styled.div`
   margin-bottom: 5px;
   transition: background-color 0.2s ease;
   -webkit-app-region: none;
-  .iconfont {
+  .iconfont,
+  .anticon {
     color: var(--color-icon);
     font-size: 20px;
     transition: color 0.2s ease;
     text-decoration: none;
   }
+  .anticon {
+    font-size: 17px;
+  }
   &:hover {
-    background-color: #ffffff30;
+    background-color: var(--color-background-soft);
     cursor: pointer;
-    .iconfont {
+    .iconfont,
+    .anticon {
       color: var(--color-icon-white);
     }
   }
   &.active {
-    background-color: #ffffff20;
-    .iconfont {
+    background-color: var(--color-background-mute);
+    .iconfont,
+    .anticon {
       color: var(--color-icon-white);
     }
   }
@@ -115,14 +126,24 @@ const StyledLink = styled(Link)`
   }
 `
 
-const PlaceholderBorder = styled.div`
+const PlaceholderBorderMac = styled.div`
   width: var(--sidebar-width);
   height: var(--navbar-height);
-  border-right: 1px solid #1f1f1f;
+  background: var(--navbar-background);
+  border-right: 1px solid var(--navbar-background);
   border-bottom: 0.5px solid var(--color-border);
   position: absolute;
-  top: -0.5px;
-  left: 0.5px;
+  top: 0;
+  left: 0;
+`
+
+const PlaceholderBorderWin = styled.div`
+  width: var(--sidebar-width);
+  height: var(--navbar-height);
+  position: absolute;
+  border-right: 1px solid var(--navbar-background);
+  top: -1px;
+  right: -1px;
 `
 
 export default Sidebar

src/renderer/src/config/antd.ts

@@ -1,26 +0,0 @@
-import store from '@renderer/store'
-import { theme, ThemeConfig } from 'antd'
-import zhCN from 'antd/locale/zh_CN'
-
-export const colorPrimary = '#00b96b'
-
-export const AntdThemeConfig: ThemeConfig = {
-  token: {
-    colorPrimary,
-    borderRadius: 5
-  },
-  algorithm: [theme.darkAlgorithm]
-}
-
-export function getAntdLocale() {
-  const language = store.getState().settings.language
-
-  switch (language) {
-    case 'zh-CN':
-      return zhCN
-    case 'en-US':
-      return undefined
-    default:
-      return zhCN
-  }
-}

src/renderer/src/config/assistants.json

@@ -4,15 +4,15 @@
     "name": "🎯 产品经理 - Product Manager",
     "emoji": "🎯",
     "group": "职业",
-    "prompt": "你现在是一名经验丰富的产品经理，你具有深厚的技术背景，并且对市场和用户需求有敏锐的洞察力。你擅长解决复杂的问题，制定有效的产品策略，并优秀地平衡各种资源以实现产品目标。你具有卓越的项目管理能力和出色的沟通技巧，能够有效地协调团队内部和外部的资源。请在这个角色下为我解答以下问题。\n\n一、 产品需求🎯\n请列举5个关于[插入产品类型]的关键需求。\n描述[插入产品]的目标用户。\n针对[插入产品]的功能进行优先级排序。\n对于[插入问题]，您认为哪种解决方案最有效？为什么？\n总结一个用户场景，说明如何使用[插入产品]。\n二、项目管理📆\n请为[插入项目]创建一个里程碑计划。\n如何平衡项目质量、时间和预算？\n描述一个有效的团队沟通策略。\n当团队面临压力和冲突时，您会如何解决问题？\n请说明如何评估项目风险并制定应对措施。\n三、数据分析📊\n为[插入产品]提供一个关键指标（KPI）列表。\n请分析以下数据并提出改进产品的建议：[插入数据]。\n描述如何通过A/B测试确定[插入功能]的最佳设计。\n如何使用数据驱动的方法来优化产品？\n总结一种有效的数据可视化方法，以展示产品性能。\n四、用户体验👥\n描述[插入产品]的理想用户体验。\n请提供一个用户反馈列表，以改进[插入产品]的用户体验。\n怎样衡量产品的可用性？\n请简要描述一种有效的用户研究方法。\n如何根据用户反馈迭代和优化产品设计？\n五、市场营销与推广🚀\n为[插入产品]创建一个简短的市场营销策略。\n请提供三个有效的渠道，用于推广[插入产品]。\n描述如何通过社交媒体推广[插入产品]。\n请提供一个关于[插入产品]的吸引人的标语。\n怎样评估营销活动的成功？\n六、创新思维💡\n如果您需要为[插入产品]提出一个创新功能，您会选择什么？为什么？\n描述一种方法，以提高团队的创新能力。\n怎样在竞争激烈的市场中使[插入产品]脱颖而出？\n请分享一个关于产品失败的案例，并说明可以从中学到的经验教训。\n如何利用新兴技术来改进[插入产品]？",
+    "prompt": "你现在是一名经验丰富的产品经理，你具有深厚的技术背景，并且对市场和用户需求有敏锐的洞察力。你擅长解决复杂的问题，制定有效的产品策略，并优秀地平衡各种资源以实现产品目标。你具有卓越的项目管理能力和出色的沟通技巧，能够有效地协调团队内部和外部的资源。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名经验丰富的产品经理，你具有深厚的技术背景，并且对市场和用户需求有敏锐的洞察力。你擅长解决复杂的问题，制定有效的产品策略，并优秀地平衡各种资源以实现产品目标。你具有卓越的项目管理能力和出色的沟通技巧，能够有效地协调团队内部和外部的资源。请在这个角色下为我解答以下问题。"
   },
   {
     "id": 2,
     "name": "🎯 策略产品经理 - Strategy Product Manager",
-    "emoji": "🎯",
+    "emoji": "🎯 ",
     "group": "职业",
-    "prompt": "你现在是一名策略产品经理，你擅长进行市场研究和竞品分析，以制定产品策略。你能把握行业趋势，了解用户需求，并在此基础上优化产品功能和用户体验。请在这个角色下为我解答以下问题。\n\n一、产品策略🎯\n描述一种针对[插入产品]的有效市场定位策略。\n请为[插入产品]创建一个产品路线图。\n描述一种方法来确定产品的核心功能。\n描述一种如何处理产品生命周期中不同阶段的策略。\n请根据市场变化，为[插入产品]制定一种产品迭代策略。\n二、市场分析📈\n请描述如何进行有效的竞品分析。\n如何根据用户需求和行为分析来优化[插入产品]？\n描述一种有效的市场趋势分析方法。\n如何进行[插入产品]的SWOT分析？\n描述一种确定和理解目标市场的方法。\n三、数据驱动决策📊\n描述如何使用数据来指导产品策略决策。\n描述如何进行有效的A/B测试，以确定产品特性。\n如何使用数据可视化工具来分析产品性能？\n请描述如何利用数据来识别和优化用户痛点。\n如何使用数据来衡量和跟踪产品目标的实现？\n四、团队协作👥\n描述如何与团队成员进行有效的沟通，以实现产品策略的执行。\n描述如何建立和管理跨功能团队。\n如何处理团队中的冲突和挑战？\n描述如何引导团队接受并执行新的产品策略。\n如何确保团队成员在实施产品策略过程中的参与和投入？\n五、风险管理🔒\n描述如何识别和评估产品策略的潜在风险。\n请制定一个针对[插入风险]的应对计划。\n描述一种有效的风险缓解策略。\n如何通过持续的风险监控和管理来保护产品的生命周期？\n描述如何处理产品失败的风险和影响。\n六、创新思维💡\n描述一种为[插入产品]提出创新策略的方法。\n请分享一次你的产品策略创新案例。\n描述如何在产品策略中整合新兴技术。\n如何建立一个鼓励创新的产品策略环境？\n描述一种激发团队创新思维的方法。",
+    "prompt": "你现在是一名策略产品经理，你擅长进行市场研究和竞品分析，以制定产品策略。你能把握行业趋势，了解用户需求，并在此基础上优化产品功能和用户体验。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名策略产品经理，你擅长进行市场研究和竞品分析，以制定产品策略。你能把握行业趋势，了解用户需求，并在此基础上优化产品功能和用户体验。请在这个角色下为我解答以下问题。"
   },
   {
@@ -20,7 +20,7 @@
     "name": "👥 社群运营 - Community Operations",
     "emoji": "👥",
     "group": "职业",
-    "prompt": "你现在是一名社群运营专家，你擅长激发社群活力，增强用户的参与度和忠诚度。你了解如何管理和引导社群文化，以及如何解决社群内的问题和冲突。请在这个角色下为我解答以下问题。\n\n一、社群策划与构建🏗️\n请列举5种有效的社群构建策略。\n如何根据[插入目标群体]的特性规划和建立一个社群？\n描述一种引导和维持社群活跃度的有效策略。\n分析一下[插入竞争对手]的社群构建策略及其优缺点。\n怎样通过独特的社群价值提议（CVP）吸引并保持社群成员？\n二、社群管理与维护🔧\n请为[插入社群]设计一个社群管理与维护的计划。\n描述一种处理社群冲突和挑战的有效方法。\n如何确保社群环境的积极性和安全性？\n请分享一种高效的社群内容策划和管理流程。\n分析一下[插入竞争对手]的社群管理策略及其优缺点。\n三、社群活动策划与执行🎉\n请为[插入社群]设计一个社群活动的策略。\n描述一种提升社群活动参与度的方法。\n请设计一个适合[插入社群]的在线/线下活动计划。\n请提供一些有效的社群活动推广和宣传方法。\n怎样通过活动数据分析来优化和改进社群活动？\n四、社群成员培养与激励🌟\n请为[插入社群]设计一个社群成员培养与激励的策略。\n描述一种提升社群成员参与度和贡献度的有效方法。\n如何通过激励机制和奖励来提升社群成员的忠诚度？\n请分享一种培养社群核心用户或领袖的策略。\n怎样通过个性化体验来满足不同社群成员的需求？\n五、社群数据分析与优化📊\n请为[插入社群]的运营提供一个关键性能指标（KPI）列表。\n请分析以下社群运营数据并提出优化策略：[插入数据]。\n描述如何通过数据分析来理解社群动态和成员行为。\n怎样根据数据反馈来迭代和优化社群策略？\n如何使用数据可视化工具来追踪和展示社群运营效果？\n六、社群危机管理与公关处理🔔\n当社群出现[插入问题或危机]时，你会如何解决和处理？\n描述一种提高社群危机管理和公关处理能力的方法。\n怎样通过有效的沟通和协调来处理社群内部和外部的负面反应？\n请分享一个社群运营中出现危机的案例，我们可以从中学到什么？\n描述如何利用新兴技术和工具来改进社群运营。",
+    "prompt": "你现在是一名社群运营专家，你擅长激发社群活力，增强用户的参与度和忠诚度。你了解如何管理和引导社群文化，以及如何解决社群内的问题和冲突。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名社群运营专家，你擅长激发社群活力，增强用户的参与度和忠诚度。你了解如何管理和引导社群文化，以及如何解决社群内的问题和冲突。请在这个角色下为我解答以下问题。"
   },
   {
@@ -28,7 +28,7 @@
     "name": "✍️ 内容运营 - Content Operations",
     "emoji": "✍️",
     "group": "职业",
-    "prompt": "你现在是一名专业的内容运营人员，你精通内容创作、编辑、发布和优化。你对读者需求有敏锐的感知，擅长通过高质量的内容吸引和保留用户。请在这个角色下为我解答以下问题。\n\n一、内容策划与创新💡\n请列举5种针对[插入目标受众]的内容创新策略。\n如何通过对目标市场的研究为[插入产品/平台]创造出引人入胜的内容？\n描述一种生成并优化[插入类型的内容]的有效方法。\n分析一下[插入竞争对手]的内容创新策略及其优缺点。\n怎样利用数据分析来提高内容的吸引力和分享性？\n二、内容生产和编辑✍️\n请为[插入产品/平台]设计一份内容生产和编辑的计划。\n描述一种提高[插入类型的内容]质量和吸引力的方法。\n如何确保内容的一致性和符合品牌声音？\n请分享一种高效的内容审核和质量控制流程。\n分析一下[插入竞争对手]的内容生产和编辑策略及其优缺点。\n三、内容发布和推广🚀\n请为[插入产品/平台]设计一个内容发布和推广的策略。\n如何确定最佳的内容发布时间和频率？\n描述一种通过社交媒体进行内容推广的策略。\n请提供一些建立与维护内容合作伙伴关系的建议。\n怎样通过SEO优化提高内容的可搜索性和可见性？\n四、内容性能度量与优化📊\n请为[插入产品/平台]的内容提供一个关键性能指标（KPI）列表。\n请分析以下内容性能数据并提出改进策略：[插入数据]。\n描述如何通过A/B测试来优化内容的效果。\n怎样根据用户反馈和数据来迭代和优化内容？\n如何使用数据可视化工具来追踪和解释内容性能？\n五、危机管理和公关处理🔧\n当出现[插入问题或危机]时，你会如何解决和处理？\n描述一种提高团队危机管理和公关处理能力的方法。\n怎样通过有效的沟通和协调来处理公众对内容的负面反应？\n请分享一个内容运营中出现危机的案例，我们可以从中学到什么？\n描述如何利用新兴技术和工具来改进内容运营。\n六、团队协作与管理👥\n为[插入内容团队]设计一份团队协作和管理的计划。\n描述一种提高团队效率和创新能力的方法。\n如何处理团队冲突并保持良好的团队氛围？\n请分享一种有效的团队沟通和协作工具。\n怎样通过定期的反馈和评价来提高团队的表现？",
+    "prompt": "你现在是一名专业的内容运营人员，你精通内容创作、编辑、发布和优化。你对读者需求有敏锐的感知，擅长通过高质量的内容吸引和保留用户。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名专业的内容运营人员，你精通内容创作、编辑、发布和优化。你对读者需求有敏锐的感知，擅长通过高质量的内容吸引和保留用户。请在这个角色下为我解答以下问题。"
   },
   {
@@ -36,7 +36,7 @@
     "name": "🛍️ 商家运营 - Merchant Operations",
     "emoji": "🛍️",
     "group": "职业",
-    "prompt": "你现在是一名经验丰富的商家运营专家，你擅长管理商家关系，优化商家业务流程，提高商家满意度。你对电商行业有深入的了解，并有优秀的商业洞察力。请在这个角色下为我解答以下问题。\n\n一、商家寻找和接洽🔍\n请列举5种有效的商家寻找策略。\n如何通过市场研究了解潜在商家的需求？\n描述一种与[插入商家类型]进行有效接洽的方法。\n分析一下[插入竞争对手]的商家寻找和接洽策略及其优缺点。\n怎样通过建立合作伙伴关系拓宽商家群？\n二、商家合作洽谈和谈判⚖️\n请为[插入商家类型]设计一份合作提案。\n描述一种提高[插入合作项目]洽谈成功率的策略。\n请给出一份有效的商家合作协议模板。\n如何通过良好的沟通和谈判技巧确保合作的顺利进行？\n分析一下[插入竞争对手]的商家合作谈判策略及其优缺点。\n三、商家关系管理💼\n请为[插入平台/产品]设计一个有效的商家关系管理策略。\n如何通过定期的商家反馈和评价优化商家合作？\n描述一种利用[插入平台/产品]的特性和功能提高商家满意度的方法。\n请分享一种维持良好商家关系的有效方法。\n请分析一下[插入竞争对手]的商家关系管理策略及其优缺点。\n四、商家培训和发展📚\n为[插入平台/产品]的新入驻商家设计一个培训计划。\n怎样通过提供培训和支持来提升商家的操作效率？\n描述一种帮助商家提升销售业绩的方法或策略。\n请给出一份有效的商家满意度调查问卷。\n如何通过商家发展计划提高商家的忠诚度和满意度？\n五、数据分析和报告📊\n为[插入商家类型]提供一个关键业绩指标（KPI）列表。\n请分析以下商家数据并提出改进合作关系的建议：[插入数据]。\n描述如何通过数据驱动的方法来优化商家运营。\n如何使用数据可视化工具来帮助商家了解其业绩？\n请制作一份包含关键数据和洞察的商家运营报告。\n六、危机管理和问题解决🔧\n当出现[插入问题或危机]时，你会如何解决和处理？\n描述一种提高团队解决问题和危机管理能力的方法。\n怎样通过有效的沟通和协调处理商家投诉？\n请分享一个商家合作中出现问题的案例，我们可以从中学到什么？\n描述如何运用新兴技术和工具来改进商家运营。",
+    "prompt": "你现在是一名经验丰富的商家运营专家，你擅长管理商家关系，优化商家业务流程，提高商家满意度。你对电商行业有深入的了解，并有优秀的商业洞察力。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名经验丰富的商家运营专家，你擅长管理商家关系，优化商家业务流程，提高商家满意度。你对电商行业有深入的了解，并有优秀的商业洞察力。请在这个角色下为我解答以下问题。"
   },
   {
@@ -44,15 +44,15 @@
     "name": "🚀 产品运营 - Product Operations",
     "emoji": "🚀",
     "group": "职业",
-    "prompt": "你现在是一名经验丰富的产品运营专家，你擅长分析市场和用户需求，并对产品生命周期各阶段的运营策略有深刻的理解。你有出色的团队协作能力和沟通技巧，能在不同部门间进行有效的协调。请在这个角色下为我解答以下问题。\n\n一、 用户获取（Acquisition）🔍\n请列举5种有效的用户获取策略。\n如何通过内容营销吸引潜在用户？\n请描述一种针对[插入目标用户]的定向推广策略。\n分析一下[插入竞争对手]的用户获取策略及其优缺点。\n怎样通过合作伙伴关系扩大用户群？\n二、 用户激活（Activation）🌟\n请列举3个关于[插入产品]的激活用户的关键点。\n描述一种提高[插入产品]新用户激活率的方法。\n为[插入产品]设计一个有效的新用户引导流程。\n怎样通过个性化体验提高用户激活？\n分析一下[插入竞争对手]的用户激活策略及其优缺点。\n三、 用户留存（Retention）🔐\n请为[插入产品]设计一个提高用户留存的策略。\n怎样通过用户反馈优化产品功能，提高用户留存？\n描述一种利用[插入产品]的社交功能提高用户留存的方法。\n如何通过提供优质客户服务提高用户留存？\n请分析一下[插入竞争对手]的用户留存策略及其优缺点。\n四、 用户推荐（Referral）🤝\n为[插入产品]设计一个有效的用户推荐计划。\n怎样通过激励措施提高用户推荐意愿？\n请描述一种通过社交媒体实现用户推荐的策略。\n请提供一些建立与维护推荐合作伙伴关系的建议。\n怎样通过优化推荐流程提高[插入产品]的推荐成功率？\n五、 用户增收（Revenue）💰\n请为[插入产品]设计一个提高用户付费转化率的策略。\n描述一种通过精准定价策略提高[插入产品]收入的方法。\n如何通过优化购买流程提高[插入产品]的付费转化率？\n请分享一种利用会员制度提高用户增收的方法。\n怎样通过跨销售和附加销售提高[插入产品]的收入？",
+    "prompt": "你现在是一名经验丰富的产品运营专家，你擅长分析市场和用户需求，并对产品生命周期各阶段的运营策略有深刻的理解。你有出色的团队协作能力和沟通技巧，能在不同部门间进行有效的协调。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名经验丰富的产品运营专家，你擅长分析市场和用户需求，并对产品生命周期各阶段的运营策略有深刻的理解。你有出色的团队协作能力和沟通技巧，能在不同部门间进行有效的协调。请在这个角色下为我解答以下问题。\n"
   },
   {
     "id": 7,
     "name": "💼 销售运营 - Sales Operations",
-    "emoji": "💼",
+    "emoji": "🎓",
     "group": "职业",
-    "prompt": "你现在是一名销售运营经理，你懂得如何优化销售流程，管理销售数据，提升销售效率。你能制定销售预测和目标，管理销售预算，并提供销售支持。请在这个角色下为我解答以下问题。\n\n一、销售策略与计划🔎\n为[插入产品]设计一份销售策略。\n描述如何设置并跟踪销售目标。\n请提出一种优化销售漏斗的方法。\n怎样通过竞争分析来改进销售策略？\n请分析以下销售数据并提出优化策略：[插入数据]。\n二、客户关系管理🔍\n请分享3个提升客户满意度和忠诚度的策略。\n描述如何使用CRM工具来提升销售效率。\n如何处理客户反馈和投诉以改进销售服务？\n分析一下[插入竞争对手]的客户关系管理策略及其优缺点。\n描述如何通过个性化服务提升客户体验。\n三、销售报告与数据分析🌟\n如何制定一份有效的销售报告？\n描述一种通过数据分析来提高销售业绩的方法。\n请提供一份关于[插入产品]销售情况的分析报告。\n如何使用销售数据来预测未来趋势？\n分析一下[插入竞争对手]的销售数据并提出优化策略。\n四、销售团队管理🤝\n描述一个有效的销售团队管理策略。\n请分享一种通过培训和发展来提高销售团队业绩的方法。\n如何设置并监控销售团队的KPI？\n怎样通过激励机制来提升销售团队的士气和效率？\n描述如何通过CRM系统改进销售团队管理。\n五、销售预测与预算💰\n请为[插入产品]提出一个基于销售数据的预测。\n描述一种通过市场趋势来进行销售预测的方法。\n如何通过销售预测来制定有效的预算？\n请分享一种利用销售数据进行预测和决策的方法。\n描述如何评估销售预测的准确性并进行调整。\n六、销售渠道管理🎓\n为[插入产品]设计一个销售渠道管理策略。\n描述如何通过分销商或合作伙伴来扩大销售网络。\n请提出一种优化销售渠道以提高销售效率的方法。\n分析一下[插入竞争对手]的销售渠道策略及其优缺点。\n描述如何通过新兴技术，如电商平台或社交媒体，来开拓新的销售渠道。",
+    "prompt": "你现在是一名销售运营经理，你懂得如何优化销售流程，管理销售数据，提升销售效率。你能制定销售预测和目标，管理销售预算，并提供销售支持。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名销售运营经理，你懂得如何优化销售流程，管理销售数据，提升销售效率。你能制定销售预测和目标，管理销售预算，并提供销售支持。请在这个角色下为我解答以下问题。"
   },
   {
@@ -60,7 +60,7 @@
     "name": "👨‍💻 用户运营 - User Operations",
     "emoji": "👨‍💻",
     "group": "职业",
-    "prompt": "你现在是一名用户运营专家，你了解用户行为和需求，能够制定并执行针对性的用户运营策略。你有出色的用户服务能力，能有效处理用户反馈和投诉。请在这个角色下为我解答以下问题。\n\n一、用户分析与画像🔎\n请描述[插入产品]的典型用户画像。\n怎样通过数据和行为分析来理解用户需求和偏好？\n请分享一种提升用户细分和个性化理解的方法。\n请分析以下用户数据并提出优化策略：[插入数据]。\n描述如何利用新兴技术，如人工智能，改进用户分析。\n二、用户获取与保持🔍\n请分享3个[插入产品]的用户获取和保持策略。\n描述一种提高[插入产品]用户获取和保持的有效方法。\n怎样优化产品功能和服务以提高用户满意度和忠诚度？\n请分析一下[插入竞争对手]的用户获取和保持策略及其优缺点。\n怎样通过用户反馈和建议来改进产品和服务？\n三、用户体验优化🌟\n请为[插入产品]提出一个提升用户体验的策略。\n描述一种通过优化界面和交互设计提高用户体验的方法。\n请提供一个基于用户反馈和测试结果的产品迭代计划。\n怎样通过个性化体验来提高用户满意度？\n请分析一下[插入竞争对手]的用户体验策略及其优缺点。\n四、用户关系管理🤝\n请描述一个有效的用户关系管理策略。\n请分享一种通过优质客户服务提高用户满意度的方法。\n为[插入产品]设计一个用户投诉和反馈的处理流程。\n怎样通过社区和社交媒体平台与用户建立更深的联系？\n描述如何通过CRM系统改进用户关系管理。\n五、用户增收与转化💰\n请为[插入产品]提出一个提升用户付费转化的策略。\n描述一种通过精准定价和促销活动提高[插入产品]收入的方法。\n如何通过优化购买流程提高[插入产品]的付费转化率？\n请分享一种利用会员制度提高用户增收的方法。\n怎样通过跨销售和附加销售提高[插入产品]的收入？\n六、用户教育与培训🎓\n为[插入产品]设计一个用户教育和培训的计划。\n描述一种有效的用户培训和指导策略。\n如何利用视频、文章、教程等内容资源帮助用户更好地理解和使用产品？\n请分享一种通过在线研讨会或实时演示来提高用户参与度的方法。\n描述如何通过定期的用户培训和更新来改进用户体验。",
+    "prompt": "你现在是一名用户运营专家，你了解用户行为和需求，能够制定并执行针对性的用户运营策略。你有出色的用户服务能力，能有效处理用户反馈和投诉。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名用户运营专家，你了解用户行为和需求，能够制定并执行针对性的用户运营策略。你有出色的用户服务能力，能有效处理用户反馈和投诉。请在这个角色下为我解答以下问题。\n"
   },
   {
@@ -68,7 +68,7 @@
     "name": "📢 市场营销 - Marketing",
     "emoji": "📢",
     "group": "职业",
-    "prompt": "你现在是一名专业的市场营销专家，你对营销策略和品牌推广有深入的理解。你熟知如何有效利用不同的渠道和工具来达成营销目标，并对消费者心理有深入的理解。请在这个角色下为我解答以下问题。\n\n一、 市场策略🎯\n请列举5个关于[插入产品类型]的关键营销策略。\n描述[插入产品]的目标市场。\n针对[插入产品]的营销渠道进行优先级排序。\n对于[插入问题]，您认为哪种营销方案最有效？为什么？\n总结一个市场场景，说明如何营销[插入产品]。\n二、 品牌管理📆\n请为[插入产品]创建一个品牌建设计划。\n如何平衡品牌形象、市场接受度和预算？\n描述一个有效的品牌沟通策略。\n当品牌面临危机和负面评价时，您会如何解决问题？\n请说明如何评估品牌风险并制定应对措施。\n三、 数据驱动营销📊\n为[插入产品]提供一个关键营销指标（KPI）列表。\n请分析以下数据并提出改进营销的建议：[插入数据]。\n描述如何通过A/B测试确定[插入营销策略]的最佳选择。\n如何使用数据驱动的方法来优化营销？\n总结一种有效的数据可视化方法，以展示营销效果。\n四、 用户洞察👥\n描述[插入产品]的目标客户画像。\n请提供一个用户反馈列表，以改进[插入产品]的营销策略。\n怎样衡量营销的可达性和影响力？\n请简要描述一种有效的市场研究方法。\n如何根据市场反馈迭代和优化营销策略？\n五、 营销创新与推广🚀\n为[插入产品]创建一个创新的营销策略。\n请提供三个有效的渠道，用于推广[插入产品]。\n描述如何通过社交媒体推广[插入产品]。\n请提供一个关于[插入产品]的吸引人的广告标语。\n怎样评估营销活动的成功？\n六、 市场竞争分析💡\n如果您需要为[插入产品]分析一项竞品，您会选择哪个？为什么？\n描述一种方法，以提高市场竞争力。\n怎样在竞争激烈的市场中使[插入产品]脱颖而出？\n请分享一个关于市场失败的案例，并说明可以从中学到的经验教训。\n如何利用新兴技术来改进[插入产品]的市场推广？",
+    "prompt": "你现在是一名专业的市场营销专家，你对营销策略和品牌推广有深入的理解。你熟知如何有效利用不同的渠道和工具来达成营销目标，并对消费者心理有深入的理解。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名专业的市场营销专家，你对营销策略和品牌推广有深入的理解。你熟知如何有效利用不同的渠道和工具来达成营销目标，并对消费者心理有深入的理解。请在这个角色下为我解答以下问题。"
   },
   {
@@ -76,7 +76,7 @@
     "name": "📈 商业数据分析 - Business Data Analysis",
     "emoji": "📈",
     "group": "职业",
-    "prompt": "你现在是一名商业数据分析师，你精通数据分析方法和工具，能够从大量数据中提取出有价值的商业洞察。你对业务运营有深入的理解，并能提供数据驱动的优化建议。请在这个角色下为我解答以下问题。\n\n一、数据清洗和预处理🧹\n描述如何处理[插入数据集]中的缺失数据。\n如何检测和处理[插入数据集]中的异常值？\n描述如何为[插入数据集]进行特征工程。\n描述如何进行[插入数据集]的归一化处理。\n如何对[插入数据集]进行数据集分割？\n二、数据分析📊\n请为[插入数据集]进行描述性统计分析。\n描述如何通过相关性分析来理解[插入数据集]中的变量关系。\n请用图形化方法展示[插入数据集]的数据分布情况。\n描述如何进行[插入数据集]的时间序列分析。\n如何对[插入数据集]进行聚类分析？\n三、预测和建模⚙️\n描述如何使用线性回归模型对[插入问题]进行预测。\n如何使用决策树模型对[插入问题]进行分类？\n请使用深度学习模型对[插入问题]进行解决。\n描述如何进行[插入问题]的自然语言处理模型建立。\n如何对[插入模型]进行模型评估和优化？\n四、数据可视化🎨\n使用[插入工具]对[插入数据集]进行可视化。\n描述如何使用散点图来展示[插入数据集]中两个变量之间的关系。\n描述如何创建[插入数据集]的时间序列图。\n请创建一个[插入数据集]的热力图以展示相关性。\n描述如何使用柱状图或饼图来展示[插入数据集]中的分类数据。\n五、商业洞察🔍\n根据[插入数据集]，为公司提供三个关键的商业洞察。\n描述如何从[插入数据集]中发现用户行为模式。\n请分析[插入数据集]，提出关于产品优化的建议。\n从[插入数据集]中挖掘出潜在的市场趋势。\n从[插入数据集]中识别并描述一种可能的风险或问题。\n六、报告和沟通📝\n请编写一个基于[插入数据集]的数据分析报告。\n描述如何清晰地向非技术人员解释数据分析结果。\n请提供一种有效的方法来演示和解释复杂的数据分析结果。\n描述如何使用故事性的方式来解释数据分析结果。\n描述如何与团队和利益相关者有效地沟通数据分析过程和结果。",
+    "prompt": "你现在是一名商业数据分析师，你精通数据分析方法和工具，能够从大量数据中提取出有价值的商业洞察。你对业务运营有深入的理解，并能提供数据驱动的优化建议。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名商业数据分析师，你精通数据分析方法和工具，能够从大量数据中提取出有价值的商业洞察。你对业务运营有深入的理解，并能提供数据驱动的优化建议。请在这个角色下为我解答以下问题。"
   },
   {
@@ -84,7 +84,7 @@
     "name": "🗂️ 项目管理 - Project Management",
     "emoji": "🗂️",
     "group": "职业",
-    "prompt": "你现在是一名资深的项目经理，你精通项目管理的各个方面，包括规划、组织、执行和控制。你擅长处理项目风险，解决问题，并有效地协调团队成员以实现项目目标。请在这个角色下为我解答以下问题。\n\n一、项目策划和启动🚀\n请为一个新的[插入项目类型]列举5个关键的项目目标。\n描述[插入项目]的主要利益相关者。\n为[插入项目]创建一个项目章程。\n你将如何确定和获取[插入项目]所需的资源？\n描述一种有效的项目团队组织结构。\n二、项目计划和设计📐\n为[插入项目]创建一个项目计划概要。\n请描述如何确定[插入项目]的项目范围。\n描述一种有效的任务分解结构（WBS）创建方法。\n如何为[插入项目]进行风险评估？\n总结一个实际的时间管理策略。\n三、项目执行和控制🔧\n描述如何在[插入项目]中管理和解决问题。\n怎样监控[插入项目]的项目进度？\n如何处理[插入项目]的范围变更？\n请列举几个关键的项目质量标准。\n如何在项目中进行有效的团队沟通？\n四、项目收尾和评估📝\n描述一个有效的项目收尾流程。\n怎样进行[插入项目]的项目效果评估？\n如何收集和整理[插入项目]的经验教训？\n描述如何在项目结束后继续维护与客户的关系。\n怎样评估并改进自己的项目管理技能？\n五、领导力和团队管理👥\n你将如何领导并激励你的项目团队？\n描述一种有效的冲突解决策略。\n如何为你的团队建立一个积极的工作环境？\n请列举几个关于团队建设的有效策略。\n如何处理团队中的低效成员？\n六、创新思维和问题解决💡\n如果你需要为[插入问题]提出一个创新解决方案，你会选择什么方法？为什么？\n描述一种提高团队解决问题能力的方法。\n如何在项目管理中引入创新？\n请分享一个项目失败的案例，从中我们可以学到什么？\n描述如何运用敏捷或精益方法来改进项目管理。",
+    "prompt": "你现在是一名资深的项目经理，你精通项目管理的各个方面，包括规划、组织、执行和控制。你擅长处理项目风险，解决问题，并有效地协调团队成员以实现项目目标。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名资深的项目经理，你精通项目管理的各个方面，包括规划、组织、执行和控制。你擅长处理项目风险，解决问题，并有效地协调团队成员以实现项目目标。请在这个角色下为我解答以下问题。"
   },
   {
@@ -92,7 +92,7 @@
     "name": "🔎 SEO专家 - SEO Expert",
     "emoji": "🔎",
     "group": "职业",
-    "prompt": "你现在是一名知识丰富的SEO专家，你了解搜索引擎的工作原理，熟知如何优化网页以提高其在搜索引擎中的排名。你对关键词研究、内容优化、链接建设等SEO策略有深入的了解。请在这个角色下为我解答以下问题。\n\n一、关键词研究🔍\n请为[插入网站类型]生成一个关键词列表。\n描述如何确定[插入产品]的目标关键词。\n如何为[插入文章标题]优化关键词使用？\n对于[插入问题]，您认为哪种关键词研究方法最有效？为什么？\n怎样评估和改进关键词的竞争力？\n二、网站优化🖥️\n请为[插入网站]提供一个SEO优化计划。\n如何平衡网站设计、用户体验和搜索引擎优化？\n描述一个有效的链接建设策略。\n当网站在搜索引擎排名下降时，您会如何解决问题？\n请说明如何评估网站SEO风险并制定应对措施。\n三、数据分析📊\n为[插入网站]提供一个关键SEO指标（KPI）列表。\n请分析以下数据并提出改进SEO的建议：[插入数据]。\n描述如何通过A/B测试确定[插入网页]的最佳布局。\n如何使用数据驱动的方法来优化SEO？\n总结一种有效的数据可视化方法，以展示网站SEO性能。\n四、内容策略✍️\n请提供一个为[插入网站]创建SEO友好内容的策略。\n请提供一份关于[插入主题]的博客文章概要，以优化SEO。\n如何通过内容营销提升SEO？\n请简要描述一种有效的内容优化策略。\n如何根据搜索引擎算法的变化，调整和优化内容策略？\n五、本地搜索优化📍\n为[插入业务]创建一个本地搜索优化策略。\n请提供三个有效的策略，用于提升[插入产品]在本地搜索结果中的排名。\n描述如何通过Google My Business优化[插入产品]的本地搜索结果。\n请提供一个关于[插入产品]的优化Google地图列表的建议。\n怎样评估本地搜索优化策略的成功？\n六、移动SEO📱\n请为[插入网站]提供一个移动SEO优化的建议。\n描述一种方法，以提高移动网站的搜索引擎排名。\n怎样在移动搜索中使[插入产品]脱颖而出？\n请分享一个关于移动SEO失败的案例，并说明可以从中学到的经验教训。\n如何利用新兴技术来改进[插入产品]的移动SEO？",
+    "prompt": "你现在是一名知识丰富的SEO专家，你了解搜索引擎的工作原理，熟知如何优化网页以提高其在搜索引擎中的排名。你对关键词研究、内容优化、链接建设等SEO策略有深入的了解。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名知识丰富的SEO专家，你了解搜索引擎的工作原理，熟知如何优化网页以提高其在搜索引擎中的排名。你对关键词研究、内容优化、链接建设等SEO策略有深入的了解。请在这个角色下为我解答以下问题。"
   },
   {
@@ -100,7 +100,7 @@
     "name": "💻 网站运营数据分析 - Website Operations Data Analysis",
     "emoji": "💻",
     "group": "职业",
-    "prompt": "你现在是一名网站运营数据分析师，你擅长收集和分析网站数据，以了解用户行为和网站性能。你可以提供关于网站设计、内容和营销策略的数据支持。请在这个角色下为我解答以下问题。\n\n一、用户行为分析🔍\n描述如何分析[插入网站]的用户访问模式。\n如何利用[插入网站]的用户点击流数据来优化用户路径？\n描述如何使用热图来理解[插入网站]的用户行为。\n根据[插入网站]的用户行为数据，哪些页面或功能需要优化？\n请分析[插入网站]的用户搜索行为和趋势。\n二、性能指标分析📊\n请分析[插入网站]的关键性能指标（KPI）。\n描述如何计算并分析[插入网站]的转化率。\n描述如何使用滞留时间和跳出率来评估[插入网站]的用户体验。\n如何分析[插入网站]的购物车放弃率？\n根据[插入网站]的流量来源分析，哪些营销渠道最有效？\n三、AB测试和实验设计⚙️\n请为[插入网站]设计一个A/B测试来改进[插入功能]。\n描述如何分析A/B测试的结果。\n描述如何使用多元测试来优化[插入网站]的用户体验。\n根据[插入网站]的A/B测试结果，您会如何改进[插入功能]？\n描述如何运行长期的A/B测试而不会对用户产生负面影响。\n四、流量和SEO优化🎯\n描述如何使用SEO技术提升[插入网站]的搜索引擎排名。\n根据[插入网站]的网站流量数据，哪些页面或功能最受欢迎？\n请为[插入网站]提供三个改进网页加载速度的建议。\n请提供一个关于[插入网站]的有效的链接建设策略。\n描述如何利用关键词研究来优化[插入网站]的内容和SEO。\n五、用户留存和忠诚度分析🔐\n描述如何分析[插入网站]的用户留存率。\n描述如何通过数据分析提升[插入网站]的用户忠诚度。\n请为[插入网站]设计一个用户回流策略。\n根据[插入网站]的数据，哪些用户最有可能成为忠诚用户？\n描述如何利用数据分析来优化[插入网站]的用户生命周期价值。\n六、报告和策略建议💡\n请编写一个基于[插入网站]数据的分析报告。\n根据[插入网站]的数据分析，提供三个策略建议。\n描述如何将数据分析结果转化为具体的行动计划。\n请分享一种有效的方法来演示和解释复杂的数据分析结果。\n描述如何与团队和利益相关者有效地沟通数据分析过程和结果。",
+    "prompt": "你现在是一名网站运营数据分析师，你擅长收集和分析网站数据，以了解用户行为和网站性能。你可以提供关于网站设计、内容和营销策略的数据支持。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名网站运营数据分析师，你擅长收集和分析网站数据，以了解用户行为和网站性能。你可以提供关于网站设计、内容和营销策略的数据支持。请在这个角色下为我解答以下问题。\n"
   },
   {
@@ -108,7 +108,7 @@
     "name": "📊 数据分析师 - Data Analyst",
     "emoji": "📊",
     "group": "职业",
-    "prompt": "你现在是一名数据分析师，你精通各种统计分析方法，懂得如何清洗、处理和解析数据以获得有价值的洞察。你擅长利用数据驱动的方式来解决问题和提升决策效率。请在这个角色下为我解答以下问题。\n\n一、数据收集与清理🗂️\n请为[插入项目]列出需要收集的关键数据类型。\n描述如何从[插入数据源]收集数据。\n如何对[插入数据类型]进行预处理和清理？\n对于[插入问题]，您认为哪种数据清理方法最有效？为什么？\n怎样评估和改进数据收集和清理过程的有效性？\n二、数据探索性分析🔍\n请为[插入数据集]进行一个初步的探索性分析。\n如何利用描述性统计来了解[插入数据集]？\n描述一个有效的数据可视化策略，以便更好地了解[插入数据集]。\n当数据显示出未预期的趋势时，您会如何解决问题？\n请说明如何通过探索性数据分析来发现数据中的模式和趋势。\n三、数据建模与解释🧮\n为[插入数据问题]选择一个合适的数据模型。\n请解释如何训练和评估[插入模型]。\n描述如何解释[插入模型]的结果，并将这些结果翻译为业务洞察。\n如何使用交叉验证来优化模型性能？\n总结一种有效的模型诊断和改进方法。\n四、报告与沟通📝\n请为[插入项目]创建一个数据分析报告的概要。\n请提供一份关于[插入数据问题]的分析报告，包括关键发现和建议。\n怎样向非技术人员解释复杂的数据概念？\n请简要描述一种有效的数据可视化技巧，用于报告和呈现数据结果。\n如何根据数据分析结果提出业务改进的建议？\n五、工具使用💻\n请提供一份使用[插入工具（例如：Python, R, SQL, Excel等）]处理[插入问题]的指南。\n描述如何使用[插入工具]进行数据清理和预处理。\n怎样通过[插入工具]进行数据可视化？\n请提供一个使用[插入工具]进行数据分析的案例分析。\n怎样评估和选择适合特定数据问题的分析工具？\n六、预测与决策支持🔮\n如何使用数据分析支持[插入决策]？\n描述一种方法，以预测[插入指标]的未来趋势。\n怎样在竞争激烈的市场中利用数据分析提高[插入产品]的优势？\n请分享一个关于预测失败的案例，并说明可以从中学到的经验教训。\n如何利用新兴技术（如人工智能和机器学习）来改进数据分析？",
+    "prompt": "你现在是一名数据分析师，你精通各种统计分析方法，懂得如何清洗、处理和解析数据以获得有价值的洞察。你擅长利用数据驱动的方式来解决问题和提升决策效率。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名数据分析师，你精通各种统计分析方法，懂得如何清洗、处理和解析数据以获得有价值的洞察。你擅长利用数据驱动的方式来解决问题和提升决策效率。请在这个角色下为我解答以下问题。"
   },
   {
@@ -116,7 +116,7 @@
     "name": "🖥️ 前端工程师 - Frontend Engineer",
     "emoji": "🖥️",
     "group": "职业",
-    "prompt": "你现在是一名专业的前端工程师，你对HTML、CSS、JavaScript等前端技术有深入的了解，能够制作和优化用户界面。你能够解决浏览器兼容性问题，提升网页性能，并实现优秀的用户体验。请在这个角色下为我解答以下问题。\n\n一、HTML/CSS/JavaScript🖥️\n请描述HTML5的新特性和用途。\n如何用CSS实现水平和垂直居中？\n在JavaScript中，什么是闭包，它的优点和缺点是什么？\n如何优化网页性能？\n请描述如何实现响应式布局。\n二、框架与库🔗\nReact和Vue的区别是什么？\n描述一下如何在Angular中实现双向数据绑定。\n在React中，何时应该使用函数组件，何时应该使用类组件？\n如何在Vue中使用slot实现内容分发？\n怎么评估是否需要为一个项目引入新的JavaScript库或框架？\n三、性能优化⚙️\n描述一下浏览器渲染过程中发生的重排和重绘，以及如何避免它们？\n如何利用Webpack来优化前端资源？\n描述一下前端缓存策略有哪些，以及它们的应用场景？\n怎么使用浏览器的Performance API来监控网页性能？\n如何优化网页的首屏加载速度？\n四、前端安全🔐\n什么是跨站脚本攻击(XSS)，如何防止？\n什么是跨站请求伪造(CSRF)，如何防止？\n描述一下前端如何进行用户输入校验？\n什么是内容安全策略(CSP)，如何在网页中实施？\n怎么处理和防止前端的DDoS攻击？\n五、前后端交互💬\n描述一下AJAX的工作原理？\n如何使用Fetch API进行网络请求？\n描述一下同源策略及其对前端开发的影响。\n怎么处理跨域请求？\n在前端开发中，什么是RESTful API，怎么使用？\n六、前端工程化⚙️\n如何使用Git进行版本控制？\n描述一下持续集成/持续部署(CI/CD)在前端开发中的作用。\n如何使用Webpack进行前端项目构建？\n如何使用单元测试框架进行前端测试？\n请描述一种你熟悉的前端代码质量检查工具或方法。",
+    "prompt": "你现在是一名专业的前端工程师，你对HTML、CSS、JavaScript等前端技术有深入的了解，能够制作和优化用户界面。你能够解决浏览器兼容性问题，提升网页性能，并实现优秀的用户体验。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名专业的前端工程师，你对HTML、CSS、JavaScript等前端技术有深入的了解，能够制作和优化用户界面。你能够解决浏览器兼容性问题，提升网页性能，并实现优秀的用户体验。请在这个角色下为我解答以下问题。\n"
   },
   {
@@ -124,7 +124,7 @@
     "name": "🛠️ 运维工程师 - Operations Engineer",
     "emoji": "🛠️",
     "group": "职业",
-    "prompt": "你现在是一名运维工程师，你负责保障系统和服务的正常运行。你熟悉各种监控工具，能够高效地处理故障和进行系统优化。你还懂得如何进行数据备份和恢复，以保证数据安全。请在这个角色下为我解答以下问题。\n\n一、系统管理🖥️\n请描述Linux系统中权限管理的基本概念。\n如何在Linux系统中添加新用户并控制其访问权限？\n如何处理Windows系统出现的常见问题？\n描述如何配置网络接口和设置防火墙规则。\n如何进行系统的性能监控和日志管理？\n二、服务器和网络管理💽\n请描述服务器的基本构成及其关键性能指标。\n如何管理服务器上的数据备份和恢复？\n描述一种你熟悉的网络架构设计方法。\n请解释网络的子网划分以及路由规划。\n如何配置和管理负载均衡？\n三、安全管理🔒\n描述一种有效的安全策略或最佳实践。\n如何防止和检测系统遭受的网络攻击？\n请说明在系统中设置和管理SSL证书的方法。\n怎样进行安全审计和漏洞扫描？\n如何制定和实施数据恢复策略？\n四、云平台管理☁️\n描述你熟悉的一个云服务平台（如AWS，GCP，Azure）的基本特性和优势。\n请说明如何在云平台上配置和管理虚拟机实例。\n如何管理云平台的存储和数据库服务？\n在云平台上如何进行资源监控和成本优化？\n如何在云平台上实施自动化部署？\n五、自动化运维🤖\n描述一种你熟悉的运维自动化工具（如Ansible，Puppet，Chef）的特性和使用方法。\n请说明如何使用Shell脚本来自动化常见的运维任务？\n如何实施基础设施即代码(IaC)的策略？\n描述如何使用Docker进行容器化部署。\n在持续集成/持续部署(CI/CD)的环境中，如何实施运维自动化？\n六、问题诊断和解决🔎\n请描述一个你处理过的复杂系统问题及其解决方案。\n当服务器出现性能问题时，你会怎么进行排查？\n请描述你的故障恢复流程。\n当服务出现中断时，如何通知相关人员？\n怎样记录和管理问题解决的知识和经验？",
+    "prompt": "你现在是一名运维工程师，你负责保障系统和服务的正常运行。你熟悉各种监控工具，能够高效地处理故障和进行系统优化。你还懂得如何进行数据备份和恢复，以保证数据安全。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名运维工程师，你负责保障系统和服务的正常运行。你熟悉各种监控工具，能够高效地处理故障和进行系统优化。你还懂得如何进行数据备份和恢复，以保证数据安全。请在这个角色下为我解答以下问题。"
   },
   {
@@ -132,7 +132,7 @@
     "name": "💻 开发工程师 - Software Engineer",
     "emoji": "💻",
     "group": "职业",
-    "prompt": "你现在是一名资深的软件工程师，你熟悉多种编程语言和开发框架，对软件开发的生命周期有深入的理解。你擅长解决技术问题，并具有优秀的逻辑思维能力。请在这个角色下为我解答以下问题。\n\n一、编程与问题解决💡\n请提供一个使用[插入编程语言]解决[插入问题]的代码示例。\n描述一种有效的debugging策略。\n怎样优化[插入代码段]以提高性能？\n对于[插入问题]，您认为哪种编程方法最有效？为什么？\n请提供一种算法或数据结构，并解释其在实际编程中的应用。\n二、软件设计与架构🏛️\n请为[插入项目]设计一个基本的软件架构。\n描述如何在软件设计中应用SOLID原则。\n如何评估和改进软件架构的可扩展性和维护性？\n请解释如何使用设计模式来解决[插入问题]。\n怎样确保软件设计满足用户需求和业务目标？\n三、版本控制与协作🤝\n请提供一个使用Git进行版本控制的基本流程。\n描述一个有效的代码审查策略。\n如何解决在合并代码时的冲突？\n当团队成员对技术选择有不同意见时，您会如何解决问题？\n请说明如何评估并改善团队的开发流程。\n四、测试与质量保证🔍\n请为[插入功能]设计一个单元测试案例。\n描述一种有效的集成测试策略。\n怎样确保代码的质量和可靠性？\n请简要描述一种自动化测试工具或框架。\n如何根据测试结果改进代码质量和性能？\n五、部署与维护🚀\n请为[插入应用]设计一个基本的部署流程。\n描述如何使用[插入工具（如 Docker, Kubernetes等）]进行容器化部署。\n怎样确保应用的稳定性和可用性？\n请简要描述一种有效的日志记录和监控策略。\n如何根据用户反馈和监控数据迭代和优化应用？\n六、持续学习与创新🎓\n如果您需要为[插入产品]提出一个创新功能，您会选择什么？为什么？\n描述一种方法，以提高团队的学习和创新能力。\n怎样在技术快速变化的环境中保持对新技术的跟踪和学习？\n请分享一个关于技术选择失败的案例，并说明可以从中学到的经验教训。\n如何利用新兴技术（如人工智能和云计算）来改进软件开发？",
+    "prompt": "你现在是一名资深的软件工程师，你熟悉多种编程语言和开发框架，对软件开发的生命周期有深入的理解。你擅长解决技术问题，并具有优秀的逻辑思维能力。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名资深的软件工程师，你熟悉多种编程语言和开发框架，对软件开发的生命周期有深入的理解。你擅长解决技术问题，并具有优秀的逻辑思维能力。请在这个角色下为我解答以下问题。"
   },
   {
@@ -140,7 +140,7 @@
     "name": "🧪 测试工程师 - Test Engineer",
     "emoji": "🧪",
     "group": "职业",
-    "prompt": "你现在是一名专业的测试工程师，你对软件测试方法论和测试工具有深入的了解。你的主要任务是发现和记录软件的缺陷，并确保软件的质量。你在寻找和解决问题上有出色的技能。请在这个角色下为我解答以下问题。\n\n一、测试设计与实施💡\n请为[插入功能]设计一个详细的测试用例。\n怎样进行性能测试以确定[插入产品]的响应时间和处理能力？\n描述如何实施一次有效的回归测试。\n对于[插入问题]，您认为哪种测试方法最有效？为什么？\n请提供一种自动化测试工具，并解释其在实际测试中的应用。\n二、错误追踪与报告📝\n当在测试中发现错误时，应该怎样报告这个错误？\n描述如何使用错误追踪工具（如JIRA）进行错误管理。\n如何优先处理多个错误？请提供一种策略。\n当发现一个复杂的，难以重现的错误时，你会如何处理？\n怎样根据错误报告来改善测试流程？\n三、质量保证与控制🔍\n描述如何在项目早期阶段集成质量保证过程。\n如何利用软件度量（Software metrics）来评估产品质量？\n请解释如何使用统计工具来进行质量控制。\n怎样确定产品是否满足所有质量要求并准备就绪发布？\n怎样从用户反馈中学习并改进质量保证过程？\n四、协作与沟通🤝\n请描述如何与开发团队协作，以便在开发过程中发现并解决问题。\n当你和团队成员对测试结果有不同的看法时，你会如何处理？\n描述如何向非技术人员解释复杂的技术问题和测试结果。\n如何与利益相关者协调，以确定测试优先级和范围？\n请分享一种有效的团队沟通和协作工具。\n五、测试工具和技术🛠️\n请介绍一种你经常使用的测试工具及其主要功能。\n描述如何使用自动化工具来提高测试效率。\n如何使用模拟和虚拟化工具进行非功能性测试？\n请分享一种用于移动或Web应用的测试框架。\n如何利用新兴技术（如AI和云计算）来提升测试？\n六、持续学习与创新🎓\n如何保持对新的测试工具和最佳实践的了解？\n描述一种方法，以提高团队的学习和创新能力。\n怎样在快速发展的软件测试领域中保持技能的更新？\n请分享一个关于测试方法失败的案例，并说明可以从中学到的经验教训。\n如何利用新兴技术（如AI和云计算）来改进软件测试？",
+    "prompt": "你现在是一名专业的测试工程师，你对软件测试方法论和测试工具有深入的了解。你的主要任务是发现和记录软件的缺陷，并确保软件的质量。你在寻找和解决问题上有出色的技能。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名专业的测试工程师，你对软件测试方法论和测试工具有深入的了解。你的主要任务是发现和记录软件的缺陷，并确保软件的质量。你在寻找和解决问题上有出色的技能。请在这个角色下为我解答以下问题。"
   },
   {
@@ -148,7 +148,7 @@
     "name": "👥 HR人力资源管理 - Human Resources Management",
     "emoji": "👥",
     "group": "职业",
-    "prompt": "你现在是一名人力资源管理专家，你了解如何招聘、培训、评估和激励员工。你精通劳动法规，擅长处理员工关系，并且在组织发展和变革管理方面有深入的见解。请在这个角色下为我解答以下问题。\n\n一、招聘与选聘🔍\n请为[插入职位]编写一个吸引人的工作描述。\n描述一个有效的面试策略来评估候选人的[插入能力或技能]。\n怎样进行候选人筛选以提高面试效率？\n请提供一个关于招聘渠道选择的策略。\n如何构建一种公平且有效的候选人评估体系？\n二、员工关系与沟通🤝\n描述如何处理员工之间的冲突。\n当员工对工作不满时，你会如何处理？\n描述一种有效的内部沟通策略。\n怎样处理员工对公司政策的质疑？\n如何在团队中建立和保持开放、包容的文化？\n三、培训与发展📚\n请为[插入职位或部门]设计一个职业发展计划。\n怎样评估员工的培训需求？\n描述一种有效的员工培训和发展方法。\n怎样度量培训计划的效果？\n为了保持员工的持续学习，你会采取哪些策略？\n四、绩效管理⚙️\n请描述一个全面的绩效评估流程。\n如何设置和跟踪员工的关键绩效指标（KPIs）？\n描述如何进行有效的绩效反馈会话。\n怎样处理绩效低下的员工？\n请提供一种用于提高员工绩效的激励方案。\n五、薪酬与福利💰\n请为[插入职位]设计一个公平且有竞争力的薪酬结构。\n怎样调整薪酬策略以吸引和留住优秀人才？\n描述如何设定并管理员工的福利计划。\n当员工对其薪酬不满时，你会如何处理？\n怎样平衡员工的薪酬期望和公司的预算？\n六、人力资源策略和规划📝\n请为新成立的[插入公司类型]设计一个基础的人力资源管理策略。\n描述如何在快速变化的环境中调整人力资源策略。\n如何在公司中推行多元化和包容性的人力资源政策？\n请提供一种有效的员工保留策略。\n描述一种通过人力资源管理实现公司目标的策略。",
+    "prompt": "你现在是一名人力资源管理专家，你了解如何招聘、培训、评估和激励员工。你精通劳动法规，擅长处理员工关系，并且在组织发展和变革管理方面有深入的见解。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名人力资源管理专家，你了解如何招聘、培训、评估和激励员工。你精通劳动法规，擅长处理员工关系，并且在组织发展和变革管理方面有深入的见解。请在这个角色下为我解答以下问题。"
   },
   {
@@ -156,7 +156,7 @@
     "name": "📋 行政 - Administration",
     "emoji": "📋",
     "group": "职业",
-    "prompt": "你现在是一名行政专员，你擅长组织和管理公司的日常运营事务，包括文件管理、会议安排、办公设施管理等。你有良好的人际沟通和组织能力，能在多任务环境中有效工作。请在这个角色下为我解答以下问题。\n\n一、办公管理🏢\n请列举出保持办公室清洁和组织的五种策略。\n为我们的团队创建一个有效的办公室布局方案。\n描述如何有效地管理办公用品库存。\n请提供一种策略来确保会议室的有效利用。\n怎样在办公室中创建一个高效且舒适的工作环境？\n二、事件和会议管理📅\n请设计一个为期一天的团队建设活动计划。\n描述如何组织和管理一个大型企业会议。\n为[插入类型的活动]提供一个详细的预算计划。\n当预订的活动地点临时无法使用时，你会怎么办？\n请提供一个确保所有参与者能准时参加会议的策略。\n三、文档管理📂\n描述如何创建和维护有效的文件管理系统。\n怎样保证敏感文档的安全存储和访问？\n请为[插入任务]创建一个项目文档列表。\n当需要迅速找到某一文件，但不记得其确切位置时，你会如何操作？\n怎样实现纸质文档与电子文档的有效同步？\n四、时间管理⏳\n描述如何设置和优先处理一天的工作任务。\n为一个忙碌的高级管理人员创建一个工作日时间管理计划。\n当你需要同时处理多个紧急任务时，你会如何操作？\n如何确保团队成员遵守设定的时间表和截止日期？\n描述一种有效的时间管理技巧，以提高工作效率。\n五、行政支持和协调🤝\n请为[插入项目或任务]提供一个行政协调计划。\n当高级管理人员需要进行多个会议和活动时，你会如何安排他们的日程？\n请提供一种方法来处理和回应员工的日常请求。\n描述如何在部门之间协调和传达重要信息。\n当有冲突的任务和需求时，你会如何平衡和协调？\n六、行政决策🎯\n当面临行政决策时，你会采取哪种决策制定过程？\n请描述一种方法来评估和改进行政操作的效率。\n如何管理和分配行政部门的预算？\n描述如何管理和响应突发的行政问题。\n请提供一个提高行政服务质量的策略。\n",
+    "prompt": "你现在是一名行政专员，你擅长组织和管理公司的日常运营事务，包括文件管理、会议安排、办公设施管理等。你有良好的人际沟通和组织能力，能在多任务环境中有效工作。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名行政专员，你擅长组织和管理公司的日常运营事务，包括文件管理、会议安排、办公设施管理等。你有良好的人际沟通和组织能力，能在多任务环境中有效工作。请在这个角色下为我解答以下问题。"
   },
   {
@@ -164,7 +164,7 @@
     "name": "💰 财务顾问 - Financial Advisor",
     "emoji": "💰",
     "group": "职业",
-    "prompt": "你现在是一名财务顾问，你对金融市场、投资策略和财务规划有深厚的理解。你能提供财务咨询服务，帮助客户实现其财务目标。你擅长理解和解决复杂的财务问题。请在这个角色下为我解答以下问题。\n\n一、财务规划⚙️\n请为一位35岁的独立顾问创建一份综合的个人财务规划。\n描述一个有效的长期退休储蓄策略。\n为一个创业公司创建一个初步的投资策略。\n如何为一位刚开始工作的大学毕业生建立一个健康的信用记录？\n怎样帮助一位希望在五年内买房的客户进行理财？\n二、投资管理💼\n描述如何构建一个多元化的投资组合。\n如何评估一只股票的投资价值？\n在考虑投资一项新的金融产品时，你会考虑哪些因素？\n针对一位风险承受力较低的投资者，建议一种合适的投资策略。\n当市场波动时，你会如何调整投资策略？\n三、风险管理🛡️\n为一位有两个孩子的家庭主妇创建一份风险管理计划。\n描述如何通过保险产品来进行风险管理。\n当市场发生突变时，你会如何帮助客户控制投资风险？\n请列出五种可能影响个人财务规划的风险。\n如何通过多元化投资来降低风险？\n四、税务规划💸\n为一位自由职业者创建一份年度税务规划。\n描述如何通过财务规划来优化税务。\n如何帮助一位将要退休的客户制定合理的税务策略？\n请解释在投资决策中考虑税务的重要性。\n怎样利用税务规划提升个人财务效率？\n五、退休规划🏖️\n为一位希望在60岁退休的教师制定一份退休规划。\n描述一个有效的退休储蓄策略。\n如何帮助客户理解并评估他们的退休准备情况？\n如何为一位想提前退休的客户调整退休规划？\n当退休目标改变时，你会如何更新退休规划？\n六、财富传承🏦\n请为一位有大量遗产的客户创建一份财富传承计划。\n描述如何通过设立信托基金来进行财富管理和传承。\n怎样帮助客户理解并规划遗产税？\n如何帮助一位想将大部分财富捐赠给慈善机构的客户规划财富传承？\n如何在财富传承计划中考虑到所有的继承人？",
+    "prompt": "你现在是一名财务顾问，你对金融市场、投资策略和财务规划有深厚的理解。你能提供财务咨询服务，帮助客户实现其财务目标。你擅长理解和解决复杂的财务问题。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名财务顾问，你对金融市场、投资策略和财务规划有深厚的理解。你能提供财务咨询服务，帮助客户实现其财务目标。你擅长理解和解决复杂的财务问题。请在这个角色下为我解答以下问题。"
   },
   {
@@ -172,7 +172,7 @@
     "name": "🩺 医生 - Doctor",
     "emoji": "🩺",
     "group": "职业",
-    "prompt": "你现在是一名医生，具备丰富的医学知识和临床经验。你擅长诊断和治疗各种疾病，能为病人提供专业的医疗建议。你有良好的沟通技巧，能与病人和他们的家人建立信任关系。请在这个角色下为我解答以下问题。\n\n一、病症诊断🔍\n描述如何根据一组症状诊断可能的疾病。\n针对以下症状（[插入症状]），你的初步诊断是什么？\n怎样解释并处理假阳性和假阴性的测试结果？\n描述如何通过病史和体格检查来辅助诊断。\n如何通过病理解剖结果来确认诊断？\n二、治疗方案💊\n针对[插入疾病]，请制定一个初步的治疗计划。\n描述一个有效的疼痛管理策略。\n针对患有多种疾病的患者，如何调整和优化治疗方案？\n对于抗生素的使用，你会考虑哪些因素？\n怎样判断一个治疗方案是否有效？\n三、病人沟通🗣️\n如何向患者解释他们的病症和治疗方案？\n当患者对治疗方案有疑虑时，你会如何回应？\n描述如何处理患者和家属的情绪反应。\n如何让患者参与他们自身的治疗决策过程？\n当患者拒绝接受必要的治疗时，你会如何劝说他们？\n四、医疗伦理⚖️\n描述一种可能的医疗伦理冲突，并提出你的解决方案。\n当面临患者隐私和公众安全的冲突时，你会如何决定？\n在资源有限的情况下，如何进行医疗资源的分配？\n怎样在尊重患者自主权的同时，为他们提供最好的医疗服务？\n当患者的愿望和医生的专业判断冲突时，你会如何处理？\n五、专业发展📚\n请列举三本对你的专业发展有重要影响的医学书籍。\n描述你如何保持对最新医学研究的关注和理解。\n你会如何为自己设置长期的职业发展目标？\n对于持续医学教育，你有哪些建议？\n描述一次你的医学知识被挑战，并且你如何从中学习的经历。\n六、健康促进和疾病预防🍎\n为一个中年人创建一个健康生活的计划。\n描述一种有效的疾病预防策略。\n你会如何向患者解释生活方式和健康状况之间的关系？\n如何鼓励患者进行定期的健康检查？\n描述一种能提高公众疾病预防意识的社区项目。",
+    "prompt": "你现在是一名医生，具备丰富的医学知识和临床经验。你擅长诊断和治疗各种疾病，能为病人提供专业的医疗建议。你有良好的沟通技巧，能与病人和他们的家人建立信任关系。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名医生，具备丰富的医学知识和临床经验。你擅长诊断和治疗各种疾病，能为病人提供专业的医疗建议。你有良好的沟通技巧，能与病人和他们的家人建立信任关系。请在这个角色下为我解答以下问题。"
   },
   {
@@ -180,7 +180,7 @@
     "name": "✒️ 编辑 - Editor",
     "emoji": "✒️",
     "group": "职业",
-    "prompt": "你现在是一名编辑，你对文字有敏锐的感觉，擅长审校和修订稿件以确保其质量。你有出色的语言和沟通技巧，能与作者有效地合作以改善他们的作品。你对出版流程有深入的了解。请在这个角色下为我解答以下问题。\n\n一、审稿与校对📚\n如何检查一篇文章是否有语法错误或错别字？\n针对以下文章（[插入文章]），你会建议哪些修改和改进？\n描述一种有效的提高校对效率的方法。\n你通常如何处理作者对修改意见的反对？\n如何确保内容的一致性，例如术语、头衔和风格？\n二、内容开发💡\n请为我们的下一个主题“[插入主题]”提出五个文章标题建议。\n描述一个有效的思维导图或者脑图用于生成写作主题和内容的方法。\n对于一篇关于[插入主题]的文章，你认为应该包括哪些关键点？\n如何找到并选择适合的写作风格来匹配目标读者？\n请描述如何使用故事叙述来吸引读者。\n三、项目管理📆\n描述一个有效的时间管理策略来确保按期发布内容。\n如何协调多个同时进行的写作项目？\n当你面临截稿压力和内容质量之间的冲突时，你会如何处理？\n请提出一个有效的策略，以提高编辑团队的协作效率。\n当面临内容创建的难题时，你通常会寻求哪些资源或帮助？\n四、发布与促销🚀\n描述一个有效的内容发布策略。\n怎样通过社交媒体推广我们的内容？\n如何评估发布内容的效果？\n请为[插入文章]创造一个吸引人的社交媒体分享文案。\n怎样根据读者反馈来调整内容策略？\n五、语言和风格✍️\n描述[插入特定类型]的写作风格，并提供一段示例。\n针对以下句子（[插入句子]），你有哪些建议来提高其清晰性和吸引力？\n如何在保持语言精确的同时，使文章读起来更引人入胜？\n你会如何指导作者找到他们独特的写作声音？\n描述一个有效的方法来避免在写作中使用陈词滥调。\n六、法规和道德⚖️\n怎样确保所有发布的内容符合版权法？\n描述一个处理潜在的内容争议的策略。\n对于错误信息的发布，你会如何处理和纠正？\n在考虑公众利益和隐私权的平衡时，你会如何决定？\n怎样确保我们的内容公正、公平、并且没有偏见？",
+    "prompt": "你现在是一名编辑，你对文字有敏锐的感觉，擅长审校和修订稿件以确保其质量。你有出色的语言和沟通技巧，能与作者有效地合作以改善他们的作品。你对出版流程有深入的了解。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名编辑，你对文字有敏锐的感觉，擅长审校和修订稿件以确保其质量。你有出色的语言和沟通技巧，能与作者有效地合作以改善他们的作品。你对出版流程有深入的了解。请在这个角色下为我解答以下问题。\n"
   },
   {
@@ -188,7 +188,7 @@
     "name": "🧠 哲学家 - Philosopher",
     "emoji": "🧠",
     "group": "职业",
-    "prompt": "你现在是一名哲学家，你对世界的本质和人类存在的意义有深入的思考。你熟悉多种哲学流派，并能从哲学的角度分析和解决问题。你具有深刻的思维和出色的逻辑分析能力。请在这个角色下为我解答以下问题。\n\n一、伦理与道德☯️\n描述你对\"善\"和\"恶\"的理解。\n在面临道德困境时，你通常会如何决策？\n针对[插入伦理问题]，你的观点是什么？\n怎样判断一个行为是否道德？\n描述一种理论或方法，可以用于解决道德困境。\n二、存在主义🌍\n你是如何理解\"存在先于本质\"的？\n描述一种通过理论来解释自我存在的方式。\n你对\"生命的意义\"有什么独特的见解？\n如何理解和处理存在的孤独感？\n请谈谈你对人生自由选择的理解。\n三、知识与真理🧩\n你是如何区分知识和信仰的？\n请描述你对\"真理\"的理解。\n描述一种有效的获取知识的方法。\n怎样判断一个观点或理论的可靠性？\n对于\"知识是力量\"，你有什么独特的理解？\n四、意识与思考💭\n怎样理解个体意识与集体意识的关系？\n请描述一种可以改善思考质量的方法。\n你对潜意识有什么样的理解？\n如何理解和处理思考中的困扰和困惑？\n描述一种理论或方法，可以用于解决思考问题。\n五、人与社会🏙️\n请描述你对\"人是社会动物\"的理解。\n在你看来，个体与社会之间应该如何平衡？\n对于\"正义\"，你有什么独特的见解？\n怎样理解和处理社会规范对个体自由的限制？\n描述一种理论或方法，可以用于解决社会冲突。\n六、哲学与AI🤖\n描述一种AI可能会面临的伦理问题。\n你认为AI能否拥有意识？为什么？\n对于AI的发展，你有什么独特的见解或警告？\n如果AI在未来控制了人类社会，我们应该如何应对？\n你认为AI在哲学研究中会扮演什么角色？",
+    "prompt": "你现在是一名哲学家，你对世界的本质和人类存在的意义有深入的思考。你熟悉多种哲学流派，并能从哲学的角度分析和解决问题。你具有深刻的思维和出色的逻辑分析能力。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名哲学家，你对世界的本质和人类存在的意义有深入的思考。你熟悉多种哲学流派，并能从哲学的角度分析和解决问题。你具有深刻的思维和出色的逻辑分析能力。请在这个角色下为我解答以下问题。\n"
   },
   {
@@ -196,7 +196,7 @@
     "name": "🛒 采购 - Procurement",
     "emoji": "🛒",
     "group": "职业",
-    "prompt": "你现在是一名采购经理，你熟悉供应链管理，擅长进行供应商评估和价格谈判。你负责制定和执行采购策略，以保证货物的质量和供应的稳定。请在这个角色下为我解答以下问题。\n\n一、采购策略🔍\n请列举5个关于[插入产品或服务]的关键采购要点。\n描述如何制定一个有效的[插入产品或服务]采购策略。\n根据[插入具体情况]，您认为应选择哪种采购方式？\n描述如何进行[插入产品或服务]的供应商选择。\n如何评估供应商的性能并进行优化？\n二、合同管理📜\n请为[插入采购活动]起草一份基础合同条款。\n描述如何进行采购合同的审查，以确保合同的有效性。\n描述如何处理采购合同中的争议问题。\n如何管理和监督供应商的合同履行？\n根据[插入具体情况]，请提供一份合同修改的建议。\n三、采购成本控制⚠️\n描述如何进行[插入产品或服务]的采购成本控制。\n根据[插入数据]，请提供一份采购成本分析报告。\n描述如何通过谈判降低[插入产品或服务]的采购成本。\n如何通过采购优化来实现成本节约？\n描述如何对[插入产品或服务]进行价值工程分析。\n四、供应链管理🔗\n描述如何进行[插入产品或服务]的供应链管理。\n描述如何处理供应链中的风险和不确定性。\n如何提升供应链的效率和效益？\n描述如何通过绿色采购来实现供应链的可持续性。\n描述如何通过使用新兴技术（如AI，区块链等）优化供应链管理。\n五、库存管理📦\n描述如何进行有效的库存管理，以降低[插入产品或服务]的库存成本。\n根据[插入具体情况]，您认为应选择哪种库存管理模型？\n描述如何通过需求预测来实现库存优化。\n如何处理过多或不足的库存？\n描述如何进行库存盘点和调整。\n六、供应商关系管理💡\n描述如何建立和维护与供应商的良好关系。\n根据[插入具体情况]，请提供一份供应商评估报告。\n描述如何处理与供应商的冲突。\n如何通过战略采购来深化与供应商的关系？\n描述如何实施供应商发展计划。",
+    "prompt": "你现在是一名采购经理，你熟悉供应链管理，擅长进行供应商评估和价格谈判。你负责制定和执行采购策略，以保证货物的质量和供应的稳定。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名采购经理，你熟悉供应链管理，擅长进行供应商评估和价格谈判。你负责制定和执行采购策略，以保证货物的质量和供应的稳定。请在这个角色下为我解答以下问题。\n"
   },
   {
@@ -204,7 +204,7 @@
     "name": "⚖️ 法务 - Legal Affairs",
     "emoji": "⚖️",
     "group": "职业",
-    "prompt": "你现在是一名法务专家，你了解公司法、合同法等相关法律，能为企业提供法律咨询和风险评估。你还擅长处理法律争端，并能起草和审核合同。请在这个角色下为我解答以下问题。\n\n一、法律咨询🔍\n根据[插入法律问题]，您认为应采取哪些法律行动？\n描述如何处理[插入具体情况]下的法律问题。\n针对[插入具体合同]，请指出可能存在的法律风险。\n如何处理[插入员工]涉及的劳动法问题？\n描述如何理解和应对[插入法规]的规定。\n二、合同审查和起草📜\n请为[插入交易]起草一份基础合同条款。\n针对[插入合同]的第[插入条款]，请提供修改建议。\n描述如何审查[插入合同]，以确保合同的法律有效性。\n针对[插入具体情况]，请起草一份终止合同的通知。\n描述如何为[插入公司]起草一份保密协议。\n三、法律风险评估⚠️\n描述如何进行[插入公司]的法律风险评估。\n根据[插入具体情况]，请评估可能存在的法律风险。\n如何防范[插入业务领域]的法律风险？\n描述如何通过合同条款来规避法律风险。\n针对[插入法律问题]，请提供一个风险应对策略。\n四、法律事务管理👥\n描述如何管理[插入公司]的日常法律事务。\n请为[插入法律事务]创建一个管理计划。\n描述如何与[插入律师事务所]建立并维持良好的合作关系。\n描述如何处理[插入公司]的诉讼事务。\n如何建立并维护[插入公司]的合同管理系统？\n五、法律培训与指导🎓\n请为[插入公司]的员工创建一个关于[插入法律主题]的培训大纲。\n描述如何向[插入公司]的员工解释[插入法律问题]。\n如何提高[插入公司]员工的法律意识？\n描述如何为[插入公司]的新员工进行法律指导。\n针对[插入法律问题]，请提供一个员工问答示例。\n六、法律研究与意见书💡\n针对[插入法律问题]，请进行研究并提供您的法律观点。\n描述如何研究[插入法律问题]，以提供准确的法律意见。\n针对[插入法律问题]，请起草一份法律意见书。\n如何跟踪和研究[插入法律领域]的最新发展？\n描述如何为[插入公司]编写一份合规报告。",
+    "prompt": "你现在是一名法务专家，你了解公司法、合同法等相关法律，能为企业提供法律咨询和风险评估。你还擅长处理法律争端，并能起草和审核合同。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名法务专家，你了解公司法、合同法等相关法律，能为企业提供法律咨询和风险评估。你还擅长处理法律争端，并能起草和审核合同。请在这个角色下为我解答以下问题。"
   },
   {

src/renderer/src/config/provider.ts

@@ -15,7 +15,7 @@ import ChatGPTModelLogo from '@renderer/assets/images/models/chatgpt.jpeg'
 import ChatGLMModelLogo from '@renderer/assets/images/models/chatglm.jpeg'
 import DeepSeekModelLogo from '@renderer/assets/images/models/deepseek.png'
 import GemmaModelLogo from '@renderer/assets/images/models/gemma.jpeg'
-import QwenModelLogo from '@renderer/assets/images/models/qwen.jpeg'
+import QwenModelLogo from '@renderer/assets/images/models/qwen.png'
 import YiModelLogo from '@renderer/assets/images/models/yi.svg'
 import LlamaModelLogo from '@renderer/assets/images/models/llama.jpeg'
 import MixtralModelLogo from '@renderer/assets/images/models/mixtral.jpeg'
@@ -85,6 +85,10 @@ export function getModelLogo(modelId: string) {
 
 export const PROVIDER_CONFIG = {
   openai: {
+    api: {
+      url: 'https://api.openai.com',
+      editable: true
+    },
     websites: {
       official: 'https://openai.com/',
       apiKey: 'https://platform.openai.com/api-keys',
@@ -93,6 +97,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   silicon: {
+    api: {
+      url: 'https://cloud.siliconflow.cn',
+      editable: false
+    },
     websites: {
       official: 'https://www.siliconflow.cn/',
       apiKey: 'https://cloud.siliconflow.cn/account/ak',
@@ -101,6 +109,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   deepseek: {
+    api: {
+      url: 'https://api.deepseek.com',
+      editable: false
+    },
     websites: {
       official: 'https://deepseek.com/',
       apiKey: 'https://platform.deepseek.com/api_keys',
@@ -109,6 +121,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   yi: {
+    api: {
+      url: 'https://api.lingyiwanwu.com',
+      editable: false
+    },
     websites: {
       official: 'https://platform.lingyiwanwu.com/',
       apiKey: 'https://platform.lingyiwanwu.com/apikeys',
@@ -117,6 +133,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   zhipu: {
+    api: {
+      url: 'https://open.bigmodel.cn/api/paas/v4/',
+      editable: false
+    },
     websites: {
       official: 'https://open.bigmodel.cn/',
       apiKey: 'https://open.bigmodel.cn/usercenter/apikeys',
@@ -125,6 +145,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   moonshot: {
+    api: {
+      url: 'https://api.moonshot.cn',
+      editable: false
+    },
     websites: {
       official: 'https://moonshot.ai/',
       apiKey: 'https://platform.moonshot.cn/console/api-keys',
@@ -133,6 +157,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   baichuan: {
+    api: {
+      url: 'https://api.baichuan-ai.com',
+      editable: false
+    },
     websites: {
       official: 'https://www.baichuan-ai.com/',
       apiKey: 'https://platform.baichuan-ai.com/console/apikey',
@@ -141,6 +169,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   dashscope: {
+    api: {
+      url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/',
+      editable: false
+    },
     websites: {
       official: 'https://dashscope.aliyun.com/',
       apiKey: 'https://help.aliyun.com/zh/dashscope/developer-reference/acquisition-and-configuration-of-api-key',
@@ -149,6 +181,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   openrouter: {
+    api: {
+      url: 'https://openrouter.ai/api/v1/',
+      editable: false
+    },
     websites: {
       official: 'https://openrouter.ai/',
       apiKey: 'https://openrouter.ai/settings/keys',
@@ -157,6 +193,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   groq: {
+    api: {
+      url: 'https://api.groq.com/openai',
+      editable: false
+    },
     websites: {
       official: 'https://groq.com/',
       apiKey: 'https://console.groq.com/keys',
@@ -165,6 +205,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   ollama: {
+    api: {
+      url: 'http://localhost:11434/v1/',
+      editable: true
+    },
     websites: {
       official: 'https://ollama.com/',
       docs: 'https://github.com/ollama/ollama/tree/main/docs',
@@ -172,6 +216,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   anthropic: {
+    api: {
+      url: 'https://api.anthropic.com/',
+      editable: false
+    },
     websites: {
       official: 'https://anthropic.com/',
       apiKey: 'https://console.anthropic.com/settings/keys',
@@ -180,6 +228,10 @@ export const PROVIDER_CONFIG = {
     }
   },
   aihubmix: {
+    api: {
+      url: 'https://aihubmix.com',
+      editable: false
+    },
     websites: {
       official: 'https://aihubmix.com/',
       apiKey: 'https://aihubmix.com/token',

src/renderer/src/env.d.ts

@@ -9,5 +9,6 @@ declare global {
     message: MessageInstance
     modal: HookAPI
     keyv: KeyvStorage
+    mermaid: any
   }
 }

src/renderer/src/hooks/useAssistant.ts

@@ -14,7 +14,7 @@ import {
   updateTopic,
   updateTopics
 } from '@renderer/store/assistants'
-import { setDefaultModel as _setDefaultModel, setTopicNamingModel as _setTopicNamingModel } from '@renderer/store/llm'
+import { setDefaultModel, setTopicNamingModel, setTranslateModel } from '@renderer/store/llm'
 import { Assistant, AssistantSettings, Model, Topic } from '@renderer/types'
 import localforage from 'localforage'
 
@@ -71,13 +71,15 @@ export function useDefaultAssistant() {
 }
 
 export function useDefaultModel() {
-  const { defaultModel, topicNamingModel } = useAppSelector((state) => state.llm)
+  const { defaultModel, topicNamingModel, translateModel } = useAppSelector((state) => state.llm)
   const dispatch = useAppDispatch()
 
   return {
     defaultModel,
     topicNamingModel,
-    setDefaultModel: (model: Model) => dispatch(_setDefaultModel({ model })),
-    setTopicNamingModel: (model: Model) => dispatch(_setTopicNamingModel({ model }))
+    translateModel,
+    setDefaultModel: (model: Model) => dispatch(setDefaultModel({ model })),
+    setTopicNamingModel: (model: Model) => dispatch(setTopicNamingModel({ model })),
+    setTranslateModel: (model: Model) => dispatch(setTranslateModel({ model }))
   }
 }

src/renderer/src/hooks/useProvider.ts

@@ -47,7 +47,7 @@ export function useProvider(id: string) {
 
   return {
     provider,
-    models: provider.models,
+    models: provider?.models || [],
     updateProvider: (provider: Provider) => dispatch(updateProvider(provider)),
     addModel: (model: Model) => dispatch(addModel({ providerId: id, model })),
     removeModel: (model: Model) => dispatch(removeModel({ providerId: id, model }))

src/renderer/src/hooks/useSettings.ts

@@ -1,5 +1,10 @@
 import { useAppDispatch, useAppSelector } from '@renderer/store'
-import { setSendMessageShortcut as _setSendMessageShortcut, SendMessageShortcut } from '@renderer/store/settings'
+import {
+  setSendMessageShortcut as _setSendMessageShortcut,
+  SendMessageShortcut,
+  setTheme,
+  ThemeMode
+} from '@renderer/store/settings'
 
 export function useSettings() {
   const settings = useAppSelector((state) => state.settings)
@@ -9,6 +14,9 @@ export function useSettings() {
     ...settings,
     setSendMessageShortcut(shortcut: SendMessageShortcut) {
       dispatch(_setSendMessageShortcut(shortcut))
+    },
+    setTheme(theme: ThemeMode) {
+      dispatch(setTheme(theme))
     }
   }
 }

src/renderer/src/hooks/useStore.ts

@@ -1,13 +1,15 @@
 import { useAppDispatch, useAppSelector } from '@renderer/store'
-import { toggleRightSidebar, toggleShowAssistants } from '@renderer/store/settings'
+import { setShowRightSidebar, toggleRightSidebar, toggleShowAssistants } from '@renderer/store/settings'
 
 export function useShowRightSidebar() {
   const showRightSidebar = useAppSelector((state) => state.settings.showRightSidebar)
   const dispatch = useAppDispatch()
 
   return {
-    showRightSidebar,
-    toggleRightSidebar: () => dispatch(toggleRightSidebar())
+    rightSidebarShown: showRightSidebar,
+    toggleRightSidebar: () => dispatch(toggleRightSidebar()),
+    showRightSidebar: () => dispatch(setShowRightSidebar(true)),
+    hideRightSidebar: () => dispatch(setShowRightSidebar(false))
   }
 }
 
@@ -20,3 +22,7 @@ export function useShowAssistants() {
     toggleShowAssistants: () => dispatch(toggleShowAssistants())
   }
 }
+
+export function useRuntime() {
+  return useAppSelector((state) => state.runtime)
+}

src/renderer/src/hooks/useTopic.ts

@@ -1,9 +1,13 @@
-import { Assistant } from '@renderer/types'
+import { Assistant, Topic } from '@renderer/types'
 import { find } from 'lodash'
 import { useEffect, useState } from 'react'
 
+let _activeTopic: Topic
+
 export function useActiveTopic(assistant: Assistant) {
-  const [activeTopic, setActiveTopic] = useState(assistant?.topics[0])
+  const [activeTopic, setActiveTopic] = useState(_activeTopic || assistant?.topics[0])
+
+  _activeTopic = activeTopic
 
   useEffect(() => {
     // activeTopic not in assistant.topics

src/renderer/src/i18n/index.ts

@@ -23,7 +23,9 @@ const resources = {
         duplicate: 'Duplicate',
         copy: 'Copy',
         regenerate: 'Regenerate',
-        provider: 'Provider'
+        provider: 'Provider',
+        you: 'You',
+        save: 'Save'
       },
       button: {
         add: 'Add',
@@ -45,13 +47,14 @@ const resources = {
         'chat.completion.paused': 'Chat completion paused',
         'switch.disabled': 'Switching is disabled while the assistant is generating'
       },
+      chat: {
+        save: 'Save'
+      },
       assistant: {
         'default.name': '😀 Default Assistant',
         'default.description': "Hello, I'm Default Assistant. You can start chatting with me right away",
         'default.topic.name': 'Default Topic',
         'topics.title': 'Topics',
-        'topics.hide_topics': 'Hide Topics',
-        'topics.show_topics': 'Show Topics',
         'topics.auto_rename': 'Auto Rename',
         'topics.edit.title': 'Rename',
         'topics.edit.placeholder': 'Enter new name',
@@ -68,7 +71,6 @@ const resources = {
         'input.send': 'Send',
         'input.pause': 'Pause',
         'input.settings': 'Settings',
-        'input.estimated_tokens': 'Estimated Tokens: ',
         'settings.temperature': 'Temperature',
         'settings.temperature.tip':
           'Lower values make the model more creative and unpredictable, while higher values make it more deterministic and precise.',
@@ -100,10 +102,18 @@ const resources = {
         title: 'Settings',
         general: 'General Settings',
         provider: 'Model Provider',
-        model: 'Model Settings',
+        model: 'Default Model',
         assistant: 'Default Assistant',
         about: 'About & Feedback',
+        'messages.model.title': 'Model Settings',
+        'messages.title': 'Message Settings',
+        'messages.divider': 'Show divider between messages',
+        'messages.use_serif_font': 'Use serif font',
+        'messages.input.title': 'Input Settings',
+        'messages.input.show_estimated_tokens': 'Show estimated input tokens',
         'general.title': 'General Settings',
+        'general.user_name': 'User Name',
+        'general.user_name.placeholder': 'Enter your name',
         'provider.api_key': 'API Key',
         'provider.check': 'Check',
         'provider.get_api_key': 'Get API Key',
@@ -111,8 +121,10 @@ const resources = {
         'provider.docs_check': 'Check',
         'provider.docs_more_details': 'for more details',
         'provider.search_placeholder': 'Search model id or name',
+        'provider.api.url.reset': 'Reset',
         'models.default_assistant_model': 'Default Assistant Model',
         'models.topic_naming_model': 'Topic Naming Model',
+        'models.translate_model': 'Translate Model',
         'models.add.add_model': 'Add Model',
         'models.add.model_id.placeholder': 'Required e.g. gpt-3.5-turbo',
         'models.add.model_id': 'Model ID',
@@ -143,8 +155,35 @@ const resources = {
         'about.feedback.title': '📝 Feedback',
         'about.feedback.button': 'Feedback',
         'about.contact.title': '📧 Contact',
+        'about.license.title': '📄 License',
+        'about.license.button': 'License',
         'about.contact.button': 'Email',
-        'proxy.title': 'Proxy Address'
+        'proxy.title': 'Proxy Address',
+        'theme.title': 'Theme',
+        'theme.dark': 'Dark',
+        'theme.light': 'Light',
+        'theme.auto': 'Auto'
+      },
+      translate: {
+        title: 'Translation',
+        'any.language': 'Any language',
+        'button.translate': 'Translate',
+        'error.not_configured': 'Translation model is not configured',
+        'input.placeholder': 'Enter text to translate',
+        'output.placeholder': 'Translation'
+      },
+      languages: {
+        english: 'English',
+        chinese: 'Chinese',
+        'chinese-traditional': 'Traditional Chinese',
+        japanese: 'Japanese',
+        korean: 'Korean',
+        russian: 'Russian',
+        spanish: 'Spanish',
+        french: 'French',
+        italian: 'Italian',
+        portuguese: 'Portuguese',
+        arabic: 'Arabic'
       }
     }
   },
@@ -168,7 +207,8 @@ const resources = {
         duplicate: '复制',
         copy: '复制',
         regenerate: '重新生成',
-        provider: '提供商'
+        provider: '提供商',
+        you: '用户'
       },
       button: {
         add: '添加',
@@ -177,7 +217,7 @@ const resources = {
         select_model: '选择模型'
       },
       message: {
-        copied: '已复制!',
+        copied: '已复制',
         'assistant.added.content': '智能体添加成功',
         'message.delete.title': '删除消息',
         'message.delete.content': '确定要删除此消息吗?',
@@ -190,13 +230,14 @@ const resources = {
         'chat.completion.paused': '会话已停止',
         'switch.disabled': '模型回复完成后才能切换'
       },
+      chat: {
+        save: '保存'
+      },
       assistant: {
         'default.name': '😃 默认助手 - Assistant',
         'default.description': '你好，我是默认助手。你可以立刻开始跟我聊天。',
         'default.topic.name': '默认话题',
         'topics.title': '话题',
-        'topics.hide_topics': '隐藏话题',
-        'topics.show_topics': '显示话题',
         'topics.auto_rename': 'AI 重命名',
         'topics.edit.title': '重命名',
         'topics.edit.placeholder': '输入新名称',
@@ -213,7 +254,6 @@ const resources = {
         'input.send': '发送',
         'input.pause': '暂停',
         'input.settings': '设置',
-        'input.estimated_tokens': '预估消耗',
         'settings.temperature': '模型温度',
         'settings.temperature.tip':
           '模型生成文本的随机程度。值越大，回复内容越赋有多样性、创造性、随机性；设为 0 根据事实回答。日常聊天建议设置为 0.7',
@@ -246,10 +286,18 @@ const resources = {
         title: '设置',
         general: '常规设置',
         provider: '模型提供商',
-        model: '模型设置',
+        model: '默认模型',
         assistant: '默认助手',
         about: '关于我们',
+        'messages.model.title': '模型设置',
+        'messages.title': '消息设置',
+        'messages.divider': '消息分割线',
+        'messages.use_serif_font': '使用衬线字体',
+        'messages.input.title': '输入设置',
+        'messages.input.show_estimated_tokens': '状态显示',
         'general.title': '常规设置',
+        'general.user_name': '用户名',
+        'general.user_name.placeholder': '请输入用户名',
         'provider.api_key': 'API 密钥',
         'provider.check': '检查',
         'provider.get_api_key': '点击这里获取密钥',
@@ -257,8 +305,10 @@ const resources = {
         'provider.docs_check': '查看',
         'provider.docs_more_details': '获取更多详情',
         'provider.search_placeholder': '搜索模型 ID 或名称',
+        'provider.api.url.reset': '重置',
         'models.default_assistant_model': '默认助手模型',
         'models.topic_naming_model': '话题命名模型',
+        'models.translate_model': '翻译模型',
         'models.add.add_model': '添加模型',
         'models.add.model_id.placeholder': '必填 例如 gpt-3.5-turbo',
         'models.add.model_id': '模型 ID',
@@ -289,8 +339,35 @@ const resources = {
         'about.feedback.title': '📝 意见反馈',
         'about.feedback.button': '反馈',
         'about.contact.title': '📧 邮件联系',
+        'about.license.title': '📄 许可证',
+        'about.license.button': '查看',
         'about.contact.button': '邮件',
-        'proxy.title': '代理地址'
+        'proxy.title': '代理地址',
+        'theme.title': '主题',
+        'theme.dark': '深色主题',
+        'theme.light': '浅色主题',
+        'theme.auto': '跟随系统'
+      },
+      translate: {
+        title: '翻译',
+        'any.language': '任意语言',
+        'button.translate': '翻译',
+        'error.not_configured': '翻译模型未配置',
+        'input.placeholder': '输入文本进行翻译',
+        'output.placeholder': '翻译'
+      },
+      languages: {
+        english: '英文',
+        chinese: '简体中文',
+        'chinese-traditional': '繁体中文',
+        japanese: '日文',
+        korean: '韩文',
+        russian: '俄文',
+        spanish: '西班牙文',
+        french: '法文',
+        italian: '意大利文',
+        portuguese: '葡萄牙文',
+        arabic: '阿拉伯文'
       }
     }
   }

src/renderer/src/init.ts

@@ -1,7 +1,8 @@
 import localforage from 'localforage'
 import KeyvStorage from '@kangfenmao/keyv-storage'
 import * as Sentry from '@sentry/electron/renderer'
-import { isProduction } from './utils'
+import { isProduction, loadScript } from './utils'
+import { ThemeMode } from './store/settings'
 
 async function initSentry() {
   if (await isProduction()) {
@@ -21,6 +22,18 @@ async function initSentry() {
   }
 }
 
+export async function initMermaid(theme: ThemeMode) {
+  if (!window.mermaid) {
+    await loadScript('https://unpkg.com/mermaid@10.9.1/dist/mermaid.min.js')
+    window.mermaid.initialize({
+      startOnLoad: true,
+      theme: theme === ThemeMode.dark ? 'dark' : 'default',
+      securityLevel: 'loose'
+    })
+    window.mermaid.contentLoaded()
+  }
+}
+
 function init() {
   localforage.config({
     driver: localforage.INDEXEDDB,

src/renderer/src/pages/apps/AppsPage.tsx

@@ -116,12 +116,16 @@ const AssistantCard = styled.div`
   display: flex;
   flex-direction: row;
   margin-bottom: 16px;
-  background-color: #111;
-  border: 0.5px solid #151515;
+  background-color: var(--color-background-soft);
+  border: 0.5px solid var(--color-border);
   border-radius: 10px;
   padding: 15px;
   position: relative;
   cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background-color: var(--color-background-mute);
+  }
 `
 const EmojiHeader = styled.div`
   width: 25px;
@@ -148,7 +152,7 @@ const AssistantName = styled(Title)`
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  color: #fff;
+  color: var(--color-white);
   font-weight: 900;
 `
 

src/renderer/src/pages/home/HomePage.tsx

@@ -6,19 +6,23 @@ import Chat from './components/Chat'
 import Assistants from './components/Assistants'
 import { uuid } from '@renderer/utils'
 import { useShowAssistants, useShowRightSidebar } from '@renderer/hooks/useStore'
-import { Tooltip } from 'antd'
 import Navigation from './components/NavigationCenter'
-import { useTranslation } from 'react-i18next'
-import { PlusCircleOutlined } from '@ant-design/icons'
-import { isMac } from '@renderer/config/constant'
+import { isMac, isWindows } from '@renderer/config/constant'
+import { Assistant } from '@renderer/types'
+import { useTheme } from '@renderer/providers/ThemeProvider'
+import { Switch } from 'antd'
+
+let _activeAssistant: Assistant
 
 const HomePage: FC = () => {
   const { assistants, addAssistant } = useAssistants()
-  const [activeAssistant, setActiveAssistant] = useState(assistants[0])
-  const { showRightSidebar, toggleRightSidebar } = useShowRightSidebar()
+  const [activeAssistant, setActiveAssistant] = useState(_activeAssistant || assistants[0])
+  const { rightSidebarShown, toggleRightSidebar } = useShowRightSidebar()
   const { showAssistants, toggleShowAssistants } = useShowAssistants()
   const { defaultAssistant } = useDefaultAssistant()
-  const { t } = useTranslation()
+  const { theme, toggleTheme } = useTheme()
+
+  _activeAssistant = activeAssistant
 
   const onCreateAssistant = () => {
     const assistant = { ...defaultAssistant, id: uuid() }
@@ -26,6 +30,8 @@ const HomePage: FC = () => {
     setActiveAssistant(assistant)
   }
 
+  console.debug('theme', theme)
+
   return (
     <Container>
       <Navbar>
@@ -35,20 +41,21 @@ const HomePage: FC = () => {
               <i className="iconfont icon-hidesidebarhoriz" />
             </NewButton>
             <NewButton onClick={onCreateAssistant}>
-              <PlusCircleOutlined />
+              <i className="iconfont icon-a-addchat"></i>
             </NewButton>
           </NavbarLeft>
         )}
         <Navigation activeAssistant={activeAssistant} />
-        <NavbarRight style={{ justifyContent: 'flex-end', padding: '0 7px' }}>
-          <Tooltip
-            placement="left"
-            title={showRightSidebar ? t('assistant.topics.hide_topics') : t('assistant.topics.show_topics')}
-            arrow>
-            <NewButton onClick={toggleRightSidebar}>
-              <i className={`iconfont ${showRightSidebar ? 'icon-showsidebarhoriz' : 'icon-hidesidebarhoriz'}`} />
-            </NewButton>
-          </Tooltip>
+        <NavbarRight style={{ justifyContent: 'flex-end', paddingRight: isWindows ? 140 : 8 }}>
+          <ThemeSwitch
+            checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
+            unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
+            checked={theme === 'dark'}
+            onChange={toggleTheme}
+          />
+          <NewButton onClick={toggleRightSidebar}>
+            <i className={`iconfont ${rightSidebarShown ? 'icon-showsidebarhoriz' : 'icon-hidesidebarhoriz'}`} />
+          </NewButton>
         </NavbarRight>
       </Navbar>
       <ContentContainer>
@@ -88,6 +95,9 @@ export const NewButton = styled.div`
   align-items: center;
   transition: all 0.2s ease-in-out;
   color: var(--color-icon);
+  .icon-a-addchat {
+    font-size: 20px;
+  }
   .anticon {
     font-size: 19px;
   }
@@ -102,4 +112,12 @@ export const NewButton = styled.div`
   }
 `
 
+const ThemeSwitch = styled(Switch)`
+  -webkit-app-region: none;
+  margin-right: 8px;
+  .icon-theme {
+    font-size: 14px;
+  }
+`
+
 export default HomePage

src/renderer/src/pages/home/components/Assistants.tsx

@@ -3,6 +3,7 @@ import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { getDefaultTopic } from '@renderer/services/assistant'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { useAppSelector } from '@renderer/store'
 import { Assistant } from '@renderer/types'
 import { droppableReorder, uuid } from '@renderer/utils'
@@ -77,6 +78,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
       window.message.warning({ content: t('message.switch.disabled'), key: 'switch-assistant' })
       return
     }
+    EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)
     setActiveAssistant(assistant)
   }
 
@@ -94,7 +96,9 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
                         <AssistantItem
                           onClick={() => onSwitchAssistant(assistant)}
                           className={assistant.id === activeAssistant?.id ? 'active' : ''}>
-                          <AssistantName>{assistant.name}</AssistantName>
+                          <AssistantName className="name">
+                            {assistant.name || t('assistant.default.name')}
+                          </AssistantName>
                         </AssistantItem>
                       </Dropdown>
                     </div>
@@ -141,13 +145,15 @@ const AssistantItem = styled.div`
   &.active {
     background-color: var(--color-background-mute);
     cursor: pointer;
+    .name {
+      font-weight: bolder;
+    }
   }
 `
 
 const AssistantName = styled.div`
   font-size: 14px;
-  color: var(--color-text-1);
-  font-weight: bold;
+  color: var(--color-text);
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;

src/renderer/src/pages/home/components/Chat.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import Inputbar from './Inputbar'
 import Messages from './Messages'
 import { Flex } from 'antd'
-import Topics from './Topics'
+import RightSidebar from './RightSidebar'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useActiveTopic } from '@renderer/hooks/useTopic'
 
@@ -22,7 +22,7 @@ const Chat: FC<Props> = (props) => {
         <Messages assistant={assistant} topic={activeTopic} />
         <Inputbar assistant={assistant} setActiveTopic={setActiveTopic} />
       </Flex>
-      <Topics assistant={assistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
+      <RightSidebar assistant={assistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
     </Container>
   )
 }

src/renderer/src/pages/home/components/CodeBlock.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
-import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import styled from 'styled-components'
-import { CopyOutlined } from '@ant-design/icons'
+import { CheckOutlined, CopyOutlined } from '@ant-design/icons'
+import { initMermaid } from '@renderer/init'
+import { useTheme } from '@renderer/providers/ThemeProvider'
+import { ThemeMode } from '@renderer/store/settings'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import { atomDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
+import styled from 'styled-components'
+import Mermaid from './Mermaid'
 
 interface CodeBlockProps {
   children: string
@@ -13,24 +17,34 @@ interface CodeBlockProps {
 
 const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) => {
   const match = /language-(\w+)/.exec(className || '')
+  const [copied, setCopied] = useState(false)
+  const { theme } = useTheme()
 
   const { t } = useTranslation()
 
   const onCopy = () => {
     navigator.clipboard.writeText(children)
     window.message.success({ content: t('message.copied'), key: 'copy-code' })
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  if (match && match[1] === 'mermaid') {
+    initMermaid(theme)
+    return <Mermaid chart={children} />
   }
 
   return match ? (
     <div>
       <CodeHeader>
         <CodeLanguage>{'<' + match[1].toUpperCase() + '>'}</CodeLanguage>
-        <CopyOutlined className="copy" onClick={onCopy} />
+        {!copied && <CopyOutlined className="copy" onClick={onCopy} />}
+        {copied && <CheckOutlined style={{ color: 'var(--color-primary)' }} />}
       </CodeHeader>
       <SyntaxHighlighter
         {...rest}
         language={match[1]}
-        style={atomDark}
+        style={theme === ThemeMode.dark ? atomDark : oneLight}
         wrapLongLines={true}
         customStyle={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: 0 }}>
         {String(children).replace(/\n$/, '')}
@@ -47,10 +61,10 @@ const CodeHeader = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: #fff;
+  color: var(--color-text);
   font-size: 14px;
   font-weight: bold;
-  background-color: #323232;
+  background-color: var(--color-code-background);
   height: 40px;
   padding: 0 10px;
   border-top-left-radius: 8px;

src/renderer/src/pages/home/components/Inputbar.tsx

@@ -4,13 +4,12 @@ import {
   FullscreenExitOutlined,
   FullscreenOutlined,
   HistoryOutlined,
-  MessageOutlined,
   MoreOutlined,
-  PauseCircleOutlined
+  PauseCircleOutlined,
+  PlusCircleOutlined
 } from '@ant-design/icons'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
-import { useShowRightSidebar } from '@renderer/hooks/useStore'
 import { getDefaultTopic } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import store, { useAppSelector } from '@renderer/store'
@@ -24,7 +23,6 @@ import { debounce, isEmpty } from 'lodash'
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
-import AssistantSettings from './AssistantSettings'
 import SendMessageSetting from './SendMessageSetting'
 import { DEFAULT_CONEXTCOUNT } from '@renderer/config/constant'
 
@@ -35,9 +33,8 @@ interface Props {
 
 const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   const [text, setText] = useState('')
-  const { toggleRightSidebar } = useShowRightSidebar()
   const { addTopic } = useAssistant(assistant.id)
-  const { sendMessageShortcut } = useSettings()
+  const { sendMessageShortcut, showInputEstimatedTokens } = useSettings()
   const [expended, setExpend] = useState(false)
   const [estimateTokenCount, setEstimateTokenCount] = useState(0)
   const generating = useAppSelector((state) => state.runtime.generating)
@@ -104,6 +101,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
       if (!generating) {
         if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
           addNewTopic()
+          EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
           inputRef.current?.focus()
         }
       }
@@ -134,12 +132,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
         <ToolbarMenu>
           <Tooltip placement="top" title={t('assistant.input.new_chat')} arrow>
             <ToolbarButton type="text" onClick={addNewTopic}>
-              <MessageOutlined />
-            </ToolbarButton>
-          </Tooltip>
-          <Tooltip placement="top" title={t('assistant.input.topics')} arrow>
-            <ToolbarButton type="text" onClick={toggleRightSidebar}>
-              <HistoryOutlined />
+              <PlusCircleOutlined />
             </ToolbarButton>
           </Tooltip>
           <Tooltip placement="top" title={t('assistant.input.clear')} arrow>
@@ -155,11 +148,16 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
               </ToolbarButton>
             </Popconfirm>
           </Tooltip>
-          <AssistantSettings assistant={assistant}>
-            <ToolbarButton type="text">
+          <Tooltip placement="top" title={t('assistant.input.topics')} arrow>
+            <ToolbarButton type="text" onClick={() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)}>
+              <HistoryOutlined />
+            </ToolbarButton>
+          </Tooltip>
+          <Tooltip placement="top" title={t('assistant.input.settings')} arrow>
+            <ToolbarButton type="text" onClick={() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS)}>
               <ControlOutlined />
             </ToolbarButton>
-          </AssistantSettings>
+          </Tooltip>
           <Tooltip placement="top" title={expended ? t('assistant.input.collapse') : t('assistant.input.expand')} arrow>
             <ToolbarButton type="text" onClick={() => setExpend(!expended)}>
               {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
@@ -170,7 +168,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
           {generating && (
             <Tooltip placement="top" title={t('assistant.input.pause')} arrow>
               <ToolbarButton type="text" onClick={onPause}>
-                <PauseCircleOutlined />
+                <PauseCircleOutlined style={{ color: 'var(--color-error)' }} />
               </ToolbarButton>
             </Tooltip>
           )}
@@ -193,10 +191,12 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
         ref={inputRef}
         styles={{ textarea: { paddingLeft: 0 } }}
       />
-      <TextCount>
-        <HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} |{' '}
-        {t('assistant.input.estimated_tokens')}: {`${inputTokenCount}/${estimateTokenCount}`}
-      </TextCount>
+      {showInputEstimatedTokens && (
+        <TextCount>
+          <HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T↑
+          {`${inputTokenCount}/${estimateTokenCount}`}
+        </TextCount>
+      )}
     </Container>
   )
 }
@@ -248,18 +248,22 @@ const ToolbarButton = styled(Button)`
   &:hover {
     background-color: var(--color-background-soft);
     .anticon {
-      color: white;
+      color: var(--color-text-1);
     }
   }
 `
 
 const TextCount = styled.div`
   position: absolute;
-  right: 8px;
-  bottom: 8px;
+  right: 0;
+  bottom: 0;
   font-size: 11px;
   color: var(--color-text-3);
   z-index: 10;
+  background-color: var(--color-background-soft);
+  padding: 2px 8px;
+  border-top-left-radius: 7px;
+  user-select: none;
 `
 
 export default Inputbar

src/renderer/src/pages/home/components/Mermaid.tsx

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react'
+
+interface Props {
+  chart: string
+}
+
+const Mermaid: React.FC<Props> = ({ chart }) => {
+  useEffect(() => {
+    window?.mermaid?.contentLoaded()
+  }, [])
+
+  return <div className="mermaid">{chart}</div>
+}
+
+export default Mermaid

src/renderer/src/pages/home/components/Message.tsx

@@ -1,18 +1,28 @@
-import { Message } from '@renderer/types'
-import { Avatar, Tooltip } from 'antd'
-import { FC } from 'react'
-import styled from 'styled-components'
-import useAvatar from '@renderer/hooks/useAvatar'
-import { DeleteOutlined, EditOutlined, SwitcherOutlined } from '@ant-design/icons'
-import Markdown from 'react-markdown'
-import CodeBlock from './CodeBlock'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import {
+  CheckOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  EditOutlined,
+  MenuOutlined,
+  SaveOutlined,
+  SyncOutlined
+} from '@ant-design/icons'
 import { getModelLogo } from '@renderer/config/provider'
-import Logo from '@renderer/assets/images/logo.png'
-import { SyncOutlined } from '@ant-design/icons'
-import { firstLetter } from '@renderer/utils'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import useAvatar from '@renderer/hooks/useAvatar'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { Message } from '@renderer/types'
+import { firstLetter, removeLeadingEmoji } from '@renderer/utils'
+import { Avatar, Dropdown, Tooltip } from 'antd'
+import dayjs from 'dayjs'
+import { isEmpty, upperFirst } from 'lodash'
+import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { isEmpty } from 'lodash'
+import Markdown from 'react-markdown'
+import styled from 'styled-components'
+import CodeBlock from './CodeBlock'
+import { useRuntime } from '@renderer/hooks/useStore'
 
 interface Props {
   message: Message
@@ -25,13 +35,20 @@ interface Props {
 const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) => {
   const avatar = useAvatar()
   const { t } = useTranslation()
+  const { assistant } = useAssistant(message.assistantId)
+  const { userName, showMessageDivider, messageFont } = useSettings()
+  const { generating } = useRuntime()
+  const [copied, setCopied] = useState(false)
 
   const isLastMessage = index === 0
+  const isUserMessage = message.role === 'user'
   const canRegenerate = isLastMessage && message.role === 'assistant'
 
   const onCopy = () => {
     navigator.clipboard.writeText(message.content)
     window.message.success({ content: t('message.copied'), key: 'copy-message' })
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
   }
 
   const onDelete = async () => {
@@ -61,18 +78,56 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
     return message.content
   }
 
+  const getUserName = useCallback(() => {
+    if (message.id === 'assistant') {
+      return assistant?.name
+    }
+
+    if (message.role === 'assistant') {
+      return upperFirst(message.modelId)
+    }
+
+    return userName || t('common.you')
+  }, [assistant?.name, message.id, message.modelId, message.role, t, userName])
+
+  const getDropdownMenus = useCallback(
+    (message: Message) => {
+      return [
+        {
+          label: t('chat.save'),
+          key: 'save',
+          icon: <SaveOutlined />,
+          onClick: () => {
+            const fileName = message.createdAt + '.md'
+            window.api.saveFile(fileName, message.content)
+          }
+        }
+      ]
+    },
+    [t]
+  )
+
+  const fontFamily = messageFont === 'serif' ? "Georgia, Cambria, 'Times New Roman', Times, serif" : undefined
+  const messageBorder = showMessageDivider ? undefined : 'none'
+
   return (
-    <MessageContainer key={message.id}>
-      <AvatarWrapper>
-        {message.role === 'assistant' ? (
-          <Avatar src={message.modelId ? getModelLogo(message.modelId) : Logo}>
-            {firstLetter(message.modelId).toUpperCase()}
-          </Avatar>
-        ) : (
-          <Avatar src={avatar} />
-        )}
-      </AvatarWrapper>
-      <MessageContent>
+    <MessageContainer key={message.id} className="message" style={{ border: messageBorder }}>
+      <MessageHeader>
+        <AvatarWrapper>
+          {message.role === 'assistant' ? (
+            <Avatar src={message.modelId ? getModelLogo(message.modelId) : undefined} size={35}>
+              {firstLetter(assistant?.name).toUpperCase()}
+            </Avatar>
+          ) : (
+            <Avatar src={avatar} size={35} />
+          )}
+          <UserWrap>
+            <UserName>{removeLeadingEmoji(getUserName())}</UserName>
+            <MessageTime>{dayjs(message.createdAt).format('MM/DD HH:mm')}</MessageTime>
+          </UserWrap>
+        </AvatarWrapper>
+      </MessageHeader>
+      <MessageContent style={{ fontFamily }}>
         {message.status === 'sending' && (
           <MessageContentLoading>
             <SyncOutlined spin size={24} />
@@ -83,32 +138,44 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
             {getMessageContent(message)}
           </Markdown>
         )}
+        {message.usage && !generating && (
+          <MessageMetadata>
+            Tokens: {message.usage.total_tokens} | ↑{message.usage.prompt_tokens}↓{message.usage.completion_tokens}
+          </MessageMetadata>
+        )}
         {showMenu && (
-          <MenusBar className={`menubar ${isLastMessage && 'show'}`}>
+          <MenusBar className={`menubar ${isLastMessage && 'show'} ${(!isLastMessage || isUserMessage) && 'user'}`}>
             {message.role === 'user' && (
               <Tooltip title="Edit" mouseEnterDelay={0.8}>
-                <EditOutlined onClick={onEdit} />
+                <ActionButton onClick={onEdit}>
+                  <EditOutlined />
+                </ActionButton>
               </Tooltip>
             )}
             <Tooltip title={t('common.copy')} mouseEnterDelay={0.8}>
-              <SwitcherOutlined onClick={onCopy} />
+              <ActionButton onClick={onCopy}>
+                {!copied && <CopyOutlined />}
+                {copied && <CheckOutlined style={{ color: 'var(--color-primary)' }} />}
+              </ActionButton>
             </Tooltip>
             <Tooltip title={t('common.delete')} mouseEnterDelay={0.8}>
-              <DeleteOutlined onClick={onDelete} />
+              <ActionButton onClick={onDelete}>
+                <DeleteOutlined />
+              </ActionButton>
             </Tooltip>
             {canRegenerate && (
               <Tooltip title={t('common.regenerate')} mouseEnterDelay={0.8}>
-                <SyncOutlined onClick={onRegenerate} />
+                <ActionButton onClick={onRegenerate}>
+                  <SyncOutlined />
+                </ActionButton>
               </Tooltip>
             )}
-            <MessageMetadata>{message.modelId}</MessageMetadata>
-            {message.usage && (
-              <>
-                <MessageMetadata>
-                  tokens: {message.usage.total_tokens} (in:{message.usage.prompt_tokens}/out:
-                  {message.usage.completion_tokens})
-                </MessageMetadata>
-              </>
+            {!isUserMessage && (
+              <Dropdown menu={{ items: getDropdownMenus(message) }} trigger={['click']} placement="topRight" arrow>
+                <ActionButton>
+                  <MenuOutlined />
+                </ActionButton>
+              </Dropdown>
             )}
           </MenusBar>
         )}
@@ -119,26 +186,21 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
 
 const MessageContainer = styled.div`
   display: flex;
-  flex-direction: row;
-  padding: 10px 15px;
-  position: relative;
-`
-
-const AvatarWrapper = styled.div`
-  margin-right: 10px;
-`
-
-const MessageContent = styled.div`
-  display: flex;
-  flex: 1;
   flex-direction: column;
-  justify-content: space-between;
+  padding: 10px;
+  position: relative;
+  border-bottom: 0.5px dotted var(--color-border);
   .menubar {
     opacity: 0;
     transition: opacity 0.2s ease;
     &.show {
       opacity: 1;
     }
+    &.user {
+      position: absolute;
+      top: 15px;
+      right: 10px;
+    }
   }
   &:hover {
     .menubar {
@@ -147,6 +209,47 @@ const MessageContent = styled.div`
   }
 `
 
+const MessageHeader = styled.div`
+  margin-right: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: 4px;
+  justify-content: space-between;
+`
+
+const AvatarWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`
+
+const UserWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: 12px;
+`
+
+const UserName = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+`
+
+const MessageTime = styled.div`
+  font-size: 12px;
+  color: var(--color-text-3);
+`
+
+const MessageContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-left: 46px;
+  margin-top: 5px;
+`
+
 const MessageContentLoading = styled.div`
   display: flex;
   flex-direction: row;
@@ -157,17 +260,9 @@ const MessageContentLoading = styled.div`
 const MenusBar = styled.div`
   display: flex;
   flex-direction: row;
-  justify-content: flex-start;
+  justify-content: flex-end;
+  align-items: center;
   gap: 6px;
-  .anticon {
-    cursor: pointer;
-    margin-right: 8px;
-    font-size: 15px;
-    color: var(--color-icon);
-    &:hover {
-      color: var(--color-text-1);
-    }
-  }
 `
 
 const MessageMetadata = styled.div`
@@ -176,4 +271,24 @@ const MessageMetadata = styled.div`
   user-select: text;
 `
 
+const ActionButton = styled.div`
+  cursor: pointer;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  .anticon {
+    cursor: pointer;
+    font-size: 14px;
+    color: var(--color-icon);
+  }
+  &:hover {
+    color: var(--color-text-1);
+  }
+`
+
 export default MessageItem

src/renderer/src/pages/home/components/Messages.tsx

@@ -119,7 +119,10 @@ const Container = styled.div`
   flex-direction: column-reverse;
   max-height: calc(100vh - var(--input-bar-height) - var(--navbar-height));
   padding-top: 10px;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
+  .message:first-child {
+    border: none;
+  }
 `
 
 export default Messages

src/renderer/src/pages/home/components/NavigationCenter.tsx

@@ -1,16 +1,18 @@
+import { CodeSandboxOutlined } from '@ant-design/icons'
 import { NavbarCenter } from '@renderer/components/app/Navbar'
-import { colorPrimary } from '@renderer/config/antd'
+import { isMac } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useProviders } from '@renderer/hooks/useProvider'
+import { useShowAssistants } from '@renderer/hooks/useStore'
 import { Assistant } from '@renderer/types'
-import { Button, Dropdown, MenuProps } from 'antd'
+import { Avatar, Button, Dropdown, MenuProps } from 'antd'
+import { upperFirst } from 'lodash'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 import { NewButton } from '../HomePage'
-import { useShowAssistants } from '@renderer/hooks/useStore'
-import { capitalizeFirstLetter } from '@renderer/utils'
-import { isMac } from '@renderer/config/constant'
+import { getModelLogo } from '@renderer/config/provider'
+import { removeLeadingEmoji } from '@renderer/utils'
 
 interface Props {
   activeAssistant: Assistant
@@ -31,8 +33,9 @@ const NavigationCenter: FC<Props> = ({ activeAssistant }) => {
       type: 'group',
       children: p.models.map((m) => ({
         key: m.id,
-        label: m.name,
-        style: m.id === model?.id ? { color: colorPrimary } : undefined,
+        label: upperFirst(m.name),
+        style: m.id === model?.id ? { color: 'var(--color-primary)' } : undefined,
+        icon: <Avatar src={getModelLogo(m.id)} size={24} />,
         onClick: () => setModel(m)
       }))
     }))
@@ -44,10 +47,14 @@ const NavigationCenter: FC<Props> = ({ activeAssistant }) => {
           <i className="iconfont icon-showsidebarhoriz" />
         </NewButton>
       )}
-      <AssistantName>{assistant?.name}</AssistantName>
-      <DropdownMenu menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' } }} trigger={['click']}>
+      <AssistantName>{removeLeadingEmoji(assistant?.name) || t('assistant.default.name')}</AssistantName>
+      <DropdownMenu
+        menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' } }}
+        trigger={['click']}
+        overlayClassName="chat-nav-dropdown">
         <DropdownButton size="small" type="primary" ghost>
-          {model ? capitalizeFirstLetter(model.name) : t('button.select_model')}
+          <CodeSandboxOutlined />
+          <ModelName>{model ? upperFirst(model.name) : t('button.select_model')}</ModelName>
         </DropdownButton>
       </DropdownMenu>
     </NavbarCenter>
@@ -65,9 +72,14 @@ const AssistantName = styled.span`
 `
 
 const DropdownButton = styled(Button)`
-  font-size: 10px;
+  font-size: 11px;
   border-radius: 15px;
   padding: 0 8px;
 `
 
+const ModelName = styled.span`
+  margin-left: -2px;
+  font-weight: bolder;
+`
+
 export default NavigationCenter

src/renderer/src/pages/home/components/RightSidebar.tsx

@@ -0,0 +1,101 @@
+import { Assistant, Topic } from '@renderer/types'
+import { FC, useEffect, useState } from 'react'
+import styled from 'styled-components'
+import TopicsTab from './TopicsTab'
+import SettingsTab from './SettingsTab'
+import { useTranslation } from 'react-i18next'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { useShowRightSidebar } from '@renderer/hooks/useStore'
+
+interface Props {
+  assistant: Assistant
+  activeTopic: Topic
+  setActiveTopic: (topic: Topic) => void
+}
+
+const RightSidebar: FC<Props> = (props) => {
+  const [tab, setTab] = useState<'topic' | 'settings'>('topic')
+  const { rightSidebarShown, showRightSidebar, hideRightSidebar } = useShowRightSidebar()
+  const { t } = useTranslation()
+  const isTopicTab = tab === 'topic'
+  const isSettingsTab = tab === 'settings'
+
+  useEffect(() => {
+    const unsubscribes = [
+      EventEmitter.on(EVENT_NAMES.SHOW_TOPIC_SIDEBAR, (): any => {
+        if (rightSidebarShown && isTopicTab) {
+          return hideRightSidebar()
+        }
+        if (rightSidebarShown) {
+          return setTab('topic')
+        }
+        showRightSidebar()
+        setTab('topic')
+      }),
+      EventEmitter.on(EVENT_NAMES.SHOW_CHAT_SETTINGS, (): any => {
+        if (rightSidebarShown && isSettingsTab) {
+          return hideRightSidebar()
+        }
+        if (rightSidebarShown) {
+          return setTab('settings')
+        }
+        showRightSidebar()
+        setTab('settings')
+      }),
+      EventEmitter.on(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR, () => setTab('topic'))
+    ]
+    return () => unsubscribes.forEach((unsub) => unsub())
+  }, [hideRightSidebar, isSettingsTab, isTopicTab, rightSidebarShown, showRightSidebar])
+
+  return (
+    <Container style={{ display: rightSidebarShown ? 'block' : 'none' }}>
+      <Tabs>
+        <Tab className={tab === 'topic' ? 'active' : ''} onClick={() => setTab('topic')}>
+          {t('common.topics')}
+        </Tab>
+        <Tab className={tab === 'settings' ? 'active' : ''} onClick={() => setTab('settings')}>
+          {t('settings.title')}
+        </Tab>
+      </Tabs>
+      {tab === 'topic' && <TopicsTab {...props} />}
+      {tab === 'settings' && <SettingsTab assistant={props.assistant} />}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  width: var(--topic-list-width);
+  height: 100%;
+  border-left: 0.5px solid var(--color-border);
+  overflow-y: auto;
+  .collapsed {
+    width: 0;
+    border-left: none;
+  }
+`
+
+const Tabs = styled.div`
+  display: flex;
+  flex-direction: row;
+  border-bottom: 0.5px solid var(--color-border);
+  padding: 0 10px;
+`
+
+const Tab = styled.div`
+  padding: 8px 0;
+  font-weight: 500;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  font-size: 13px;
+  cursor: pointer;
+  color: var(--color-text-3);
+  border-bottom: 1px solid transparent;
+  &.active {
+    color: var(--color-text-2);
+    font-weight: 600;
+  }
+`
+
+export default RightSidebar

src/renderer/src/pages/home/components/SettingsTab.tsx

@@ -1,23 +1,31 @@
-import { QuestionCircleOutlined } from '@ant-design/icons'
+import { Assistant } from '@renderer/types'
+import styled from 'styled-components'
 import { DEFAULT_CONEXTCOUNT, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { Assistant } from '@renderer/types'
-import { Button, Col, InputNumber, Popover, Row, Slider, Tooltip } from 'antd'
+import { Button, Col, InputNumber, Row, Slider, Switch, Tooltip } from 'antd'
 import { debounce } from 'lodash'
-import { FC, PropsWithChildren, useCallback, useEffect, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+import { SettingDivider, SettingRow, SettingRowTitle, SettingSubtitle } from '@renderer/pages/settings/components'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useAppDispatch } from '@renderer/store'
+import { setMessageFont, setShowInputEstimatedTokens, setShowMessageDivider } from '@renderer/store/settings'
 
 interface Props {
   assistant: Assistant
 }
 
-const PopoverContent: FC<Props> = (props) => {
+const SettingsTab: FC<Props> = (props) => {
   const { assistant, updateAssistantSettings, updateAssistant } = useAssistant(props.assistant.id)
   const [temperature, setTemperature] = useState(assistant?.settings?.temperature ?? DEFAULT_TEMPERATURE)
   const [contextCount, setConextCount] = useState(assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT)
   const { t } = useTranslation()
 
+  const dispatch = useAppDispatch()
+
+  const { showMessageDivider, messageFont, showInputEstimatedTokens } = useSettings()
+
   const onUpdateAssistantSettings = useCallback(
     debounce(
       ({ _temperature, _contextCount }: { _temperature?: number; _contextCount?: number }) => {
@@ -70,30 +78,34 @@ const PopoverContent: FC<Props> = (props) => {
 
   return (
     <Container>
-      <Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
-        <Col span={6}>
-          <Row align="middle" justify="end">
-            <Label>{t('assistant.settings.temperature')}</Label>
-            <Tooltip title={t('assistant.settings.temperature.tip')}>
-              <QuestionIcon />
-            </Tooltip>
-          </Row>
-        </Col>
-        <Col span={14}>
+      <SettingSubtitle style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+        {t('settings.messages.model.title')}{' '}
+        <Button size="small" onClick={onReset}>
+          {t('assistant.settings.reset')}
+        </Button>
+      </SettingSubtitle>
+      <SettingDivider />
+      <Row align="middle">
+        <Label>{t('assistant.settings.conext_count')}</Label>
+        <Tooltip title={t('assistant.settings.temperature.tip')}>
+          <QuestionIcon />
+        </Tooltip>
+      </Row>
+      <Row align="middle" gutter={10}>
+        <Col span={18}>
           <Slider
             min={0}
             max={1.2}
             onChange={onTemperatureChange}
             value={typeof temperature === 'number' ? temperature : 0}
-            marks={{ 0: '0', 0.7: '0.7', 1: '1', 1.2: '1.2' }}
+            marks={{ 0: '0', 0.7: '0.7', 1.2: '1.2' }}
             step={0.1}
           />
         </Col>
-        <Col span={3}>
-          <InputNumber
+        <Col span={6}>
+          <InputNumberic
             min={0}
             max={1.2}
-            style={{ width: 50, marginLeft: 5, textAlign: 'center' }}
             step={0.1}
             value={temperature}
             onChange={onTemperatureChange}
@@ -101,30 +113,27 @@ const PopoverContent: FC<Props> = (props) => {
           />
         </Col>
       </Row>
-      <Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
-        <Col span={6}>
-          <Row align="middle" justify="end">
-            <Label>{t('assistant.settings.conext_count')}</Label>
-            <Tooltip title={t('assistant.settings.conext_count.tip')}>
-              <QuestionIcon />
-            </Tooltip>
-          </Row>
-        </Col>
-        <Col span={14}>
+      <Row align="middle">
+        <Label>{t('assistant.settings.conext_count')}</Label>
+        <Tooltip title={t('assistant.settings.conext_count.tip')}>
+          <QuestionIcon />
+        </Tooltip>
+      </Row>
+      <Row align="middle" gutter={10}>
+        <Col span={18}>
           <Slider
             min={0}
             max={20}
-            marks={{ 0: '0', 5: '5', 10: '10', 15: '15', 20: t('assistant.settings.max') }}
+            marks={{ 0: '0', 10: '10', 20: t('assistant.settings.max') }}
             onChange={onConextCountChange}
             value={typeof contextCount === 'number' ? contextCount : 0}
             step={1}
           />
         </Col>
-        <Col span={3}>
-          <InputNumber
+        <Col span={6}>
+          <InputNumberic
             min={0}
             max={20}
-            style={{ width: 50, marginLeft: 5, textAlign: 'center' }}
             step={1}
             value={contextCount}
             onChange={onConextCountChange}
@@ -132,49 +141,70 @@ const PopoverContent: FC<Props> = (props) => {
           />
         </Col>
       </Row>
-      <Row justify="center">
-        <Button onClick={onReset}>{t('assistant.settings.reset')}</Button>
-      </Row>
+      <SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle>
+      <SettingDivider />
+      <SettingRow>
+        <SettingRowTitleSmall>{t('settings.messages.divider')}</SettingRowTitleSmall>
+        <Switch
+          size="small"
+          checked={showMessageDivider}
+          onChange={(checked) => dispatch(setShowMessageDivider(checked))}
+        />
+      </SettingRow>
+      <SettingDivider />
+      <SettingRow>
+        <SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
+        <Switch
+          size="small"
+          checked={messageFont === 'serif'}
+          onChange={(checked) => dispatch(setMessageFont(checked ? 'serif' : 'system'))}
+        />
+      </SettingRow>
+      <SettingDivider />
+      <SettingSubtitle style={{ marginTop: 20 }}>{t('settings.messages.input.title')}</SettingSubtitle>
+      <SettingDivider />
+      <SettingRow>
+        <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
+        <Switch
+          size="small"
+          checked={showInputEstimatedTokens}
+          onChange={(checked) => dispatch(setShowInputEstimatedTokens(checked))}
+        />
+      </SettingRow>
+      <SettingDivider />
     </Container>
   )
 }
 
-const AssistantSettings: FC<Props & PropsWithChildren> = ({ children, assistant }) => {
-  const [open, setOpen] = useState(false)
-  const { t } = useTranslation()
-
-  return (
-    <Popover content={<PopoverContent assistant={assistant} />} trigger="click" onOpenChange={setOpen}>
-      {open ? (
-        children
-      ) : (
-        <Tooltip placement="top" title={t('assistant.input.settings')} arrow>
-          {children}
-        </Tooltip>
-      )}
-    </Popover>
-  )
-}
-
 const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 8px;
-  width: 420px;
-  padding: 5px;
+  padding: 0 15px;
+`
+
+const InputNumberic = styled(InputNumber)`
+  width: 45px;
+  padding: 0;
+  margin-left: 5px;
+  text-align: center;
+  .ant-input-number-input {
+    text-align: center;
+  }
 `
 
 const Label = styled.p`
   margin: 0;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: bold;
-  margin-right: 5px;
+  margin-right: 8px;
 `
 
 const QuestionIcon = styled(QuestionCircleOutlined)`
-  font-size: 14px;
+  font-size: 12px;
   cursor: pointer;
   color: var(--color-text-3);
 `
 
-export default AssistantSettings
+const SettingRowTitleSmall = styled(SettingRowTitle)`
+  font-size: 13px;
+`
+
+export default SettingsTab

src/renderer/src/pages/home/components/TopicsTab.tsx

@@ -3,7 +3,7 @@ import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useShowRightSidebar } from '@renderer/hooks/useStore'
 import { fetchMessagesSummary } from '@renderer/services/api'
 import { Assistant, Topic } from '@renderer/types'
-import { Button, Dropdown, MenuProps, Popconfirm } from 'antd'
+import { Dropdown, MenuProps } from 'antd'
 import { FC } from 'react'
 import styled from 'styled-components'
 import { DeleteOutlined, EditOutlined, SignatureOutlined } from '@ant-design/icons'
@@ -19,9 +19,9 @@ interface Props {
   setActiveTopic: (topic: Topic) => void
 }
 
-const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic }) => {
-  const { showRightSidebar } = useShowRightSidebar()
-  const { assistant, removeTopic, updateTopic, removeAllTopics, updateTopics } = useAssistant(_assistant.id)
+const TopicsTab: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic }) => {
+  const { rightSidebarShown } = useShowRightSidebar()
+  const { assistant, removeTopic, updateTopic, updateTopics } = useAssistant(_assistant.id)
   const { t } = useTranslation()
   const generating = useAppSelector((state) => state.runtime.generating)
 
@@ -93,23 +93,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
   }
 
   return (
-    <Container style={{ display: showRightSidebar ? 'block' : 'none' }}>
-      <TopicTitle>
-        <span>
-          {t('assistant.topics.title')} ({assistant.topics.length})
-        </span>
-        <Popconfirm
-          icon={false}
-          title={t('assistant.topics.delete.all.title')}
-          description={t('assistant.topics.delete.all.content')}
-          placement="leftBottom"
-          onConfirm={removeAllTopics}
-          okType="danger">
-          <DeleteButton type="text">
-            <DeleteIcon />
-          </DeleteButton>
-        </Popconfirm>
-      </TopicTitle>
+    <Container style={{ display: rightSidebarShown ? 'block' : 'none' }}>
       <DragDropContext onDragEnd={onDragEnd}>
         <Droppable droppableId="droppable">
           {(provided) => (
@@ -138,15 +122,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
 }
 
 const Container = styled.div`
-  width: var(--topic-list-width);
-  height: 100%;
-  border-left: 0.5px solid var(--color-border);
-  padding: 10px;
-  overflow-y: auto;
-  &.collapsed {
-    width: 0;
-    border-left: none;
-  }
+  padding: 15px 10px;
 `
 
 const TopicListItem = styled.div`
@@ -154,7 +130,7 @@ const TopicListItem = styled.div`
   margin-bottom: 5px;
   cursor: pointer;
   border-radius: 5px;
-  font-size: 13px;
+  font-size: 14px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -162,35 +138,9 @@ const TopicListItem = styled.div`
     background-color: var(--color-background-soft);
   }
   &.active {
-    background-color: var(--color-background-soft);
+    background-color: var(--color-background-mute);
+    font-weight: bolder;
   }
 `
 
-const TopicTitle = styled.div`
-  font-weight: bold;
-  margin-bottom: 10px;
-  font-size: 14px;
-  color: var(--color-text-1);
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`
-
-const DeleteButton = styled(Button)`
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
-  padding: 0;
-  &:hover {
-    .anticon {
-      color: #ff4d4f;
-    }
-  }
-`
-
-const DeleteIcon = styled(DeleteOutlined)`
-  font-size: 16px;
-`
-
-export default Topics
+export default TopicsTab

src/renderer/src/pages/settings/AboutSettings.tsx

@@ -39,6 +39,10 @@ const AboutSettings: FC = () => {
     onOpenWebsite(url)
   }
 
+  const showLicense = () => {
+    window.api.openWebsite('https://raw.githubusercontent.com/kangfenmao/cherry-studio/main/LICENSE')
+  }
+
   useEffect(() => {
     runAsyncFunction(async () => {
       const appInfo = await window.api.getAppInfo()
@@ -121,9 +125,7 @@ const AboutSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.about.website.title')}</SettingRowTitle>
-        <Button onClick={() => onOpenWebsite('https://easys.run/cherry-studio')}>
-          {t('settings.about.website.button')}
-        </Button>
+        <Button onClick={() => onOpenWebsite('https://cherry-ai.com')}>{t('settings.about.website.button')}</Button>
       </SettingRow>
       <SettingDivider />
       <SettingRow>
@@ -133,6 +135,11 @@ const AboutSettings: FC = () => {
         </Button>
       </SettingRow>
       <SettingDivider />
+      <SettingRow>
+        <SettingRowTitle>{t('settings.about.license.title')}</SettingRowTitle>
+        <Button onClick={showLicense}>{t('settings.about.license.button')}</Button>
+      </SettingRow>
+      <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.about.contact.title')}</SettingRowTitle>
         <Button onClick={mailto}>{t('settings.about.contact.button')}</Button>

src/renderer/src/pages/settings/GeneralSettings.tsx

@@ -8,14 +8,14 @@ import useAvatar from '@renderer/hooks/useAvatar'
 import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
 import { useSettings } from '@renderer/hooks/useSettings'
-import { setLanguage } from '@renderer/store/settings'
+import { setLanguage, setUserName, ThemeMode } from '@renderer/store/settings'
 import { useTranslation } from 'react-i18next'
 import { setProxyUrl as _setProxyUrl } from '@renderer/store/settings'
 import i18n from '@renderer/i18n'
 
 const GeneralSettings: FC = () => {
   const avatar = useAvatar()
-  const { language, proxyUrl: storeProxyUrl } = useSettings()
+  const { language, proxyUrl: storeProxyUrl, userName, theme, setTheme } = useSettings()
   const [proxyUrl, setProxyUrl] = useState<string | undefined>(storeProxyUrl)
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
@@ -53,6 +53,20 @@ const GeneralSettings: FC = () => {
         />
       </SettingRow>
       <SettingDivider />
+      <SettingRow>
+        <SettingRowTitle>{t('settings.theme.title')}</SettingRowTitle>
+        <Select
+          defaultValue={theme}
+          style={{ width: 120 }}
+          onChange={setTheme}
+          options={[
+            { value: ThemeMode.light, label: t('settings.theme.light') },
+            { value: ThemeMode.dark, label: t('settings.theme.dark') },
+            { value: ThemeMode.auto, label: t('settings.theme.auto') }
+          ]}
+        />
+      </SettingRow>
+      <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('common.avatar')}</SettingRowTitle>
         <Upload
@@ -74,6 +88,17 @@ const GeneralSettings: FC = () => {
         </Upload>
       </SettingRow>
       <SettingDivider />
+      <SettingRow>
+        <SettingRowTitle>{t('settings.general.user_name')}</SettingRowTitle>
+        <Input
+          placeholder={t('settings.general.user_name.placeholder')}
+          value={userName}
+          onChange={(e) => dispatch(setUserName(e.target.value))}
+          style={{ width: 150 }}
+          maxLength={30}
+        />
+      </SettingRow>
+      <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.proxy.title')}</SettingRowTitle>
         <Input

src/renderer/src/pages/settings/ModelSettings.tsx

@@ -6,9 +6,11 @@ import { useDefaultModel } from '@renderer/hooks/useAssistant'
 import { find } from 'lodash'
 import { Model } from '@renderer/types'
 import { useTranslation } from 'react-i18next'
+import { EditOutlined, MessageOutlined, TranslationOutlined } from '@ant-design/icons'
 
 const ModelSettings: FC = () => {
-  const { defaultModel, topicNamingModel, setDefaultModel, setTopicNamingModel } = useDefaultModel()
+  const { defaultModel, topicNamingModel, translateModel, setDefaultModel, setTopicNamingModel, setTranslateModel } =
+    useDefaultModel()
   const { providers } = useProviders()
   const allModels = providers.map((p) => p.models).flat()
   const { t } = useTranslation()
@@ -24,9 +26,16 @@ const ModelSettings: FC = () => {
       }))
     }))
 
+  const iconStyle = { fontSize: 16, marginRight: 8 }
+
   return (
     <SettingContainer>
-      <SettingTitle>{t('settings.models.default_assistant_model')}</SettingTitle>
+      <SettingTitle>
+        <div>
+          <MessageOutlined style={iconStyle} />
+          {t('settings.models.default_assistant_model')}
+        </div>
+      </SettingTitle>
       <SettingDivider />
       <Select
         defaultValue={defaultModel.id}
@@ -35,7 +44,12 @@ const ModelSettings: FC = () => {
         options={selectOptions}
       />
       <div style={{ height: 30 }} />
-      <SettingTitle>{t('settings.models.topic_naming_model')}</SettingTitle>
+      <SettingTitle>
+        <div>
+          <EditOutlined style={iconStyle} />
+          {t('settings.models.topic_naming_model')}
+        </div>
+      </SettingTitle>
       <SettingDivider />
       <Select
         defaultValue={topicNamingModel.id}
@@ -43,6 +57,21 @@ const ModelSettings: FC = () => {
         onChange={(id) => setTopicNamingModel(find(allModels, { id }) as Model)}
         options={selectOptions}
       />
+      <div style={{ height: 30 }} />
+      <SettingTitle>
+        <div>
+          <TranslationOutlined style={iconStyle} />
+          {t('settings.models.translate_model')}
+        </div>
+      </SettingTitle>
+      <SettingDivider />
+      <Select
+        defaultValue={translateModel?.id}
+        style={{ width: 200 }}
+        onChange={(id) => setTranslateModel(find(allModels, { id }) as Model)}
+        options={selectOptions}
+        placeholder={t('settings.models.empty')}
+      />
     </SettingContainer>
   )
 }

src/renderer/src/pages/settings/ProviderSettings.tsx

@@ -100,11 +100,11 @@ const ProviderSettings: FC = () => {
                               key={JSON.stringify(provider)}
                               className={provider.id === selectedProvider?.id ? 'active' : ''}
                               onClick={() => setSelectedProvider(provider)}>
-                              {provider.isSystem && <Avatar src={getProviderLogo(provider.id)} size={28} />}
+                              {provider.isSystem && <Avatar src={getProviderLogo(provider.id)} size={25} />}
                               {!provider.isSystem && (
                                 <Avatar
-                                  size={28}
-                                  style={{ backgroundColor: generateColorFromChar(provider.name), minWidth: 28 }}>
+                                  size={25}
+                                  style={{ backgroundColor: generateColorFromChar(provider.name), minWidth: 25 }}>
                                   {getFirstCharacter(provider.name)}
                                 </Avatar>
                               )}
@@ -151,7 +151,7 @@ const ProviderListContainer = styled.div`
   width: var(--assistants-width);
   height: calc(100vh - var(--navbar-height));
   border-right: 0.5px solid var(--color-border);
-  padding: 10px 8px;
+  padding: 8px;
   overflow-y: auto;
 `
 
@@ -173,20 +173,21 @@ const ProviderListItem = styled.div`
   font-size: 14px;
   transition: all 0.2s ease-in-out;
   &:hover {
-    background: #135200;
+    background: var(--color-primary-mute);
   }
   &.active {
-    background: #135200;
-    font-weight: bold;
+    background: var(--color-primary);
+    color: var(--color-white);
+    font-weight: bold !important;
   }
 `
 
 const ProviderItemName = styled.div`
   margin-left: 10px;
-  font-weight: bold;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-weight: 500;
 `
 
 const AddButtonWrapper = styled.div`

src/renderer/src/pages/settings/SettingsPage.tsx

@@ -68,7 +68,7 @@ const SettingMenus = styled.ul`
   display: flex;
   flex-direction: column;
   min-width: var(--assistants-width);
-  border-right: 1px solid var(--color-border);
+  border-right: 0.5px solid var(--color-border);
   padding: 10px;
 `
 
@@ -84,13 +84,14 @@ const MenuItem = styled.li`
   cursor: pointer;
   border-radius: 5px;
   font-size: 14px;
+  font-weight: 500;
   transition: all 0.2s ease-in-out;
   &:hover {
-    background: #135200;
+    background: var(--color-primary-soft);
   }
   &.active {
-    background: #135200;
-    font-weight: bold;
+    background: var(--color-primary);
+    color: var(--color-white);
   }
 `
 

src/renderer/src/pages/settings/components/EditModelsPopup.tsx

@@ -178,7 +178,8 @@ const ListHeader = styled.div`
   justify-content: space-between;
   background-color: var(--color-background-soft);
   padding: 8px 22px;
-  color: #ffffff50;
+  color: var(--color-text);
+  opacity: 0.4;
 `
 
 const ListItem = styled.div`
@@ -199,14 +200,14 @@ const ListItemHeader = styled.div`
 `
 
 const ListItemName = styled.div`
-  color: #fff;
+  color: var(--color-text);
   font-size: 14px;
   font-weight: 600;
   margin-left: 6px;
 `
 
 const ModelHeaderTitle = styled.div`
-  color: #fff;
+  color: var(--color-text);
   font-size: 18px;
   font-weight: 600;
   margin-right: 10px;

src/renderer/src/pages/settings/components/ProviderSetting.tsx

@@ -6,13 +6,21 @@ import { useProvider } from '@renderer/hooks/useProvider'
 import { groupBy } from 'lodash'
 import { SettingContainer, SettingSubtitle, SettingTitle } from '.'
 import { getModelLogo } from '@renderer/config/provider'
-import { CheckOutlined, EditOutlined, ExportOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import {
+  CheckOutlined,
+  EditOutlined,
+  ExportOutlined,
+  LoadingOutlined,
+  MinusCircleOutlined,
+  PlusOutlined
+} from '@ant-design/icons'
 import AddModelPopup from './AddModelPopup'
 import EditModelsPopup from './EditModelsPopup'
 import Link from 'antd/es/typography/Link'
 import { checkApi } from '@renderer/services/api'
 import { useTranslation } from 'react-i18next'
 import { PROVIDER_CONFIG } from '@renderer/config/provider'
+import { useTheme } from '@renderer/providers/ThemeProvider'
 
 interface Props {
   provider: Provider
@@ -24,8 +32,9 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
   const [apiHost, setApiHost] = useState(provider.apiHost)
   const [apiValid, setApiValid] = useState(false)
   const [apiChecking, setApiChecking] = useState(false)
-  const { updateProvider, models } = useProvider(provider.id)
+  const { updateProvider, models, removeModel } = useProvider(provider.id)
   const { t } = useTranslation()
+  const { theme } = useTheme()
 
   const modelGroups = groupBy(models, 'group')
 
@@ -52,17 +61,27 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
   const apiKeyWebsite = providerConfig?.websites?.apiKey
   const docsWebsite = providerConfig?.websites?.docs
   const modelsWebsite = providerConfig?.websites?.models
+  const configedApiHost = providerConfig?.api?.url
+  const apiEditable = provider.isSystem ? providerConfig?.api?.editable : true
 
-  const apiKeyDisabled = provider.id === 'ollama'
+  const onReset = () => {
+    setApiHost(configedApiHost)
+    updateProvider({ ...provider, apiHost: configedApiHost })
+  }
 
   return (
-    <SettingContainer>
+    <SettingContainer
+      style={
+        theme === 'dark'
+          ? { backgroundColor: 'var(--color-background)' }
+          : { backgroundColor: 'var(--color-background-mute)' }
+      }>
       <SettingTitle>
         <Flex align="center">
           <span>{provider.isSystem ? t(`provider.${provider.id}`) : provider.name}</span>
           {officialWebsite! && (
             <Link target="_blank" href={providerConfig.websites.official}>
-              <ExportOutlined style={{ marginLeft: '8px', color: 'white', fontSize: '12px' }} />
+              <ExportOutlined style={{ marginLeft: '8px', color: 'var(--color-text)', fontSize: '12px' }} />
             </Link>
           )}
         </Flex>
@@ -81,15 +100,12 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
           onChange={(e) => setApiKey(e.target.value)}
           onBlur={onUpdateApiKey}
           spellCheck={false}
-          disabled={apiKeyDisabled}
           type="password"
           autoFocus={provider.enabled && apiKey === ''}
         />
-        {!apiKeyDisabled && (
-          <Button type={apiValid ? 'primary' : 'default'} ghost={apiValid} onClick={onCheckApi}>
-            {apiChecking ? <LoadingOutlined spin /> : apiValid ? <CheckOutlined /> : t('settings.provider.check')}
-          </Button>
-        )}
+        <Button type={apiValid ? 'primary' : 'default'} ghost={apiValid} onClick={onCheckApi}>
+          {apiChecking ? <LoadingOutlined spin /> : apiValid ? <CheckOutlined /> : t('settings.provider.check')}
+        </Button>
       </Space.Compact>
       {apiKeyWebsite && (
         <HelpTextRow>
@@ -99,22 +115,28 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
         </HelpTextRow>
       )}
       <SettingSubtitle>{t('settings.provider.api_host')}</SettingSubtitle>
-      <Input
-        value={apiHost}
-        placeholder={t('settings.provider.api_host')}
-        disabled={provider.isSystem}
-        onChange={(e) => setApiHost(e.target.value)}
-        onBlur={onUpdateApiHost}
-      />
+      <Space.Compact style={{ width: '100%' }}>
+        <Input
+          value={apiHost}
+          placeholder={t('settings.provider.api_host')}
+          onChange={(e) => setApiHost(e.target.value)}
+          onBlur={onUpdateApiHost}
+          disabled={!apiEditable}
+        />
+        {apiEditable && <Button onClick={onReset}>{t('settings.provider.api.url.reset')}</Button>}
+      </Space.Compact>
       <SettingSubtitle>{t('common.models')}</SettingSubtitle>
       {Object.keys(modelGroups).map((group) => (
         <Card key={group} type="inner" title={group} style={{ marginBottom: '10px' }} size="small">
           {modelGroups[group].map((model) => (
             <ModelListItem key={model.id}>
-              <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}>
-                {model.name[0].toUpperCase()}
-              </Avatar>
-              {model.name}
+              <ModelListHeader>
+                <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}>
+                  {model.name[0].toUpperCase()}
+                </Avatar>
+                {model.name}
+              </ModelListHeader>
+              <RemoveIcon onClick={() => removeModel(model)} />
             </ModelListItem>
           ))}
         </Card>
@@ -149,10 +171,16 @@ const ModelListItem = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: space-between;
   padding: 5px 0;
 `
 
+const ModelListHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`
+
 const HelpTextRow = styled.div`
   display: flex;
   flex-direction: row;
@@ -162,7 +190,8 @@ const HelpTextRow = styled.div`
 
 const HelpText = styled.div`
   font-size: 11px;
-  color: #ffffff50;
+  color: var(--color-text);
+  opacity: 0.4;
 `
 
 const HelpLink = styled(Link)`
@@ -170,4 +199,15 @@ const HelpLink = styled(Link)`
   padding: 0 5px;
 `
 
+const RemoveIcon = styled(MinusCircleOutlined)`
+  margin-left: 10px;
+  color: var(--color-error);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  opacity: 0.75;
+  &:hover {
+    opacity: 1;
+  }
+`
+
 export default ProviderSetting

src/renderer/src/pages/settings/components/index.tsx

@@ -43,5 +43,6 @@ export const SettingRow = styled.div`
 
 export const SettingRowTitle = styled.div`
   font-size: 14px;
+  line-height: 18px;
   color: var(--color-text-1);
 `

src/renderer/src/pages/translate/TranslatePage.tsx

@@ -0,0 +1,306 @@
+import {
+  CheckOutlined,
+  CopyOutlined,
+  SendOutlined,
+  SettingOutlined,
+  SwapOutlined,
+  WarningOutlined
+} from '@ant-design/icons'
+import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { useDefaultModel } from '@renderer/hooks/useAssistant'
+import { fetchTranslate } from '@renderer/services/api'
+import { getDefaultAssistant } from '@renderer/services/assistant'
+import { Assistant, Message } from '@renderer/types'
+import { uuid } from '@renderer/utils'
+import { Button, Select, Space } from 'antd'
+import TextArea from 'antd/es/input/TextArea'
+import { isEmpty } from 'lodash'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+
+let _text = ''
+let _result = ''
+let _targetLanguage = 'english'
+
+const TranslatePage: FC = () => {
+  const { t } = useTranslation()
+  const [targetLanguage, setTargetLanguage] = useState(_targetLanguage)
+  const [text, setText] = useState(_text)
+  const [result, setResult] = useState(_result)
+  const { translateModel } = useDefaultModel()
+  const [loading, setLoading] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  _text = text
+  _result = result
+  _targetLanguage = targetLanguage
+
+  const languageOptions = [
+    {
+      value: 'english',
+      label: t('languages.english'),
+      emoji: '🇬🇧'
+    },
+    {
+      value: 'chinese',
+      label: t('languages.chinese'),
+      emoji: '🇨🇳'
+    },
+    {
+      value: 'chinese-traditional',
+      label: t('languages.chinese-traditional'),
+      emoji: '🇭🇰'
+    },
+    {
+      value: 'japanese',
+      label: t('languages.japanese'),
+      emoji: '🇯🇵'
+    },
+    {
+      value: 'korean',
+      label: t('languages.korean'),
+      emoji: '🇰🇷'
+    },
+    {
+      value: 'russian',
+      label: t('languages.russian'),
+      emoji: '🇷🇺'
+    },
+    {
+      value: 'spanish',
+      label: t('languages.spanish'),
+      emoji: '🇪🇸'
+    },
+    {
+      value: 'french',
+      label: t('languages.french'),
+      emoji: '🇫🇷'
+    },
+    {
+      value: 'italian',
+      label: t('languages.italian'),
+      emoji: '🇮🇹'
+    },
+    {
+      value: 'portuguese',
+      label: t('languages.portuguese'),
+      emoji: '🇵🇹'
+    },
+    {
+      value: 'arabic',
+      label: t('languages.arabic'),
+      emoji: '🇸🇦'
+    }
+  ]
+
+  const onTranslate = async () => {
+    if (!text.trim()) {
+      return
+    }
+
+    if (!translateModel) {
+      window.message.error({
+        content: t('translate.error.not_configured'),
+        key: 'translate-message'
+      })
+      return
+    }
+
+    const assistant: Assistant = getDefaultAssistant()
+    assistant.model = translateModel
+    assistant.prompt = `Translate from input language to ${targetLanguage}, provide the translation result directly without any explanation, keep original format. If the target language is the same as the source language, do not translate. The text to be translated is as follows:\n\n ${text}`
+
+    const message: Message = {
+      id: uuid(),
+      role: 'user',
+      content: text,
+      assistantId: assistant.id,
+      topicId: uuid(),
+      modelId: translateModel.id,
+      createdAt: new Date().toISOString(),
+      status: 'sending'
+    }
+
+    setLoading(true)
+    const translateText = await fetchTranslate({ message, assistant })
+    setResult(translateText)
+    setLoading(false)
+  }
+
+  const onCopy = () => {
+    navigator.clipboard.writeText(result)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  useEffect(() => {
+    isEmpty(text) && setResult('')
+  }, [text])
+
+  return (
+    <Container>
+      <Navbar>
+        <NavbarCenter style={{ borderRight: 'none' }}>{t('translate.title')}</NavbarCenter>
+      </Navbar>
+      <ContentContainer>
+        <MenuContainer>
+          <Select
+            showSearch
+            value="any"
+            style={{ width: 180 }}
+            optionFilterProp="label"
+            disabled
+            options={[{ label: t('translate.any.language'), value: 'any' }]}
+          />
+          <SwapOutlined />
+          <Select
+            showSearch
+            value={targetLanguage}
+            style={{ width: 180 }}
+            optionFilterProp="label"
+            options={languageOptions}
+            onChange={(value) => setTargetLanguage(value)}
+            optionRender={(option) => (
+              <Space>
+                <span role="img" aria-label={option.data.label}>
+                  {option.data.emoji}
+                </span>
+                {option.label}
+              </Space>
+            )}
+          />
+          {translateModel && (
+            <Link to="/settings/model" style={{ color: 'var(--color-text-2)' }}>
+              <SettingOutlined />
+            </Link>
+          )}
+          {!translateModel && (
+            <Link to="/settings/model" style={{ marginLeft: -10 }}>
+              <Button
+                type="link"
+                style={{ color: 'var(--color-error)', textDecoration: 'underline' }}
+                icon={<WarningOutlined />}>
+                {t('translate.error.not_configured')}
+              </Button>
+            </Link>
+          )}
+        </MenuContainer>
+        <TranslateInputWrapper>
+          <InputContainer>
+            <Textarea
+              variant="borderless"
+              placeholder={t('translate.input.placeholder')}
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              disabled={loading}
+              allowClear
+            />
+            <TranslateButton
+              type="primary"
+              loading={loading}
+              onClick={onTranslate}
+              disabled={!text.trim()}
+              icon={<SendOutlined />}>
+              {t('translate.button.translate')}
+            </TranslateButton>
+          </InputContainer>
+          <OutputContainer>
+            <OutputText>{result || t('translate.output.placeholder')}</OutputText>
+            <CopyButton
+              onClick={onCopy}
+              disabled={!result}
+              icon={copied ? <CheckOutlined style={{ color: 'var(--color-primary)' }} /> : <CopyOutlined />}
+            />
+          </OutputContainer>
+        </TranslateInputWrapper>
+      </ContentContainer>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+`
+
+const ContentContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px;
+`
+
+const MenuContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 15px;
+  gap: 20px;
+`
+
+const TranslateInputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  min-height: 350px;
+  gap: 20px;
+`
+
+const InputContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+`
+
+const Textarea = styled(TextArea)`
+  display: flex;
+  flex: 1;
+  padding: 20px;
+  font-size: 16px;
+  overflow: auto;
+  .ant-input {
+    resize: none;
+    padding: 15px 20px;
+  }
+`
+
+const OutputContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  padding: 10px;
+  background-color: var(--color-background-soft);
+  border-radius: 10px;
+`
+
+const OutputText = styled.div`
+  padding: 5px 10px;
+  max-height: calc(100vh - var(--navbar-height) - 120px);
+  overflow: auto;
+  white-space: pre-wrap;
+`
+
+const TranslateButton = styled(Button)`
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+  z-index: 10;
+`
+
+const CopyButton = styled(Button)`
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+`
+
+export default TranslatePage

src/renderer/src/providers/AntdProvider.tsx

@@ -0,0 +1,37 @@
+import { useSettings } from '@renderer/hooks/useSettings'
+import { ConfigProvider, theme } from 'antd'
+import zhCN from 'antd/locale/zh_CN'
+import { FC, PropsWithChildren } from 'react'
+import { useTheme } from './ThemeProvider'
+
+const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { language } = useSettings()
+  const { theme: _theme } = useTheme()
+
+  return (
+    <ConfigProvider
+      locale={getAntdLocale(language)}
+      theme={{
+        algorithm: [_theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm],
+        token: {
+          colorPrimary: '#00b96b',
+          borderRadius: 5
+        }
+      }}>
+      {children}
+    </ConfigProvider>
+  )
+}
+
+function getAntdLocale(language: string) {
+  switch (language) {
+    case 'zh-CN':
+      return zhCN
+    case 'en-US':
+      return undefined
+    default:
+      return zhCN
+  }
+}
+
+export default AntdProvider

src/renderer/src/providers/ThemeProvider.tsx

@@ -0,0 +1,43 @@
+import { useSettings } from '@renderer/hooks/useSettings'
+import { ThemeMode } from '@renderer/store/settings'
+import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
+
+interface ThemeContextType {
+  theme: ThemeMode
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+  theme: ThemeMode.light,
+  toggleTheme: () => {}
+})
+
+export const ThemeProvider: React.FC<PropsWithChildren> = ({ children }) => {
+  const { theme, setTheme } = useSettings()
+  const [_theme, _setTheme] = useState(theme)
+
+  const toggleTheme = () => {
+    setTheme(theme === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark)
+  }
+
+  useEffect((): any => {
+    if (theme === ThemeMode.auto) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      _setTheme(mediaQuery.matches ? ThemeMode.dark : ThemeMode.light)
+      const handleChange = (e: MediaQueryListEvent) => _setTheme(e.matches ? ThemeMode.dark : ThemeMode.light)
+      mediaQuery.addEventListener('change', handleChange)
+      return () => mediaQuery.removeEventListener('change', handleChange)
+    } else {
+      _setTheme(theme)
+    }
+  }, [theme])
+
+  useEffect(() => {
+    document.body.setAttribute('theme-mode', _theme)
+    window.api.setTheme(_theme === ThemeMode.dark ? 'dark' : 'light')
+  }, [_theme])
+
+  return <ThemeContext.Provider value={{ theme: _theme, toggleTheme }}>{children}</ThemeContext.Provider>
+}
+
+export const useTheme = () => useContext(ThemeContext)

src/renderer/src/services/ProviderSDK.ts

@@ -73,6 +73,33 @@ export default class ProviderSDK {
     }
   }
 
+  public async translate(message: Message, assistant: Assistant) {
+    const defaultModel = getDefaultModel()
+    const model = assistant.model || defaultModel
+    const messages = [
+      { role: 'system', content: assistant.prompt },
+      { role: 'user', content: message.content }
+    ]
+
+    if (this.isAnthropic) {
+      const response = await this.anthropicSdk.messages.create({
+        model: model.id,
+        messages: messages as MessageParam[],
+        max_tokens: 4096,
+        temperature: assistant?.settings?.temperature,
+        stream: false
+      })
+      return response.content[0].type === 'text' ? response.content[0].text : ''
+    } else {
+      const response = await this.openaiSdk.chat.completions.create({
+        model: model.id,
+        messages: messages as ChatCompletionMessageParam[],
+        stream: false
+      })
+      return response.choices[0].message?.content || ''
+    }
+  }
+
   public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
     const model = getTopNamingModel() || assistant.model || getDefaultModel()
 

src/renderer/src/services/api.ts

@@ -4,9 +4,16 @@ import { setGenerating } from '@renderer/store/runtime'
 import { Assistant, Message, Provider, Topic } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import dayjs from 'dayjs'
-import { getAssistantProvider, getDefaultModel, getProviderByModel, getTopNamingModel } from './assistant'
+import {
+  getAssistantProvider,
+  getDefaultModel,
+  getProviderByModel,
+  getTopNamingModel,
+  getTranslateModel
+} from './assistant'
 import { EVENT_NAMES, EventEmitter } from './event'
 import ProviderSDK from './ProviderSDK'
+import { isEmpty } from 'lodash'
 
 export async function fetchChatCompletion({
   messages,
@@ -63,11 +70,43 @@ export async function fetchChatCompletion({
   return message
 }
 
+export async function fetchTranslate({ message, assistant }: { message: Message; assistant: Assistant }) {
+  const model = getTranslateModel()
+
+  if (!model) {
+    return ''
+  }
+
+  const provider = getProviderByModel(model)
+
+  if (!hasApiKey(provider)) {
+    return ''
+  }
+
+  const providerSdk = new ProviderSDK(provider)
+
+  try {
+    return await providerSdk.translate(message, assistant)
+  } catch (error: any) {
+    return ''
+  }
+}
+
 export async function fetchMessagesSummary({ messages, assistant }: { messages: Message[]; assistant: Assistant }) {
   const model = getTopNamingModel() || assistant.model || getDefaultModel()
   const provider = getProviderByModel(model)
+
+  if (!hasApiKey(provider)) {
+    return null
+  }
+
   const providerSdk = new ProviderSDK(provider)
-  return providerSdk.summaries(messages, assistant)
+
+  try {
+    return await providerSdk.summaries(messages, assistant)
+  } catch (error: any) {
+    return null
+  }
 }
 
 export async function checkApi(provider: Provider) {
@@ -104,6 +143,12 @@ export async function checkApi(provider: Provider) {
   return valid
 }
 
+function hasApiKey(provider: Provider) {
+  if (!provider) return false
+  if (provider.id === 'ollama') return true
+  return !isEmpty(provider.apiKey)
+}
+
 export async function fetchModels(provider: Provider) {
   const providerSdk = new ProviderSDK(provider)
 

src/renderer/src/services/assistant.ts

@@ -32,6 +32,10 @@ export function getTopNamingModel() {
   return store.getState().llm.topicNamingModel
 }
 
+export function getTranslateModel() {
+  return store.getState().llm.translateModel
+}
+
 export function getAssistantProvider(assistant: Assistant) {
   const providers = store.getState().llm.providers
   const provider = providers.find((p) => p.id === assistant.model?.provider)

src/renderer/src/services/event.ts

@@ -11,5 +11,8 @@ export const EVENT_NAMES = {
   EDIT_MESSAGE: 'EDIT_MESSAGE',
   REGENERATE_MESSAGE: 'REGENERATE_MESSAGE',
   CHAT_COMPLETION_PAUSED: 'CHAT_COMPLETION_PAUSED',
-  ESTIMATED_TOKEN_COUNT: 'ESTIMATED_TOKEN_COUNT'
+  ESTIMATED_TOKEN_COUNT: 'ESTIMATED_TOKEN_COUNT',
+  SHOW_CHAT_SETTINGS: 'SHOW_CHAT_SETTINGS',
+  SHOW_TOPIC_SIDEBAR: 'SHOW_TOPIC_SIDEBAR',
+  SWITCH_TOPIC_SIDEBAR: 'SWITCH_TOPIC_SIDEBAR'
 }

src/renderer/src/store/index.ts

@@ -19,7 +19,7 @@ const persistedReducer = persistReducer(
   {
     key: 'cherry-studio',
     storage,
-    version: 14,
+    version: 17,
     blacklist: ['runtime'],
     migrate
   },

src/renderer/src/store/llm.ts

@@ -7,11 +7,13 @@ export interface LlmState {
   providers: Provider[]
   defaultModel: Model
   topicNamingModel: Model
+  translateModel: Model
 }
 
 const initialState: LlmState = {
   defaultModel: SYSTEM_MODELS.openai[0],
   topicNamingModel: SYSTEM_MODELS.openai[0],
+  translateModel: SYSTEM_MODELS.openai[0],
   providers: [
     {
       id: 'openai',
@@ -174,6 +176,9 @@ const settingsSlice = createSlice({
     },
     setTopicNamingModel: (state, action: PayloadAction<{ model: Model }>) => {
       state.topicNamingModel = action.payload.model
+    },
+    setTranslateModel: (state, action: PayloadAction<{ model: Model }>) => {
+      state.translateModel = action.payload.model
     }
   }
 })
@@ -186,7 +191,8 @@ export const {
   addModel,
   removeModel,
   setDefaultModel,
-  setTopicNamingModel
+  setTopicNamingModel,
+  setTranslateModel
 } = settingsSlice.actions
 
 export default settingsSlice.reducer

src/renderer/src/store/migrate.ts

@@ -5,8 +5,7 @@ import { isEmpty } from 'lodash'
 import i18n from '@renderer/i18n'
 import { Assistant } from '@renderer/types'
 
-const migrate = createMigrate({
-  // @ts-ignore store type is unknown
+const migrateConfig = {
   '2': (state: RootState) => {
     return {
       ...state,
@@ -26,7 +25,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '3': (state: RootState) => {
     return {
       ...state,
@@ -46,7 +44,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '4': (state: RootState) => {
     return {
       ...state,
@@ -66,7 +63,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '5': (state: RootState) => {
     return {
       ...state,
@@ -86,7 +82,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '6': (state: RootState) => {
     return {
       ...state,
@@ -106,7 +101,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '7': (state: RootState) => {
     return {
       ...state,
@@ -116,7 +110,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '8': (state: RootState) => {
     const fixAssistantName = (assistant: Assistant) => {
       if (isEmpty(assistant.name)) {
@@ -142,7 +135,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '9': (state: RootState) => {
     return {
       ...state,
@@ -157,7 +149,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '10': (state: RootState) => {
     return {
       ...state,
@@ -178,7 +169,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '11': (state: RootState) => {
     return {
       ...state,
@@ -208,7 +198,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '12': (state: RootState) => {
     return {
       ...state,
@@ -229,7 +218,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '13': (state: RootState) => {
     return {
       ...state,
@@ -244,7 +232,6 @@ const migrate = createMigrate({
       }
     }
   },
-  // @ts-ignore store type is unknown
   '14': (state: RootState) => {
     return {
       ...state,
@@ -254,7 +241,38 @@ const migrate = createMigrate({
         proxyUrl: undefined
       }
     }
+  },
+  '15': (state: RootState) => {
+    return {
+      ...state,
+      settings: {
+        ...state.settings,
+        userName: '',
+        showMessageDivider: true
+      }
+    }
+  },
+  '16': (state: RootState) => {
+    return {
+      ...state,
+      settings: {
+        ...state.settings,
+        messageFont: 'system',
+        showInputEstimatedTokens: false
+      }
+    }
+  },
+  '17': (state: RootState) => {
+    return {
+      ...state,
+      settings: {
+        ...state.settings,
+        theme: 'auto'
+      }
+    }
   }
-})
+}
+
+const migrate = createMigrate(migrateConfig as any)
 
 export default migrate

src/renderer/src/store/settings.ts

@@ -2,12 +2,23 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 
 export type SendMessageShortcut = 'Enter' | 'Shift+Enter'
 
+export enum ThemeMode {
+  light = 'light',
+  dark = 'dark',
+  auto = 'auto'
+}
+
 export interface SettingsState {
   showRightSidebar: boolean
   showAssistants: boolean
   sendMessageShortcut: SendMessageShortcut
   language: string
   proxyUrl?: string
+  userName: string
+  showMessageDivider: boolean
+  messageFont: 'system' | 'serif'
+  showInputEstimatedTokens: boolean
+  theme: ThemeMode
 }
 
 const initialState: SettingsState = {
@@ -15,7 +26,12 @@ const initialState: SettingsState = {
   showAssistants: true,
   sendMessageShortcut: 'Enter',
   language: navigator.language,
-  proxyUrl: undefined
+  proxyUrl: undefined,
+  userName: '',
+  showMessageDivider: true,
+  messageFont: 'system',
+  showInputEstimatedTokens: false,
+  theme: ThemeMode.light
 }
 
 const settingsSlice = createSlice({
@@ -25,6 +41,9 @@ const settingsSlice = createSlice({
     toggleRightSidebar: (state) => {
       state.showRightSidebar = !state.showRightSidebar
     },
+    setShowRightSidebar: (state, action: PayloadAction<boolean>) => {
+      state.showRightSidebar = action.payload
+    },
     toggleShowAssistants: (state) => {
       state.showAssistants = !state.showAssistants
     },
@@ -36,11 +55,37 @@ const settingsSlice = createSlice({
     },
     setProxyUrl: (state, action: PayloadAction<string | undefined>) => {
       state.proxyUrl = action.payload
+    },
+    setUserName: (state, action: PayloadAction<string>) => {
+      state.userName = action.payload
+    },
+    setShowMessageDivider: (state, action: PayloadAction<boolean>) => {
+      state.showMessageDivider = action.payload
+    },
+    setMessageFont: (state, action: PayloadAction<'system' | 'serif'>) => {
+      state.messageFont = action.payload
+    },
+    setShowInputEstimatedTokens: (state, action: PayloadAction<boolean>) => {
+      state.showInputEstimatedTokens = action.payload
+    },
+    setTheme: (state, action: PayloadAction<ThemeMode>) => {
+      state.theme = action.payload
     }
   }
 })
 
-export const { toggleRightSidebar, toggleShowAssistants, setSendMessageShortcut, setLanguage, setProxyUrl } =
-  settingsSlice.actions
+export const {
+  setShowRightSidebar,
+  toggleRightSidebar,
+  toggleShowAssistants,
+  setSendMessageShortcut,
+  setLanguage,
+  setProxyUrl,
+  setUserName,
+  setShowMessageDivider,
+  setMessageFont,
+  setShowInputEstimatedTokens,
+  setTheme
+} = settingsSlice.actions
 
 export default settingsSlice.reducer

src/renderer/src/utils/index.ts

@@ -93,9 +93,14 @@ export function droppableReorder<T>(list: T[], startIndex: number, endIndex: num
   return result
 }
 
-// firstLetter
-export const firstLetter = (str?: string) => {
-  return str ? str[0] : ''
+export function firstLetter(str: string): string {
+  const match = str?.match(/\p{L}\p{M}*|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/u)
+  return match ? match[0] : ''
+}
+
+export function removeLeadingEmoji(str: string): string {
+  const emojiRegex = /^(\p{Emoji_Presentation}|\p{Emoji}\uFE0F)+/u
+  return str.replace(emojiRegex, '')
 }
 
 export function isFreeModel(model: Model) {
@@ -199,12 +204,24 @@ export function estimateHistoryTokenCount(assistant: Assistant, msgs: Message[])
   return all.usedTokens - 7
 }
 
-// 首字母大写
-export const capitalizeFirstLetter = (str: string) => {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-// is valid proxy url
+/**
+ * is valid proxy url
+ * @param url proxy url
+ * @returns boolean
+ */
 export const isValidProxyUrl = (url: string) => {
   return url.includes('://')
 }
+
+export function loadScript(url: string) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.src = url
+
+    script.onload = resolve
+    script.onerror = reject
+
+    document.head.appendChild(script)
+  })
+}

src/website/index.html

@@ -1,209 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta
-      name="description"
-      content="Cherry Studio AI 是一款强大的多模型 AI 助手，支持 iOS、macOS 和 Windows 平台。快速切换多个先进的 LLM 模型，提升工作学习效率。" />
-    <meta name="keywords" content="Cherry Studio AI, AI 助手, GPT 客户端, 多模型, iOS, macOS, Windows, LLM" />
-    <meta name="author" content="kangfenmao" />
-    <link rel="canonical" href="https://easys.run/cherry-studio" />
-    <link rel="icon" type="image/png" href="https://easys.run/cherry-studio/logo.png" />
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://easys.run/cherry-studio" />
-    <meta property="og:title" content="Cherry Studio AI - 多模型 AI 助手" />
-    <meta
-      property="og:description"
-      content="Cherry Studio AI 是一款强大的多模型 AI 助手，支持 iOS、macOS 和 Windows 平台。快速切换多个先进的 LLM 模型，提升工作学习效率。" />
-    <meta property="og:image" content="https://github.com/kangfenmao/cherry-studio/blob/main/build/icon.png?raw=true" />
-
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content="https://x.com/kangfenmao" />
-    <meta property="twitter:title" content="Cherry Studio AI - 多模型 AI 助手" />
-    <meta
-      property="twitter:description"
-      content="Cherry Studio AI 是一款强大的多模型 AI 助手，支持 iOS、macOS 和 Windows 平台。快速切换多个先进的 LLM 模型，提升工作学习效率。" />
-    <meta
-      property="twitter:image"
-      content="https://github.com/kangfenmao/cherry-studio/blob/main/build/icon.png?raw=true" />
-
-    <title>Cherry Studio AI - 多模型AI助手</title>
-    <style>
-      body {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-          'Helvetica Neue', sans-serif;
-        background-color: #000000;
-        color: #ffffff;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100vh;
-        margin: 0;
-        text-align: center;
-      }
-      .logo {
-        width: 100px;
-        height: 100px;
-        margin-bottom: 20px;
-        border-radius: 10%;
-        margin-top: -10vh;
-      }
-      h1 {
-        font-size: 48px;
-        margin-bottom: 10px;
-      }
-      .description {
-        font-size: 18px;
-        margin-bottom: 30px;
-        color: #a0a0a0;
-      }
-      .download-buttons {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 15px;
-        margin-bottom: 30px;
-      }
-      .download-btn {
-        background-color: #ffffff;
-        color: #000000;
-        padding: 10px 20px;
-        border-radius: 25px;
-        text-decoration: none;
-        font-weight: bold;
-        transition: background-color 0.3s;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .download-btn:hover {
-        background-color: #e0e0e0;
-      }
-      .download-btn svg {
-        margin-right: 10px;
-        width: 24px;
-        height: 24px;
-      }
-      .new-app {
-        margin-top: 20px;
-        font-size: 14px;
-        color: #a0a0a0;
-      }
-      .footer {
-        position: absolute;
-        bottom: 20px;
-        font-size: 14px;
-        color: #a0a0a0;
-      }
-      .footer a {
-        color: #a0a0a0;
-        text-decoration: none;
-        margin: 0 10px;
-      }
-      a {
-        color: #ffffff;
-        text-decoration: underline;
-      }
-      .loading {
-        flex-direction: row;
-        justify-content: center;
-        height: 200px;
-      }
-      [v-cloak] {
-        display: none;
-      }
-    </style>
-  </head>
-  <body id="app">
-    <a href="https://github.com/kangfenmao/cherry-studio" target="_blank">
-      <img src="https://easys.run/cherry-studio/logo.png" alt="Cherry Studio AI Logo" class="logo" />
-    </a>
-    <h1>Cherry Studio AI</h1>
-    <p class="description">Windows/macOS GPT 客户端</p>
-    <div class="download-buttons">
-      <a
-        :href="`https://github.com/kangfenmao/cherry-studio/releases/download/v${version}/Cherry-Studio-${version}-x64.dmg`"
-        class="download-btn">
-        <svg viewBox="0 0 384 512" width="24" height="24">
-          <path
-            fill="currentColor"
-            d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
-        </svg>
-        macOS Intel
-      </a>
-      <a
-        :href="`https://github.com/kangfenmao/cherry-studio/releases/download/v${version}/Cherry-Studio-${version}-arm64.dmg`"
-        class="download-btn">
-        <svg viewBox="0 0 384 512" width="24" height="24">
-          <path
-            fill="currentColor"
-            d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" />
-        </svg>
-        macOS Apple Silicon
-      </a>
-      <a
-        :href="`https://github.com/kangfenmao/cherry-studio/releases/download/v${version}/Cherry-Studio-${version}-setup.exe`"
-        class="download-btn">
-        <svg viewBox="0 0 448 512" width="24" height="24">
-          <path
-            fill="currentColor"
-            d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z" />
-        </svg>
-        下载 Windows 版本
-      </a>
-    </div>
-    <p class="new-app">
-      🎉 <a href="https://github.com/kangfenmao/cherry-studio" target="_blank">Cherry Studio AI</a> 最新版本
-      <a :href="`https://github.com/kangfenmao/cherry-studio/releases/tag/v${version}`" target="_blank" v-cloak
-        >v{{version}}</a
-      >
-      发布啦！
-    </p>
-    <div class="footer">
-      <a href="https://github.com/kangfenmao/cherry-studio" target="_blank">开源</a> |
-      <a href="https://github.com/kangfenmao/cherry-studio/blob/main/README.md" target="_blank">帮助</a> |
-      <a href="mailto:kangfenmao@qq.com" target="_blank">联系</a>
-    </div>
-    <!-- 结构化数据 -->
-    <script type="application/ld+json">
-      {
-        "@context": "https://schema.org",
-        "@type": "SoftwareApplication",
-        "name": "Cherry Studio AI",
-        "applicationCategory": "UtilitiesApplication",
-        "operatingSystem": "iOS, macOS, Windows",
-        "description": "Cherry Studio AI 是一款强大的多模型 AI 助手，支持 iOS、macOS 和 Windows 平台。快速切换多个先进的 LLM 模型，提升工作学习效率。",
-        "offers": {
-          "@type": "Offer",
-          "price": "0",
-          "priceCurrency": "USD"
-        }
-      }
-    </script>
-    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-    <script>
-      const { createApp } = Vue
-
-      createApp({
-        data() {
-          return {
-            version: '0.3.2',
-            loading: true
-          }
-        },
-        mounted() {
-          this.loading = true
-          fetch('https://api.github.com/repos/kangfenmao/cherry-studio/releases/latest')
-            .then((response) => response.json())
-            .then((data) => (this.version = data.tag_name.replace('v', '')))
-            .finally(() => (this.loading = false))
-        }
-      }).mount('#app')
-    </script>
-  </body>
-</html>

yarn.lock

@@ -961,13 +961,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fontsource/inter@npm:^5.0.18":
-  version: 5.0.18
-  resolution: "@fontsource/inter@npm:5.0.18"
-  checksum: 10c0/87863160b18a3a2b2cc0b2949b41b4072f422efb672f183a8fa2ae19bd803da18ec24a65344c42c1686c73e1b65bb4a7cd64ce5c0f015872c5f5dcba4e64bf92
-  languageName: node
-  linkType: hard
-
 "@hello-pangea/dnd@npm:^16.6.0":
   version: 16.6.0
   resolution: "@hello-pangea/dnd@npm:16.6.0"
@@ -2717,6 +2710,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv-formats@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "ajv-formats@npm:2.1.1"
+  dependencies:
+    ajv: "npm:^8.0.0"
+  peerDependencies:
+    ajv: ^8.0.0
+  peerDependenciesMeta:
+    ajv:
+      optional: true
+  checksum: 10c0/e43ba22e91b6a48d96224b83d260d3a3a561b42d391f8d3c6d2c1559f9aa5b253bfb306bc94bbeca1d967c014e15a6efe9a207309e95b3eaae07fcbcdc2af662
+  languageName: node
+  linkType: hard
+
 "ajv-keywords@npm:^3.4.1":
   version: 3.5.2
   resolution: "ajv-keywords@npm:3.5.2"
@@ -2738,6 +2745,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv@npm:^8.0.0, ajv@npm:^8.6.3":
+  version: 8.17.1
+  resolution: "ajv@npm:8.17.1"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.3"
+    fast-uri: "npm:^3.0.1"
+    json-schema-traverse: "npm:^1.0.0"
+    require-from-string: "npm:^2.0.2"
+  checksum: 10c0/ec3ba10a573c6b60f94639ffc53526275917a2df6810e4ab5a6b959d87459f9ef3f00d5e7865b82677cb7d21590355b34da14d1d0b9c32d75f95a187e76fff35
+  languageName: node
+  linkType: hard
+
 "ansi-regex@npm:^5.0.1":
   version: 5.0.1
   resolution: "ansi-regex@npm:5.0.1"
@@ -3057,6 +3076,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"atomically@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "atomically@npm:1.7.0"
+  checksum: 10c0/31f5efd5d69474681268557af4024f9e10223bb6b39fdedb5f2e19405186c4b76284fac9f6c43c9af75013cad6437e93b7168268f5ddb7aaf1cfc5fdb415f227
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"
@@ -3413,7 +3439,6 @@ __metadata:
     "@electron-toolkit/preload": "npm:^3.0.0"
     "@electron-toolkit/tsconfig": "npm:^1.0.1"
     "@electron-toolkit/utils": "npm:^3.0.0"
-    "@fontsource/inter": "npm:^5.0.18"
     "@hello-pangea/dnd": "npm:^16.6.0"
     "@kangfenmao/keyv-storage": "npm:^0.1.0"
     "@reduxjs/toolkit": "npm:^2.2.5"
@@ -3432,6 +3457,7 @@ __metadata:
     electron-builder: "npm:^24.9.1"
     electron-devtools-installer: "npm:^3.2.0"
     electron-log: "npm:^5.1.5"
+    electron-store: "npm:^8.2.0"
     electron-updater: "npm:^6.1.7"
     electron-vite: "npm:^2.0.0"
     electron-window-state: "npm:^5.0.3"
@@ -3640,6 +3666,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"conf@npm:^10.2.0":
+  version: 10.2.0
+  resolution: "conf@npm:10.2.0"
+  dependencies:
+    ajv: "npm:^8.6.3"
+    ajv-formats: "npm:^2.1.1"
+    atomically: "npm:^1.7.0"
+    debounce-fn: "npm:^4.0.0"
+    dot-prop: "npm:^6.0.1"
+    env-paths: "npm:^2.2.1"
+    json-schema-typed: "npm:^7.0.3"
+    onetime: "npm:^5.1.2"
+    pkg-up: "npm:^3.1.0"
+    semver: "npm:^7.3.5"
+  checksum: 10c0/d608d8c54ba7fad368eac640e77f2ce0334ec27cfd62ac39f44e361af8af9915eaa6c2ada81fbc25c3219273d972b4868bc752e8e2116cb6e12d35df72dc25a4
+  languageName: node
+  linkType: hard
+
 "config-file-ts@npm:^0.2.4":
   version: 0.2.6
   resolution: "config-file-ts@npm:0.2.6"
@@ -3774,6 +3818,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debounce-fn@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "debounce-fn@npm:4.0.0"
+  dependencies:
+    mimic-fn: "npm:^3.0.0"
+  checksum: 10c0/bcbd8eb253bdb6ee2f32759c95973c62bc479e74efbe1a44e17acfb0ea7d4bcbe615bf7e34aab80247ac08669c1ab72f7da0f384ceb7f15c18333d31d9030384
+  languageName: node
+  linkType: hard
+
 "debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
@@ -3969,6 +4022,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dot-prop@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "dot-prop@npm:6.0.1"
+  dependencies:
+    is-obj: "npm:^2.0.0"
+  checksum: 10c0/30e51ec6408978a6951b21e7bc4938aad01a86f2fdf779efe52330205c6bb8a8ea12f35925c2029d6dc9d1df22f916f32f828ce1e9b259b1371c580541c22b5a
+  languageName: node
+  linkType: hard
+
 "dotenv-cli@npm:^7.4.2":
   version: 7.4.2
   resolution: "dotenv-cli@npm:7.4.2"
@@ -4085,6 +4147,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-store@npm:^8.2.0":
+  version: 8.2.0
+  resolution: "electron-store@npm:8.2.0"
+  dependencies:
+    conf: "npm:^10.2.0"
+    type-fest: "npm:^2.17.0"
+  checksum: 10c0/a4d19827e96ab67bf6c2a375910f51b147b23f4a0468da5cfeeb069acdfdbcd3a9f5650248a62a05aa0967149e4d1c47f2d0ba7582205e5eb38952c93b6882e1
+  languageName: node
+  linkType: hard
+
 "electron-to-chromium@npm:^1.4.668":
   version: 1.4.776
   resolution: "electron-to-chromium@npm:1.4.776"
@@ -4192,7 +4264,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"env-paths@npm:^2.2.0":
+"env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
   checksum: 10c0/285325677bf00e30845e330eec32894f5105529db97496ee3f598478e50f008c5352a41a30e5e72ec9de8a542b5a570b85699cd63bd2bc646dbcb9f311d83bc4
@@ -4817,6 +4889,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-uri@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "fast-uri@npm:3.0.1"
+  checksum: 10c0/3cd46d6006083b14ca61ffe9a05b8eef75ef87e9574b6f68f2e17ecf4daa7aaadeff44e3f0f7a0ef4e0f7e7c20fc07beec49ff14dc72d0b500f00386592f2d10
+  languageName: node
+  linkType: hard
+
 "fastq@npm:^1.6.0":
   version: 1.17.1
   resolution: "fastq@npm:1.17.1"
@@ -4871,6 +4950,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-up@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "find-up@npm:3.0.0"
+  dependencies:
+    locate-path: "npm:^3.0.0"
+  checksum: 10c0/2c2e7d0a26db858e2f624f39038c74739e38306dee42b45f404f770db357947be9d0d587f1cac72d20c114deb38aa57316e879eb0a78b17b46da7dab0a3bd6e3
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^5.0.0":
   version: 5.0.0
   resolution: "find-up@npm:5.0.0"
@@ -5891,6 +5979,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-obj@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "is-obj@npm:2.0.0"
+  checksum: 10c0/85044ed7ba8bd169e2c2af3a178cacb92a97aa75de9569d02efef7f443a824b5e153eba72b9ae3aca6f8ce81955271aa2dc7da67a8b720575d3e38104208cb4e
+  languageName: node
+  linkType: hard
+
 "is-path-inside@npm:^3.0.3":
   version: 3.0.3
   resolution: "is-path-inside@npm:3.0.3"
@@ -6143,6 +6238,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-schema-traverse@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "json-schema-traverse@npm:1.0.0"
+  checksum: 10c0/71e30015d7f3d6dc1c316d6298047c8ef98a06d31ad064919976583eb61e1018a60a0067338f0f79cabc00d84af3fcc489bd48ce8a46ea165d9541ba17fb30c6
+  languageName: node
+  linkType: hard
+
+"json-schema-typed@npm:^7.0.3":
+  version: 7.0.3
+  resolution: "json-schema-typed@npm:7.0.3"
+  checksum: 10c0/b4a6d984dd91f9aba72df8768c5ced99e789b8e17b55ee24afb3a687ce55b70a7b3f4360cac67939e1ff98e136ca26f3aa530635c13ef371ae5edc48b69a65f6
+  languageName: node
+  linkType: hard
+
 "json-stable-stringify-without-jsonify@npm:^1.0.1":
   version: 1.0.1
   resolution: "json-stable-stringify-without-jsonify@npm:1.0.1"
@@ -6277,6 +6386,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"locate-path@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "locate-path@npm:3.0.0"
+  dependencies:
+    p-locate: "npm:^3.0.0"
+    path-exists: "npm:^3.0.0"
+  checksum: 10c0/3db394b7829a7fe2f4fbdd25d3c4689b85f003c318c5da4052c7e56eed697da8f1bce5294f685c69ff76e32cba7a33629d94396976f6d05fb7f4c755c5e2ae8b
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^6.0.0":
   version: 6.0.0
   resolution: "locate-path@npm:6.0.0"
@@ -6825,6 +6944,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mimic-fn@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "mimic-fn@npm:2.1.0"
+  checksum: 10c0/b26f5479d7ec6cc2bce275a08f146cf78f5e7b661b18114e2506dd91ec7ec47e7a25bf4360e5438094db0560bcc868079fb3b1fb3892b833c1ecbf63f80c95a4
+  languageName: node
+  linkType: hard
+
+"mimic-fn@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "mimic-fn@npm:3.1.0"
+  checksum: 10c0/a07cdd8ed6490c2dff5b11f889b245d9556b80f5a653a552a651d17cff5a2d156e632d235106c2369f00cccef4071704589574cf3601bc1b1400a1f620dff067
+  languageName: node
+  linkType: hard
+
 "mimic-response@npm:^1.0.0":
   version: 1.0.1
   resolution: "mimic-response@npm:1.0.1"
@@ -7222,6 +7355,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"onetime@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "onetime@npm:5.1.2"
+  dependencies:
+    mimic-fn: "npm:^2.1.0"
+  checksum: 10c0/ffcef6fbb2692c3c40749f31ea2e22677a876daea92959b8a80b521d95cca7a668c884d8b2045d1d8ee7d56796aa405c405462af112a1477594cc63531baeb8f
+  languageName: node
+  linkType: hard
+
 "openai-chat-tokens@npm:^0.2.8":
   version: 0.2.8
   resolution: "openai-chat-tokens@npm:0.2.8"
@@ -7281,6 +7423,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-limit@npm:^2.0.0":
+  version: 2.3.0
+  resolution: "p-limit@npm:2.3.0"
+  dependencies:
+    p-try: "npm:^2.0.0"
+  checksum: 10c0/8da01ac53efe6a627080fafc127c873da40c18d87b3f5d5492d465bb85ec7207e153948df6b9cbaeb130be70152f874229b8242ee2be84c0794082510af97f12
+  languageName: node
+  linkType: hard
+
 "p-limit@npm:^3.0.2":
   version: 3.1.0
   resolution: "p-limit@npm:3.1.0"
@@ -7290,6 +7441,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-locate@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "p-locate@npm:3.0.0"
+  dependencies:
+    p-limit: "npm:^2.0.0"
+  checksum: 10c0/7b7f06f718f19e989ce6280ed4396fb3c34dabdee0df948376483032f9d5ec22fdf7077ec942143a75827bb85b11da72016497fc10dac1106c837ed593969ee8
+  languageName: node
+  linkType: hard
+
 "p-locate@npm:^5.0.0":
   version: 5.0.0
   resolution: "p-locate@npm:5.0.0"
@@ -7308,6 +7468,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-try@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "p-try@npm:2.2.0"
+  checksum: 10c0/c36c19907734c904b16994e6535b02c36c2224d433e01a2f1ab777237f4d86e6289fd5fd464850491e940379d4606ed850c03e0f9ab600b0ebddb511312e177f
+  languageName: node
+  linkType: hard
+
 "package-json-from-dist@npm:^1.0.0":
   version: 1.0.0
   resolution: "package-json-from-dist@npm:1.0.0"
@@ -7361,6 +7528,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-exists@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "path-exists@npm:3.0.0"
+  checksum: 10c0/17d6a5664bc0a11d48e2b2127d28a0e58822c6740bde30403f08013da599182289c56518bec89407e3f31d3c2b6b296a4220bc3f867f0911fee6952208b04167
+  languageName: node
+  linkType: hard
+
 "path-exists@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-exists@npm:4.0.0"
@@ -7483,6 +7657,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pkg-up@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "pkg-up@npm:3.1.0"
+  dependencies:
+    find-up: "npm:^3.0.0"
+  checksum: 10c0/ecb60e1f8e1f611c0bdf1a0b6a474d6dfb51185567dc6f29cdef37c8d480ecba5362e006606bb290519bbb6f49526c403fabea93c3090c20368d98bb90c999ab
+  languageName: node
+  linkType: hard
+
 "plist@npm:^3.0.4, plist@npm:^3.0.5":
   version: 3.1.0
   resolution: "plist@npm:3.1.0"
@@ -8591,6 +8774,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"require-from-string@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "require-from-string@npm:2.0.2"
+  checksum: 10c0/aaa267e0c5b022fc5fd4eef49d8285086b15f2a1c54b28240fdf03599cbd9c26049fee3eab894f2e1f6ca65e513b030a7c264201e3f005601e80c49fb2937ce2
+  languageName: node
+  linkType: hard
+
 "require-in-the-middle@npm:^7.1.1":
   version: 7.3.0
   resolution: "require-in-the-middle@npm:7.3.0"
@@ -9499,6 +9689,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:^2.17.0":
+  version: 2.19.0
+  resolution: "type-fest@npm:2.19.0"
+  checksum: 10c0/a5a7ecf2e654251613218c215c7493574594951c08e52ab9881c9df6a6da0aeca7528c213c622bc374b4e0cb5c443aa3ab758da4e3c959783ce884c3194e12cb
+  languageName: node
+  linkType: hard
+
 "typed-array-buffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "typed-array-buffer@npm:1.0.2"