chore(version): 0.7.5

- Added smooth all property transition effect to Icon component.
- Added hover effect and conditional rendering for Switch Topic Sidebar button on current assistant.
- Updated the existing conditional options array to consistently include both topic and settings options.
- Improved hover effects on topic list items.

.eslintrc.cjs

@@ -15,6 +15,7 @@ module.exports = {
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
     'react/prop-types': 'off',
     'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error'
+    'simple-import-sort/exports': 'error',
+    'react/no-is-mounted': 'off'
   }
 }

.gitignore

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

.vscode/settings.json

@@ -29,5 +29,6 @@
   },
   "[markdown]": {
     "files.trimTrailingWhitespace": false
-  }
+  },
+  "i18n-ally.localesPaths": ["src/renderer/src/i18n"]
 }

.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,15 @@ 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'
+  - '!scripts'
+  - '!resources'
 asarUnpack:
   - resources/**
 win:
@@ -56,4 +59,11 @@ electronDownload:
 afterSign: scripts/notarize.js
 releaseInfo:
   releaseNotes: |
-    新增AI小程序模块
+    本次更新：
+      增加了30多种文本文档格式选择
+      支持粘贴图片和文件到聊天输入框
+      支持将对话移动到其他智能体了
+    近期更新：
+      支持 Vision 模型
+      新增文件功能
+      支持从特定消息创建新分支

electron.vite.config.ts

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

package.json

@@ -1,10 +1,16 @@
 {
-  "name": "cherry-studio",
-  "version": "0.6.0",
+  "name": "CherryStudio",
+  "version": "0.7.5",
+  "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",
@@ -50,8 +54,10 @@
     "axios": "^1.7.3",
     "browser-image-compression": "^2.0.2",
     "dayjs": "^1.11.11",
+    "dexie": "^4.0.8",
+    "dexie-react-hooks": "^1.1.7",
     "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",
@@ -60,11 +66,13 @@
     "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",
+    "gpt-tokens": "^1.3.10",
     "i18next": "^23.11.5",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
+    "mime": "^4.0.4",
     "openai": "^4.52.1",
     "prettier": "^3.2.4",
     "react": "^18.2.0",
@@ -76,13 +84,14 @@
     "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",
     "remark-math": "^6.0.0",
     "sass": "^1.77.2",
     "styled-components": "^6.1.11",
-    "typescript": "^5.3.3",
+    "typescript": "^5.6.2",
     "uuid": "^10.0.0",
     "vite": "^5.0.12"
   },
@@ -91,7 +100,7 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "resolutions": {
-    "@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"
+  "packageManager": "yarn@4.5.0"
 }

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/config.ts

@@ -1,4 +1,22 @@
+import fs from 'node:fs'
+
+import { app } from 'electron'
 import Store from 'electron-store'
+import path from 'path'
+
+const isDev = process.env.NODE_ENV === 'development'
+
+isDev && app.setPath('userData', app.getPath('userData') + 'Dev')
+
+const getDataPath = () => {
+  const dataPath = path.join(app.getPath('userData'), 'Data')
+  if (!fs.existsSync(dataPath)) {
+    fs.mkdirSync(dataPath, { recursive: true })
+  }
+  return dataPath
+}
+
+export const DATA_PATH = getDataPath()
 
 export const appConfig = new Store()
 

src/main/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  VITE_MAIN_BUNDLE_ID: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

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,19 +1,19 @@
 import { electronApp, optimizer } from '@electron-toolkit/utils'
-import * as Sentry from '@sentry/electron/main'
-import { app, BrowserWindow, ipcMain, session, shell } from 'electron'
+import { app, BrowserWindow } from 'electron'
 import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer'
 
-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')
+  electronApp.setAppUserModelId(import.meta.env.VITE_MAIN_BUNDLE_ID || 'com.kangfenmao.CherryStudio')
 
   // Default open or close DevTools by F12 in development
   // and ignore CommandOrControl + R in production.
@@ -30,45 +30,13 @@ app.whenReady().then(() => {
 
   const mainWindow = createMainWindow()
 
-  const { autoUpdater } = new AppUpdater(mainWindow)
+  registerIpc(mainWindow, app)
 
-  // 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)
+  if (process.env.NODE_ENV === 'development') {
+    installExtension(REDUX_DEVTOOLS)
+      .then((name) => console.log(`Added Extension:  ${name}`))
+      .catch((err) => console.log('An error occurred: ', err))
+  }
 })
 
 // Quit when all windows are closed, except on macOS. There, it's common
@@ -82,6 +50,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,75 @@
+import { FileType } from '@types'
+import { BrowserWindow, ipcMain, OpenDialogOptions, session, shell } from 'electron'
+
+import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
+import AppUpdater from './services/AppUpdater'
+import FileManager from './services/FileManager'
+import { openFile, saveFile } from './utils/file'
+import { compress, decompress } from './utils/zip'
+import { createMinappWindow } from './window'
+
+const fileManager = new FileManager()
+
+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('file:base64Image', async (_, id) => await fileManager.base64Image(id))
+  ipcMain.handle('file:select', async (_, options?: OpenDialogOptions) => await fileManager.selectFile(options))
+  ipcMain.handle('file:upload', async (_, file: FileType) => await fileManager.uploadFile(file))
+  ipcMain.handle('file:clear', async () => await fileManager.clear())
+  ipcMain.handle('file:read', async (_, id: string) => await fileManager.readFile(id))
+  ipcMain.handle('file:delete', async (_, id: string) => await fileManager.deleteFile(id))
+  ipcMain.handle('file:get', async (_, filePath: string) => await fileManager.getFile(filePath))
+  ipcMain.handle('file:create', async (_, fileName: string) => await fileManager.createTempFile(fileName))
+  ipcMain.handle(
+    'file:write',
+    async (_, filePath: string, data: Uint8Array | string) => await fileManager.writeFile(filePath, data)
+  )
+
+  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/services/AppUpdater.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/services/FileManager.ts

@@ -0,0 +1,198 @@
+import { getFileType } from '@main/utils/file'
+import { FileType } from '@types'
+import * as crypto from 'crypto'
+import { app, dialog, OpenDialogOptions } from 'electron'
+import * as fs from 'fs'
+import * as path from 'path'
+import { v4 as uuidv4 } from 'uuid'
+
+class FileManager {
+  private storageDir: string
+
+  constructor() {
+    this.storageDir = path.join(app.getPath('userData'), 'Data', 'Files')
+    this.initStorageDir()
+  }
+
+  private initStorageDir(): void {
+    if (!fs.existsSync(this.storageDir)) {
+      fs.mkdirSync(this.storageDir, { recursive: true })
+    }
+  }
+
+  private async getFileHash(filePath: string): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const hash = crypto.createHash('md5')
+      const stream = fs.createReadStream(filePath)
+      stream.on('data', (data) => hash.update(data))
+      stream.on('end', () => resolve(hash.digest('hex')))
+      stream.on('error', reject)
+    })
+  }
+
+  async findDuplicateFile(filePath: string): Promise<FileType | null> {
+    const stats = fs.statSync(filePath)
+    const fileSize = stats.size
+
+    const files = await fs.promises.readdir(this.storageDir)
+    for (const file of files) {
+      const storedFilePath = path.join(this.storageDir, file)
+      const storedStats = fs.statSync(storedFilePath)
+
+      if (storedStats.size === fileSize) {
+        const [originalHash, storedHash] = await Promise.all([
+          this.getFileHash(filePath),
+          this.getFileHash(storedFilePath)
+        ])
+
+        if (originalHash === storedHash) {
+          const ext = path.extname(file)
+          const id = path.basename(file, ext)
+          return {
+            id,
+            origin_name: file,
+            name: file + ext,
+            path: storedFilePath,
+            created_at: storedStats.birthtime,
+            size: storedStats.size,
+            ext,
+            type: getFileType(ext),
+            count: 2
+          }
+        }
+      }
+    }
+
+    return null
+  }
+
+  async selectFile(options?: OpenDialogOptions): Promise<FileType[] | null> {
+    const defaultOptions: OpenDialogOptions = {
+      properties: ['openFile']
+    }
+
+    const dialogOptions = { ...defaultOptions, ...options }
+
+    const result = await dialog.showOpenDialog(dialogOptions)
+
+    if (result.canceled || result.filePaths.length === 0) {
+      return null
+    }
+
+    const fileMetadataPromises = result.filePaths.map(async (filePath) => {
+      const stats = fs.statSync(filePath)
+      const ext = path.extname(filePath)
+      const fileType = getFileType(ext)
+
+      return {
+        id: uuidv4(),
+        origin_name: path.basename(filePath),
+        name: path.basename(filePath),
+        path: filePath,
+        created_at: stats.birthtime,
+        size: stats.size,
+        ext: ext,
+        type: fileType,
+        count: 1
+      }
+    })
+
+    return Promise.all(fileMetadataPromises)
+  }
+
+  async uploadFile(file: FileType): Promise<FileType> {
+    const duplicateFile = await this.findDuplicateFile(file.path)
+
+    if (duplicateFile) {
+      return duplicateFile
+    }
+
+    const uuid = uuidv4()
+    const origin_name = path.basename(file.path)
+    const ext = path.extname(origin_name)
+    const destPath = path.join(this.storageDir, uuid + ext)
+
+    await fs.promises.copyFile(file.path, destPath)
+    const stats = await fs.promises.stat(destPath)
+    const fileType = getFileType(ext)
+
+    const fileMetadata: FileType = {
+      id: uuid,
+      origin_name,
+      name: uuid + ext,
+      path: destPath,
+      created_at: stats.birthtime,
+      size: stats.size,
+      ext: ext,
+      type: fileType,
+      count: 1
+    }
+
+    return fileMetadata
+  }
+
+  async getFile(filePath: string): Promise<FileType | null> {
+    if (!fs.existsSync(filePath)) {
+      return null
+    }
+
+    const stats = fs.statSync(filePath)
+    const ext = path.extname(filePath)
+    const fileType = getFileType(ext)
+
+    const fileInfo: FileType = {
+      id: uuidv4(),
+      origin_name: path.basename(filePath),
+      name: path.basename(filePath),
+      path: filePath,
+      created_at: stats.birthtime,
+      size: stats.size,
+      ext: ext,
+      type: fileType,
+      count: 1
+    }
+
+    return fileInfo
+  }
+
+  async deleteFile(id: string): Promise<void> {
+    await fs.promises.unlink(path.join(this.storageDir, id))
+  }
+
+  async readFile(id: string): Promise<string> {
+    const filePath = path.join(this.storageDir, id)
+    return fs.readFileSync(filePath, 'utf8')
+  }
+
+  async createTempFile(fileName: string): Promise<string> {
+    const tempDir = path.join(app.getPath('temp'), 'CherryStudio')
+    if (!fs.existsSync(tempDir)) {
+      fs.mkdirSync(tempDir, { recursive: true })
+    }
+    const tempFilePath = path.join(tempDir, `temp_file_${uuidv4()}_${fileName}`)
+    return tempFilePath
+  }
+
+  async writeFile(filePath: string, data: Uint8Array | string): Promise<void> {
+    await fs.promises.writeFile(filePath, data)
+  }
+
+  async base64Image(id: string): Promise<{ mime: string; base64: string; data: string }> {
+    const filePath = path.join(this.storageDir, id)
+    const data = await fs.promises.readFile(filePath)
+    const base64 = data.toString('base64')
+    const mime = `image/${path.extname(filePath).slice(1)}`
+    return {
+      mime,
+      base64,
+      data: `data:${mime};base64,${base64}`
+    }
+  }
+
+  async clear(): Promise<void> {
+    await fs.promises.rmdir(this.storageDir, { recursive: true })
+    await this.initStorageDir()
+  }
+}
+
+export default FileManager

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,158 @@
+import { dialog, OpenDialogOptions, OpenDialogReturnValue, SaveDialogOptions, SaveDialogReturnValue } from 'electron'
+import logger from 'electron-log'
+import { writeFileSync } from 'fs'
+import { readFile } from 'fs/promises'
+
+import { FileTypes } from '../../renderer/src/types'
+
+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) {
+      await writeFileSync(result.filePath, content, { encoding: 'utf-8' })
+    }
+  } 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
+  }
+}
+
+export function getFileType(ext: string): FileTypes {
+  const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
+  const videoExts = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.mkv']
+  const audioExts = ['.mp3', '.wav', '.ogg', '.flac', '.aac']
+  const documentExts = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx']
+  const textExts = [
+    '.txt', // 普通文本文件
+    '.md', // Markdown 文件
+    '.mdx', // Markdown 文件
+    '.html', // HTML 文件
+    '.htm', // HTML 文件的另一种扩展名
+    '.xml', // XML 文件
+    '.json', // JSON 文件
+    '.yaml', // YAML 文件
+    '.yml', // YAML 文件的另一种扩展名
+    '.csv', // 逗号分隔值文件
+    '.tsv', // 制表符分隔值文件
+    '.ini', // 配置文件
+    '.log', // 日志文件
+    '.rtf', // 富文本格式文件
+    '.tex', // LaTeX 文件
+    '.srt', // 字幕文件
+    '.xhtml', // XHTML 文件
+    '.nfo', // 信息文件（主要用于场景发布）
+    '.conf', // 配置文件
+    '.config', // 配置文件
+    '.env', // 环境变量文件
+    '.properties', // 配置属性文件
+    '.latex', // LaTeX 文档文件
+    '.rst', // reStructuredText 文件
+    '.php', // PHP 脚本文件，包含嵌入的 HTML
+    '.js', // JavaScript 文件（部分是文本，部分可能包含代码）
+    '.ts', // TypeScript 文件
+    '.jsp', // JavaServer Pages 文件
+    '.aspx', // ASP.NET 文件
+    '.bat', // Windows 批处理文件
+    '.sh', // Unix/Linux Shell 脚本文件
+    '.py', // Python 脚本文件
+    '.rb', // Ruby 脚本文件
+    '.pl', // Perl 脚本文件
+    '.sql', // SQL 脚本文件
+    '.css', // Cascading Style Sheets 文件
+    '.less', // Less CSS 预处理器文件
+    '.scss', // Sass CSS 预处理器文件
+    '.sass', // Sass 文件
+    '.styl', // Stylus CSS 预处理器文件
+    '.coffee', // CoffeeScript 文件
+    '.ino', // Arduino 代码文件
+    '.ino', // Arduino 代码文件
+    '.asm', // Assembly 语言文件
+    '.go', // Go 语言文件
+    '.scala', // Scala 语言文件
+    '.swift', // Swift 语言文件
+    '.kt', // Kotlin 语言文件
+    '.rs', // Rust 语言文件
+    '.lua', // Lua 语言文件
+    '.groovy', // Groovy 语言文件
+    '.dart', // Dart 语言文件
+    '.hs', // Haskell 语言文件
+    '.clj', // Clojure 语言文件
+    '.cljs', // ClojureScript 语言文件
+    '.elm', // Elm 语言文件
+    '.erl', // Erlang 语言文件
+    '.ex', // Elixir 语言文件
+    '.exs', // Elixir 脚本文件
+    '.pug', // Pug (formerly Jade) 模板文件
+    '.haml', // Haml 模板文件
+    '.slim', // Slim 模板文件
+    '.tpl', // 模板文件（通用）
+    '.ejs', // Embedded JavaScript 模板文件
+    '.hbs', // Handlebars 模板文件
+    '.mustache', // Mustache 模板文件
+    '.jade', // Jade 模板文件 (已重命名为 Pug)
+    '.twig', // Twig 模板文件
+    '.blade', // Blade 模板文件 (Laravel)
+    '.vue', // Vue.js 单文件组件
+    '.jsx', // React JSX 文件
+    '.tsx', // React TSX 文件
+    '.graphql', // GraphQL 查询语言文件
+    '.gql', // GraphQL 查询语言文件
+    '.proto', // Protocol Buffers 文件
+    '.thrift', // Thrift 文件
+    '.toml', // TOML 配置文件
+    '.edn', // Clojure 数据表示文件
+    '.cake', // CakePHP 配置文件
+    '.ctp', // CakePHP 视图文件
+    '.cfm', // ColdFusion 标记语言文件
+    '.cfc', // ColdFusion 组件文件
+    '.m', // Objective-C 源文件
+    '.mm', // Objective-C++ 源文件
+    '.gradle', // Gradle 构建文件
+    '.groovy', // Gradle 构建文件
+    '.gradle', // Gradle 构建文件
+    '.kts' // Kotlin Script 文件
+  ]
+
+  ext = ext.toLowerCase()
+  if (imageExts.includes(ext)) return FileTypes.IMAGE
+  if (videoExts.includes(ext)) return FileTypes.VIDEO
+  if (audioExts.includes(ext)) return FileTypes.AUDIO
+  if (textExts.includes(ext)) return FileTypes.TEXT
+  if (documentExts.includes(ext)) return FileTypes.DOCUMENT
+  return FileTypes.OTHER
+}

src/main/utils/index.ts

@@ -0,0 +1,7 @@
+import path from 'node:path'
+
+import { app } from 'electron'
+
+export function getResourcePath() {
+  return path.join(app.getAppPath(), 'resources')
+}

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,
     }
   })
@@ -62,14 +62,7 @@ export function createMainWindow() {
   })
 
   mainWindow.webContents.setWindowOpenHandler((details) => {
-    const websiteReg = /accounts.google.com/i
-
-    if (websiteReg.test(details.url)) {
-      createMinappWindow({ url: details.url, windowOptions: { width: 1000, height: 680 } })
-    } else {
-      shell.openExternal(details.url)
-    }
-
+    shell.openExternal(details.url)
     return { action: 'deny' }
   })
 
@@ -102,50 +95,31 @@ export function createMainWindow() {
 
 export function createMinappWindow({
   url,
+  parent,
   windowOptions
 }: {
   url: string
+  parent?: BrowserWindow
   windowOptions?: Electron.BrowserWindowConstructorOptions
 }) {
-  const width = 1000
-  const height = 680
-  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,6 @@
 import { ElectronAPI } from '@electron-toolkit/preload'
+import { FileType } from '@renderer/types'
+import type { OpenDialogOptions } from 'electron'
 
 declare global {
   interface Window {
@@ -12,9 +14,24 @@ 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>
+      file: {
+        select: (options?: OpenDialogOptions) => Promise<FileType[] | null>
+        upload: (file: FileType) => Promise<FileType>
+        delete: (fileId: string) => Promise<void>
+        read: (fileId: string) => Promise<string>
+        base64Image: (fileId: string) => Promise<{ mime: string; base64: string; data: string }>
+        clear: () => Promise<void>
+        get: (filePath: string) => Promise<FileType | null>
+        create: (fileName: string) => Promise<string>
+        write: (filePath: string, data: Uint8Array | string) => Promise<void>
+      }
     }
   }
 }

src/preload/index.ts

@@ -1,5 +1,5 @@
 import { electronAPI } from '@electron-toolkit/preload'
-import { contextBridge, ipcRenderer } from 'electron'
+import { contextBridge, ipcRenderer, OpenDialogOptions } from 'electron'
 
 // Custom APIs for renderer
 const api = {
@@ -7,9 +7,26 @@ 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 }) => {
+    return ipcRenderer.invoke('save-file', path, content, options)
+  },
+  compress: (text: string) => ipcRenderer.invoke('zip:compress', text),
+  decompress: (text: Buffer) => ipcRenderer.invoke('zip:decompress', text),
+  file: {
+    select: (options?: OpenDialogOptions) => ipcRenderer.invoke('file:select', options),
+    upload: (filePath: string) => ipcRenderer.invoke('file:upload', filePath),
+    delete: (fileId: string) => ipcRenderer.invoke('file:delete', fileId),
+    read: (fileId: string) => ipcRenderer.invoke('file:read', fileId),
+    base64Image: (fileId: string) => ipcRenderer.invoke('file:base64Image', fileId),
+    clear: () => ipcRenderer.invoke('file:clear'),
+    get: (filePath: string) => ipcRenderer.invoke('file:get', filePath),
+    create: (fileName: string) => ipcRenderer.invoke('file:create', fileName),
+    write: (filePath: string, data: Uint8Array | string) => ipcRenderer.invoke('file:write', filePath, data)
+  }
 }
 
 // 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: file: *; frame-src * file:" />
   </head>
   <body>
     <div id="root"></div>

src/renderer/src/App.tsx

@@ -1,3 +1,5 @@
+import '@renderer/databases'
+
 import store, { persistor } from '@renderer/store'
 import { Provider } from 'react-redux'
 import { HashRouter, Route, Routes } from 'react-router-dom'
@@ -5,13 +7,14 @@ 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 FilesPage from './pages/files/FilesPage'
 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 (
@@ -24,6 +27,7 @@ function App(): JSX.Element {
                 <Sidebar />
                 <Routes>
                   <Route path="/" element={<HomePage />} />
+                  <Route path="/files" element={<FilesPage />} />
                   <Route path="/agents" element={<AgentsPage />} />
                   <Route path="/translate" element={<TranslatePage />} />
                   <Route path="/apps" element={<AppsPage />} />

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

@@ -1,6 +1,6 @@
 @font-face {
   font-family: 'iconfont'; /* Project id 4563475 */
-  src: url('iconfont.woff2?t=1724204739157') format('woff2');
+  src: url('iconfont.woff2?t=1725606177995') format('woff2');
 }
 
 .iconfont {
@@ -11,6 +11,30 @@
   -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';
 }
@@ -39,11 +63,11 @@
   content: '\e758';
 }
 
-.icon-hidesidebarhoriz:before {
+.icon-hide-sidebar:before {
   content: '\e8eb';
 }
 
-.icon-showsidebarhoriz:before {
+.icon-show-sidebar:before {
   content: '\e944';
 }
 

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

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16C0 23.08 4.58 29.06 10.94 31.18C11.74 31.32 12.04 30.84 12.04 30.42C12.04 30.04 12.02 28.78 12.02 27.44C8 28.18 6.96 26.46 6.64 25.56C6.46 25.1 5.68 23.68 5 23.3C4.44 23 3.64 22.26 4.98 22.24C6.24 22.22 7.14 23.4 7.44 23.88C8.88 26.3 11.18 25.62 12.1 25.2C12.24 24.16 12.66 23.46 13.12 23.06C9.56 22.66 5.84 21.28 5.84 15.16C5.84 13.42 6.46 11.98 7.48 10.86C7.32 10.46 6.76 8.82 7.64 6.62C7.64 6.62 8.98 6.2 12.04 8.26C13.32 7.9 14.68 7.72 16.04 7.72C17.4 7.72 18.76 7.9 20.04 8.26C23.1 6.18 24.44 6.62 24.44 6.62C25.32 8.82 24.76 10.46 24.6 10.86C25.62 11.98 26.24 13.4 26.24 15.16C26.24 21.3 22.5 22.66 18.94 23.06C19.52 23.56 20.02 24.52 20.02 26.02C20.02 28.16 20 29.88 20 30.42C20 30.84 20.3 31.34 21.1 31.18C27.42 29.06 32 23.06 32 16C32 7.16 24.84 0 16 0V0Z" fill="#24292E"/>
+</svg>

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

@@ -22,22 +22,22 @@
 
   --color-background: #181818;
   --color-background-soft: var(--color-black-soft);
-  --color-background-mute: var(--color-black-mute);
+  --color-background-mute: var(--color-black-soft);
 
-  --color-primary: #135200;
-  --color-primary-soft: #13520099;
-  --color-primary-mute: #13520033;
+  --color-primary: #00b96b;
+  --color-primary-soft: #00b96b99;
+  --color-primary-mute: #00b96b33;
 
   --color-text: var(--color-text-1);
   --color-icon: #ffffff99;
   --color-icon-white: #ffffff;
-  --color-border: #000;
+  --color-border: #ffffff20;
   --color-border-soft: #ffffff20;
   --color-error: #f44336;
   --color-link: #1677ff;
   --color-code-background: #323232;
-  --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
-  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+  --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);
@@ -48,9 +48,9 @@
   --status-bar-height: 40px;
   --input-bar-height: 85px;
 
-  --assistants-width: 245px;
-  --topic-list-width: 260px;
-  --settings-width: var(--assistants-width);
+  --assistants-width: 280px;
+  --topic-list-width: 280px;
+  --settings-width: 260px;
 }
 
 body[theme-mode='light'] {
@@ -86,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);
@@ -182,6 +182,12 @@ body,
   -webkit-app-region: no-drag;
 }
 
+.text-nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .minapp-drawer {
   .ant-drawer-content-wrapper {
     box-shadow: none;
@@ -204,3 +210,30 @@ body,
     background-color: transparent !important;
   }
 }
+
+.ant-drawer-header {
+  -webkit-app-region: no-drag;
+}
+
+.segmented-tab {
+  .ant-segmented-item-label {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    font-size: 13px;
+  }
+  .iconfont {
+    font-size: 13px;
+    margin-left: -2px;
+  }
+  .anticon-setting {
+    font-size: 12px;
+  }
+  .icon-business-smart-assistant {
+    margin-right: -2px;
+  }
+  .ant-segmented-item-icon + * {
+    margin-left: 4px;
+  }
+}

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,18 +110,28 @@
 
   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;
+      }
     }
-    code {
-      background: none;
-      padding: 0;
-      border-radius: 0;
-    }
+  }
+
+  pre + pre {
+    margin-top: 10px;
   }
 
   blockquote {

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,39 @@
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import {
+  DragDropContext,
+  Draggable,
+  Droppable,
+  DroppableProps,
+  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
+  listStyle?: React.CSSProperties
   children: (item: T, index: number) => React.ReactNode
   onUpdate: (list: T[]) => void
-  onDragStart?: () => void
-  onDragEnd?: () => void
+  onDragStart?: OnDragStartResponder
+  onDragEnd?: OnDragEndResponder
+  droppableProps?: Partial<DroppableProps>
 }
 
-const DragableList: FC<Props<any>> = ({ children, list, onDragStart, onUpdate, onDragEnd }) => {
-  const _onDragEnd = (result: DropResult) => {
-    onDragEnd?.()
+const DragableList: FC<Props<any>> = ({
+  children,
+  list,
+  style,
+  listStyle,
+  droppableProps,
+  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
@@ -23,17 +44,17 @@ const DragableList: FC<Props<any>> = ({ children, list, onDragStart, onUpdate, o
 
   return (
     <DragDropContext onDragStart={onDragStart} onDragEnd={_onDragEnd}>
-      <Droppable droppableId="droppable">
+      <Droppable droppableId="droppable" {...droppableProps}>
         {(provided) => (
-          <div {...provided.droppableProps} ref={provided.innerRef}>
+          <div {...provided.droppableProps} ref={provided.innerRef} style={{ ...style }}>
             {list.map((item, index) => (
-              <Draggable key={`draggable_${item.id}_${index}`} draggableId={item.id} index={index}>
+              <Draggable key={`draggable_${item.id}_${index}`} draggableId={item.id} index={index} {...droppableProps}>
                 {(provided) => (
                   <div
                     ref={provided.innerRef}
                     {...provided.draggableProps}
                     {...provided.dragHandleProps}
-                    style={{ ...provided.draggableProps.style, marginBottom: 8 }}>
+                    style={{ ...provided.draggableProps.style, marginBottom: 8, ...listStyle }}>
                     {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/VisionIcon.tsx

@@ -0,0 +1,15 @@
+import { EyeOutlined } from '@ant-design/icons'
+import React, { FC } from 'react'
+import styled from 'styled-components'
+
+const VisionIcon: FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> = (props) => {
+  return <Icon {...(props as any)} />
+}
+
+const Icon = styled(EyeOutlined)`
+  color: var(--color-primary);
+  font-size: 14px;
+  margin-left: 4px;
+`
+
+export default VisionIcon

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

@@ -1,3 +1,4 @@
+/* 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'
@@ -5,7 +6,8 @@ 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'
@@ -17,7 +19,7 @@ interface Props {
 
 const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
   const [open, setOpen] = useState(true)
-  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const webviewRef = useRef<WebviewTag | null>(null)
 
   useBridge()
 
@@ -28,9 +30,11 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
     setTimeout(() => resolve({}), 300)
   }
 
+  MinApp.onClose = onClose
+
   const onReload = () => {
-    if (iframeRef.current) {
-      iframeRef.current.src = app.url
+    if (webviewRef.current) {
+      webviewRef.current.src = app.url
     }
   }
 
@@ -59,6 +63,27 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
     )
   }
 
+  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 />}
@@ -72,17 +97,17 @@ const PopupContainer: React.FC<Props> = ({ app, resolve }) => {
       maskClosable={false}
       closeIcon={null}
       style={{ marginLeft: 'var(--sidebar-width)' }}>
-      <Frame src={app.url} ref={iframeRef} />
+      <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;
-  background-color: white;
-`
+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;
@@ -140,6 +165,7 @@ const Button = styled.div`
 
 export default class MinApp {
   static topviewId = 0
+  static onClose = () => {}
   static close() {
     TopView.hide('MinApp')
     store.dispatch(setMinappShow(false))

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

@@ -1,14 +1,18 @@
+import { PlusOutlined, SearchOutlined } from '@ant-design/icons'
 import { TopView } from '@renderer/components/TopView'
 import systemAgents from '@renderer/config/agents.json'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { covertAgentToAssistant } from '@renderer/services/assistant'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
 import { Agent, Assistant } from '@renderer/types'
-import { Input, Modal, Tag } from 'antd'
-import { useMemo, useState } from 'react'
+import { Divider, Input, InputRef, Modal, Tag } from 'antd'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import { HStack } from '../Layout'
+
 interface Props {
   resolve: (value: Assistant | undefined) => void
 }
@@ -20,30 +24,38 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   const [searchText, setSearchText] = useState('')
   const { defaultAssistant } = useDefaultAssistant()
   const { assistants, addAssistant } = useAssistants()
+  const inputRef = useRef<InputRef>(null)
 
   const defaultAgent: Agent = useMemo(
     () => ({
       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)
+    setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_ASSISTANTS), 0)
     resolve(assistant)
     setOpen(false)
   }
@@ -57,30 +69,52 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     AddAssistantPopup.hide()
   }
 
+  useEffect(() => {
+    open && setTimeout(() => inputRef.current?.focus(), 0)
+  }, [open])
+
   return (
     <Modal
-      style={{ marginTop: '5vh' }}
-      title={t('chat.add.assistant.title')}
+      centered
       open={open}
       onCancel={onCancel}
       afterClose={onClose}
-      transitionName=""
-      maskTransitionName=""
+      transitionName="ant-move-down"
+      maskTransitionName="ant-fade"
+      styles={{ content: { borderRadius: 20, padding: 0, overflow: 'hidden', paddingBottom: 20 } }}
+      closeIcon={null}
       footer={null}>
-      <Input
-        placeholder={t('common.search')}
-        value={searchText}
-        onChange={(e) => setSearchText(e.target.value)}
-        allowClear
-        autoFocus
-        style={{ marginBottom: 16 }}
-      />
+      <HStack style={{ padding: '0 12px', marginTop: 5 }}>
+        <Input
+          prefix={
+            <SearchIcon>
+              <SearchOutlined />
+            </SearchIcon>
+          }
+          ref={inputRef}
+          placeholder={t('assistants.search')}
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          allowClear
+          autoFocus
+          style={{ paddingLeft: 0 }}
+          bordered={false}
+          size="large"
+        />
+      </HStack>
+      <Divider style={{ margin: 0 }} />
       <Container>
         {agents.map((agent) => (
-          <AgentItem key={agent.id} onClick={() => onCreateAssistant(agent)}>
-            {agent.emoji} {agent.name}
-            {agent.group === 'system' && <Tag color="orange">{t('agents.tag.system')}</Tag>}
-            {agent.group === 'user' && <Tag color="green">{t('agents.tag.user')}</Tag>}
+          <AgentItem
+            key={agent.id}
+            onClick={() => onCreateAssistant(agent)}
+            className={agent.id === 'default' ? 'default' : ''}>
+            <HStack alignItems="center" gap={5}>
+              {agent.id === 'default' && <PlusOutlined style={{ marginLeft: -2 }} />}
+              {agent.emoji} {agent.name}
+            </HStack>
+            {agent.group === 'system' && <Tag color="green">{t('agents.tag.system')}</Tag>}
+            {agent.group === 'user' && <Tag color="orange">{t('agents.tag.user')}</Tag>}
           </AgentItem>
         ))}
       </Container>
@@ -89,7 +123,9 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
 }
 
 const Container = styled.div`
+  padding: 0 12px;
   height: 50vh;
+  margin-top: 10px;
   overflow-y: auto;
   &::-webkit-scrollbar {
     display: none;
@@ -101,12 +137,14 @@ const AgentItem = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 8px;
+  padding: 10px 15px;
   border-radius: 8px;
   user-select: none;
-  background-color: var(--color-background-soft);
   margin-bottom: 8px;
   cursor: pointer;
+  &.default {
+    background-color: var(--color-background-soft);
+  }
   .anticon {
     font-size: 16px;
     color: var(--color-icon);
@@ -116,6 +154,18 @@ const AgentItem = styled.div`
   }
 `
 
+const SearchIcon = styled.div`
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-background-soft);
+  margin-right: 6px;
+`
+
 export default class AddAssistantPopup {
   static topviewId = 0
   static hide() {

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

@@ -34,7 +34,15 @@ 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"
+      centered>
       <Box mb={8}>{t('common.name')}</Box>
       <Input
         placeholder={t('common.assistant') + t('common.name')}
@@ -45,7 +53,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/Popups/UserPopup.tsx

@@ -1,6 +1,6 @@
 import useAvatar from '@renderer/hooks/useAvatar'
 import { useSettings } from '@renderer/hooks/useSettings'
-import LocalStorage from '@renderer/services/storage'
+import ImageStorage from '@renderer/services/storage'
 import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
 import { setUserName } from '@renderer/store/settings'
@@ -55,8 +55,8 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
             try {
               const _file = file.originFileObj as File
               const compressedFile = await compressImage(_file)
-              await LocalStorage.storeImage('avatar', compressedFile)
-              dispatch(setAvatar(await LocalStorage.getImage('avatar')))
+              await ImageStorage.set('avatar', compressedFile)
+              dispatch(setAvatar(await ImageStorage.get('avatar')))
             } catch (error: any) {
               window.message.error(error.message)
             }

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;
 `
@@ -64,7 +66,7 @@ const NavbarCenterContainer = styled.div`
 `
 
 const NavbarRightContainer = styled.div`
-  min-width: var(--settings-width);
+  min-width: var(--topic-list-width);
   display: flex;
   align-items: center;
   padding: 0 12px;

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

@@ -1,59 +1,82 @@
-import { TranslationOutlined } from '@ant-design/icons'
-import Logo from '@renderer/assets/images/logo.png'
+import { FolderOutlined, TranslationOutlined } from '@ant-design/icons'
 import { isMac } from '@renderer/config/constant'
+import { isLocalAi, UserAvatar } from '@renderer/config/env'
 import useAvatar from '@renderer/hooks/useAvatar'
+import { useSettings } from '@renderer/hooks/useSettings'
 import { useRuntime } 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 MinApp from '../MinApp'
 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 { 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)
   }
 
   return (
-    <Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBackgroundColor }}>
-      <AvatarImg src={avatar || Logo} draggable={false} className="nodrag" onClick={onEditUser} />
+    <Container
+      style={{
+        backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBgColor,
+        zIndex: minappShow ? 10000 : 'initial'
+      }}>
+      <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
       <MainMenus>
-        <Menus>
-          <StyledLink to="/">
+        <Menus onClick={MinApp.onClose}>
+          <StyledLink onClick={() => to('/')}>
             <Icon className={isRoute('/')}>
-              <i className="iconfont icon-chat"></i>
+              <i className="iconfont icon-chat" />
             </Icon>
           </StyledLink>
-          <StyledLink to="/agents">
+          <StyledLink onClick={() => to('/agents')}>
             <Icon className={isRoute('/agents')}>
-              <i className="iconfont icon-business-smart-assistant"></i>
+              <i className="iconfont icon-business-smart-assistant" />
             </Icon>
           </StyledLink>
-          <StyledLink to="/translate">
+          <StyledLink onClick={() => to('/translate')}>
             <Icon className={isRoute('/translate')}>
               <TranslationOutlined />
             </Icon>
           </StyledLink>
-          <StyledLink to="/apps">
+          <StyledLink onClick={() => to('/apps')}>
             <Icon className={isRoute('/apps')}>
-              <i className="iconfont icon-appstore"></i>
+              <i className="iconfont icon-appstore" />
+            </Icon>
+          </StyledLink>
+          <StyledLink onClick={() => to('/files')}>
+            <Icon className={isRoute('/files')}>
+              <FolderOutlined />
             </Icon>
           </StyledLink>
         </Menus>
       </MainMenus>
-      <Menus>
-        <StyledLink to="/settings/provider">
+      <Menus onClick={MinApp.onClose}>
+        <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
           <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
-            <i className="iconfont icon-setting"></i>
+            <i className="iconfont icon-setting" />
           </Icon>
         </StyledLink>
       </Menus>
@@ -72,13 +95,12 @@ const Container = styled.div`
   -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;
 `
 
 const AvatarImg = styled(Avatar)`
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   background-color: var(--color-background-soft);
   margin-bottom: ${isMac ? '12px' : '12px'};
   margin-top: ${isMac ? '5px' : '2px'};
@@ -102,10 +124,11 @@ const Icon = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 6px;
+  border-radius: 50%;
   margin-bottom: 5px;
   transition: background-color 0.2s ease;
   -webkit-app-region: none;
+  transition: all 0.2s ease;
   .iconfont,
   .anticon {
     color: var(--color-icon);
@@ -133,7 +156,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"
@@ -7,3 +7,95 @@ export const platform = window.electron?.process?.platform
 export const isMac = platform === 'darwin'
 export const isWindows = platform === 'win32' || platform === 'win64'
 export const isLinux = platform === 'linux'
+
+export const imageExts = ['.jpg', '.png', '.jpeg']
+export const textExts = [
+  '.txt', // 普通文本文件
+  '.md', // Markdown 文件
+  '.mdx', // Markdown 文件
+  '.html', // HTML 文件
+  '.htm', // HTML 文件的另一种扩展名
+  '.xml', // XML 文件
+  '.json', // JSON 文件
+  '.yaml', // YAML 文件
+  '.yml', // YAML 文件的另一种扩展名
+  '.csv', // 逗号分隔值文件
+  '.tsv', // 制表符分隔值文件
+  '.ini', // 配置文件
+  '.log', // 日志文件
+  '.rtf', // 富文本格式文件
+  '.tex', // LaTeX 文件
+  '.srt', // 字幕文件
+  '.xhtml', // XHTML 文件
+  '.nfo', // 信息文件（主要用于场景发布）
+  '.conf', // 配置文件
+  '.config', // 配置文件
+  '.env', // 环境变量文件
+  '.properties', // 配置属性文件
+  '.latex', // LaTeX 文档文件
+  '.rst', // reStructuredText 文件
+  '.php', // PHP 脚本文件，包含嵌入的 HTML
+  '.js', // JavaScript 文件（部分是文本，部分可能包含代码）
+  '.ts', // TypeScript 文件
+  '.jsp', // JavaServer Pages 文件
+  '.aspx', // ASP.NET 文件
+  '.bat', // Windows 批处理文件
+  '.sh', // Unix/Linux Shell 脚本文件
+  '.py', // Python 脚本文件
+  '.rb', // Ruby 脚本文件
+  '.pl', // Perl 脚本文件
+  '.sql', // SQL 脚本文件
+  '.css', // Cascading Style Sheets 文件
+  '.less', // Less CSS 预处理器文件
+  '.scss', // Sass CSS 预处理器文件
+  '.sass', // Sass 文件
+  '.styl', // Stylus CSS 预处理器文件
+  '.coffee', // CoffeeScript 文件
+  '.ino', // Arduino 代码文件
+  '.ino', // Arduino 代码文件
+  '.asm', // Assembly 语言文件
+  '.go', // Go 语言文件
+  '.scala', // Scala 语言文件
+  '.swift', // Swift 语言文件
+  '.kt', // Kotlin 语言文件
+  '.rs', // Rust 语言文件
+  '.lua', // Lua 语言文件
+  '.groovy', // Groovy 语言文件
+  '.dart', // Dart 语言文件
+  '.hs', // Haskell 语言文件
+  '.clj', // Clojure 语言文件
+  '.cljs', // ClojureScript 语言文件
+  '.elm', // Elm 语言文件
+  '.erl', // Erlang 语言文件
+  '.ex', // Elixir 语言文件
+  '.exs', // Elixir 脚本文件
+  '.pug', // Pug (formerly Jade) 模板文件
+  '.haml', // Haml 模板文件
+  '.slim', // Slim 模板文件
+  '.tpl', // 模板文件（通用）
+  '.ejs', // Embedded JavaScript 模板文件
+  '.hbs', // Handlebars 模板文件
+  '.mustache', // Mustache 模板文件
+  '.jade', // Jade 模板文件 (已重命名为 Pug)
+  '.twig', // Twig 模板文件
+  '.blade', // Blade 模板文件 (Laravel)
+  '.vue', // Vue.js 单文件组件
+  '.jsx', // React JSX 文件
+  '.tsx', // React TSX 文件
+  '.graphql', // GraphQL 查询语言文件
+  '.gql', // GraphQL 查询语言文件
+  '.proto', // Protocol Buffers 文件
+  '.thrift', // Thrift 文件
+  '.toml', // TOML 配置文件
+  '.edn', // Clojure 数据表示文件
+  '.cake', // CakePHP 配置文件
+  '.ctp', // CakePHP 视图文件
+  '.cfm', // ColdFusion 标记语言文件
+  '.cfc', // ColdFusion 组件文件
+  '.m', // Objective-C 源文件
+  '.mm', // Objective-C++ 源文件
+  '.gradle', // Gradle 构建文件
+  '.groovy', // Gradle 构建文件
+  '.gradle', // Gradle 构建文件
+  '.kts' // Kotlin Script 文件
+]

src/renderer/src/config/env.ts

@@ -0,0 +1,5 @@
+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,103 @@
+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 PoeAppLogo from '@renderer/assets/images/apps/poe.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 ZhihuAppLogo from '@renderer/assets/images/apps/zhihu.png'
+import MinApp from '@renderer/components/MinApp'
+import { PROVIDER_CONFIG } from '@renderer/config/provider'
+import { MinAppType } from '@renderer/types'
+
+const _apps: MinAppType[] = [
+  {
+    id: '360-ai-so',
+    name: '360AI搜索',
+    logo: AiSearchAppLogo,
+    url: 'https://so.360.com/'
+  },
+  {
+    id: '360-ai-bot',
+    name: 'AI 助手',
+    logo: AiAssistantAppLogo,
+    url: 'https://bot.360.com/'
+  },
+  {
+    id: 'baidu-ai-chat',
+    name: '文心一言',
+    logo: BaiduAiAppLogo,
+    url: 'https://yiyan.baidu.com/'
+  },
+  {
+    id: 'tencent-yuanbao',
+    name: '腾讯元宝',
+    logo: TencentYuanbaoAppLogo,
+    url: 'https://yuanbao.tencent.com/chat'
+  },
+  {
+    id: 'sensetime-chat',
+    name: '商量',
+    logo: SensetimeAppLogo,
+    url: 'https://chat.sensetime.com/wb/chat'
+  },
+  {
+    id: 'spark-desk',
+    name: 'SparkDesk',
+    logo: SparkDeskAppLogo,
+    url: 'https://xinghuo.xfyun.cn/desk'
+  },
+  {
+    id: 'metaso',
+    name: '秘塔AI搜索',
+    logo: MetasoAppLogo,
+    url: 'https://metaso.cn/'
+  },
+  {
+    id: 'poe',
+    name: 'Poe',
+    logo: PoeAppLogo,
+    url: 'https://poe.com'
+  },
+  {
+    id: 'perplexity',
+    name: 'perplexity',
+    logo: PerplexityAppLogo,
+    url: 'https://www.perplexity.ai/'
+  },
+  {
+    id: 'devv',
+    name: 'DEVV_',
+    logo: DevvAppLogo,
+    url: 'https://devv.ai/'
+  },
+  {
+    id: 'tiangong-ai',
+    name: '天工AI',
+    logo: TiangongAiLogo,
+    url: 'https://www.tiangong.cn/'
+  },
+  {
+    id: 'zhihu-zhiada',
+    name: '知乎直答',
+    logo: ZhihuAppLogo,
+    url: 'https://zhida.zhihu.com/'
+  }
+]
+
+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,67 @@
 import { Model } from '@renderer/types'
 
-type SystemModel = Model & { enabled: boolean }
+const TEXT_TO_IMAGE_REGEX = /flux|diffusion|stabilityai|sd-turbo|dall|cogview/i
+const VISION_REGEX = /llava|moondream|minicpm|gemini-1.5|claude-3|vision|glm-4v|gpt-4|qwen-vl/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 +69,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 +109,21 @@ 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'
+    }
+  ],
+  github: [
+    {
+      id: 'gpt-4o',
+      provider: 'github',
+      name: 'OpenAI GPT-4o',
+      group: 'OpenAI'
     }
   ],
   yi: [
@@ -184,87 +131,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 +219,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 +239,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 +259,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 +279,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 +294,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 +320,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 +334,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 +366,37 @@ 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)
+}
+
+export function isVisionModel(model: Model): boolean {
+  return VISION_REGEX.test(model.id)
+}

src/renderer/src/config/provider.ts

@@ -2,9 +2,10 @@ 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 CohereModelLogo from '@renderer/assets/images/models/cohere.webp'
 import DeepSeekModelLogo from '@renderer/assets/images/models/deepseek.png'
 import DoubaoModelLogo from '@renderer/assets/images/models/doubao.png'
 import EmbeddingModelLogo from '@renderer/assets/images/models/embedding.png'
@@ -13,6 +14,7 @@ import GemmaModelLogo from '@renderer/assets/images/models/gemma.jpeg'
 import HailuoModelLogo from '@renderer/assets/images/models/hailuo.png'
 import LlamaModelLogo from '@renderer/assets/images/models/llama.jpeg'
 import MicrosoftModelLogo from '@renderer/assets/images/models/microsoft.png'
+import MinicpmModelLogo from '@renderer/assets/images/models/minicpm.webp'
 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'
@@ -25,6 +27,7 @@ import DashScopeProviderLogo from '@renderer/assets/images/providers/dashscope.p
 import DeepSeekProviderLogo from '@renderer/assets/images/providers/deepseek.png'
 import DoubaoProviderLogo from '@renderer/assets/images/providers/doubao.png'
 import GeminiProviderLogo from '@renderer/assets/images/providers/gemini.png'
+import GithubProviderLogo from '@renderer/assets/images/providers/github.svg'
 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'
@@ -76,6 +79,8 @@ export function getProviderLogo(providerId: string) {
       return GraphRagProviderLogo
     case 'minimax':
       return MinimaxProviderLogo
+    case 'github':
+      return GithubProviderLogo
     default:
       return undefined
   }
@@ -87,6 +92,7 @@ export function getModelLogo(modelId: string) {
   }
 
   const logoMap = {
+    o1: OpenAiProviderLogo,
     gpt: ChatGPTModelLogo,
     glm: ChatGLMModelLogo,
     deepseek: DeepSeekModelLogo,
@@ -106,7 +112,10 @@ export function getModelLogo(modelId: string) {
     palm: PalmModelLogo,
     step: StepModelLogo,
     abab: HailuoModelLogo,
-    'ep-202': DoubaoModelLogo
+    'ep-202': DoubaoModelLogo,
+    cohere: CohereModelLogo,
+    command: CohereModelLogo,
+    minicpm: MinicpmModelLogo
   }
 
   for (const key in logoMap) {
@@ -121,8 +130,7 @@ export function getModelLogo(modelId: string) {
 export const PROVIDER_CONFIG = {
   openai: {
     api: {
-      url: 'https://api.openai.com',
-      editable: true
+      url: 'https://api.openai.com'
     },
     websites: {
       official: 'https://openai.com/',
@@ -131,6 +139,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://platform.openai.com/docs/models'
     },
     app: {
+      id: 'openai',
       name: 'ChatGPT',
       url: 'https://chatgpt.com/',
       logo: OpenAiProviderLogo
@@ -138,8 +147,7 @@ export const PROVIDER_CONFIG = {
   },
   gemini: {
     api: {
-      url: 'https://generativelanguage.googleapis.com',
-      editable: false
+      url: 'https://generativelanguage.googleapis.com'
     },
     websites: {
       official: 'https://gemini.google.com/',
@@ -148,6 +156,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://ai.google.dev/gemini-api/docs/models/gemini'
     },
     app: {
+      id: 'gemini',
       name: 'Gemini',
       url: 'https://gemini.google.com/',
       logo: GeminiProviderLogo
@@ -155,8 +164,7 @@ export const PROVIDER_CONFIG = {
   },
   silicon: {
     api: {
-      url: 'https://cloud.siliconflow.cn',
-      editable: false
+      url: 'https://cloud.siliconflow.cn'
     },
     websites: {
       official: 'https://www.siliconflow.cn/',
@@ -165,6 +173,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://docs.siliconflow.cn/docs/model-names'
     },
     app: {
+      id: 'silicon',
       name: 'SiliconFlow',
       url: 'https://cloud.siliconflow.cn/playground/chat',
       logo: SiliconFlowProviderLogo
@@ -172,8 +181,7 @@ export const PROVIDER_CONFIG = {
   },
   deepseek: {
     api: {
-      url: 'https://api.deepseek.com',
-      editable: false
+      url: 'https://api.deepseek.com'
     },
     websites: {
       official: 'https://deepseek.com/',
@@ -182,15 +190,26 @@ export const PROVIDER_CONFIG = {
       models: 'https://platform.deepseek.com/api-docs/'
     },
     app: {
+      id: 'deepseek',
       name: 'DeepSeek',
       url: 'https://chat.deepseek.com/',
       logo: DeepSeekProviderLogo
     }
   },
+  github: {
+    api: {
+      url: 'https://models.inference.ai.azure.com/'
+    },
+    websites: {
+      official: 'https://github.com/marketplace/models',
+      apiKey: 'https://github.com/settings/tokens',
+      docs: 'https://docs.github.com/en/github-models',
+      models: 'https://github.com/marketplace/models'
+    }
+  },
   yi: {
     api: {
-      url: 'https://api.lingyiwanwu.com',
-      editable: false
+      url: 'https://api.lingyiwanwu.com'
     },
     websites: {
       official: 'https://platform.lingyiwanwu.com/',
@@ -199,6 +218,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://platform.lingyiwanwu.com/docs#%E6%A8%A1%E5%9E%8B'
     },
     app: {
+      id: 'yi',
       name: 'Yi',
       url: 'https://www.wanzhi.com/',
       logo: YiProviderLogo
@@ -206,8 +226,7 @@ export const PROVIDER_CONFIG = {
   },
   zhipu: {
     api: {
-      url: 'https://open.bigmodel.cn/api/paas/v4/',
-      editable: false
+      url: 'https://open.bigmodel.cn/api/paas/v4/'
     },
     websites: {
       official: 'https://open.bigmodel.cn/',
@@ -216,6 +235,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://open.bigmodel.cn/modelcenter/square'
     },
     app: {
+      id: 'zhipu',
       name: '智谱',
       url: 'https://chatglm.cn/main/alltoolsdetail',
       logo: ZhipuProviderLogo
@@ -223,8 +243,7 @@ export const PROVIDER_CONFIG = {
   },
   moonshot: {
     api: {
-      url: 'https://api.moonshot.cn',
-      editable: false
+      url: 'https://api.moonshot.cn'
     },
     websites: {
       official: 'https://moonshot.ai/',
@@ -233,6 +252,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://platform.moonshot.cn/docs/intro#%E6%A8%A1%E5%9E%8B%E5%88%97%E8%A1%A8'
     },
     app: {
+      id: 'moonshot',
       name: 'Kimi',
       url: 'https://kimi.moonshot.cn/',
       logo: KimiAppLogo
@@ -240,8 +260,7 @@ export const PROVIDER_CONFIG = {
   },
   baichuan: {
     api: {
-      url: 'https://api.baichuan-ai.com',
-      editable: false
+      url: 'https://api.baichuan-ai.com'
     },
     websites: {
       official: 'https://www.baichuan-ai.com/',
@@ -250,6 +269,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://platform.baichuan-ai.com/price'
     },
     app: {
+      id: 'baichuan',
       name: '百小应',
       url: 'https://ying.baichuan-ai.com/chat',
       logo: BaicuanAppLogo
@@ -257,8 +277,7 @@ export const PROVIDER_CONFIG = {
   },
   dashscope: {
     api: {
-      url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/',
-      editable: false
+      url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/'
     },
     websites: {
       official: 'https://dashscope.aliyun.com/',
@@ -267,6 +286,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://dashscope.console.aliyun.com/model'
     },
     app: {
+      id: 'dashscope',
       name: '通义千问',
       url: 'https://tongyi.aliyun.com/qianwen/',
       logo: QwenModelLogo
@@ -274,8 +294,7 @@ export const PROVIDER_CONFIG = {
   },
   stepfun: {
     api: {
-      url: 'https://api.stepfun.com',
-      editable: false
+      url: 'https://api.stepfun.com'
     },
     websites: {
       official: 'https://platform.stepfun.com/',
@@ -284,6 +303,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://platform.stepfun.com/docs/llm/text'
     },
     app: {
+      id: 'stepfun',
       name: '跃问',
       url: 'https://yuewen.cn/chats/new',
       logo: YuewenAppLogo
@@ -291,8 +311,7 @@ export const PROVIDER_CONFIG = {
   },
   doubao: {
     api: {
-      url: 'https://ark.cn-beijing.volces.com/api/v3/',
-      editable: true
+      url: 'https://ark.cn-beijing.volces.com/api/v3/'
     },
     websites: {
       official: 'https://console.volcengine.com/ark/',
@@ -301,6 +320,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://console.volcengine.com/ark/region:ark+cn-beijing/endpoint'
     },
     app: {
+      id: 'doubao',
       name: '豆包',
       url: 'https://www.doubao.com/chat/',
       logo: DoubaoProviderLogo
@@ -308,8 +328,7 @@ export const PROVIDER_CONFIG = {
   },
   minimax: {
     api: {
-      url: 'https://api.minimax.chat/v1/',
-      editable: true
+      url: 'https://api.minimax.chat/v1/'
     },
     websites: {
       official: 'https://platform.minimaxi.com/',
@@ -318,6 +337,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://platform.minimaxi.com/document/Models'
     },
     app: {
+      id: 'minimax',
       name: '海螺',
       url: 'https://hailuoai.com/',
       logo: HailuoModelLogo
@@ -325,14 +345,12 @@ export const PROVIDER_CONFIG = {
   },
   'graphrag-kylin-mountain': {
     api: {
-      url: '',
-      editable: true
+      url: ''
     }
   },
   openrouter: {
     api: {
-      url: 'https://openrouter.ai/api/v1/',
-      editable: false
+      url: 'https://openrouter.ai/api/v1/'
     },
     websites: {
       official: 'https://openrouter.ai/',
@@ -343,8 +361,7 @@ export const PROVIDER_CONFIG = {
   },
   groq: {
     api: {
-      url: 'https://api.groq.com/openai',
-      editable: false
+      url: 'https://api.groq.com/openai'
     },
     websites: {
       official: 'https://groq.com/',
@@ -353,15 +370,15 @@ export const PROVIDER_CONFIG = {
       models: 'https://console.groq.com/docs/models'
     },
     app: {
+      id: 'groq',
       name: 'Groq',
-      url: 'https://groq.com/',
+      url: 'https://chat.groq.com/',
       logo: GroqProviderLogo
     }
   },
   ollama: {
     api: {
-      url: 'http://localhost:11434/v1/',
-      editable: true
+      url: 'http://localhost:11434/v1/'
     },
     websites: {
       official: 'https://ollama.com/',
@@ -371,8 +388,7 @@ export const PROVIDER_CONFIG = {
   },
   anthropic: {
     api: {
-      url: 'https://api.anthropic.com/',
-      editable: true
+      url: 'https://api.anthropic.com/'
     },
     websites: {
       official: 'https://anthropic.com/',
@@ -381,6 +397,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://docs.anthropic.com/en/docs/about-claude/models'
     },
     app: {
+      id: 'anthropic',
       name: 'Claude',
       url: 'https://claude.ai/',
       logo: AnthropicProviderLogo
@@ -388,8 +405,7 @@ export const PROVIDER_CONFIG = {
   },
   aihubmix: {
     api: {
-      url: 'https://aihubmix.com',
-      editable: false
+      url: 'https://aihubmix.com'
     },
     websites: {
       official: 'https://aihubmix.com/',

src/renderer/src/context/AntdProvider.tsx

@@ -23,7 +23,8 @@ const AntdProvider: FC<PropsWithChildren> = ({ children }) => {
           }
         },
         token: {
-          colorPrimary: '#00b96b'
+          colorPrimary: '#00b96b',
+          borderRadius: 6
         }
       }}>
       {children}

src/renderer/src/context/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import { useSettings } from '@renderer/hooks/useSettings'
-import { ThemeMode } from '@renderer/store/settings'
+import { ThemeMode } from '@renderer/types'
 import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
 
 interface ThemeContextType {

src/renderer/src/databases/index.ts

@@ -0,0 +1,27 @@
+import { FileType, Topic } from '@renderer/types'
+import { Dexie, type EntityTable } from 'dexie'
+
+import { populateTopics } from './populate'
+
+// Database declaration (move this to its own module also)
+export const db = new Dexie('CherryStudio') as Dexie & {
+  files: EntityTable<FileType, 'id'>
+  topics: EntityTable<Pick<Topic, 'id' | 'messages'>, 'id'>
+  settings: EntityTable<{ id: string; value: any }, 'id'>
+}
+
+db.version(1).stores({
+  files: 'id, name, origin_name, path, size, ext, type, created_at, count'
+})
+
+db.version(2)
+  .stores({
+    files: 'id, name, origin_name, path, size, ext, type, created_at, count',
+    topics: '&id, messages',
+    settings: '&id, value'
+  })
+  .upgrade(populateTopics)
+
+db.on('populate', populateTopics)
+
+export default db

src/renderer/src/databases/populate.ts

@@ -0,0 +1,27 @@
+import i18n from '@renderer/i18n'
+import { Transaction } from 'dexie'
+import localforage from 'localforage'
+
+export async function populateTopics(trans: Transaction) {
+  const indexedKeys = await localforage.keys()
+
+  if (indexedKeys.length > 0) {
+    for (const key of indexedKeys) {
+      const value: any = await localforage.getItem(key)
+      if (key.startsWith('topic:')) {
+        await trans.db.table('topics').add({ id: value.id, messages: value.messages })
+      }
+      if (key === 'image://avatar') {
+        await trans.db.table('settings').add({ id: key, value: await localforage.getItem(key) })
+      }
+    }
+
+    window.modal.success({
+      title: i18n.t('message.upgrade.success.title'),
+      content: i18n.t('message.upgrade.success.content'),
+      okText: i18n.t('message.upgrade.success.button'),
+      centered: true,
+      onOk: () => window.api.reload()
+    })
+  }
+}

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,23 +1,24 @@
+import { isLocalAi } from '@renderer/config/env'
+import db from '@renderer/databases'
 import i18n from '@renderer/i18n'
-import LocalStorage from '@renderer/services/storage'
 import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
 import { runAsyncFunction } from '@renderer/utils'
+import { useLiveQuery } from 'dexie-react-hooks'
 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 { proxyUrl, language } = useSettings()
+  const { setDefaultModel, setTopicNamingModel, setTranslateModel } = useDefaultModel()
+  const avatar = useLiveQuery(() => db.settings.get('image://avatar'))
 
   useEffect(() => {
-    runAsyncFunction(async () => {
-      const storedImage = await LocalStorage.getImage('avatar')
-      storedImage && dispatch(setAvatar(storedImage))
-    })
-  }, [dispatch])
+    avatar?.value && dispatch(setAvatar(avatar.value))
+  }, [avatar, dispatch])
 
   useEffect(() => {
     runAsyncFunction(async () => {
@@ -33,4 +34,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/useAssistant.ts

@@ -16,7 +16,8 @@ import {
 } from '@renderer/store/assistants'
 import { setDefaultModel, setTopicNamingModel, setTranslateModel } from '@renderer/store/llm'
 import { Assistant, AssistantSettings, Model, Topic } from '@renderer/types'
-import localforage from 'localforage'
+
+import { TopicManager } from './useTopic'
 
 export function useAssistants() {
   const { assistants } = useAppSelector((state) => state.assistants)
@@ -29,9 +30,8 @@ export function useAssistants() {
     removeAssistant: (id: string) => {
       dispatch(removeAssistant({ id }))
       const assistant = assistants.find((a) => a.id === id)
-      if (assistant) {
-        assistant.topics.forEach((id) => localforage.removeItem(`topic:${id}`))
-      }
+      const topics = assistant?.topics || []
+      topics.forEach(({ id }) => TopicManager.removeTopic(id))
     }
   }
 }
@@ -45,7 +45,14 @@ export function useAssistant(id: string) {
     assistant,
     model: assistant?.model ?? defaultModel,
     addTopic: (topic: Topic) => dispatch(addTopic({ assistantId: assistant.id, topic })),
-    removeTopic: (topic: Topic) => dispatch(removeTopic({ assistantId: assistant.id, topic })),
+    removeTopic: (topic: Topic) => {
+      TopicManager.removeTopic(topic.id)
+      dispatch(removeTopic({ assistantId: assistant.id, topic }))
+    },
+    moveTopic: (topic: Topic, toAssistant: Assistant) => {
+      dispatch(addTopic({ assistantId: toAssistant.id, topic: { ...topic } }))
+      dispatch(removeTopic({ assistantId: assistant.id, topic }))
+    },
     updateTopic: (topic: Topic) => dispatch(updateTopic({ assistantId: assistant.id, topic })),
     updateTopics: (topics: Topic[]) => dispatch(updateTopics({ assistantId: assistant.id, topics })),
     removeAllTopics: () => dispatch(removeAllTopics({ assistantId: assistant.id })),

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,8 +3,10 @@ import {
   SendMessageShortcut,
   setSendMessageShortcut as _setSendMessageShortcut,
   setTheme,
-  ThemeMode
+  setTopicPosition,
+  setWindowStyle
 } from '@renderer/store/settings'
+import { ThemeMode } from '@renderer/types'
 
 export function useSettings() {
   const settings = useAppSelector((state) => state.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

@@ -1,12 +1,19 @@
+import db from '@renderer/databases'
+import { deleteMessageFiles } from '@renderer/services/messages'
 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])
 
+  _activeTopic = activeTopic
+
   useEffect(() => {
     // activeTopic not in assistant.topics
     if (assistant && !find(assistant.topics, { id: activeTopic?.id })) {
@@ -20,3 +27,38 @@ export function useActiveTopic(assistant: Assistant) {
 export function getTopic(assistant: Assistant, topicId: string) {
   return assistant?.topics.find((topic) => topic.id === topicId)
 }
+
+export class TopicManager {
+  static async getTopic(id: string) {
+    return await db.topics.get(id)
+  }
+
+  static async getTopicMessages(id: string) {
+    const topic = await this.getTopic(id)
+    return topic ? topic.messages : []
+  }
+
+  static async removeTopic(id: string) {
+    const messages = await this.getTopicMessages(id)
+
+    for (const message of messages) {
+      await deleteMessageFiles(message)
+    }
+
+    db.topics.delete(id)
+  }
+
+  static async clearTopicMessages(id: string) {
+    const topic = await this.getTopic(id)
+
+    if (topic) {
+      for (const message of topic?.messages ?? []) {
+        await deleteMessageFiles(message)
+      }
+
+      topic.messages = []
+
+      await db.topics.update(id, topic)
+    }
+  }
+}

src/renderer/src/i18n/index.ts

@@ -28,13 +28,18 @@ const resources = {
         footnotes: 'References',
         select: 'Select',
         search: 'Search',
-        default: 'Default'
+        default: 'Default',
+        warning: 'Warning',
+        back: 'Back',
+        chat: 'Chat'
       },
       button: {
         add: 'Add',
         added: 'Added',
         manage: 'Manage',
-        select_model: 'Select Model'
+        select_model: 'Select Model',
+        'show.all': 'Show All',
+        collapse: 'Collapse'
       },
       message: {
         copied: 'Copied!',
@@ -48,30 +53,43 @@ 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',
+        'backup.success': 'Backup successful',
+        '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?',
+        'upgrade.success.title': 'Upgrade successfully',
+        'upgrade.success.content': 'Please restart the application to complete the upgrade',
+        'upgrade.success.button': 'Restart',
+        'topic.added': 'New topic added'
       },
       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',
         'topics.auto_rename': 'Auto Rename',
-        'topics.edit.title': 'Rename',
+        'topics.edit.title': 'Edit Name',
         '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.move_to': 'Move to',
+        'topics.list': 'Topic List',
         'input.new_topic': 'New Topic',
         'input.topics': ' Topics ',
         'input.clear': 'Clear',
+        '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 or text file',
         'input.context_count.tip': 'Context Count',
         'input.estimated_tokens.tip': 'Estimated tokens',
         'settings.temperature': 'Temperature',
@@ -86,20 +104,36 @@ 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',
+        'message.new.branch': 'New Branch',
+        'assistant.search.placeholder': 'Search'
+      },
+      assistants: {
+        title: 'Assistants',
+        abbr: 'Assistant',
+        search: 'Search assistants...'
+      },
+      files: {
+        title: 'Files',
+        file: 'File',
+        name: 'Name',
+        size: 'Size',
+        count: 'Count',
+        created_at: 'Created At'
       },
       agents: {
-        title: 'Agents',
-        my_agents: 'My Agents',
-        'add.title': 'Add Agent',
-        'edit.title': 'Edit Agent',
+        title: 'Assistants',
+        my_agents: 'My Assistants',
+        'add.title': 'Add Assistant',
+        'edit.title': 'Edit Assistant',
         'add.name': 'Name',
         'add.name.placeholder': 'Enter name',
         'add.prompt': 'Prompt',
         'add.prompt.placeholder': 'Enter prompt',
         'add.button': 'Add',
-        'manage.title': 'Manage Agents',
-        'delete.popup.content': 'Are you sure you want to delete this agent?',
+        'manage.title': 'Manage Assistants',
+        'delete.popup.content': 'Are you sure you want to delete this assistant?',
         'tag.default': 'Default',
         'tag.system': 'System',
         'tag.user': 'Mine'
@@ -122,7 +156,8 @@ const resources = {
         stepfun: 'StepFun',
         doubao: 'Doubao',
         minimax: 'MiniMax',
-        'graphrag-kylin-mountain': 'GraphRAG'
+        'graphrag-kylin-mountain': 'GraphRAG',
+        github: 'GitHub Models'
       },
       settings: {
         title: 'Settings',
@@ -138,9 +173,17 @@ const resources = {
         'messages.input.title': 'Input Settings',
         'messages.input.show_estimated_tokens': 'Show estimated input tokens',
         'messages.input.send_shortcuts': 'Send shortcuts',
+        'messages.input.paste_long_text_as_file': 'Paste long text as file',
         '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',
+        'advanced.title': 'Advanced Settings',
+        'advanced.click_assistant_switch_to_topics': 'Auto switch to topic',
         'provider.api_key': 'API Key',
         'provider.check': 'Check',
         'provider.get_api_key': 'Get API Key',
@@ -190,7 +233,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 +268,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,13 +306,18 @@ const resources = {
         footnote: '引用内容',
         select: '选择',
         search: '搜索',
-        default: '默认'
+        default: '默认',
+        warning: '警告',
+        back: '返回',
+        chat: '聊天'
       },
       button: {
         add: '添加',
         added: '已添加',
         manage: '管理',
-        select_model: '选择模型'
+        select_model: '选择模型',
+        'show.all': '显示全部',
+        collapse: '收起'
       },
       message: {
         copied: '已复制',
@@ -273,11 +331,20 @@ const resources = {
         'api.connection.failed': '连接失败',
         'api.connection.success': '连接成功',
         'chat.completion.paused': '会话已停止',
-        'switch.disabled': '模型回复完成后才能切换'
+        'switch.disabled': '模型回复完成后才能切换',
+        'restore.success': '恢复成功',
+        'backup.success': '备份成功',
+        'reset.confirm.content': '确定要重置所有数据吗？',
+        'reset.double.confirm.title': '数据丢失！！！',
+        'reset.double.confirm.content': '你的全部数据都会丢失，如果没有备份数据，将无法恢复，确定要继续吗？',
+        'upgrade.success.title': '升级成功',
+        'upgrade.success.content': '重启应用以完成升级',
+        'upgrade.success.button': '重启',
+        'topic.added': '话题添加成功'
       },
       chat: {
         save: '保存',
-        'default.name': '🔆 默认助手 - Assistant',
+        'default.name': '⭐️ 默认助手',
         'default.description': '你好，我是默认助手。你可以立刻开始跟我聊天。',
         'default.topic.name': '默认话题',
         'topics.title': '话题',
@@ -286,17 +353,21 @@ const resources = {
         'topics.edit.placeholder': '输入新名称',
         'topics.delete.all.title': '删除所有话题',
         'topics.delete.all.content': '确定要删除所有话题吗?',
+        'topics.move_to': '移动到',
+        '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': '上传图片或纯文本文件',
         'input.context_count.tip': '上下文数',
         'input.estimated_tokens.tip': '预估 token 数',
         'settings.temperature': '模型温度',
@@ -312,7 +383,23 @@ const resources = {
         'settings.set_as_default': '应用到默认助手',
         'settings.max': '不限',
         'suggestions.title': '建议的问题',
-        'add.assistant.title': '添加智能体'
+        'add.assistant.title': '添加助手',
+        'message.new.context': '清除上下文',
+        'message.new.branch': '新分支',
+        'assistant.search.placeholder': '搜索'
+      },
+      assistants: {
+        title: '助手',
+        abbr: '助手',
+        search: '搜索助手'
+      },
+      files: {
+        title: '文件',
+        file: '文件',
+        name: '文件名',
+        size: '大小',
+        count: '文件数',
+        created_at: '创建时间'
       },
       agents: {
         title: '智能体',
@@ -348,7 +435,8 @@ const resources = {
         stepfun: '阶跃星辰',
         doubao: '豆包',
         minimax: 'MiniMax',
-        'graphrag-kylin-mountain': 'GraphRAG'
+        'graphrag-kylin-mountain': 'GraphRAG',
+        github: 'GitHub Models'
       },
       settings: {
         title: '设置',
@@ -364,9 +452,17 @@ const resources = {
         'messages.input.title': '输入设置',
         'messages.input.show_estimated_tokens': '状态显示',
         'messages.input.send_shortcuts': '发送快捷键',
+        'messages.input.paste_long_text_as_file': '长文本粘贴为文件',
         'general.title': '常规设置',
         'general.user_name': '用户名',
         'general.user_name.placeholder': '请输入用户名',
+        'general.backup.title': '数据备份与恢复',
+        'general.backup.button': '备份',
+        'general.restore.button': '恢复',
+        'general.reset.title': '重置数据',
+        'general.reset.button': '重置',
+        'advanced.title': '高级设置',
+        'advanced.click_assistant_switch_to_topics': '点击助手切换到话题',
         'provider.api_key': 'API 密钥',
         'provider.check': '检查',
         'provider.get_api_key': '点击这里获取密钥',
@@ -416,7 +512,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 +547,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 { 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 { APP_NAME } from './config/env'
+import { ThemeMode } from './types'
+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/agents/AgentsPage.tsx

@@ -33,6 +33,7 @@ const AppsPage: FC = () => {
       icon: null,
       closable: true,
       maskClosable: true,
+      centered: true,
       okButtonProps: { type: 'primary', disabled: Boolean(added) },
       okText: added ? t('button.added') : t('button.add'),
       onOk: () => onAddAgent(agent)

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

@@ -1,8 +1,10 @@
 import 'emoji-picker-element'
 
+import { LoadingOutlined, ThunderboltOutlined } from '@ant-design/icons'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import { TopView } from '@renderer/components/TopView'
 import { useAgents } from '@renderer/hooks/useAgents'
+import { fetchGenerate } from '@renderer/services/api'
 import { syncAgentToAssistant } from '@renderer/services/assistant'
 import { Agent } from '@renderer/types'
 import { getLeadingEmoji, uuid } from '@renderer/utils'
@@ -29,6 +31,7 @@ const PopupContainer: React.FC<Props> = ({ agent, resolve }) => {
   const { addAgent, updateAgent } = useAgents()
   const formRef = useRef<FormInstance>(null)
   const [emoji, setEmoji] = useState(agent?.emoji)
+  const [loading, setLoading] = useState(false)
 
   const onFinish = (values: FieldType) => {
     const _emoji = emoji || getLeadingEmoji(values.name)
@@ -81,16 +84,44 @@ const PopupContainer: React.FC<Props> = ({ agent, resolve }) => {
     }
   }, [agent, form])
 
+  const handleButtonClick = async () => {
+    const prompt = `你是一个专业的 prompt 优化助手，我会给你一段prompt，你需要帮我优化它，仅回复优化后的 prompt 不要添加任何解释，使用 [CRISPE提示框架] 回复。`
+
+    const name = formRef.current?.getFieldValue('name')
+    const content = formRef.current?.getFieldValue('prompt')
+    const promptText = content || name
+
+    if (!promptText) {
+      return
+    }
+
+    if (content) {
+      navigator.clipboard.writeText(content)
+    }
+
+    setLoading(true)
+
+    try {
+      const prefixedContent = `请帮我优化下面这段 prompt，使用 CRISPE 提示框架，请使用 Markdown 格式回复，不要使用 codeblock: ${promptText}`
+      const generatedText = await fetchGenerate({ prompt, content: prefixedContent })
+      formRef.current?.setFieldValue('prompt', generatedText)
+    } catch (error) {
+      console.error('Error fetching data:', error)
+    }
+
+    setLoading(false)
+  }
+
   return (
     <Modal
-      style={{ marginTop: '10vh' }}
       title={agent ? t('agents.edit.title') : t('agents.add.title')}
       open={open}
       onOk={() => formRef.current?.submit()}
       onCancel={onCancel}
       maskClosable={false}
       afterClose={onClose}
-      okText={agent ? t('common.save') : t('agents.add.button')}>
+      okText={agent ? t('common.save') : t('agents.add.button')}
+      centered>
       <Form
         ref={formRef}
         form={form}
@@ -100,16 +131,28 @@ const PopupContainer: React.FC<Props> = ({ agent, resolve }) => {
         style={{ marginTop: 25 }}
         onFinish={onFinish}>
         <Form.Item name="name" label="Emoji">
-          <Popover content={<EmojiPicker onEmojiClick={setEmoji} />} trigger="click" arrow>
+          <Popover content={<EmojiPicker onEmojiClick={setEmoji} />} arrow>
             <Button icon={emoji && <span style={{ fontSize: 20 }}>{emoji}</span>}>{t('common.select')}</Button>
           </Popover>
         </Form.Item>
         <Form.Item name="name" label={t('agents.add.name')} rules={[{ required: true }]}>
           <Input placeholder={t('agents.add.name.placeholder')} spellCheck={false} allowClear />
         </Form.Item>
-        <Form.Item name="prompt" label={t('agents.add.prompt')} rules={[{ required: true }]}>
-          <TextArea placeholder={t('agents.add.prompt.placeholder')} spellCheck={false} rows={4} />
-        </Form.Item>
+        <div style={{ position: 'relative' }}>
+          <Form.Item
+            name="prompt"
+            label={t('agents.add.prompt')}
+            rules={[{ required: true }]}
+            style={{ position: 'relative' }}>
+            <TextArea placeholder={t('agents.add.prompt.placeholder')} spellCheck={false} rows={10} />
+          </Form.Item>
+          <Button
+            icon={loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
+            onClick={handleButtonClick}
+            style={{ position: 'absolute', top: 8, right: 8 }}
+            disabled={loading}
+          />
+        </div>
       </Form>
     </Modal>
   )

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

@@ -35,13 +35,13 @@ const PopupContainer: React.FC = () => {
 
   return (
     <Modal
-      style={{ marginTop: '10vh' }}
       title={t('agents.manage.title')}
       open={open}
       onOk={onOk}
       onCancel={onCancel}
       afterClose={onClose}
-      footer={null}>
+      footer={null}
+      centered>
       <Container>
         {agents.length > 0 && (
           <DragableList list={agents} onUpdate={updateAgents}>

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

@@ -1,5 +1,5 @@
 import MinApp from '@renderer/components/MinApp'
-import { useTheme } from '@renderer/providers/ThemeProvider'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { MinAppType } from '@renderer/types'
 import { FC } from 'react'
 import styled from 'styled-components'
@@ -17,7 +17,7 @@ const App: FC<Props> = ({ app }) => {
 
   return (
     <Container onClick={onClick}>
-      <AppIcon src={app.logo} style={{ border: theme === 'dark' ? 'none' : '1px solid var(--color-border' }} />
+      <AppIcon src={app.logo} style={{ border: theme === 'dark' ? 'none' : '0.5px solid var(--color-border' }} />
       <AppTitle>{app.name}</AppTitle>
     </Container>
   )
@@ -29,6 +29,7 @@ const Container = styled.div`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  width: 65px;
 `
 
 const AppIcon = styled.img`
@@ -44,6 +45,7 @@ const AppTitle = styled.div`
   margin-top: 5px;
   color: var(--color-text-soft);
   text-align: center;
+  user-select: none;
 `
 
 export default App

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

@@ -1,45 +1,54 @@
-import AiAssistantAppLogo from '@renderer/assets/images/apps/360-ai.png'
-import BaiduAiAppLogo from '@renderer/assets/images/apps/baidu-ai.png'
+import { SearchOutlined } from '@ant-design/icons'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
-import { PROVIDER_CONFIG } from '@renderer/config/provider'
-import { MinAppType } from '@renderer/types'
-import { FC } from 'react'
+import { Center } from '@renderer/components/Layout'
+import { getAllMinApps } from '@renderer/config/minapp'
+import { Empty, Input } from 'antd'
+import { isEmpty } from 'lodash'
+import { FC, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 import App from './App'
 
-const _apps: MinAppType[] = [
-  {
-    name: 'AI 助手',
-    logo: AiAssistantAppLogo,
-    url: 'https://bot.360.com/'
-  },
-  {
-    name: '文心一言',
-    logo: BaiduAiAppLogo,
-    url: 'https://yiyan.baidu.com/'
-  }
-]
-
 const AppsPage: FC = () => {
   const { t } = useTranslation()
+  const [search, setSearch] = useState('')
+  const apps = useMemo(() => getAllMinApps(), [])
 
-  const apps: MinAppType[] = (Object.entries(PROVIDER_CONFIG) as any[])
-    .filter(([, config]) => config.app)
-    .map(([key, config]) => ({ id: key, ...config.app }))
-    .concat(_apps)
+  const filteredApps = search
+    ? apps.filter(
+        (app) => app.name.toLowerCase().includes(search.toLowerCase()) || app.url.includes(search.toLowerCase())
+      )
+    : apps
 
   return (
     <Container>
       <Navbar>
-        <NavbarCenter style={{ borderRight: 'none' }}>{t('agents.title')}</NavbarCenter>
+        <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} />
+          {filteredApps.map((app) => (
+            <App key={app.id} app={app} />
           ))}
+          {isEmpty(filteredApps) && (
+            <Center style={{ flex: 1 }}>
+              <Empty />
+            </Center>
+          )}
         </AppsContainer>
       </ContentContainer>
     </Container>

src/renderer/src/pages/files/FilesPage.tsx

@@ -0,0 +1,100 @@
+import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { VStack } from '@renderer/components/Layout'
+import db from '@renderer/databases'
+import FileManager from '@renderer/services/file'
+import { FileType, FileTypes } from '@renderer/types'
+import { Image, Table } from 'antd'
+import dayjs from 'dayjs'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+const FilesPage: FC = () => {
+  const { t } = useTranslation()
+  const files = useLiveQuery<FileType[]>(() => db.files.orderBy('created_at').reverse().toArray())
+
+  const dataSource = files?.map((file) => {
+    const isImage = file.type === FileTypes.IMAGE
+    const ImageView = <Image src={'file://' + file.path} preview={false} style={{ maxHeight: '40px' }} />
+    return {
+      key: file.id,
+      file: isImage ? ImageView : <FileNameText className="text-nowrap">{file.origin_name}</FileNameText>,
+      name: <a href={'file://' + FileManager.getSafePath(file)}>{file.origin_name}</a>,
+      size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
+      count: file.count,
+      created_at: dayjs(file.created_at).format('MM-DD HH:mm')
+    }
+  })
+
+  const columns = [
+    {
+      title: t('files.file'),
+      dataIndex: 'file',
+      key: 'file',
+      width: '300px'
+    },
+    {
+      title: t('files.name'),
+      dataIndex: 'name',
+      key: 'name'
+    },
+    {
+      title: t('files.size'),
+      dataIndex: 'size',
+      key: 'size',
+      width: '100px'
+    },
+    {
+      title: t('files.count'),
+      dataIndex: 'count',
+      key: 'count',
+      width: '100px'
+    },
+    {
+      title: t('files.created_at'),
+      dataIndex: 'created_at',
+      key: 'created_at',
+      width: '120px'
+    }
+  ]
+
+  return (
+    <Container>
+      <Navbar>
+        <NavbarCenter style={{ borderRight: 'none' }}>{t('files.title')}</NavbarCenter>
+      </Navbar>
+      <ContentContainer>
+        <VStack style={{ flex: 1 }}>
+          <Table dataSource={dataSource} columns={columns} style={{ width: '100%', height: '100%' }} size="small" />
+        </VStack>
+      </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: 20px;
+`
+
+const FileNameText = styled.div`
+  font-size: 14px;
+  color: var(--color-text);
+  max-width: 300px;
+`
+
+export default FilesPage

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

@@ -1,38 +1,61 @@
-import { CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import { DeleteOutlined, EditOutlined, MinusCircleOutlined, PlusOutlined } 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 { useSettings } from '@renderer/hooks/useSettings'
 import { getDefaultTopic, syncAsistantToAgent } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { useAppSelector } from '@renderer/store'
+import { useAppDispatch, useAppSelector } from '@renderer/store'
+import { setSearching } from '@renderer/store/runtime'
 import { Assistant } from '@renderer/types'
-import { droppableReorder, uuid } from '@renderer/utils'
-import { Dropdown } from 'antd'
+import { uuid } from '@renderer/utils'
+import { Dropdown, Input, InputRef } from 'antd'
 import { ItemType } from 'antd/es/menu/interface'
-import { last } from 'lodash'
-import { FC, useCallback } from 'react'
+import { isEmpty, last } from 'lodash'
+import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
 interface Props {
   activeAssistant: Assistant
   setActiveAssistant: (assistant: Assistant) => void
+  onCreateDefaultAssistant: () => void
   onCreateAssistant: () => void
 }
 
-const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAssistant }) => {
+const Assistants: FC<Props> = ({
+  activeAssistant,
+  setActiveAssistant,
+  onCreateAssistant,
+  onCreateDefaultAssistant
+}) => {
   const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
   const generating = useAppSelector((state) => state.runtime.generating)
-  const { updateAssistant } = useAssistant(activeAssistant.id)
+  const [search, setSearch] = useState('')
+  const [dragging, setDragging] = useState(false)
+  const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id)
+  const { clickAssistantToShowTopic, topicPosition } = useSettings()
+  const searchRef = useRef<InputRef>(null)
   const { t } = useTranslation()
+  const dispatch = useAppDispatch()
 
   const onDelete = useCallback(
     (assistant: Assistant) => {
       const _assistant = last(assistants.filter((a) => a.id !== assistant.id))
-      _assistant ? setActiveAssistant(_assistant) : onCreateAssistant()
+      _assistant ? setActiveAssistant(_assistant) : onCreateDefaultAssistant()
       removeAssistant(assistant.id)
     },
-    [assistants, onCreateAssistant, removeAssistant, setActiveAssistant]
+    [assistants, onCreateDefaultAssistant, removeAssistant, setActiveAssistant]
+  )
+
+  const onEditAssistant = useCallback(
+    async (assistant: Assistant) => {
+      const _assistant = await AssistantSettingPopup.show({ assistant })
+      updateAssistant(_assistant)
+      syncAsistantToAgent(_assistant)
+    },
+    [updateAssistant]
   )
 
   const getMenuItems = useCallback(
@@ -42,22 +65,32 @@ 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'),
+              centered: true,
+              okButtonProps: { danger: true },
+              onOk: removeAllTopics
+            })
+          }
+        },
         { type: 'divider' },
         {
           label: t('common.delete'),
@@ -67,19 +100,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,41 +111,109 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
           key: 'switch-assistant'
         })
       }
-      EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)
+
+      if (topicPosition === 'left' && clickAssistantToShowTopic) {
+        EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)
+      }
+
       setActiveAssistant(assistant)
     },
-    [generating, setActiveAssistant, t]
+    [clickAssistantToShowTopic, generating, setActiveAssistant, t, topicPosition]
   )
 
+  const list = assistants.filter((assistant) => assistant.name?.toLowerCase().includes(search.toLowerCase().trim()))
+
+  const onSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const isEnterPressed = e.keyCode == 13
+
+    if (e.key === 'Escape') {
+      return searchRef.current?.blur()
+    }
+
+    if (isEnterPressed) {
+      if (list.length > 0) {
+        if (list.length === 1) {
+          onSwitchAssistant(list[0])
+          setSearch('')
+          setTimeout(() => searchRef.current?.blur(), 0)
+          return
+        }
+        const index = list.findIndex((a) => a.id === activeAssistant?.id)
+        onSwitchAssistant(index === list.length - 1 ? list[0] : list[index + 1])
+      }
+    }
+
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      searchRef.current?.focus()
+      searchRef.current?.select()
+    }
+  }
+
+  // Command or Ctrl + K create new topic
+  useEffect(() => {
+    const onKeydown = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        searchRef.current?.focus()
+        searchRef.current?.select()
+      }
+    }
+    document.addEventListener('keydown', onKeydown)
+    return () => document.removeEventListener('keydown', onKeydown)
+  }, [activeAssistant?.id, list, onSwitchAssistant])
+
   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 }}>
-                      <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
-                        <AssistantItem
-                          onClick={() => onSwitchAssistant(assistant)}
-                          className={assistant.id === activeAssistant?.id ? 'active' : ''}>
-                          <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
-                        </AssistantItem>
-                      </Dropdown>
-                    </div>
-                  )}
-                </Draggable>
-              ))}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
+      {assistants.length >= 10 && (
+        <SearchContainer>
+          <Input
+            placeholder={t('chat.assistant.search.placeholder')}
+            suffix={<CommandKey>⌘+K</CommandKey>}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{ borderRadius: 4, borderWidth: 0.5 }}
+            onKeyDown={onSearch}
+            ref={searchRef}
+            onFocus={() => dispatch(setSearching(true))}
+            onBlur={() => {
+              dispatch(setSearching(false))
+              setSearch('')
+            }}
+            allowClear
+          />
+        </SearchContainer>
+      )}
+      <DragableList
+        list={list}
+        onUpdate={updateAssistants}
+        droppableProps={{ isDropDisabled: !isEmpty(search) }}
+        style={{ paddingBottom: dragging ? '34px' : 0 }}
+        onDragStart={() => setDragging(true)}
+        onDragEnd={() => setDragging(false)}>
+        {(assistant) => {
+          const isCurrent = assistant.id === activeAssistant?.id
+          return (
+            <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
+              <AssistantItem onClick={() => onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}>
+                <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
+                {isCurrent && (
+                  <ArrowRightButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
+                    <i className="iconfont icon-gridlines" />
+                  </ArrowRightButton>
+                )}
+                {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
+              </AssistantItem>
+            </Dropdown>
+          )
+        }}
+      </DragableList>
+      {!dragging && (
+        <AssistantItem onClick={onCreateAssistant}>
+          <AssistantName>
+            <PlusOutlined style={{ color: 'var(--color-text-2)', marginRight: 4 }} />
+            {t('chat.add.assistant.title')}
+          </AssistantName>
+        </AssistantItem>
+      )}
     </Container>
   )
 }
@@ -132,38 +221,42 @@ const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAs
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  min-width: var(--assistants-width);
-  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;
-  cursor: pointer;
+  margin: 0 10px;
+  padding-right: 35px;
   font-family: Ubuntu;
-  .anticon {
-    display: none;
+  cursor: pointer;
+  .iconfont {
+    opacity: 0;
+    color: var(--color-text-3);
   }
   &:hover {
     background-color: var(--color-background-soft);
-    .anticon {
-      display: block;
-      color: var(--color-text-1);
-    }
   }
   &.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 +266,55 @@ 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: 22px;
+  height: 22px;
+  min-width: 22px;
+  min-height: 22px;
+  border-radius: 4px;
+  position: absolute;
+  background-color: var(--color-background);
+  right: 9px;
+  top: 6px;
+  .iconfont {
+    font-size: 12px;
+  }
+`
+
+const TopicCount = styled.div`
+  color: var(--color-text-2);
+  font-size: 10px;
+  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;
+`
+
+const SearchContainer = styled.div`
+  margin: 0 10px;
+  margin-bottom: 10px;
+`
+
+const CommandKey = styled.div`
+  color: var(--color-text-2);
+  font-size: 10px;
+  padding: 2px 5px;
+  border-radius: 4px;
+  background-color: var(--color-background);
+  margin-right: -4px;
 `
 
 export default Assistants

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

@@ -1,6 +1,7 @@
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useActiveTopic } from '@renderer/hooks/useTopic'
-import { Assistant } from '@renderer/types'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowTopics } from '@renderer/hooks/useStore'
+import { Assistant, Topic } from '@renderer/types'
 import { Flex } from 'antd'
 import { FC } from 'react'
 import styled from 'styled-components'
@@ -11,19 +12,31 @@ import RightSidebar from './RightSidebar'
 
 interface Props {
   assistant: Assistant
+  activeTopic: Topic
+  setActiveTopic: (topic: Topic) => void
+  setActiveAssistant: (assistant: Assistant) => void
 }
 
 const Chat: FC<Props> = (props) => {
   const { assistant } = useAssistant(props.assistant.id)
-  const { activeTopic, setActiveTopic } = useActiveTopic(assistant)
+  const { topicPosition } = useSettings()
+  const { showTopics } = useShowTopics()
 
   return (
     <Container id="chat">
       <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' && showTopics && (
+        <RightSidebar
+          activeAssistant={assistant}
+          activeTopic={props.activeTopic}
+          setActiveAssistant={props.setActiveAssistant}
+          setActiveTopic={props.setActiveTopic}
+          position="right"
+        />
+      )}
     </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,77 +1,43 @@
-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 { useAssistants } from '@renderer/hooks/useAssistant'
+import { useShowAssistants } from '@renderer/hooks/useStore'
+import { useActiveTopic } from '@renderer/hooks/useTopic'
 import { Assistant } from '@renderer/types'
-import { uuid } from '@renderer/utils'
-import { Switch } from 'antd'
 import { FC, useState } from 'react'
 import styled from 'styled-components'
 
-import AddAssistantPopup from '../../components/Popups/AddAssistantPopup'
-import Assistants from './Assistants'
 import Chat from './Chat'
-import Navigation from './Header'
+import Navbar from './Navbar'
+import RightSidebar from './RightSidebar'
 
 let _activeAssistant: Assistant
 
 const HomePage: FC = () => {
-  const { assistants, addAssistant } = useAssistants()
+  const { assistants } = useAssistants()
   const [activeAssistant, setActiveAssistant] = useState(_activeAssistant || assistants[0])
-  const { rightSidebarShown, toggleRightSidebar } = useShowRightSidebar()
-  const { showAssistants, toggleShowAssistants } = useShowAssistants()
-  const { defaultAssistant } = useDefaultAssistant()
-  const { theme, toggleTheme } = useTheme()
+  const { showAssistants } = useShowAssistants()
+  const { activeTopic, setActiveTopic } = useActiveTopic(activeAssistant)
 
   _activeAssistant = activeAssistant
 
-  const onCreateDefaultAssistant = () => {
-    const assistant = { ...defaultAssistant, id: uuid() }
-    addAssistant(assistant)
-    setActiveAssistant(assistant)
-  }
-
-  const onCreateAssistant = async () => {
-    const assistant = await AddAssistantPopup.show()
-    assistant && setActiveAssistant(assistant)
-  }
-
   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}
-          />
-          <NewButton onClick={toggleRightSidebar}>
-            <i className={`iconfont ${rightSidebarShown ? 'icon-showsidebarhoriz' : 'icon-hidesidebarhoriz'}`} />
-          </NewButton>
-        </NavbarRight>
-      </Navbar>
+      <Navbar activeAssistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
       <ContentContainer>
         {showAssistants && (
-          <Assistants
+          <RightSidebar
             activeAssistant={activeAssistant}
+            activeTopic={activeTopic}
             setActiveAssistant={setActiveAssistant}
-            onCreateAssistant={onCreateDefaultAssistant}
+            setActiveTopic={setActiveTopic}
+            position="left"
           />
         )}
-        <Chat assistant={activeAssistant} />
+        <Chat
+          assistant={activeAssistant}
+          activeTopic={activeTopic}
+          setActiveTopic={setActiveTopic}
+          setActiveAssistant={setActiveAssistant}
+        />
       </ContentContainer>
     </Container>
   )
@@ -90,40 +56,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,46 @@
+import { PaperClipOutlined } from '@ant-design/icons'
+import { imageExts, textExts } from '@renderer/config/constant'
+import { isVisionModel } from '@renderer/config/models'
+import { FileType, Model } from '@renderer/types'
+import { Tooltip } from 'antd'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  model: Model
+  files: FileType[]
+  setFiles: (files: FileType[]) => void
+  ToolbarButton: any
+}
+
+const AttachmentButton: FC<Props> = ({ model, files, setFiles, ToolbarButton }) => {
+  const { t } = useTranslation()
+  const extensions = isVisionModel(model) ? [...imageExts, ...textExts] : [...textExts]
+
+  const onSelectFile = async () => {
+    if (files.length > 0) {
+      return setFiles([])
+    }
+
+    const _files = await window.api.file.select({
+      filters: [
+        {
+          name: 'Files',
+          extensions: extensions.map((i) => i.replace('.', ''))
+        }
+      ]
+    })
+
+    _files && setFiles(_files)
+  }
+
+  return (
+    <Tooltip placement="top" title={t('chat.input.upload')} arrow>
+      <ToolbarButton type="text" className={files.length ? 'active' : ''} onClick={onSelectFile}>
+        <PaperClipOutlined style={{ rotate: '135deg' }} />
+      </ToolbarButton>
+    </Tooltip>
+  )
+}
+
+export default AttachmentButton

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

@@ -0,0 +1,42 @@
+import FileManager from '@renderer/services/file'
+import { FileType } from '@renderer/types'
+import { Upload } from 'antd'
+import { isEmpty } from 'lodash'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  files: FileType[]
+  setFiles: (files: FileType[]) => void
+}
+
+const AttachmentPreview: FC<Props> = ({ files, setFiles }) => {
+  if (isEmpty(files)) {
+    return null
+  }
+
+  return (
+    <Container>
+      <Upload
+        listType="picture-card"
+        fileList={files.map((file) => ({
+          uid: file.id,
+          url: 'file://' + FileManager.getSafePath(file),
+          status: 'done',
+          name: file.name
+        }))}
+        onRemove={(item) => setFiles(files.filter((file) => item.uid !== file.id))}
+      />
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin: 10px 20px;
+  margin-right: 0;
+`
+
+export default AttachmentPreview

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

@@ -1,32 +1,38 @@
 import {
   ClearOutlined,
   ControlOutlined,
+  FormOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
-  HistoryOutlined,
   PauseCircleOutlined,
-  PlusCircleOutlined,
   QuestionCircleOutlined
 } from '@ant-design/icons'
-import { DEFAULT_CONEXTCOUNT } from '@renderer/config/constant'
+import { imageExts, textExts } from '@renderer/config/constant'
+import { isVisionModel } from '@renderer/config/models'
+import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
+import { useRuntime, useShowTopics } from '@renderer/hooks/useStore'
 import { getDefaultTopic } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { estimateInputTokenCount } from '@renderer/services/messages'
-import store, { useAppSelector } from '@renderer/store'
-import { setGenerating } from '@renderer/store/runtime'
-import { Assistant, Message, Topic } from '@renderer/types'
-import { delay, uuid } from '@renderer/utils'
-import { Button, Divider, Popconfirm, Tag, Tooltip } from 'antd'
+import FileManager from '@renderer/services/file'
+import { estimateTextTokens } from '@renderer/services/tokens'
+import store, { useAppDispatch, useAppSelector } from '@renderer/store'
+import { setGenerating, setSearching } from '@renderer/store/runtime'
+import { Assistant, FileType, Message, Topic } from '@renderer/types'
+import { delay, getFileExtension, uuid } from '@renderer/utils'
+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 AttachmentButton from './AttachmentButton'
+import AttachmentPreview from './AttachmentPreview'
 import SendMessageButton from './SendMessageButton'
+import TokenCount from './TokenCount'
 
 interface Props {
   assistant: Assistant
@@ -38,17 +44,26 @@ let _text = ''
 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 { addTopic, model } = useAssistant(assistant.id)
+  const { sendMessageShortcut, fontSize, pasteLongTextAsFile } = 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<FileType[]>([])
   const { t } = useTranslation()
+  const containerRef = useRef(null)
+  const { showTopics, toggleShowTopics } = useShowTopics()
+  const { searching } = useRuntime()
+  const dispatch = useAppDispatch()
+
+  const isVision = useMemo(() => isVisionModel(model), [model])
+  const supportExts = useMemo(() => [...textExts, ...(isVision ? imageExts : [])], [isVision])
 
   _text = text
 
-  const sendMessage = useCallback(() => {
+  const sendMessage = useCallback(async () => {
     if (generating) {
       return
     }
@@ -67,24 +82,32 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
       status: 'success'
     }
 
+    if (files.length > 0) {
+      message.files = await FileManager.uploadFiles(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 inputTokenCount = useMemo(() => estimateTextTokens(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 +115,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()
     }
@@ -102,6 +125,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
     const topic = getDefaultTopic()
     addTopic(topic)
     setActiveTopic(topic)
+    db.topics.add({ id: topic.id, messages: [] })
   }, [addTopic, setActiveTopic])
 
   const clearTopic = async () => {
@@ -117,6 +141,87 @@ 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()
+
+  const onPaste = useCallback(
+    async (event: ClipboardEvent) => {
+      for (const file of event.clipboardData?.files || []) {
+        event.preventDefault()
+
+        if (file.path === '') {
+          if (file.type.startsWith('image/')) {
+            const tempFilePath = await window.api.file.create(file.name)
+            const arrayBuffer = await file.arrayBuffer()
+            const uint8Array = new Uint8Array(arrayBuffer)
+            await window.api.file.write(tempFilePath, uint8Array)
+            const selectedFile = await window.api.file.get(tempFilePath)
+            selectedFile && setFiles((prevFiles) => [...prevFiles, selectedFile])
+            break
+          }
+        }
+
+        if (file.path) {
+          if (supportExts.includes(getFileExtension(file.path))) {
+            const selectedFile = await window.api.file.get(file.path)
+            selectedFile && setFiles((prevFiles) => [...prevFiles, selectedFile])
+          }
+        }
+      }
+
+      if (pasteLongTextAsFile) {
+        const item = event.clipboardData?.items[0]
+        if (item && item.kind === 'string' && item.type === 'text/plain') {
+          event.preventDefault()
+          item.getAsString(async (text) => {
+            if (text.length > 1500) {
+              console.debug(item.getAsFile())
+              const tempFilePath = await window.api.file.create('pasted_text.txt')
+              await window.api.file.write(tempFilePath, text)
+              const selectedFile = await window.api.file.get(tempFilePath)
+              selectedFile && setFiles((prevFiles) => [...prevFiles, selectedFile])
+            } else {
+              setText((prevText) => prevText + text)
+              setTimeout(() => resizeTextArea(), 0)
+            }
+          })
+        }
+      }
+    },
+    [supportExts, pasteLongTextAsFile]
+  )
+
   // Command or Ctrl + N create new topic
   useEffect(() => {
     const onKeydown = (e) => {
@@ -124,7 +229,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,104 +242,100 @@ 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()
+        setTimeout(() => resizeTextArea(), 0)
       }),
-      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' : ''}>
-      <Toolbar>
-        <ToolbarMenu>
-          <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
-            <ToolbarButton type="text" onClick={addNewTopic}>
-              <PlusCircleOutlined />
-            </ToolbarButton>
-          </Tooltip>
-          <Tooltip placement="top" title={t('chat.input.clear')} arrow>
-            <Popconfirm
-              title={t('chat.input.clear.content')}
-              placement="top"
-              onConfirm={clearTopic}
-              okButtonProps={{ danger: true }}
-              icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
-              okText={t('chat.input.clear')}>
-              <ToolbarButton type="text">
-                <ClearOutlined />
-              </ToolbarButton>
-            </Popconfirm>
-          </Tooltip>
-          <Tooltip placement="top" title={t('chat.input.topics')} arrow>
-            <ToolbarButton type="text" onClick={() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR)}>
-              <HistoryOutlined />
-            </ToolbarButton>
-          </Tooltip>
-          <Tooltip placement="top" title={t('chat.input.settings')} arrow>
-            <ToolbarButton type="text" onClick={() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS)}>
-              <ControlOutlined />
-            </ToolbarButton>
-          </Tooltip>
-          <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
-            <ToolbarButton type="text" onClick={() => setExpend(!expended)}>
-              {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-            </ToolbarButton>
-          </Tooltip>
-          {showInputEstimatedTokens && (
-            <TextCount>
-              <Tooltip title={t('chat.input.context_count.tip') + ' | ' + t('chat.input.estimated_tokens.tip')}>
-                <Tag
-                  style={{
-                    cursor: 'pointer',
-                    borderRadius: '6px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    padding: '2px 8px',
-                    borderWidth: 0.5
-                  }}>
-                  <i className="iconfont icon-history" style={{ marginRight: '3px' }} />
-                  {assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT}
-                  <Divider type="vertical" style={{ marginTop: 2, marginLeft: 5, marginRight: 5 }} />↑{inputTokenCount}
-                  <span style={{ margin: '0 2px' }}>/</span>
-                  {estimateTokenCount}
-                </Tag>
-              </Tooltip>
-            </TextCount>
-          )}
-        </ToolbarMenu>
-        <ToolbarMenu>
-          {generating && (
-            <Tooltip placement="top" title={t('chat.input.pause')} arrow>
-              <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>
-                <PauseCircleOutlined style={{ color: 'var(--color-error)', fontSize: 20 }} />
+    <Container>
+      <AttachmentPreview files={files} setFiles={setFiles} />
+      <InputBarContainer 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}
+          disabled={searching}
+          onPaste={(e) => onPaste(e.nativeEvent)}
+          onClick={() => searching && dispatch(setSearching(false))}
+        />
+        <Toolbar>
+          <ToolbarMenu>
+            <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
+              <ToolbarButton type="text" onClick={addNewTopic}>
+                <FormOutlined />
               </ToolbarButton>
             </Tooltip>
-          )}
-          {!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 }}
-      />
+            <Tooltip placement="top" title={t('chat.input.clear')} arrow>
+              <Popconfirm
+                title={t('chat.input.clear.content')}
+                placement="top"
+                onConfirm={clearTopic}
+                okButtonProps={{ danger: true }}
+                icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
+                okText={t('chat.input.clear')}>
+                <ToolbarButton type="text">
+                  <ClearOutlined />
+                </ToolbarButton>
+              </Popconfirm>
+            </Tooltip>
+            <Tooltip placement="top" title={t('chat.input.settings')} arrow>
+              <ToolbarButton
+                type="text"
+                onClick={() => {
+                  !showTopics && toggleShowTopics()
+                  setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_CHAT_SETTINGS), 0)
+                }}>
+                <ControlOutlined />
+              </ToolbarButton>
+            </Tooltip>
+            <AttachmentButton model={model} files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} />
+            <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
+              <ToolbarButton type="text" onClick={onToggleExpended}>
+                {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+              </ToolbarButton>
+            </Tooltip>
+            <TokenCount
+              estimateTokenCount={estimateTokenCount}
+              inputTokenCount={inputTokenCount}
+              contextCount={contextCount}
+              ToolbarButton={ToolbarButton}
+              onClick={onNewContext}
+            />
+          </ToolbarMenu>
+          <ToolbarMenu>
+            {generating && (
+              <Tooltip placement="top" title={t('chat.input.pause')} arrow>
+                <ToolbarButton type="text" onClick={onPause} style={{ marginRight: -2, marginTop: 1 }}>
+                  <PauseCircleOutlined style={{ color: 'var(--color-error)', fontSize: 20 }} />
+                </ToolbarButton>
+              </Tooltip>
+            )}
+            {!generating && <SendMessageButton sendMessage={sendMessage} disabled={generating || !text} />}
+          </ToolbarMenu>
+        </Toolbar>
+      </InputBarContainer>
     </Container>
   )
 }
@@ -242,7 +343,14 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  height: var(--input-bar-height);
+`
+
+const TextareaStyle: CSSProperties = {
+  paddingLeft: 0,
+  padding: '10px 15px 8px'
+}
+
+const InputBarContainer = styled.div`
   border: 1px solid var(--color-border-soft);
   transition: all 0.3s ease;
   position: relative;
@@ -257,11 +365,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`
@@ -269,8 +377,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`
@@ -281,31 +390,43 @@ 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);
   }
+  .icon-a-addchat {
+    font-size: 19px;
+    margin-bottom: -2px;
+  }
   &:hover {
     background-color: var(--color-background-soft);
-    .anticon {
+    .anticon,
+    .iconfont {
       color: var(--color-text-1);
     }
   }
+  &.active {
+    background-color: var(--color-primary) !important;
+    .anticon,
+    .iconfont {
+      color: var(--color-white-soft);
+    }
+    &:hover {
+      background-color: var(--color-primary);
+    }
+  }
 `
 
-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;
-`
-
 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>
+        <Popover content={PopoverContent}>
+          <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,9 +1,9 @@
 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 { ThemeMode } from '@renderer/types'
+import React, { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { atomDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
@@ -17,45 +17,60 @@ interface CodeBlockProps {
   [key: string]: any
 }
 
-const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) => {
+const CodeBlock: React.FC<CodeBlockProps> = ({ children, className }) => {
   const match = /language-(\w+)/.exec(className || '')
-  const [copied, setCopied] = useState(false)
+  const showFooterCopyButton = children && children.length > 500
   const { theme } = useTheme()
 
-  const { t } = useTranslation()
-
-  const onCopy = () => {
-    navigator.clipboard.writeText(children)
-    window.message.success({ content: t('message.copied'), key: 'copy-code' })
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
   if (match && match[1] === 'mermaid') {
     initMermaid(theme)
     return <Mermaid chart={children} />
   }
 
   return match ? (
-    <div>
+    <div className="code-block">
       <CodeHeader>
         <CodeLanguage>{'<' + match[1].toUpperCase() + '>'}</CodeLanguage>
-        {!copied && <CopyIcon className="copy" onClick={onCopy} />}
-        {copied && <CheckOutlined style={{ color: 'var(--color-primary)' }} />}
+        <CopyButton text={children} />
       </CodeHeader>
       <SyntaxHighlighter
-        {...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>
+      {showFooterCopyButton && (
+        <CodeFooter>
+          <CopyButton text={children} style={{ marginTop: -40, marginRight: 10 }} />
+        </CodeFooter>
+      )}
     </div>
   ) : (
-    <code {...rest} className={className}>
-      {children}
-    </code>
+    <code className={className}>{children}</code>
+  )
+}
+
+const CopyButton: React.FC<{ text: string; style?: React.CSSProperties }> = ({ text, style }) => {
+  const [copied, setCopied] = useState(false)
+  const { t } = useTranslation()
+
+  const onCopy = () => {
+    navigator.clipboard.writeText(text)
+    window.message.success({ content: t('message.copied'), key: 'copy-code' })
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return copied ? (
+    <CheckOutlined style={{ color: 'var(--color-primary)', ...style }} />
+  ) : (
+    <CopyIcon className="copy" style={style} onClick={onCopy} />
   )
 }
 
@@ -67,7 +82,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;
@@ -85,4 +100,19 @@ const CodeLanguage = styled.div`
   font-weight: bold;
 `
 
-export default CodeBlock
+const CodeFooter = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  .copy {
+    cursor: pointer;
+    color: var(--color-text-3);
+    transition: color 0.3s;
+  }
+  .copy:hover {
+    color: var(--color-text-1);
+  }
+`
+
+export default memo(CodeBlock)

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

@@ -1,11 +1,10 @@
 import 'katex/dist/katex.min.css'
 
 import { Message } from '@renderer/types'
-import { convertMathFormula } from '@renderer/utils'
 import { isEmpty } from 'lodash'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown, { Components } from 'react-markdown'
 import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
@@ -17,6 +16,14 @@ interface Props {
   message: Message
 }
 
+const rehypePlugins = [rehypeKatex]
+const remarkPlugins = [remarkMath, remarkGfm]
+
+const components = {
+  code: CodeBlock,
+  a: Link
+}
+
 const Markdown: FC<Props> = ({ message }) => {
   const { t } = useTranslation()
 
@@ -24,25 +31,54 @@ const Markdown: FC<Props> = ({ message }) => {
     const empty = isEmpty(message.content)
     const paused = message.status === 'paused'
     const content = empty && paused ? t('message.chat.completion.paused') : message.content
-    return convertMathFormula(content)
+    return escapeBrackets(escapeDollarNumber(content))
   }, [message.content, message.status, t])
 
-  return useMemo(() => {
-    return (
-      <ReactMarkdown
-        className="markdown"
-        rehypePlugins={[rehypeKatex]}
-        remarkPlugins={[[remarkMath, { singleDollarTextMath: false }], remarkGfm]}
-        remarkRehypeOptions={{
-          footnoteLabel: t('common.footnotes'),
-          footnoteLabelTagName: 'h4',
-          footnoteBackContent: ' '
-        }}
-        components={{ code: CodeBlock as any, a: Link as any }}>
-        {messageContent}
-      </ReactMarkdown>
-    )
-  }, [messageContent, t])
+  return (
+    <ReactMarkdown
+      className="markdown"
+      rehypePlugins={rehypePlugins}
+      remarkPlugins={remarkPlugins}
+      components={components as Partial<Components>}
+      remarkRehypeOptions={{
+        footnoteLabel: t('common.footnotes'),
+        footnoteLabelTagName: 'h4',
+        footnoteBackContent: ' '
+      }}>
+      {messageContent}
+    </ReactMarkdown>
+  )
+}
+
+function escapeDollarNumber(text: string) {
+  let escapedText = ''
+
+  for (let i = 0; i < text.length; i += 1) {
+    let char = text[i]
+    const nextChar = text[i + 1] || ' '
+
+    if (char === '$' && nextChar >= '0' && nextChar <= '9') {
+      char = '\\$'
+    }
+
+    escapedText += char
+  }
+
+  return escapedText
+}
+
+function escapeBrackets(text: string) {
+  const pattern = /(```[\s\S]*?```|`.*?`)|\\\[([\s\S]*?[^\\])\\\]|\\\((.*?)\\\)/g
+  return text.replace(pattern, (match, codeBlock, squareBracket, roundBracket) => {
+    if (codeBlock) {
+      return codeBlock
+    } else if (squareBracket) {
+      return `$$${squareBracket}$$`
+    } else if (roundBracket) {
+      return `$${roundBracket}$`
+    }
+    return match
+  })
 }
 
 export default Markdown

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

@@ -2,21 +2,25 @@ import {
   CheckOutlined,
   DeleteOutlined,
   EditOutlined,
+  ForkOutlined,
   MenuOutlined,
   QuestionCircleOutlined,
   SaveOutlined,
   SyncOutlined
 } from '@ant-design/icons'
+import UserPopup from '@renderer/components/Popups/UserPopup'
 import { FONT_FAMILY } from '@renderer/config/constant'
+import { APP_NAME, AppLogo, isLocalAi } from '@renderer/config/env'
+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 { firstLetter, removeLeadingEmoji, removeTrailingDoubleSpaces } from '@renderer/utils'
+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 +29,8 @@ import styled from 'styled-components'
 
 import SelectModelDropdown from '../components/SelectModelDropdown'
 import Markdown from '../Markdown/Markdown'
+import MessageAttachments from './MessageAttachments'
+import MessgeTokens from './MessageTokens'
 
 interface Props {
   message: Message
@@ -37,19 +43,18 @@ 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)
 
   const isLastMessage = index === 0
   const isUserMessage = message.role === 'user'
   const isAssistantMessage = message.role === 'assistant'
   const canRegenerate = isLastMessage && isAssistantMessage
-  const showMetadata = Boolean(message.usage) && !generating
 
   const onCopy = useCallback(() => {
-    navigator.clipboard.writeText(message.content)
+    navigator.clipboard.writeText(removeTrailingDoubleSpaces(message.content))
     window.message.success({ content: t('message.copied'), key: 'copy-message' })
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
@@ -65,19 +70,29 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
     [setModel]
   )
 
+  const onNewBranch = useCallback(() => {
+    EventEmitter.emit(EVENT_NAMES.NEW_BRANCH, index)
+  }, [index])
+
   const getUserName = useCallback(() => {
-    if (message.id === 'assistant') return assistant?.name
-    if (message.role === 'assistant') return upperFirst(model.name || model.id)
+    if (isLocalAi && message.role !== 'user') return APP_NAME
+    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])
+  }, [message.role, model?.id, model?.name, t, userName])
 
   const fontFamily = useMemo(() => {
     return messageFont === 'serif' ? FONT_FAMILY.replace('sans-serif', 'serif').replace('Ubuntu, ', '') : FONT_FAMILY
   }, [messageFont])
 
   const messageBorder = showMessageDivider ? undefined : 'none'
-  const avatarSource = useMemo(() => (message.modelId ? getModelLogo(message.modelId) : undefined), [message.modelId])
+
+  const avatarSource = useMemo(() => {
+    if (isLocalAi) return AppLogo
+    return message.modelId ? getModelLogo(message.modelId) : undefined
+  }, [message.modelId])
+
   const avatarName = useMemo(() => firstLetter(assistant?.name).toUpperCase(), [assistant?.name])
+
   const username = useMemo(() => removeLeadingEmoji(getUserName()), [getUserName])
 
   const dropdownItems = useMemo(
@@ -95,39 +110,39 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
     [t, message]
   )
 
-  const MessageItem = useCallback(() => {
-    if (message.status === 'sending') {
-      return (
-        <MessageContentLoading>
-          <SyncOutlined spin size={24} />
-        </MessageContentLoading>
-      )
-    }
+  const showMiniApp = () => model?.provider && startMinAppById(model?.provider)
 
-    if (message.status === 'error') {
-      return (
-        <Alert
-          message={t('error.chat.response')}
-          description={<Markdown message={message} />}
-          type="error"
-          style={{ marginBottom: 15 }}
-        />
-      )
-    }
-
-    return <Markdown message={message} />
-  }, [message])
+  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',
+                border: '1px solid var(--color-border)'
+              }}
+              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>
@@ -135,11 +150,12 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
           </UserWrap>
         </AvatarWrapper>
       </MessageHeader>
-      <MessageContent style={{ fontFamily, fontSize }}>
-        <MessageItem />
-        <MessageFooter style={{ border: messageBorder }}>
+      <MessageContentContainer style={{ fontFamily, fontSize }}>
+        <MessageContent message={message} />
+        <MessageFooter style={{ border: messageBorder, flexDirection: isLastMessage ? 'row-reverse' : undefined }}>
+          <MessgeTokens message={message} />
           {showMenu && (
-            <MenusBar className={`menubar ${isLastMessage && 'show'} ${(!isLastMessage || isUserMessage) && 'user'}`}>
+            <MenusBar className={`menubar ${isLastMessage && 'show'}`}>
               {message.role === 'user' && (
                 <Tooltip title="Edit" mouseEnterDelay={0.8}>
                   <ActionButton onClick={onEdit}>
@@ -154,7 +170,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 />
@@ -162,6 +178,13 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
                   </Tooltip>
                 </SelectModelDropdown>
               )}
+              {isAssistantMessage && (
+                <Tooltip title={t('chat.message.new.branch')} mouseEnterDelay={0.8}>
+                  <ActionButton onClick={onNewBranch}>
+                    <ForkOutlined />
+                  </ActionButton>
+                </Tooltip>
+              )}
               <Popconfirm
                 title={t('message.message.delete.content')}
                 okButtonProps={{ danger: true }}
@@ -182,18 +205,42 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
               )}
             </MenusBar>
           )}
-          {showMetadata && (
-            <MessageMetadata>
-              Tokens: {message?.usage?.total_tokens} | ↑{message?.usage?.prompt_tokens} | ↓
-              {message?.usage?.completion_tokens}
-            </MessageMetadata>
-          )}
         </MessageFooter>
-      </MessageContent>
+      </MessageContentContainer>
     </MessageContainer>
   )
 }
 
+const MessageContent: React.FC<{ message: Message }> = ({ message }) => {
+  const { t } = useTranslation()
+
+  if (message.status === 'sending') {
+    return (
+      <MessageContentLoading>
+        <SyncOutlined spin size={24} />
+      </MessageContentLoading>
+    )
+  }
+
+  if (message.status === 'error') {
+    return (
+      <Alert
+        message={<div style={{ fontSize: 14 }}>{t('error.chat.response')}</div>}
+        description={<Markdown message={message} />}
+        type="error"
+        style={{ marginBottom: 15, padding: 10, fontSize: 12 }}
+      />
+    )
+  }
+
+  return (
+    <>
+      <Markdown message={message} />
+      <MessageAttachments message={message} />
+    </>
+  )
+}
+
 const MessageContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -250,7 +297,7 @@ const MessageTime = styled.div`
   color: var(--color-text-3);
 `
 
-const MessageContent = styled.div`
+const MessageContentContainer = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -285,13 +332,6 @@ const MenusBar = styled.div`
   margin-left: -5px;
 `
 
-const MessageMetadata = styled.div`
-  font-size: 12px;
-  color: var(--color-text-2);
-  user-select: text;
-  margin: 2px 0;
-`
-
 const ActionButton = styled.div`
   cursor: pointer;
   border-radius: 8px;

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

@@ -0,0 +1,51 @@
+import FileManager from '@renderer/services/file'
+import { FileTypes, Message } from '@renderer/types'
+import { Image as AntdImage, Upload } from 'antd'
+import { FC } from 'react'
+import styled from 'styled-components'
+
+interface Props {
+  message: Message
+}
+
+const MessageAttachments: FC<Props> = ({ message }) => {
+  if (!message.files) {
+    return null
+  }
+
+  if (message?.files && message.files[0]?.type === FileTypes.IMAGE) {
+    return (
+      <Container>
+        {message.files?.map((image) => <Image src={'file://' + image.path} key={image.id} width="33%" />)}
+      </Container>
+    )
+  }
+
+  return (
+    <Container style={{ marginTop: 2, marginBottom: 8 }}>
+      <Upload
+        listType="picture"
+        disabled
+        fileList={message.files?.map((file) => ({
+          uid: file.id,
+          url: 'file://' + FileManager.getSafePath(file),
+          status: 'done',
+          name: file.origin_name
+        }))}
+      />
+    </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/MessageTokens.tsx

@@ -0,0 +1,38 @@
+import { useRuntime } from '@renderer/hooks/useStore'
+import { Message } from '@renderer/types'
+import styled from 'styled-components'
+
+const MessgeTokens: React.FC<{ message: Message }> = ({ message }) => {
+  const { generating } = useRuntime()
+
+  if (!message.usage) {
+    return null
+  }
+
+  if (message.role === 'user') {
+    return <MessageMetadata>Tokens: {message?.usage?.total_tokens}</MessageMetadata>
+  }
+
+  if (generating) {
+    return null
+  }
+
+  if (message.role === 'assistant') {
+    return (
+      <MessageMetadata>
+        Tokens: {message?.usage?.total_tokens} | ↑{message?.usage?.prompt_tokens} | ↓{message?.usage?.completion_tokens}
+      </MessageMetadata>
+    )
+  }
+
+  return null
+}
+
+const MessageMetadata = styled.div`
+  font-size: 12px;
+  color: var(--color-text-2);
+  user-select: text;
+  margin: 2px 0;
+`
+
+export default MessgeTokens

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

@@ -1,15 +1,15 @@
+import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useProviderByAssistant } from '@renderer/hooks/useProvider'
-import { getTopic } from '@renderer/hooks/useTopic'
+import { getTopic, TopicManager } from '@renderer/hooks/useTopic'
 import { fetchChatCompletion, fetchMessagesSummary } from '@renderer/services/api'
+import { getDefaultTopic } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { estimateHistoryTokenCount, filterMessages } from '@renderer/services/messages'
-import LocalStorage from '@renderer/services/storage'
+import { deleteMessageFiles, filterMessages, getContextCount } from '@renderer/services/messages'
+import { estimateHistoryTokens, estimateMessageUsage } from '@renderer/services/tokens'
 import { Assistant, Message, Model, Topic } from '@renderer/types'
 import { getBriefInfo, runAsyncFunction, uuid } from '@renderer/utils'
 import { t } from 'i18next'
-import localforage from 'localforage'
-import { last, reverse } from 'lodash'
+import { flatten, last, reverse, take } from 'lodash'
 import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
@@ -20,37 +20,51 @@ 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)
   const containerRef = useRef<HTMLDivElement>(null)
-  const { updateTopic } = useAssistant(assistant.id)
+  const { updateTopic, addTopic } = useAssistant(assistant.id)
 
   const onSendMessage = useCallback(
-    (message: Message) => {
+    async (message: Message) => {
+      if (message.role === 'user') {
+        estimateMessageUsage(message).then((usage) => {
+          setMessages((prev) => {
+            const _messages = prev.map((m) => (m.id === message.id ? { ...m, usage } : m))
+            db.topics.update(topic.id, { messages: _messages })
+            return _messages
+          })
+        })
+      }
       const _messages = [...messages, message]
       setMessages(_messages)
-      localforage.setItem(`topic:${topic.id}`, { ...topic, messages: _messages })
+      db.topics.put({ id: topic.id, messages: _messages })
     },
-    [messages, topic]
+    [messages, topic.id]
   )
 
   const autoRenameTopic = useCallback(async () => {
     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) => {
       const _messages = messages.filter((m) => m.id !== message.id)
       setMessages(_messages)
-      localforage.setItem(`topic:${topic.id}`, { id: topic.id, messages: _messages })
+      db.topics.update(topic.id, { messages: _messages })
+      deleteMessageFiles(message)
     },
     [messages, topic.id]
   )
@@ -58,10 +72,15 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
   useEffect(() => {
     const unsubscribes = [
       EventEmitter.on(EVENT_NAMES.SEND_MESSAGE, async (msg: Message) => {
-        onSendMessage(msg)
-        fetchChatCompletion({ assistant, messages: [...messages, msg], topic, onResponse: setLastMessage })
+        await onSendMessage(msg)
+        fetchChatCompletion({
+          assistant,
+          messages: [...messages, msg],
+          topic,
+          onResponse: setLastMessage
+        })
       }),
-      EventEmitter.on(EVENT_NAMES.AI_CHAT_COMPLETION, async (msg: Message) => {
+      EventEmitter.on(EVENT_NAMES.RECEIVE_MESSAGE, async (msg: Message) => {
         setLastMessage(null)
         onSendMessage(msg)
         setTimeout(() => EventEmitter.emit(EVENT_NAMES.AI_AUTO_RENAME), 100)
@@ -83,15 +102,67 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
       EventEmitter.on(EVENT_NAMES.CLEAR_MESSAGES, () => {
         setMessages([])
         updateTopic({ ...topic, messages: [] })
-        LocalStorage.clearTopicMessages(topic.id)
+        TopicManager.clearTopicMessages(topic.id)
+      }),
+      EventEmitter.on(EVENT_NAMES.NEW_CONTEXT, () => {
+        const lastMessage = last(messages)
+
+        if (lastMessage && lastMessage.type === 'clear') {
+          onDeleteMessage(lastMessage)
+          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)
+      }),
+      EventEmitter.on(EVENT_NAMES.NEW_BRANCH, async (index: number) => {
+        const newTopic = getDefaultTopic()
+        newTopic.name = topic.name
+        const branchMessages = take(messages, messages.length - index)
+
+        // 将分支的消息放入数据库
+        await db.topics.add({ id: newTopic.id, messages: branchMessages })
+        addTopic(newTopic)
+        setActiveTopic(newTopic)
+        autoRenameTopic()
+
+        // 由于复制了消息，消息中附带的文件的总数变了，需要更新
+        const filesArr = branchMessages.map((m) => m.files)
+        const files = flatten(filesArr).filter(Boolean)
+        files.map(async (f) => {
+          const file = await db.files.get({ id: f?.id })
+          file && db.files.update(file.id, { count: file.count + 1 })
+        })
       })
     ]
     return () => unsubscribes.forEach((unsub) => unsub())
-  }, [assistant, messages, provider, topic, autoRenameTopic, updateTopic, onSendMessage])
+  }, [
+    addTopic,
+    assistant,
+    autoRenameTopic,
+    messages,
+    onDeleteMessage,
+    onSendMessage,
+    setActiveTopic,
+    topic,
+    updateTopic
+  ])
 
   useEffect(() => {
     runAsyncFunction(async () => {
-      const messages = (await LocalStorage.getTopicMessages(topic.id)) || []
+      const messages = (await TopicManager.getTopicMessages(topic.id)) || []
       setMessages(messages)
     })
   }, [topic.id])
@@ -101,13 +172,18 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
   }, [messages])
 
   useEffect(() => {
-    EventEmitter.emit(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, estimateHistoryTokenCount(assistant, messages))
+    runAsyncFunction(async () => {
+      EventEmitter.emit(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, {
+        tokensCount: await estimateHistoryTokens(assistant, messages),
+        contextCount: getContextCount(assistant, messages)
+      })
+    })
   }, [assistant, messages])
 
   return (
     <Container id="messages" key={assistant.id} ref={containerRef}>
       <Suggestions assistant={assistant} messages={messages} lastMessage={lastMessage} />
-      {lastMessage && <MessageItem message={lastMessage} />}
+      {lastMessage && <MessageItem key={lastMessage.id} message={lastMessage} />}
       {reverse([...messages]).map((message, index) => (
         <MessageItem key={message.id} message={message} showMenu index={index} onDeleteMessage={onDeleteMessage} />
       ))}
@@ -117,6 +193,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,140 @@
+import { FormOutlined } from '@ant-design/icons'
+import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
+import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
+import { isMac, isWindows } from '@renderer/config/constant'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import db from '@renderer/databases'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
+import { getDefaultTopic, syncAsistantToAgent } from '@renderer/services/assistant'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+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
+  setActiveTopic: (topic: Topic) => void
+}
+
+const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveTopic }) => {
+  const { assistant, updateAssistant, addTopic } = useAssistant(activeAssistant.id)
+  const { showAssistants, toggleShowAssistants } = useShowAssistants()
+  const { theme, toggleTheme } = useTheme()
+  const { topicPosition } = useSettings()
+  const { showTopics, toggleShowTopics } = useShowTopics()
+  const { t } = useTranslation()
+
+  const onEditAssistant = useCallback(async () => {
+    const _assistant = await AssistantSettingPopup.show({ assistant })
+    updateAssistant(_assistant)
+    syncAsistantToAgent(_assistant)
+  }, [assistant, updateAssistant])
+
+  const addNewTopic = useCallback(() => {
+    const topic = getDefaultTopic()
+    addTopic(topic)
+    setActiveTopic(topic)
+    db.topics.add({ id: topic.id, messages: [] })
+    window.message.success({ content: t('message.topic.added'), key: 'topic-added' })
+    setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR), 0)
+  }, [addTopic, setActiveTopic, t])
+
+  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={addNewTopic}>
+            <FormOutlined />
+          </NewButton>
+        </NavbarLeft>
+      )}
+      <NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12, flex: 1 }}>
+        <HStack alignItems="center">
+          {!showAssistants && (
+            <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={onEditAssistant}>
+            {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: 8px;
+  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

@@ -0,0 +1,158 @@
+import { BarsOutlined, SettingOutlined } from '@ant-design/icons'
+import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
+import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
+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 { uuid } from '@renderer/utils'
+import { Segmented, SegmentedProps } from 'antd'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import Assistants from './Assistants'
+import Settings from './Settings'
+import Topics from './Topics'
+
+interface Props {
+  activeAssistant: Assistant
+  activeTopic: Topic
+  setActiveAssistant: (assistant: Assistant) => void
+  setActiveTopic: (topic: Topic) => void
+  position: 'left' | 'right'
+}
+
+type Tab = 'assistants' | 'topic' | 'settings'
+
+let _tab: any = ''
+
+const RightSidebar: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant, setActiveTopic, position }) => {
+  const { addAssistant } = useAssistants()
+  const [tab, setTab] = useState<Tab>(position === 'left' ? _tab || 'assistants' : 'topic')
+  const { topicPosition } = useSettings()
+  const { defaultAssistant } = useDefaultAssistant()
+  const { toggleShowTopics } = useShowTopics()
+
+  const { t } = useTranslation()
+
+  const borderStyle = '0.5px solid var(--color-border)'
+  const border = position === 'left' ? { borderRight: borderStyle } : { borderLeft: borderStyle }
+
+  if (position === 'left' && topicPosition === 'left') {
+    _tab = tab
+  }
+
+  const showTab = !(position === 'left' && topicPosition === 'right')
+
+  const assistantTab = {
+    label: t('assistants.abbr'),
+    value: 'assistants',
+    icon: <i className="iconfont icon-business-smart-assistant" />
+  }
+
+  const onCreateAssistant = async () => {
+    const assistant = await AddAssistantPopup.show()
+    assistant && setActiveAssistant(assistant)
+  }
+
+  const onCreateDefaultAssistant = () => {
+    const assistant = { ...defaultAssistant, id: uuid() }
+    addAssistant(assistant)
+    setActiveAssistant(assistant)
+  }
+
+  useEffect(() => {
+    const unsubscribes = [
+      EventEmitter.on(EVENT_NAMES.SHOW_ASSISTANTS, (): any => {
+        showTab && setTab('assistants')
+      }),
+      EventEmitter.on(EVENT_NAMES.SHOW_TOPIC_SIDEBAR, (): any => {
+        showTab && setTab('topic')
+      }),
+      EventEmitter.on(EVENT_NAMES.SHOW_CHAT_SETTINGS, (): any => {
+        showTab && setTab('settings')
+      }),
+      EventEmitter.on(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR, () => {
+        showTab && setTab('topic')
+        if (position === 'left' && topicPosition === 'right') {
+          toggleShowTopics()
+        }
+      })
+    ]
+    return () => unsubscribes.forEach((unsub) => unsub())
+  }, [position, showTab, tab, toggleShowTopics, topicPosition])
+
+  useEffect(() => {
+    if (position === 'right' && topicPosition === 'right' && tab === 'assistants') {
+      setTab('topic')
+    }
+    if (position === 'left' && topicPosition === 'right' && tab !== 'assistants') {
+      setTab('assistants')
+    }
+  }, [position, tab, topicPosition])
+
+  return (
+    <Container style={border}>
+      {showTab && (
+        <Segmented
+          value={tab}
+          className="segmented-tab"
+          style={{ borderRadius: 0, padding: '10px', gap: 2, borderBottom: borderStyle }}
+          options={
+            [
+              position === 'left' && topicPosition === 'left' ? assistantTab : undefined,
+              {
+                label: t('common.topics'),
+                value: 'topic',
+                icon: <BarsOutlined />
+              },
+              {
+                label: t('settings.title'),
+                value: 'settings',
+                icon: <SettingOutlined />
+              }
+            ].filter(Boolean) as SegmentedProps['options']
+          }
+          onChange={(value) => setTab(value as 'topic' | 'settings')}
+          block
+        />
+      )}
+      <TabContent>
+        {tab === 'assistants' && (
+          <Assistants
+            activeAssistant={activeAssistant}
+            setActiveAssistant={setActiveAssistant}
+            onCreateAssistant={onCreateAssistant}
+            onCreateDefaultAssistant={onCreateDefaultAssistant}
+          />
+        )}
+        {tab === 'topic' && (
+          <Topics assistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
+        )}
+        {tab === 'settings' && <Settings assistant={activeAssistant} />}
+      </TabContent>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: var(--assistants-width);
+  height: calc(100vh - var(--navbar-height));
+  .collapsed {
+    width: 0;
+    border-left: none;
+  }
+`
+
+const TabContent = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+`
+
+export default RightSidebar

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

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