chore(version): 0.5.3

.eslintrc.cjs

@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['unused-imports'],
+  plugins: ['unused-imports', 'simple-import-sort'],
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
@@ -14,12 +14,7 @@ module.exports = {
     'unused-imports/no-unused-imports': 'error',
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
     'react/prop-types': 'off',
-    'sort-imports': [
+    'simple-import-sort/imports': 'error',
-      'error',
+    'simple-import-sort/exports': 'error'
-      {
-        ignoreCase: true,
-        ignoreDeclarationSort: true
-      }
-    ]
   }
 }

.github/workflows/release.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        os: [macos-latest, windows-latest]
+        os: [macos-latest, windows-latest, ubuntu-latest]
 
     steps:
       - name: Check out Git repository
@@ -60,7 +60,7 @@ jobs:
       - name: Release
         uses: softprops/action-gh-release@v2
         with:
-          draft: false
+          draft: true
           files: |
             dist/*.exe
             dist/*.zip

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
+**Cherry Studio 商业许可协议**
-copies or substantial portions of the Software.
 
-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
+- 许可方：王谦（kangfenmao@qq.com）
-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
+**1. 定义**
-SOFTWARE.
+
+- “软件”指 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

@@ -1,18 +1,18 @@
-# Cherry Studio
+# 🍒 Cherry Studio
 
-🍒 Cherry Studio is a desktop client that supports multiple Large Language Model (LLM) providers, available on Windows, Mac and Linux.
+Cherry Studio is a desktop client that supports for multiple LLM providers, available on Windows, Mac and Linux.
 
-# Screenshot
+# 🌠 Screenshot
 
-![](https://github.com/user-attachments/assets/e32b244f-3a84-473a-89ef-0b12ef4127b2)
+![](https://github.com/user-attachments/assets/e24d1e7d-126a-4647-bd98-f470bfe26fde)
 
-![](https://github.com/user-attachments/assets/18c10eed-4711-4975-bf9c-b274c61924f3)
+![](https://github.com/user-attachments/assets/3f3f0bfa-cb88-4abf-923a-a0859fa3c912)
 
-![](https://github.com/user-attachments/assets/7395ebf2-64f8-46fa-aa48-63293516c320)
+![](https://github.com/user-attachments/assets/288560c1-d218-437c-87c2-2a5e87b43b93)
 
-# Feature
+# 🌟 Features
 
-1. Supports multiple large language model service providers.
+1. Support for Multiple LLM Providers.
 2. Allows creation of multiple Assistants.
 3. Enables creation of multiple topics.
 4. Allows using multiple models to answer questions in the same conversation.
@@ -20,7 +20,8 @@
 6. Code highlighting.
 7. Mermaid chart
 
-# Develop
+# 🖥️ Develop
+
 ## Recommended IDE Setup
 
 - [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
@@ -51,3 +52,11 @@ $ yarn build:mac
 # For Linux
 $ yarn build:linux
 ```
+
+# ⭐️ Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=kangfenmao/cherry-studio&type=Timeline)](https://star-history.com/#kangfenmao/cherry-studio&Timeline)
+
+# 📃 License
+
+[LICENSE](./LICENSE)

electron-builder.yml

@@ -40,8 +40,8 @@ dmg:
 linux:
   target:
     - AppImage
-    - snap
+    # - snap
-    - deb
+    # - deb
   maintainer: electronjs.org
   category: Utility
 appImage:
@@ -56,5 +56,4 @@ electronDownload:
 afterSign: scripts/notarize.js
 releaseInfo:
   releaseNotes: |
-    支持主题切换
+    错误修复，优化体验
-    修复一些问题

electron.vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import react from '@vitejs/plugin-react'
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import { resolve } from 'path'
 
 export default defineConfig({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-studio",
-  "version": "0.4.0",
+  "version": "0.5.3",
   "description": "A powerful AI assistant for producer.",
   "main": "./out/main/index.js",
   "author": "kangfenmao@qq.com",
@@ -19,7 +19,8 @@
     "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",
-    "release": "node scripts/version.js"
+    "release": "node scripts/version.js",
+    "publish": "yarn release patch push"
   },
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
@@ -28,7 +29,8 @@
     "electron-log": "^5.1.5",
     "electron-store": "^8.2.0",
     "electron-updater": "^6.1.7",
-    "electron-window-state": "^5.0.3"
+    "electron-window-state": "^5.0.3",
+    "eslint-plugin-simple-import-sort": "^12.1.1"
   },
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.24.3",
@@ -53,6 +55,7 @@
     "electron-devtools-installer": "^3.2.0",
     "electron-vite": "^2.0.0",
     "emittery": "^1.0.3",
+    "emoji-picker-element": "^1.22.1",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -70,8 +73,12 @@
     "react-redux": "^9.1.2",
     "react-router": "6",
     "react-router-dom": "6",
+    "react-spinners": "^0.14.1",
     "react-syntax-highlighter": "^15.5.0",
     "redux-persist": "^6.0.0",
+    "rehype-katex": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "sass": "^1.77.2",
     "styled-components": "^6.1.11",
     "typescript": "^5.3.3",

src/main/config.ts

@@ -4,12 +4,12 @@ export const appConfig = new Store()
 
 export const titleBarOverlayDark = {
   height: 41,
-  color: '#1f1f1f',
+  color: '#00000000',
   symbolColor: '#ffffff'
 }
 
 export const titleBarOverlayLight = {
   height: 41,
-  color: '#f8f8f8',
+  color: '#00000000',
   symbolColor: '#000000'
 }

src/main/event.ts

@@ -1,6 +1,6 @@
 import { dialog, SaveDialogOptions, SaveDialogReturnValue } from 'electron'
-import { writeFile } from 'fs'
 import logger from 'electron-log'
+import { writeFile } from 'fs'
 
 export async function saveFile(_: Electron.IpcMainInvokeEvent, fileName: string, content: string): Promise<void> {
   try {

src/main/index.ts

@@ -4,7 +4,8 @@ import { app, BrowserWindow, ipcMain, Menu, MenuItem, session, shell } from 'ele
 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 icon from '../../build/icon.png?asset'
 import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
 import { saveFile } from './event'
 import AppUpdater from './updater'
@@ -25,9 +26,11 @@ function createWindow() {
     width: mainWindowState.width,
     height: mainWindowState.height,
     minWidth: 1080,
-    minHeight: 500,
+    minHeight: 600,
     show: true,
     autoHideMenuBar: true,
+    transparent: process.platform === 'darwin',
+    vibrancy: 'fullscreen-ui',
     titleBarStyle: 'hidden',
     titleBarOverlay: theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight,
     trafficLightPosition: { x: 8, y: 12 },

src/main/updater.ts

@@ -1,6 +1,6 @@
-import { AppUpdater as _AppUpdater, autoUpdater, UpdateInfo } from 'electron-updater'
-import logger from 'electron-log'
 import { BrowserWindow, dialog } from 'electron'
+import logger from 'electron-log'
+import { AppUpdater as _AppUpdater, autoUpdater, UpdateInfo } from 'electron-updater'
 
 export default class AppUpdater {
   autoUpdater: _AppUpdater = autoUpdater

src/preload/index.ts

@@ -1,5 +1,5 @@
-import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
+import { contextBridge, ipcRenderer } from 'electron'
 
 // Custom APIs for renderer
 const api = {

src/renderer/src/App.tsx

@@ -2,9 +2,10 @@ import store, { persistor } from '@renderer/store'
 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 AppsPage from './pages/apps/AppsPage'
+import AgentsPage from './pages/agents/AgentsPage'
 import HomePage from './pages/home/HomePage'
 import SettingsPage from './pages/settings/SettingsPage'
 import TranslatePage from './pages/translate/TranslatePage'
@@ -22,7 +23,7 @@ function App(): JSX.Element {
                 <Sidebar />
                 <Routes>
                   <Route path="/" element={<HomePage />} />
-                  <Route path="/apps" element={<AppsPage />} />
+                  <Route path="/apps" element={<AgentsPage />} />
                   <Route path="/translate" element={<TranslatePage />} />
                   <Route path="/settings/*" element={<SettingsPage />} />
                 </Routes>

src/renderer/src/assets/fonts/Ubuntu/Ubuntu.css

@@ -0,0 +1,55 @@
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('Ubuntu-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('Ubuntu-Italic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('Ubuntu-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('Ubuntu-BoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('Ubuntu-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('Ubuntu-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('Ubuntu-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Ubuntu';
+  src: url('Ubuntu-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}

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

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4563475 */
-  src: url('iconfont.woff2?t=1722242729348') format('woff2'),
+  src: url('iconfont.woff2?t=1723186111414') format('woff2'),
-       url('iconfont.woff?t=1722242729348') format('woff'),
+       url('iconfont.woff?t=1723186111414') format('woff'),
-       url('iconfont.ttf?t=1722242729348') format('truetype');
+       url('iconfont.ttf?t=1723186111414') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-copy:before {
+  content: "\e6ae";
+}
+
+.icon-ic_send:before {
+  content: "\e795";
+}
+
 .icon-dark1:before {
   content: "\e72f";
 }

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

@@ -1,6 +1,7 @@
-@import '../fonts/icon-fonts/iconfont.css';
 @import './markdown.scss';
 @import './scrollbar.scss';
+@import '../fonts/icon-fonts/iconfont.css';
+@import '../fonts/Ubuntu/Ubuntu.css';
 
 :root {
   --color-white: #ffffff;
@@ -32,12 +33,14 @@
   --color-icon-white: #ffffff;
   --color-border: #ffffff20;
   --color-error: #f44336;
+  --color-link: #1677ff;
   --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;
+  --navbar-background: rgba(0, 0, 0, 0.8);
-  --sidebar-background: #1f1f1f;
+  --sidebar-background: rgba(0, 0, 0, 0.8);
+  --input-bar-background: rgba(255, 255, 255, 0.02);
 
   --navbar-height: 42px;
   --sidebar-width: 55px;
@@ -45,7 +48,7 @@
   --topic-list-width: 260px;
   --settings-width: var(--assistants-width);
   --status-bar-height: 40px;
-  --input-bar-height: 125px;
+  --input-bar-height: 85px;
 }
 
 body[theme-mode='light'] {
@@ -78,12 +81,14 @@ body[theme-mode='light'] {
   --color-icon-white: #000000;
   --color-border: #00000028;
   --color-error: #f44336;
+  --color-link: #1677ff;
   --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;
+  --navbar-background: rgba(255, 255, 255, 0.8);
-  --sidebar-background: #f8f8f8;
+  --sidebar-background: rgba(255, 255, 255, 0.8);
+  --input-bar-background: rgba(0, 0, 0, 0.02);
 }
 
 *,
@@ -102,22 +107,11 @@ body {
   display: flex;
   min-height: 100vh;
   color: var(--color-text);
-  background: var(--color-background);
   line-height: 1.6;
   overflow: hidden;
-  background-size: cover;
+  background: transparent !important;
-  font-family:
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-    -apple-system,
+    'Helvetica Neue', sans-serif;
-    BlinkMacSystemFont,
-    'Microsoft YaHei',
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue' sans-serif;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -151,3 +145,19 @@ body,
     padding-bottom: 12px;
   }
 }
+
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #000;
+  box-shadow:
+    32px 0 #000,
+    -32px 0 #000;
+  position: relative;
+  animation: flash 0.5s ease-out infinite alternate;
+}
+
+.ant-segmented-group {
+  gap: 4px;
+}

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

@@ -3,14 +3,7 @@
   font-size: 15px;
   line-height: 1.6;
   user-select: text;
-
+  word-break: break-word;
-  p:last-child {
-    margin-bottom: 5px;
-  }
-
-  p:first-child {
-    margin-top: 0;
-  }
 
   h1:first-child,
   h2:first-child,
@@ -29,14 +22,20 @@
   h6 {
     margin: 1em 0 1em 0;
     font-weight: 800;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+      'Helvetica Neue', sans-serif;
   }
 
   h1 {
     font-size: 2em;
+    border-bottom: 0.5px solid var(--color-border);
+    padding-bottom: 0.3em;
   }
 
   h2 {
     font-size: 1.5em;
+    border-bottom: 0.5px solid var(--color-border);
+    padding-bottom: 0.3em;
   }
 
   h3 {
@@ -57,6 +56,13 @@
 
   p {
     margin: 1em 0;
+    &:last-child {
+      margin-bottom: 5px;
+    }
+
+    &:first-child {
+      margin-top: 0;
+    }
   }
 
   ul,
@@ -67,13 +73,21 @@
 
   li {
     margin-bottom: 0.5em;
+    &::marker {
+      color: var(--color-text-3);
+    }
+  }
+
+  li > ul,
+  li > ol {
+    margin: 0.5em 0;
   }
 
   hr {
     border: none;
-    border-top: 1px solid #555;
+    border-top: 0.5px solid var(--color-border);
     margin: 20px 0;
-    background-color: #555;
+    background-color: var(--color-border);
   }
 
   span {
@@ -81,6 +95,151 @@
   }
 
   code {
-    white-space: pre-wrap;
+    white-space: pre-wrap !important;
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+  p code {
+    background: var(--color-background-mute);
+    padding: 3px 5px;
+    border-radius: 5px;
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+    padding: 1em 0;
+    border-radius: 5px;
+    overflow-x: auto;
+    font-family: 'Fira Code', 'Courier New', Courier, monospace;
+    pre {
+      margin: 0 !important;
+    }
+    code {
+      background: none;
+      padding: 0;
+      border-radius: 0;
     }
   }
+
+  blockquote {
+    margin: 1em 0;
+    padding-left: 1em;
+    color: var(--color-text-light);
+    border-left: 4px solid var(--color-border);
+    font-family: Georgia, 'Times New Roman', Times, serif;
+  }
+
+  table {
+    border-collapse: collapse;
+    margin: 1em 0;
+    width: 100%;
+  }
+
+  th,
+  td {
+    border: 0.5px solid var(--color-border);
+    padding: 0.5em;
+  }
+
+  th {
+    background-color: var(--color-background-mute);
+    font-weight: bold;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+      'Helvetica Neue', sans-serif;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  a,
+  .link {
+    color: var(--color-link);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  strong {
+    font-weight: bold;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  del {
+    text-decoration: line-through;
+  }
+
+  sup,
+  sub {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  .footnote-ref {
+    font-size: 0.8em;
+    vertical-align: super;
+    line-height: 0;
+    margin: 0 2px;
+    color: var(--color-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .footnotes {
+    margin-top: 1em;
+    padding-top: 1em;
+    border-top: 1px solid var(--color-border);
+
+    ol {
+      padding-left: 1em;
+    }
+
+    li {
+      font-size: 0.9em;
+      margin-bottom: 0.5em;
+      color: var(--color-text-light);
+
+      p {
+        display: inline;
+        margin: 0;
+      }
+    }
+
+    .footnote-backref {
+      font-size: 0.8em;
+      vertical-align: super;
+      line-height: 0;
+      margin-left: 5px;
+      color: var(--color-primary);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+emoji-picker {
+  --border-size: 0;
+}

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

@@ -1,6 +1,7 @@
 /* 全局初始化滚动条样式 */
 ::-webkit-scrollbar {
   width: 3px;
+  height: 3px;
 }
 
 ::-webkit-scrollbar-track {

src/renderer/src/components/Avatar/ModelAvatar.tsx

@@ -0,0 +1,24 @@
+import { getModelLogo } from '@renderer/config/provider'
+import { Model } from '@renderer/types'
+import { Avatar, AvatarProps } from 'antd'
+import { first } from 'lodash'
+import { FC } from 'react'
+
+interface Props {
+  model: Model
+  size: number
+  props?: AvatarProps
+}
+
+const ModelAvatar: FC<Props> = ({ model, size, props }) => {
+  return (
+    <Avatar
+      src={getModelLogo(model?.id || '')}
+      style={{ width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      {...props}>
+      {first(model?.name)}
+    </Avatar>
+  )
+}
+
+export default ModelAvatar

src/renderer/src/components/DragableList/index.tsx

@@ -0,0 +1,49 @@
+import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import { droppableReorder } from '@renderer/utils'
+import { FC } from 'react'
+
+interface Props<T> {
+  list: T[]
+  children: (item: T, index: number) => React.ReactNode
+  onUpdate: (list: T[]) => void
+  onDragStart?: () => void
+  onDragEnd?: () => void
+}
+
+const DragableList: FC<Props<any>> = ({ children, list, onDragStart, onUpdate, onDragEnd }) => {
+  const _onDragEnd = (result: DropResult) => {
+    onDragEnd?.()
+    if (result.destination) {
+      const sourceIndex = result.source.index
+      const destIndex = result.destination.index
+      const reorderAgents = droppableReorder(list, sourceIndex, destIndex)
+      onUpdate(reorderAgents)
+    }
+  }
+
+  return (
+    <DragDropContext onDragStart={onDragStart} onDragEnd={_onDragEnd}>
+      <Droppable droppableId="droppable">
+        {(provided) => (
+          <div {...provided.droppableProps} ref={provided.innerRef}>
+            {list.map((item, index) => (
+              <Draggable key={`draggable_${item.id}_${index}`} draggableId={item.id} index={index}>
+                {(provided) => (
+                  <div
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                    style={{ ...provided.draggableProps.style, marginBottom: 8 }}>
+                    {children(item, index)}
+                  </div>
+                )}
+              </Draggable>
+            ))}
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
+  )
+}
+
+export default DragableList

src/renderer/src/components/EmojiPicker/index.tsx

@@ -0,0 +1,25 @@
+import { useTheme } from '@renderer/providers/ThemeProvider'
+import { FC, useEffect, useRef } from 'react'
+
+interface Props {
+  onEmojiClick: (emoji: string) => void
+}
+
+const EmojiPicker: FC<Props> = ({ onEmojiClick }) => {
+  const { theme } = useTheme()
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.addEventListener('emoji-click', (event: any) => {
+        event.stopPropagation()
+        onEmojiClick(event.detail.emoji.unicode)
+      })
+    }
+  }, [onEmojiClick])
+
+  // @ts-ignore next-line
+  return <emoji-picker ref={ref} class={theme === 'dark' ? 'dark' : 'light'} style={{ border: 'none' }} />
+}
+
+export default EmojiPicker

src/renderer/src/components/Layout/index.ts

@@ -150,11 +150,12 @@ export const BaseTypography = styled(Box)<{
 `
 
 export const TypographyNormal = styled(BaseTypography)`
-  font-family: 'Poppins';
+  font-family: 'Ubuntu';
 `
 
 export const TypographyBold = styled(BaseTypography)`
-  font-family: 'Poppins Bold';
+  font-family: 'Ubuntu';
+  font-weight: bold;
 `
 
 export const Container = styled.main<ContainerProps>`

src/renderer/src/components/Popups/AssistantSettingPopup.tsx

@@ -1,11 +1,12 @@
-import { Input, Modal } from 'antd'
-import { useState } from 'react'
-import { TopView } from '../TopView'
-import { Box } from '../Layout'
 import { Assistant } from '@renderer/types'
+import { Input, Modal } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { Box } from '../Layout'
+import { TopView } from '../TopView'
+
 interface AssistantSettingPopupShowParams {
   assistant: Assistant
 }
@@ -56,18 +57,19 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ assistant, resolve })
 export default class AssistantSettingPopup {
   static topviewId = 0
   static hide() {
-    TopView.hide(this.topviewId)
+    TopView.hide('AssistantSettingPopup')
   }
   static show(props: AssistantSettingPopupShowParams) {
     return new Promise<Assistant>((resolve) => {
-      this.topviewId = TopView.show(
+      TopView.show(
         <AssistantSettingPopupContainer
           {...props}
           resolve={(v) => {
             resolve(v)
             this.hide()
           }}
-        />
+        />,
+        'AssistantSettingPopup'
       )
     })
   }

src/renderer/src/components/Popups/PromptPopup.tsx

@@ -1,7 +1,8 @@
 import { Input, InputProps, Modal } from 'antd'
 import { useState } from 'react'
-import { TopView } from '../TopView'
+
 import { Box } from '../Layout'
+import { TopView } from '../TopView'
 
 interface PromptPopupShowParams {
   title: string
@@ -57,18 +58,19 @@ const PromptPopupContainer: React.FC<Props> = ({
 export default class PromptPopup {
   static topviewId = 0
   static hide() {
-    TopView.hide(this.topviewId)
+    TopView.hide('PromptPopup')
   }
   static show(props: PromptPopupShowParams) {
     return new Promise<string>((resolve) => {
-      this.topviewId = TopView.show(
+      TopView.show(
         <PromptPopupContainer
           {...props}
           resolve={(v) => {
             resolve(v)
             this.hide()
           }}
-        />
+        />,
+        'PromptPopup'
       )
     })
   }

src/renderer/src/components/Popups/TemplatePopup.tsx

@@ -1,7 +1,8 @@
 import { Modal } from 'antd'
 import { useState } from 'react'
-import { TopView } from '../TopView'
+
 import { Box } from '../Layout'
+import { TopView } from '../TopView'
 
 interface ShowParams {
   title: string
@@ -36,18 +37,19 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
 export default class TemplatePopup {
   static topviewId = 0
   static hide() {
-    TopView.hide(this.topviewId)
+    TopView.hide('TemplatePopup')
   }
   static show(props: ShowParams) {
     return new Promise<any>((resolve) => {
-      this.topviewId = TopView.show(
+      TopView.show(
         <PopupContainer
           {...props}
           resolve={(v) => {
             resolve(v)
             this.hide()
           }}
-        />
+        />,
+        'TemplatePopup'
       )
     })
   }

src/renderer/src/components/TopView/index.tsx

@@ -1,87 +1,94 @@
 import { useAppInit } from '@renderer/hooks/useAppInit'
 import { message, Modal } from 'antd'
-import { findIndex, pullAt } from 'lodash'
+import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react'
-import React, { useEffect, useState } from 'react'
+
+import { Box } from '../Layout'
 
-let id = 0
 let onPop = () => {}
-
+let onShow = ({ element, id }: { element: React.FC | React.ReactNode; id: string }) => {
-let onShow = ({ element, key }: { element: React.FC | React.ReactNode; key: number }) => {
   element
-  key
+  id
 }
-
+let onHide = (id: string) => {
-let onHide = ({ key }: { key: number }) => {
+  id
-  key
 }
+let onHideAll = () => {}
 
 interface Props {
   children?: React.ReactNode
 }
 
 type ElementItem = {
-  key: number
+  id: string
   element: React.FC | React.ReactNode
 }
 
 const TopViewContainer: React.FC<Props> = ({ children }) => {
   const [elements, setElements] = useState<ElementItem[]>([])
+  const elementsRef = useRef<ElementItem[]>([])
+  elementsRef.current = elements
+
   const [messageApi, messageContextHolder] = message.useMessage()
   const [modal, modalContextHolder] = Modal.useModal()
 
   useAppInit()
 
-  onPop = () => {
-    const views = [...elements]
-    views.pop()
-    setElements(views)
-  }
-
-  onShow = ({ element, key }: { element: React.FC | React.ReactNode; key: number }) => {
-    setElements(elements.concat([{ element, key }]))
-  }
-
-  onHide = ({ key }: { key: number }) => {
-    const views = [...elements]
-    pullAt(views, findIndex(views, { key }))
-    setElements(views)
-  }
-
   useEffect(() => {
     window.message = messageApi
     window.modal = modal
   }, [messageApi, modal])
 
+  onPop = () => {
+    const views = [...elementsRef.current]
+    views.pop()
+    elementsRef.current = views
+    setElements(elementsRef.current)
+  }
+
+  onShow = ({ element, id }: ElementItem) => {
+    if (!elementsRef.current.find((el) => el.id === id)) {
+      elementsRef.current = elementsRef.current.concat([{ element, id }])
+      setElements(elementsRef.current)
+    }
+  }
+
+  onHide = (id: string) => {
+    elementsRef.current = elementsRef.current.filter((el) => el.id !== id)
+    setElements(elementsRef.current)
+  }
+
+  onHideAll = () => {
+    setElements([])
+    elementsRef.current = []
+  }
+
+  const FullScreenContainer: React.FC<PropsWithChildren> = useCallback(({ children }) => {
+    return (
+      <Box flex={1} position="absolute" w="100%" h="100%">
+        <Box position="absolute" w="100%" h="100%" onClick={onPop} />
+        {children}
+      </Box>
+    )
+  }, [])
+
   return (
     <>
       {children}
       {messageContextHolder}
       {modalContextHolder}
-      {elements.length > 0 && (
+      {elements.map(({ element: Element, id }) => (
-        <div style={{ display: 'flex', flex: 1, position: 'absolute', width: '100%', height: '100%' }}>
+        <FullScreenContainer key={`TOPVIEW_${id}`}>
-          <div style={{ position: 'absolute', width: '100%', height: '100%' }} onClick={onPop} />
+          {typeof Element === 'function' ? <Element /> : Element}
-          {elements.map(({ element: Element, key }) =>
+        </FullScreenContainer>
-            typeof Element === 'function' ? (
+      ))}
-              <Element key={`TOPVIEW_${key}`} />
-            ) : (
-              <div key={`TOPVIEW_${key}`}>{Element}</div>
-            )
-          )}
-        </div>
-      )}
     </>
   )
 }
 
 export const TopView = {
-  show: (element: React.FC | React.ReactNode) => {
+  show: (element: React.FC | React.ReactNode, id: string) => onShow({ element, id }),
-    id = id + 1
+  hide: (id: string) => onHide(id),
-    onShow({ element, key: id })
+  clear: () => onHideAll(),
-    return id
-  },
-  hide: (key: number) => {
-    onHide({ key })
-  },
   pop: onPop
 }
 

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

@@ -1,3 +1,4 @@
+import { isMac } from '@renderer/config/constant'
 import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
@@ -26,14 +27,14 @@ const NavbarContainer = styled.div`
   min-height: var(--navbar-height);
   max-height: var(--navbar-height);
   -webkit-app-region: drag;
-  background-color: var(--navbar-background);
   margin-left: calc(var(--sidebar-width) * -1);
-  padding-left: var(--sidebar-width);
+  padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
   border-bottom: 0.5px solid var(--color-border);
+  background-color: var(--navbar-background);
 `
 
 const NavbarLeftContainer = styled.div`
-  min-width: var(--assistants-width);
+  min-width: ${isMac ? 'var(--assistants-width)' : 'calc(var(--sidebar-width) + var(--assistants-width))'};
   padding: 0 10px;
   display: flex;
   flex-direction: row;
@@ -47,7 +48,7 @@ const NavbarCenterContainer = styled.div`
   flex: 1;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  padding: 0 ${isMac ? '20px' : '15px'};
   font-size: 14px;
   font-weight: bold;
   color: var(--color-text-1);

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

@@ -1,10 +1,9 @@
-import { FC } from 'react'
-import Logo from '@renderer/assets/images/logo.png'
-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'
+import Logo from '@renderer/assets/images/logo.png'
+import useAvatar from '@renderer/hooks/useAvatar'
+import { FC } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import styled from 'styled-components'
 
 const Sidebar: FC = () => {
   const { pathname } = useLocation()
@@ -13,8 +12,7 @@ const Sidebar: FC = () => {
   const isRoute = (path: string): string => (pathname === path ? 'active' : '')
 
   return (
-    <Container style={isWindows ? { paddingTop: 0 } : {}}>
+    <Container>
-      {isMac ? <PlaceholderBorderMac /> : <PlaceholderBorderWin />}
       <StyledLink to="/">
         <AvatarImg src={avatar || Logo} draggable={false} />
       </StyledLink>
@@ -53,13 +51,13 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   padding: 8px 0;
-  min-width: var(--sidebar-width);
+  width: var(--sidebar-width);
-  min-height: 100%;
+  height: calc(100vh - var(--navbar-height));
   -webkit-app-region: drag !important;
-  background-color: var(--sidebar-background);
   border-right: 0.5px solid var(--color-border);
-  padding-top: var(--navbar-height);
+  margin-top: var(--navbar-height);
-  position: relative;
+  margin-bottom: var(--navbar-height);
+  background-color: var(--sidebar-background);
 `
 
 const AvatarImg = styled.img`
@@ -68,7 +66,7 @@ const AvatarImg = styled.img`
   height: 28px;
   background-color: var(--color-background-soft);
   margin: 5px 0;
-  margin-top: ${isMac ? '16px' : '9px'};
+  margin-top: 5px;
 `
 const MainMenus = styled.div`
   display: flex;
@@ -126,24 +124,4 @@ const StyledLink = styled(Link)`
   }
 `
 
-const PlaceholderBorderMac = styled.div`
-  width: var(--sidebar-width);
-  height: var(--navbar-height);
-  background: var(--navbar-background);
-  border-right: 1px solid var(--navbar-background);
-  border-bottom: 0.5px solid var(--color-border);
-  position: absolute;
-  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/agents.json

@@ -1,239 +1,239 @@
 [
   {
-    "id": 1,
+    "id": "1",
-    "name": "🎯 产品经理 - Product Manager",
+    "name": "产品经理 - Product Manager",
     "emoji": "🎯",
     "group": "职业",
     "prompt": "你现在是一名经验丰富的产品经理，你具有深厚的技术背景，并且对市场和用户需求有敏锐的洞察力。你擅长解决复杂的问题，制定有效的产品策略，并优秀地平衡各种资源以实现产品目标。你具有卓越的项目管理能力和出色的沟通技巧，能够有效地协调团队内部和外部的资源。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名经验丰富的产品经理，你具有深厚的技术背景，并且对市场和用户需求有敏锐的洞察力。你擅长解决复杂的问题，制定有效的产品策略，并优秀地平衡各种资源以实现产品目标。你具有卓越的项目管理能力和出色的沟通技巧，能够有效地协调团队内部和外部的资源。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 2,
+    "id": "2",
-    "name": "🎯 策略产品经理 - Strategy Product Manager",
+    "name": "策略产品经理 - Strategy Product Manager",
     "emoji": "🎯 ",
     "group": "职业",
     "prompt": "你现在是一名策略产品经理，你擅长进行市场研究和竞品分析，以制定产品策略。你能把握行业趋势，了解用户需求，并在此基础上优化产品功能和用户体验。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名策略产品经理，你擅长进行市场研究和竞品分析，以制定产品策略。你能把握行业趋势，了解用户需求，并在此基础上优化产品功能和用户体验。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 3,
+    "id": "3",
-    "name": "👥 社群运营 - Community Operations",
+    "name": "社群运营 - Community Operations",
     "emoji": "👥",
     "group": "职业",
     "prompt": "你现在是一名社群运营专家，你擅长激发社群活力，增强用户的参与度和忠诚度。你了解如何管理和引导社群文化，以及如何解决社群内的问题和冲突。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名社群运营专家，你擅长激发社群活力，增强用户的参与度和忠诚度。你了解如何管理和引导社群文化，以及如何解决社群内的问题和冲突。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 4,
+    "id": "4",
-    "name": "✍️ 内容运营 - Content Operations",
+    "name": "内容运营 - Content Operations",
     "emoji": "✍️",
     "group": "职业",
     "prompt": "你现在是一名专业的内容运营人员，你精通内容创作、编辑、发布和优化。你对读者需求有敏锐的感知，擅长通过高质量的内容吸引和保留用户。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名专业的内容运营人员，你精通内容创作、编辑、发布和优化。你对读者需求有敏锐的感知，擅长通过高质量的内容吸引和保留用户。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 5,
+    "id": "5",
-    "name": "🛍️ 商家运营 - Merchant Operations",
+    "name": "商家运营 - Merchant Operations",
     "emoji": "🛍️",
     "group": "职业",
     "prompt": "你现在是一名经验丰富的商家运营专家，你擅长管理商家关系，优化商家业务流程，提高商家满意度。你对电商行业有深入的了解，并有优秀的商业洞察力。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名经验丰富的商家运营专家，你擅长管理商家关系，优化商家业务流程，提高商家满意度。你对电商行业有深入的了解，并有优秀的商业洞察力。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 6,
+    "id": "6",
-    "name": "🚀 产品运营 - Product Operations",
+    "name": "产品运营 - Product Operations",
     "emoji": "🚀",
     "group": "职业",
     "prompt": "你现在是一名经验丰富的产品运营专家，你擅长分析市场和用户需求，并对产品生命周期各阶段的运营策略有深刻的理解。你有出色的团队协作能力和沟通技巧，能在不同部门间进行有效的协调。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名经验丰富的产品运营专家，你擅长分析市场和用户需求，并对产品生命周期各阶段的运营策略有深刻的理解。你有出色的团队协作能力和沟通技巧，能在不同部门间进行有效的协调。请在这个角色下为我解答以下问题。\n"
   },
   {
-    "id": 7,
+    "id": "7",
-    "name": "💼 销售运营 - Sales Operations",
+    "name": "销售运营 - Sales Operations",
-    "emoji": "🎓",
+    "emoji": "💼",
     "group": "职业",
     "prompt": "你现在是一名销售运营经理，你懂得如何优化销售流程，管理销售数据，提升销售效率。你能制定销售预测和目标，管理销售预算，并提供销售支持。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名销售运营经理，你懂得如何优化销售流程，管理销售数据，提升销售效率。你能制定销售预测和目标，管理销售预算，并提供销售支持。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 8,
+    "id": "8",
-    "name": "👨‍💻 用户运营 - User Operations",
+    "name": "用户运营 - User Operations",
     "emoji": "👨‍💻",
     "group": "职业",
     "prompt": "你现在是一名用户运营专家，你了解用户行为和需求，能够制定并执行针对性的用户运营策略。你有出色的用户服务能力，能有效处理用户反馈和投诉。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名用户运营专家，你了解用户行为和需求，能够制定并执行针对性的用户运营策略。你有出色的用户服务能力，能有效处理用户反馈和投诉。请在这个角色下为我解答以下问题。\n"
   },
   {
-    "id": 9,
+    "id": "9",
-    "name": "📢 市场营销 - Marketing",
+    "name": "市场营销 - Marketing",
     "emoji": "📢",
     "group": "职业",
     "prompt": "你现在是一名专业的市场营销专家，你对营销策略和品牌推广有深入的理解。你熟知如何有效利用不同的渠道和工具来达成营销目标，并对消费者心理有深入的理解。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名专业的市场营销专家，你对营销策略和品牌推广有深入的理解。你熟知如何有效利用不同的渠道和工具来达成营销目标，并对消费者心理有深入的理解。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 10,
+    "id": "10",
-    "name": "📈 商业数据分析 - Business Data Analysis",
+    "name": "商业数据分析 - Business Data Analysis",
     "emoji": "📈",
     "group": "职业",
     "prompt": "你现在是一名商业数据分析师，你精通数据分析方法和工具，能够从大量数据中提取出有价值的商业洞察。你对业务运营有深入的理解，并能提供数据驱动的优化建议。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名商业数据分析师，你精通数据分析方法和工具，能够从大量数据中提取出有价值的商业洞察。你对业务运营有深入的理解，并能提供数据驱动的优化建议。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 11,
+    "id": "11",
-    "name": "🗂️ 项目管理 - Project Management",
+    "name": "项目管理 - Project Management",
     "emoji": "🗂️",
     "group": "职业",
     "prompt": "你现在是一名资深的项目经理，你精通项目管理的各个方面，包括规划、组织、执行和控制。你擅长处理项目风险，解决问题，并有效地协调团队成员以实现项目目标。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名资深的项目经理，你精通项目管理的各个方面，包括规划、组织、执行和控制。你擅长处理项目风险，解决问题，并有效地协调团队成员以实现项目目标。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 12,
+    "id": "12",
-    "name": "🔎 SEO专家 - SEO Expert",
+    "name": "SEO专家 - SEO Expert",
     "emoji": "🔎",
     "group": "职业",
     "prompt": "你现在是一名知识丰富的SEO专家，你了解搜索引擎的工作原理，熟知如何优化网页以提高其在搜索引擎中的排名。你对关键词研究、内容优化、链接建设等SEO策略有深入的了解。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名知识丰富的SEO专家，你了解搜索引擎的工作原理，熟知如何优化网页以提高其在搜索引擎中的排名。你对关键词研究、内容优化、链接建设等SEO策略有深入的了解。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 13,
+    "id": "13",
-    "name": "💻 网站运营数据分析 - Website Operations Data Analysis",
+    "name": "网站运营数据分析 - Website Operations Data Analysis",
     "emoji": "💻",
     "group": "职业",
     "prompt": "你现在是一名网站运营数据分析师，你擅长收集和分析网站数据，以了解用户行为和网站性能。你可以提供关于网站设计、内容和营销策略的数据支持。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名网站运营数据分析师，你擅长收集和分析网站数据，以了解用户行为和网站性能。你可以提供关于网站设计、内容和营销策略的数据支持。请在这个角色下为我解答以下问题。\n"
   },
   {
-    "id": 14,
+    "id": "14",
-    "name": "📊 数据分析师 - Data Analyst",
+    "name": "数据分析师 - Data Analyst",
     "emoji": "📊",
     "group": "职业",
     "prompt": "你现在是一名数据分析师，你精通各种统计分析方法，懂得如何清洗、处理和解析数据以获得有价值的洞察。你擅长利用数据驱动的方式来解决问题和提升决策效率。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名数据分析师，你精通各种统计分析方法，懂得如何清洗、处理和解析数据以获得有价值的洞察。你擅长利用数据驱动的方式来解决问题和提升决策效率。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 15,
+    "id": "15",
-    "name": "🖥️ 前端工程师 - Frontend Engineer",
+    "name": "前端工程师 - Frontend Engineer",
     "emoji": "🖥️",
     "group": "职业",
     "prompt": "你现在是一名专业的前端工程师，你对HTML、CSS、JavaScript等前端技术有深入的了解，能够制作和优化用户界面。你能够解决浏览器兼容性问题，提升网页性能，并实现优秀的用户体验。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名专业的前端工程师，你对HTML、CSS、JavaScript等前端技术有深入的了解，能够制作和优化用户界面。你能够解决浏览器兼容性问题，提升网页性能，并实现优秀的用户体验。请在这个角色下为我解答以下问题。\n"
   },
   {
-    "id": 16,
+    "id": "16",
-    "name": "🛠️ 运维工程师 - Operations Engineer",
+    "name": "运维工程师 - Operations Engineer",
     "emoji": "🛠️",
     "group": "职业",
     "prompt": "你现在是一名运维工程师，你负责保障系统和服务的正常运行。你熟悉各种监控工具，能够高效地处理故障和进行系统优化。你还懂得如何进行数据备份和恢复，以保证数据安全。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名运维工程师，你负责保障系统和服务的正常运行。你熟悉各种监控工具，能够高效地处理故障和进行系统优化。你还懂得如何进行数据备份和恢复，以保证数据安全。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 17,
+    "id": "17",
-    "name": "💻 开发工程师 - Software Engineer",
+    "name": "开发工程师 - Software Engineer",
     "emoji": "💻",
     "group": "职业",
     "prompt": "你现在是一名资深的软件工程师，你熟悉多种编程语言和开发框架，对软件开发的生命周期有深入的理解。你擅长解决技术问题，并具有优秀的逻辑思维能力。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名资深的软件工程师，你熟悉多种编程语言和开发框架，对软件开发的生命周期有深入的理解。你擅长解决技术问题，并具有优秀的逻辑思维能力。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 18,
+    "id": "18",
-    "name": "🧪 测试工程师 - Test Engineer",
+    "name": "测试工程师 - Test Engineer",
     "emoji": "🧪",
     "group": "职业",
     "prompt": "你现在是一名专业的测试工程师，你对软件测试方法论和测试工具有深入的了解。你的主要任务是发现和记录软件的缺陷，并确保软件的质量。你在寻找和解决问题上有出色的技能。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名专业的测试工程师，你对软件测试方法论和测试工具有深入的了解。你的主要任务是发现和记录软件的缺陷，并确保软件的质量。你在寻找和解决问题上有出色的技能。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 19,
+    "id": "19",
-    "name": "👥 HR人力资源管理 - Human Resources Management",
+    "name": "HR人力资源管理 - Human Resources Management",
     "emoji": "👥",
     "group": "职业",
     "prompt": "你现在是一名人力资源管理专家，你了解如何招聘、培训、评估和激励员工。你精通劳动法规，擅长处理员工关系，并且在组织发展和变革管理方面有深入的见解。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名人力资源管理专家，你了解如何招聘、培训、评估和激励员工。你精通劳动法规，擅长处理员工关系，并且在组织发展和变革管理方面有深入的见解。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 20,
+    "id": "20",
-    "name": "📋 行政 - Administration",
+    "name": "行政 - Administration",
     "emoji": "📋",
     "group": "职业",
     "prompt": "你现在是一名行政专员，你擅长组织和管理公司的日常运营事务，包括文件管理、会议安排、办公设施管理等。你有良好的人际沟通和组织能力，能在多任务环境中有效工作。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名行政专员，你擅长组织和管理公司的日常运营事务，包括文件管理、会议安排、办公设施管理等。你有良好的人际沟通和组织能力，能在多任务环境中有效工作。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 21,
+    "id": "21",
-    "name": "💰 财务顾问 - Financial Advisor",
+    "name": "财务顾问 - Financial Advisor",
     "emoji": "💰",
     "group": "职业",
     "prompt": "你现在是一名财务顾问，你对金融市场、投资策略和财务规划有深厚的理解。你能提供财务咨询服务，帮助客户实现其财务目标。你擅长理解和解决复杂的财务问题。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名财务顾问，你对金融市场、投资策略和财务规划有深厚的理解。你能提供财务咨询服务，帮助客户实现其财务目标。你擅长理解和解决复杂的财务问题。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 22,
+    "id": "22",
-    "name": "🩺 医生 - Doctor",
+    "name": "医生 - Doctor",
     "emoji": "🩺",
     "group": "职业",
     "prompt": "你现在是一名医生，具备丰富的医学知识和临床经验。你擅长诊断和治疗各种疾病，能为病人提供专业的医疗建议。你有良好的沟通技巧，能与病人和他们的家人建立信任关系。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名医生，具备丰富的医学知识和临床经验。你擅长诊断和治疗各种疾病，能为病人提供专业的医疗建议。你有良好的沟通技巧，能与病人和他们的家人建立信任关系。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 23,
+    "id": "23",
-    "name": "✒️ 编辑 - Editor",
+    "name": "编辑 - Editor",
     "emoji": "✒️",
     "group": "职业",
     "prompt": "你现在是一名编辑，你对文字有敏锐的感觉，擅长审校和修订稿件以确保其质量。你有出色的语言和沟通技巧，能与作者有效地合作以改善他们的作品。你对出版流程有深入的了解。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名编辑，你对文字有敏锐的感觉，擅长审校和修订稿件以确保其质量。你有出色的语言和沟通技巧，能与作者有效地合作以改善他们的作品。你对出版流程有深入的了解。请在这个角色下为我解答以下问题。\n"
   },
   {
-    "id": 24,
+    "id": "24",
-    "name": "🧠 哲学家 - Philosopher",
+    "name": "哲学家 - Philosopher",
     "emoji": "🧠",
     "group": "职业",
     "prompt": "你现在是一名哲学家，你对世界的本质和人类存在的意义有深入的思考。你熟悉多种哲学流派，并能从哲学的角度分析和解决问题。你具有深刻的思维和出色的逻辑分析能力。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名哲学家，你对世界的本质和人类存在的意义有深入的思考。你熟悉多种哲学流派，并能从哲学的角度分析和解决问题。你具有深刻的思维和出色的逻辑分析能力。请在这个角色下为我解答以下问题。\n"
   },
   {
-    "id": 25,
+    "id": "25",
-    "name": "🛒 采购 - Procurement",
+    "name": "采购 - Procurement",
     "emoji": "🛒",
     "group": "职业",
     "prompt": "你现在是一名采购经理，你熟悉供应链管理，擅长进行供应商评估和价格谈判。你负责制定和执行采购策略，以保证货物的质量和供应的稳定。请在这个角色下为我解答以下问题。\n",
     "description": "你现在是一名采购经理，你熟悉供应链管理，擅长进行供应商评估和价格谈判。你负责制定和执行采购策略，以保证货物的质量和供应的稳定。请在这个角色下为我解答以下问题。\n"
   },
   {
-    "id": 26,
+    "id": "26",
-    "name": "⚖️ 法务 - Legal Affairs",
+    "name": "法务 - Legal Affairs",
     "emoji": "⚖️",
     "group": "职业",
     "prompt": "你现在是一名法务专家，你了解公司法、合同法等相关法律，能为企业提供法律咨询和风险评估。你还擅长处理法律争端，并能起草和审核合同。请在这个角色下为我解答以下问题。",
     "description": "你现在是一名法务专家，你了解公司法、合同法等相关法律，能为企业提供法律咨询和风险评估。你还擅长处理法律争端，并能起草和审核合同。请在这个角色下为我解答以下问题。"
   },
   {
-    "id": 27,
+    "id": "27",
-    "name": "🇨🇳 翻译成中文 - Chinese",
+    "name": "翻译成中文 - Chinese",
     "emoji": "🇨🇳",
     "group": "语言",
     "prompt": "你是一个好用的翻译助手。请将我的英文翻译成中文，将所有非中文的翻译成中文。我发给你所有的话都是需要翻译的内容，你只需要回答翻译结果。翻译结果请符合中文的语言习惯。",
     "description": ""
   },
   {
-    "id": 28,
+    "id": "28",
-    "name": "🌐 翻译成英文 - English",
+    "name": "翻译成英文 - English",
     "emoji": "🌐",
     "group": "语言",
     "prompt": "你是一个好用的翻译助手。请将我的中文翻译成英文，将所有非中文的翻译成英文。我发给你所有的话都是需要翻译的内容，你只需要回答翻译结果。翻译结果请符合英文的语言习惯。",
     "description": ""
   },
   {
-    "id": 29,
+    "id": "29",
-    "name": "📕 英语单词背诵助手",
+    "name": "英语单词背诵助手",
     "emoji": "📕",
     "group": "语言",
     "prompt": "- 版本：0.1\n- 语言：中文\n- 描述：您是一位语言专家，擅长阐释英语词汇的复杂性。您的角色是将复杂的英语单词分解为简单的概念，提供易懂的英语解释，提供中文翻译，并提供助记设备以帮助记忆。\n\n技能\n1. 分析高级英语单词的拼写、发音和含义。\n2. 使用简单的英语词汇进行解释，然后提供中文翻译。\n3. 使用音标联想、形象联想和词源等记忆技巧。\n4. 创作高质量的句子，以示范单词在语境中的使用。\n\n规则\n1. 总是以使用简单的英语词汇进行解释为开头。\n2. 在适当的时候，保持解释和例句的清晰、准确和幽默。\n3. 确保助记设备与记忆相关且有效。\n\n工作流程\n1. 问候用户并询问他们感兴趣的英语单词。\n2. 分解单词，分析其拼写、发音和复杂含义。\n3. 用简单的英语词汇解释，使含义更易理解。\n4. 提供单词的中文翻译和简单的英语解释。\n5. 针对单词的特点提供个性化的助记策略。\n6. 使用单词构建高质量、信息丰富且引人入胜的句子。\n\n初始化\n作为一名<角色>，您必须遵循<规则>并使用<语言>进行沟通。在问候用户时，确认他们想要理解和记忆的英语单词，然后按照<工作流程>进行操作。",
     "description": ""
   },
   {
-    "id": 30,
+    "id": "30",
-    "name": "📖 文章总结 - Summarize",
+    "name": "文章总结 - Summarize",
     "emoji": "📖",
     "group": "阅读",
     "prompt": "总结下面的文章，给出总结、摘要、观点三个部分内容，其中观点部分要使用列表列出，使用 Markdown 回复",

src/renderer/src/config/constant.ts

@@ -1,5 +1,9 @@
 export const DEFAULT_TEMPERATURE = 0.7
 export const DEFAULT_CONEXTCOUNT = 5
-export const platform = window.electron?.process?.platform === 'darwin' ? 'macos' : 'windows'
+export const DEFAULT_MAX_TOKENS = 4096
-export const isMac = platform === 'macos'
+export const FONT_FAMILY =
-export const isWindows = platform === 'windows'
+  "Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
+export const platform = window.electron?.process?.platform
+export const isMac = platform === 'darwin'
+export const isWindows = platform === 'win32' || platform === 'win64'
+export const isLinux = platform === 'linux'

src/renderer/src/config/models.ts

@@ -5,10 +5,17 @@ type SystemModel = Model & { enabled: boolean }
 export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
   openai: [
     {
-      id: 'gpt-3.5-turbo',
+      id: 'gpt-4o',
       provider: 'openai',
-      name: 'GPT-3.5 Turbo',
+      name: ' GPT-4o',
-      group: 'GPT 3.5',
+      group: 'GPT 4o',
+      enabled: true
+    },
+    {
+      id: 'gpt-4o-mini',
+      provider: 'openai',
+      name: ' GPT-4o-mini',
+      group: 'GPT 4o',
       enabled: true
     },
     {
@@ -24,13 +31,6 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       name: ' GPT-4',
       group: 'GPT 4',
       enabled: true
-    },
-    {
-      id: 'gpt-4o',
-      provider: 'openai',
-      name: ' GPT-4o',
-      group: 'GPT 4o',
-      enabled: true
     }
   ],
   silicon: [

src/renderer/src/config/provider.ts

@@ -1,28 +1,28 @@
-import OpenAiProviderLogo from '@renderer/assets/images/providers/openai.jpeg'
+import BaichuanModelLogo from '@renderer/assets/images/models/baichuan.png'
-import SiliconFlowProviderLogo from '@renderer/assets/images/providers/silicon.png'
-import DeepSeekProviderLogo from '@renderer/assets/images/providers/deepseek.png'
-import YiProviderLogo from '@renderer/assets/images/providers/yi.svg'
-import GroqProviderLogo from '@renderer/assets/images/providers/groq.png'
-import ZhipuProviderLogo from '@renderer/assets/images/providers/zhipu.png'
-import OllamaProviderLogo from '@renderer/assets/images/providers/ollama.png'
-import MoonshotProviderLogo from '@renderer/assets/images/providers/moonshot.jpeg'
-import OpenRouterProviderLogo from '@renderer/assets/images/providers/openrouter.png'
-import BaichuanProviderLogo from '@renderer/assets/images/providers/baichuan.png'
-import DashScopeProviderLogo from '@renderer/assets/images/providers/dashscope.png'
-import AnthropicProviderLogo from '@renderer/assets/images/providers/anthropic.jpeg'
-import AiHubMixProviderLogo from '@renderer/assets/images/providers/aihubmix.jpg'
-import ChatGPTModelLogo from '@renderer/assets/images/models/chatgpt.jpeg'
 import ChatGLMModelLogo from '@renderer/assets/images/models/chatglm.jpeg'
+import ChatGPTModelLogo from '@renderer/assets/images/models/chatgpt.jpeg'
+import ClaudeModelLogo from '@renderer/assets/images/models/claude.png'
 import DeepSeekModelLogo from '@renderer/assets/images/models/deepseek.png'
 import GemmaModelLogo from '@renderer/assets/images/models/gemma.jpeg'
+import LlamaModelLogo from '@renderer/assets/images/models/llama.jpeg'
+import MicrosoftModelLogo from '@renderer/assets/images/models/microsoft.png'
+import MixtralModelLogo from '@renderer/assets/images/models/mixtral.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 AiHubMixProviderLogo from '@renderer/assets/images/providers/aihubmix.jpg'
-import MixtralModelLogo from '@renderer/assets/images/models/mixtral.jpeg'
+import AnthropicProviderLogo from '@renderer/assets/images/providers/anthropic.jpeg'
+import BaichuanProviderLogo from '@renderer/assets/images/providers/baichuan.png'
+import DashScopeProviderLogo from '@renderer/assets/images/providers/dashscope.png'
+import DeepSeekProviderLogo from '@renderer/assets/images/providers/deepseek.png'
+import GroqProviderLogo from '@renderer/assets/images/providers/groq.png'
+import MoonshotProviderLogo from '@renderer/assets/images/providers/moonshot.jpeg'
 import MoonshotModelLogo from '@renderer/assets/images/providers/moonshot.jpeg'
-import MicrosoftModelLogo from '@renderer/assets/images/models/microsoft.png'
+import OllamaProviderLogo from '@renderer/assets/images/providers/ollama.png'
-import BaichuanModelLogo from '@renderer/assets/images/models/baichuan.png'
+import OpenAiProviderLogo from '@renderer/assets/images/providers/openai.jpeg'
-import ClaudeModelLogo from '@renderer/assets/images/models/claude.png'
+import OpenRouterProviderLogo from '@renderer/assets/images/providers/openrouter.png'
+import SiliconFlowProviderLogo from '@renderer/assets/images/providers/silicon.png'
+import YiProviderLogo from '@renderer/assets/images/providers/yi.svg'
+import ZhipuProviderLogo from '@renderer/assets/images/providers/zhipu.png'
 
 export function getProviderLogo(providerId: string) {
   switch (providerId) {
@@ -58,6 +58,10 @@ export function getProviderLogo(providerId: string) {
 }
 
 export function getModelLogo(modelId: string) {
+  if (!modelId) {
+    return undefined
+  }
+
   const logoMap = {
     gpt: ChatGPTModelLogo,
     glm: ChatGLMModelLogo,
@@ -103,7 +107,7 @@ export const PROVIDER_CONFIG = {
     },
     websites: {
       official: 'https://www.siliconflow.cn/',
-      apiKey: 'https://cloud.siliconflow.cn/account/ak',
+      apiKey: 'https://cloud.siliconflow.cn/account/ak?referrer=clxty1xuy0014lvqwh5z50i88',
       docs: 'https://docs.siliconflow.cn/',
       models: 'https://docs.siliconflow.cn/docs/model-names'
     }

src/renderer/src/env.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
+import type KeyvStorage from '@kangfenmao/keyv-storage'
 import { MessageInstance } from 'antd/es/message/interface'
 import { HookAPI } from 'antd/es/modal/useModal'
-import type KeyvStorage from '@kangfenmao/keyv-storage'
 
 declare global {
   interface Window {

src/renderer/src/hooks/useAgents.ts

@@ -0,0 +1,17 @@
+import { RootState } from '@renderer/store'
+import { addAgent, removeAgent, updateAgent, updateAgents } from '@renderer/store/agents'
+import { Agent } from '@renderer/types'
+import { useDispatch, useSelector } from 'react-redux'
+
+export function useAgents() {
+  const agents = useSelector((state: RootState) => state.agents.agents)
+  const dispatch = useDispatch()
+
+  return {
+    agents,
+    addAgent: (agent: Agent) => dispatch(addAgent(agent)),
+    removeAgent: (agent: Agent) => dispatch(removeAgent(agent)),
+    updateAgent: (agent: Agent) => dispatch(updateAgent(agent)),
+    updateAgents: (agents: Agent[]) => dispatch(updateAgents(agents))
+  }
+}

src/renderer/src/hooks/useAppInit.ts

@@ -1,21 +1,22 @@
-import { i18nInit } from '@renderer/i18n'
+import i18n from '@renderer/i18n'
 import LocalStorage from '@renderer/services/storage'
 import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
 import { runAsyncFunction } from '@renderer/utils'
 import { useEffect } from 'react'
+
 import { useSettings } from './useSettings'
 
 export function useAppInit() {
   const dispatch = useAppDispatch()
   const { proxyUrl } = useSettings()
+  const { language } = useSettings()
 
   useEffect(() => {
     runAsyncFunction(async () => {
       const storedImage = await LocalStorage.getImage('avatar')
       storedImage && dispatch(setAvatar(storedImage))
     })
-    i18nInit()
   }, [dispatch])
 
   useEffect(() => {
@@ -28,4 +29,8 @@ export function useAppInit() {
   useEffect(() => {
     proxyUrl && window.api.setProxy(proxyUrl)
   }, [proxyUrl])
+
+  useEffect(() => {
+    i18n.changeLanguage(language || navigator.language || 'en-US')
+  }, [language])
 }

src/renderer/src/hooks/useOllama.ts

@@ -0,0 +1,18 @@
+import store, { useAppSelector } from '@renderer/store'
+import { setOllamaKeepAliveTime } from '@renderer/store/llm'
+import { useDispatch } from 'react-redux'
+
+export function useOllamaSettings() {
+  const settings = useAppSelector((state) => state.llm.settings.ollama)
+  const dispatch = useDispatch()
+
+  return { ...settings, setKeepAliveTime: (time: number) => dispatch(setOllamaKeepAliveTime(time)) }
+}
+
+export function getOllamaSettings() {
+  return store.getState().llm.settings.ollama
+}
+
+export function getOllamaKeepAliveTime() {
+  return store.getState().llm.settings.ollama.keepAliveTime + 'm'
+}

src/renderer/src/hooks/useProvider.ts

@@ -1,3 +1,4 @@
+import { createSelector } from '@reduxjs/toolkit'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import {
   addModel,
@@ -8,8 +9,8 @@ import {
   updateProviders
 } from '@renderer/store/llm'
 import { Assistant, Model, Provider } from '@renderer/types'
+
 import { useDefaultModel } from './useAssistant'
-import { createSelector } from '@reduxjs/toolkit'
 
 const selectEnabledProviders = createSelector(
   (state) => state.llm.providers,
@@ -17,7 +18,7 @@ const selectEnabledProviders = createSelector(
 )
 
 export function useProviders() {
-  const providers = useAppSelector(selectEnabledProviders)
+  const providers: Provider[] = useAppSelector(selectEnabledProviders)
   const dispatch = useAppDispatch()
 
   return {
@@ -47,7 +48,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,7 +1,7 @@
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import {
-  setSendMessageShortcut as _setSendMessageShortcut,
   SendMessageShortcut,
+  setSendMessageShortcut as _setSendMessageShortcut,
   setTheme,
   ThemeMode
 } from '@renderer/store/settings'

src/renderer/src/hooks/useTopic.ts

@@ -7,8 +7,6 @@ let _activeTopic: Topic
 export function useActiveTopic(assistant: Assistant) {
   const [activeTopic, setActiveTopic] = useState(_activeTopic || assistant?.topics[0])
 
-  _activeTopic = activeTopic
-
   useEffect(() => {
     // activeTopic not in assistant.topics
     if (assistant && !find(assistant.topics, { id: activeTopic?.id })) {

src/renderer/src/i18n/index.ts

@@ -1,4 +1,3 @@
-import store from '@renderer/store'
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 
@@ -25,7 +24,10 @@ const resources = {
         regenerate: 'Regenerate',
         provider: 'Provider',
         you: 'You',
-        save: 'Save'
+        save: 'Save',
+        footnotes: 'References',
+        select: 'Select',
+        search: 'Search'
       },
       button: {
         add: 'Add',
@@ -48,10 +50,8 @@ const resources = {
         'switch.disabled': 'Switching is disabled while the assistant is generating'
       },
       chat: {
-        save: 'Save'
+        save: 'Save',
-      },
+        'default.name': '🔆 Default Assistant',
-      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',
@@ -60,7 +60,7 @@ const resources = {
         'topics.edit.placeholder': 'Enter new name',
         'topics.delete.all.title': 'Delete all topics',
         'topics.delete.all.content': 'Are you sure you want to delete all topics?',
-        'input.new_chat': ' New Chat ',
+        'input.new_topic': 'New Topic',
         'input.topics': ' Topics ',
         'input.clear': 'Clear',
         'input.expand': 'Expand',
@@ -71,17 +71,37 @@ const resources = {
         'input.send': 'Send',
         'input.pause': 'Pause',
         'input.settings': 'Settings',
+        'input.context_count.tip': 'Context Count',
+        'input.estimated_tokens.tip': '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.',
         'settings.conext_count': 'Context',
         'settings.conext_count.tip': 'The number of previous messages to keep in the context.',
+        'settings.max_tokens': 'Enable Max Tokens Limit',
+        'settings.max_tokens.tip':
+          'The maximum number of tokens the model can generate. Normal chat suggests 500-800. Short text generation suggests 800-2000. Code generation suggests 2000-3600. Long text generation suggests above 4000.',
         'settings.reset': 'Reset',
         'settings.set_as_default': 'Apply to default assistant',
-        'settings.max': 'Max'
+        'settings.max': 'Max',
+        'suggestions.title': 'Suggested Questions',
+        'add.assistant.title': 'Add Assistant'
       },
-      apps: {
+      agents: {
-        title: 'Agents'
+        title: 'Agents',
+        my_agents: 'My Agents',
+        'add.title': 'Add Agent',
+        'edit.title': 'Edit Agent',
+        'add.name': 'Name',
+        'add.name.placeholder': 'Enter name',
+        'add.prompt': 'Prompt',
+        'add.prompt.placeholder': 'Enter prompt',
+        'add.button': 'Add',
+        'manage.title': 'Manage Agents',
+        'delete.popup.content': 'Are you sure you want to delete this agent?',
+        'tag.default': 'Default',
+        'tag.system': 'System',
+        'tag.user': 'Mine'
       },
       provider: {
         openai: 'OpenAI',
@@ -111,6 +131,7 @@ const resources = {
         'messages.use_serif_font': 'Use serif font',
         'messages.input.title': 'Input Settings',
         'messages.input.show_estimated_tokens': 'Show estimated input tokens',
+        'messages.input.send_shortcuts': 'Send shortcuts',
         'general.title': 'General Settings',
         'general.user_name': 'User Name',
         'general.user_name.placeholder': 'Enter your name',
@@ -155,6 +176,8 @@ 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',
         'theme.title': 'Theme',
@@ -182,6 +205,15 @@ const resources = {
         italian: 'Italian',
         portuguese: 'Portuguese',
         arabic: 'Arabic'
+      },
+      ollama: {
+        title: 'Ollama',
+        'keep_alive_time.title': 'Keep Alive Time',
+        'keep_alive_time.placeholder': 'Minutes',
+        'keep_alive_time.description': 'The time in minutes to keep the connection alive, default is 5 minutes.'
+      },
+      error: {
+        'chat.response': 'Something went wrong. Please check if you have set your API key in the Settings > Providers'
       }
     }
   },
@@ -206,7 +238,10 @@ const resources = {
         copy: '复制',
         regenerate: '重新生成',
         provider: '提供商',
-        you: '用户'
+        you: '用户',
+        footnote: '引用内容',
+        select: '选择',
+        search: '搜索'
       },
       button: {
         add: '添加',
@@ -215,7 +250,7 @@ const resources = {
         select_model: '选择模型'
       },
       message: {
-        copied: '已复制!',
+        copied: '已复制',
         'assistant.added.content': '智能体添加成功',
         'message.delete.title': '删除消息',
         'message.delete.content': '确定要删除此消息吗?',
@@ -229,19 +264,17 @@ const resources = {
         'switch.disabled': '模型回复完成后才能切换'
       },
       chat: {
-        save: '保存'
+        save: '保存',
-      },
+        'default.name': '🔆 默认助手 - Assistant',
-      assistant: {
-        'default.name': '😃 默认助手 - Assistant',
         'default.description': '你好，我是默认助手。你可以立刻开始跟我聊天。',
         'default.topic.name': '默认话题',
         'topics.title': '话题',
-        'topics.auto_rename': 'AI 重命名',
+        'topics.auto_rename': '生成话题名',
-        'topics.edit.title': '重命名',
+        'topics.edit.title': '编辑话题名',
         'topics.edit.placeholder': '输入新名称',
         'topics.delete.all.title': '删除所有话题',
         'topics.delete.all.content': '确定要删除所有话题吗?',
-        'input.new_chat': ' 新聊天 ',
+        'input.new_topic': '新话题',
         'input.topics': ' 话题 ',
         'input.clear': '清除',
         'input.expand': '展开',
@@ -252,18 +285,38 @@ const resources = {
         'input.send': '发送',
         'input.pause': '暂停',
         'input.settings': '设置',
+        'input.context_count.tip': '上下文数',
+        'input.estimated_tokens.tip': '预估 token 数',
         'settings.temperature': '模型温度',
         'settings.temperature.tip':
           '模型生成文本的随机程度。值越大，回复内容越赋有多样性、创造性、随机性；设为 0 根据事实回答。日常聊天建议设置为 0.7',
         'settings.conext_count': '上下文数',
         'settings.conext_count.tip':
-          '要保留在上下文中的消息数量，数值越大，上下文越长，消耗的 token 越多。普通聊天建议 5-10，代码生成建议 5-10',
+          '要保留在上下文中的消息数量，数值越大，上下文越长，消耗的 token 越多。普通聊天建议 5-10',
+        'settings.max_tokens': '开启消息长度限制',
+        'settings.max_tokens.tip':
+          '单次交互所用的最大 Token 数, 会影响返回结果的长度。普通聊天建议 500-800；短文生成建议 800-2000；代码生成建议 2000-3600；长文生成建议切换模型到 4000 左右',
         'settings.reset': '重置',
         'settings.set_as_default': '应用到默认助手',
-        'settings.max': '不限'
+        'settings.max': '不限',
+        'suggestions.title': '建议的问题',
+        'add.assistant.title': '添加智能体'
       },
-      apps: {
+      agents: {
-        title: '智能体'
+        title: '智能体',
+        my_agents: '我的智能体',
+        'add.title': '添加智能体',
+        'edit.title': '编辑智能体',
+        'add.name': '名称',
+        'add.name.placeholder': '输入名称',
+        'add.prompt': '提示词',
+        'add.prompt.placeholder': '输入提示词',
+        'add.button': '添加',
+        'manage.title': '管理智能体',
+        'delete.popup.content': '确定要删除此智能体吗？',
+        'tag.default': '默认',
+        'tag.system': '系统',
+        'tag.user': '我的'
       },
       provider: {
         openai: 'OpenAI',
@@ -293,6 +346,7 @@ const resources = {
         'messages.use_serif_font': '使用衬线字体',
         'messages.input.title': '输入设置',
         'messages.input.show_estimated_tokens': '状态显示',
+        'messages.input.send_shortcuts': '发送快捷键',
         'general.title': '常规设置',
         'general.user_name': '用户名',
         'general.user_name.placeholder': '请输入用户名',
@@ -337,6 +391,8 @@ const resources = {
         'about.feedback.title': '📝 意见反馈',
         'about.feedback.button': '反馈',
         'about.contact.title': '📧 邮件联系',
+        'about.license.title': '📄 许可证',
+        'about.license.button': '查看',
         'about.contact.button': '邮件',
         'proxy.title': '代理地址',
         'theme.title': '主题',
@@ -364,6 +420,15 @@ const resources = {
         italian: '意大利文',
         portuguese: '葡萄牙文',
         arabic: '阿拉伯文'
+      },
+      ollama: {
+        title: 'Ollama',
+        'keep_alive_time.title': '保持活跃时间',
+        'keep_alive_time.placeholder': '分钟',
+        'keep_alive_time.description': '对话后模型在内存中保持的时间（默认：5分钟）'
+      },
+      error: {
+        'chat.response': '出错了，如果没有配置 API 密钥，请前往设置 > 模型提供商中配置密钥'
       }
     }
   }
@@ -378,8 +443,4 @@ i18n.use(initReactI18next).init({
   }
 })
 
-export function i18nInit() {
-  i18n.changeLanguage(store.getState().settings.language || 'en-US')
-}
-
 export default i18n

src/renderer/src/init.ts

@@ -1,8 +1,9 @@
-import localforage from 'localforage'
 import KeyvStorage from '@kangfenmao/keyv-storage'
 import * as Sentry from '@sentry/electron/renderer'
-import { isProduction, loadScript } from './utils'
+import localforage from 'localforage'
+
 import { ThemeMode } from './store/settings'
+import { isProduction, loadScript } from './utils'
 
 async function initSentry() {
   if (await isProduction()) {

src/renderer/src/main.tsx

@@ -1,10 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
 import './assets/styles/index.scss'
 import './init'
 import './i18n'
 
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+import App from './App'
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <App />

src/renderer/src/pages/agents/AgentsPage.tsx

@@ -0,0 +1,120 @@
+import { UnorderedListOutlined } from '@ant-design/icons'
+import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
+import Agents from '@renderer/config/agents.json'
+import { useAgents } from '@renderer/hooks/useAgents'
+import { useAssistants } from '@renderer/hooks/useAssistant'
+import { covertAgentToAssistant } from '@renderer/services/assistant'
+import { Agent } from '@renderer/types'
+import { Col, Row, Typography } from 'antd'
+import { find, groupBy } from 'lodash'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import AgentCard from './components/AgentCard'
+import ManageAgentsPopup from './components/ManageAgentsPopup'
+import UserAgents from './components/UserAgents'
+
+const { Title } = Typography
+
+const AppsPage: FC = () => {
+  const { assistants, addAssistant } = useAssistants()
+  const { agents } = useAgents()
+  const agentGroups = groupBy(Agents, 'group')
+  const { t } = useTranslation()
+
+  const onAddAgentConfirm = (agent: Agent) => {
+    const added = find(assistants, { id: agent.id })
+
+    window.modal.confirm({
+      title: agent.emoji + ' ' + agent.name,
+      content: agent.description || agent.prompt,
+      icon: null,
+      closable: true,
+      maskClosable: true,
+      okButtonProps: { type: 'primary', disabled: Boolean(added) },
+      okText: added ? t('button.added') : t('button.add'),
+      onOk: () => onAddAgent(agent)
+    })
+  }
+
+  const onAddAgent = (agent: Agent) => {
+    addAssistant(covertAgentToAssistant(agent))
+    window.message.success({
+      content: t('message.assistant.added.content'),
+      key: 'agent-added',
+      style: { marginTop: '5vh' }
+    })
+  }
+
+  return (
+    <Container>
+      <Navbar>
+        <NavbarCenter style={{ borderRight: 'none' }}>{t('agents.title')}</NavbarCenter>
+      </Navbar>
+      <ContentContainer>
+        <AssistantsContainer>
+          <HStack alignItems="center" style={{ marginBottom: 16 }}>
+            <Title level={3}>{t('agents.my_agents')}</Title>
+            {agents.length > 0 && <ManageIcon onClick={ManageAgentsPopup.show} />}
+          </HStack>
+          <UserAgents onAdd={onAddAgentConfirm} />
+          {Object.keys(agentGroups).map((group) => (
+            <div key={group}>
+              <Title level={3} key={group} style={{ marginBottom: 16 }}>
+                {group}
+              </Title>
+              <Row gutter={16}>
+                {agentGroups[group].map((agent, index) => {
+                  return (
+                    <Col span={8} key={group + index}>
+                      <AgentCard onClick={() => onAddAgentConfirm(agent)} agent={agent as any} />
+                    </Col>
+                  )
+                })}
+              </Row>
+            </div>
+          ))}
+          <div style={{ minHeight: 20 }} />
+        </AssistantsContainer>
+      </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: row;
+  justify-content: center;
+  height: 100%;
+  overflow-y: scroll;
+  background-color: var(--color-background);
+`
+
+const AssistantsContainer = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: calc(100vh - var(--navbar-height));
+  padding: 20px;
+  max-width: 1000px;
+`
+
+const ManageIcon = styled(UnorderedListOutlined)`
+  font-size: 18px;
+  color: var(--color-icon);
+  cursor: pointer;
+  margin-bottom: 0.5em;
+  margin-left: 0.5em;
+`
+
+export default AppsPage

src/renderer/src/pages/agents/components/AddAgentPopup.tsx

@@ -0,0 +1,137 @@
+import 'emoji-picker-element'
+
+import EmojiPicker from '@renderer/components/EmojiPicker'
+import { TopView } from '@renderer/components/TopView'
+import { useAgents } from '@renderer/hooks/useAgents'
+import { syncAgentToAssistant } from '@renderer/services/assistant'
+import { Agent } from '@renderer/types'
+import { getLeadingEmoji, uuid } from '@renderer/utils'
+import { Button, Form, FormInstance, Input, Modal, Popover } from 'antd'
+import TextArea from 'antd/es/input/TextArea'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  agent?: Agent
+  resolve: (data: Agent | null) => void
+}
+
+type FieldType = {
+  id: string
+  name: string
+  prompt: string
+}
+
+const PopupContainer: React.FC<Props> = ({ agent, resolve }) => {
+  const [open, setOpen] = useState(true)
+  const [form] = Form.useForm()
+  const { t } = useTranslation()
+  const { addAgent, updateAgent } = useAgents()
+  const formRef = useRef<FormInstance>(null)
+  const [emoji, setEmoji] = useState(agent?.emoji)
+
+  const onFinish = (values: FieldType) => {
+    const _emoji = emoji || getLeadingEmoji(values.name)
+
+    if (values.name.trim() === '' || values.prompt.trim() === '') {
+      return
+    }
+
+    if (agent) {
+      const _agent = {
+        ...agent,
+        name: values.name,
+        emoji: _emoji,
+        prompt: values.prompt
+      }
+      updateAgent(_agent)
+      syncAgentToAssistant(_agent)
+      resolve(_agent)
+      setOpen(false)
+      return
+    }
+
+    const _agent = {
+      id: uuid(),
+      name: values.name,
+      emoji: _emoji,
+      prompt: values.prompt,
+      group: 'user'
+    }
+
+    addAgent(_agent)
+    resolve(_agent)
+    setOpen(false)
+  }
+
+  const onCancel = () => {
+    setOpen(false)
+  }
+
+  const onClose = () => {
+    resolve(null)
+  }
+
+  useEffect(() => {
+    if (agent) {
+      form.setFieldsValue({
+        name: agent.name,
+        prompt: agent.prompt
+      })
+    }
+  }, [agent, form])
+
+  return (
+    <Modal
+      style={{ marginTop: '10vh' }}
+      title={agent ? t('agents.edit.title') : t('agents.add.title')}
+      open={open}
+      onOk={() => formRef.current?.submit()}
+      onCancel={onCancel}
+      maskClosable={false}
+      afterClose={onClose}
+      okText={agent ? t('common.save') : t('agents.add.button')}>
+      <Form
+        ref={formRef}
+        form={form}
+        labelCol={{ flex: '80px' }}
+        labelAlign="left"
+        colon={false}
+        style={{ marginTop: 25 }}
+        onFinish={onFinish}>
+        <Form.Item name="name" label="Emoji">
+          <Popover content={<EmojiPicker onEmojiClick={setEmoji} />} trigger="click" arrow>
+            <Button icon={emoji && <span style={{ fontSize: 20 }}>{emoji}</span>}>{t('common.select')}</Button>
+          </Popover>
+        </Form.Item>
+        <Form.Item name="name" label={t('agents.add.name')} rules={[{ required: true }]}>
+          <Input placeholder={t('agents.add.name.placeholder')} spellCheck={false} allowClear />
+        </Form.Item>
+        <Form.Item name="prompt" label={t('agents.add.prompt')} rules={[{ required: true }]}>
+          <TextArea placeholder={t('agents.add.prompt.placeholder')} spellCheck={false} rows={4} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+
+export default class AddAgentPopup {
+  static topviewId = 0
+  static hide() {
+    TopView.hide('AddAgentPopup')
+  }
+  static show(agent?: Agent) {
+    return new Promise<Agent | null>((resolve) => {
+      TopView.show(
+        <PopupContainer
+          agent={agent}
+          resolve={(v) => {
+            resolve(v)
+            this.hide()
+          }}
+        />,
+        'AddAgentPopup'
+      )
+    })
+  }
+}

src/renderer/src/pages/agents/components/AgentCard.tsx

@@ -0,0 +1,81 @@
+import { Agent } from '@renderer/types'
+import { Col, Typography } from 'antd'
+import styled from 'styled-components'
+
+interface Props {
+  agent: Agent
+  onClick?: () => void
+}
+
+const { Title } = Typography
+
+const AgentCard: React.FC<Props> = ({ agent, onClick }) => {
+  return (
+    <Container onClick={onClick}>
+      {agent.emoji && <EmojiHeader>{agent.emoji}</EmojiHeader>}
+      <Col>
+        <AgentHeader>
+          <AgentName level={5} style={{ marginBottom: 0 }}>
+            {agent.name}
+          </AgentName>
+        </AgentHeader>
+        <AgentCardPrompt>{agent.prompt}</AgentCardPrompt>
+      </Col>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 16px;
+  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;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5px;
+  font-size: 25px;
+  line-height: 25px;
+`
+
+const AgentHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const AgentName = styled(Title)`
+  font-size: 18px;
+  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  color: var(--color-white);
+  font-weight: 900;
+`
+
+const AgentCardPrompt = styled.div`
+  color: #666;
+  margin-top: 6px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`
+
+export default AgentCard

src/renderer/src/pages/agents/components/ManageAgentsPopup.tsx

@@ -0,0 +1,109 @@
+import { DeleteOutlined, EditOutlined, MenuOutlined } from '@ant-design/icons'
+import DragableList from '@renderer/components/DragableList'
+import { Box, HStack } from '@renderer/components/Layout'
+import { TopView } from '@renderer/components/TopView'
+import { useAgents } from '@renderer/hooks/useAgents'
+import { Empty, Modal, Popconfirm } from 'antd'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import AddAgentPopup from './AddAgentPopup'
+
+const PopupContainer: React.FC = () => {
+  const [open, setOpen] = useState(true)
+  const { t } = useTranslation()
+  const { agents, removeAgent, updateAgents } = useAgents()
+
+  const onOk = () => {
+    setOpen(false)
+  }
+
+  const onCancel = () => {
+    setOpen(false)
+  }
+
+  const onClose = async () => {
+    ManageAgentsPopup.hide()
+  }
+
+  useEffect(() => {
+    if (agents.length === 0) {
+      setOpen(false)
+    }
+  }, [agents])
+
+  return (
+    <Modal
+      style={{ marginTop: '10vh' }}
+      title={t('agents.manage.title')}
+      open={open}
+      onOk={onOk}
+      onCancel={onCancel}
+      afterClose={onClose}
+      footer={null}>
+      <Container>
+        {agents.length > 0 && (
+          <DragableList list={agents} onUpdate={updateAgents}>
+            {(item) => (
+              <AgentItem>
+                <Box mr={8}>
+                  {item.emoji} {item.name}
+                </Box>
+                <HStack gap="15px">
+                  <Popconfirm
+                    title={t('agents.delete.popup.content')}
+                    okButtonProps={{ danger: true }}
+                    onConfirm={() => removeAgent(item)}>
+                    <DeleteOutlined style={{ color: 'var(--color-error)' }} />
+                  </Popconfirm>
+                  <EditOutlined style={{ cursor: 'pointer' }} onClick={() => AddAgentPopup.show(item)} />
+                  <MenuOutlined style={{ cursor: 'move' }} />
+                </HStack>
+              </AgentItem>
+            )}
+          </DragableList>
+        )}
+        {agents.length === 0 && <Empty description="" />}
+      </Container>
+    </Modal>
+  )
+}
+
+const Container = styled.div`
+  padding: 12px 0;
+  height: 50vh;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+const AgentItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-radius: 8px;
+  user-select: none;
+  background-color: var(--color-background-soft);
+  margin-bottom: 8px;
+  .anticon {
+    font-size: 16px;
+    color: var(--color-icon);
+  }
+  &:hover {
+    background-color: var(--color-background-mute);
+  }
+`
+
+export default class ManageAgentsPopup {
+  static topviewId = 0
+  static hide() {
+    TopView.hide('ManageAgentsPopup')
+  }
+  static show() {
+    TopView.show(<PopupContainer />, 'ManageAgentsPopup')
+  }
+}

src/renderer/src/pages/agents/components/UserAgents.tsx

@@ -0,0 +1,57 @@
+import { PlusOutlined } from '@ant-design/icons'
+import { useAgents } from '@renderer/hooks/useAgents'
+import { Agent } from '@renderer/types'
+import { Col, Row } from 'antd'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+import AddAssistantPopup from './AddAgentPopup'
+import AgentCard from './AgentCard'
+
+interface Props {
+  onAdd: (agent: Agent) => void
+}
+
+const UserAgents: FC<Props> = ({ onAdd }) => {
+  const { agents } = useAgents()
+
+  const onAddMyAgentClick = () => {
+    AddAssistantPopup.show()
+  }
+
+  return (
+    <Row gutter={16} style={{ marginBottom: 16 }}>
+      {agents.map((agent) => (
+        <Col span={8} key={agent.id}>
+          <AgentCard agent={agent} onClick={() => onAdd(agent)} />
+        </Col>
+      ))}
+      <Col span={8}>
+        <AssistantCardContainer style={{ borderStyle: 'dashed' }} onClick={onAddMyAgentClick}>
+          <PlusOutlined />
+        </AssistantCardContainer>
+      </Col>
+    </Row>
+  )
+}
+
+const AssistantCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  border: 1px dashed var(--color-border);
+  border-radius: 10px;
+  cursor: pointer;
+  min-height: 84px;
+  .anticon {
+    font-size: 16px;
+    color: var(--color-icon);
+  }
+  &:hover {
+    background-color: var(--color-background-soft);
+  }
+`
+
+export default UserAgents

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

@@ -1,168 +0,0 @@
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
-import { Col, Row, Typography } from 'antd'
-import { find, groupBy } from 'lodash'
-import { FC } from 'react'
-import styled from 'styled-components'
-import { SystemAssistant } from '@renderer/types'
-import { getDefaultAssistant } from '@renderer/services/assistant'
-import { useAssistants } from '@renderer/hooks/useAssistant'
-import { useTranslation } from 'react-i18next'
-import SYSTEM_ASSISTANTS from '@renderer/config/assistants.json'
-
-const { Title } = Typography
-
-const AppsPage: FC = () => {
-  const { assistants, addAssistant } = useAssistants()
-  const assistantGroups = groupBy(
-    SYSTEM_ASSISTANTS.map((a) => ({ ...a, id: String(a.id) })),
-    'group'
-  )
-  const { t } = useTranslation()
-
-  const onAddAssistantConfirm = (assistant: SystemAssistant) => {
-    const added = find(assistants, { id: assistant.id })
-
-    window.modal.confirm({
-      title: assistant.name,
-      content: assistant.description || assistant.prompt,
-      icon: null,
-      closable: true,
-      maskClosable: true,
-      okButtonProps: { type: 'primary', disabled: Boolean(added) },
-      okText: added ? t('button.added') : t('button.add'),
-      onOk: () => onAddAssistant(assistant)
-    })
-  }
-
-  const onAddAssistant = (assistant: SystemAssistant) => {
-    addAssistant({
-      ...getDefaultAssistant(),
-      ...assistant,
-      id: String(assistant.id)
-    })
-    window.message.success({
-      content: t('message.assistant.added.content'),
-      key: 'assistant-added',
-      style: { marginTop: '5vh' }
-    })
-  }
-
-  return (
-    <Container>
-      <Navbar>
-        <NavbarCenter style={{ borderRight: 'none' }}>{t('apps.title')}</NavbarCenter>
-      </Navbar>
-      <ContentContainer>
-        <AssistantsContainer>
-          {Object.keys(assistantGroups).map((group) => (
-            <div key={group}>
-              <Title level={3} key={group} style={{ marginBottom: 16 }}>
-                {group}
-              </Title>
-              <Row gutter={16}>
-                {assistantGroups[group].map((assistant, index) => {
-                  return (
-                    <Col span={8} key={group + index}>
-                      <AssistantCard onClick={() => onAddAssistantConfirm(assistant)}>
-                        <EmojiHeader>{assistant.emoji}</EmojiHeader>
-                        <Col>
-                          <AssistantHeader>
-                            <AssistantName level={5} style={{ marginBottom: 0 }}>
-                              {assistant.name.replace(assistant.emoji + ' ', '')}
-                            </AssistantName>
-                          </AssistantHeader>
-                          <AssistantCardPrompt>{assistant.prompt}</AssistantCardPrompt>
-                        </Col>
-                      </AssistantCard>
-                    </Col>
-                  )
-                })}
-              </Row>
-            </div>
-          ))}
-          <div style={{ minHeight: 20 }} />
-        </AssistantsContainer>
-      </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: row;
-  justify-content: center;
-  height: 100%;
-  overflow-y: scroll;
-`
-
-const AssistantsContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  height: calc(100vh - var(--navbar-height));
-  padding: 20px;
-  max-width: 1000px;
-`
-
-const AssistantCard = styled.div`
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 16px;
-  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;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  margin-right: 5px;
-  font-size: 25px;
-  line-height: 25px;
-`
-
-const AssistantHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-`
-
-const AssistantName = styled(Title)`
-  font-size: 18px;
-  line-height: 1.2;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  color: var(--color-white);
-  font-weight: 900;
-`
-
-const AssistantCardPrompt = styled.div`
-  color: #666;
-  margin-top: 6px;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`
-
-export default AppsPage

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

@@ -1,16 +1,18 @@
 import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
+import { isMac, isWindows } from '@renderer/config/constant'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
+import { useShowAssistants, useShowRightSidebar } from '@renderer/hooks/useStore'
+import { useTheme } from '@renderer/providers/ThemeProvider'
+import { Assistant } from '@renderer/types'
+import { uuid } from '@renderer/utils'
+import { Switch } from 'antd'
 import { FC, useState } from 'react'
 import styled from 'styled-components'
-import Chat from './components/Chat'
+
+import AddAssistantPopup from './components/AddAssistantPopup'
 import Assistants from './components/Assistants'
-import { uuid } from '@renderer/utils'
+import Chat from './components/Chat'
-import { useShowAssistants, useShowRightSidebar } from '@renderer/hooks/useStore'
 import Navigation from './components/NavigationCenter'
-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
 
@@ -24,13 +26,16 @@ const HomePage: FC = () => {
 
   _activeAssistant = activeAssistant
 
-  const onCreateAssistant = () => {
+  const onCreateDefaultAssistant = () => {
     const assistant = { ...defaultAssistant, id: uuid() }
     addAssistant(assistant)
     setActiveAssistant(assistant)
   }
 
-  console.debug('theme', theme)
+  const onCreateAssistant = async () => {
+    const assistant = await AddAssistantPopup.show()
+    assistant && setActiveAssistant(assistant)
+  }
 
   return (
     <Container>
@@ -63,7 +68,7 @@ const HomePage: FC = () => {
           <Assistants
             activeAssistant={activeAssistant}
             setActiveAssistant={setActiveAssistant}
-            onCreateAssistant={onCreateAssistant}
+            onCreateAssistant={onCreateDefaultAssistant}
           />
         )}
         <Chat assistant={activeAssistant} />
@@ -82,6 +87,7 @@ const ContentContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: row;
+  background-color: var(--color-background);
 `
 
 export const NewButton = styled.div`

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

@@ -0,0 +1,129 @@
+import { TopView } from '@renderer/components/TopView'
+import systemAgents from '@renderer/config/agents.json'
+import { useAgents } from '@renderer/hooks/useAgents'
+import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
+import { covertAgentToAssistant } from '@renderer/services/assistant'
+import { Agent, Assistant } from '@renderer/types'
+import { Input, Modal, Tag } from 'antd'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+interface Props {
+  resolve: (value: Assistant | undefined) => void
+}
+
+const PopupContainer: React.FC<Props> = ({ resolve }) => {
+  const [open, setOpen] = useState(true)
+  const { t } = useTranslation()
+  const { agents: userAgents } = useAgents()
+  const [searchText, setSearchText] = useState('')
+  const { defaultAssistant } = useDefaultAssistant()
+  const { assistants, addAssistant } = useAssistants()
+
+  const defaultAgent: Agent = useMemo(
+    () => ({
+      id: defaultAssistant.id,
+      name: defaultAssistant.name,
+      emoji: '',
+      prompt: defaultAssistant.prompt,
+      group: 'system'
+    }),
+    [defaultAssistant.id, defaultAssistant.name, defaultAssistant.prompt]
+  )
+
+  const agents = useMemo(() => {
+    const allAgents = [defaultAgent, ...userAgents, ...systemAgents] as Agent[]
+    const list = allAgents.filter((agent) => !assistants.map((a) => a.id).includes(agent.id))
+    return searchText
+      ? list.filter((agent) => agent.name.toLowerCase().includes(searchText.trim().toLocaleLowerCase()))
+      : list
+  }, [assistants, defaultAgent, searchText, userAgents])
+
+  const onCreateAssistant = (agent: Agent) => {
+    if (assistants.map((a) => a.id).includes(String(agent.id))) return
+    const assistant = covertAgentToAssistant(agent)
+    addAssistant(assistant)
+    resolve(assistant)
+    setOpen(false)
+  }
+
+  const onCancel = () => {
+    setOpen(false)
+  }
+
+  const onClose = async () => {
+    resolve(undefined)
+    AddAssistantPopup.hide()
+  }
+
+  return (
+    <Modal
+      style={{ marginTop: '5vh' }}
+      title={t('chat.add.assistant.title')}
+      open={open}
+      onCancel={onCancel}
+      afterClose={onClose}
+      transitionName=""
+      maskTransitionName=""
+      footer={null}>
+      <Input
+        placeholder={t('common.search')}
+        value={searchText}
+        onChange={(e) => setSearchText(e.target.value)}
+        allowClear
+        autoFocus
+        style={{ marginBottom: 16 }}
+      />
+      <Container>
+        {agents.map((agent) => (
+          <AgentItem key={agent.id} onClick={() => onCreateAssistant(agent)}>
+            {agent.emoji} {agent.name}
+            {agent.group === 'system' && <Tag color="orange">{t('agents.tag.system')}</Tag>}
+            {agent.group === 'user' && <Tag color="green">{t('agents.tag.user')}</Tag>}
+          </AgentItem>
+        ))}
+      </Container>
+    </Modal>
+  )
+}
+
+const Container = styled.div`
+  height: 50vh;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+const AgentItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-radius: 8px;
+  user-select: none;
+  background-color: var(--color-background-soft);
+  margin-bottom: 8px;
+  cursor: pointer;
+  .anticon {
+    font-size: 16px;
+    color: var(--color-icon);
+  }
+  &:hover {
+    background-color: var(--color-background-mute);
+  }
+`
+
+export default class AddAssistantPopup {
+  static topviewId = 0
+  static hide() {
+    TopView.hide('AddAssistantPopup')
+  }
+  static show() {
+    return new Promise<Assistant | undefined>((resolve) => {
+      TopView.show(<PopupContainer resolve={resolve} />, 'AddAssistantPopup')
+    })
+  }
+}

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

@@ -2,7 +2,7 @@ import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
-import { getDefaultTopic } from '@renderer/services/assistant'
+import { getDefaultTopic, syncAsistantToAgent } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { useAppSelector } from '@renderer/store'
 import { Assistant } from '@renderer/types'
@@ -10,7 +10,7 @@ import { droppableReorder, uuid } from '@renderer/utils'
 import { Dropdown } from 'antd'
 import { ItemType } from 'antd/es/menu/interface'
 import { last } from 'lodash'
-import { FC } from 'react'
+import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -22,18 +22,21 @@ interface Props {
 
 const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAssistant }) => {
   const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
-  const { updateAssistant } = useAssistant(activeAssistant.id)
   const generating = useAppSelector((state) => state.runtime.generating)
-
+  const { updateAssistant } = useAssistant(activeAssistant.id)
   const { t } = useTranslation()
 
-  const onDelete = (assistant: Assistant) => {
+  const onDelete = useCallback(
+    (assistant: Assistant) => {
       const _assistant = last(assistants.filter((a) => a.id !== assistant.id))
       _assistant ? setActiveAssistant(_assistant) : onCreateAssistant()
       removeAssistant(assistant.id)
-  }
+    },
+    [assistants, onCreateAssistant, removeAssistant, setActiveAssistant]
+  )
 
-  const getMenuItems = (assistant: Assistant) =>
+  const getMenuItems = useCallback(
+    (assistant: Assistant) =>
       [
         {
           label: t('common.edit'),
@@ -42,6 +45,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
           async onClick() {
             const _assistant = await AssistantSettingPopup.show({ assistant })
             updateAssistant(_assistant)
+            syncAsistantToAgent(_assistant)
           }
         },
         {
@@ -62,25 +66,35 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
           danger: true,
           onClick: () => onDelete(assistant)
         }
-    ] as ItemType[]
+      ] as ItemType[],
+    [addAssistant, onDelete, setActiveAssistant, t, updateAssistant]
+  )
 
-  const onDragEnd = (result: DropResult) => {
+  const onDragEnd = useCallback(
+    (result: DropResult) => {
       if (result.destination) {
         const sourceIndex = result.source.index
         const destIndex = result.destination.index
         const reorderAssistants = droppableReorder<Assistant>(assistants, sourceIndex, destIndex)
         updateAssistants(reorderAssistants)
       }
-  }
+    },
+    [assistants, updateAssistants]
+  )
 
-  const onSwitchAssistant = (assistant: Assistant) => {
+  const onSwitchAssistant = useCallback(
+    (assistant: Assistant): any => {
       if (generating) {
-      window.message.warning({ content: t('message.switch.disabled'), key: 'switch-assistant' })
+        return window.message.warning({
-      return
+          content: t('message.switch.disabled'),
+          key: 'switch-assistant'
+        })
       }
       EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)
       setActiveAssistant(assistant)
-  }
+    },
+    [generating, setActiveAssistant, t]
+  )
 
   return (
     <Container>
@@ -91,14 +105,16 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
               {assistants.map((assistant, index) => (
                 <Draggable key={`draggable_${assistant.id}_${index}`} draggableId={assistant.id} index={index}>
                   {(provided) => (
-                    <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
                       <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
                         <AssistantItem
                           onClick={() => onSwitchAssistant(assistant)}
                           className={assistant.id === activeAssistant?.id ? 'active' : ''}>
-                          <AssistantName className="name">
+                          <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
-                            {assistant.name || t('assistant.default.name')}
-                          </AssistantName>
                         </AssistantItem>
                       </Dropdown>
                     </div>
@@ -129,9 +145,9 @@ const AssistantItem = styled.div`
   flex-direction: column;
   padding: 7px 10px;
   position: relative;
-  border-radius: 5px;
+  border-radius: 8px;
-  margin-bottom: 5px;
   cursor: pointer;
+  font-family: Ubuntu;
   .anticon {
     display: none;
   }
@@ -146,7 +162,7 @@ const AssistantItem = styled.div`
     background-color: var(--color-background-mute);
     cursor: pointer;
     .name {
-      font-weight: bolder;
+      font-weight: 500;
     }
   }
 `

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

@@ -1,12 +1,13 @@
-import { Assistant } from '@renderer/types'
-import { FC } from 'react'
-import styled from 'styled-components'
-import Inputbar from './Inputbar'
-import Messages from './Messages'
-import { Flex } from 'antd'
-import RightSidebar from './RightSidebar'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useActiveTopic } from '@renderer/hooks/useTopic'
+import { Assistant } from '@renderer/types'
+import { Flex } from 'antd'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+import Inputbar from './input/Inputbar'
+import Messages from './Messages'
+import RightSidebar from './sidebar/RightSidebar'
 
 interface Props {
   assistant: Assistant
@@ -18,10 +19,10 @@ const Chat: FC<Props> = (props) => {
 
   return (
     <Container id="chat">
-      <Flex vertical flex={1} justify="space-between">
+      <Main vertical flex={1} justify="space-between">
         <Messages assistant={assistant} topic={activeTopic} />
         <Inputbar assistant={assistant} setActiveTopic={setActiveTopic} />
-      </Flex>
+      </Main>
       <RightSidebar assistant={assistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
     </Container>
   )
@@ -35,4 +36,8 @@ const Container = styled.div`
   justify-content: space-between;
 `
 
+const Main = styled(Flex)`
+  height: calc(100vh - var(--navbar-height));
+`
+
 export default Chat

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

@@ -1,28 +1,30 @@
 import {
   CheckOutlined,
-  CopyOutlined,
   DeleteOutlined,
   EditOutlined,
   MenuOutlined,
+  QuestionCircleOutlined,
   SaveOutlined,
   SyncOutlined
 } from '@ant-design/icons'
+import { FONT_FAMILY } from '@renderer/config/constant'
 import { getModelLogo } from '@renderer/config/provider'
 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 Markdown from 'react-markdown'
-import styled from 'styled-components'
-import CodeBlock from './CodeBlock'
 import { useRuntime } from '@renderer/hooks/useStore'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { Message, Model } from '@renderer/types'
+import { firstLetter, removeLeadingEmoji } from '@renderer/utils'
+import { Alert, Avatar, Dropdown, Popconfirm, Tooltip } from 'antd'
+import dayjs from 'dayjs'
+import { upperFirst } from 'lodash'
+import { FC, memo, useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import Markdown from './markdown/Markdown'
+import SelectModelDropdown from './SelectModelDropdown'
 
 interface Props {
   message: Message
@@ -35,64 +37,51 @@ interface Props {
 const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) => {
   const avatar = useAvatar()
   const { t } = useTranslation()
-  const { assistant } = useAssistant(message.assistantId)
+  const { assistant, model, setModel } = 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 isAssistantMessage = message.role === 'assistant'
+  const canRegenerate = isLastMessage && isAssistantMessage
+  const showMetadata = Boolean(message.usage) && !generating
 
-  const onCopy = () => {
+  const onCopy = useCallback(() => {
     navigator.clipboard.writeText(message.content)
     window.message.success({ content: t('message.copied'), key: 'copy-message' })
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
-  }
+  }, [message.content, t])
 
-  const onDelete = async () => {
+  const onEdit = useCallback(() => EventEmitter.emit(EVENT_NAMES.EDIT_MESSAGE, message), [message])
-    const confirmed = await window.modal.confirm({
-      icon: null,
-      title: t('message.message.delete.title'),
-      content: t('message.message.delete.content'),
-      okText: t('common.delete'),
-      okType: 'danger'
-    })
-    confirmed && onDeleteMessage?.(message)
-  }
 
-  const onEdit = () => {
+  const onRegenerate = useCallback(
-    EventEmitter.emit(EVENT_NAMES.EDIT_MESSAGE, message)
+    (model: Model) => {
-  }
+      setModel(model)
-
+      setTimeout(() => EventEmitter.emit(EVENT_NAMES.REGENERATE_MESSAGE, model), 100)
-  const onRegenerate = () => {
+    },
-    onDeleteMessage?.(message)
+    [setModel]
-    setTimeout(() => EventEmitter.emit(EVENT_NAMES.REGENERATE_MESSAGE), 100)
+  )
-  }
-
-  const getMessageContent = (message: Message) => {
-    if (isEmpty(message.content) && message.status === 'paused') {
-      return t('message.chat.completion.paused')
-    }
-    return message.content
-  }
 
   const getUserName = useCallback(() => {
-    if (message.id === 'assistant') {
+    if (message.id === 'assistant') return assistant?.name
-      return assistant?.name
+    if (message.role === 'assistant') return upperFirst(message.modelId)
-    }
-
-    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(
+  const fontFamily = useMemo(() => {
-    (message: Message) => {
+    return messageFont === 'serif' ? FONT_FAMILY.replace('sans-serif', 'serif').replace('Ubuntu, ', '') : FONT_FAMILY
-      return [
+  }, [messageFont])
+
+  const messageBorder = showMessageDivider ? undefined : 'none'
+  const avatarSource = useMemo(() => (message.modelId ? getModelLogo(message.modelId) : undefined), [message.modelId])
+  const avatarName = useMemo(() => firstLetter(assistant?.name).toUpperCase(), [assistant?.name])
+  const username = useMemo(() => removeLeadingEmoji(getUserName()), [getUserName])
+
+  const dropdownItems = useMemo(
+    () => [
       {
         label: t('chat.save'),
         key: 'save',
@@ -102,47 +91,53 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
           window.api.saveFile(fileName, message.content)
         }
       }
-      ]
+    ],
-    },
+    [t, message]
-    [t]
   )
 
-  const fontFamily = messageFont === 'serif' ? "Georgia, Cambria, 'Times New Roman', Times, serif" : undefined
+  const MessageItem = useCallback(() => {
-  const messageBorder = showMessageDivider ? undefined : 'none'
+    if (message.status === 'sending') {
+      return (
+        <MessageContentLoading>
+          <SyncOutlined spin size={24} />
+        </MessageContentLoading>
+      )
+    }
+
+    if (message.status === 'error') {
+      return (
+        <Alert
+          message={t('error.chat.response')}
+          description={<Markdown message={message} />}
+          type="error"
+          style={{ marginBottom: 15 }}
+        />
+      )
+    }
+
+    return <Markdown message={message} />
+  }, [message])
 
   return (
-    <MessageContainer key={message.id} className="message" style={{ border: messageBorder }}>
+    <MessageContainer key={message.id} className="message">
       <MessageHeader>
         <AvatarWrapper>
-          {message.role === 'assistant' ? (
+          {isAssistantMessage ? (
-            <Avatar src={message.modelId ? getModelLogo(message.modelId) : undefined} size={35}>
+            <Avatar src={avatarSource} size={35} style={{ borderRadius: '20%' }}>
-              {firstLetter(assistant?.name).toUpperCase()}
+              {avatarName}
             </Avatar>
           ) : (
-            <Avatar src={avatar} size={35} />
+            <Avatar src={avatar} size={35} style={{ borderRadius: '20%' }} />
           )}
           <UserWrap>
-            <UserName>{removeLeadingEmoji(getUserName())}</UserName>
+            <UserName>{username}</UserName>
             <MessageTime>{dayjs(message.createdAt).format('MM/DD HH:mm')}</MessageTime>
           </UserWrap>
         </AvatarWrapper>
       </MessageHeader>
       <MessageContent style={{ fontFamily }}>
-        {message.status === 'sending' && (
+        <MessageItem />
-          <MessageContentLoading>
+        <MessageFooter style={{ border: messageBorder }}>
-            <SyncOutlined spin size={24} />
-          </MessageContentLoading>
-        )}
-        {message.status !== 'sending' && (
-          <Markdown className="markdown" components={{ code: CodeBlock as any }}>
-            {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'} ${(!isLastMessage || isUserMessage) && 'user'}`}>
               {message.role === 'user' && (
@@ -154,24 +149,32 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
               )}
               <Tooltip title={t('common.copy')} mouseEnterDelay={0.8}>
                 <ActionButton onClick={onCopy}>
-                {!copied && <CopyOutlined />}
+                  {!copied && <i className="iconfont icon-copy"></i>}
                   {copied && <CheckOutlined style={{ color: 'var(--color-primary)' }} />}
                 </ActionButton>
               </Tooltip>
-            <Tooltip title={t('common.delete')} mouseEnterDelay={0.8}>
-              <ActionButton onClick={onDelete}>
-                <DeleteOutlined />
-              </ActionButton>
-            </Tooltip>
               {canRegenerate && (
+                <SelectModelDropdown model={model} onSelect={onRegenerate} placement="topRight">
                   <Tooltip title={t('common.regenerate')} mouseEnterDelay={0.8}>
-                <ActionButton onClick={onRegenerate}>
+                    <ActionButton>
                       <SyncOutlined />
                     </ActionButton>
                   </Tooltip>
+                </SelectModelDropdown>
               )}
+              <Popconfirm
+                title={t('message.message.delete.content')}
+                okButtonProps={{ danger: true }}
+                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+                onConfirm={() => onDeleteMessage?.(message)}>
+                <Tooltip title={t('common.delete')} mouseEnterDelay={1}>
+                  <ActionButton>
+                    <DeleteOutlined />
+                  </ActionButton>
+                </Tooltip>
+              </Popconfirm>
               {!isUserMessage && (
-              <Dropdown menu={{ items: getDropdownMenus(message) }} trigger={['click']} placement="topRight" arrow>
+                <Dropdown menu={{ items: dropdownItems }} trigger={['click']} placement="topRight" arrow>
                   <ActionButton>
                     <MenuOutlined />
                   </ActionButton>
@@ -179,6 +182,13 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
               )}
             </MenusBar>
           )}
+          {showMetadata && (
+            <MessageMetadata>
+              Tokens: {message?.usage?.total_tokens} | ↑{message?.usage?.prompt_tokens} | ↓
+              {message?.usage?.completion_tokens}
+            </MessageMetadata>
+          )}
+        </MessageFooter>
       </MessageContent>
     </MessageContainer>
   )
@@ -187,9 +197,8 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
 const MessageContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 10px;
+  padding: 0 20px;
   position: relative;
-  border-bottom: 0.5px dotted var(--color-border);
   .menubar {
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -198,7 +207,7 @@ const MessageContainer = styled.div`
     }
     &.user {
       position: absolute;
-      top: 15px;
+      top: 10px;
       right: 10px;
     }
   }
@@ -250,6 +259,16 @@ const MessageContent = styled.div`
   margin-top: 5px;
 `
 
+const MessageFooter = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2px 0;
+  margin: 2px 0 8px 0;
+  border-top: 0.5px dashed var(--color-border);
+`
+
 const MessageContentLoading = styled.div`
   display: flex;
   flex-direction: row;
@@ -263,17 +282,18 @@ const MenusBar = styled.div`
   justify-content: flex-end;
   align-items: center;
   gap: 6px;
+  margin-left: -5px;
 `
 
 const MessageMetadata = styled.div`
   font-size: 12px;
   color: var(--color-text-2);
   user-select: text;
+  margin: 2px 0;
 `
 
 const ActionButton = styled.div`
   cursor: pointer;
-  border: 1px solid var(--color-border);
   border-radius: 8px;
   display: flex;
   flex-direction: row;
@@ -281,7 +301,15 @@ const ActionButton = styled.div`
   align-items: center;
   width: 30px;
   height: 30px;
+  transition: all 0.3s ease;
+  &:hover {
+    background-color: var(--color-background-mute);
     .anticon {
+      color: var(--color-text-1);
+    }
+  }
+  .anticon,
+  .iconfont {
     cursor: pointer;
     font-size: 14px;
     color: var(--color-icon);
@@ -291,4 +319,4 @@ const ActionButton = styled.div`
   }
 `
 
-export default MessageItem
+export default memo(MessageItem)

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

@@ -1,16 +1,19 @@
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { Assistant, Message, Topic } from '@renderer/types'
-import localforage from 'localforage'
-import { FC, useCallback, useEffect, useRef, useState } from 'react'
-import styled from 'styled-components'
-import MessageItem from './Message'
-import { reverse } from 'lodash'
-import { fetchChatCompletion, fetchMessagesSummary } from '@renderer/services/api'
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { estimateHistoryTokenCount, runAsyncFunction } from '@renderer/utils'
-import LocalStorage from '@renderer/services/storage'
 import { useProviderByAssistant } from '@renderer/hooks/useProvider'
+import { fetchChatCompletion, fetchMessagesSummary } from '@renderer/services/api'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { estimateHistoryTokenCount, filterMessages } from '@renderer/services/messages'
+import LocalStorage from '@renderer/services/storage'
+import { Assistant, Message, Model, Topic } from '@renderer/types'
+import { getBriefInfo, runAsyncFunction, uuid } from '@renderer/utils'
 import { t } from 'i18next'
+import localforage from 'localforage'
+import { last, reverse } from 'lodash'
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import styled from 'styled-components'
+
+import MessageItem from './Message'
+import Suggestions from './Suggestions'
 
 interface Props {
   assistant: Assistant
@@ -20,47 +23,47 @@ interface Props {
 const Messages: FC<Props> = ({ assistant, topic }) => {
   const [messages, setMessages] = useState<Message[]>([])
   const [lastMessage, setLastMessage] = useState<Message | null>(null)
-  const { updateTopic } = useAssistant(assistant.id)
   const provider = useProviderByAssistant(assistant)
   const containerRef = useRef<HTMLDivElement>(null)
+  const { updateTopic } = useAssistant(assistant.id)
 
-  const assistantDefaultMessage: Message = {
+  const assistantDefaultMessage: Message = useMemo(
+    () => ({
       id: 'assistant',
       role: 'assistant',
-    content: assistant.description || assistant.prompt || t('assistant.default.description'),
+      content: assistant.description || assistant.prompt || t('chat.default.description'),
       assistantId: assistant.id,
       topicId: topic.id,
       status: 'pending',
       createdAt: new Date().toISOString()
-  }
+    }),
+    [assistant.description, assistant.id, assistant.prompt, topic.id]
+  )
 
   const onSendMessage = useCallback(
     (message: Message) => {
       const _messages = [...messages, message]
       setMessages(_messages)
-      localforage.setItem(`topic:${topic.id}`, {
+      localforage.setItem(`topic:${topic.id}`, { ...topic, messages: _messages })
-        ...topic,
-        messages: _messages
-      })
     },
     [messages, topic]
   )
 
   const autoRenameTopic = useCallback(async () => {
-    if (topic.name === t('assistant.default.topic.name') && messages.length >= 2) {
+    if (topic.name === t('chat.default.topic.name') && messages.length >= 2) {
       const summaryText = await fetchMessagesSummary({ messages, assistant })
       summaryText && updateTopic({ ...topic, name: summaryText })
     }
   }, [assistant, messages, topic, updateTopic])
 
-  const onDeleteMessage = (message: Message) => {
+  const onDeleteMessage = useCallback(
+    (message: Message) => {
       const _messages = messages.filter((m) => m.id !== message.id)
       setMessages(_messages)
-    localforage.setItem(`topic:${topic.id}`, {
+      localforage.setItem(`topic:${topic.id}`, { id: topic.id, messages: _messages })
-      id: topic.id,
+    },
-      messages: _messages
+    [messages, topic.id]
-    })
+  )
-  }
 
   useEffect(() => {
     const unsubscribes = [
@@ -73,8 +76,18 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
         onSendMessage(msg)
         setTimeout(() => EventEmitter.emit(EVENT_NAMES.AI_AUTO_RENAME), 100)
       }),
-      EventEmitter.on(EVENT_NAMES.REGENERATE_MESSAGE, async () => {
+      EventEmitter.on(EVENT_NAMES.REGENERATE_MESSAGE, async (model: Model) => {
-        fetchChatCompletion({ assistant, messages: messages, topic, onResponse: setLastMessage })
+        const lastUserMessage = last(filterMessages(messages).filter((m) => m.role === 'user'))
+        if (lastUserMessage) {
+          const content = `[@${model.name}](#)  ${getBriefInfo(lastUserMessage.content)}`
+          onSendMessage({ ...lastUserMessage, id: uuid(), type: '@', content })
+          fetchChatCompletion({
+            assistant,
+            topic,
+            messages: [...messages, lastUserMessage],
+            onResponse: setLastMessage
+          })
+        }
       }),
       EventEmitter.on(EVENT_NAMES.AI_AUTO_RENAME, autoRenameTopic),
       EventEmitter.on(EVENT_NAMES.CLEAR_MESSAGES, () => {
@@ -84,17 +97,17 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
       })
     ]
     return () => unsubscribes.forEach((unsub) => unsub())
-  }, [assistant, autoRenameTopic, messages, onSendMessage, provider, topic, updateTopic])
+  }, [assistant, messages, provider, topic, autoRenameTopic, updateTopic, onSendMessage])
 
   useEffect(() => {
     runAsyncFunction(async () => {
-      const messages = await LocalStorage.getTopicMessages(topic.id)
+      const messages = (await LocalStorage.getTopicMessages(topic.id)) || []
-      setMessages(messages || [])
+      setMessages(messages)
     })
   }, [topic.id])
 
   useEffect(() => {
-    containerRef.current?.scrollTo({ top: 100000, behavior: 'auto' })
+    setTimeout(() => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'auto' }), 0)
   }, [messages])
 
   useEffect(() => {
@@ -103,6 +116,7 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
 
   return (
     <Container id="messages" key={assistant.id} ref={containerRef}>
+      <Suggestions assistant={assistant} messages={messages} lastMessage={lastMessage} />
       {lastMessage && <MessageItem message={lastMessage} />}
       {reverse([...messages]).map((message, index) => (
         <MessageItem key={message.id} message={message} showMenu index={index} onDeleteMessage={onDeleteMessage} />
@@ -118,11 +132,7 @@ const Container = styled.div`
   overflow-y: auto;
   flex-direction: column-reverse;
   max-height: calc(100vh - var(--input-bar-height) - var(--navbar-height));
-  padding-top: 10px;
+  padding: 10px 0;
-  padding-bottom: 10px;
-  .message:first-child {
-    border: none;
-  }
 `
 
 export default Messages

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

@@ -1,18 +1,15 @@
-import { CodeSandboxOutlined } from '@ant-design/icons'
 import { NavbarCenter } from '@renderer/components/app/Navbar'
 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 { Avatar, Button, Dropdown, MenuProps } from 'antd'
+import { removeLeadingEmoji } from '@renderer/utils'
-import { upperFirst } from 'lodash'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
+
 import { NewButton } from '../HomePage'
-import { getModelLogo } from '@renderer/config/provider'
+import SelectModelButton from './SelectModelButton'
-import { removeLeadingEmoji } from '@renderer/utils'
 
 interface Props {
   activeAssistant: Assistant
@@ -20,66 +17,27 @@ interface Props {
 
 const NavigationCenter: FC<Props> = ({ activeAssistant }) => {
   const { assistant } = useAssistant(activeAssistant.id)
-  const { model, setModel } = useAssistant(activeAssistant.id)
-  const { providers } = useProviders()
   const { t } = useTranslation()
   const { showAssistants, toggleShowAssistants } = useShowAssistants()
 
-  const items: MenuProps['items'] = providers
-    .filter((p) => p.models.length > 0)
-    .map((p) => ({
-      key: p.id,
-      label: p.isSystem ? t(`provider.${p.id}`) : p.name,
-      type: 'group',
-      children: p.models.map((m) => ({
-        key: m.id,
-        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)
-      }))
-    }))
-
   return (
     <NavbarCenter style={{ paddingLeft: isMac ? 16 : 8 }}>
       {!showAssistants && (
-        <NewButton onClick={toggleShowAssistants} style={{ marginRight: 8 }}>
+        <NewButton onClick={toggleShowAssistants} style={{ marginRight: isMac ? 8 : 25 }}>
           <i className="iconfont icon-showsidebarhoriz" />
         </NewButton>
       )}
-      <AssistantName>{removeLeadingEmoji(assistant?.name) || t('assistant.default.name')}</AssistantName>
+      <AssistantName>{removeLeadingEmoji(assistant?.name) || t('chat.default.name')}</AssistantName>
-      <DropdownMenu
+      <SelectModelButton assistant={assistant} />
-        menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' } }}
-        trigger={['click']}
-        overlayClassName="chat-nav-dropdown">
-        <DropdownButton size="small" type="primary" ghost>
-          <CodeSandboxOutlined />
-          <ModelName>{model ? upperFirst(model.name) : t('button.select_model')}</ModelName>
-        </DropdownButton>
-      </DropdownMenu>
     </NavbarCenter>
   )
 }
 
-const DropdownMenu = styled(Dropdown)`
-  -webkit-app-region: none;
-  margin-left: 10px;
-`
-
 const AssistantName = styled.span`
   font-weight: bold;
   margin-left: 5px;
-`
+  margin-right: 10px;
-
+  font-family: Ubuntu;
-const DropdownButton = styled(Button)`
-  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/SelectModelButton.tsx

@@ -0,0 +1,41 @@
+import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import { Assistant } from '@renderer/types'
+import { Button } from 'antd'
+import { upperFirst } from 'lodash'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import SelectModelDropdown from './SelectModelDropdown'
+
+interface Props {
+  assistant: Assistant
+}
+
+const SelectModelButton: FC<Props> = ({ assistant }) => {
+  const { model, setModel } = useAssistant(assistant.id)
+  const { t } = useTranslation()
+
+  return (
+    <SelectModelDropdown model={model} onSelect={setModel}>
+      <DropdownButton size="small" type="default">
+        <ModelAvatar model={model} size={20} />
+        <ModelName>{model ? upperFirst(model.name) : t('button.select_model')}</ModelName>
+      </DropdownButton>
+    </SelectModelDropdown>
+  )
+}
+
+const DropdownButton = styled(Button)`
+  font-size: 11px;
+  border-radius: 15px;
+  padding: 12px 8px 12px 3px;
+`
+
+const ModelName = styled.span`
+  margin-left: -2px;
+  font-weight: bolder;
+`
+
+export default SelectModelButton

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

@@ -0,0 +1,55 @@
+import { getModelLogo } from '@renderer/config/provider'
+import { useProviders } from '@renderer/hooks/useProvider'
+import { Model } from '@renderer/types'
+import { Avatar, Dropdown, DropdownProps, MenuProps } from 'antd'
+import { first, sortBy, upperFirst } from 'lodash'
+import { FC, PropsWithChildren } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+interface Props extends DropdownProps {
+  model: Model
+  onSelect: (model: Model) => void
+}
+
+const SelectModelDropdown: FC<Props & PropsWithChildren> = ({ children, model, onSelect, ...props }) => {
+  const { t } = useTranslation()
+  const { providers } = useProviders()
+
+  const items: MenuProps['items'] = providers
+    .filter((p) => p.models.length > 0)
+    .map((p) => ({
+      key: p.id,
+      label: p.isSystem ? t(`provider.${p.id}`) : p.name,
+      type: 'group',
+      children: sortBy(p.models, 'name').map((m) => ({
+        key: m?.id,
+        label: upperFirst(m?.name),
+        defaultSelectedKeys: [model?.id],
+        icon: (
+          <Avatar src={getModelLogo(m?.id || '')} size={24}>
+            {first(m?.name)}
+          </Avatar>
+        ),
+        onClick: () => m && onSelect(m)
+      }))
+    }))
+
+  return (
+    <DropdownMenu
+      menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' }, selectedKeys: [model?.id] }}
+      trigger={['click']}
+      arrow
+      placement="bottom"
+      overlayClassName="chat-nav-dropdown"
+      {...props}>
+      {children}
+    </DropdownMenu>
+  )
+}
+
+const DropdownMenu = styled(Dropdown)`
+  -webkit-app-region: none;
+`
+
+export default SelectModelDropdown

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

@@ -1,39 +0,0 @@
-import { useSettings } from '@renderer/hooks/useSettings'
-import { Dropdown, MenuProps } from 'antd'
-import { FC, PropsWithChildren } from 'react'
-import { ArrowUpOutlined, EnterOutlined } from '@ant-design/icons'
-import { useTranslation } from 'react-i18next'
-
-interface Props extends PropsWithChildren {}
-
-const SendMessageSetting: FC<Props> = ({ children }) => {
-  const { sendMessageShortcut, setSendMessageShortcut } = useSettings()
-  const { t } = useTranslation()
-
-  const sendSettingItems: MenuProps['items'] = [
-    {
-      label: `Enter ${t('assistant.input.send')}`,
-      key: 'Enter',
-      icon: <EnterOutlined />,
-      onClick: () => setSendMessageShortcut('Enter')
-    },
-    {
-      label: `Shift+Enter ${t('assistant.input.send')}`,
-      key: 'Shift+Enter',
-      icon: <ArrowUpOutlined />,
-      onClick: () => setSendMessageShortcut('Shift+Enter')
-    }
-  ]
-
-  return (
-    <Dropdown
-      menu={{ items: sendSettingItems, selectable: true, defaultSelectedKeys: [sendMessageShortcut] }}
-      placement="topRight"
-      trigger={['click']}
-      arrow>
-      {children}
-    </Dropdown>
-  )
-}
-
-export default SendMessageSetting

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

@@ -0,0 +1,119 @@
+import { fetchSuggestions } from '@renderer/services/api'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { Assistant, Message, Suggestion } from '@renderer/types'
+import { uuid } from '@renderer/utils'
+import dayjs from 'dayjs'
+import { FC, useEffect, useState } from 'react'
+import BeatLoader from 'react-spinners/BeatLoader'
+import styled from 'styled-components'
+
+interface Props {
+  assistant: Assistant
+  messages: Message[]
+  lastMessage: Message | null
+}
+
+const suggestionsMap = new Map<string, Suggestion[]>()
+
+const Suggestions: FC<Props> = ({ assistant, messages, lastMessage }) => {
+  const [suggestions, setSuggestions] = useState<Suggestion[]>(
+    suggestionsMap.get(messages[messages.length - 1]?.id) || []
+  )
+  const [loadingSuggestions, setLoadingSuggestions] = useState(false)
+
+  const onClick = (s: Suggestion) => {
+    const message: Message = {
+      id: uuid(),
+      role: 'user',
+      content: s.content,
+      assistantId: assistant.id,
+      topicId: assistant.topics[0].id || uuid(),
+      createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      status: 'success'
+    }
+
+    EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE, message)
+  }
+
+  useEffect(() => {
+    const unsubscribes = [
+      EventEmitter.on(EVENT_NAMES.AI_CHAT_COMPLETION, async (msg: Message) => {
+        setLoadingSuggestions(true)
+        const _suggestions = await fetchSuggestions({ assistant, messages: [...messages, msg] })
+        if (_suggestions.length) {
+          setSuggestions(_suggestions)
+          suggestionsMap.set(msg.id, _suggestions)
+        }
+        setLoadingSuggestions(false)
+      })
+    ]
+    return () => unsubscribes.forEach((unsub) => unsub())
+  }, [assistant, messages])
+
+  useEffect(() => {
+    setSuggestions(suggestionsMap.get(messages[messages.length - 1]?.id) || [])
+  }, [messages])
+
+  if (lastMessage) {
+    return null
+  }
+
+  if (loadingSuggestions) {
+    return (
+      <Container>
+        <BeatLoader color="var(--color-text-2)" size="10" />
+      </Container>
+    )
+  }
+
+  if (suggestions.length === 0) {
+    return <Container style={{ paddingBottom: 10 }} />
+  }
+
+  return (
+    <Container>
+      <SuggestionsContainer>
+        {suggestions.map((s, i) => (
+          <SuggestionItem key={i} onClick={() => onClick(s)}>
+            {s.content} →
+          </SuggestionItem>
+        ))}
+      </SuggestionsContainer>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 10px 10px 20px 65px;
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 15px;
+`
+
+const SuggestionsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+`
+
+const SuggestionItem = styled.div`
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  padding: 5px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  color: var(--color-text);
+  background: var(--color-background-mute);
+  cursor: pointer;
+  &:hover {
+    opacity: 0.9;
+  }
+`
+
+export default Suggestions

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

@@ -1,146 +0,0 @@
-import PromptPopup from '@renderer/components/Popups/PromptPopup'
-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 { Dropdown, MenuProps } from 'antd'
-import { FC } from 'react'
-import styled from 'styled-components'
-import { DeleteOutlined, EditOutlined, SignatureOutlined } from '@ant-design/icons'
-import LocalStorage from '@renderer/services/storage'
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
-import { droppableReorder } from '@renderer/utils'
-import { useTranslation } from 'react-i18next'
-import { useAppSelector } from '@renderer/store'
-
-interface Props {
-  assistant: Assistant
-  activeTopic: Topic
-  setActiveTopic: (topic: Topic) => void
-}
-
-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)
-
-  const getTopicMenuItems = (topic: Topic) => {
-    const menus: MenuProps['items'] = [
-      {
-        label: t('assistant.topics.auto_rename'),
-        key: 'auto-rename',
-        icon: <SignatureOutlined />,
-        async onClick() {
-          const messages = await LocalStorage.getTopicMessages(topic.id)
-          if (messages.length >= 2) {
-            const summaryText = await fetchMessagesSummary({ messages, assistant })
-            if (summaryText) {
-              updateTopic({ ...topic, name: summaryText })
-            }
-          }
-        }
-      },
-      {
-        label: t('common.rename'),
-        key: 'rename',
-        icon: <EditOutlined />,
-        async onClick() {
-          const name = await PromptPopup.show({
-            title: t('assistant.topics.edit.title'),
-            message: t('assistant.topics.edit.placeholder'),
-            defaultValue: topic?.name || ''
-          })
-          if (name && topic?.name !== name) {
-            updateTopic({ ...topic, name })
-          }
-        }
-      }
-    ]
-
-    if (assistant.topics.length > 1) {
-      menus.push({ type: 'divider' })
-      menus.push({
-        label: t('common.delete'),
-        danger: true,
-        key: 'delete',
-        icon: <DeleteOutlined />,
-        onClick() {
-          if (assistant.topics.length === 1) return
-          removeTopic(topic)
-          setActiveTopic(assistant.topics[0])
-        }
-      })
-    }
-
-    return menus
-  }
-
-  const onDragEnd = (result: DropResult) => {
-    if (result.destination) {
-      const sourceIndex = result.source.index
-      const destIndex = result.destination.index
-      updateTopics(droppableReorder(assistant.topics, sourceIndex, destIndex))
-    }
-  }
-
-  const onSwitchTopic = (topic: Topic) => {
-    if (generating) {
-      window.message.warning({ content: t('message.switch.disabled'), key: 'switch-assistant' })
-      return
-    }
-    setActiveTopic(topic)
-  }
-
-  return (
-    <Container style={{ display: rightSidebarShown ? 'block' : 'none' }}>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="droppable">
-          {(provided) => (
-            <div {...provided.droppableProps} ref={provided.innerRef}>
-              {assistant.topics.map((topic, index) => (
-                <Draggable key={`draggable_${topic.id}_${index}`} draggableId={topic.id} index={index}>
-                  {(provided) => (
-                    <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                      <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
-                        <TopicListItem
-                          className={topic.id === activeTopic?.id ? 'active' : ''}
-                          onClick={() => onSwitchTopic(topic)}>
-                          {topic.name}
-                        </TopicListItem>
-                      </Dropdown>
-                    </div>
-                  )}
-                </Draggable>
-              ))}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-    </Container>
-  )
-}
-
-const Container = styled.div`
-  padding: 15px 10px;
-`
-
-const TopicListItem = styled.div`
-  padding: 8px 10px;
-  margin-bottom: 5px;
-  cursor: pointer;
-  border-radius: 5px;
-  font-size: 14px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  &:hover {
-    background-color: var(--color-background-soft);
-  }
-  &.active {
-    background-color: var(--color-background-mute);
-    font-weight: bolder;
-  }
-`
-
-export default TopicsTab

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

@@ -4,35 +4,40 @@ import {
   FullscreenExitOutlined,
   FullscreenOutlined,
   HistoryOutlined,
-  MoreOutlined,
   PauseCircleOutlined,
-  PlusCircleOutlined
+  PlusCircleOutlined,
+  QuestionCircleOutlined
 } from '@ant-design/icons'
+import { DEFAULT_CONEXTCOUNT } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { getDefaultTopic } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { estimateInputTokenCount } from '@renderer/services/messages'
 import store, { useAppSelector } from '@renderer/store'
 import { setGenerating } from '@renderer/store/runtime'
 import { Assistant, Message, Topic } from '@renderer/types'
-import { estimateInputTokenCount, uuid } from '@renderer/utils'
+import { uuid } from '@renderer/utils'
-import { Button, Popconfirm, Tooltip } from 'antd'
+import { Button, Divider, Popconfirm, Tag, Tooltip } from 'antd'
 import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
 import dayjs from 'dayjs'
 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 SendMessageSetting from './SendMessageSetting'
+
-import { DEFAULT_CONEXTCOUNT } from '@renderer/config/constant'
+import SendMessageButton from './SendMessageButton'
 
 interface Props {
   assistant: Assistant
   setActiveTopic: (topic: Topic) => void
 }
 
+let _text = ''
+
 const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
-  const [text, setText] = useState('')
+  const [text, setText] = useState(_text)
+  const [inputFocus, setInputFocus] = useState(false)
   const { addTopic } = useAssistant(assistant.id)
   const { sendMessageShortcut, showInputEstimatedTokens } = useSettings()
   const [expended, setExpend] = useState(false)
@@ -41,7 +46,9 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   const inputRef = useRef<TextAreaRef>(null)
   const { t } = useTranslation()
 
-  const sendMessage = () => {
+  _text = text
+
+  const sendMessage = useCallback(() => {
     if (generating) {
       return
     }
@@ -63,11 +70,19 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
     EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE, message)
 
     setText('')
-  }
+
+    setExpend(false)
+  }, [assistant.id, assistant.topics, generating, text])
 
   const inputTokenCount = useMemo(() => estimateInputTokenCount(text), [text])
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (expended) {
+      if (event.key === 'Escape') {
+        return setExpend(false)
+      }
+    }
+
     if (sendMessageShortcut === 'Enter' && event.key === 'Enter') {
       if (event.shiftKey) {
         return
@@ -127,76 +142,89 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   }, [assistant])
 
   return (
-    <Container id="inputbar" style={{ minHeight: expended ? '35%' : 'var(--input-bar-height)' }}>
+    <Container
+      id="inputbar"
+      style={{ minHeight: expended ? '60%' : 'var(--input-bar-height)' }}
+      className={inputFocus ? 'focus' : ''}>
       <Toolbar>
         <ToolbarMenu>
-          <Tooltip placement="top" title={t('assistant.input.new_chat')} arrow>
+          <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
             <ToolbarButton type="text" onClick={addNewTopic}>
               <PlusCircleOutlined />
             </ToolbarButton>
           </Tooltip>
-          <Tooltip placement="top" title={t('assistant.input.clear')} arrow>
+          <Tooltip placement="top" title={t('chat.input.topics')} arrow>
+            <ToolbarButton type="text" onClick={() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)}>
+              <HistoryOutlined />
+            </ToolbarButton>
+          </Tooltip>
+          <Tooltip placement="top" title={t('chat.input.settings')} arrow>
+            <ToolbarButton type="text" onClick={() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS)}>
+              <ControlOutlined />
+            </ToolbarButton>
+          </Tooltip>
+          <Tooltip placement="top" title={t('chat.input.clear')} arrow>
             <Popconfirm
-              icon={false}
+              title={t('chat.input.clear.content')}
-              title={t('assistant.input.clear.title')}
-              description={t('assistant.input.clear.content')}
               placement="top"
               onConfirm={clearTopic}
-              okText={t('assistant.input.clear')}>
+              okButtonProps={{ danger: true }}
+              icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+              okText={t('chat.input.clear')}>
               <ToolbarButton type="text">
                 <ClearOutlined />
               </ToolbarButton>
             </Popconfirm>
           </Tooltip>
-          <Tooltip placement="top" title={t('assistant.input.topics')} arrow>
+          <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} 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>
-          </Tooltip>
-          <Tooltip placement="top" title={expended ? t('assistant.input.collapse') : t('assistant.input.expand')} arrow>
             <ToolbarButton type="text" onClick={() => setExpend(!expended)}>
               {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
             </ToolbarButton>
           </Tooltip>
+          {showInputEstimatedTokens && (
+            <TextCount>
+              <Tooltip title={t('chat.input.context_count.tip') + ' | ' + t('chat.input.estimated_tokens.tip')}>
+                <Tag
+                  style={{
+                    cursor: 'pointer',
+                    borderRadius: '20px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '2px 8px'
+                  }}>
+                  <i className="iconfont icon-history" style={{ marginRight: '3px' }} />
+                  {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT}
+                  <Divider type="vertical" style={{ marginTop: 2, marginLeft: 5, marginRight: 5 }} />↑
+                  {`${inputTokenCount} / ${estimateTokenCount}`}
+                </Tag>
+              </Tooltip>
+            </TextCount>
+          )}
         </ToolbarMenu>
         <ToolbarMenu>
           {generating && (
-            <Tooltip placement="top" title={t('assistant.input.pause')} arrow>
+            <Tooltip placement="top" title={t('chat.input.pause')} arrow>
               <ToolbarButton type="text" onClick={onPause}>
                 <PauseCircleOutlined style={{ color: 'var(--color-error)' }} />
               </ToolbarButton>
             </Tooltip>
           )}
-          <SendMessageSetting>
+          <SendMessageButton sendMessage={sendMessage} disabled={generating || !text} />
-            <ToolbarButton type="text" style={{ marginRight: 0 }}>
-              <MoreOutlined />
-            </ToolbarButton>
-          </SendMessageSetting>
         </ToolbarMenu>
       </Toolbar>
       <Textarea
         value={text}
         onChange={(e) => setText(e.target.value)}
         onKeyDown={handleKeyDown}
-        placeholder={t('assistant.input.placeholder')}
+        placeholder={t('chat.input.placeholder')}
         autoFocus
         contextMenu="true"
         variant="borderless"
-        showCount
         ref={inputRef}
         styles={{ textarea: { paddingLeft: 0 } }}
+        onFocus={() => setInputFocus(true)}
+        onBlur={() => setInputFocus(false)}
       />
-      {showInputEstimatedTokens && (
-        <TextCount>
-          <HistoryOutlined /> {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT} | T↑
-          {`${inputTokenCount}/${estimateTokenCount}`}
-        </TextCount>
-      )}
     </Container>
   )
 }
@@ -204,12 +232,14 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
   height: var(--input-bar-height);
-  border-top: 0.5px solid var(--color-border);
+  border: 1px solid var(--color-border);
-  padding: 5px 15px;
   transition: all 0.3s ease;
   position: relative;
+  margin: 0 20px 15px 20px;
+  border-radius: 10px;
+  &.focus {
+  }
 `
 
 const Textarea = styled(TextArea)`
@@ -217,20 +247,24 @@ const Textarea = styled(TextArea)`
   border-radius: 0;
   display: flex;
   flex: 1;
+  margin: 0 15px 5px 15px;
+  font-family: Ubuntu;
+  resize: vertical;
+  overflow: auto;
 `
 
 const Toolbar = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin: 0 -5px;
+  padding: 0 10px;
-  margin-bottom: 5px;
 `
 
 const ToolbarMenu = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 6px;
 `
 
 const ToolbarButton = styled(Button)`
@@ -239,7 +273,6 @@ const ToolbarButton = styled(Button)`
   font-size: 18px;
   border-radius: 50%;
   transition: all 0.3s ease;
-  margin-right: 6px;
   color: var(--color-icon);
   &.anticon {
     transition: all 0.3s ease;
@@ -254,16 +287,13 @@ const ToolbarButton = styled(Button)`
 `
 
 const TextCount = styled.div`
-  position: absolute;
-  right: 0;
-  bottom: 0;
   font-size: 11px;
   color: var(--color-text-3);
   z-index: 10;
-  background-color: var(--color-background-soft);
+  padding: 2px;
-  padding: 2px 8px;
   border-top-left-radius: 7px;
   user-select: none;
+  margin-right: 10px;
 `
 
 export default Inputbar

src/renderer/src/pages/home/components/input/SendMessageButton.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react'
+
+interface Props {
+  disabled: boolean
+  sendMessage: () => void
+}
+
+const SendMessageButton: FC<Props> = ({ disabled, sendMessage }) => {
+  return (
+    <i
+      className="iconfont icon-ic_send"
+      onClick={sendMessage}
+      style={{
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        color: disabled ? 'var(--color-text-3)' : 'var(--color-primary)',
+        fontSize: 22,
+        transition: 'all 0.2s'
+      }}
+    />
+  )
+}
+
+export default SendMessageButton

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

@@ -7,6 +7,7 @@ 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 {

src/renderer/src/pages/home/components/markdown/Link.tsx

@@ -0,0 +1,12 @@
+import { omit } from 'lodash'
+import React from 'react'
+
+const Link: React.FC = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  if (props.href?.startsWith('#')) {
+    return <span className="link">{props.children}</span>
+  }
+
+  return <a {...omit(props, 'node')} target="_blank" rel="noreferrer" onClick={(e) => e.stopPropagation()} />
+}
+
+export default Link

src/renderer/src/pages/home/components/markdown/Markdown.tsx

@@ -0,0 +1,48 @@
+import 'katex/dist/katex.min.css'
+
+import { Message } from '@renderer/types'
+import { convertMathFormula } from '@renderer/utils'
+import { isEmpty } from 'lodash'
+import { FC, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import rehypeKatex from 'rehype-katex'
+import remarkGfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+
+import CodeBlock from './CodeBlock'
+import Link from './Link'
+
+interface Props {
+  message: Message
+}
+
+const Markdown: FC<Props> = ({ message }) => {
+  const { t } = useTranslation()
+
+  const messageContent = useMemo(() => {
+    const empty = isEmpty(message.content)
+    const paused = message.status === 'paused'
+    const content = empty && paused ? t('message.chat.completion.paused') : message.content
+    return convertMathFormula(content)
+  }, [message.content, message.status, t])
+
+  return useMemo(() => {
+    return (
+      <ReactMarkdown
+        className="markdown"
+        rehypePlugins={[rehypeKatex]}
+        remarkPlugins={[[remarkMath, { singleDollarTextMath: false }], remarkGfm]}
+        remarkRehypeOptions={{
+          footnoteLabel: t('common.footnotes'),
+          footnoteLabelTagName: 'h4',
+          footnoteBackContent: ' '
+        }}
+        components={{ code: CodeBlock as any, a: Link as any }}>
+        {messageContent}
+      </ReactMarkdown>
+    )
+  }, [messageContent, t])
+}
+
+export default Markdown

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

@@ -1,11 +1,14 @@
-import { Assistant, Topic } from '@renderer/types'
+import { BarsOutlined, SettingOutlined } from '@ant-design/icons'
-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'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { Assistant, Topic } from '@renderer/types'
+import { Segmented } from 'antd'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import SettingsTab from './SettingsTab'
+import TopicsTab from './TopicsTab'
 
 interface Props {
   assistant: Assistant
@@ -47,55 +50,47 @@ const RightSidebar: FC<Props> = (props) => {
     return () => unsubscribes.forEach((unsub) => unsub())
   }, [hideRightSidebar, isSettingsTab, isTopicTab, rightSidebarShown, showRightSidebar])
 
+  if (!rightSidebarShown) {
+    return null
+  }
+
   return (
-    <Container style={{ display: rightSidebarShown ? 'block' : 'none' }}>
+    <Container>
-      <Tabs>
+      <Segmented
-        <Tab className={tab === 'topic' ? 'active' : ''} onClick={() => setTab('topic')}>
+        value={tab}
-          {t('common.topics')}
+        style={{ borderRadius: 0, padding: '10px', gap: 5, borderBottom: '0.5px solid var(--color-border)' }}
-        </Tab>
+        options={[
-        <Tab className={tab === 'settings' ? 'active' : ''} onClick={() => setTab('settings')}>
+          { label: t('common.topics'), value: 'topic', icon: <BarsOutlined /> },
-          {t('settings.title')}
+          { label: t('settings.title'), value: 'settings', icon: <SettingOutlined /> }
-        </Tab>
+        ]}
-      </Tabs>
+        block
+        onChange={(value) => setTab(value as 'topic' | 'settings')}
+      />
+      <TabContent>
         {tab === 'topic' && <TopicsTab {...props} />}
         {tab === 'settings' && <SettingsTab assistant={props.assistant} />}
+      </TabContent>
     </Container>
   )
 }
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
   width: var(--topic-list-width);
-  height: 100%;
+  height: calc(100vh - var(--navbar-height));
   border-left: 0.5px solid var(--color-border);
-  overflow-y: auto;
   .collapsed {
     width: 0;
     border-left: none;
   }
 `
 
-const Tabs = styled.div`
+const TabContent = 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;
+  flex-direction: column;
-  align-items: center;
+  overflow-y: auto;
-  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/sidebar/SettingsTab.tsx

@@ -1,16 +1,17 @@
-import { Assistant } from '@renderer/types'
+import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons'
-import styled from 'styled-components'
+import { HStack } from '@renderer/components/Layout'
-import { DEFAULT_CONEXTCOUNT, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
+import { DEFAULT_CONEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { Button, Col, InputNumber, Row, Slider, Switch, Tooltip } from 'antd'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { SettingDivider, SettingRow, SettingRowTitle, SettingSubtitle } from '@renderer/pages/settings/components'
+import { useAppDispatch } from '@renderer/store'
+import { setMessageFont, setShowInputEstimatedTokens, setShowMessageDivider } from '@renderer/store/settings'
+import { Assistant, AssistantSettings } from '@renderer/types'
+import { Col, Row, Select, Slider, Switch, Tooltip } from 'antd'
 import { debounce } from 'lodash'
 import { FC, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { QuestionCircleOutlined } from '@ant-design/icons'
+import styled from 'styled-components'
-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
@@ -20,41 +21,49 @@ 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 [enableMaxTokens, setEnableMaxTokens] = useState(assistant?.settings?.enableMaxTokens ?? false)
+  const [maxTokens, setMaxTokens] = useState(assistant?.settings?.maxTokens ?? 0)
   const { t } = useTranslation()
 
   const dispatch = useAppDispatch()
 
-  const { showMessageDivider, messageFont, showInputEstimatedTokens } = useSettings()
+  const { showMessageDivider, messageFont, showInputEstimatedTokens, sendMessageShortcut, setSendMessageShortcut } =
+    useSettings()
 
   const onUpdateAssistantSettings = useCallback(
     debounce(
-      ({ _temperature, _contextCount }: { _temperature?: number; _contextCount?: number }) => {
+      (settings: Partial<AssistantSettings>) => {
         updateAssistantSettings({
-          ...assistant.settings,
+          temperature: settings.temperature ?? temperature,
-          temperature: _temperature ?? temperature,
+          contextCount: settings.contextCount ?? contextCount,
-          contextCount: _contextCount ?? contextCount
+          enableMaxTokens: settings.enableMaxTokens ?? enableMaxTokens,
+          maxTokens: settings.maxTokens ?? maxTokens
         })
       },
       1000,
-      {
+      { leading: true, trailing: false }
-        leading: false,
-        trailing: true
-      }
     ),
-    []
+    [temperature, contextCount, enableMaxTokens, maxTokens]
   )
 
   const onTemperatureChange = (value) => {
     if (!isNaN(value as number)) {
       setTemperature(value)
-      onUpdateAssistantSettings({ _temperature: value })
+      onUpdateAssistantSettings({ temperature: value })
     }
   }
 
   const onConextCountChange = (value) => {
     if (!isNaN(value as number)) {
       setConextCount(value)
-      onUpdateAssistantSettings({ _contextCount: value })
+      onUpdateAssistantSettings({ contextCount: value })
+    }
+  }
+
+  const onMaxTokensChange = (value) => {
+    if (!isNaN(value as number)) {
+      setMaxTokens(value)
+      onUpdateAssistantSettings({ maxTokens: value })
     }
   }
 
@@ -66,7 +75,9 @@ const SettingsTab: FC<Props> = (props) => {
       settings: {
         ...assistant.settings,
         temperature: DEFAULT_TEMPERATURE,
-        contextCount: DEFAULT_CONEXTCOUNT
+        contextCount: DEFAULT_CONEXTCOUNT,
+        enableMaxTokens: false,
+        maxTokens: DEFAULT_MAX_TOKENS
       }
     })
   }
@@ -74,73 +85,82 @@ const SettingsTab: FC<Props> = (props) => {
   useEffect(() => {
     setTemperature(assistant?.settings?.temperature ?? DEFAULT_TEMPERATURE)
     setConextCount(assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT)
+    setEnableMaxTokens(assistant?.settings?.enableMaxTokens ?? false)
+    setMaxTokens(assistant?.settings?.maxTokens ?? DEFAULT_MAX_TOKENS)
   }, [assistant])
 
   return (
     <Container>
-      <SettingSubtitle style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+      <SettingSubtitle>
         {t('settings.messages.model.title')}{' '}
-        <Button size="small" onClick={onReset}>
+        <Tooltip title={t('chat.settings.reset')}>
-          {t('assistant.settings.reset')}
+          <ReloadOutlined onClick={onReset} style={{ cursor: 'pointer', fontSize: 12, padding: '0 3px' }} />
-        </Button>
+        </Tooltip>
       </SettingSubtitle>
       <SettingDivider />
       <Row align="middle">
-        <Label>{t('assistant.settings.conext_count')}</Label>
+        <Label>{t('chat.settings.temperature')}</Label>
-        <Tooltip title={t('assistant.settings.temperature.tip')}>
+        <Tooltip title={t('chat.settings.temperature.tip')}>
           <QuestionIcon />
         </Tooltip>
       </Row>
       <Row align="middle" gutter={10}>
-        <Col span={18}>
+        <Col span={24}>
           <Slider
             min={0}
             max={1.2}
             onChange={onTemperatureChange}
             value={typeof temperature === 'number' ? temperature : 0}
-            marks={{ 0: '0', 0.7: '0.7', 1.2: '1.2' }}
             step={0.1}
           />
         </Col>
-        <Col span={6}>
-          <InputNumberic
-            min={0}
-            max={1.2}
-            step={0.1}
-            value={temperature}
-            onChange={onTemperatureChange}
-            controls={false}
-          />
-        </Col>
       </Row>
       <Row align="middle">
-        <Label>{t('assistant.settings.conext_count')}</Label>
+        <Label>{t('chat.settings.conext_count')}</Label>
-        <Tooltip title={t('assistant.settings.conext_count.tip')}>
+        <Tooltip title={t('chat.settings.conext_count.tip')}>
           <QuestionIcon />
         </Tooltip>
       </Row>
       <Row align="middle" gutter={10}>
-        <Col span={18}>
+        <Col span={24}>
           <Slider
             min={0}
             max={20}
-            marks={{ 0: '0', 10: '10', 20: t('assistant.settings.max') }}
             onChange={onConextCountChange}
             value={typeof contextCount === 'number' ? contextCount : 0}
             step={1}
           />
         </Col>
-        <Col span={6}>
+      </Row>
-          <InputNumberic
+      <Row align="middle" justify="space-between" style={{ marginBottom: 8 }}>
+        <HStack alignItems="center">
+          <Label>{t('chat.settings.max_tokens')}</Label>
+          <Tooltip title={t('chat.settings.max_tokens.tip')}>
+            <QuestionIcon />
+          </Tooltip>
+        </HStack>
+        <Switch
+          size="small"
+          checked={enableMaxTokens}
+          onChange={(enabled) => {
+            setEnableMaxTokens(enabled)
+            onUpdateAssistantSettings({ enableMaxTokens: enabled })
+          }}
+        />
+      </Row>
+      {enableMaxTokens && (
+        <Row align="middle" gutter={10}>
+          <Col span={24}>
+            <Slider
               min={0}
-            max={20}
+              max={32000}
-            step={1}
+              onChange={onMaxTokensChange}
-            value={contextCount}
+              value={typeof maxTokens === 'number' ? maxTokens : 0}
-            onChange={onConextCountChange}
+              step={100}
-            controls={false}
             />
           </Col>
         </Row>
+      )}
       <SettingSubtitle>{t('settings.messages.title')}</SettingSubtitle>
       <SettingDivider />
       <SettingRow>
@@ -172,28 +192,34 @@ const SettingsTab: FC<Props> = (props) => {
         />
       </SettingRow>
       <SettingDivider />
+      <SettingRow>
+        <SettingRowTitleSmall>{t('settings.messages.input.send_shortcuts')}</SettingRowTitleSmall>
+      </SettingRow>
+      <Select
+        value={sendMessageShortcut}
+        menuItemSelectedIcon={<CheckOutlined />}
+        options={[
+          { value: 'Enter', label: `Enter ${t('chat.input.send')}` },
+          { value: 'Shift+Enter', label: `Shift + Enter ${t('chat.input.send')}` }
+        ]}
+        onChange={(value) => setSendMessageShortcut(value)}
+        style={{ width: '100%', marginTop: 10 }}
+      />
     </Container>
   )
 }
 
 const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
   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: 12px;
-  font-weight: bold;
+  font-weight: 600;
   margin-right: 8px;
 `
 

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

@@ -0,0 +1,160 @@
+import { DeleteOutlined, EditOutlined, OpenAIOutlined } from '@ant-design/icons'
+import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import PromptPopup from '@renderer/components/Popups/PromptPopup'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import { fetchMessagesSummary } from '@renderer/services/api'
+import LocalStorage from '@renderer/services/storage'
+import { useAppSelector } from '@renderer/store'
+import { Assistant, Topic } from '@renderer/types'
+import { droppableReorder } from '@renderer/utils'
+import { Dropdown, MenuProps } from 'antd'
+import { FC, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+interface Props {
+  assistant: Assistant
+  activeTopic: Topic
+  setActiveTopic: (topic: Topic) => void
+}
+
+const TopicsTab: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic }) => {
+  const { assistant, removeTopic, updateTopic, updateTopics } = useAssistant(_assistant.id)
+  const { t } = useTranslation()
+  const generating = useAppSelector((state) => state.runtime.generating)
+
+  const getTopicMenuItems = useCallback(
+    (topic: Topic) => {
+      const menus: MenuProps['items'] = [
+        {
+          label: t('chat.topics.auto_rename'),
+          key: 'auto-rename',
+          icon: <OpenAIOutlined />,
+          async onClick() {
+            const messages = await LocalStorage.getTopicMessages(topic.id)
+            if (messages.length >= 2) {
+              const summaryText = await fetchMessagesSummary({ messages, assistant })
+              if (summaryText) {
+                updateTopic({ ...topic, name: summaryText })
+              }
+            }
+          }
+        },
+        {
+          label: t('chat.topics.edit.title'),
+          key: 'rename',
+          icon: <EditOutlined />,
+          async onClick() {
+            const name = await PromptPopup.show({
+              title: t('chat.topics.edit.title'),
+              message: '',
+              defaultValue: topic?.name || ''
+            })
+            if (name && topic?.name !== name) {
+              updateTopic({ ...topic, name })
+            }
+          }
+        }
+      ]
+
+      if (assistant.topics.length > 1) {
+        menus.push({ type: 'divider' })
+        menus.push({
+          label: t('common.delete'),
+          danger: true,
+          key: 'delete',
+          icon: <DeleteOutlined />,
+          onClick() {
+            if (assistant.topics.length === 1) return
+            removeTopic(topic)
+            setActiveTopic(assistant.topics[0])
+          }
+        })
+      }
+
+      return menus
+    },
+    [assistant, removeTopic, setActiveTopic, t, updateTopic]
+  )
+
+  const onDragEnd = useCallback(
+    (result: DropResult) => {
+      if (result.destination) {
+        const sourceIndex = result.source.index
+        const destIndex = result.destination.index
+        updateTopics(droppableReorder(assistant.topics, sourceIndex, destIndex))
+      }
+    },
+    [assistant.topics, updateTopics]
+  )
+
+  const onSwitchTopic = useCallback(
+    (topic: Topic) => {
+      if (generating) {
+        window.message.warning({ content: t('message.switch.disabled'), key: 'switch-assistant' })
+        return
+      }
+      setActiveTopic(topic)
+    },
+    [generating, setActiveTopic, t]
+  )
+
+  return (
+    <Container>
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="droppable">
+          {(provided) => (
+            <div {...provided.droppableProps} ref={provided.innerRef}>
+              {assistant.topics.map((topic, index) => (
+                <Draggable key={`draggable_${topic.id}_${index}`} draggableId={topic.id} index={index}>
+                  {(provided) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
+                      <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
+                        <TopicListItem
+                          className={topic.id === activeTopic?.id ? 'active' : ''}
+                          onClick={() => onSwitchTopic(topic)}>
+                          {topic.name}
+                        </TopicListItem>
+                      </Dropdown>
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 10px 10px;
+`
+
+const TopicListItem = styled.div`
+  padding: 7px 10px;
+  cursor: pointer;
+  border-radius: 8px;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: Ubuntu;
+  transition: all 0.3s;
+  &:hover {
+    background-color: var(--color-background-soft);
+  }
+  &.active {
+    background-color: var(--color-background-mute);
+  }
+`
+
+export default TopicsTab

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

@@ -1,11 +1,15 @@
-import { Avatar, Button, Progress, Row, Tag } from 'antd'
+import { GithubOutlined } from '@ant-design/icons'
-import { FC, useEffect, useState } from 'react'
-import styled from 'styled-components'
 import Logo from '@renderer/assets/images/logo.png'
+import { HStack } from '@renderer/components/Layout'
 import { runAsyncFunction } from '@renderer/utils'
-import { useTranslation } from 'react-i18next'
+import { Avatar, Button, Progress, Row, Tag } from 'antd'
-import { debounce } from 'lodash'
 import { ProgressInfo } from 'electron-updater'
+import { debounce } from 'lodash'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
+
 import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from './components'
 
 const AboutSettings: FC = () => {
@@ -19,7 +23,13 @@ const AboutSettings: FC = () => {
     async () => {
       if (checkUpdateLoading || downloading) return
       setCheckUpdateLoading(true)
+
+      try {
         await window.api.checkForUpdate()
+      } catch (error) {
+        setCheckUpdateLoading(false)
+      }
+
       setCheckUpdateLoading(false)
     },
     2000,
@@ -39,6 +49,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()
@@ -79,7 +93,14 @@ const AboutSettings: FC = () => {
 
   return (
     <SettingContainer>
-      <SettingTitle>{t('settings.about.title')}</SettingTitle>
+      <SettingTitle>
+        {t('settings.about.title')}
+        <HStack alignItems="center">
+          <Link to="https://github.com/kangfenmao/cherry-studio">
+            <GithubOutlined style={{ marginRight: 4, color: 'var(--color-text)', fontSize: 20 }} />
+          </Link>
+        </HStack>
+      </SettingTitle>
       <SettingDivider />
       <AboutHeader>
         <Row align="middle">
@@ -121,9 +142,7 @@ const AboutSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.about.website.title')}</SettingRowTitle>
-        <Button onClick={() => onOpenWebsite('https://easys.run/cherry-studio')}>
+        <Button onClick={() => onOpenWebsite('https://cherry-ai.com')}>{t('settings.about.website.button')}</Button>
-          {t('settings.about.website.button')}
-        </Button>
       </SettingRow>
       <SettingDivider />
       <SettingRow>
@@ -133,6 +152,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/AssistantSettings.tsx

@@ -1,62 +1,80 @@
 import { QuestionCircleOutlined } from '@ant-design/icons'
-import { DEFAULT_CONEXTCOUNT, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
+import { HStack } from '@renderer/components/Layout'
+import { DEFAULT_CONEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { useDefaultAssistant } from '@renderer/hooks/useAssistant'
-import { Button, Col, Input, InputNumber, Row, Slider, Tooltip } from 'antd'
+import { AssistantSettings as AssistantSettingsType } from '@renderer/types'
+import { Button, Col, Input, InputNumber, Row, Slider, Switch, Tooltip } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
+import { debounce } from 'lodash'
 import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
+
 import { SettingContainer, SettingDivider, SettingSubtitle, SettingTitle } from './components'
-import { debounce } from 'lodash'
 
 const AssistantSettings: FC = () => {
   const { defaultAssistant, updateDefaultAssistant } = useDefaultAssistant()
   const [temperature, setTemperature] = useState(defaultAssistant.settings?.temperature ?? DEFAULT_TEMPERATURE)
   const [contextCount, setConextCount] = useState(defaultAssistant.settings?.contextCount ?? DEFAULT_CONEXTCOUNT)
+  const [enableMaxTokens, setEnableMaxTokens] = useState(defaultAssistant?.settings?.enableMaxTokens ?? false)
+  const [maxTokens, setMaxTokens] = useState(defaultAssistant?.settings?.maxTokens ?? 0)
 
   const { t } = useTranslation()
 
   const onUpdateAssistantSettings = useCallback(
     debounce(
-      ({ _temperature, _contextCount }: { _temperature?: number; _contextCount?: number }) => {
+      (settings: Partial<AssistantSettingsType>) => {
         updateDefaultAssistant({
           ...defaultAssistant,
           settings: {
             ...defaultAssistant.settings,
-            temperature: _temperature ?? temperature,
+            temperature: settings.temperature ?? temperature,
-            contextCount: _contextCount ?? contextCount
+            contextCount: settings.contextCount ?? contextCount,
+            enableMaxTokens: settings.enableMaxTokens ?? enableMaxTokens,
+            maxTokens: settings.maxTokens ?? maxTokens
           }
         })
       },
       1000,
       { leading: false, trailing: true }
     ),
-    []
+    [temperature, contextCount, enableMaxTokens, maxTokens]
   )
 
   const onTemperatureChange = (value) => {
     if (!isNaN(value as number)) {
       setTemperature(value)
-      onUpdateAssistantSettings({ _temperature: value })
+      onUpdateAssistantSettings({ temperature: value })
     }
   }
 
   const onConextCountChange = (value) => {
     if (!isNaN(value as number)) {
       setConextCount(value)
-      onUpdateAssistantSettings({ _contextCount: value })
+      onUpdateAssistantSettings({ contextCount: value })
+    }
+  }
+
+  const onMaxTokensChange = (value) => {
+    if (!isNaN(value as number)) {
+      setMaxTokens(value)
+      onUpdateAssistantSettings({ maxTokens: value })
     }
   }
 
   const onReset = () => {
     setTemperature(DEFAULT_TEMPERATURE)
     setConextCount(DEFAULT_CONEXTCOUNT)
+    setEnableMaxTokens(false)
+    setMaxTokens(0)
     updateDefaultAssistant({
       ...defaultAssistant,
       settings: {
         ...defaultAssistant.settings,
         temperature: DEFAULT_TEMPERATURE,
-        contextCount: DEFAULT_CONEXTCOUNT
+        contextCount: DEFAULT_CONEXTCOUNT,
+        enableMaxTokens: false,
+        maxTokens: DEFAULT_MAX_TOKENS
       }
     })
   }
@@ -79,15 +97,27 @@ const AssistantSettings: FC = () => {
         onChange={(e) => updateDefaultAssistant({ ...defaultAssistant, prompt: e.target.value })}
       />
       <SettingDivider />
-      <SettingSubtitle style={{ marginTop: 0 }}>{t('settings.assistant.model_params')}</SettingSubtitle>
+      <SettingSubtitle
+        style={{
+          marginTop: 0,
+          marginBottom: 20,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between'
+        }}>
+        <span>{t('settings.assistant.model_params')}</span>
+        <Button onClick={onReset} style={{ width: 90 }}>
+          {t('chat.settings.reset')}
+        </Button>
+      </SettingSubtitle>
       <Row align="middle">
-        <Label>{t('assistant.settings.temperature')}</Label>
+        <Label>{t('chat.settings.temperature')}</Label>
-        <Tooltip title={t('assistant.settings.temperature.tip')}>
+        <Tooltip title={t('chat.settings.temperature.tip')}>
           <QuestionIcon />
         </Tooltip>
       </Row>
       <Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
-        <Col span={22}>
+        <Col span={21}>
           <Slider
             min={0}
             max={1.2}
@@ -97,7 +127,7 @@ const AssistantSettings: FC = () => {
             step={0.1}
           />
         </Col>
-        <Col span={2}>
+        <Col span={3}>
           <InputNumber
             min={0}
             max={1.2}
@@ -109,23 +139,23 @@ const AssistantSettings: FC = () => {
         </Col>
       </Row>
       <Row align="middle">
-        <Label>{t('assistant.settings.conext_count')}</Label>
+        <Label>{t('chat.settings.conext_count')}</Label>
-        <Tooltip title={t('assistant.settings.conext_count.tip')}>
+        <Tooltip title={t('chat.settings.conext_count.tip')}>
           <QuestionIcon />
         </Tooltip>
       </Row>
       <Row align="middle" style={{ marginBottom: 10 }} gutter={20}>
-        <Col span={22}>
+        <Col span={21}>
           <Slider
             min={0}
             max={20}
-            marks={{ 0: '0', 5: '5', 10: '10', 15: '15', 20: t('assistant.settings.max') }}
+            marks={{ 0: '0', 5: '5', 10: '10', 15: '15', 20: t('chat.settings.max') }}
             onChange={onConextCountChange}
             value={typeof contextCount === 'number' ? contextCount : 0}
             step={1}
           />
         </Col>
-        <Col span={2}>
+        <Col span={3}>
           <InputNumber
             min={0}
             max={20}
@@ -136,9 +166,50 @@ const AssistantSettings: FC = () => {
           />
         </Col>
       </Row>
-      <Button onClick={onReset} style={{ width: 100 }}>
+      <Row align="middle">
-        {t('assistant.settings.reset')}
+        <HStack alignItems="center">
-      </Button>
+          <Label>{t('chat.settings.max_tokens')}</Label>
+          <Tooltip title={t('chat.settings.max_tokens.tip')}>
+            <QuestionIcon />
+          </Tooltip>
+        </HStack>
+        <Switch
+          style={{ marginLeft: 10 }}
+          checked={enableMaxTokens}
+          onChange={(enabled) => {
+            setEnableMaxTokens(enabled)
+            onUpdateAssistantSettings({ enableMaxTokens: enabled })
+          }}
+        />
+      </Row>
+      {enableMaxTokens && (
+        <Row align="middle" gutter={20}>
+          <Col span={21}>
+            <Slider
+              min={0}
+              max={32000}
+              onChange={onMaxTokensChange}
+              value={typeof maxTokens === 'number' ? maxTokens : 0}
+              step={100}
+              marks={{
+                0: '0',
+                32000: t('chat.settings.max')
+              }}
+            />
+          </Col>
+          <Col span={3}>
+            <InputNumber
+              min={0}
+              max={32000}
+              step={100}
+              value={maxTokens}
+              onChange={onMaxTokensChange}
+              controls={true}
+              style={{ width: '100%' }}
+            />
+          </Col>
+        </Row>
+      )}
     </SettingContainer>
   )
 }

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

@@ -1,17 +1,18 @@
-import { FC, useState } from 'react'
-import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from './components'
-import { Avatar, Input, Select, Upload } from 'antd'
-import styled from 'styled-components'
-import LocalStorage from '@renderer/services/storage'
-import { compressImage, isValidProxyUrl } from '@renderer/utils'
 import useAvatar from '@renderer/hooks/useAvatar'
+import { useSettings } from '@renderer/hooks/useSettings'
+import i18n from '@renderer/i18n'
+import LocalStorage from '@renderer/services/storage'
 import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
-import { useSettings } from '@renderer/hooks/useSettings'
 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'
+import { compressImage, isValidProxyUrl } from '@renderer/utils'
+import { Avatar, Input, Select, Upload } from 'antd'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from './components'
 
 const GeneralSettings: FC = () => {
   const avatar = useAvatar()
@@ -22,8 +23,8 @@ const GeneralSettings: FC = () => {
 
   const onSelectLanguage = (value: string) => {
     dispatch(setLanguage(value))
-    i18n.changeLanguage(value)
     localStorage.setItem('language', value)
+    i18n.changeLanguage(value)
   }
 
   const onSetProxyUrl = () => {

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

@@ -1,12 +1,13 @@
-import { FC } from 'react'
-import { SettingContainer, SettingDivider, SettingTitle } from './components'
-import { Select } from 'antd'
-import { useProviders } from '@renderer/hooks/useProvider'
-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'
+import { useDefaultModel } from '@renderer/hooks/useAssistant'
+import { useProviders } from '@renderer/hooks/useProvider'
+import { Model } from '@renderer/types'
+import { Select } from 'antd'
+import { find, sortBy, upperFirst } from 'lodash'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { SettingContainer, SettingDivider, SettingTitle } from './components'
 
 const ModelSettings: FC = () => {
   const { defaultModel, topicNamingModel, translateModel, setDefaultModel, setTopicNamingModel, setTranslateModel } =
@@ -20,8 +21,8 @@ const ModelSettings: FC = () => {
     .map((p) => ({
       label: p.isSystem ? t(`provider.${p.id}`) : p.name,
       title: p.name,
-      options: p.models.map((m) => ({
+      options: sortBy(p.models, 'name').map((m) => ({
-        label: m.name,
+        label: upperFirst(m.name),
         value: m.id
       }))
     }))
@@ -39,7 +40,7 @@ const ModelSettings: FC = () => {
       <SettingDivider />
       <Select
         defaultValue={defaultModel.id}
-        style={{ width: 200 }}
+        style={{ width: 360 }}
         onChange={(id) => setDefaultModel(find(allModels, { id }) as Model)}
         options={selectOptions}
       />
@@ -53,7 +54,7 @@ const ModelSettings: FC = () => {
       <SettingDivider />
       <Select
         defaultValue={topicNamingModel.id}
-        style={{ width: 200 }}
+        style={{ width: 360 }}
         onChange={(id) => setTopicNamingModel(find(allModels, { id }) as Model)}
         options={selectOptions}
       />
@@ -67,7 +68,7 @@ const ModelSettings: FC = () => {
       <SettingDivider />
       <Select
         defaultValue={translateModel?.id}
-        style={{ width: 200 }}
+        style={{ width: 360 }}
         onChange={(id) => setTranslateModel(find(allModels, { id }) as Model)}
         options={selectOptions}
         placeholder={t('settings.models.empty')}

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

@@ -1,16 +1,17 @@
+import { PlusOutlined } from '@ant-design/icons'
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
 import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
-import { useAllProviders, useProviders } from '@renderer/hooks/useProvider'
 import { getProviderLogo } from '@renderer/config/provider'
+import { useAllProviders, useProviders } from '@renderer/hooks/useProvider'
 import { Provider } from '@renderer/types'
 import { droppableReorder, generateColorFromChar, getFirstCharacter, uuid } from '@renderer/utils'
 import { Avatar, Button, Dropdown, MenuProps, Tag } from 'antd'
 import { FC, useState } from 'react'
-import styled from 'styled-components'
-import ProviderSetting from './components/ProviderSetting'
 import { useTranslation } from 'react-i18next'
-import { PlusOutlined } from '@ant-design/icons'
+import styled from 'styled-components'
-import { DeleteOutlined, EditOutlined } from '@ant-design/icons'
+
 import AddProviderPopup from './components/AddProviderPopup'
+import ProviderSetting from './components/ProviderSetting'
 
 const ProviderSettings: FC = () => {
   const providers = useAllProviders()
@@ -42,7 +43,7 @@ const ProviderSettings: FC = () => {
       apiKey: '',
       apiHost: '',
       models: [],
-      enabled: false,
+      enabled: true,
       isSystem: false
     } as Provider
     addProvider(provider)
@@ -92,7 +93,11 @@ const ProviderSettings: FC = () => {
                   {providers.map((provider, index) => (
                     <Draggable key={`draggable_${provider.id}_${index}`} draggableId={provider.id} index={index}>
                       {(provided) => (
-                        <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
                           <Dropdown
                             menu={{ items: provider.isSystem ? [] : getDropdownMenus(provider) }}
                             trigger={['contextMenu']}>
@@ -166,7 +171,6 @@ const ProviderListItem = styled.div`
   flex-direction: row;
   align-items: center;
   padding: 5px 8px;
-  margin-bottom: 5px;
   width: 100%;
   cursor: pointer;
   border-radius: 5px;
@@ -188,6 +192,7 @@ const ProviderItemName = styled.div`
   white-space: nowrap;
   text-overflow: ellipsis;
   font-weight: 500;
+  font-family: Ubuntu;
 `
 
 const AddButtonWrapper = styled.div`

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

@@ -1,13 +1,14 @@
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Link, Route, Routes, useLocation } from 'react-router-dom'
 import styled from 'styled-components'
-import GeneralSettings from './GeneralSettings'
+
 import AboutSettings from './AboutSettings'
 import AssistantSettings from './AssistantSettings'
+import GeneralSettings from './GeneralSettings'
 import ModelSettings from './ModelSettings'
 import ProviderSettings from './ProviderSettings'
-import { useTranslation } from 'react-i18next'
 
 const SettingsPage: FC = () => {
   const { pathname } = useLocation()
@@ -62,6 +63,7 @@ const ContentContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: row;
+  background-color: var(--color-background);
 `
 
 const SettingMenus = styled.ul`

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

@@ -115,18 +115,19 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve }) => {
 export default class AddModelPopup {
   static topviewId = 0
   static hide() {
-    TopView.hide(this.topviewId)
+    TopView.hide('AddModelPopup')
   }
   static show(props: ShowParams) {
     return new Promise<any>((resolve) => {
-      this.topviewId = TopView.show(
+      TopView.show(
         <PopupContainer
           {...props}
           resolve={(v) => {
             resolve(v)
             this.hide()
           }}
-        />
+        />,
+        'AddModelPopup'
       )
     })
   }

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

@@ -54,18 +54,19 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
 export default class AddProviderPopup {
   static topviewId = 0
   static hide() {
-    TopView.hide(this.topviewId)
+    TopView.hide('AddProviderPopup')
   }
   static show(provider?: Provider) {
     return new Promise<string>((resolve) => {
-      this.topviewId = TopView.show(
+      TopView.show(
         <PopupContainer
           provider={provider}
           resolve={(v) => {
             resolve(v)
             this.hide()
           }}
-        />
+        />,
+        'AddProviderPopup'
       )
     })
   }

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

@@ -1,17 +1,18 @@
 import { LoadingOutlined, MinusOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
 import { SYSTEM_MODELS } from '@renderer/config/models'
+import { getModelLogo } from '@renderer/config/provider'
 import { useProvider } from '@renderer/hooks/useProvider'
 import { fetchModels } from '@renderer/services/api'
-import { getModelLogo } from '@renderer/config/provider'
 import { Model, Provider } from '@renderer/types'
 import { getDefaultGroupName, isFreeModel, runAsyncFunction } from '@renderer/utils'
 import { Avatar, Button, Empty, Flex, Modal, Tag } from 'antd'
 import Search from 'antd/es/input/Search'
 import { groupBy, isEmpty, uniqBy } from 'lodash'
 import { useEffect, useState } from 'react'
-import styled from 'styled-components'
-import { TopView } from '../../../components/TopView'
 import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { TopView } from '../../../components/TopView'
 
 interface ShowParams {
   provider: Provider
@@ -71,7 +72,8 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
             provider: _provider.id,
             group: getDefaultGroupName(model.id),
             // @ts-ignore name
-            description: model?.description
+            description: model?.description,
+            owned_by: model?.owned_by
           }))
         )
         setLoading(false)
@@ -178,7 +180,7 @@ const ListHeader = styled.div`
   justify-content: space-between;
   background-color: var(--color-background-soft);
   padding: 8px 22px;
-  color: var(--color-white);
+  color: var(--color-text);
   opacity: 0.4;
 `
 
@@ -200,14 +202,14 @@ const ListItemHeader = styled.div`
 `
 
 const ListItemName = styled.div`
-  color: var(--color-white);
+  color: var(--color-text);
   font-size: 14px;
   font-weight: 600;
   margin-left: 6px;
 `
 
 const ModelHeaderTitle = styled.div`
-  color: var(--color-white);
+  color: var(--color-text);
   font-size: 18px;
   font-weight: 600;
   margin-right: 10px;
@@ -222,18 +224,19 @@ const Question = styled(QuestionCircleOutlined)`
 export default class EditModelsPopup {
   static topviewId = 0
   static hide() {
-    TopView.hide(this.topviewId)
+    TopView.hide('EditModelsPopup')
   }
   static show(props: ShowParams) {
     return new Promise<any>((resolve) => {
-      this.topviewId = TopView.show(
+      TopView.show(
         <PopupContainer
           {...props}
           resolve={(v) => {
             resolve(v)
             this.hide()
           }}
-        />
+        />,
+        'EditModelsPopup'
       )
     })
   }

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

@@ -1,11 +1,3 @@
-import { Provider } from '@renderer/types'
-import { FC, useEffect, useState } from 'react'
-import styled from 'styled-components'
-import { Avatar, Button, Card, Divider, Flex, Input, Space, Switch } from 'antd'
-import { useProvider } from '@renderer/hooks/useProvider'
-import { groupBy } from 'lodash'
-import { SettingContainer, SettingSubtitle, SettingTitle } from '.'
-import { getModelLogo } from '@renderer/config/provider'
 import {
   CheckOutlined,
   EditOutlined,
@@ -14,13 +6,23 @@ import {
   MinusCircleOutlined,
   PlusOutlined
 } from '@ant-design/icons'
+import { getModelLogo } from '@renderer/config/provider'
+import { PROVIDER_CONFIG } from '@renderer/config/provider'
+import { useProvider } from '@renderer/hooks/useProvider'
+import { useTheme } from '@renderer/providers/ThemeProvider'
+import { checkApi } from '@renderer/services/api'
+import { Provider } from '@renderer/types'
+import { Avatar, Button, Card, Divider, Flex, Input, Space, Switch } from 'antd'
+import Link from 'antd/es/typography/Link'
+import { groupBy } from 'lodash'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import OllamSettings from '../providers/OllamaSettings'
+import { SettingContainer, SettingSubtitle, SettingTitle } from '.'
 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
@@ -125,6 +127,7 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
         />
         {apiEditable && <Button onClick={onReset}>{t('settings.provider.api.url.reset')}</Button>}
       </Space.Compact>
+      {provider.id === 'ollama' && <OllamSettings />}
       <SettingSubtitle>{t('common.models')}</SettingSubtitle>
       {Object.keys(modelGroups).map((group) => (
         <Card key={group} type="inner" title={group} style={{ marginBottom: '10px' }} size="small">
@@ -181,14 +184,14 @@ const ModelListHeader = styled.div`
   align-items: center;
 `
 
-const HelpTextRow = styled.div`
+export const HelpTextRow = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 5px 0;
 `
 
-const HelpText = styled.div`
+export const HelpText = styled.div`
   font-size: 11px;
   color: var(--color-text);
   opacity: 0.4;
@@ -200,14 +203,11 @@ const HelpLink = styled(Link)`
 `
 
 const RemoveIcon = styled(MinusCircleOutlined)`
+  font-size: 18px;
   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

@@ -8,6 +8,7 @@ export const SettingContainer = styled.div`
   height: calc(100vh - var(--navbar-height));
   padding: 15px;
   overflow-y: scroll;
+  font-family: Ubuntu;
 
   &::-webkit-scrollbar {
     display: none;
@@ -26,7 +27,7 @@ export const SettingTitle = styled.div`
 export const SettingSubtitle = styled.div`
   font-size: 14px;
   color: var(--color-text-2);
-  margin: 15px 0 10px 0;
+  margin: 15px 0 0 0;
   user-select: none;
 `
 

src/renderer/src/pages/settings/providers/OllamaSettings.tsx

@@ -0,0 +1,35 @@
+import { useOllamaSettings } from '@renderer/hooks/useOllama'
+import { InputNumber } from 'antd'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import { SettingSubtitle } from '../components'
+import { HelpText, HelpTextRow } from '../components/ProviderSetting'
+
+const OllamSettings: FC = () => {
+  const { keepAliveTime, setKeepAliveTime } = useOllamaSettings()
+  const [keepAliveMinutes, setKeepAliveMinutes] = useState(keepAliveTime)
+  const { t } = useTranslation()
+
+  return (
+    <Container>
+      <SettingSubtitle>{t('ollama.keep_alive_time.title')}</SettingSubtitle>
+      <InputNumber
+        style={{ width: '100%' }}
+        value={keepAliveMinutes}
+        onChange={(e) => setKeepAliveMinutes(Number(e))}
+        onBlur={() => setKeepAliveTime(keepAliveMinutes)}
+        suffix={t('ollama.keep_alive_time.placeholder')}
+        step={5}
+      />
+      <HelpTextRow>
+        <HelpText>{t('ollama.keep_alive_time.description')}</HelpText>
+      </HelpTextRow>
+    </Container>
+  )
+}
+
+const Container = styled.div``
+
+export default OllamSettings

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

@@ -233,6 +233,7 @@ const ContentContainer = styled.div`
   flex-direction: column;
   height: 100%;
   padding: 20px;
+  background-color: var(--color-background);
 `
 
 const MenuContainer = styled.div`

src/renderer/src/providers/AntdProvider.tsx

@@ -2,20 +2,29 @@ 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()
+  const isDarkTheme = _theme === 'dark'
 
   return (
     <ConfigProvider
       locale={getAntdLocale(language)}
       theme={{
         algorithm: [_theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm],
+        components: {
+          Segmented: {
+            trackBg: 'transparent',
+            itemSelectedBg: isDarkTheme ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
+            boxShadowTertiary: undefined
+          }
+        },
         token: {
           colorPrimary: '#00b96b',
-          borderRadius: 5
+          borderRadius: 8
         }
       }}>
       {children}

src/renderer/src/providers/ThemeProvider.tsx

@@ -34,7 +34,7 @@ export const ThemeProvider: React.FC<PropsWithChildren> = ({ children }) => {
 
   useEffect(() => {
     document.body.setAttribute('theme-mode', _theme)
-    window.api.setTheme(_theme === ThemeMode.dark ? 'dark' : 'light')
+    window.api?.setTheme(_theme === ThemeMode.dark ? 'dark' : 'light')
   }, [_theme])
 
   return <ThemeContext.Provider value={{ theme: _theme, toggleTheme }}>{children}</ThemeContext.Provider>

src/renderer/src/services/ProviderSDK.ts

@@ -1,12 +1,15 @@
-import { Assistant, Message, Provider } from '@renderer/types'
-import OpenAI from 'openai'
 import Anthropic from '@anthropic-ai/sdk'
-import { getDefaultModel, getTopNamingModel } from './assistant'
-import { ChatCompletionCreateParamsNonStreaming, ChatCompletionMessageParam } from 'openai/resources'
-import { sum, takeRight } from 'lodash'
 import { MessageCreateParamsNonStreaming, MessageParam } from '@anthropic-ai/sdk/resources'
+import { DEFAULT_MAX_TOKENS } from '@renderer/config/constant'
+import { getOllamaKeepAliveTime } from '@renderer/hooks/useOllama'
+import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
+import { removeQuotes } from '@renderer/utils'
+import { sum, takeRight } from 'lodash'
+import OpenAI from 'openai'
+import { ChatCompletionCreateParamsNonStreaming, ChatCompletionMessageParam } from 'openai/resources'
+
+import { getAssistantSettings, getDefaultModel, getTopNamingModel } from './assistant'
 import { EVENT_NAMES } from './event'
-import { getAssistantSettings, removeQuotes } from '@renderer/utils'
 
 export default class ProviderSDK {
   provider: Provider
@@ -25,6 +28,10 @@ export default class ProviderSDK {
     return this.provider.id === 'anthropic'
   }
 
+  private get keepAliveTime() {
+    return this.provider.id === 'ollama' ? getOllamaKeepAliveTime() : undefined
+  }
+
   public async completions(
     messages: Message[],
     assistant: Assistant,
@@ -32,7 +39,7 @@ export default class ProviderSDK {
   ) {
     const defaultModel = getDefaultModel()
     const model = assistant.model || defaultModel
-    const { contextCount } = getAssistantSettings(assistant)
+    const { contextCount, maxTokens } = getAssistantSettings(assistant)
 
     const systemMessage = assistant.prompt ? { role: 'system', content: assistant.prompt } : undefined
 
@@ -46,7 +53,7 @@ export default class ProviderSDK {
         .stream({
           model: model.id,
           messages: [systemMessage, ...userMessages].filter(Boolean) as MessageParam[],
-          max_tokens: 4096,
+          max_tokens: maxTokens || DEFAULT_MAX_TOKENS,
           temperature: assistant?.settings?.temperature
         })
         .on('text', (text) => onChunk({ text: text || '' }))
@@ -60,11 +67,14 @@ export default class ProviderSDK {
           })
         )
     } else {
+      // @ts-ignore key is not typed
       const stream = await this.openaiSdk.chat.completions.create({
         model: model.id,
         messages: [systemMessage, ...userMessages].filter(Boolean) as ChatCompletionMessageParam[],
         stream: true,
-        temperature: assistant?.settings?.temperature
+        temperature: assistant?.settings?.temperature,
+        max_tokens: maxTokens,
+        keep_alive: this.keepAliveTime
       })
       for await (const chunk of stream) {
         if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) break
@@ -76,7 +86,10 @@ 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 }, message]
+    const messages = [
+      { role: 'system', content: assistant.prompt },
+      { role: 'user', content: message.content }
+    ]
 
     if (this.isAnthropic) {
       const response = await this.anthropicSdk.messages.create({
@@ -88,10 +101,12 @@ export default class ProviderSDK {
       })
       return response.content[0].type === 'text' ? response.content[0].text : ''
     } else {
+      // @ts-ignore key is not typed
       const response = await this.openaiSdk.chat.completions.create({
         model: model.id,
         messages: messages as ChatCompletionMessageParam[],
-        stream: false
+        stream: false,
+        keep_alive: this.keepAliveTime
       })
       return response.choices[0].message?.content || ''
     }
@@ -120,17 +135,41 @@ export default class ProviderSDK {
 
       return message.content[0].type === 'text' ? message.content[0].text : null
     } else {
+      // @ts-ignore key is not typed
       const response = await this.openaiSdk.chat.completions.create({
         model: model.id,
         messages: [systemMessage, ...userMessages] as ChatCompletionMessageParam[],
         stream: false,
-        max_tokens: 50
+        max_tokens: 50,
+        keep_alive: this.keepAliveTime
       })
 
       return removeQuotes(response.choices[0].message?.content || '')
     }
   }
 
+  public async suggestions(messages: Message[], assistant: Assistant): Promise<Suggestion[]> {
+    const model = assistant.model
+
+    if (!model) {
+      return []
+    }
+
+    const response: any = await this.openaiSdk.request({
+      method: 'post',
+      path: '/advice_questions',
+      body: {
+        messages: messages.filter((m) => m.role === 'user').map((m) => ({ role: m.role, content: m.content })),
+        model: model.id,
+        max_tokens: 0,
+        temperature: 0,
+        n: 0
+      }
+    })
+
+    return response?.questions?.filter(Boolean)?.map((q: any) => ({ content: q })) || []
+  }
+
   public async check(): Promise<{ valid: boolean; error: Error | null }> {
     const model = this.provider.models[0]
     const body = {

src/renderer/src/services/api.ts

@@ -1,9 +1,11 @@
 import i18n from '@renderer/i18n'
 import store from '@renderer/store'
 import { setGenerating } from '@renderer/store/runtime'
-import { Assistant, Message, Provider, Topic } from '@renderer/types'
+import { Assistant, Message, Provider, Suggestion, Topic } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import dayjs from 'dayjs'
+import { isEmpty } from 'lodash'
+
 import {
   getAssistantProvider,
   getDefaultModel,
@@ -12,8 +14,8 @@ import {
   getTranslateModel
 } from './assistant'
 import { EVENT_NAMES, EventEmitter } from './event'
+import { filterMessages } from './messages'
 import ProviderSDK from './ProviderSDK'
-import { isEmpty } from 'lodash'
 
 export async function fetchChatCompletion({
   messages,
@@ -48,18 +50,36 @@ export async function fetchChatCompletion({
 
   onResponse({ ...message })
 
+  // Handle paused state
+  let paused = false
+  const timer = setInterval(() => {
+    if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) {
+      paused = true
+      onResponse({ ...message, status: 'paused' })
+      clearInterval(timer)
+    }
+  }, 1000)
+
   try {
-    await providerSdk.completions(messages, assistant, ({ text, usage }) => {
+    await providerSdk.completions(filterMessages(messages), assistant, ({ text, usage }) => {
       message.content = message.content + text || ''
       message.usage = usage
       onResponse({ ...message, status: 'pending' })
     })
+    message.status = 'success'
   } catch (error: any) {
     message.content = `Error: ${error.message}`
+    message.status = 'error'
+  }
+
+  timer && clearInterval(timer)
+
+  if (paused) {
+    return message
   }
 
   // Update message status
-  message.status = window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED) ? 'paused' : 'success'
+  message.status = window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED) ? 'paused' : message.status
 
   // Emit chat completion event
   EventEmitter.emit(EVENT_NAMES.AI_CHAT_COMPLETION, message)
@@ -109,6 +129,38 @@ export async function fetchMessagesSummary({ messages, assistant }: { messages:
   }
 }
 
+export async function fetchSuggestions({
+  messages,
+  assistant
+}: {
+  messages: Message[]
+  assistant: Assistant
+}): Promise<Suggestion[]> {
+  console.debug('fetchSuggestions', messages, assistant)
+  const provider = getAssistantProvider(assistant)
+  const providerSdk = new ProviderSDK(provider)
+  console.debug('fetchSuggestions', provider)
+  const model = assistant.model
+
+  if (!model) {
+    return []
+  }
+
+  if (model.owned_by !== 'graphrag') {
+    return []
+  }
+
+  if (model.id.endsWith('global')) {
+    return []
+  }
+
+  try {
+    return await providerSdk.suggestions(messages, assistant)
+  } catch (error: any) {
+    return []
+  }
+}
+
 export async function checkApi(provider: Provider) {
   const model = provider.models[0]
   const key = 'api-check'

src/renderer/src/services/assistant.ts

@@ -1,12 +1,15 @@
-import { Assistant, Model, Provider, Topic } from '@renderer/types'
+import { DEFAULT_CONEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
-import store from '@renderer/store'
-import { uuid } from '@renderer/utils'
 import i18n from '@renderer/i18n'
+import store from '@renderer/store'
+import { updateAgent } from '@renderer/store/agents'
+import { updateAssistant } from '@renderer/store/assistants'
+import { Agent, Assistant, AssistantSettings, Model, Provider, Topic } from '@renderer/types'
+import { getLeadingEmoji, removeLeadingEmoji, uuid } from '@renderer/utils'
 
 export function getDefaultAssistant(): Assistant {
   return {
     id: 'default',
-    name: i18n.t('assistant.default.name'),
+    name: i18n.t('chat.default.name'),
     prompt: '',
     topics: [getDefaultTopic()]
   }
@@ -15,7 +18,7 @@ export function getDefaultAssistant(): Assistant {
 export function getDefaultTopic(): Topic {
   return {
     id: uuid(),
-    name: i18n.t('assistant.default.topic.name'),
+    name: i18n.t('chat.default.topic.name'),
     messages: []
   }
 }
@@ -36,7 +39,7 @@ export function getTranslateModel() {
   return store.getState().llm.translateModel
 }
 
-export function getAssistantProvider(assistant: Assistant) {
+export function getAssistantProvider(assistant: Assistant): Provider {
   const providers = store.getState().llm.providers
   const provider = providers.find((p) => p.id === assistant.model?.provider)
   return provider || getDefaultProvider()
@@ -53,3 +56,68 @@ export function getProviderByModelId(modelId?: string) {
   const _modelId = modelId || getDefaultModel().id
   return providers.find((p) => p.models.find((m) => m.id === _modelId)) as Provider
 }
+
+export const getAssistantSettings = (assistant: Assistant): AssistantSettings => {
+  const contextCount = assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT
+  const getAssistantMaxTokens = () => {
+    if (assistant.settings?.enableMaxTokens) {
+      const maxTokens = assistant.settings.maxTokens
+      if (typeof maxTokens === 'number') {
+        return maxTokens > 100 ? maxTokens : DEFAULT_MAX_TOKENS
+      }
+      return DEFAULT_MAX_TOKENS
+    }
+    return undefined
+  }
+
+  return {
+    contextCount: contextCount === 20 ? 100000 : contextCount,
+    temperature: assistant?.settings?.temperature ?? DEFAULT_TEMPERATURE,
+    enableMaxTokens: assistant?.settings?.enableMaxTokens ?? false,
+    maxTokens: getAssistantMaxTokens()
+  }
+}
+
+export function covertAgentToAssistant(agent: Agent): Assistant {
+  return {
+    ...getDefaultAssistant(),
+    ...agent,
+    name: getAssistantNameWithAgent(agent),
+    id: agent.group === 'system' ? uuid() : String(agent.id)
+  }
+}
+
+export function getAssistantNameWithAgent(agent: Agent) {
+  return agent.emoji ? agent.emoji + ' ' + agent.name : agent.name
+}
+
+export function syncAsistantToAgent(assistant: Assistant) {
+  const agents = store.getState().agents.agents
+  const agent = agents.find((a) => a.id === assistant.id)
+
+  if (agent) {
+    store.dispatch(
+      updateAgent({
+        ...agent,
+        emoji: getLeadingEmoji(assistant.name),
+        name: removeLeadingEmoji(assistant.name),
+        prompt: assistant.prompt
+      })
+    )
+  }
+}
+
+export function syncAgentToAssistant(agent: Agent) {
+  const assistants = store.getState().assistants.assistants
+  const assistant = assistants.find((a) => a.id === agent.id)
+
+  if (assistant) {
+    store.dispatch(
+      updateAssistant({
+        ...assistant,
+        name: getAssistantNameWithAgent(agent),
+        prompt: agent.prompt
+      })
+    )
+  }
+}

src/renderer/src/services/messages.ts

@@ -0,0 +1,35 @@
+import { Assistant, Message } from '@renderer/types'
+import { GPTTokens } from 'gpt-tokens'
+import { isEmpty, takeRight } from 'lodash'
+
+import { getAssistantSettings } from './assistant'
+
+export const filterMessages = (messages: Message[]) => {
+  return messages.filter((message) => message.type !== '@').filter((message) => !isEmpty(message.content.trim()))
+}
+
+export function estimateInputTokenCount(text: string) {
+  const input = new GPTTokens({
+    model: 'gpt-4o',
+    messages: [{ role: 'user', content: text }]
+  })
+
+  return input.usedTokens - 7
+}
+
+export function estimateHistoryTokenCount(assistant: Assistant, msgs: Message[]) {
+  const { contextCount } = getAssistantSettings(assistant)
+
+  const all = new GPTTokens({
+    model: 'gpt-4o',
+    messages: [
+      { role: 'system', content: assistant.prompt },
+      ...filterMessages(takeRight(msgs, contextCount)).map((message) => ({
+        role: message.role,
+        content: message.content
+      }))
+    ]
+  })
+
+  return all.usedTokens - 7
+}