chore(version): 0.6.10

- Replaced 'CopyOutlined' icon with custom 'CopyIcon'.
- Replaced Topics component with RightSidebar component to match topicPosition settings.
- Removed unused imports and updated UI components in the Inputbar.
- Implemented a new Token Count component for displaying context and estimated token information in the input bar.
- Adjusted the height of code block header.
- Added functionality to toggle theme opacity.
- Added functionality to dynamically change the sidebar border style based on stored settings.
- Updated CSS styles for dynamic topic list width and padding adjustments.
- Removed unused import and styles to improve code efficiency and reduce clutter.

.gitignore

@@ -45,3 +45,6 @@ out
 # ENV
 .env
 .env.*
+
+# Local
+local

.yarn/patches/@electron-notarize-npm-2.3.2-535908a4bd.patch

@@ -0,0 +1,53 @@
+diff --git a/lib/check-signature.js b/lib/check-signature.js
+index 324568af71bcc4372c9f959131ecd24122848c86..677348e0a138ff608b2ac41f592d813b15ee4956 100644
+--- a/lib/check-signature.js
++++ b/lib/check-signature.js
+@@ -41,16 +41,12 @@ const spawn_1 = require("./spawn");
+ const debug_1 = __importDefault(require("debug"));
+ const d = (0, debug_1.default)('electron-notarize');
+ const codesignDisplay = (opts) => __awaiter(void 0, void 0, void 0, function* () {
+-    const result = yield (0, spawn_1.spawn)('codesign', ['-dv', '-vvvv', '--deep', path.basename(opts.appPath)], {
+-        cwd: path.dirname(opts.appPath),
+-    });
++    const result = yield (0, spawn_1.spawn)('codesign', ['-dv', '-vvvv', '--deep', opts.appPath]);
+     return result;
+ });
+ const codesign = (opts) => __awaiter(void 0, void 0, void 0, function* () {
+     d('attempting to check codesign of app:', opts.appPath);
+-    const result = yield (0, spawn_1.spawn)('codesign', ['-vvv', '--deep', '--strict', path.basename(opts.appPath)], {
+-        cwd: path.dirname(opts.appPath),
+-    });
++    const result = yield (0, spawn_1.spawn)('codesign', ['-vvv', '--deep', '--strict', opts.appPath]);
+     return result;
+ });
+ function checkSignatures(opts) {
+diff --git a/lib/notarytool.js b/lib/notarytool.js
+index 1ab090efb2101fc8bee5553445e0349c54474421..a5ddfd922197449fc56078e4a7e9a2ee5d8d207d 100644
+--- a/lib/notarytool.js
++++ b/lib/notarytool.js
+@@ -92,9 +92,7 @@ function notarizeAndWaitForNotaryTool(opts) {
+             else {
+                 filePath = path.resolve(dir, `${path.parse(opts.appPath).name}.zip`);
+                 d('zipping application to:', filePath);
+-                const zipResult = yield (0, spawn_1.spawn)('ditto', ['-c', '-k', '--sequesterRsrc', '--keepParent', path.basename(opts.appPath), filePath], {
+-                    cwd: path.dirname(opts.appPath),
+-                });
++                const zipResult = yield (0, spawn_1.spawn)('ditto', ['-c', '-k', '--sequesterRsrc', '--keepParent', opts.appPath, filePath]);
+                 if (zipResult.code !== 0) {
+                     throw new Error(`Failed to zip application, exited with code: ${zipResult.code}\n\n${zipResult.output}`);
+                 }
+diff --git a/lib/staple.js b/lib/staple.js
+index 47dbd85b2fc279d999b57f47fb8171e1cc674436..f8829e6ac54fcd630a730d12d75acc1591b953b6 100644
+--- a/lib/staple.js
++++ b/lib/staple.js
+@@ -43,9 +43,7 @@ const d = (0, debug_1.default)('electron-notarize:staple');
+ function stapleApp(opts) {
+     return __awaiter(this, void 0, void 0, function* () {
+         d('attempting to staple app:', opts.appPath);
+-        const result = yield (0, spawn_1.spawn)('xcrun', ['stapler', 'staple', '-v', path.basename(opts.appPath)], {
+-            cwd: path.dirname(opts.appPath),
+-        });
++        const result = yield (0, spawn_1.spawn)('xcrun', ['stapler', 'staple', '-v', opts.appPath]);
+         if (result.code !== 0) {
+             throw new Error(`Failed to staple your application with code: ${result.code}\n\n${result.output}`);
+         }

.yarnrc.yml

@@ -1,2 +1,5 @@
-nodeLinker: node-modules
+enableImmutableInstalls: false
+
 httpTimeout: 300000
+
+nodeLinker: node-modules

electron-builder.yml

@@ -3,12 +3,13 @@ productName: Cherry Studio
 directories:
   buildResources: build
 files:
-  - '!**/.vscode/*'
-  - '!src/*'
+  - '!{.vscode,.yarn,.github}'
   - '!electron.vite.config.{js,ts,mjs,cjs}'
   - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
   - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
   - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+  - '!src/*'
+  - '!local'
 asarUnpack:
   - resources/**
 win:
@@ -56,4 +57,6 @@ electronDownload:
 afterSign: scripts/notarize.js
 releaseInfo:
   releaseNotes: |
-    添加 MiniMax 服务商
+    智能助理和消息列表合并
+    优化输入框样式
+    提升小程序稳定性

electron.vite.config.ts

@@ -4,18 +4,15 @@ import { resolve } from 'path'
 
 export default defineConfig({
   main: {
-    plugins: [externalizeDepsPlugin()]
+    plugins: [externalizeDepsPlugin()],
+    resolve: {
+      alias: {
+        ollama: resolve('ollama/src')
+      }
+    }
   },
   preload: {
-    plugins: [externalizeDepsPlugin()],
-    build: {
-      rollupOptions: {
-        input: {
-          index: resolve(__dirname, 'src/preload/index.ts'),
-          minapp: resolve(__dirname, 'src/preload/minapp.ts')
-        }
-      }
-    }
+    plugins: [externalizeDepsPlugin()]
   },
   renderer: {
     resolve: {

package.json

@@ -1,10 +1,16 @@
 {
-  "name": "cherry-studio",
-  "version": "0.5.8",
+  "name": "CherryStudio",
+  "version": "0.6.10",
+  "private": true,
   "description": "A powerful AI assistant for producer.",
   "main": "./out/main/index.js",
   "author": "kangfenmao@qq.com",
   "homepage": "https://github.com/kangfenmao/cherry-studio",
+  "workspaces": {
+    "packages": [
+      "local"
+    ]
+  },
   "scripts": {
     "format": "prettier --write .",
     "lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
@@ -25,12 +31,10 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
-    "@sentry/electron": "^5.2.0",
     "electron-log": "^5.1.5",
     "electron-store": "^8.2.0",
     "electron-updater": "^6.1.7",
-    "electron-window-state": "^5.0.3",
-    "eslint-plugin-simple-import-sort": "^12.1.1"
+    "electron-window-state": "^5.0.3"
   },
   "devDependencies": {
     "@anthropic-ai/sdk": "^0.24.3",
@@ -51,15 +55,15 @@
     "browser-image-compression": "^2.0.2",
     "dayjs": "^1.11.11",
     "dotenv-cli": "^7.4.2",
-    "electron": "^28.2.0",
+    "electron": "^28.3.3",
     "electron-builder": "^24.9.1",
-    "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",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^4.0.0",
     "gpt-tokens": "^1.3.6",
     "i18next": "^23.11.5",
@@ -76,6 +80,7 @@
     "react-router-dom": "6",
     "react-spinners": "^0.14.1",
     "react-syntax-highlighter": "^15.5.0",
+    "redux": "^5.0.1",
     "redux-persist": "^6.0.0",
     "rehype-katex": "^7.0.0",
     "remark-gfm": "^4.0.0",
@@ -91,7 +96,8 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "resolutions": {
-    "@electron/notarize": "2.3.2"
+    "@electron/notarize": "2.3.2",
+    "@electron/notarize@npm:2.2.1": "patch:@electron/notarize@npm%3A2.3.2#~/.yarn/patches/@electron-notarize-npm-2.3.2-535908a4bd.patch"
   },
   "packageManager": "yarn@4.3.1"
 }

resources/graphrag.html

@@ -58,7 +58,9 @@
         window.api.minApp({
           url,
           windowOptions: {
-            title: node.properties.title
+            title: node.properties.title,
+            width: 500,
+            height: 800
           }
         })
       })

resources/minapp.html

@@ -1,70 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MinApp</title>
-    <style>
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-      }
-      header {
-        height: 40px;
-        background-color: #303030;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        -webkit-app-region: drag;
-      }
-      #header-left {
-        margin-left: 10px;
-        margin-right: auto;
-      }
-      #header-center {
-        color: #fff;
-        font-size: 14px;
-        margin-left: 10px;
-      }
-      #header-right {
-        margin-left: auto;
-        margin-right: 10px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-      button {
-        background: none;
-        border: none;
-        color: white;
-        cursor: pointer;
-        width: 26px;
-        height: 26px;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        font-size: 14px;
-        border-radius: 3px;
-        -webkit-app-region: no-drag;
-      }
-      button:hover {
-        background-color: #555;
-      }
-    </style>
-  </head>
-  <body>
-    <header>
-      <div id="header-left"></div>
-      <div id="header-center"></div>
-      <div id="header-right"></div>
-    </header>
-    <script type="module">
-      import { getQueryParam } from './js/utils.js'
-      const title = getQueryParam('title')
-      document.getElementById('header-center').innerHTML = title
-    </script>
-  </body>
-</html>

src/main/event.ts

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

src/main/index.ts

@@ -1,17 +1,16 @@
 import { electronApp, optimizer } from '@electron-toolkit/utils'
-import * as Sentry from '@sentry/electron/main'
-import { app, BrowserWindow, ipcMain, session, shell } from 'electron'
-import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer'
+import { app, BrowserWindow } from 'electron'
 
-import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
-import { saveFile } from './event'
-import AppUpdater from './updater'
-import { createMainWindow, createMinappWindow } from './window'
+import { registerIpc } from './ipc'
+import { updateUserDataPath } from './utils/upgrade'
+import { createMainWindow } from './window'
 
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(() => {
+app.whenReady().then(async () => {
+  await updateUserDataPath()
+
   // Set app user model id for windows
   electronApp.setAppUserModelId('com.kangfenmao.CherryStudio')
 
@@ -30,45 +29,7 @@ app.whenReady().then(() => {
 
   const mainWindow = createMainWindow()
 
-  const { autoUpdater } = new AppUpdater(mainWindow)
-
-  // IPC
-  ipcMain.handle('get-app-info', () => ({
-    version: app.getVersion(),
-    isPackaged: app.isPackaged,
-    appPath: app.getAppPath()
-  }))
-
-  ipcMain.handle('open-website', (_, url: string) => {
-    shell.openExternal(url)
-  })
-
-  ipcMain.handle('set-proxy', (_, proxy: string) => {
-    session.defaultSession.setProxy(proxy ? { proxyRules: proxy } : {})
-  })
-
-  ipcMain.handle('save-file', saveFile)
-
-  ipcMain.handle('minapp', (_, args) => {
-    createMinappWindow(args)
-  })
-
-  ipcMain.handle('set-theme', (_, theme: 'light' | 'dark') => {
-    appConfig.set('theme', theme)
-    mainWindow?.setTitleBarOverlay &&
-      mainWindow.setTitleBarOverlay(theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight)
-  })
-
-  // 触发检查更新(此方法用于被渲染线程调用，例如页面点击检查更新按钮来调用此方法)
-  ipcMain.handle('check-for-update', async () => {
-    autoUpdater.logger?.info('触发检查更新')
-    return {
-      currentVersion: autoUpdater.currentVersion,
-      update: await autoUpdater.checkForUpdates()
-    }
-  })
-
-  installExtension(REDUX_DEVTOOLS)
+  registerIpc(mainWindow, app)
 })
 
 // Quit when all windows are closed, except on macOS. There, it's common
@@ -82,6 +43,3 @@ app.on('window-all-closed', () => {
 
 // In this file you can include the rest of your app"s specific main process
 // code. You can also put them in separate files and require them here.
-Sentry.init({
-  dsn: 'https://f0e972deff79c2df3e887e232d8a46a3@o4507610668007424.ingest.us.sentry.io/4507610670563328'
-})

src/main/ipc.ts

@@ -0,0 +1,58 @@
+import { BrowserWindow, ipcMain, session, shell } from 'electron'
+
+import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
+import AppUpdater from './updater'
+import { openFile, saveFile } from './utils/file'
+import { compress, decompress } from './utils/zip'
+import { createMinappWindow } from './window'
+
+export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
+  const { autoUpdater } = new AppUpdater(mainWindow)
+
+  // IPC
+  ipcMain.handle('get-app-info', () => ({
+    version: app.getVersion(),
+    isPackaged: app.isPackaged,
+    appPath: app.getAppPath()
+  }))
+
+  ipcMain.handle('open-website', (_, url: string) => {
+    shell.openExternal(url)
+  })
+
+  ipcMain.handle('set-proxy', (_, proxy: string) => {
+    session.defaultSession.setProxy(proxy ? { proxyRules: proxy } : {})
+  })
+
+  ipcMain.handle('save-file', saveFile)
+  ipcMain.handle('open-file', openFile)
+  ipcMain.handle('reload', () => mainWindow.reload())
+
+  ipcMain.handle('zip:compress', (_, text: string) => compress(text))
+  ipcMain.handle('zip:decompress', (_, text: Buffer) => decompress(text))
+
+  ipcMain.handle('minapp', (_, args) => {
+    createMinappWindow({
+      url: args.url,
+      parent: mainWindow,
+      windowOptions: {
+        ...mainWindow.getBounds(),
+        ...args.windowOptions
+      }
+    })
+  })
+
+  ipcMain.handle('set-theme', (_, theme: 'light' | 'dark') => {
+    appConfig.set('theme', theme)
+    mainWindow?.setTitleBarOverlay &&
+      mainWindow.setTitleBarOverlay(theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight)
+  })
+
+  // 触发检查更新(此方法用于被渲染线程调用，例如页面点击检查更新按钮来调用此方法)
+  ipcMain.handle('check-for-update', async () => {
+    return {
+      currentVersion: autoUpdater.currentVersion,
+      update: await autoUpdater.checkForUpdates()
+    }
+  })
+}

src/main/updater.ts

@@ -17,11 +17,6 @@ export default class AppUpdater {
       mainWindow.webContents.send('update-error', error)
     })
 
-    // 检测是否需要更新
-    autoUpdater.on('checking-for-update', () => {
-      logger.info('正在检查更新……')
-    })
-
     autoUpdater.on('update-available', (releaseInfo: UpdateInfo) => {
       autoUpdater.logger?.info('检测到新版本，确认是否下载')
       mainWindow.webContents.send('update-available', releaseInfo)
@@ -59,7 +54,6 @@ export default class AppUpdater {
 
     // 检测到不需要更新时
     autoUpdater.on('update-not-available', () => {
-      logger.info('现在使用的就是最新版本，不用更新')
       mainWindow.webContents.send('update-not-available')
     })
 

src/main/utils.ts

@@ -1,32 +0,0 @@
-/**
- * 将 JavaScript 对象转换为 URL 查询参数字符串
- * @param obj - 要转换的对象
- * @param options - 配置选项
- * @returns 转换后的查询参数字符串
- */
-export function objectToQueryParams(
-  obj: Record<string, string | number | boolean | null | undefined | object>,
-  options: {
-    skipNull?: boolean
-    skipUndefined?: boolean
-  } = {}
-): string {
-  const { skipNull = false, skipUndefined = false } = options
-
-  const params = new URLSearchParams()
-
-  for (const [key, value] of Object.entries(obj)) {
-    if (skipNull && value === null) continue
-    if (skipUndefined && value === undefined) continue
-
-    if (Array.isArray(value)) {
-      value.forEach((item) => params.append(key, String(item)))
-    } else if (typeof value === 'object' && value !== null) {
-      params.append(key, JSON.stringify(value))
-    } else if (value !== undefined && value !== null) {
-      params.append(key, String(value))
-    }
-  }
-
-  return params.toString()
-}

src/main/utils/aes.ts

@@ -0,0 +1,24 @@
+import * as crypto from 'crypto'
+
+// 定义密钥和初始化向量（IV）
+const secretKey = 'kDQvWz5slot3syfucoo53X6KKsEUJoeFikpiUWRJTLIo3zcUPpFvEa009kK13KCr'
+const iv = Buffer.from('Cherry Studio', 'hex')
+
+// 加密函数
+export function encrypt(text: string): { iv: string; encryptedData: string } {
+  const cipher = crypto.createCipheriv('aes-256-cbc', Buffer.from(secretKey), iv)
+  let encrypted = cipher.update(text, 'utf8', 'hex')
+  encrypted += cipher.final('hex')
+  return {
+    iv: iv.toString('hex'),
+    encryptedData: encrypted
+  }
+}
+
+// 解密函数
+export function decrypt(encryptedData: string, iv: string): string {
+  const decipher = crypto.createDecipheriv('aes-256-cbc', Buffer.from(secretKey), Buffer.from(iv, 'hex'))
+  let decrypted = decipher.update(encryptedData, 'hex', 'utf8')
+  decrypted += decipher.final('utf8')
+  return decrypted
+}

src/main/utils/file.ts

@@ -0,0 +1,55 @@
+import { dialog, OpenDialogOptions, OpenDialogReturnValue, SaveDialogOptions, SaveDialogReturnValue } from 'electron'
+import logger from 'electron-log'
+import { writeFile } from 'fs'
+import { readFile } from 'fs/promises'
+
+export async function saveFile(
+  _: Electron.IpcMainInvokeEvent,
+  fileName: string,
+  content: string,
+  options?: SaveDialogOptions
+): Promise<void> {
+  try {
+    const result: SaveDialogReturnValue = await dialog.showSaveDialog({
+      title: '保存文件',
+      defaultPath: fileName,
+      ...options
+    })
+
+    if (!result.canceled && result.filePath) {
+      writeFile(result.filePath, content, { encoding: 'utf-8' }, (err) => {
+        if (err) {
+          logger.error('[IPC - Error]', 'An error occurred saving the file:', err)
+        }
+      })
+    }
+  } catch (err) {
+    logger.error('[IPC - Error]', 'An error occurred saving the file:', err)
+  }
+}
+
+export async function openFile(
+  _: Electron.IpcMainInvokeEvent,
+  options: OpenDialogOptions
+): Promise<{ fileName: string; content: Buffer } | null> {
+  try {
+    const result: OpenDialogReturnValue = await dialog.showOpenDialog({
+      title: '打开文件',
+      properties: ['openFile'],
+      filters: [{ name: '所有文件', extensions: ['*'] }],
+      ...options
+    })
+
+    if (!result.canceled && result.filePaths.length > 0) {
+      const filePath = result.filePaths[0]
+      const fileName = filePath.split('/').pop() || ''
+      const content = await readFile(filePath)
+      return { fileName, content }
+    }
+
+    return null
+  } catch (err) {
+    logger.error('[IPC - Error]', 'An error occurred opening the file:', err)
+    return null
+  }
+}

src/main/utils/upgrade.ts

@@ -0,0 +1,77 @@
+import { spawn } from 'child_process'
+import { app, dialog } from 'electron'
+import Logger from 'electron-log'
+import fs from 'fs'
+import path from 'path'
+
+export async function updateUserDataPath() {
+  const currentPath = app.getPath('userData')
+  const oldPath = currentPath.replace('CherryStudio', 'cherry-studio')
+
+  if (currentPath !== oldPath && fs.existsSync(oldPath)) {
+    Logger.log('Update userData path')
+
+    try {
+      if (process.platform === 'win32') {
+        // Windows 系统：创建 bat 文件
+        const batPath = await createWindowsBatFile(oldPath, currentPath)
+        await promptRestartAndExecute(batPath)
+      } else {
+        // 其他系统：直接更新
+        fs.rmSync(currentPath, { recursive: true, force: true })
+        fs.renameSync(oldPath, currentPath)
+        Logger.log(`Directory renamed: ${currentPath}`)
+        await promptRestart()
+      }
+    } catch (error: any) {
+      Logger.error('Error updating userData path:', error)
+      dialog.showErrorBox('错误', `更新用户数据目录时发生错误: ${error.message}`)
+    }
+  } else {
+    Logger.log('userData path does not need to be updated')
+  }
+}
+
+async function createWindowsBatFile(oldPath: string, currentPath: string): Promise<string> {
+  const batPath = path.join(app.getPath('temp'), 'rename_userdata.bat')
+  const appPath = app.getPath('exe')
+  const batContent = `
+@echo off
+timeout /t 2 /nobreak
+rmdir /s /q "${currentPath}"
+rename "${oldPath}" "${path.basename(currentPath)}"
+start "" "${appPath}"
+del "%~f0"
+  `
+  fs.writeFileSync(batPath, batContent)
+  return batPath
+}
+
+async function promptRestartAndExecute(batPath: string) {
+  await dialog.showMessageBox({
+    type: 'info',
+    title: '应用需要重启',
+    message: '用户数据目录将在重启后更新。请重启应用以应用更改。',
+    buttons: ['手动重启']
+  })
+
+  // 执行 bat 文件
+  spawn('cmd.exe', ['/c', batPath], {
+    detached: true,
+    stdio: 'ignore'
+  })
+
+  app.exit(0)
+}
+
+async function promptRestart() {
+  await dialog.showMessageBox({
+    type: 'info',
+    title: '应用需要重启',
+    message: '用户数据目录已更新。请重启应用以应用更改。',
+    buttons: ['重启']
+  })
+
+  app.relaunch()
+  app.exit(0)
+}

src/main/utils/zip.ts

@@ -0,0 +1,39 @@
+import util from 'node:util'
+import zlib from 'node:zlib'
+
+import logger from 'electron-log'
+
+// 将 zlib 的 gzip 和 gunzip 方法转换为 Promise 版本
+const gzipPromise = util.promisify(zlib.gzip)
+const gunzipPromise = util.promisify(zlib.gunzip)
+
+/**
+ * 压缩字符串
+ * @param {string} string - 要压缩的 JSON 字符串
+ * @returns {Promise<Buffer>} 压缩后的 Buffer
+ */
+export async function compress(str) {
+  try {
+    const buffer = Buffer.from(str, 'utf-8')
+    const compressedBuffer = await gzipPromise(buffer)
+    return compressedBuffer
+  } catch (error) {
+    logger.error('Compression failed:', error)
+    throw error
+  }
+}
+
+/**
+ * 解压缩 Buffer 到 JSON 字符串
+ * @param {Buffer} compressedBuffer - 压缩的 Buffer
+ * @returns {Promise<string>} 解压缩后的 JSON 字符串
+ */
+export async function decompress(compressedBuffer) {
+  try {
+    const buffer = await gunzipPromise(compressedBuffer)
+    return buffer.toString('utf-8')
+  } catch (error) {
+    logger.error('Decompression failed:', error)
+    throw error
+  }
+}

src/main/window.ts

@@ -1,11 +1,10 @@
 import { is } from '@electron-toolkit/utils'
-import { app, BrowserView, BrowserWindow, Menu, MenuItem, shell } from 'electron'
+import { BrowserWindow, Menu, MenuItem, shell } from 'electron'
 import windowStateKeeper from 'electron-window-state'
 import { join } from 'path'
 
 import icon from '../../build/icon.png?asset'
 import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
-import { objectToQueryParams } from './utils'
 
 export function createMainWindow() {
   // Load the previous state with fallback to defaults
@@ -35,7 +34,8 @@ export function createMainWindow() {
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
-      webSecurity: false
+      webSecurity: false,
+      webviewTag: true
       // devTools: !app.isPackaged,
     }
   })
@@ -66,6 +66,22 @@ export function createMainWindow() {
     return { action: 'deny' }
   })
 
+  mainWindow.webContents.session.webRequest.onHeadersReceived({ urls: ['*://*/*'] }, (details, callback) => {
+    if (details.responseHeaders?.['X-Frame-Options']) {
+      delete details.responseHeaders['X-Frame-Options']
+    }
+    if (details.responseHeaders?.['x-frame-options']) {
+      delete details.responseHeaders['x-frame-options']
+    }
+    if (details.responseHeaders?.['Content-Security-Policy']) {
+      delete details.responseHeaders['Content-Security-Policy']
+    }
+    if (details.responseHeaders?.['content-security-policy']) {
+      delete details.responseHeaders['content-security-policy']
+    }
+    callback({ cancel: false, responseHeaders: details.responseHeaders })
+  })
+
   // HMR for renderer base on electron-vite cli.
   // Load the remote URL for development or the local html file for production.
   if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
@@ -79,50 +95,31 @@ export function createMainWindow() {
 
 export function createMinappWindow({
   url,
+  parent,
   windowOptions
 }: {
   url: string
+  parent?: BrowserWindow
   windowOptions?: Electron.BrowserWindowConstructorOptions
 }) {
-  const width = 500
-  const height = 800
-  const headerHeight = 40
+  const width = windowOptions?.width || 1000
+  const height = windowOptions?.height || 680
 
   const minappWindow = new BrowserWindow({
     width,
     height,
     autoHideMenuBar: true,
-    alwaysOnTop: true,
-    titleBarOverlay: titleBarOverlayDark,
-    titleBarStyle: 'hidden',
+    title: 'Cherry Studio',
     ...windowOptions,
+    parent,
     webPreferences: {
       preload: join(__dirname, '../preload/minapp.js'),
-      sandbox: false
+      sandbox: false,
+      contextIsolation: false
     }
   })
 
-  const view = new BrowserView()
-  view.setBounds({ x: 0, y: headerHeight, width, height: height - headerHeight })
-  view.webContents.loadURL(url)
-
-  const minappWindowParams = {
-    title: windowOptions?.title || 'CherryStudio'
-  }
-
-  const appPath = app.getAppPath()
-  const minappHtmlPath = appPath + '/resources/minapp.html'
-
-  minappWindow.loadURL('file://' + minappHtmlPath + '?' + objectToQueryParams(minappWindowParams))
-  minappWindow.setBrowserView(view)
-  minappWindow.on('resize', () => {
-    view.setBounds({
-      x: 0,
-      y: headerHeight,
-      width: minappWindow.getBounds().width,
-      height: minappWindow.getBounds().height - headerHeight
-    })
-  })
+  minappWindow.loadURL(url)
 
   return minappWindow
 }

src/preload/index.d.ts

@@ -1,4 +1,5 @@
 import { ElectronAPI } from '@electron-toolkit/preload'
+import type { OpenDialogOptions } from 'electron'
 
 declare global {
   interface Window {
@@ -12,9 +13,13 @@ declare global {
       checkForUpdate: () => void
       openWebsite: (url: string) => void
       setProxy: (proxy: string | undefined) => void
-      saveFile: (path: string, content: string) => void
+      saveFile: (path: string, content: string | NodeJS.ArrayBufferView, options?: SaveDialogOptions) => void
+      openFile: (options?: OpenDialogOptions) => Promise<{ fileName: string; content: Buffer } | null>
       setTheme: (theme: 'light' | 'dark') => void
-      minApp: (url: string) => void
+      minApp: (options: { url: string; windowOptions?: Electron.BrowserWindowConstructorOptions }) => void
+      reload: () => void
+      compress: (text: string) => Promise<Buffer>
+      decompress: (text: Buffer) => Promise<string>
     }
   }
 }

src/preload/index.ts

@@ -7,9 +7,15 @@ const api = {
   checkForUpdate: () => ipcRenderer.invoke('check-for-update'),
   openWebsite: (url: string) => ipcRenderer.invoke('open-website', url),
   setProxy: (proxy: string) => ipcRenderer.invoke('set-proxy', proxy),
-  saveFile: (path: string, content: string) => ipcRenderer.invoke('save-file', path, content),
   setTheme: (theme: 'light' | 'dark') => ipcRenderer.invoke('set-theme', theme),
-  minApp: (url: string) => ipcRenderer.invoke('minapp', url)
+  minApp: (url: string) => ipcRenderer.invoke('minapp', url),
+  openFile: (options?: { decompress: boolean }) => ipcRenderer.invoke('open-file', options),
+  reload: () => ipcRenderer.invoke('reload'),
+  saveFile: (path: string, content: string, options?: { compress: boolean }) => {
+    ipcRenderer.invoke('save-file', path, content, options)
+  },
+  compress: (text: string) => ipcRenderer.invoke('zip:compress', text),
+  decompress: (text: Buffer) => ipcRenderer.invoke('zip:decompress', text)
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

src/preload/minapp.ts

@@ -1,14 +0,0 @@
-import { contextBridge } from 'electron'
-
-const api = {}
-
-if (process.contextIsolated) {
-  try {
-    contextBridge.exposeInMainWorld('api', api)
-  } catch (error) {
-    console.error(error)
-  }
-} else {
-  // @ts-ignore (define in dts)
-  window.api = api
-}

src/renderer/index.html

@@ -2,11 +2,10 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <title>Cherry Studio</title>
     <meta name="viewport" content="initial-scale=1, width=device-width" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data:; frame-src * file:" />
+      content="default-src 'self'; connect-src *; script-src 'self' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: *; frame-src * file:" />
   </head>
   <body>
     <div id="root"></div>

src/renderer/src/App.tsx

@@ -5,12 +5,13 @@ import { PersistGate } from 'redux-persist/integration/react'
 
 import Sidebar from './components/app/Sidebar'
 import TopViewContainer from './components/TopView'
+import AntdProvider from './context/AntdProvider'
+import { ThemeProvider } from './context/ThemeProvider'
 import AgentsPage from './pages/agents/AgentsPage'
+import AppsPage from './pages/apps/AppsPage'
 import HomePage from './pages/home/HomePage'
 import SettingsPage from './pages/settings/SettingsPage'
 import TranslatePage from './pages/translate/TranslatePage'
-import AntdProvider from './providers/AntdProvider'
-import { ThemeProvider } from './providers/ThemeProvider'
 
 function App(): JSX.Element {
   return (
@@ -23,8 +24,9 @@ function App(): JSX.Element {
                 <Sidebar />
                 <Routes>
                   <Route path="/" element={<HomePage />} />
-                  <Route path="/apps" element={<AgentsPage />} />
+                  <Route path="/agents" element={<AgentsPage />} />
                   <Route path="/translate" element={<TranslatePage />} />
+                  <Route path="/apps" element={<AppsPage />} />
                   <Route path="/settings/*" element={<SettingsPage />} />
                 </Routes>
               </HashRouter>

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

@@ -1,63 +1,88 @@
 @font-face {
-  font-family: "iconfont"; /* Project id 4563475 */
-  src: url('iconfont.woff2?t=1723186111414') format('woff2'),
-       url('iconfont.woff?t=1723186111414') format('woff'),
-       url('iconfont.ttf?t=1723186111414') format('truetype');
+  font-family: 'iconfont'; /* Project id 4563475 */
+  src: url('iconfont.woff2?t=1725606177995') format('woff2');
 }
 
 .iconfont {
-  font-family: "iconfont" !important;
+  font-family: 'iconfont' !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-a-darkmode:before {
+  content: '\e6cd';
+}
+
+.icon-ai-model:before {
+  content: '\e827';
+}
+
+.icon-ai-model1:before {
+  content: '\ec09';
+}
+
+.icon-gridlines:before {
+  content: '\e942';
+}
+
+.icon-grid-row-2copy:before {
+  content: '\e681';
+}
+
+.icon-inbox:before {
+  content: '\e869';
+}
+
+.icon-business-smart-assistant:before {
+  content: '\e601';
+}
+
 .icon-copy:before {
-  content: "\e6ae";
+  content: '\e6ae';
 }
 
 .icon-ic_send:before {
-  content: "\e795";
+  content: '\e795';
 }
 
 .icon-dark1:before {
-  content: "\e72f";
+  content: '\e72f';
 }
 
 .icon-theme-light:before {
-  content: "\e6b7";
+  content: '\e6b7';
 }
 
 .icon-translate_line:before {
-  content: "\e7de";
+  content: '\e7de';
 }
 
 .icon-history:before {
-  content: "\e758";
+  content: '\e758';
 }
 
-.icon-hidesidebarhoriz:before {
-  content: "\e8eb";
+.icon-hide-sidebar:before {
+  content: '\e8eb';
 }
 
-.icon-showsidebarhoriz:before {
-  content: "\e944";
+.icon-show-sidebar:before {
+  content: '\e944';
 }
 
 .icon-a-addchat:before {
-  content: "\e658";
+  content: '\e658';
 }
 
 .icon-appstore:before {
-  content: "\e792";
+  content: '\e792';
 }
 
 .icon-chat:before {
-  content: "\e615";
+  content: '\e615';
 }
 
 .icon-setting:before {
-  content: "\e78e";
+  content: '\e78e';
 }
-

src/renderer/src/assets/images/models/yi.svg

@@ -1,7 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="300" cy="300" r="300" fill="white"/>
-<rect x="409.733" y="340.032" width="42.3862" height="151.648" rx="21.1931" fill="#003425"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M422.005 133.354C413.089 125.771 399.714 126.851 392.131 135.768L273.699 275.021C270.643 278.614 268.994 282.932 268.698 287.302C268.532 288.371 268.446 289.466 268.446 290.581V468.603C268.446 480.308 277.934 489.796 289.639 489.796C301.344 489.796 310.832 480.308 310.832 468.603V296.784L424.419 163.228C432.002 154.312 430.921 140.937 422.005 133.354Z" fill="#003425"/>
-<rect x="113.972" y="134.25" width="42.3862" height="174.745" rx="21.1931" transform="rotate(-39.3441 113.972 134.25)" fill="#003425"/>
-<circle cx="460.126" cy="279.278" r="25.9027" fill="#00DD20"/>
-</svg>

src/renderer/src/assets/images/providers/yi.svg

@@ -1,7 +0,0 @@
-<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="300" cy="300" r="300" fill="#003425"/>
-<rect x="409.733" y="340.031" width="42.3862" height="151.648" rx="21.1931" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M422.005 133.354C413.089 125.771 399.714 126.851 392.131 135.767L273.699 275.021C270.643 278.614 268.994 282.932 268.698 287.302C268.532 288.371 268.446 289.466 268.446 290.581V468.603C268.446 480.308 277.934 489.796 289.639 489.796C301.344 489.796 310.832 480.308 310.832 468.603V296.784L424.419 163.228C432.002 154.312 430.921 140.937 422.005 133.354Z" fill="white"/>
-<rect x="113.972" y="134.25" width="42.3862" height="174.745" rx="21.1931" transform="rotate(-39.3441 113.972 134.25)" fill="white"/>
-<circle cx="460.126" cy="279.278" r="25.9027" fill="#00FF25"/>
-</svg>

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

@@ -1,7 +1,7 @@
 @import './markdown.scss';
 @import './scrollbar.scss';
 @import '../fonts/icon-fonts/iconfont.css';
-@import '../fonts/Ubuntu/Ubuntu.css';
+@import '../fonts/ubuntu/ubuntu.css';
 
 :root {
   --color-white: #ffffff;
@@ -36,20 +36,21 @@
   --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);
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.08);
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
 
   --navbar-background-mac: rgba(30, 30, 30, 0.8);
   --navbar-background: rgba(30, 30, 30);
   --input-bar-background: rgba(255, 255, 255, 0.02);
 
   --navbar-height: 42px;
-  --sidebar-width: 55px;
-  --assistants-width: 245px;
-  --topic-list-width: 260px;
-  --settings-width: var(--assistants-width);
+  --sidebar-width: 52px;
   --status-bar-height: 40px;
   --input-bar-height: 85px;
+
+  --assistants-width: 240px;
+  --topic-list-width: 270px;
+  --settings-width: var(--assistants-width);
 }
 
 body[theme-mode='light'] {
@@ -85,8 +86,8 @@ body[theme-mode='light'] {
   --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);
+  --color-scrollbar-thumb: rgba(0, 0, 0, 0.08);
+  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.15);
 
   --navbar-background-mac: rgba(255, 255, 255, 0.75);
   --navbar-background: rgba(255, 255, 255);
@@ -101,6 +102,14 @@ body[theme-mode='light'] {
   font-weight: normal;
 }
 
+*:focus {
+  outline: none;
+}
+
+* {
+  -webkit-tap-highlight-color: transparent;
+}
+
 ul {
   list-style: none;
 }
@@ -165,39 +174,37 @@ body,
   gap: 4px;
 }
 
-.dragable {
+.drag {
   -webkit-app-region: drag;
 }
 
-.dragdisable {
+.nodrag {
   -webkit-app-region: no-drag;
 }
 
 .minapp-drawer {
-  .ant-drawer-header-title {
-    flex-direction: row-reverse;
-  }
-  .ant-drawer-close {
-    position: absolute;
-    top: 6px;
-    right: 15px;
-    padding: 15px;
-    margin-right: -5px;
-    -webkit-app-region: no-drag;
-    z-index: 100000;
+  .ant-drawer-content-wrapper {
+    box-shadow: none;
   }
   .ant-drawer-header {
-    height: calc(var(--navbar-height) + 0.5px);
+    position: absolute;
+    -webkit-app-region: drag;
+    min-height: calc(var(--navbar-height) + 0.5px);
     background: var(--navbar-background);
     width: calc(100vw - var(--sidebar-width));
-    padding-right: 10px !important;
     border-bottom: 0.5px solid var(--color-border);
     margin-top: -0.5px;
   }
   .ant-drawer-body {
     padding: 0;
+    margin-top: var(--navbar-height);
+    overflow: hidden;
   }
   .minapp-mask {
     background-color: transparent !important;
   }
 }
+
+.ant-drawer-header {
+  -webkit-app-region: no-drag;
+}

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

@@ -72,6 +72,9 @@
 
   li {
     margin-bottom: 0.5em;
+    pre {
+      margin: 1.5em 0;
+    }
     &::marker {
       color: var(--color-text-3);
     }
@@ -98,7 +101,8 @@
     font-family: 'Courier New', Courier, monospace;
   }
 
-  p code {
+  p code,
+  li code {
     background: var(--color-background-mute);
     padding: 3px 5px;
     border-radius: 5px;
@@ -106,19 +110,25 @@
 
   pre {
     white-space: pre-wrap !important;
-    padding: 1em 0;
     border-radius: 5px;
     overflow-x: auto;
     font-family: 'Fira Code', 'Courier New', Courier, monospace;
+    background-color: var(--color-background-mute);
+    &:not(pre pre) {
+      > code:not(pre pre > code) {
+        padding: 15px;
+        display: block;
+      }
+    }
     pre {
       margin: 0 !important;
-    }
       code {
         background: none;
         padding: 0;
         border-radius: 0;
       }
     }
+  }
 
   blockquote {
     margin: 1em 0;

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

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

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

@@ -1,18 +1,27 @@
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  DropResult,
+  OnDragEndResponder,
+  OnDragStartResponder,
+  ResponderProvided
+} from '@hello-pangea/dnd'
 import { droppableReorder } from '@renderer/utils'
 import { FC } from 'react'
 
 interface Props<T> {
   list: T[]
+  style?: React.CSSProperties
   children: (item: T, index: number) => React.ReactNode
   onUpdate: (list: T[]) => void
-  onDragStart?: () => void
-  onDragEnd?: () => void
+  onDragStart?: OnDragStartResponder
+  onDragEnd?: OnDragEndResponder
 }
 
-const DragableList: FC<Props<any>> = ({ children, list, onDragStart, onUpdate, onDragEnd }) => {
-  const _onDragEnd = (result: DropResult) => {
-    onDragEnd?.()
+const DragableList: FC<Props<any>> = ({ children, list, style, onDragStart, onUpdate, onDragEnd }) => {
+  const _onDragEnd = (result: DropResult, provided: ResponderProvided) => {
+    onDragEnd?.(result, provided)
     if (result.destination) {
       const sourceIndex = result.source.index
       const destIndex = result.destination.index
@@ -33,7 +42,7 @@ const DragableList: FC<Props<any>> = ({ children, list, onDragStart, onUpdate, o
                     ref={provided.innerRef}
                     {...provided.draggableProps}
                     {...provided.dragHandleProps}
-                    style={{ ...provided.draggableProps.style, marginBottom: 8 }}>
+                    style={{ ...provided.draggableProps.style, marginBottom: 8, ...style }}>
                     {children(item, index)}
                   </div>
                 )}

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

@@ -1,4 +1,4 @@
-import { useTheme } from '@renderer/providers/ThemeProvider'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { FC, useEffect, useRef } from 'react'
 
 interface Props {

src/renderer/src/components/Icons/CopyIcon.tsx

@@ -0,0 +1,7 @@
+import { FC } from 'react'
+
+const CopyIcon: FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> = (props) => {
+  return <i {...props} className={`iconfont icon-copy ${props.className}`} />
+}
+
+export default CopyIcon

src/renderer/src/components/MinApp/index.tsx

@@ -1,29 +1,29 @@
+/* eslint-disable react/no-unknown-property */
 import { CloseOutlined, ExportOutlined, ReloadOutlined } from '@ant-design/icons'
+import { isMac, isWindows } from '@renderer/config/constant'
 import { useBridge } from '@renderer/hooks/useBridge'
 import store from '@renderer/store'
 import { setMinappShow } from '@renderer/store/runtime'
+import { MinAppType } from '@renderer/types'
 import { Drawer } from 'antd'
-import { useRef, useState } from 'react'
+import { WebviewTag } from 'electron'
+import { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import { TopView } from '../TopView'
 
-interface ShowParams {
-  title?: string
-  url: string
-}
-
-interface Props extends ShowParams {
+interface Props {
+  app: MinAppType
   resolve: (data: any) => void
 }
 
-const PopupContainer: React.FC<Props> = ({ title, url, resolve }) => {
+const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
   const [open, setOpen] = useState(true)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const webviewRef = useRef<WebviewTag | null>(null)
 
   useBridge()
 
-  const canOpenExternalLink = url.startsWith('http://') || url.startsWith('https://')
+  const canOpenExternalLink = app.url.startsWith('http://') || app.url.startsWith('https://')
 
   const onClose = () => {
     setOpen(false)
@@ -31,30 +31,20 @@ const PopupContainer: React.FC<Props> = ({ title, url, resolve }) => {
   }
 
   const onReload = () => {
-    if (iframeRef.current) {
-      iframeRef.current.src = url
+    if (webviewRef.current) {
+      webviewRef.current.src = app.url
     }
   }
 
   const onOpenLink = () => {
-    window.api.openWebsite(url)
+    window.api.openWebsite(app.url)
   }
 
+  const Title = () => {
     return (
-    <Drawer
-      title={title || <Title />}
-      placement="bottom"
-      onClose={onClose}
-      open={open}
-      mask={true}
-      rootClassName="minapp-drawer"
-      maskClassName="minapp-mask"
-      height={'100%'}
-      maskClosable={false}
-      closeIcon={null}
-      style={{ marginLeft: 'var(--sidebar-width)' }}>
-      <Frame src={url} ref={iframeRef} />
-      <ButtonsGroup>
+      <TitleContainer style={{ justifyContent: 'space-between' }}>
+        <TitleText>{app.name}</TitleText>
+        <ButtonsGroup className={isWindows ? 'windows' : ''}>
           <Button onClick={onReload}>
             <ReloadOutlined />
           </Button>
@@ -67,34 +57,93 @@ const PopupContainer: React.FC<Props> = ({ title, url, resolve }) => {
             <CloseOutlined />
           </Button>
         </ButtonsGroup>
+      </TitleContainer>
+    )
+  }
+
+  useEffect(() => {
+    const webview = webviewRef.current
+
+    if (webview) {
+      const handleNewWindow = (event: any) => {
+        event.preventDefault()
+        if (webview.loadURL) {
+          webview.loadURL(event.url)
+        }
+      }
+
+      webview.addEventListener('new-window', handleNewWindow)
+
+      return () => {
+        webview.removeEventListener('new-window', handleNewWindow)
+      }
+    }
+
+    return () => {}
+  }, [])
+
+  return (
+    <Drawer
+      title={<Title />}
+      placement="bottom"
+      onClose={onClose}
+      open={open}
+      mask={true}
+      rootClassName="minapp-drawer"
+      maskClassName="minapp-mask"
+      height={'100%'}
+      maskClosable={false}
+      closeIcon={null}
+      style={{ marginLeft: 'var(--sidebar-width)' }}>
+      <webview src={app.url} ref={webviewRef} style={WebviewStyle} allowpopups={'true' as any} />
     </Drawer>
   )
 }
 
-const Frame = styled.iframe`
-  width: calc(100vw - var(--sidebar-width));
-  height: calc(100vh - var(--navbar-height));
-  border: none;
+const WebviewStyle: React.CSSProperties = {
+  width: 'calc(100vw - var(--sidebar-width))',
+  height: 'calc(100vh - var(--navbar-height))',
+  backgroundColor: 'white',
+  display: 'inline-flex'
+}
+
+const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: ${isMac ? '20px' : '15px'};
+  padding-right: 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 `
 
-const Title = styled.div`
-  min-height: var(--navbar-height);
+const TitleText = styled.div`
+  font-weight: bold;
+  font-size: 14px;
+  color: var(--color-text-1);
+  margin-right: 10px;
+  user-select: none;
 `
 
 const ButtonsGroup = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: var(--navbar-height);
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 5px;
-  padding: 0 10px;
+  -webkit-app-region: no-drag;
+  &.windows {
+    margin-right: ${isWindows ? '130px' : 0};
+    background-color: var(--color-background-mute);
+    border-radius: 50px;
+    padding: 0 3px;
+    overflow: hidden;
+  }
 `
 
 const Button = styled.div`
-  -webkit-app-region: no-drag;
   cursor: pointer;
   width: 30px;
   height: 30px;
@@ -118,12 +167,12 @@ export default class MinApp {
     TopView.hide('MinApp')
     store.dispatch(setMinappShow(false))
   }
-  static start(props: ShowParams) {
+  static start(app: MinAppType) {
     store.dispatch(setMinappShow(true))
     return new Promise<any>((resolve) => {
       TopView.show(
         <PopupContainer
-          {...props}
+          app={app}
           resolve={(v) => {
             resolve(v)
             this.close()

src/renderer/src/components/Popups/AddAssistantPopup.tsx

@@ -25,24 +25,30 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     () => ({
       id: defaultAssistant.id,
       name: defaultAssistant.name,
-      emoji: '',
+      emoji: defaultAssistant.emoji || '',
       prompt: defaultAssistant.prompt,
       group: 'system'
     }),
-    [defaultAssistant.id, defaultAssistant.name, defaultAssistant.prompt]
+    [defaultAssistant.emoji, 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))
+    const allAgents = [...userAgents, ...systemAgents] as Agent[]
+    const list = [defaultAgent, ...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
+    if (agent.id !== 'default') {
+      if (assistants.map((a) => a.id).includes(String(agent.id))) {
+        return
+      }
+    }
+
     const assistant = covertAgentToAssistant(agent)
+
     addAssistant(assistant)
     resolve(assistant)
     setOpen(false)
@@ -64,8 +70,8 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       open={open}
       onCancel={onCancel}
       afterClose={onClose}
-      transitionName=""
-      maskTransitionName=""
+      transitionName="ant-move-down"
+      maskTransitionName="ant-fade"
       footer={null}>
       <Input
         placeholder={t('common.search')}

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

@@ -34,7 +34,14 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ assistant, resolve })
   }
 
   return (
-    <Modal title={assistant.name} open={open} onOk={onOk} onCancel={handleCancel} afterClose={onClose}>
+    <Modal
+      title={assistant.name}
+      open={open}
+      onOk={onOk}
+      onCancel={handleCancel}
+      afterClose={onClose}
+      transitionName="ant-move-down"
+      maskTransitionName="ant-fade">
       <Box mb={8}>{t('common.name')}</Box>
       <Input
         placeholder={t('common.assistant') + t('common.name')}
@@ -45,7 +52,7 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ assistant, resolve })
         {t('common.prompt')}
       </Box>
       <TextArea
-        rows={4}
+        rows={10}
         placeholder={t('common.assistant') + t('common.prompt')}
         value={prompt}
         onChange={(e) => setPrompt(e.target.value)}

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

@@ -1,15 +1,18 @@
 import { isMac } from '@renderer/config/constant'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { useRuntime } from '@renderer/hooks/useStore'
 import { FC, PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 type Props = PropsWithChildren & JSX.IntrinsicElements['div']
 
-const navbarBackgroundColor = isMac ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
-
 export const Navbar: FC<Props> = ({ children, ...props }) => {
   const { minappShow } = useRuntime()
-  const backgroundColor = minappShow ? 'var(--navbar-background)' : navbarBackgroundColor
+  const { windowStyle } = useSettings()
+
+  const macTransparentWindow = isMac && windowStyle === 'transparent'
+  const navbarBgColor = macTransparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
+  const backgroundColor = minappShow ? 'var(--navbar-background)' : navbarBgColor
 
   return (
     <NavbarContainer {...props} style={{ backgroundColor }}>
@@ -39,7 +42,6 @@ const NavbarContainer = styled.div`
   margin-left: ${isMac ? 'calc(var(--sidebar-width) * -1)' : 0};
   padding-left: ${isMac ? 'var(--sidebar-width)' : 0};
   border-bottom: 0.5px solid var(--color-border);
-  background-color: ${navbarBackgroundColor};
   transition: background-color 0.3s ease;
   -webkit-app-region: drag;
 `

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

@@ -1,52 +1,75 @@
 import { TranslationOutlined } from '@ant-design/icons'
-import Logo from '@renderer/assets/images/logo.png'
 import { isMac } from '@renderer/config/constant'
+import { isLocalAi, UserAvatar } from '@renderer/config/env'
 import useAvatar from '@renderer/hooks/useAvatar'
-import { useRuntime } from '@renderer/hooks/useStore'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useRuntime, useShowAssistants } from '@renderer/hooks/useStore'
 import { Avatar } from 'antd'
 import { FC } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
 import UserPopup from '../Popups/UserPopup'
 
-const sidebarBackgroundColor = isMac ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
-
 const Sidebar: FC = () => {
   const { pathname } = useLocation()
   const avatar = useAvatar()
   const { minappShow } = useRuntime()
+  const { toggleShowAssistants } = useShowAssistants()
+  const { generating } = useRuntime()
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const { windowStyle } = useSettings()
 
   const isRoute = (path: string): string => (pathname === path ? 'active' : '')
 
-  const onEditUser = () => {
-    UserPopup.show()
+  const onEditUser = () => UserPopup.show()
+
+  const macTransparentWindow = isMac && windowStyle === 'transparent'
+  const sidebarBgColor = macTransparentWindow ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
+
+  const to = (path: string) => {
+    if (generating) {
+      window.message.warning({ content: t('message.switch.disabled'), key: 'switch-assistant' })
+      return
+    }
+    navigate(path)
+  }
+
+  const onToggleShowAssistants = () => {
+    pathname === '/' ? toggleShowAssistants() : navigate('/')
   }
 
   return (
-    <Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBackgroundColor }}>
-      <AvatarImg src={avatar || Logo} draggable={false} className="dragdisable" onClick={onEditUser} />
+    <Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBgColor }}>
+      <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
       <MainMenus>
         <Menus>
-          <StyledLink to="/">
+          <StyledLink onClick={onToggleShowAssistants}>
             <Icon className={isRoute('/')}>
               <i className="iconfont icon-chat"></i>
             </Icon>
           </StyledLink>
-          <StyledLink to="/apps">
-            <Icon className={isRoute('/apps')}>
-              <i className="iconfont icon-appstore"></i>
+          <StyledLink onClick={() => to('/agents')}>
+            <Icon className={isRoute('/agents')}>
+              <i className="iconfont icon-business-smart-assistant"></i>
             </Icon>
           </StyledLink>
-          <StyledLink to="/translate">
+          <StyledLink onClick={() => to('/translate')}>
             <Icon className={isRoute('/translate')}>
               <TranslationOutlined />
             </Icon>
           </StyledLink>
+          <StyledLink onClick={() => to('/apps')}>
+            <Icon className={isRoute('/apps')}>
+              <i className="iconfont icon-appstore"></i>
+            </Icon>
+          </StyledLink>
         </Menus>
       </MainMenus>
       <Menus>
-        <StyledLink to="/settings/provider">
+        <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
           <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
             <i className="iconfont icon-setting"></i>
           </Icon>
@@ -62,11 +85,11 @@ const Container = styled.div`
   align-items: center;
   padding: 8px 0;
   width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
   height: ${isMac ? 'calc(100vh - var(--navbar-height))' : '100vh'};
   -webkit-app-region: drag !important;
   border-right: 0.5px solid var(--color-border);
   margin-top: ${isMac ? 'var(--navbar-height)' : 0};
-  background-color: ${sidebarBackgroundColor};
   transition: background-color 0.3s ease;
 `
 
@@ -127,7 +150,7 @@ const Icon = styled.div`
   }
 `
 
-const StyledLink = styled(Link)`
+const StyledLink = styled.div`
   text-decoration: none;
   -webkit-app-region: none;
   &* {

src/renderer/src/config/constant.ts

@@ -1,5 +1,5 @@
 export const DEFAULT_TEMPERATURE = 0.7
-export const DEFAULT_CONEXTCOUNT = 5
+export const DEFAULT_CONEXTCOUNT = 6
 export const DEFAULT_MAX_TOKENS = 4096
 export const FONT_FAMILY =
   "Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"

src/renderer/src/config/env.ts

@@ -0,0 +1,6 @@
+export { default as UserAvatar } from '@renderer/assets/images/avatar.png'
+export { default as AppLogo } from '@renderer/assets/images/logo.png'
+
+export const APP_NAME = 'Cherry Studio'
+
+export const isLocalAi = false

src/renderer/src/config/minapp.ts

@@ -0,0 +1,79 @@
+import AiAssistantAppLogo from '@renderer/assets/images/apps/360-ai.png'
+import AiSearchAppLogo from '@renderer/assets/images/apps/ai-search.png'
+import BaiduAiAppLogo from '@renderer/assets/images/apps/baidu-ai.png'
+import DevvAppLogo from '@renderer/assets/images/apps/devv.png'
+import MetasoAppLogo from '@renderer/assets/images/apps/metaso.webp'
+import PerplexityAppLogo from '@renderer/assets/images/apps/perplexity.webp'
+import SensetimeAppLogo from '@renderer/assets/images/apps/sensetime.png'
+import SparkDeskAppLogo from '@renderer/assets/images/apps/sparkdesk.png'
+import TiangongAiLogo from '@renderer/assets/images/apps/tiangong.png'
+import TencentYuanbaoAppLogo from '@renderer/assets/images/apps/yuanbao.png'
+import MinApp from '@renderer/components/MinApp'
+import { PROVIDER_CONFIG } from '@renderer/config/provider'
+import { MinAppType } from '@renderer/types'
+
+const _apps: MinAppType[] = [
+  {
+    name: 'AI 助手',
+    logo: AiAssistantAppLogo,
+    url: 'https://bot.360.com/'
+  },
+  {
+    name: '文心一言',
+    logo: BaiduAiAppLogo,
+    url: 'https://yiyan.baidu.com/'
+  },
+  {
+    name: 'SparkDesk',
+    logo: SparkDeskAppLogo,
+    url: 'https://xinghuo.xfyun.cn/desk'
+  },
+  {
+    name: '腾讯元宝',
+    logo: TencentYuanbaoAppLogo,
+    url: 'https://yuanbao.tencent.com/chat'
+  },
+  {
+    name: '商量',
+    logo: SensetimeAppLogo,
+    url: 'https://chat.sensetime.com/wb/chat'
+  },
+  {
+    name: '360AI搜索',
+    logo: AiSearchAppLogo,
+    url: 'https://so.360.com/'
+  },
+  {
+    name: '秘塔AI搜索',
+    logo: MetasoAppLogo,
+    url: 'https://metaso.cn/'
+  },
+  {
+    name: '天工AI',
+    logo: TiangongAiLogo,
+    url: 'https://www.tiangong.cn/'
+  },
+  {
+    name: 'DEVV_',
+    logo: DevvAppLogo,
+    url: 'https://devv.ai/'
+  },
+  {
+    name: 'perplexity',
+    logo: PerplexityAppLogo,
+    url: 'https://www.perplexity.ai/'
+  }
+]
+
+export function getAllMinApps() {
+  const list: MinAppType[] = (Object.entries(PROVIDER_CONFIG) as any[])
+    .filter(([, config]) => config.app)
+    .map(([key, config]) => ({ id: key, ...config.app }))
+    .concat(_apps)
+  return list
+}
+
+export function startMinAppById(id: string) {
+  const app = getAllMinApps().find((app) => app?.id === id)
+  app && MinApp.start(app)
+}

src/renderer/src/config/models.ts

@@ -1,36 +1,66 @@
 import { Model } from '@renderer/types'
 
-type SystemModel = Model & { enabled: boolean }
+const TEXT_TO_IMAGE_REGEX = /flux|diffusion|stabilityai|sd-turbo|dall|cogview/i
+const EMBEDDING_REGEX = /embedding/i
 
-export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
+export const SYSTEM_MODELS: Record<string, Model[]> = {
+  ollama: [],
+  silicon: [
+    {
+      id: 'Qwen/Qwen2-7B-Instruct',
+      provider: 'silicon',
+      name: 'Qwen2-7B-Instruct',
+      group: 'Qwen2'
+    },
+    {
+      id: 'Qwen/Qwen2-72B-Instruct',
+      provider: 'silicon',
+      name: 'Qwen2-72B-Instruct',
+      group: 'Qwen2'
+    },
+    {
+      id: 'THUDM/glm-4-9b-chat',
+      provider: 'silicon',
+      name: 'GLM-4-9B-Chat',
+      group: 'GLM'
+    },
+    {
+      id: 'deepseek-ai/DeepSeek-V2-Chat',
+      provider: 'silicon',
+      name: 'DeepSeek-V2-Chat',
+      group: 'DeepSeek'
+    },
+    {
+      id: 'deepseek-ai/DeepSeek-Coder-V2-Instruct',
+      provider: 'silicon',
+      name: 'DeepSeek-Coder-V2-Instruct',
+      group: 'DeepSeek'
+    }
+  ],
   openai: [
     {
       id: 'gpt-4o',
       provider: 'openai',
       name: ' GPT-4o',
-      group: 'GPT 4o',
-      enabled: true
+      group: 'GPT 4o'
     },
     {
       id: 'gpt-4o-mini',
       provider: 'openai',
       name: ' GPT-4o-mini',
-      group: 'GPT 4o',
-      enabled: true
+      group: 'GPT 4o'
     },
     {
       id: 'gpt-4-turbo',
       provider: 'openai',
       name: ' GPT-4 Turbo',
-      group: 'GPT 4',
-      enabled: true
+      group: 'GPT 4'
     },
     {
       id: 'gpt-4',
       provider: 'openai',
       name: ' GPT-4',
-      group: 'GPT 4',
-      enabled: true
+      group: 'GPT 4'
     }
   ],
   gemini: [
@@ -38,129 +68,39 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'gemini-1.5-flash',
       provider: 'gemini',
       name: 'Gemini 1.5 Flash',
-      group: 'Gemini 1.5',
-      enabled: true
+      group: 'Gemini 1.5'
     },
     {
       id: 'gemini-1.5-pro-exp-0801',
       provider: 'gemini',
       name: 'Gemini 1.5 Pro Experimental 0801',
-      group: 'Gemini 1.5',
-      enabled: true
+      group: 'Gemini 1.5'
     }
   ],
-  silicon: [
+  anthropic: [
     {
-      id: 'Qwen/Qwen2-7B-Instruct',
-      provider: 'silicon',
-      name: 'Qwen2-7B-Instruct',
-      group: 'Qwen2',
-      enabled: true
+      id: 'claude-3-5-sonnet-20240620',
+      provider: 'anthropic',
+      name: 'Claude 3.5 Sonnet',
+      group: 'Claude 3.5'
     },
     {
-      id: 'Qwen/Qwen2-1.5B-Instruct',
-      provider: 'silicon',
-      name: 'Qwen2-1.5B-Instruct',
-      group: 'Qwen2',
-      enabled: false
+      id: 'claude-3-opus-20240229',
+      provider: 'anthropic',
+      name: 'Claude 3 Opus',
+      group: 'Claude 3'
     },
     {
-      id: 'Qwen/Qwen1.5-7B-Chat',
-      provider: 'silicon',
-      name: 'Qwen1.5-7B-Chat',
-      group: 'Qwen1.5',
-      enabled: false
+      id: 'claude-3-sonnet-20240229',
+      provider: 'anthropic',
+      name: 'Claude 3 Sonnet',
+      group: 'Claude 3'
     },
     {
-      id: 'Qwen/Qwen2-72B-Instruct',
-      provider: 'silicon',
-      name: 'Qwen2-72B-Instruct',
-      group: 'Qwen2',
-      enabled: true
-    },
-    {
-      id: 'Qwen/Qwen2-57B-A14B-Instruct',
-      provider: 'silicon',
-      name: 'Qwen2-57B-A14B-Instruct',
-      group: 'Qwen2',
-      enabled: false
-    },
-    {
-      id: 'Qwen/Qwen1.5-110B-Chat',
-      provider: 'silicon',
-      name: 'Qwen1.5-110B-Chat',
-      group: 'Qwen1.5',
-      enabled: false
-    },
-    {
-      id: 'Qwen/Qwen1.5-32B-Chat',
-      provider: 'silicon',
-      name: 'Qwen1.5-32B-Chat',
-      group: 'Qwen1.5',
-      enabled: false
-    },
-    {
-      id: 'Qwen/Qwen1.5-14B-Chat',
-      provider: 'silicon',
-      name: 'Qwen1.5-14B-Chat',
-      group: 'Qwen1.5',
-      enabled: false
-    },
-    {
-      id: 'deepseek-ai/DeepSeek-V2-Chat',
-      provider: 'silicon',
-      name: 'DeepSeek-V2-Chat',
-      group: 'DeepSeek',
-      enabled: false
-    },
-    {
-      id: 'deepseek-ai/DeepSeek-Coder-V2-Instruct',
-      provider: 'silicon',
-      name: 'DeepSeek-Coder-V2-Instruct',
-      group: 'DeepSeek',
-      enabled: false
-    },
-    {
-      id: 'deepseek-ai/deepseek-llm-67b-chat',
-      provider: 'silicon',
-      name: 'Deepseek-LLM-67B-Chat',
-      group: 'DeepSeek',
-      enabled: false
-    },
-    {
-      id: 'THUDM/glm-4-9b-chat',
-      provider: 'silicon',
-      name: 'GLM-4-9B-Chat',
-      group: 'GLM',
-      enabled: true
-    },
-    {
-      id: 'THUDM/chatglm3-6b',
-      provider: 'silicon',
-      name: 'GhatGLM3-6B',
-      group: 'GLM',
-      enabled: false
-    },
-    {
-      id: '01-ai/Yi-1.5-9B-Chat-16K',
-      provider: 'silicon',
-      name: 'Yi-1.5-9B-Chat-16K',
-      group: 'Yi',
-      enabled: false
-    },
-    {
-      id: '01-ai/Yi-1.5-6B-Chat',
-      provider: 'silicon',
-      name: 'Yi-1.5-6B-Chat',
-      group: 'Yi',
-      enabled: false
-    },
-    {
-      id: '01-ai/Yi-1.5-34B-Chat-16K',
-      provider: 'silicon',
-      name: 'Yi-1.5-34B-Chat-16K',
-      group: 'Yi',
-      enabled: false
+      id: 'claude-3-haiku-20240307',
+      provider: 'anthropic',
+      name: 'Claude 3 Haiku',
+      group: 'Claude 3'
     }
   ],
   deepseek: [
@@ -168,15 +108,13 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'deepseek-chat',
       provider: 'deepseek',
       name: 'DeepSeek Chat',
-      group: 'DeepSeek Chat',
-      enabled: true
+      group: 'DeepSeek Chat'
     },
     {
       id: 'deepseek-coder',
       provider: 'deepseek',
       name: 'DeepSeek Coder',
-      group: 'DeepSeek Coder',
-      enabled: true
+      group: 'DeepSeek Coder'
     }
   ],
   yi: [
@@ -184,87 +122,87 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'yi-large',
       provider: 'yi',
       name: 'Yi-Large',
-      group: 'Yi',
-      enabled: false
+      group: 'Yi'
     },
     {
       id: 'yi-large-turbo',
       provider: 'yi',
       name: 'Yi-Large-Turbo',
-      group: 'Yi',
-      enabled: true
+      group: 'Yi'
     },
     {
       id: 'yi-large-rag',
       provider: 'yi',
       name: 'Yi-Large-Rag',
-      group: 'Yi',
-      enabled: false
+      group: 'Yi'
     },
     {
       id: 'yi-medium',
       provider: 'yi',
       name: 'Yi-Medium',
-      group: 'Yi',
-      enabled: true
+      group: 'Yi'
     },
     {
       id: 'yi-medium-200k',
       provider: 'yi',
       name: 'Yi-Medium-200k',
-      group: 'Yi',
-      enabled: false
+      group: 'Yi'
     },
     {
       id: 'yi-spark',
       provider: 'yi',
       name: 'Yi-Spark',
-      group: 'Yi',
-      enabled: false
+      group: 'Yi'
     }
   ],
   zhipu: [
-    {
-      id: 'glm-4-0520',
-      provider: 'zhipu',
-      name: 'GLM-4-0520',
-      group: 'GLM',
-      enabled: true
-    },
     {
       id: 'glm-4',
       provider: 'zhipu',
       name: 'GLM-4',
-      group: 'GLM',
-      enabled: false
+      group: 'GLM-4'
     },
     {
-      id: 'glm-4-airx',
+      id: 'glm-4-plus',
       provider: 'zhipu',
-      name: 'GLM-4-AirX',
-      group: 'GLM',
-      enabled: false
+      name: 'GLM-4-Plus',
+      group: 'GLM-4'
     },
     {
       id: 'glm-4-air',
       provider: 'zhipu',
       name: 'GLM-4-Air',
-      group: 'GLM',
-      enabled: true
+      group: 'GLM-4'
+    },
+    {
+      id: 'glm-4-airx',
+      provider: 'zhipu',
+      name: 'GLM-4-AirX',
+      group: 'GLM-4'
+    },
+    {
+      id: 'glm-4-flash',
+      provider: 'zhipu',
+      name: 'GLM-4-Flash',
+      group: 'GLM-4'
     },
     {
       id: 'glm-4v',
       provider: 'zhipu',
-      name: 'GLM-4V',
-      group: 'GLM',
-      enabled: false
+      name: 'GLM 4V',
+      group: 'GLM-4v'
+    },
+    {
+      id: 'glm-4v-plus',
+      provider: 'zhipu',
+      name: 'GLM-4V-Plus',
+      group: 'GLM-4v'
     },
     {
       id: 'glm-4-alltools',
       provider: 'zhipu',
       name: 'GLM-4-AllTools',
-      group: 'GLM',
-      enabled: false
+      group: 'GLM-4-AllTools'
     }
   ],
   moonshot: [
@@ -272,22 +210,19 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'moonshot-v1-8k',
       provider: 'moonshot',
       name: 'Moonshot V1 8k',
-      group: 'Moonshot V1',
-      enabled: true
+      group: 'Moonshot V1'
     },
     {
       id: 'moonshot-v1-32k',
       provider: 'moonshot',
       name: 'Moonshot V1 32k',
-      group: 'Moonshot V1',
-      enabled: true
+      group: 'Moonshot V1'
     },
     {
       id: 'moonshot-v1-128k',
       provider: 'moonshot',
       name: 'Moonshot V1 128k',
-      group: 'Moonshot V1',
-      enabled: true
+      group: 'Moonshot V1'
     }
   ],
   baichuan: [
@@ -295,22 +230,19 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'Baichuan4',
       provider: 'baichuan',
       name: 'Baichuan4',
-      group: 'Baichuan4',
-      enabled: true
+      group: 'Baichuan4'
     },
     {
       id: 'Baichuan3-Turbo',
       provider: 'baichuan',
       name: 'Baichuan3 Turbo',
-      group: 'Baichuan3',
-      enabled: true
+      group: 'Baichuan3'
     },
     {
       id: 'Baichuan3-Turbo-128k',
       provider: 'baichuan',
       name: 'Baichuan3 Turbo 128k',
-      group: 'Baichuan3',
-      enabled: true
+      group: 'Baichuan3'
     }
   ],
   dashscope: [
@@ -318,22 +250,19 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'qwen-turbo',
       provider: 'dashscope',
       name: 'Qwen Turbo',
-      group: 'Qwen',
-      enabled: true
+      group: 'Qwen'
     },
     {
       id: 'qwen-plus',
       provider: 'dashscope',
       name: 'Qwen Plus',
-      group: 'Qwen',
-      enabled: true
+      group: 'Qwen'
     },
     {
       id: 'qwen-max',
       provider: 'dashscope',
       name: 'Qwen Max',
-      group: 'Qwen',
-      enabled: true
+      group: 'Qwen'
     }
   ],
   stepfun: [
@@ -341,15 +270,13 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'step-1-8k',
       provider: 'stepfun',
       name: 'Step 1 8K',
-      group: 'Step 1',
-      enabled: true
+      group: 'Step 1'
     },
     {
       id: 'step-1-flash',
       provider: 'stepfun',
       name: 'Step 1 Flash',
-      group: 'Step 1',
-      enabled: true
+      group: 'Step 1'
     }
   ],
   doubao: [],
@@ -358,29 +285,25 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'abab6.5s-chat',
       provider: 'minimax',
       name: 'abab6.5s',
-      group: 'abab6',
-      enabled: true
+      group: 'abab6'
     },
     {
       id: 'abab6.5g-chat',
       provider: 'minimax',
       name: 'abab6.5g',
-      group: 'abab6',
-      enabled: true
+      group: 'abab6'
     },
     {
       id: 'abab6.5t-chat',
       provider: 'minimax',
       name: 'abab6.5t',
-      group: 'abab6',
-      enabled: true
+      group: 'abab6'
     },
     {
       id: 'abab5.5s-chat',
       provider: 'minimax',
       name: 'abab5.5s',
-      group: 'abab5',
-      enabled: true
+      group: 'abab5'
     }
   ],
   aihubmix: [
@@ -388,15 +311,13 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'gpt-4o-mini',
       provider: 'aihubmix',
       name: 'GPT-4o Mini',
-      group: 'GPT-4o',
-      enabled: true
+      group: 'GPT-4o'
     },
     {
       id: 'aihubmix-Llama-3-70B-Instruct',
       provider: 'aihubmix',
       name: 'Llama 3 70B Instruct',
-      group: 'Llama3',
-      enabled: true
+      group: 'Llama3'
     }
   ],
   openrouter: [
@@ -404,36 +325,31 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'google/gemma-2-9b-it:free',
       provider: 'openrouter',
       name: 'Google: Gemma 2 9B',
-      group: 'Gemma',
-      enabled: true
+      group: 'Gemma'
     },
     {
       id: 'microsoft/phi-3-mini-128k-instruct:free',
       provider: 'openrouter',
       name: 'Phi-3 Mini 128K Instruct',
-      group: 'Phi',
-      enabled: true
+      group: 'Phi'
     },
     {
       id: 'microsoft/phi-3-medium-128k-instruct:free',
       provider: 'openrouter',
       name: 'Phi-3 Medium 128K Instruct',
-      group: 'Phi',
-      enabled: true
+      group: 'Phi'
     },
     {
       id: 'meta-llama/llama-3-8b-instruct:free',
       provider: 'openrouter',
       name: 'Meta: Llama 3 8B Instruct',
-      group: 'Llama3',
-      enabled: true
+      group: 'Llama3'
     },
     {
       id: 'mistralai/mistral-7b-instruct:free',
       provider: 'openrouter',
       name: 'Mistral: Mistral 7B Instruct',
-      group: 'Mistral',
-      enabled: true
+      group: 'Mistral'
     }
   ],
   groq: [
@@ -441,59 +357,33 @@ export const SYSTEM_MODELS: Record<string, SystemModel[]> = {
       id: 'llama3-8b-8192',
       provider: 'groq',
       name: 'LLaMA3 8B',
-      group: 'Llama3',
-      enabled: false
+      group: 'Llama3'
     },
     {
       id: 'llama3-70b-8192',
       provider: 'groq',
       name: 'LLaMA3 70B',
-      group: 'Llama3',
-      enabled: true
+      group: 'Llama3'
     },
     {
       id: 'mixtral-8x7b-32768',
       provider: 'groq',
       name: 'Mixtral 8x7B',
-      group: 'Mixtral',
-      enabled: false
+      group: 'Mixtral'
     },
     {
       id: 'gemma-7b-it',
       provider: 'groq',
       name: 'Gemma 7B',
-      group: 'Gemma',
-      enabled: false
-    }
-  ],
-  anthropic: [
-    {
-      id: 'claude-3-5-sonnet-20240620',
-      provider: 'anthropic',
-      name: 'Claude 3.5 Sonnet',
-      group: 'Claude 3.5',
-      enabled: true
-    },
-    {
-      id: 'claude-3-opus-20240229',
-      provider: 'anthropic',
-      name: 'Claude 3 Opus',
-      group: 'Claude 3',
-      enabled: true
-    },
-    {
-      id: 'claude-3-sonnet-20240229',
-      provider: 'anthropic',
-      name: 'Claude 3 Sonnet',
-      group: 'Claude 3',
-      enabled: true
-    },
-    {
-      id: 'claude-3-haiku-20240307',
-      provider: 'anthropic',
-      name: 'Claude 3 Haiku',
-      group: 'Claude 3',
-      enabled: true
+      group: 'Gemma'
     }
   ]
 }
+
+export function isTextToImageModel(model: Model): boolean {
+  return TEXT_TO_IMAGE_REGEX.test(model.id)
+}
+
+export function isEmbeddingModel(model: Model): boolean {
+  return EMBEDDING_REGEX.test(model.id)
+}

src/renderer/src/config/provider.ts

@@ -1,5 +1,8 @@
+import BaicuanAppLogo from '@renderer/assets/images/apps/baixiaoying.webp'
+import KimiAppLogo from '@renderer/assets/images/apps/kimi.jpg'
+import YuewenAppLogo from '@renderer/assets/images/apps/yuewen.png'
 import BaichuanModelLogo from '@renderer/assets/images/models/baichuan.png'
-import ChatGLMModelLogo from '@renderer/assets/images/models/chatglm.jpeg'
+import ChatGLMModelLogo from '@renderer/assets/images/models/chatglm.png'
 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'
@@ -14,7 +17,7 @@ import MixtralModelLogo from '@renderer/assets/images/models/mixtral.jpeg'
 import PalmModelLogo from '@renderer/assets/images/models/palm.svg'
 import QwenModelLogo from '@renderer/assets/images/models/qwen.png'
 import StepModelLogo from '@renderer/assets/images/models/step.jpg'
-import YiModelLogo from '@renderer/assets/images/models/yi.svg'
+import YiModelLogo from '@renderer/assets/images/models/yi.png'
 import AiHubMixProviderLogo from '@renderer/assets/images/providers/aihubmix.jpg'
 import AnthropicProviderLogo from '@renderer/assets/images/providers/anthropic.jpeg'
 import BaichuanProviderLogo from '@renderer/assets/images/providers/baichuan.png'
@@ -25,14 +28,14 @@ import GeminiProviderLogo from '@renderer/assets/images/providers/gemini.png'
 import GraphRagProviderLogo from '@renderer/assets/images/providers/graph-rag.png'
 import GroqProviderLogo from '@renderer/assets/images/providers/groq.png'
 import MinimaxProviderLogo from '@renderer/assets/images/providers/minimax.png'
-import MoonshotProviderLogo from '@renderer/assets/images/providers/moonshot.jpeg'
-import MoonshotModelLogo from '@renderer/assets/images/providers/moonshot.jpeg'
+import MoonshotProviderLogo from '@renderer/assets/images/providers/moonshot.jpg'
+import MoonshotModelLogo from '@renderer/assets/images/providers/moonshot.jpg'
 import OllamaProviderLogo from '@renderer/assets/images/providers/ollama.png'
 import OpenAiProviderLogo from '@renderer/assets/images/providers/openai.png'
 import OpenRouterProviderLogo from '@renderer/assets/images/providers/openrouter.png'
 import SiliconFlowProviderLogo from '@renderer/assets/images/providers/silicon.png'
 import StepFunProviderLogo from '@renderer/assets/images/providers/stepfun.png'
-import YiProviderLogo from '@renderer/assets/images/providers/yi.svg'
+import YiProviderLogo from '@renderer/assets/images/providers/yi.png'
 import ZhipuProviderLogo from '@renderer/assets/images/providers/zhipu.png'
 
 export function getProviderLogo(providerId: string) {
@@ -126,6 +129,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://platform.openai.com/api-keys',
       docs: 'https://platform.openai.com/docs',
       models: 'https://platform.openai.com/docs/models'
+    },
+    app: {
+      name: 'ChatGPT',
+      url: 'https://chatgpt.com/',
+      logo: OpenAiProviderLogo
     }
   },
   gemini: {
@@ -138,6 +146,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://aistudio.google.com/app/apikey',
       docs: 'https://ai.google.dev/gemini-api/docs',
       models: 'https://ai.google.dev/gemini-api/docs/models/gemini'
+    },
+    app: {
+      name: 'Gemini',
+      url: 'https://gemini.google.com/',
+      logo: GeminiProviderLogo
     }
   },
   silicon: {
@@ -150,6 +163,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://cloud.siliconflow.cn/account/ak?referrer=clxty1xuy0014lvqwh5z50i88',
       docs: 'https://docs.siliconflow.cn/',
       models: 'https://docs.siliconflow.cn/docs/model-names'
+    },
+    app: {
+      name: 'SiliconFlow',
+      url: 'https://cloud.siliconflow.cn/playground/chat',
+      logo: SiliconFlowProviderLogo
     }
   },
   deepseek: {
@@ -162,6 +180,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://platform.deepseek.com/api_keys',
       docs: 'https://platform.deepseek.com/api-docs/',
       models: 'https://platform.deepseek.com/api-docs/'
+    },
+    app: {
+      name: 'DeepSeek',
+      url: 'https://chat.deepseek.com/',
+      logo: DeepSeekProviderLogo
     }
   },
   yi: {
@@ -174,6 +197,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://platform.lingyiwanwu.com/apikeys',
       docs: 'https://platform.lingyiwanwu.com/docs',
       models: 'https://platform.lingyiwanwu.com/docs#%E6%A8%A1%E5%9E%8B'
+    },
+    app: {
+      name: 'Yi',
+      url: 'https://www.wanzhi.com/',
+      logo: YiProviderLogo
     }
   },
   zhipu: {
@@ -186,6 +214,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://open.bigmodel.cn/usercenter/apikeys',
       docs: 'https://open.bigmodel.cn/dev/howuse/introduction',
       models: 'https://open.bigmodel.cn/modelcenter/square'
+    },
+    app: {
+      name: '智谱',
+      url: 'https://chatglm.cn/main/alltoolsdetail',
+      logo: ZhipuProviderLogo
     }
   },
   moonshot: {
@@ -198,6 +231,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://platform.moonshot.cn/console/api-keys',
       docs: 'https://platform.moonshot.cn/docs/',
       models: 'https://platform.moonshot.cn/docs/intro#%E6%A8%A1%E5%9E%8B%E5%88%97%E8%A1%A8'
+    },
+    app: {
+      name: 'Kimi',
+      url: 'https://kimi.moonshot.cn/',
+      logo: KimiAppLogo
     }
   },
   baichuan: {
@@ -210,6 +248,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://platform.baichuan-ai.com/console/apikey',
       docs: 'https://platform.baichuan-ai.com/docs',
       models: 'https://platform.baichuan-ai.com/price'
+    },
+    app: {
+      name: '百小应',
+      url: 'https://ying.baichuan-ai.com/chat',
+      logo: BaicuanAppLogo
     }
   },
   dashscope: {
@@ -222,6 +265,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://help.aliyun.com/zh/dashscope/developer-reference/acquisition-and-configuration-of-api-key',
       docs: 'https://help.aliyun.com/zh/dashscope/',
       models: 'https://dashscope.console.aliyun.com/model'
+    },
+    app: {
+      name: '通义千问',
+      url: 'https://tongyi.aliyun.com/qianwen/',
+      logo: QwenModelLogo
     }
   },
   stepfun: {
@@ -234,6 +282,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://platform.stepfun.com/interface-key',
       docs: 'https://platform.stepfun.com/docs/overview/concept',
       models: 'https://platform.stepfun.com/docs/llm/text'
+    },
+    app: {
+      name: '跃问',
+      url: 'https://yuewen.cn/chats/new',
+      logo: YuewenAppLogo
     }
   },
   doubao: {
@@ -246,6 +299,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey',
       docs: 'https://www.volcengine.com/docs/82379/1182403',
       models: 'https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint'
+    },
+    app: {
+      name: '豆包',
+      url: 'https://www.doubao.com/chat/',
+      logo: DoubaoProviderLogo
     }
   },
   minimax: {
@@ -258,6 +316,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://platform.minimaxi.com/user-center/basic-information/interface-key',
       docs: 'https://platform.minimaxi.com/document/Announcement',
       models: 'https://platform.minimaxi.com/document/Models'
+    },
+    app: {
+      name: '海螺',
+      url: 'https://hailuoai.com/',
+      logo: HailuoModelLogo
     }
   },
   'graphrag-kylin-mountain': {
@@ -288,6 +351,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://console.groq.com/keys',
       docs: 'https://console.groq.com/docs/quickstart',
       models: 'https://console.groq.com/docs/models'
+    },
+    app: {
+      name: 'Groq',
+      url: 'https://chat.groq.com/',
+      logo: GroqProviderLogo
     }
   },
   ollama: {
@@ -311,6 +379,11 @@ export const PROVIDER_CONFIG = {
       apiKey: 'https://console.anthropic.com/settings/keys',
       docs: 'https://docs.anthropic.com/en/docs',
       models: 'https://docs.anthropic.com/en/docs/about-claude/models'
+    },
+    app: {
+      name: 'Claude',
+      url: 'https://claude.ai/',
+      logo: AnthropicProviderLogo
     }
   },
   aihubmix: {

src/renderer/src/env.d.ts

@@ -4,6 +4,14 @@ import type KeyvStorage from '@kangfenmao/keyv-storage'
 import { MessageInstance } from 'antd/es/message/interface'
 import { HookAPI } from 'antd/es/modal/useModal'
 
+interface ImportMetaEnv {
+  VITE_RENDERER_INTEGRATED_MODEL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
 declare global {
   interface Window {
     message: MessageInstance

src/renderer/src/hooks/useAppInit.ts

@@ -1,3 +1,4 @@
+import { isLocalAi } from '@renderer/config/env'
 import i18n from '@renderer/i18n'
 import LocalStorage from '@renderer/services/storage'
 import { useAppDispatch } from '@renderer/store'
@@ -5,12 +6,14 @@ import { setAvatar } from '@renderer/store/runtime'
 import { runAsyncFunction } from '@renderer/utils'
 import { useEffect } from 'react'
 
+import { useDefaultModel } from './useAssistant'
 import { useSettings } from './useSettings'
 
 export function useAppInit() {
   const dispatch = useAppDispatch()
   const { proxyUrl } = useSettings()
   const { language } = useSettings()
+  const { setDefaultModel, setTopicNamingModel, setTranslateModel } = useDefaultModel()
 
   useEffect(() => {
     runAsyncFunction(async () => {
@@ -33,4 +36,14 @@ export function useAppInit() {
   useEffect(() => {
     i18n.changeLanguage(language || navigator.language || 'en-US')
   }, [language])
+
+  useEffect(() => {
+    if (isLocalAi) {
+      const model = JSON.parse(import.meta.env.VITE_RENDERER_INTEGRATED_MODEL)
+      setDefaultModel(model)
+      setTopicNamingModel(model)
+      setTranslateModel(model)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 }

src/renderer/src/hooks/useModel.ts

@@ -0,0 +1,7 @@
+import { useProviders } from './useProvider'
+
+export function useModel(id?: string) {
+  const { providers } = useProviders()
+  const allModels = providers.map((p) => p.models).flat()
+  return allModels.find((m) => m.id === id)
+}

src/renderer/src/hooks/useSettings.ts

@@ -3,6 +3,8 @@ import {
   SendMessageShortcut,
   setSendMessageShortcut as _setSendMessageShortcut,
   setTheme,
+  setTopicPosition,
+  setWindowStyle,
   ThemeMode
 } from '@renderer/store/settings'
 
@@ -17,6 +19,12 @@ export function useSettings() {
     },
     setTheme(theme: ThemeMode) {
       dispatch(setTheme(theme))
+    },
+    setWindowStyle(windowStyle: 'transparent' | 'opaque') {
+      dispatch(setWindowStyle(windowStyle))
+    },
+    setTopicPosition(topicPosition: 'left' | 'right') {
+      dispatch(setTopicPosition(topicPosition))
     }
   }
 }

src/renderer/src/hooks/useStore.ts

@@ -1,17 +1,5 @@
 import { useAppDispatch, useAppSelector } from '@renderer/store'
-import { setShowRightSidebar, toggleRightSidebar, toggleShowAssistants } from '@renderer/store/settings'
-
-export function useShowRightSidebar() {
-  const showRightSidebar = useAppSelector((state) => state.settings.showRightSidebar)
-  const dispatch = useAppDispatch()
-
-  return {
-    rightSidebarShown: showRightSidebar,
-    toggleRightSidebar: () => dispatch(toggleRightSidebar()),
-    showRightSidebar: () => dispatch(setShowRightSidebar(true)),
-    hideRightSidebar: () => dispatch(setShowRightSidebar(false))
-  }
-}
+import { setShowTopics, toggleShowAssistants, toggleShowTopics } from '@renderer/store/settings'
 
 export function useShowAssistants() {
   const showAssistants = useAppSelector((state) => state.settings.showAssistants)
@@ -23,6 +11,17 @@ export function useShowAssistants() {
   }
 }
 
+export function useShowTopics() {
+  const showTopics = useAppSelector((state) => state.settings.showTopics)
+  const dispatch = useAppDispatch()
+
+  return {
+    showTopics,
+    setShowTopics: (show: boolean) => dispatch(setShowTopics(show)),
+    toggleShowTopics: () => dispatch(toggleShowTopics())
+  }
+}
+
 export function useRuntime() {
   return useAppSelector((state) => state.runtime)
 }

src/renderer/src/hooks/useTopic.ts

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

src/renderer/src/i18n/index.ts

@@ -28,7 +28,10 @@ const resources = {
         footnotes: 'References',
         select: 'Select',
         search: 'Search',
-        default: 'Default'
+        default: 'Default',
+        warning: 'Warning',
+        back: 'Back',
+        chat: 'Chat'
       },
       button: {
         add: 'Add',
@@ -48,11 +51,15 @@ const resources = {
         'api.connection.failed': 'Connection failed',
         'api.connection.success': 'Connection successful',
         'chat.completion.paused': 'Chat completion paused',
-        'switch.disabled': 'Switching is disabled while the assistant is generating'
+        'switch.disabled': 'Switching is disabled while the assistant is generating',
+        'restore.success': 'Restored successfully',
+        'reset.confirm.content': 'Are you sure you want to clear all data?',
+        'reset.double.confirm.title': 'DATA LOST !!!',
+        'reset.double.confirm.content': 'All data will be lost, do you want to continue?'
       },
       chat: {
         save: 'Save',
-        'default.name': '🔆 Default 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',
@@ -61,17 +68,20 @@ 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?',
+        'topics.list': 'Topic List',
         'input.new_topic': 'New Topic',
         'input.topics': ' Topics ',
-        'input.clear': 'Clear',
+        'input.clear': 'Clear Messages',
+        'input.new.context': 'Clear Context',
         'input.expand': 'Expand',
         'input.collapse': 'Collapse',
         'input.clear.title': 'Clear all messages?',
-        'input.clear.content': 'Are you sure to clear all messages?',
+        'input.clear.content': 'Do you want to clear all messages of the current topic?',
         'input.placeholder': 'Type your message here...',
         'input.send': 'Send',
         'input.pause': 'Pause',
         'input.settings': 'Settings',
+        'input.upload': 'Upload image png、jpg、jpeg',
         'input.context_count.tip': 'Context Count',
         'input.estimated_tokens.tip': 'Estimated tokens',
         'settings.temperature': 'Temperature',
@@ -86,7 +96,8 @@ const resources = {
         'settings.set_as_default': 'Apply to default assistant',
         'settings.max': 'Max',
         'suggestions.title': 'Suggested Questions',
-        'add.assistant.title': 'Add Assistant'
+        'add.assistant.title': 'Add Assistant',
+        'message.new.context': 'New Context'
       },
       agents: {
         title: 'Agents',
@@ -141,6 +152,11 @@ const resources = {
         'general.title': 'General Settings',
         'general.user_name': 'User Name',
         'general.user_name.placeholder': 'Enter your name',
+        'general.backup.title': 'Data Backup and Recovery',
+        'general.backup.button': 'Backup',
+        'general.restore.button': 'Restore',
+        'general.reset.title': 'Data Reset',
+        'general.reset.button': 'Reset',
         'provider.api_key': 'API Key',
         'provider.check': 'Check',
         'provider.get_api_key': 'Get API Key',
@@ -190,7 +206,13 @@ const resources = {
         'theme.dark': 'Dark',
         'theme.light': 'Light',
         'theme.auto': 'Auto',
-        'font_size.title': 'Message Font Size'
+        'theme.window.style.title': 'Window Style',
+        'theme.window.style.transparent': 'Transparent Window',
+        'theme.window.style.opaque': 'Opaque Window',
+        'font_size.title': 'Message Font Size',
+        'topic.position': 'Topic Position',
+        'topic.position.left': 'Left',
+        'topic.position.right': 'Right'
       },
       translate: {
         title: 'Translation',
@@ -219,8 +241,12 @@ const resources = {
         'keep_alive_time.placeholder': 'Minutes',
         'keep_alive_time.description': 'The time in minutes to keep the connection alive, default is 5 minutes.'
       },
+      minapp: {
+        title: 'MinApp'
+      },
       error: {
-        'chat.response': 'Something went wrong. Please check if you have set your API key in the Settings > Providers'
+        'chat.response': 'Something went wrong. Please check if you have set your API key in the Settings > Providers',
+        'backup.file_format': 'Backup file format error'
       },
       words: {
         knowledgeGraph: 'Knowledge Graph',
@@ -253,7 +279,10 @@ const resources = {
         footnote: '引用内容',
         select: '选择',
         search: '搜索',
-        default: '默认'
+        default: '默认',
+        warning: '警告',
+        back: '返回',
+        chat: '聊天'
       },
       button: {
         add: '添加',
@@ -273,11 +302,15 @@ const resources = {
         'api.connection.failed': '连接失败',
         'api.connection.success': '连接成功',
         'chat.completion.paused': '会话已停止',
-        'switch.disabled': '模型回复完成后才能切换'
+        'switch.disabled': '模型回复完成后才能切换',
+        'restore.success': '恢复成功',
+        'reset.confirm.content': '确定要重置所有数据吗？',
+        'reset.double.confirm.title': '数据丢失！！！',
+        'reset.double.confirm.content': '你的全部数据都会丢失，如果没有备份数据，将无法恢复，确定要继续吗？'
       },
       chat: {
         save: '保存',
-        'default.name': '🔆 默认助手 - Assistant',
+        'default.name': '默认助手',
         'default.description': '你好，我是默认助手。你可以立刻开始跟我聊天。',
         'default.topic.name': '默认话题',
         'topics.title': '话题',
@@ -286,17 +319,20 @@ const resources = {
         'topics.edit.placeholder': '输入新名称',
         'topics.delete.all.title': '删除所有话题',
         'topics.delete.all.content': '确定要删除所有话题吗?',
+        'topics.list': '话题列表',
         'input.new_topic': '新话题',
         'input.topics': ' 话题 ',
-        'input.clear': '清除',
+        'input.clear': '清除会话消息',
+        'input.new.context': '清除上下文',
         'input.expand': '展开',
         'input.collapse': '收起',
-        'input.clear.title': '清除所有消息?',
-        'input.clear.content': '确定要清除所有消息吗?',
+        'input.clear.title': '清除消息?',
+        'input.clear.content': '确定要清除当前会话所有消息吗?',
         'input.placeholder': '在这里输入消息...',
         'input.send': '发送',
         'input.pause': '暂停',
         'input.settings': '设置',
+        'input.upload': '上传图片 png、jpg、jpeg',
         'input.context_count.tip': '上下文数',
         'input.estimated_tokens.tip': '预估 token 数',
         'settings.temperature': '模型温度',
@@ -312,7 +348,8 @@ const resources = {
         'settings.set_as_default': '应用到默认助手',
         'settings.max': '不限',
         'suggestions.title': '建议的问题',
-        'add.assistant.title': '添加智能体'
+        'add.assistant.title': '添加智能体',
+        'message.new.context': '清除上下文'
       },
       agents: {
         title: '智能体',
@@ -367,6 +404,11 @@ const resources = {
         'general.title': '常规设置',
         'general.user_name': '用户名',
         'general.user_name.placeholder': '请输入用户名',
+        'general.backup.title': '数据备份与恢复',
+        'general.backup.button': '备份',
+        'general.restore.button': '恢复',
+        'general.reset.title': '重置数据',
+        'general.reset.button': '重置',
         'provider.api_key': 'API 密钥',
         'provider.check': '检查',
         'provider.get_api_key': '点击这里获取密钥',
@@ -416,7 +458,13 @@ const resources = {
         'theme.dark': '深色主题',
         'theme.light': '浅色主题',
         'theme.auto': '跟随系统',
-        'font_size.title': '消息字体大小'
+        'theme.window.style.title': '窗口样式',
+        'theme.window.style.transparent': '透明窗口',
+        'theme.window.style.opaque': '不透明窗口',
+        'font_size.title': '消息字体大小',
+        'topic.position': '话题位置',
+        'topic.position.left': '左侧',
+        'topic.position.right': '右侧'
       },
       translate: {
         title: '翻译',
@@ -445,8 +493,12 @@ const resources = {
         'keep_alive_time.placeholder': '分钟',
         'keep_alive_time.description': '对话后模型在内存中保持的时间（默认：5分钟）'
       },
+      minapp: {
+        title: '小程序'
+      },
       error: {
-        'chat.response': '出错了，如果没有配置 API 密钥，请前往设置 > 模型提供商中配置密钥'
+        'chat.response': '出错了，如果没有配置 API 密钥，请前往设置 > 模型提供商中配置密钥',
+        'backup.file_format': '备份文件格式错误'
       },
       words: {
         knowledgeGraph: '知识图谱',

src/renderer/src/init.ts

@@ -1,27 +1,9 @@
 import KeyvStorage from '@kangfenmao/keyv-storage'
-import * as Sentry from '@sentry/electron/renderer'
 import localforage from 'localforage'
 
+import { APP_NAME } from './config/env'
 import { ThemeMode } from './store/settings'
-import { isProduction, loadScript } from './utils'
-
-async function initSentry() {
-  if (await isProduction()) {
-    Sentry.init({
-      integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
-
-      // Set tracesSampleRate to 1.0 to capture 100%
-      // of transactions for performance monitoring.
-      // We recommend adjusting this value in production
-      tracesSampleRate: 1.0,
-
-      // Capture Replay for 10% of all sessions,
-      // plus for 100% of sessions with an error
-      replaysSessionSampleRate: 0.1,
-      replaysOnErrorSampleRate: 1.0
-    })
-  }
-}
+import { loadScript } from './utils'
 
 export async function initMermaid(theme: ThemeMode) {
   if (!window.mermaid) {
@@ -41,13 +23,11 @@ function init() {
     name: 'CherryAI',
     version: 1.0,
     storeName: 'cherryai',
-    description: 'Cherry Studio Storage'
+    description: `${APP_NAME} Storage`
   })
 
   window.keyv = new KeyvStorage()
   window.keyv.init()
-
-  initSentry()
 }
 
 init()

src/renderer/src/pages/apps/App.tsx

@@ -0,0 +1,51 @@
+import MinApp from '@renderer/components/MinApp'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { MinAppType } from '@renderer/types'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  app: MinAppType
+}
+
+const App: FC<Props> = ({ app }) => {
+  const { theme } = useTheme()
+
+  const onClick = () => {
+    MinApp.start(app)
+  }
+
+  return (
+    <Container onClick={onClick}>
+      <AppIcon src={app.logo} style={{ border: theme === 'dark' ? 'none' : '0.5px solid var(--color-border' }} />
+      <AppTitle>{app.name}</AppTitle>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  width: 65px;
+`
+
+const AppIcon = styled.img`
+  width: 60px;
+  height: 60px;
+  border-radius: 16px;
+  user-select: none;
+  -webkit-user-drag: none;
+`
+
+const AppTitle = styled.div`
+  font-size: 12px;
+  margin-top: 5px;
+  color: var(--color-text-soft);
+  text-align: center;
+  user-select: none;
+`
+
+export default App

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

@@ -0,0 +1,87 @@
+import { SearchOutlined } from '@ant-design/icons'
+import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { Center } from '@renderer/components/Layout'
+import { getAllMinApps } from '@renderer/config/minapp'
+import { Empty, Input } from 'antd'
+import { isEmpty } from 'lodash'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import App from './App'
+
+const list = getAllMinApps()
+
+const AppsPage: FC = () => {
+  const { t } = useTranslation()
+  const [search, setSearch] = useState('')
+
+  const apps = search
+    ? list.filter(
+        (app) => app.name.toLowerCase().includes(search.toLowerCase()) || app.url.includes(search.toLowerCase())
+      )
+    : list
+
+  return (
+    <Container>
+      <Navbar>
+        <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
+          {t('minapp.title')}
+          <Input
+            placeholder={t('common.search')}
+            className="nodrag"
+            style={{ width: '30%', height: 28 }}
+            size="small"
+            variant="filled"
+            suffix={<SearchOutlined />}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          <div style={{ width: 80 }} />
+        </NavbarCenter>
+      </Navbar>
+      <ContentContainer>
+        <AppsContainer>
+          {apps.map((app) => (
+            <App key={app.name} app={app} />
+          ))}
+          {isEmpty(apps) && (
+            <Center style={{ flex: 1 }}>
+              <Empty />
+            </Center>
+          )}
+        </AppsContainer>
+      </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);
+  padding: 50px;
+`
+
+const AppsContainer = styled.div`
+  display: flex;
+  min-width: 900px;
+  max-width: 900px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 50px;
+`
+
+export default AppsPage

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

@@ -1,12 +1,14 @@
-import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import { DeleteOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons'
+import DragableList from '@renderer/components/DragableList'
+import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
+import { useShowTopics } from '@renderer/hooks/useStore'
 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'
-import { droppableReorder, uuid } from '@renderer/utils'
+import { uuid } from '@renderer/utils'
 import { Dropdown } from 'antd'
 import { ItemType } from 'antd/es/menu/interface'
 import { last } from 'lodash'
@@ -23,7 +25,8 @@ interface Props {
 const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAssistant }) => {
   const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
   const generating = useAppSelector((state) => state.runtime.generating)
-  const { updateAssistant } = useAssistant(activeAssistant.id)
+  const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id)
+  const { showTopics, toggleShowTopics } = useShowTopics()
   const { t } = useTranslation()
 
   const onDelete = useCallback(
@@ -35,6 +38,15 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
     [assistants, onCreateAssistant, removeAssistant, setActiveAssistant]
   )
 
+  const onEditAssistant = useCallback(
+    async (assistant: Assistant) => {
+      const _assistant = await AssistantSettingPopup.show({ assistant })
+      updateAssistant(_assistant)
+      syncAsistantToAgent(_assistant)
+    },
+    [updateAssistant]
+  )
+
   const getMenuItems = useCallback(
     (assistant: Assistant) =>
       [
@@ -42,22 +54,31 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
           label: t('common.edit'),
           key: 'edit',
           icon: <EditOutlined />,
-          async onClick() {
-            const _assistant = await AssistantSettingPopup.show({ assistant })
-            updateAssistant(_assistant)
-            syncAsistantToAgent(_assistant)
-          }
+          onClick: () => onEditAssistant(assistant)
         },
         {
           label: t('common.duplicate'),
           key: 'duplicate',
-          icon: <CopyOutlined />,
+          icon: <CopyIcon />,
           onClick: async () => {
             const _assistant: Assistant = { ...assistant, id: uuid(), topics: [getDefaultTopic()] }
             addAssistant(_assistant)
             setActiveAssistant(_assistant)
           }
         },
+        {
+          label: t('chat.topics.delete.all.title'),
+          key: 'delete-all',
+          icon: <MinusCircleOutlined />,
+          onClick: () => {
+            window.modal.confirm({
+              title: t('chat.topics.delete.all.title'),
+              content: t('chat.topics.delete.all.content'),
+              okButtonProps: { danger: true },
+              onOk: removeAllTopics
+            })
+          }
+        },
         { type: 'divider' },
         {
           label: t('common.delete'),
@@ -67,19 +88,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
           onClick: () => onDelete(assistant)
         }
       ] as ItemType[],
-    [addAssistant, onDelete, setActiveAssistant, t, updateAssistant]
-  )
-
-  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]
+    [addAssistant, onDelete, onEditAssistant, removeAllTopics, setActiveAssistant, t]
   )
 
   const onSwitchAssistant = useCallback(
@@ -90,6 +99,7 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
           key: 'switch-assistant'
         })
       }
+
       EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)
       setActiveAssistant(assistant)
     },
@@ -98,33 +108,24 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
 
   return (
     <Container>
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="droppable">
-          {(provided) => (
-            <div {...provided.droppableProps} ref={provided.innerRef}>
-              {assistants.map((assistant, index) => (
-                <Draggable key={`draggable_${assistant.id}_${index}`} draggableId={assistant.id} index={index}>
-                  {(provided) => (
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}
-                      style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
+      <DragableList list={assistants} onUpdate={updateAssistants}>
+        {(assistant) => {
+          const isCurrent = assistant.id === activeAssistant?.id
+          return (
             <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
-                        <AssistantItem
-                          onClick={() => onSwitchAssistant(assistant)}
-                          className={assistant.id === activeAssistant?.id ? 'active' : ''}>
+              <AssistantItem onClick={() => onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}>
                 <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
+                <ArrowRightButton
+                  className={`arrow-button ${isCurrent && showTopics ? 'active' : ''}`}
+                  onClick={() => isCurrent && toggleShowTopics()}>
+                  <i className="iconfont icon-gridlines" />
+                </ArrowRightButton>
+                {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
               </AssistantItem>
             </Dropdown>
-                    </div>
-                  )}
-                </Draggable>
-              ))}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
+          )
+        }}
+      </DragableList>
     </Container>
   )
 }
@@ -136,34 +137,38 @@ const Container = styled.div`
   max-width: var(--assistants-width);
   border-right: 0.5px solid var(--color-border);
   height: calc(100vh - var(--navbar-height));
-  padding: 10px;
   overflow-y: auto;
+  padding-top: 10px;
+  padding-bottom: 10px;
 `
 
 const AssistantItem = styled.div`
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  justify-content: space-between;
   padding: 7px 10px;
   position: relative;
   border-radius: 4px;
+  margin: 0 10px;
+  padding-right: 35px;
   cursor: pointer;
   font-family: Ubuntu;
-  .anticon {
-    display: none;
-  }
-  &:hover {
-    background-color: var(--color-background-soft);
-    .anticon {
-      display: block;
-      color: var(--color-text-1);
-    }
+  .iconfont {
+    opacity: 0;
+    color: var(--color-text-3);
   }
   &.active {
     background-color: var(--color-background-mute);
-    cursor: pointer;
     .name {
       font-weight: 500;
     }
+    .topics-count {
+      display: none;
+    }
+    .iconfont {
+      opacity: 1;
+      color: var(--color-text-2);
+    }
   }
 `
 
@@ -173,6 +178,46 @@ const AssistantName = styled.div`
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  font-size: 13px;
+`
+
+const ArrowRightButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 4px;
+  position: absolute;
+  right: 10px;
+  top: 5px;
+  .anticon {
+    font-size: 14px;
+  }
+  &:hover {
+    background-color: var(--color-background);
+  }
+  &.active {
+    background-color: var(--color-background);
+  }
+`
+
+const TopicCount = styled.div`
+  color: var(--color-text-3);
+  font-size: 12px;
+  margin-right: 3px;
+  background-color: var(--color-background-mute);
+  opacity: 0.8;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
 `
 
 export default Assistants

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

@@ -1,6 +1,6 @@
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useActiveTopic } from '@renderer/hooks/useTopic'
-import { Assistant } from '@renderer/types'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { Assistant, Topic } from '@renderer/types'
 import { Flex } from 'antd'
 import { FC } from 'react'
 import styled from 'styled-components'
@@ -11,19 +11,26 @@ import RightSidebar from './RightSidebar'
 
 interface Props {
   assistant: Assistant
+  activeTopic: Topic
+  setActiveTopic: (topic: Topic) => void
 }
 
 const Chat: FC<Props> = (props) => {
   const { assistant } = useAssistant(props.assistant.id)
-  const { activeTopic, setActiveTopic } = useActiveTopic(assistant)
+  const { topicPosition } = useSettings()
 
   return (
     <Container id="chat">
+      {topicPosition === 'left' && (
+        <RightSidebar assistant={assistant} activeTopic={props.activeTopic} setActiveTopic={props.setActiveTopic} />
+      )}
       <Main vertical flex={1} justify="space-between">
-        <Messages assistant={assistant} topic={activeTopic} />
-        <Inputbar assistant={assistant} setActiveTopic={setActiveTopic} />
+        <Messages assistant={assistant} topic={props.activeTopic} setActiveTopic={props.setActiveTopic} />
+        <Inputbar assistant={assistant} setActiveTopic={props.setActiveTopic} />
       </Main>
-      <RightSidebar assistant={assistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
+      {topicPosition === 'right' && (
+        <RightSidebar assistant={assistant} activeTopic={props.activeTopic} setActiveTopic={props.setActiveTopic} />
+      )}
     </Container>
   )
 }

src/renderer/src/pages/home/Header.tsx

@@ -1,42 +0,0 @@
-import { NavbarCenter } from '@renderer/components/app/Navbar'
-import { isMac } from '@renderer/config/constant'
-import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useShowAssistants } from '@renderer/hooks/useStore'
-import { Assistant } from '@renderer/types'
-import { removeLeadingEmoji } from '@renderer/utils'
-import { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-import SelectModelButton from './components/SelectModelButton'
-import { NewButton } from './HomePage'
-
-interface Props {
-  activeAssistant: Assistant
-}
-
-const HomeHeader: FC<Props> = ({ activeAssistant }) => {
-  const { assistant } = useAssistant(activeAssistant.id)
-  const { t } = useTranslation()
-  const { showAssistants, toggleShowAssistants } = useShowAssistants()
-
-  return (
-    <NavbarCenter style={{ paddingLeft: isMac ? 16 : 8 }}>
-      {!showAssistants && (
-        <NewButton onClick={toggleShowAssistants} style={{ marginRight: isMac ? 8 : 25 }}>
-          <i className="iconfont icon-showsidebarhoriz" />
-        </NewButton>
-      )}
-      <AssistantName>{removeLeadingEmoji(assistant?.name) || t('chat.default.name')}</AssistantName>
-      <SelectModelButton assistant={assistant} />
-    </NavbarCenter>
-  )
-}
-
-const AssistantName = styled.span`
-  margin-left: 5px;
-  margin-right: 10px;
-  font-family: Ubuntu;
-`
-
-export default HomeHeader

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

@@ -1,28 +1,24 @@
-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 { useShowAssistants } from '@renderer/hooks/useStore'
+import { useActiveTopic } from '@renderer/hooks/useTopic'
+import { Assistant, Topic } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Switch } from 'antd'
 import { FC, useState } from 'react'
 import styled from 'styled-components'
 
-import AddAssistantPopup from '../../components/Popups/AddAssistantPopup'
 import Assistants from './Assistants'
 import Chat from './Chat'
-import Navigation from './Header'
+import Navbar from './Navbar'
 
 let _activeAssistant: Assistant
 
 const HomePage: FC = () => {
   const { assistants, addAssistant } = useAssistants()
   const [activeAssistant, setActiveAssistant] = useState(_activeAssistant || assistants[0])
-  const { rightSidebarShown, toggleRightSidebar } = useShowRightSidebar()
-  const { showAssistants, toggleShowAssistants } = useShowAssistants()
+  const { showAssistants } = useShowAssistants()
   const { defaultAssistant } = useDefaultAssistant()
-  const { theme, toggleTheme } = useTheme()
+
+  const { activeTopic, setActiveTopic } = useActiveTopic(activeAssistant)
 
   _activeAssistant = activeAssistant
 
@@ -32,37 +28,18 @@ const HomePage: FC = () => {
     setActiveAssistant(assistant)
   }
 
-  const onCreateAssistant = async () => {
-    const assistant = await AddAssistantPopup.show()
-    assistant && setActiveAssistant(assistant)
+  const onSetActiveTopic = (topic: Topic) => {
+    setActiveTopic(topic)
   }
 
   return (
     <Container>
-      <Navbar>
-        {showAssistants && (
-          <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
-            <NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
-              <i className="iconfont icon-hidesidebarhoriz" />
-            </NewButton>
-            <NewButton onClick={onCreateAssistant}>
-              <i className="iconfont icon-a-addchat"></i>
-            </NewButton>
-          </NavbarLeft>
-        )}
-        <Navigation activeAssistant={activeAssistant} />
-        <NavbarRight style={{ justifyContent: 'flex-end', paddingRight: isWindows ? 140 : 12 }}>
-          <ThemeSwitch
-            checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
-            unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
-            checked={theme === 'dark'}
-            onChange={toggleTheme}
+      <Navbar
+        activeAssistant={activeAssistant}
+        setActiveAssistant={setActiveAssistant}
+        activeTopic={activeTopic}
+        setActiveTopic={onSetActiveTopic}
       />
-          <NewButton onClick={toggleRightSidebar}>
-            <i className={`iconfont ${rightSidebarShown ? 'icon-showsidebarhoriz' : 'icon-hidesidebarhoriz'}`} />
-          </NewButton>
-        </NavbarRight>
-      </Navbar>
       <ContentContainer>
         {showAssistants && (
           <Assistants
@@ -71,7 +48,7 @@ const HomePage: FC = () => {
             onCreateAssistant={onCreateDefaultAssistant}
           />
         )}
-        <Chat assistant={activeAssistant} />
+        <Chat assistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={onSetActiveTopic} />
       </ContentContainer>
     </Container>
   )
@@ -90,40 +67,4 @@ const ContentContainer = styled.div`
   background-color: var(--color-background);
 `
 
-export const NewButton = styled.div`
-  -webkit-app-region: none;
-  border-radius: 4px;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease-in-out;
-  color: var(--color-icon);
-  .icon-a-addchat {
-    font-size: 20px;
-  }
-  .anticon {
-    font-size: 19px;
-  }
-  .icon-showsidebarhoriz,
-  .icon-hidesidebarhoriz {
-    font-size: 17px;
-  }
-  &:hover {
-    background-color: var(--color-background-soft);
-    cursor: pointer;
-    color: var(--color-icon-white);
-  }
-`
-
-const ThemeSwitch = styled(Switch)`
-  -webkit-app-region: none;
-  margin-right: 10px;
-  .icon-theme {
-    font-size: 14px;
-  }
-`
-
 export default HomePage

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

@@ -0,0 +1,31 @@
+import { PaperClipOutlined } from '@ant-design/icons'
+import { Tooltip, Upload } from 'antd'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  files: File[]
+  setFiles: (files: File[]) => void
+  ToolbarButton: any
+}
+
+const AttachmentButton: FC<Props> = ({ files, setFiles, ToolbarButton }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Tooltip placement="top" title={t('chat.input.upload')} arrow>
+      <Upload
+        customRequest={() => {}}
+        accept="image/*"
+        itemRender={() => null}
+        maxCount={1}
+        onChange={async ({ file }) => file?.originFileObj && setFiles([file.originFileObj as File])}>
+        <ToolbarButton type="text" className={files.length ? 'active' : ''}>
+          <PaperClipOutlined style={{ rotate: '135deg' }} />
+        </ToolbarButton>
+      </Upload>
+    </Tooltip>
+  )
+}
+
+export default AttachmentButton

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

@@ -8,7 +8,6 @@ import {
   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'
@@ -18,15 +17,16 @@ import store, { useAppSelector } from '@renderer/store'
 import { setGenerating } from '@renderer/store/runtime'
 import { Assistant, Message, Topic } from '@renderer/types'
 import { delay, uuid } from '@renderer/utils'
-import { Button, Divider, Popconfirm, Tag, Tooltip } from 'antd'
+import { Button, Popconfirm, 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 { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import SendMessageButton from './SendMessageButton'
+import TokenCount from './TokenCount'
 
 interface Props {
   assistant: Assistant
@@ -39,12 +39,15 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   const [text, setText] = useState(_text)
   const [inputFocus, setInputFocus] = useState(false)
   const { addTopic } = useAssistant(assistant.id)
-  const { sendMessageShortcut, showInputEstimatedTokens, fontSize } = useSettings()
+  const { sendMessageShortcut, fontSize } = useSettings()
   const [expended, setExpend] = useState(false)
   const [estimateTokenCount, setEstimateTokenCount] = useState(0)
+  const [contextCount, setContextCount] = useState(0)
   const generating = useAppSelector((state) => state.runtime.generating)
-  const inputRef = useRef<TextAreaRef>(null)
+  const textareaRef = useRef<TextAreaRef>(null)
+  const [files, setFiles] = useState<File[]>([])
   const { t } = useTranslation()
+  const containerRef = useRef(null)
 
   _text = text
 
@@ -67,24 +70,32 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
       status: 'success'
     }
 
+    if (files.length > 0) {
+      message.files = files
+    }
+
     EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE, message)
 
     setText('')
+    setFiles([])
     setTimeout(() => setText(''), 500)
+    setTimeout(() => resizeTextArea(), 0)
 
     setExpend(false)
-  }, [assistant.id, assistant.topics, generating, text])
+  }, [assistant.id, assistant.topics, generating, files, text])
 
   const inputTokenCount = useMemo(() => estimateInputTokenCount(text), [text])
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const isEnterPressed = event.keyCode == 13
+
     if (expended) {
       if (event.key === 'Escape') {
         return setExpend(false)
       }
     }
 
-    if (sendMessageShortcut === 'Enter' && event.key === 'Enter') {
+    if (sendMessageShortcut === 'Enter' && isEnterPressed) {
       if (event.shiftKey) {
         return
       }
@@ -92,7 +103,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
       return event.preventDefault()
     }
 
-    if (sendMessageShortcut === 'Shift+Enter' && event.key === 'Enter' && event.shiftKey) {
+    if (sendMessageShortcut === 'Shift+Enter' && isEnterPressed && event.shiftKey) {
       sendMessage()
       return event.preventDefault()
     }
@@ -117,6 +128,40 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
     store.dispatch(setGenerating(false))
   }
 
+  const onNewContext = () => {
+    if (generating) {
+      onPause()
+      return
+    }
+    EventEmitter.emit(EVENT_NAMES.NEW_CONTEXT)
+  }
+
+  const resizeTextArea = () => {
+    const textArea = textareaRef.current?.resizableTextArea?.textArea
+    if (textArea) {
+      textArea.style.height = 'auto'
+      textArea.style.height = textArea?.scrollHeight > 400 ? '400px' : `${textArea?.scrollHeight}px`
+    }
+  }
+
+  const onToggleExpended = () => {
+    const isExpended = !expended
+    setExpend(isExpended)
+    const textArea = textareaRef.current?.resizableTextArea?.textArea
+
+    if (textArea) {
+      if (isExpended) {
+        textArea.style.height = '70vh'
+      } else {
+        resizeTextArea()
+      }
+    }
+
+    textareaRef.current?.focus()
+  }
+
+  const onInput = () => !expended && resizeTextArea()
+
   // Command or Ctrl + N create new topic
   useEffect(() => {
     const onKeydown = (e) => {
@@ -124,7 +169,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
         if ((e.ctrlKey || e.metaKey) && e.key === 'n') {
           addNewTopic()
           EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)
-          inputRef.current?.focus()
+          textareaRef.current?.focus()
         }
       }
     }
@@ -137,22 +182,38 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
     const unsubscribes = [
       EventEmitter.on(EVENT_NAMES.EDIT_MESSAGE, (message: Message) => {
         setText(message.content)
-        inputRef.current?.focus()
+        textareaRef.current?.focus()
       }),
-      EventEmitter.on(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, _setEstimateTokenCount)
+      EventEmitter.on(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, ({ tokensCount, contextCount }) => {
+        _setEstimateTokenCount(tokensCount)
+        setContextCount(contextCount)
+      })
     ]
     return () => unsubscribes.forEach((unsub) => unsub())
   }, [])
 
   useEffect(() => {
-    inputRef.current?.focus()
+    textareaRef.current?.focus()
   }, [assistant])
 
   return (
-    <Container
-      id="inputbar"
-      style={{ minHeight: expended ? '60%' : 'var(--input-bar-height)' }}
-      className={inputFocus ? 'focus' : ''}>
+    <Container id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
+      <Textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={t('chat.input.placeholder')}
+        autoFocus
+        contextMenu="true"
+        variant="borderless"
+        rows={1}
+        ref={textareaRef}
+        style={{ fontSize }}
+        styles={{ textarea: TextareaStyle }}
+        onFocus={() => setInputFocus(true)}
+        onBlur={() => setInputFocus(false)}
+        onInput={onInput}
+      />
       <Toolbar>
         <ToolbarMenu>
           <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
@@ -183,30 +244,19 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
               <ControlOutlined />
             </ToolbarButton>
           </Tooltip>
+          {/* <AttachmentButton files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} /> */}
           <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
-            <ToolbarButton type="text" onClick={() => setExpend(!expended)}>
+            <ToolbarButton type="text" onClick={onToggleExpended}>
               {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>
-          )}
+          <TokenCount
+            estimateTokenCount={estimateTokenCount}
+            inputTokenCount={inputTokenCount}
+            contextCount={contextCount}
+            ToolbarButton={ToolbarButton}
+            onClick={onNewContext}
+          />
         </ToolbarMenu>
         <ToolbarMenu>
           {generating && (
@@ -219,28 +269,16 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
           {!generating && <SendMessageButton sendMessage={sendMessage} disabled={generating || !text} />}
         </ToolbarMenu>
       </Toolbar>
-      <Textarea
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder={t('chat.input.placeholder')}
-        autoFocus
-        contextMenu="true"
-        variant="borderless"
-        ref={inputRef}
-        styles={{ textarea: { paddingLeft: 0 } }}
-        onFocus={() => setInputFocus(true)}
-        onBlur={() => setInputFocus(false)}
-        style={{ fontSize }}
-      />
     </Container>
   )
 }
 
+const TextareaStyle: CSSProperties = {
+  paddingLeft: 0,
+  padding: '10px 15px 8px'
+}
+
 const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: var(--input-bar-height);
   border: 1px solid var(--color-border-soft);
   transition: all 0.3s ease;
   position: relative;
@@ -255,11 +293,11 @@ const Textarea = styled(TextArea)`
   border-radius: 0;
   display: flex;
   flex: 1;
-  margin: 0 15px 5px 15px;
   font-family: Ubuntu;
   resize: vertical;
   overflow: auto;
-  width: auto;
+  width: 100%;
+  box-sizing: border-box;
 `
 
 const Toolbar = styled.div`
@@ -267,8 +305,9 @@ const Toolbar = styled.div`
   flex-direction: row;
   justify-content: space-between;
   padding: 0 8px;
-  padding-top: 3px;
   padding-bottom: 0;
+  margin-bottom: 4px;
+  height: 36px;
 `
 
 const ToolbarMenu = styled.div`
@@ -279,32 +318,30 @@ const ToolbarMenu = styled.div`
 `
 
 const ToolbarButton = styled(Button)`
-  width: 32px;
-  height: 32px;
-  font-size: 18px;
+  width: 30px;
+  height: 30px;
+  font-size: 17px;
   border-radius: 50%;
   transition: all 0.3s ease;
   color: var(--color-icon);
-  &.anticon {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  &.anticon,
+  &.iconfont {
     transition: all 0.3s ease;
     color: var(--color-icon);
   }
-  &:hover {
+  &:hover,
+  &.active {
     background-color: var(--color-background-soft);
-    .anticon {
+    .anticon,
+    .iconfont {
       color: var(--color-text-1);
     }
   }
 `
 
-const TextCount = styled.div`
-  font-size: 11px;
-  color: var(--color-text-3);
-  z-index: 10;
-  padding: 2px;
-  border-top-left-radius: 7px;
-  user-select: none;
-  margin-right: 10px;
-`
-
 export default Inputbar

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

@@ -0,0 +1,83 @@
+import { ArrowUpOutlined, MenuOutlined, PicCenterOutlined } from '@ant-design/icons'
+import { HStack, VStack } from '@renderer/components/Layout'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { Divider, Popover, Tooltip } from 'antd'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+type Props = {
+  estimateTokenCount: number
+  inputTokenCount: number
+  contextCount: number
+  ToolbarButton: any
+} & React.HTMLAttributes<HTMLDivElement>
+
+const TokenCount: FC<Props> = ({ estimateTokenCount, inputTokenCount, contextCount, ToolbarButton, ...props }) => {
+  const { t } = useTranslation()
+  const { showInputEstimatedTokens } = useSettings()
+
+  if (!showInputEstimatedTokens) {
+    return null
+  }
+
+  const PopoverContent = () => {
+    return (
+      <VStack w="150px" background="100%">
+        <HStack justifyContent="space-between" w="100%">
+          <Text>{t('chat.input.context_count.tip')}</Text>
+          <Text>{contextCount}</Text>
+        </HStack>
+        <Divider style={{ margin: '5px 0' }} />
+        <HStack justifyContent="space-between" w="100%">
+          <Text>{t('chat.input.estimated_tokens.tip')}</Text>
+          <Text>{estimateTokenCount}</Text>
+        </HStack>
+      </VStack>
+    )
+  }
+
+  return (
+    <>
+      <ToolbarButton type="text" onClick={props.onClick}>
+        <Tooltip placement="top" title={t('chat.input.new.context')}>
+          <PicCenterOutlined />
+        </Tooltip>
+      </ToolbarButton>
+      <Container {...props}>
+        <Popover content={PopoverContent} title="" mouseEnterDelay={0.6}>
+          <MenuOutlined /> {contextCount}
+          <Divider type="vertical" style={{ marginTop: 0, marginLeft: 5, marginRight: 5 }} />
+          <ArrowUpOutlined />
+          {inputTokenCount} / {estimateTokenCount}
+        </Popover>
+      </Container>
+    </>
+  )
+}
+
+const Container = styled.div`
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--color-text-2);
+  z-index: 10;
+  padding: 3px 10px;
+  user-select: none;
+  font-family: Ubuntu;
+  border: 0.5px solid var(--color-text-3);
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .anticon {
+    font-size: 10px;
+    margin-right: 3px;
+  }
+`
+
+const Text = styled.div`
+  font-size: 12px;
+  color: var(--color-text-1);
+`
+
+export default TokenCount

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

@@ -1,6 +1,7 @@
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons'
+import { CheckOutlined } from '@ant-design/icons'
+import CopyIcon from '@renderer/components/Icons/CopyIcon'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { initMermaid } from '@renderer/init'
-import { useTheme } from '@renderer/providers/ThemeProvider'
 import { ThemeMode } from '@renderer/store/settings'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -36,10 +37,10 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
   }
 
   return match ? (
-    <div>
+    <>
       <CodeHeader>
         <CodeLanguage>{'<' + match[1].toUpperCase() + '>'}</CodeLanguage>
-        {!copied && <CopyOutlined className="copy" onClick={onCopy} />}
+        {!copied && <CopyIcon className="copy" onClick={onCopy} />}
         {copied && <CheckOutlined style={{ color: 'var(--color-primary)' }} />}
       </CodeHeader>
       <SyntaxHighlighter
@@ -47,10 +48,15 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
         language={match[1]}
         style={theme === ThemeMode.dark ? atomDark : oneLight}
         wrapLongLines={true}
-        customStyle={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: 0 }}>
+        customStyle={{
+          border: '0.5px solid var(--color-code-background)',
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+          marginTop: 0
+        }}>
         {String(children).replace(/\n$/, '')}
       </SyntaxHighlighter>
-    </div>
+    </>
   ) : (
     <code {...rest} className={className}>
       {children}
@@ -66,7 +72,7 @@ const CodeHeader = styled.div`
   font-size: 14px;
   font-weight: bold;
   background-color: var(--color-code-background);
-  height: 40px;
+  height: 36px;
   padding: 0 10px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;

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

@@ -7,16 +7,19 @@ import {
   SaveOutlined,
   SyncOutlined
 } from '@ant-design/icons'
+import UserPopup from '@renderer/components/Popups/UserPopup'
 import { FONT_FAMILY } from '@renderer/config/constant'
+import { startMinAppById } from '@renderer/config/minapp'
 import { getModelLogo } from '@renderer/config/provider'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import useAvatar from '@renderer/hooks/useAvatar'
+import { useModel } from '@renderer/hooks/useModel'
 import { useSettings } from '@renderer/hooks/useSettings'
 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 { Alert, Avatar, Divider, Dropdown, Popconfirm, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { upperFirst } from 'lodash'
 import { FC, memo, useCallback, useMemo, useState } from 'react'
@@ -25,6 +28,7 @@ import styled from 'styled-components'
 
 import SelectModelDropdown from '../components/SelectModelDropdown'
 import Markdown from '../Markdown/Markdown'
+import MessageAttachments from './MessageAttachments'
 
 interface Props {
   message: Message
@@ -37,7 +41,8 @@ interface Props {
 const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) => {
   const avatar = useAvatar()
   const { t } = useTranslation()
-  const { assistant, model, setModel } = useAssistant(message.assistantId)
+  const { assistant, setModel } = useAssistant(message.assistantId)
+  const model = useModel(message.modelId)
   const { userName, showMessageDivider, messageFont, fontSize } = useSettings()
   const { generating } = useRuntime()
   const [copied, setCopied] = useState(false)
@@ -67,9 +72,9 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
 
   const getUserName = useCallback(() => {
     if (message.id === 'assistant') return assistant?.name
-    if (message.role === 'assistant') return upperFirst(model.name || model.id)
+    if (message.role === 'assistant') return upperFirst(model?.name || model?.id)
     return userName || t('common.you')
-  }, [assistant?.name, message.id, message.role, model.id, model.name, t, userName])
+  }, [assistant?.name, message.id, message.role, model?.id, model?.name, t, userName])
 
   const fontFamily = useMemo(() => {
     return messageFont === 'serif' ? FONT_FAMILY.replace('sans-serif', 'serif').replace('Ubuntu, ', '') : FONT_FAMILY
@@ -107,27 +112,51 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
     if (message.status === 'error') {
       return (
         <Alert
-          message={t('error.chat.response')}
+          message={<div style={{ fontSize: 14 }}>{t('error.chat.response')}</div>}
           description={<Markdown message={message} />}
           type="error"
-          style={{ marginBottom: 15 }}
+          style={{ marginBottom: 15, padding: 10, fontSize: 12 }}
         />
       )
     }
 
-    return <Markdown message={message} />
-  }, [message])
+    return (
+      <>
+        <Markdown message={message} />
+        <MessageAttachments message={message} />
+      </>
+    )
+  }, [message, t])
+
+  const showMiniApp = () => model?.provider && startMinAppById(model?.provider)
+
+  if (message.type === 'clear') {
+    return (
+      <Divider dashed style={{ padding: '0 20px' }} plain>
+        {t('chat.message.new.context')}
+      </Divider>
+    )
+  }
 
   return (
     <MessageContainer key={message.id} className="message">
       <MessageHeader>
         <AvatarWrapper>
           {isAssistantMessage ? (
-            <Avatar src={avatarSource} size={35} style={{ borderRadius: '20%' }}>
+            <Avatar
+              src={avatarSource}
+              size={35}
+              style={{ borderRadius: '20%', cursor: 'pointer' }}
+              onClick={showMiniApp}>
               {avatarName}
             </Avatar>
           ) : (
-            <Avatar src={avatar} size={35} style={{ borderRadius: '20%' }} />
+            <Avatar
+              src={avatar}
+              size={35}
+              style={{ borderRadius: '20%', cursor: 'pointer' }}
+              onClick={() => UserPopup.show()}
+            />
           )}
           <UserWrap>
             <UserName>{username}</UserName>
@@ -154,7 +183,7 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
                 </ActionButton>
               </Tooltip>
               {canRegenerate && (
-                <SelectModelDropdown model={model} onSelect={onRegenerate} placement="topRight">
+                <SelectModelDropdown model={model} onSelect={onRegenerate} placement="topLeft">
                   <Tooltip title={t('common.regenerate')} mouseEnterDelay={0.8}>
                     <ActionButton>
                       <SyncOutlined />

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

@@ -0,0 +1,25 @@
+import { Message } from '@renderer/types'
+import { Image as AntdImage } from 'antd'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  message: Message
+}
+
+const MessageAttachments: FC<Props> = ({ message }) => {
+  return <Container>{message.images?.map((image) => <Image src={image} key={image} width="33%" />)}</Container>
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-top: 8px;
+`
+
+const Image = styled(AntdImage)`
+  border-radius: 10px;
+`
+
+export default MessageAttachments

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

@@ -3,7 +3,7 @@ import { useProviderByAssistant } from '@renderer/hooks/useProvider'
 import { getTopic } from '@renderer/hooks/useTopic'
 import { fetchChatCompletion, fetchMessagesSummary } from '@renderer/services/api'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { estimateHistoryTokenCount, filterMessages } from '@renderer/services/messages'
+import { estimateHistoryTokenCount, filterMessages, getContextCount } 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'
@@ -20,9 +20,10 @@ import Prompt from './Prompt'
 interface Props {
   assistant: Assistant
   topic: Topic
+  setActiveTopic: (topic: Topic) => void
 }
 
-const Messages: FC<Props> = ({ assistant, topic }) => {
+const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   const [messages, setMessages] = useState<Message[]>([])
   const [lastMessage, setLastMessage] = useState<Message | null>(null)
   const provider = useProviderByAssistant(assistant)
@@ -33,7 +34,7 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
     (message: Message) => {
       const _messages = [...messages, message]
       setMessages(_messages)
-      localforage.setItem(`topic:${topic.id}`, { ...topic, messages: _messages })
+      localforage.setItem(`topic:${topic.id}`, { id: topic.id, messages: _messages })
     },
     [messages, topic]
   )
@@ -42,9 +43,13 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
     const _topic = getTopic(assistant, topic.id)
     if (_topic && _topic.name === t('chat.default.topic.name') && messages.length >= 2) {
       const summaryText = await fetchMessagesSummary({ messages, assistant })
-      summaryText && updateTopic({ ..._topic, name: summaryText })
+      if (summaryText) {
+        const data = { ..._topic, name: summaryText }
+        setActiveTopic(data)
+        updateTopic(data)
       }
-  }, [assistant, messages, topic, updateTopic])
+    }
+  }, [assistant, messages, setActiveTopic, topic.id, updateTopic])
 
   const onDeleteMessage = useCallback(
     (message: Message) => {
@@ -84,6 +89,28 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
         setMessages([])
         updateTopic({ ...topic, messages: [] })
         LocalStorage.clearTopicMessages(topic.id)
+      }),
+      EventEmitter.on(EVENT_NAMES.NEW_CONTEXT, () => {
+        const lastMessage = last(messages)
+
+        if (lastMessage && lastMessage.type === 'clear') {
+          return
+        }
+
+        if (messages.length === 0) {
+          return
+        }
+
+        onSendMessage({
+          id: uuid(),
+          assistantId: assistant.id,
+          role: 'user',
+          content: '',
+          topicId: topic.id,
+          createdAt: new Date().toISOString(),
+          status: 'success',
+          type: 'clear'
+        } as Message)
       })
     ]
     return () => unsubscribes.forEach((unsub) => unsub())
@@ -101,7 +128,10 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
   }, [messages])
 
   useEffect(() => {
-    EventEmitter.emit(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, estimateHistoryTokenCount(assistant, messages))
+    EventEmitter.emit(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, {
+      tokensCount: estimateHistoryTokenCount(assistant, messages),
+      contextCount: getContextCount(assistant, messages)
+    })
   }, [assistant, messages])
 
   return (
@@ -117,6 +147,7 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
 }
 
 const Container = styled.div`
+  position: relative;
   display: flex;
   flex-direction: column;
   overflow-y: auto;

src/renderer/src/pages/home/Navbar.tsx

@@ -0,0 +1,164 @@
+import { FormOutlined } from '@ant-design/icons'
+import { Navbar, NavbarCenter, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
+import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
+import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
+import { isMac, isWindows } from '@renderer/config/constant'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
+import { getDefaultTopic } from '@renderer/services/assistant'
+import { Assistant, Topic } from '@renderer/types'
+import { Switch } from 'antd'
+import { FC, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import SelectModelButton from './components/SelectModelButton'
+
+interface Props {
+  activeAssistant: Assistant
+  activeTopic: Topic
+  setActiveAssistant: (assistant: Assistant) => void
+  setActiveTopic: (topic: Topic) => void
+}
+
+const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, setActiveTopic }) => {
+  const { assistant, addTopic } = useAssistant(activeAssistant.id)
+  const { t } = useTranslation()
+  const { showAssistants, toggleShowAssistants } = useShowAssistants()
+  const { showTopics, toggleShowTopics } = useShowTopics()
+  const { theme, toggleTheme } = useTheme()
+  const { topicPosition } = useSettings()
+
+  const onCreateAssistant = async () => {
+    const assistant = await AddAssistantPopup.show()
+    assistant && setActiveAssistant(assistant)
+  }
+
+  const addNewTopic = useCallback(() => {
+    const topic = getDefaultTopic()
+    addTopic(topic)
+    setActiveTopic(topic)
+  }, [addTopic, setActiveTopic])
+
+  return (
+    <Navbar>
+      {showAssistants && (
+        <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
+          <NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
+            <i className="iconfont icon-hide-sidebar" />
+          </NewButton>
+          <NewButton onClick={onCreateAssistant}>
+            <i className="iconfont icon-a-addchat" />
+          </NewButton>
+        </NavbarLeft>
+      )}
+      {showTopics && topicPosition === 'left' && (
+        <NavbarCenter
+          style={{
+            paddingLeft: isMac && !showAssistants ? 16 : 8,
+            paddingRight: 8,
+            maxWidth: 'var(--topic-list-width)',
+            justifyContent: 'space-between'
+          }}>
+          <HStack alignItems="center">
+            {!showAssistants && (
+              <NewButton onClick={toggleShowAssistants} style={{ marginRight: isMac ? 8 : 25 }}>
+                <i className="iconfont icon-show-sidebar" />
+              </NewButton>
+            )}
+            {showAssistants && (
+              <TitleText>
+                {t('chat.topics.title')} ({assistant.topics.length})
+              </TitleText>
+            )}
+          </HStack>
+          <NewButton onClick={addNewTopic}>
+            <FormOutlined />
+          </NewButton>
+        </NavbarCenter>
+      )}
+      <NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12, flex: 1 }}>
+        <HStack alignItems="center">
+          {!showAssistants && (topicPosition === 'left' ? !showTopics : true) && (
+            <NewButton
+              onClick={() => toggleShowAssistants()}
+              style={{ marginRight: isMac ? 8 : 25, marginLeft: isMac ? 4 : 0 }}>
+              <i className="iconfont icon-show-sidebar" />
+            </NewButton>
+          )}
+          <TitleText
+            style={{ marginRight: 10, cursor: 'pointer' }}
+            className="nodrag"
+            onClick={() => AssistantSettingPopup.show({ assistant })}>
+            {assistant.name}
+          </TitleText>
+          <SelectModelButton assistant={assistant} />
+        </HStack>
+        <HStack alignItems="center">
+          <ThemeSwitch
+            checkedChildren={<i className="iconfont icon-theme icon-dark1" />}
+            unCheckedChildren={<i className="iconfont icon-theme icon-theme-light" />}
+            checked={theme === 'dark'}
+            onChange={toggleTheme}
+          />
+          {topicPosition === 'right' && (
+            <NewButton onClick={toggleShowTopics}>
+              <i className={`iconfont icon-${showTopics ? 'show' : 'hide'}-sidebar`} />
+            </NewButton>
+          )}
+        </HStack>
+      </NavbarRight>
+    </Navbar>
+  )
+}
+
+export const NewButton = styled.div`
+  -webkit-app-region: none;
+  border-radius: 4px;
+  height: 30px;
+  padding: 0 7px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  .iconfont {
+    font-size: 19px;
+    color: var(--color-icon);
+    &.icon-a-addchat {
+      font-size: 20px;
+    }
+    &.icon-a-darkmode {
+      font-size: 20px;
+    }
+  }
+  .anticon {
+    color: var(--color-icon);
+    font-size: 17px;
+  }
+  &:hover {
+    background-color: var(--color-background-mute);
+    color: var(--color-icon-white);
+  }
+`
+
+const TitleText = styled.span`
+  margin-left: 5px;
+  font-family: Ubuntu;
+  font-size: 13px;
+  font-weight: 500;
+`
+
+const ThemeSwitch = styled(Switch)`
+  -webkit-app-region: no-drag;
+  margin-right: 10px;
+  .icon-theme {
+    font-size: 14px;
+  }
+`
+
+export default HeaderNavbar

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

@@ -1,5 +1,6 @@
 import { BarsOutlined, SettingOutlined } from '@ant-design/icons'
-import { useShowRightSidebar } from '@renderer/hooks/useStore'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowTopics } from '@renderer/hooks/useStore'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { Assistant, Topic } from '@renderer/types'
 import { Segmented } from 'antd'
@@ -7,8 +8,8 @@ import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import SettingsTab from './SettingsTab'
-import TopicsTab from './TopicsTab'
+import Settings from './Settings'
+import Topics from './Topics'
 
 interface Props {
   assistant: Assistant
@@ -18,44 +19,47 @@ interface Props {
 
 const RightSidebar: FC<Props> = (props) => {
   const [tab, setTab] = useState<'topic' | 'settings'>('topic')
-  const { rightSidebarShown, showRightSidebar, hideRightSidebar } = useShowRightSidebar()
+  const { showTopics, setShowTopics } = useShowTopics()
+  const { topicPosition } = useSettings()
   const { t } = useTranslation()
+
   const isTopicTab = tab === 'topic'
   const isSettingsTab = tab === 'settings'
+  const borderStyle = '0.5px solid var(--color-border)'
 
   useEffect(() => {
     const unsubscribes = [
       EventEmitter.on(EVENT_NAMES.SHOW_TOPIC_SIDEBAR, (): any => {
-        if (rightSidebarShown && isTopicTab) {
-          return hideRightSidebar()
+        if (showTopics && isTopicTab) {
+          return setShowTopics(false)
         }
-        if (rightSidebarShown) {
+        if (showTopics) {
           return setTab('topic')
         }
-        showRightSidebar()
+        setShowTopics(true)
         setTab('topic')
       }),
       EventEmitter.on(EVENT_NAMES.SHOW_CHAT_SETTINGS, (): any => {
-        if (rightSidebarShown && isSettingsTab) {
-          return hideRightSidebar()
+        if (showTopics && isSettingsTab) {
+          return setShowTopics(false)
         }
-        if (rightSidebarShown) {
+        if (showTopics) {
           return setTab('settings')
         }
-        showRightSidebar()
+        setShowTopics(true)
         setTab('settings')
       }),
       EventEmitter.on(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR, () => setTab('topic'))
     ]
     return () => unsubscribes.forEach((unsub) => unsub())
-  }, [hideRightSidebar, isSettingsTab, isTopicTab, rightSidebarShown, showRightSidebar])
+  }, [isSettingsTab, isTopicTab, showTopics, setShowTopics])
 
-  if (!rightSidebarShown) {
+  if (!showTopics) {
     return null
   }
 
   return (
-    <Container>
+    <Container style={topicPosition === 'left' ? { borderRight: borderStyle } : { borderLeft: borderStyle }}>
       <Segmented
         value={tab}
         style={{ borderRadius: 0, padding: '10px', gap: 5, borderBottom: '0.5px solid var(--color-border)' }}
@@ -67,8 +71,8 @@ const RightSidebar: FC<Props> = (props) => {
         onChange={(value) => setTab(value as 'topic' | 'settings')}
       />
       <TabContent>
-        {tab === 'topic' && <TopicsTab {...props} />}
-        {tab === 'settings' && <SettingsTab assistant={props.assistant} />}
+        {tab === 'topic' && <Topics {...props} />}
+        {tab === 'settings' && <Settings assistant={props.assistant} />}
       </TabContent>
     </Container>
   )
@@ -79,7 +83,6 @@ const Container = styled.div`
   flex-direction: column;
   width: var(--topic-list-width);
   height: calc(100vh - var(--navbar-height));
-  border-left: 0.5px solid var(--color-border);
   .collapsed {
     width: 0;
     border-left: none;
@@ -91,6 +94,7 @@ const TabContent = styled.div`
   flex: 1;
   flex-direction: column;
   overflow-y: auto;
+  overflow-x: hidden;
 `
 
 export default RightSidebar