chore(version): 0.7.0

- Removed ability to open developer tools in main window.
- Added and removed a link to the "/files" route in the Sidebar component.
- Fixed file deletion logic to correctly delete files from both the database and the file system.

.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'
   }
 }

.vscode/settings.json

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

electron-builder.yml

@@ -8,8 +8,10 @@ files:
   - '!{.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/*'
+  - '!src'
   - '!local'
+  - '!scripts'
+  - '!resources'
 asarUnpack:
   - resources/**
 win:
@@ -57,6 +59,14 @@ electronDownload:
 afterSign: scripts/notarize.js
 releaseInfo:
   releaseNotes: |
-    智能助理和消息列表合并
+    本次更新：
-    优化输入框样式
+      支持行内公式
-    提升小程序稳定性
+      支持编辑所有集成的服务商API地址
+      新增智能体搜索功能(>10个)
+      修复正则表达式显示错误
+      修复默认模型参数不生效
+      修复暗黑模式下分界线不明显问题
+    近期更新：
+      智能助理和消息列表合并
+      优化输入框样式
+      提升小程序稳定性

electron.vite.config.ts

@@ -7,7 +7,8 @@ export default defineConfig({
     plugins: [externalizeDepsPlugin()],
     resolve: {
       alias: {
-        ollama: resolve('ollama/src')
+        '@types': resolve('src/renderer/src/types'),
+        '@main': resolve('src/main')
       }
     }
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CherryStudio",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "private": true,
   "description": "A powerful AI assistant for producer.",
   "main": "./out/main/index.js",
@@ -54,6 +54,8 @@
     "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.3.3",
     "electron-builder": "^24.9.1",
@@ -69,6 +71,7 @@
     "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",
@@ -87,7 +90,7 @@
     "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"
   },

src/main/config.ts

@@ -1,4 +1,18 @@
+import fs from 'node:fs'
+
+import { app } from 'electron'
 import Store from 'electron-store'
+import path from 'path'
+
+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/ipc.ts

@@ -1,11 +1,18 @@
-import { BrowserWindow, ipcMain, session, shell } from 'electron'
+import { FileType } from '@types'
+import { BrowserWindow, ipcMain, OpenDialogOptions, session, shell } from 'electron'
+import Logger from 'electron-log'
+import fs from 'fs'
+import path from 'path'
 
 import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
-import AppUpdater from './updater'
+import AppUpdater from './services/AppUpdater'
+import File from './services/File'
 import { openFile, saveFile } from './utils/file'
 import { compress, decompress } from './utils/zip'
 import { createMinappWindow } from './window'
 
+const fileManager = new File()
+
 export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
   const { autoUpdater } = new AppUpdater(mainWindow)
 
@@ -31,6 +38,28 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
   ipcMain.handle('zip:compress', (_, text: string) => compress(text))
   ipcMain.handle('zip:decompress', (_, text: Buffer) => decompress(text))
 
+  ipcMain.handle('image:base64', async (_, filePath) => {
+    try {
+      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}`
+      }
+    } catch (error) {
+      Logger.error('Error reading file:', error)
+      return ''
+    }
+  })
+
+  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:delete', async (_, fileId: string) => {
+    await fileManager.deleteFile(fileId)
+    return { success: true }
+  })
   ipcMain.handle('minapp', (_, args) => {
     createMinappWindow({
       url: args.url,

src/main/services/File.ts

@@ -0,0 +1,139 @@
+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 File {
+  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 deleteFile(id: string): Promise<void> {
+    await fs.promises.unlink(path.join(this.storageDir, id))
+  }
+}
+
+export default File

src/main/utils/file.ts

@@ -3,6 +3,8 @@ import logger from 'electron-log'
 import { writeFile } from 'fs'
 import { readFile } from 'fs/promises'
 
+import { FileTypes } from '../../renderer/src/types'
+
 export async function saveFile(
   _: Electron.IpcMainInvokeEvent,
   fileName: string,
@@ -53,3 +55,17 @@ export async function openFile(
     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', '.txt']
+
+  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 (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/preload/index.d.ts

@@ -1,4 +1,5 @@
 import { ElectronAPI } from '@electron-toolkit/preload'
+import { FileType } from '@renderer/types'
 import type { OpenDialogOptions } from 'electron'
 
 declare global {
@@ -20,6 +21,14 @@ declare global {
       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<{ success: boolean }>
+      }
+      image: {
+        base64: (filePath: string) => Promise<{ mime: string; base64: string; data: string }>
+      }
     }
   }
 }

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 = {
@@ -15,7 +15,15 @@ const api = {
     ipcRenderer.invoke('save-file', path, content, options)
   },
   compress: (text: string) => ipcRenderer.invoke('zip:compress', text),
-  decompress: (text: Buffer) => ipcRenderer.invoke('zip:decompress', 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)
+  },
+  image: {
+    base64: (filePath: string) => ipcRenderer.invoke('image:base64', filePath)
+  }
 }
 
 // Use `contextBridge` APIs to expose Electron APIs to

src/renderer/index.html

@@ -5,7 +5,7 @@
     <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'
@@ -9,6 +11,7 @@ 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'
@@ -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

@@ -24,20 +24,20 @@
   --color-background-soft: var(--color-black-soft);
   --color-background-mute: var(--color-black-mute);
 
-  --color-primary: #135200;
+  --color-primary: #00b96b;
-  --color-primary-soft: #13520099;
+  --color-primary-soft: #00b96b99;
-  --color-primary-mute: #13520033;
+  --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: rgba(255, 255, 255, 0.08);
-  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
+  --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;
+  --assistants-width: 280px;
-  --topic-list-width: 260px;
+  --topic-list-width: 280px;
-  --settings-width: var(--assistants-width);
+  --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: rgba(0, 0, 0, 0.08);
-  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
+  --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);
@@ -204,3 +204,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,17 +110,23 @@
 
   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 {
-    code {
+        background: none;
-      background: none;
+        padding: 0;
-      padding: 0;
+        border-radius: 0;
-      border-radius: 0;
+      }
     }
   }
 

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

@@ -1,7 +1,7 @@
 /* 全局初始化滚动条样式 */
 ::-webkit-scrollbar {
-  width: 3px;
+  width: 2px;
-  height: 3px;
+  height: 2px;
 }
 
 ::-webkit-scrollbar-track {
@@ -10,7 +10,6 @@
 
 ::-webkit-scrollbar-thumb {
   background: var(--color-scrollbar-thumb);
-  border-radius: 5px;
   &:hover {
     background: var(--color-scrollbar-thumb-hover);
   }

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
+  onDragStart?: OnDragStartResponder
-  onDragEnd?: () => void
+  onDragEnd?: OnDragEndResponder
+  droppableProps?: Partial<DroppableProps>
 }
 
-const DragableList: FC<Props<any>> = ({ children, list, onDragStart, onUpdate, onDragEnd }) => {
+const DragableList: FC<Props<any>> = ({
-  const _onDragEnd = (result: DropResult) => {
+  children,
-    onDragEnd?.()
+  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/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/Popups/AddAssistantPopup.tsx

@@ -3,6 +3,7 @@ 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'
@@ -50,6 +51,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     const assistant = covertAgentToAssistant(agent)
 
     addAssistant(assistant)
+    setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_ASSISTANTS), 0)
     resolve(assistant)
     setOpen(false)
   }
@@ -65,13 +67,13 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
 
   return (
     <Modal
-      style={{ marginTop: '5vh' }}
+      centered
       title={t('chat.add.assistant.title')}
       open={open}
       onCancel={onCancel}
       afterClose={onClose}
-      transitionName=""
+      transitionName="ant-move-down"
-      maskTransitionName=""
+      maskTransitionName="ant-fade"
       footer={null}>
       <Input
         placeholder={t('common.search')}

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/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,7 +1,8 @@
-import { TranslationOutlined } from '@ant-design/icons'
+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, useShowAssistants } from '@renderer/hooks/useStore'
 import { Avatar } from 'antd'
 import { FC } from 'react'
@@ -11,8 +12,6 @@ import styled from 'styled-components'
 
 import UserPopup from '../Popups/UserPopup'
 
-const sidebarBackgroundColor = isMac ? 'var(--navbar-background-mac)' : 'var(--navbar-background)'
-
 const Sidebar: FC = () => {
   const { pathname } = useLocation()
   const avatar = useAvatar()
@@ -21,11 +20,15 @@ const Sidebar: FC = () => {
   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 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' })
@@ -39,7 +42,7 @@ const Sidebar: FC = () => {
   }
 
   return (
-    <Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBackgroundColor }}>
+    <Container style={{ backgroundColor: minappShow ? 'var(--navbar-background)' : sidebarBgColor }}>
       <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
       <MainMenus>
         <Menus>
@@ -63,6 +66,11 @@ const Sidebar: FC = () => {
               <i className="iconfont icon-appstore"></i>
             </Icon>
           </StyledLink>
+          <StyledLink onClick={() => to('/files')}>
+            <Icon className={isRoute('/files')}>
+              <FolderOutlined />
+            </Icon>
+          </StyledLink>
         </Menus>
       </MainMenus>
       <Menus>
@@ -87,7 +95,6 @@ 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;
 `
 

src/renderer/src/config/constant.ts

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

src/renderer/src/config/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,6 +1,7 @@
 import { Model } from '@renderer/types'
 
 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, Model[]> = {
@@ -117,6 +118,14 @@ export const SYSTEM_MODELS: Record<string, Model[]> = {
       group: 'DeepSeek Coder'
     }
   ],
+  github: [
+    {
+      id: 'gpt-4o',
+      provider: 'github',
+      name: 'OpenAI GPT-4o',
+      group: 'OpenAI'
+    }
+  ],
   yi: [
     {
       id: 'yi-large',
@@ -387,3 +396,7 @@ export function isTextToImageModel(model: Model): boolean {
 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

@@ -5,6 +5,7 @@ import BaichuanModelLogo from '@renderer/assets/images/models/baichuan.png'
 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'
@@ -25,6 +26,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 +78,8 @@ export function getProviderLogo(providerId: string) {
       return GraphRagProviderLogo
     case 'minimax':
       return MinimaxProviderLogo
+    case 'github':
+      return GithubProviderLogo
     default:
       return undefined
   }
@@ -106,7 +110,9 @@ export function getModelLogo(modelId: string) {
     palm: PalmModelLogo,
     step: StepModelLogo,
     abab: HailuoModelLogo,
-    'ep-202': DoubaoModelLogo
+    'ep-202': DoubaoModelLogo,
+    cohere: CohereModelLogo,
+    command: CohereModelLogo
   }
 
   for (const key in logoMap) {
@@ -121,8 +127,7 @@ export function getModelLogo(modelId: string) {
 export const PROVIDER_CONFIG = {
   openai: {
     api: {
-      url: 'https://api.openai.com',
+      url: 'https://api.openai.com'
-      editable: true
     },
     websites: {
       official: 'https://openai.com/',
@@ -131,6 +136,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 +144,7 @@ export const PROVIDER_CONFIG = {
   },
   gemini: {
     api: {
-      url: 'https://generativelanguage.googleapis.com',
+      url: 'https://generativelanguage.googleapis.com'
-      editable: false
     },
     websites: {
       official: 'https://gemini.google.com/',
@@ -148,6 +153,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 +161,7 @@ export const PROVIDER_CONFIG = {
   },
   silicon: {
     api: {
-      url: 'https://cloud.siliconflow.cn',
+      url: 'https://cloud.siliconflow.cn'
-      editable: false
     },
     websites: {
       official: 'https://www.siliconflow.cn/',
@@ -165,6 +170,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 +178,7 @@ export const PROVIDER_CONFIG = {
   },
   deepseek: {
     api: {
-      url: 'https://api.deepseek.com',
+      url: 'https://api.deepseek.com'
-      editable: false
     },
     websites: {
       official: 'https://deepseek.com/',
@@ -182,15 +187,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',
+      url: 'https://api.lingyiwanwu.com'
-      editable: false
     },
     websites: {
       official: 'https://platform.lingyiwanwu.com/',
@@ -199,6 +215,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 +223,7 @@ export const PROVIDER_CONFIG = {
   },
   zhipu: {
     api: {
-      url: 'https://open.bigmodel.cn/api/paas/v4/',
+      url: 'https://open.bigmodel.cn/api/paas/v4/'
-      editable: false
     },
     websites: {
       official: 'https://open.bigmodel.cn/',
@@ -216,6 +232,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 +240,7 @@ export const PROVIDER_CONFIG = {
   },
   moonshot: {
     api: {
-      url: 'https://api.moonshot.cn',
+      url: 'https://api.moonshot.cn'
-      editable: false
     },
     websites: {
       official: 'https://moonshot.ai/',
@@ -233,6 +249,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 +257,7 @@ export const PROVIDER_CONFIG = {
   },
   baichuan: {
     api: {
-      url: 'https://api.baichuan-ai.com',
+      url: 'https://api.baichuan-ai.com'
-      editable: false
     },
     websites: {
       official: 'https://www.baichuan-ai.com/',
@@ -250,6 +266,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 +274,7 @@ export const PROVIDER_CONFIG = {
   },
   dashscope: {
     api: {
-      url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/',
+      url: 'https://dashscope.aliyuncs.com/compatible-mode/v1/'
-      editable: false
     },
     websites: {
       official: 'https://dashscope.aliyun.com/',
@@ -267,6 +283,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 +291,7 @@ export const PROVIDER_CONFIG = {
   },
   stepfun: {
     api: {
-      url: 'https://api.stepfun.com',
+      url: 'https://api.stepfun.com'
-      editable: false
     },
     websites: {
       official: 'https://platform.stepfun.com/',
@@ -284,6 +300,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 +308,7 @@ export const PROVIDER_CONFIG = {
   },
   doubao: {
     api: {
-      url: 'https://ark.cn-beijing.volces.com/api/v3/',
+      url: 'https://ark.cn-beijing.volces.com/api/v3/'
-      editable: true
     },
     websites: {
       official: 'https://console.volcengine.com/ark/',
@@ -301,6 +317,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 +325,7 @@ export const PROVIDER_CONFIG = {
   },
   minimax: {
     api: {
-      url: 'https://api.minimax.chat/v1/',
+      url: 'https://api.minimax.chat/v1/'
-      editable: true
     },
     websites: {
       official: 'https://platform.minimaxi.com/',
@@ -318,6 +334,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://platform.minimaxi.com/document/Models'
     },
     app: {
+      id: 'minimax',
       name: '海螺',
       url: 'https://hailuoai.com/',
       logo: HailuoModelLogo
@@ -325,14 +342,12 @@ export const PROVIDER_CONFIG = {
   },
   'graphrag-kylin-mountain': {
     api: {
-      url: '',
+      url: ''
-      editable: true
     }
   },
   openrouter: {
     api: {
-      url: 'https://openrouter.ai/api/v1/',
+      url: 'https://openrouter.ai/api/v1/'
-      editable: false
     },
     websites: {
       official: 'https://openrouter.ai/',
@@ -343,8 +358,7 @@ export const PROVIDER_CONFIG = {
   },
   groq: {
     api: {
-      url: 'https://api.groq.com/openai',
+      url: 'https://api.groq.com/openai'
-      editable: false
     },
     websites: {
       official: 'https://groq.com/',
@@ -353,6 +367,7 @@ export const PROVIDER_CONFIG = {
       models: 'https://console.groq.com/docs/models'
     },
     app: {
+      id: 'groq',
       name: 'Groq',
       url: 'https://chat.groq.com/',
       logo: GroqProviderLogo
@@ -360,8 +375,7 @@ export const PROVIDER_CONFIG = {
   },
   ollama: {
     api: {
-      url: 'http://localhost:11434/v1/',
+      url: 'http://localhost:11434/v1/'
-      editable: true
     },
     websites: {
       official: 'https://ollama.com/',
@@ -371,8 +385,7 @@ export const PROVIDER_CONFIG = {
   },
   anthropic: {
     api: {
-      url: 'https://api.anthropic.com/',
+      url: 'https://api.anthropic.com/'
-      editable: true
     },
     websites: {
       official: 'https://anthropic.com/',
@@ -381,6 +394,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 +402,7 @@ export const PROVIDER_CONFIG = {
   },
   aihubmix: {
     api: {
-      url: 'https://aihubmix.com',
+      url: 'https://aihubmix.com'
-      editable: false
     },
     websites: {
       official: 'https://aihubmix.com/',

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,13 @@
+import { FileType } from '@renderer/types'
+import { Dexie, type EntityTable } from 'dexie'
+
+// Database declaration (move this to its own module also)
+export const db = new Dexie('CherryStudio') as Dexie & {
+  files: EntityTable<FileType, 'id'>
+}
+
+db.version(1).stores({
+  files: 'id, name, origin_name, path, size, ext, type, created_at, count'
+})
+
+export default db

src/renderer/src/hooks/useAppInit.ts

@@ -11,8 +11,7 @@ import { useSettings } from './useSettings'
 
 export function useAppInit() {
   const dispatch = useAppDispatch()
-  const { proxyUrl } = useSettings()
+  const { proxyUrl, language } = useSettings()
-  const { language } = useSettings()
   const { setDefaultModel, setTopicNamingModel, setTranslateModel } = useDefaultModel()
 
   useEffect(() => {

src/renderer/src/hooks/useAssistant.ts

@@ -1,4 +1,5 @@
 import { getDefaultTopic } from '@renderer/services/assistant'
+import LocalStorage from '@renderer/services/storage'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import {
   addAssistant,
@@ -16,7 +17,6 @@ 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'
 
 export function useAssistants() {
   const { assistants } = useAppSelector((state) => state.assistants)
@@ -29,9 +29,8 @@ export function useAssistants() {
     removeAssistant: (id: string) => {
       dispatch(removeAssistant({ id }))
       const assistant = assistants.find((a) => a.id === id)
-      if (assistant) {
+      const topics = assistant?.topics || []
-        assistant.topics.forEach((id) => localforage.removeItem(`topic:${id}`))
+      topics.forEach(({ id }) => LocalStorage.removeTopic(id))
-      }
     }
   }
 }
@@ -45,7 +44,10 @@ 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) => {
+      LocalStorage.removeTopic(topic.id)
+      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/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,5 +1,5 @@
 import { useAppDispatch, useAppSelector } from '@renderer/store'
-import { toggleShowAssistants } from '@renderer/store/settings'
+import { setShowTopics, toggleShowAssistants, toggleShowTopics } from '@renderer/store/settings'
 
 export function useShowAssistants() {
   const showAssistants = useAppSelector((state) => state.settings.showAssistants)
@@ -11,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

@@ -10,6 +10,8 @@ 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 })) {

src/renderer/src/i18n/index.ts

@@ -30,13 +30,16 @@ const resources = {
         search: 'Search',
         default: 'Default',
         warning: 'Warning',
-        back: 'Back'
+        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!',
@@ -67,12 +70,15 @@ const resources = {
         'topics.edit.placeholder': 'Enter new name',
         'topics.delete.all.title': 'Delete all topics',
         'topics.delete.all.content': 'Are you sure you want to delete all topics?',
+        'topics.list': 'Topic List',
         'input.new_topic': 'New Topic',
+        'input.topics': ' Topics ',
         'input.clear': 'Clear',
+        'input.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',
@@ -92,20 +98,29 @@ 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',
+        'assistant.search.placeholder': 'Search'
+      },
+      files: {
+        title: 'Files',
+        file: 'File',
+        name: 'Name',
+        size: 'Size',
+        created_at: 'Created At'
       },
       agents: {
-        title: 'Agents',
+        title: 'Assistants',
-        my_agents: 'My Agents',
+        my_agents: 'My Assistants',
-        'add.title': 'Add Agent',
+        'add.title': 'Add Assistant',
-        'edit.title': 'Edit Agent',
+        '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',
+        'manage.title': 'Manage Assistants',
-        'delete.popup.content': 'Are you sure you want to delete this agent?',
+        'delete.popup.content': 'Are you sure you want to delete this assistant?',
         'tag.default': 'Default',
         'tag.system': 'System',
         'tag.user': 'Mine'
@@ -128,7 +143,8 @@ const resources = {
         stepfun: 'StepFun',
         doubao: 'Doubao',
         minimax: 'MiniMax',
-        'graphrag-kylin-mountain': 'GraphRAG'
+        'graphrag-kylin-mountain': 'GraphRAG',
+        github: 'GitHub Models'
       },
       settings: {
         title: 'Settings',
@@ -201,7 +217,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',
@@ -253,7 +275,7 @@ const resources = {
         topics: '话题',
         docs: '文档',
         and: '和',
-        assistant: '助手',
+        assistant: '智能体',
         name: '名称',
         description: '描述',
         prompt: '提示词',
@@ -270,13 +292,16 @@ const resources = {
         search: '搜索',
         default: '默认',
         warning: '警告',
-        back: '返回'
+        back: '返回',
+        chat: '聊天'
       },
       button: {
         add: '添加',
         added: '已添加',
         manage: '管理',
-        select_model: '选择模型'
+        select_model: '选择模型',
+        'show.all': '显示全部',
+        collapse: '收起'
       },
       message: {
         copied: '已复制',
@@ -307,12 +332,15 @@ const resources = {
         'topics.edit.placeholder': '输入新名称',
         'topics.delete.all.title': '删除所有话题',
         'topics.delete.all.content': '确定要删除所有话题吗?',
+        'topics.list': '话题列表',
         'input.new_topic': '新话题',
-        'input.clear': '清除',
+        'input.topics': ' 话题 ',
+        'input.clear': '清除会话消息',
+        'input.new.context': '清除上下文',
         'input.expand': '展开',
         'input.collapse': '收起',
-        'input.clear.title': '清除所有消息?',
+        'input.clear.title': '清除消息?',
-        'input.clear.content': '确定要清除所有消息吗?',
+        'input.clear.content': '确定要清除当前会话所有消息吗?',
         'input.placeholder': '在这里输入消息...',
         'input.send': '发送',
         'input.pause': '暂停',
@@ -333,7 +361,16 @@ const resources = {
         'settings.set_as_default': '应用到默认助手',
         'settings.max': '不限',
         'suggestions.title': '建议的问题',
-        'add.assistant.title': '添加智能体'
+        'add.assistant.title': '添加智能体',
+        'message.new.context': '清除上下文',
+        'assistant.search.placeholder': '搜索'
+      },
+      files: {
+        title: '文件',
+        file: '文件',
+        name: '文件名',
+        size: '大小',
+        created_at: '创建时间'
       },
       agents: {
         title: '智能体',
@@ -369,7 +406,8 @@ const resources = {
         stepfun: '阶跃星辰',
         doubao: '豆包',
         minimax: 'MiniMax',
-        'graphrag-kylin-mountain': 'GraphRAG'
+        'graphrag-kylin-mountain': 'GraphRAG',
+        github: 'GitHub Models'
       },
       settings: {
         title: '设置',
@@ -442,7 +480,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: '翻译',

src/renderer/src/init.ts

@@ -2,7 +2,7 @@ import KeyvStorage from '@kangfenmao/keyv-storage'
 import localforage from 'localforage'
 
 import { APP_NAME } from './config/env'
-import { ThemeMode } from './store/settings'
+import { ThemeMode } from './types'
 import { loadScript } from './utils'
 
 export async function initMermaid(theme: ThemeMode) {

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 }]}>
+        <div style={{ position: 'relative' }}>
-          <TextArea placeholder={t('agents.add.prompt.placeholder')} spellCheck={false} rows={4} />
+          <Form.Item
-        </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/AppsPage.tsx

@@ -1,93 +1,25 @@
 import { SearchOutlined } from '@ant-design/icons'
-import AiAssistantAppLogo from '@renderer/assets/images/apps/360-ai.png'
-import AiSearchAppLogo from '@renderer/assets/images/apps/ai-search.png'
-import BaiduAiAppLogo from '@renderer/assets/images/apps/baidu-ai.png'
-import DevvAppLogo from '@renderer/assets/images/apps/devv.png'
-import MetasoAppLogo from '@renderer/assets/images/apps/metaso.webp'
-import PerplexityAppLogo from '@renderer/assets/images/apps/perplexity.webp'
-import SensetimeAppLogo from '@renderer/assets/images/apps/sensetime.png'
-import SparkDeskAppLogo from '@renderer/assets/images/apps/sparkdesk.png'
-import TiangongAiLogo from '@renderer/assets/images/apps/tiangong.png'
-import TencentYuanbaoAppLogo from '@renderer/assets/images/apps/yuanbao.png'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { Center } from '@renderer/components/Layout'
-import { PROVIDER_CONFIG } from '@renderer/config/provider'
+import { getAllMinApps } from '@renderer/config/minapp'
-import { MinAppType } from '@renderer/types'
 import { Empty, Input } from 'antd'
 import { isEmpty } from 'lodash'
-import { FC, useState } from 'react'
+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/'
-  },
-  {
-    name: 'SparkDesk',
-    logo: SparkDeskAppLogo,
-    url: 'https://xinghuo.xfyun.cn/desk'
-  },
-  {
-    name: '腾讯元宝',
-    logo: TencentYuanbaoAppLogo,
-    url: 'https://yuanbao.tencent.com/chat'
-  },
-  {
-    name: '商量',
-    logo: SensetimeAppLogo,
-    url: 'https://chat.sensetime.com/wb/chat'
-  },
-  {
-    name: '360AI搜索',
-    logo: AiSearchAppLogo,
-    url: 'https://so.360.com/'
-  },
-  {
-    name: '秘塔AI搜索',
-    logo: MetasoAppLogo,
-    url: 'https://metaso.cn/'
-  },
-  {
-    name: '天工AI',
-    logo: TiangongAiLogo,
-    url: 'https://www.tiangong.cn/'
-  },
-  {
-    name: 'DEVV_',
-    logo: DevvAppLogo,
-    url: 'https://devv.ai/'
-  },
-  {
-    name: 'perplexity',
-    logo: PerplexityAppLogo,
-    url: 'https://www.perplexity.ai/'
-  }
-]
-
 const AppsPage: FC = () => {
   const { t } = useTranslation()
   const [search, setSearch] = useState('')
+  const apps = useMemo(() => getAllMinApps(), [])
 
-  const list: MinAppType[] = (Object.entries(PROVIDER_CONFIG) as any[])
+  const filteredApps = search
-    .filter(([, config]) => config.app)
+    ? apps.filter(
-    .map(([key, config]) => ({ id: key, ...config.app }))
-    .concat(_apps)
-
-  const apps = search
-    ? list.filter(
         (app) => app.name.toLowerCase().includes(search.toLowerCase()) || app.url.includes(search.toLowerCase())
       )
-    : list
+    : apps
 
   return (
     <Container>
@@ -109,10 +41,10 @@ const AppsPage: FC = () => {
       </Navbar>
       <ContentContainer>
         <AppsContainer>
-          {apps.map((app) => (
+          {filteredApps.map((app) => (
-            <App key={app.name} app={app} />
+            <App key={app.id} app={app} />
           ))}
-          {isEmpty(apps) && (
+          {isEmpty(filteredApps) && (
             <Center style={{ flex: 1 }}>
               <Empty />
             </Center>

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

@@ -0,0 +1,82 @@
+import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
+import { VStack } from '@renderer/components/Layout'
+import db from '@renderer/databases'
+import { FileType } 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.toArray())
+
+  const dataSource = files?.map((file) => ({
+    key: file.id,
+    file: <Image src={'file://' + file.path} preview={false} style={{ maxHeight: '40px' }} />,
+    name: <a href={'file://' + file.path}>{file.origin_name}</a>,
+    size: `${(file.size / 1024 / 1024).toFixed(2)} MB`,
+    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.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;
+`
+
+export default FilesPage

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

@@ -1,44 +1,35 @@
-import { ArrowRightOutlined, CopyOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons'
+import { DeleteOutlined, EditOutlined, MinusCircleOutlined } from '@ant-design/icons'
 import DragableList from '@renderer/components/DragableList'
+import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { 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 { Assistant, Topic } from '@renderer/types'
+import { setSearching } from '@renderer/store/runtime'
+import { Assistant } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Dropdown, Tooltip } from 'antd'
+import { Dropdown, Input, InputRef } from 'antd'
 import { ItemType } from 'antd/es/menu/interface'
-import { last } from 'lodash'
+import { isEmpty, last } from 'lodash'
-import { FC, useCallback } from 'react'
+import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import Topics from './Topics'
-
 interface Props {
   activeAssistant: Assistant
   setActiveAssistant: (assistant: Assistant) => void
-  activeTopic: Topic
-  setActiveTopic: (topic: Topic) => void
-  showTopics: boolean
-  setShowTopics: (showTopics: boolean) => void
   onCreateAssistant: () => void
 }
 
-const Assistants: FC<Props> = ({
+const Assistants: FC<Props> = ({ activeAssistant, setActiveAssistant, onCreateAssistant }) => {
-  activeAssistant,
-  setActiveAssistant,
-  activeTopic,
-  setActiveTopic,
-  showTopics,
-  setShowTopics,
-  onCreateAssistant
-}) => {
   const { assistants, removeAssistant, addAssistant, updateAssistants } = useAssistants()
   const generating = useAppSelector((state) => state.runtime.generating)
-  const { updateAssistant } = useAssistant(activeAssistant.id)
+  const [search, setSearch] = useState('')
+  const { updateAssistant, removeAllTopics } = useAssistant(activeAssistant.id)
+  const searchRef = useRef<InputRef>(null)
   const { t } = useTranslation()
+  const dispatch = useAppDispatch()
 
   const onDelete = useCallback(
     (assistant: Assistant) => {
@@ -49,6 +40,15 @@ const Assistants: FC<Props> = ({
     [assistants, onCreateAssistant, removeAssistant, setActiveAssistant]
   )
 
+  const onEditAssistant = useCallback(
+    async (assistant: Assistant) => {
+      const _assistant = await AssistantSettingPopup.show({ assistant })
+      updateAssistant(_assistant)
+      syncAsistantToAgent(_assistant)
+    },
+    [updateAssistant]
+  )
+
   const getMenuItems = useCallback(
     (assistant: Assistant) =>
       [
@@ -56,22 +56,32 @@ const Assistants: FC<Props> = ({
           label: t('common.edit'),
           key: 'edit',
           icon: <EditOutlined />,
-          async onClick() {
+          onClick: () => onEditAssistant(assistant)
-            const _assistant = await AssistantSettingPopup.show({ assistant })
-            updateAssistant(_assistant)
-            syncAsistantToAgent(_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'),
@@ -81,7 +91,7 @@ const Assistants: FC<Props> = ({
           onClick: () => onDelete(assistant)
         }
       ] as ItemType[],
-    [addAssistant, onDelete, setActiveAssistant, t, updateAssistant]
+    [addAssistant, onDelete, onEditAssistant, removeAllTopics, setActiveAssistant, t]
   )
 
   const onSwitchAssistant = useCallback(
@@ -93,43 +103,89 @@ const Assistants: FC<Props> = ({
         })
       }
 
-      if (assistant.id === activeAssistant?.id) {
-        setShowTopics(true)
-        return
-      }
-
-      EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)
       setActiveAssistant(assistant)
     },
-    [activeAssistant?.id, generating, setActiveAssistant, setShowTopics, t]
+    [generating, setActiveAssistant, t]
   )
 
-  if (showTopics) {
+  const list = assistants.filter((assistant) => assistant.name?.toLowerCase().includes(search.toLowerCase().trim()))
-    return (
+
-      <Container>
+  const onSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        <Topics assistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
+    const isEnterPressed = e.keyCode == 13
-      </Container>
+
-    )
+    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>
-      <DragableList list={assistants} onUpdate={updateAssistants}>
+      {assistants.length >= 10 && (
-        {(assistant) => (
+        <SearchContainer>
-          <Dropdown key={assistant.id} menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
+          <Input
-            <AssistantItem
+            placeholder={t('chat.assistant.search.placeholder')}
-              onClick={() => onSwitchAssistant(assistant)}
+            suffix={<CommandKey>⌘+K</CommandKey>}
-              className={assistant.id === activeAssistant?.id ? 'active' : ''}>
+            value={search}
-              <AssistantName className="name">{assistant.name || t('chat.default.name')}</AssistantName>
+            onChange={(e) => setSearch(e.target.value)}
-              <Tooltip arrow title="话题列表" placement="bottom" mouseEnterDelay={0.5}>
+            style={{ borderRadius: 4, borderWidth: 0.5 }}
-                <ArrowRightButton className="arrow-button" onClick={() => setShowTopics(true)}>
+            onKeyDown={onSearch}
-                  <ArrowRightOutlined />
+            ref={searchRef}
+            onFocus={() => dispatch(setSearching(true))}
+            onBlur={() => {
+              dispatch(setSearching(false))
+              setSearch('')
+            }}
+            allowClear
+          />
+        </SearchContainer>
+      )}
+      <DragableList list={list} onUpdate={updateAssistants} droppableProps={{ isDropDisabled: !isEmpty(search) }}>
+        {(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>
+                <ArrowRightButton
+                  className={`arrow-button ${isCurrent ? 'active' : ''}`}
+                  onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
+                  <i className="iconfont icon-gridlines" />
                 </ArrowRightButton>
-              </Tooltip>
+                {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
-              {false && <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>}
+              </AssistantItem>
-            </AssistantItem>
+            </Dropdown>
-          </Dropdown>
+          )
-        )}
+        }}
       </DragableList>
     </Container>
   )
@@ -138,13 +194,10 @@ const Assistants: FC<Props> = ({
 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));
   overflow-y: auto;
   padding-top: 10px;
-  padding-bottom: 0;
+  padding-bottom: 10px;
 `
 
 const AssistantItem = styled.div`
@@ -155,33 +208,25 @@ const AssistantItem = styled.div`
   position: relative;
   border-radius: 4px;
   margin: 0 10px;
+  padding-right: 35px;
   cursor: pointer;
   font-family: Ubuntu;
-  .anticon {
+  .iconfont {
     opacity: 0;
     color: var(--color-text-3);
   }
-  &:hover {
-    background-color: var(--color-background-soft);
-    .topics-count {
-      display: none;
-    }
-    .anticon {
-      opacity: 1;
-    }
-  }
   &.active {
     background-color: var(--color-background-mute);
+    .name {
+      font-weight: 500;
+    }
     .topics-count {
       display: none;
     }
-    .anticon {
+    .iconfont {
       opacity: 1;
       color: var(--color-text-2);
     }
-    .name {
-      font-weight: 500;
-    }
   }
 `
 
@@ -191,6 +236,7 @@ const AssistantName = styled.div`
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  font-size: 13px;
 `
 
 const ArrowRightButton = styled.div`
@@ -198,22 +244,23 @@ const ArrowRightButton = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  transition: all 0.2s ease;
+  width: 22px;
-  width: 24px;
+  height: 22px;
-  height: 24px;
+  min-width: 22px;
-  min-width: 24px;
+  min-height: 22px;
-  min-height: 24px;
   border-radius: 4px;
   position: absolute;
-  right: 10px;
+  background-color: var(--color-background);
-  &:hover {
+  right: 9px;
-    background-color: var(--color-background);
+  top: 6px;
+  .iconfont {
+    font-size: 12px;
   }
 `
 
 const TopicCount = styled.div`
-  color: var(--color-text-3);
+  color: var(--color-text-2);
-  font-size: 12px;
+  font-size: 10px;
   margin-right: 3px;
   background-color: var(--color-background-mute);
   opacity: 0.8;
@@ -226,4 +273,18 @@ const TopicCount = styled.div`
   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,35 +1,42 @@
 import { useAssistant } from '@renderer/hooks/useAssistant'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowTopics } from '@renderer/hooks/useStore'
 import { Assistant, Topic } from '@renderer/types'
 import { Flex } from 'antd'
-import { FC, useState } from 'react'
+import { FC } from 'react'
 import styled from 'styled-components'
 
 import Inputbar from './Inputbar/Inputbar'
 import Messages from './Messages/Messages'
-import Settings from './Settings'
+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 [showSetting, setShowSetting] = useState(false)
+  const { topicPosition } = useSettings()
+  const { showTopics } = useShowTopics()
 
   return (
     <Container id="chat">
       <Main vertical flex={1} justify="space-between">
-        <Messages assistant={assistant} topic={props.activeTopic} />
+        <Messages assistant={assistant} topic={props.activeTopic} setActiveTopic={props.setActiveTopic} />
-        <Inputbar
+        <Inputbar assistant={assistant} setActiveTopic={props.setActiveTopic} />
-          assistant={assistant}
-          setActiveTopic={props.setActiveTopic}
-          showSetting={showSetting}
-          setShowSetting={setShowSetting}
-        />
       </Main>
-      {showSetting && <Settings assistant={assistant} onClose={() => setShowSetting(false)} />}
+      {topicPosition === 'right' && showTopics && (
+        <RightSidebar
+          activeAssistant={assistant}
+          activeTopic={props.activeTopic}
+          setActiveAssistant={props.setActiveAssistant}
+          setActiveTopic={props.setActiveTopic}
+          position="right"
+        />
+      )}
     </Container>
   )
 }

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

@@ -1,103 +1,43 @@
-import { ArrowLeftOutlined } from '@ant-design/icons'
+import { useAssistants } from '@renderer/hooks/useAssistant'
-import { Navbar, NavbarCenter, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
-import { isMac, isWindows } from '@renderer/config/constant'
-import { useTheme } from '@renderer/context/ThemeProvider'
-import { useAssistant, useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { useShowAssistants } from '@renderer/hooks/useStore'
 import { useActiveTopic } from '@renderer/hooks/useTopic'
-import { getDefaultTopic } from '@renderer/services/assistant'
+import { Assistant } from '@renderer/types'
-import { Assistant, Topic } from '@renderer/types'
-import { uuid } from '@renderer/utils'
-import { Switch } from 'antd'
 import { FC, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import AddAssistantPopup from '../../components/Popups/AddAssistantPopup'
-import Assistants from './Assistants'
 import Chat from './Chat'
-import SelectModelButton from './components/SelectModelButton'
+import Navbar from './Navbar'
+import RightSidebar from './RightSidebar'
 
 let _activeAssistant: Assistant
-let _showTopics = false
 
 const HomePage: FC = () => {
-  const { assistants, addAssistant } = useAssistants()
+  const { assistants } = useAssistants()
   const [activeAssistant, setActiveAssistant] = useState(_activeAssistant || assistants[0])
   const { showAssistants } = useShowAssistants()
-  const { defaultAssistant } = useDefaultAssistant()
-  const { theme, toggleTheme } = useTheme()
-  const [showTopics, setShowTopics] = useState(_showTopics)
-  const { t } = useTranslation()
-
   const { activeTopic, setActiveTopic } = useActiveTopic(activeAssistant)
-  const { addTopic } = useAssistant(activeAssistant.id)
 
   _activeAssistant = activeAssistant
-  _showTopics = showTopics
-
-  const onCreateDefaultAssistant = () => {
-    const assistant = { ...defaultAssistant, id: uuid() }
-    addAssistant(assistant)
-    setActiveAssistant(assistant)
-  }
-
-  const onCreate = async () => {
-    if (showTopics) {
-      const topic = getDefaultTopic()
-      addTopic(topic)
-      setActiveTopic(topic)
-    } else {
-      const assistant = await AddAssistantPopup.show()
-      assistant && setActiveAssistant(assistant)
-    }
-  }
-
-  const onSetActiveTopic = (topic: Topic) => {
-    setActiveTopic(topic)
-  }
 
   return (
     <Container>
-      <Navbar>
+      <Navbar activeAssistant={activeAssistant} setActiveAssistant={setActiveAssistant} activeTopic={activeTopic} />
-        {showAssistants && (
-          <NavbarLeft
-            style={{ justifyContent: 'space-between', alignItems: 'center', borderRight: 'none', padding: '0 8px' }}>
-            <NavigtaionBack onClick={() => setShowTopics(false)} style={{ opacity: showTopics ? 1 : 0 }}>
-              <ArrowLeftOutlined />
-              <NavigationBackTitle>{t('common.back')}</NavigationBackTitle>
-            </NavigtaionBack>
-            <NewButton onClick={onCreate}>
-              <i className="iconfont icon-a-addchat"></i>
-            </NewButton>
-          </NavbarLeft>
-        )}
-        <NavbarCenter style={{ paddingLeft: isMac ? 16 : 8 }}>
-          <AssistantName>{activeAssistant?.name || t('chat.default.name')}</AssistantName>
-          <SelectModelButton assistant={activeAssistant} />
-        </NavbarCenter>
-        <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}
-          />
-        </NavbarRight>
-      </Navbar>
       <ContentContainer>
         {showAssistants && (
-          <Assistants
+          <RightSidebar
             activeAssistant={activeAssistant}
-            setActiveAssistant={setActiveAssistant}
             activeTopic={activeTopic}
+            setActiveAssistant={setActiveAssistant}
             setActiveTopic={setActiveTopic}
-            showTopics={showTopics}
+            position="left"
-            setShowTopics={setShowTopics}
-            onCreateAssistant={onCreateDefaultAssistant}
           />
         )}
-        <Chat assistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={onSetActiveTopic} />
+        <Chat
+          assistant={activeAssistant}
+          activeTopic={activeTopic}
+          setActiveTopic={setActiveTopic}
+          setActiveAssistant={setActiveAssistant}
+        />
       </ContentContainer>
     </Container>
   )
@@ -116,68 +56,4 @@ const ContentContainer = styled.div`
   background-color: var(--color-background);
 `
 
-const NavigtaionBack = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
-  cursor: pointer;
-  margin-left: ${isMac ? '16px' : '4px'};
-  -webkit-app-region: none;
-  transition: all 0.2s ease-in-out;
-  color: var(--color-icon);
-  transition: opacity 0.2s ease-in-out;
-  &:hover {
-    color: var(--color-text-2);
-  }
-`
-
-const NavigationBackTitle = styled.div`
-  font-size: 13px;
-  font-weight: 500;
-`
-
-const AssistantName = styled.span`
-  margin-left: 5px;
-  margin-right: 10px;
-  font-family: Ubuntu;
-`
-
-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

@@ -1,29 +1,36 @@
 import { PaperClipOutlined } from '@ant-design/icons'
-import { Tooltip, Upload } from 'antd'
+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 {
-  files: File[]
+  model: Model
-  setFiles: (files: File[]) => void
+  files: FileType[]
+  setFiles: (files: FileType[]) => void
   ToolbarButton: any
 }
 
-const AttachmentButton: FC<Props> = ({ files, setFiles, ToolbarButton }) => {
+const AttachmentButton: FC<Props> = ({ model, files, setFiles, ToolbarButton }) => {
   const { t } = useTranslation()
 
+  const onSelectFile = async () => {
+    const _files = await window.api.file.select({
+      filters: [{ name: 'Files', extensions: ['jpg', 'png', 'jpeg'] }]
+    })
+    _files && setFiles(_files)
+  }
+
+  if (!isVisionModel(model)) {
+    return null
+  }
+
   return (
     <Tooltip placement="top" title={t('chat.input.upload')} arrow>
-      <Upload
+      <ToolbarButton type="text" className={files.length ? 'active' : ''} onClick={onSelectFile}>
-        customRequest={() => {}}
+        <PaperClipOutlined style={{ rotate: '135deg' }} />
-        accept="image/*"
+      </ToolbarButton>
-        itemRender={() => null}
-        maxCount={1}
-        onChange={async ({ file }) => file?.originFileObj && setFiles([file.originFileObj as File])}>
-        <ToolbarButton type="text" className={files.length ? 'active' : ''}>
-          <PaperClipOutlined style={{ rotate: '135deg' }} />
-        </ToolbarButton>
-      </Upload>
     </Tooltip>
   )
 }

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

@@ -0,0 +1,36 @@
+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://' + file.path, 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,23 +1,25 @@
 import {
   ClearOutlined,
   ControlOutlined,
+  FormOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
+  HistoryOutlined,
   PauseCircleOutlined,
-  PlusCircleOutlined,
   QuestionCircleOutlined
 } from '@ant-design/icons'
-import { DEFAULT_CONEXTCOUNT } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
+import { useRuntime, useShowTopics } from '@renderer/hooks/useStore'
 import { getDefaultTopic } from '@renderer/services/assistant'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import FileManager from '@renderer/services/file'
 import { estimateInputTokenCount } from '@renderer/services/messages'
-import store, { useAppSelector } from '@renderer/store'
+import store, { useAppDispatch, useAppSelector } from '@renderer/store'
-import { setGenerating } from '@renderer/store/runtime'
+import { setGenerating, setSearching } from '@renderer/store/runtime'
-import { Assistant, Message, Topic } from '@renderer/types'
+import { Assistant, FileType, Message, Topic } from '@renderer/types'
 import { delay, uuid } from '@renderer/utils'
-import { Button, Divider, Popconfirm, Tag, Tooltip } from 'antd'
+import { Button, Popconfirm, Tooltip } from 'antd'
 import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
 import dayjs from 'dayjs'
 import { debounce, isEmpty } from 'lodash'
@@ -25,33 +27,38 @@ import { CSSProperties, FC, useCallback, useEffect, useMemo, useRef, useState }
 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
   setActiveTopic: (topic: Topic) => void
-  showSetting: boolean
-  setShowSetting: (show: boolean) => void
 }
 
 let _text = ''
 
-const Inputbar: FC<Props> = ({ assistant, setActiveTopic, showSetting, setShowSetting }) => {
+const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
   const [text, setText] = useState(_text)
   const [inputFocus, setInputFocus] = useState(false)
-  const { addTopic } = useAssistant(assistant.id)
+  const { addTopic, model } = useAssistant(assistant.id)
-  const { sendMessageShortcut, showInputEstimatedTokens, fontSize } = useSettings()
+  const { sendMessageShortcut, fontSize } = useSettings()
   const [expended, setExpend] = useState(false)
   const [estimateTokenCount, setEstimateTokenCount] = useState(0)
+  const [contextCount, setContextCount] = useState(0)
   const generating = useAppSelector((state) => state.runtime.generating)
   const textareaRef = useRef<TextAreaRef>(null)
-  const [files, setFiles] = useState<File[]>([])
+  const [files, setFiles] = useState<FileType[]>([])
   const { t } = useTranslation()
   const containerRef = useRef(null)
+  const { showTopics, toggleShowTopics } = useShowTopics()
+  const { searching } = useRuntime()
+  const dispatch = useAppDispatch()
 
   _text = text
 
-  const sendMessage = useCallback(() => {
+  const sendMessage = useCallback(async () => {
     if (generating) {
       return
     }
@@ -71,7 +78,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic, showSetting, setShowSe
     }
 
     if (files.length > 0) {
-      message.files = files
+      message.files = await FileManager.uploadFiles(files)
     }
 
     EventEmitter.emit(EVENT_NAMES.SEND_MESSAGE, message)
@@ -87,13 +94,15 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic, showSetting, setShowSe
   const inputTokenCount = useMemo(() => estimateInputTokenCount(text), [text])
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    const isEnterPressed = event.keyCode == 13
+
     if (expended) {
       if (event.key === 'Escape') {
         return setExpend(false)
       }
     }
 
-    if (sendMessageShortcut === 'Enter' && event.key === 'Enter') {
+    if (sendMessageShortcut === 'Enter' && isEnterPressed) {
       if (event.shiftKey) {
         return
       }
@@ -101,7 +110,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic, showSetting, setShowSe
       return event.preventDefault()
     }
 
-    if (sendMessageShortcut === 'Shift+Enter' && event.key === 'Enter' && event.shiftKey) {
+    if (sendMessageShortcut === 'Shift+Enter' && isEnterPressed && event.shiftKey) {
       sendMessage()
       return event.preventDefault()
     }
@@ -126,6 +135,14 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic, showSetting, setShowSe
     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) {
@@ -174,7 +191,10 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic, showSetting, setShowSe
         setText(message.content)
         textareaRef.current?.focus()
       }),
-      EventEmitter.on(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, _setEstimateTokenCount)
+      EventEmitter.on(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, ({ tokensCount, contextCount }) => {
+        _setEstimateTokenCount(tokensCount)
+        setContextCount(contextCount)
+      })
     ]
     return () => unsubscribes.forEach((unsub) => unsub())
   }, [])
@@ -184,90 +204,108 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic, showSetting, setShowSe
   }, [assistant])
 
   return (
-    <Container id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
+    <Container>
-      <Textarea
+      <AttachmentPreview files={files} setFiles={setFiles} />
-        value={text}
+      <InputBarContainer id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
-        onChange={(e) => setText(e.target.value)}
+        <Textarea
-        onKeyDown={handleKeyDown}
+          value={text}
-        placeholder={t('chat.input.placeholder')}
+          onChange={(e) => setText(e.target.value)}
-        autoFocus
+          onKeyDown={handleKeyDown}
-        contextMenu="true"
+          placeholder={t('chat.input.placeholder')}
-        variant="borderless"
+          autoFocus
-        rows={1}
+          contextMenu="true"
-        ref={textareaRef}
+          variant="borderless"
-        style={{ fontSize }}
+          rows={1}
-        styles={{ textarea: TextareaStyle }}
+          ref={textareaRef}
-        onFocus={() => setInputFocus(true)}
+          style={{ fontSize }}
-        onBlur={() => setInputFocus(false)}
+          styles={{ textarea: TextareaStyle }}
-        onInput={onInput}
+          onFocus={() => setInputFocus(true)}
-      />
+          onBlur={() => setInputFocus(false)}
-      <Toolbar>
+          onInput={onInput}
-        <ToolbarMenu>
+          disabled={searching}
-          <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
+          onClick={() => searching && dispatch(setSearching(false))}
-            <ToolbarButton type="text" onClick={addNewTopic}>
+        />
-              <PlusCircleOutlined />
+        <Toolbar>
-            </ToolbarButton>
+          <ToolbarMenu>
-          </Tooltip>
+            <Tooltip placement="top" title={t('chat.input.new_topic')} arrow>
-          <Tooltip placement="top" title={t('chat.input.clear')} arrow>
+              <ToolbarButton type="text" onClick={addNewTopic}>
-            <Popconfirm
+                <FormOutlined />
-              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 className={showSetting ? 'active' : ''}>
-            <ToolbarButton type="text" onClick={() => setShowSetting(!showSetting)}>
-              <ControlOutlined />
-            </ToolbarButton>
-          </Tooltip>
-          {/* <AttachmentButton files={files} setFiles={setFiles} ToolbarButton={ToolbarButton} /> */}
-          <Tooltip placement="top" title={expended ? t('chat.input.collapse') : t('chat.input.expand')} arrow>
-            <ToolbarButton type="text" onClick={onToggleExpended}>
-              {expended ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
-            </ToolbarButton>
-          </Tooltip>
-          {showInputEstimatedTokens && (
-            <TextCount>
-              <Tooltip title={t('chat.input.context_count.tip') + ' | ' + t('chat.input.estimated_tokens.tip')}>
-                <StyledTag>
-                  <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}
-                </StyledTag>
-              </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 }} />
               </ToolbarButton>
             </Tooltip>
-          )}
+            <Tooltip placement="top" title={t('chat.input.clear')} arrow>
-          {!generating && <SendMessageButton sendMessage={sendMessage} disabled={generating || !text} />}
+              <Popconfirm
-        </ToolbarMenu>
+                title={t('chat.input.clear.content')}
-      </Toolbar>
+                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={() => {
+                  !showTopics && toggleShowTopics()
+                  setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR), 0)
+                }}>
+                <HistoryOutlined />
+              </ToolbarButton>
+            </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>
   )
 }
 
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
 const TextareaStyle: CSSProperties = {
   paddingLeft: 0,
-  padding: '10px 15px 8px',
+  padding: '10px 15px 8px'
-  transition: 'all 0.3s ease'
 }
 
-const Container = styled.div`
+const InputBarContainer = styled.div`
   border: 1px solid var(--color-border-soft);
   transition: all 0.3s ease;
   position: relative;
@@ -318,35 +356,28 @@ const ToolbarButton = styled(Button)`
   justify-content: center;
   align-items: center;
   padding: 0;
-  &.anticon {
+  &.anticon,
+  &.iconfont {
     transition: all 0.3s ease;
     color: var(--color-icon);
   }
-  &:hover,
+  &:hover {
-  &.active {
     background-color: var(--color-background-soft);
-    .anticon {
+    .anticon,
+    .iconfont {
       color: var(--color-text-1);
     }
   }
+  &.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;
-`
-
-const StyledTag = styled(Tag)`
-  cursor: pointer;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-width: 0.5;
-`
-
 export default Inputbar

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

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

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

@@ -2,7 +2,7 @@ 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 { ThemeMode } from '@renderer/store/settings'
+import { ThemeMode } from '@renderer/types'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
@@ -37,7 +37,7 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
   }
 
   return match ? (
-    <div>
+    <>
       <CodeHeader>
         <CodeLanguage>{'<' + match[1].toUpperCase() + '>'}</CodeLanguage>
         {!copied && <CopyIcon className="copy" onClick={onCopy} />}
@@ -48,10 +48,15 @@ const CodeBlock: React.FC<CodeBlockProps> = ({ children, className, ...rest }) =
         language={match[1]}
         style={theme === ThemeMode.dark ? atomDark : oneLight}
         wrapLongLines={true}
-        customStyle={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, marginTop: 0 }}>
+        customStyle={{
+          border: '0.5px solid var(--color-code-background)',
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+          marginTop: 0
+        }}>
         {String(children).replace(/\n$/, '')}
       </SyntaxHighlighter>
-    </div>
+    </>
   ) : (
     <code {...rest} className={className}>
       {children}
@@ -67,7 +72,7 @@ const CodeHeader = styled.div`
   font-size: 14px;
   font-weight: bold;
   background-color: var(--color-code-background);
-  height: 40px;
+  height: 36px;
   padding: 0 10px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;

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

@@ -1,7 +1,6 @@
 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'
@@ -24,7 +23,7 @@ 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 content
   }, [message.content, message.status, t])
 
   return useMemo(() => {
@@ -32,7 +31,7 @@ const Markdown: FC<Props> = ({ message }) => {
       <ReactMarkdown
         className="markdown"
         rehypePlugins={[rehypeKatex]}
-        remarkPlugins={[[remarkMath, { singleDollarTextMath: false }], remarkGfm]}
+        remarkPlugins={[remarkMath, remarkGfm]}
         remarkRehypeOptions={{
           footnoteLabel: t('common.footnotes'),
           footnoteLabelTagName: 'h4',

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

@@ -9,6 +9,7 @@ import {
 } from '@ant-design/icons'
 import UserPopup from '@renderer/components/Popups/UserPopup'
 import { FONT_FAMILY } from '@renderer/config/constant'
+import { startMinAppById } from '@renderer/config/minapp'
 import { getModelLogo } from '@renderer/config/provider'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import useAvatar from '@renderer/hooks/useAvatar'
@@ -17,8 +18,8 @@ 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 { firstLetter, removeLeadingEmoji, removeTrailingDoubleSpaces } from '@renderer/utils'
-import { Alert, Avatar, Dropdown, Popconfirm, Tooltip } from 'antd'
+import { Alert, Avatar, Divider, Dropdown, Popconfirm, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { upperFirst } from 'lodash'
 import { FC, memo, useCallback, useMemo, useState } from 'react'
@@ -53,7 +54,7 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
   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)
@@ -127,12 +128,26 @@ const MessageItem: FC<Props> = ({ message, index, showMenu, onDeleteMessage }) =
     )
   }, [message, t])
 
+  const showMiniApp = () => model?.provider && startMinAppById(model?.provider)
+
+  if (message.type === 'clear') {
+    return (
+      <Divider dashed style={{ padding: '0 20px' }} plain>
+        {t('chat.message.new.context')}
+      </Divider>
+    )
+  }
+
   return (
     <MessageContainer key={message.id} className="message">
       <MessageHeader>
         <AvatarWrapper>
           {isAssistantMessage ? (
-            <Avatar src={avatarSource} size={35} style={{ borderRadius: '20%' }}>
+            <Avatar
+              src={avatarSource}
+              size={35}
+              style={{ borderRadius: '20%', cursor: 'pointer' }}
+              onClick={showMiniApp}>
               {avatarName}
             </Avatar>
           ) : (

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

@@ -8,7 +8,11 @@ interface Props {
 }
 
 const MessageAttachments: FC<Props> = ({ message }) => {
-  return <Container>{message.images?.map((image) => <Image src={image} key={image} width="33%" />)}</Container>
+  return (
+    <Container>
+      {message.files?.map((image) => <Image src={'file://' + image.path} key={image.id} width="33%" />)}
+    </Container>
+  )
 }
 
 const Container = styled.div`

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

@@ -3,7 +3,12 @@ import { useProviderByAssistant } from '@renderer/hooks/useProvider'
 import { getTopic } from '@renderer/hooks/useTopic'
 import { fetchChatCompletion, fetchMessagesSummary } from '@renderer/services/api'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { estimateHistoryTokenCount, filterMessages } from '@renderer/services/messages'
+import {
+  deleteMessageFiles,
+  estimateHistoryTokenCount,
+  filterMessages,
+  getContextCount
+} from '@renderer/services/messages'
 import LocalStorage from '@renderer/services/storage'
 import { Assistant, Message, Model, Topic } from '@renderer/types'
 import { getBriefInfo, runAsyncFunction, uuid } from '@renderer/utils'
@@ -20,9 +25,10 @@ import Prompt from './Prompt'
 interface Props {
   assistant: Assistant
   topic: Topic
+  setActiveTopic: (topic: Topic) => void
 }
 
-const Messages: FC<Props> = ({ assistant, topic }) => {
+const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
   const [messages, setMessages] = useState<Message[]>([])
   const [lastMessage, setLastMessage] = useState<Message | null>(null)
   const provider = useProviderByAssistant(assistant)
@@ -33,7 +39,7 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
     (message: Message) => {
       const _messages = [...messages, message]
       setMessages(_messages)
-      localforage.setItem(`topic:${topic.id}`, { ...topic, messages: _messages })
+      localforage.setItem(`topic:${topic.id}`, { id: topic.id, messages: _messages })
     },
     [messages, topic]
   )
@@ -42,15 +48,20 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
     const _topic = getTopic(assistant, topic.id)
     if (_topic && _topic.name === t('chat.default.topic.name') && messages.length >= 2) {
       const summaryText = await fetchMessagesSummary({ messages, assistant })
-      summaryText && updateTopic({ ..._topic, name: summaryText })
+      if (summaryText) {
+        const data = { ..._topic, name: summaryText }
+        setActiveTopic(data)
+        updateTopic(data)
+      }
     }
-  }, [assistant, messages, topic, updateTopic])
+  }, [assistant, messages, setActiveTopic, topic.id, updateTopic])
 
   const onDeleteMessage = useCallback(
     (message: Message) => {
       const _messages = messages.filter((m) => m.id !== message.id)
       setMessages(_messages)
       localforage.setItem(`topic:${topic.id}`, { id: topic.id, messages: _messages })
+      deleteMessageFiles(message)
     },
     [messages, topic.id]
   )
@@ -84,6 +95,28 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
         setMessages([])
         updateTopic({ ...topic, messages: [] })
         LocalStorage.clearTopicMessages(topic.id)
+      }),
+      EventEmitter.on(EVENT_NAMES.NEW_CONTEXT, () => {
+        const lastMessage = last(messages)
+
+        if (lastMessage && lastMessage.type === 'clear') {
+          return
+        }
+
+        if (messages.length === 0) {
+          return
+        }
+
+        onSendMessage({
+          id: uuid(),
+          assistantId: assistant.id,
+          role: 'user',
+          content: '',
+          topicId: topic.id,
+          createdAt: new Date().toISOString(),
+          status: 'success',
+          type: 'clear'
+        } as Message)
       })
     ]
     return () => unsubscribes.forEach((unsub) => unsub())
@@ -101,7 +134,10 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
   }, [messages])
 
   useEffect(() => {
-    EventEmitter.emit(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, estimateHistoryTokenCount(assistant, messages))
+    EventEmitter.emit(EVENT_NAMES.ESTIMATED_TOKEN_COUNT, {
+      tokensCount: estimateHistoryTokenCount(assistant, messages),
+      contextCount: getContextCount(assistant, messages)
+    })
   }, [assistant, messages])
 
   return (
@@ -117,6 +153,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,132 @@
+import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar'
+import { HStack } from '@renderer/components/Layout'
+import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
+import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup'
+import { isMac, isWindows } from '@renderer/config/constant'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { useAssistant } from '@renderer/hooks/useAssistant'
+import { useSettings } from '@renderer/hooks/useSettings'
+import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore'
+import { syncAsistantToAgent } from '@renderer/services/assistant'
+import { Assistant, Topic } from '@renderer/types'
+import { Switch } from 'antd'
+import { FC, useCallback } from 'react'
+import styled from 'styled-components'
+
+import SelectModelButton from './components/SelectModelButton'
+
+interface Props {
+  activeAssistant: Assistant
+  activeTopic: Topic
+  setActiveAssistant: (assistant: Assistant) => void
+}
+
+const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant }) => {
+  const { assistant, updateAssistant } = useAssistant(activeAssistant.id)
+  const { showAssistants, toggleShowAssistants } = useShowAssistants()
+  const { theme, toggleTheme } = useTheme()
+  const { topicPosition } = useSettings()
+  const { showTopics, toggleShowTopics } = useShowTopics()
+
+  const onCreateAssistant = async () => {
+    const assistant = await AddAssistantPopup.show()
+    assistant && setActiveAssistant(assistant)
+  }
+
+  const onEditAssistant = useCallback(async () => {
+    const _assistant = await AssistantSettingPopup.show({ assistant })
+    updateAssistant(_assistant)
+    syncAsistantToAgent(_assistant)
+  }, [assistant, updateAssistant])
+
+  return (
+    <Navbar>
+      {showAssistants && (
+        <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
+          <NewButton onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
+            <i className="iconfont icon-hide-sidebar" />
+          </NewButton>
+          <NewButton onClick={onCreateAssistant}>
+            <i className="iconfont icon-a-addchat" />
+          </NewButton>
+        </NavbarLeft>
+      )}
+      <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: 4px;
+  height: 30px;
+  padding: 0 7px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  .iconfont {
+    font-size: 19px;
+    color: var(--color-icon);
+    &.icon-a-addchat {
+      font-size: 20px;
+    }
+    &.icon-a-darkmode {
+      font-size: 20px;
+    }
+  }
+  .anticon {
+    color: var(--color-icon);
+    font-size: 17px;
+  }
+  &:hover {
+    background-color: var(--color-background-mute);
+    color: var(--color-icon-white);
+  }
+`
+
+const TitleText = styled.span`
+  margin-left: 5px;
+  font-family: Ubuntu;
+  font-size: 13px;
+  font-weight: 500;
+`
+
+const ThemeSwitch = styled(Switch)`
+  -webkit-app-region: no-drag;
+  margin-right: 10px;
+  .icon-theme {
+    font-size: 14px;
+  }
+`
+
+export default HeaderNavbar

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

@@ -0,0 +1,142 @@
+import { BarsOutlined, SettingOutlined } from '@ant-design/icons'
+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('common.assistant'),
+    value: 'assistants',
+    icon: <i className="iconfont icon-business-smart-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={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/Settings.tsx

@@ -1,4 +1,4 @@
-import { CheckOutlined, CloseOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons'
+import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
 import { DEFAULT_CONEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
@@ -19,7 +19,6 @@ import styled from 'styled-components'
 
 interface Props {
   assistant: Assistant
-  onClose: () => void
 }
 
 const SettingsTab: FC<Props> = (props) => {
@@ -88,11 +87,7 @@ const SettingsTab: FC<Props> = (props) => {
 
   return (
     <Container>
-      <SettingsHeader>
+      <SettingSubtitle style={{ marginTop: 5 }}>
-        {t('settings.title')}
-        <CloseIcon onClick={props.onClose} />
-      </SettingsHeader>
-      <SettingSubtitle>
         {t('settings.messages.model.title')}{' '}
         <Tooltip title={t('chat.settings.reset')}>
           <ReloadOutlined onClick={onReset} style={{ cursor: 'pointer', fontSize: 12, padding: '0 3px' }} />
@@ -109,7 +104,7 @@ const SettingsTab: FC<Props> = (props) => {
         <Col span={24}>
           <Slider
             min={0}
-            max={1.2}
+            max={2}
             onChange={setTemperature}
             onChangeComplete={onTemperatureChange}
             value={typeof temperature === 'number' ? temperature : 0}
@@ -192,10 +187,7 @@ const SettingsTab: FC<Props> = (props) => {
           <Slider
             value={fontSizeValue}
             onChange={(value) => setFontSizeValue(value)}
-            onChangeComplete={(value) => {
+            onChangeComplete={(value) => dispatch(setFontSize(value))}
-              dispatch(setFontSize(value))
-              console.debug('set font size', value)
-            }}
             min={12}
             max={18}
             step={1}
@@ -239,13 +231,9 @@ const Container = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  width: var(--topic-list-width);
+  overflow: hidden;
-  max-width: var(--topic-list-width);
+  padding-bottom: 10px;
-  height: calc(100vh - var(--navbar-height));
+  padding: 10px 15px;
-  border-left: 0.5px solid var(--color-border);
-  padding: 0 15px;
-  padding-bottom: 20px;
-  overflow-y: auto;
 `
 
 const Label = styled.p`
@@ -264,21 +252,4 @@ const SettingRowTitleSmall = styled(SettingRowTitle)`
   font-size: 13px;
 `
 
-const SettingsHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 15px;
-  border-bottom: 0.5px solid var(--color-border);
-  margin-left: -15px;
-  margin-right: -15px;
-`
-
-const CloseIcon = styled(CloseOutlined)`
-  font-size: 14px;
-  cursor: pointer;
-  color: var(--color-text-3);
-`
-
 export default SettingsTab

src/renderer/src/pages/home/Topics.tsx

@@ -1,13 +1,13 @@
-import { DeleteOutlined, EditOutlined, OpenAIOutlined } from '@ant-design/icons'
+import { CloseOutlined, DeleteOutlined, EditOutlined, OpenAIOutlined } from '@ant-design/icons'
-import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd'
+import DragableList from '@renderer/components/DragableList'
 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 { findIndex } from 'lodash'
 import { FC, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -23,6 +23,28 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
   const { t } = useTranslation()
   const generating = useAppSelector((state) => state.runtime.generating)
 
+  const onDeleteTopic = useCallback(
+    (topic: Topic) => {
+      if (assistant.topics.length > 1) {
+        const index = findIndex(assistant.topics, (t) => t.id === topic.id)
+        setActiveTopic(assistant.topics[index + 1 === assistant.topics.length ? 0 : index + 1])
+        removeTopic(topic)
+      }
+    },
+    [assistant.topics, removeTopic, setActiveTopic]
+  )
+
+  const onSwitchTopic = useCallback(
+    (topic: Topic) => {
+      if (generating) {
+        window.message.warning({ content: t('message.switch.disabled'), key: 'switch-assistant' })
+        return
+      }
+      setActiveTopic(topic)
+    },
+    [generating, setActiveTopic, t]
+  )
+
   const getTopicMenuItems = useCallback(
     (topic: Topic) => {
       const menus: MenuProps['items'] = [
@@ -64,70 +86,39 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
           danger: true,
           key: 'delete',
           icon: <DeleteOutlined />,
-          onClick() {
+          onClick: () => onDeleteTopic(topic)
-            if (assistant.topics.length === 1) return
-            removeTopic(topic)
-            setActiveTopic(assistant.topics[0])
-          }
         })
       }
 
       return menus
     },
-    [assistant, removeTopic, setActiveTopic, t, updateTopic]
+    [assistant, onDeleteTopic, 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}>
+      <DragableList list={assistant.topics} onUpdate={updateTopics}>
-        <Droppable droppableId="droppable">
+        {(topic) => {
-          {(provided) => (
+          const isActive = topic.id === activeTopic?.id
-            <div {...provided.droppableProps} ref={provided.innerRef}>
+          return (
-              {assistant.topics.map((topic, index) => (
+            <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
-                <Draggable key={`draggable_${topic.id}_${index}`} draggableId={topic.id} index={index}>
+              <TopicListItem className={isActive ? 'active' : ''} onClick={() => onSwitchTopic(topic)}>
-                  {(provided) => (
+                <TopicName>{topic.name}</TopicName>
-                    <div
+                {assistant.topics.length > 1 && (
-                      ref={provided.innerRef}
+                  <MenuButton
-                      {...provided.draggableProps}
+                    className="menu"
-                      {...provided.dragHandleProps}
+                    onClick={(e) => {
-                      style={{ ...provided.draggableProps.style, marginBottom: 5 }}>
+                      e.stopPropagation()
-                      <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
+                      onDeleteTopic(topic)
-                        <TopicListItem
+                    }}>
-                          className={topic.id === activeTopic?.id ? 'active' : ''}
+                    <CloseOutlined />
-                          onClick={() => onSwitchTopic(topic)}>
+                  </MenuButton>
-                          {topic.name}
+                )}
-                        </TopicListItem>
+              </TopicListItem>
-                      </Dropdown>
+            </Dropdown>
-                    </div>
+          )
-                  )}
+        }}
-                </Draggable>
+      </DragableList>
-              ))}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
     </Container>
   )
 }
@@ -136,10 +127,9 @@ const Container = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
-  overflow-y: scroll;
   padding-top: 10px;
-  padding-bottom: 10px;
+  overflow-y: scroll;
-  margin-top: -10px;
+  max-height: calc(100vh - var(--navbar-height) - 140px);
 `
 
 const TopicListItem = styled.div`
@@ -147,16 +137,54 @@ const TopicListItem = styled.div`
   margin: 0 10px;
   cursor: pointer;
   border-radius: 4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   font-family: Ubuntu;
-  &:hover {
+  font-size: 13px;
-    background-color: var(--color-background-soft);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  .menu {
+    opacity: 0;
+    color: var(--color-text-3);
   }
   &.active {
     background-color: var(--color-background-mute);
     font-weight: 500;
+    .menu {
+      opacity: 1;
+      background-color: var(--color-background-mute);
+      &:hover {
+        color: var(--color-text-2);
+      }
+    }
+  }
+`
+
+const TopicName = styled.div`
+  color: var(--color-text);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 13px;
+`
+
+const MenuButton = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 4px;
+  position: absolute;
+  right: 10px;
+  top: 5px;
+  .anticon {
+    font-size: 12px;
   }
 `
 

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

@@ -1,5 +1,7 @@
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
+import VisionIcon from '@renderer/components/Icons/VisionIcon'
 import { isLocalAi } from '@renderer/config/env'
+import { isVisionModel } from '@renderer/config/models'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { Assistant } from '@renderer/types'
 import { Button } from 'antd'
@@ -23,10 +25,11 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
   }
 
   return (
-    <SelectModelDropdown model={model} onSelect={setModel}>
+    <SelectModelDropdown model={model} onSelect={setModel} placement="top">
       <DropdownButton size="small" type="default">
         <ModelAvatar model={model} size={20} />
         <ModelName>{model ? upperFirst(model.name) : t('button.select_model')}</ModelName>
+        {isVisionModel(model) && <VisionIcon style={{ marginLeft: 0 }} />}
       </DropdownButton>
     </SelectModelDropdown>
   )

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

@@ -1,5 +1,8 @@
+import VisionIcon from '@renderer/components/Icons/VisionIcon'
+import { isVisionModel } from '@renderer/config/models'
 import { getModelLogo } from '@renderer/config/provider'
 import { useProviders } from '@renderer/hooks/useProvider'
+import { getModelUniqId } from '@renderer/services/model'
 import { Model } from '@renderer/types'
 import { Avatar, Dropdown, DropdownProps, MenuProps } from 'antd'
 import { first, reverse, sortBy, upperFirst } from 'lodash'
@@ -23,9 +26,12 @@ const SelectModelDropdown: FC<Props & PropsWithChildren> = ({ children, model, o
       label: p.isSystem ? t(`provider.${p.id}`) : p.name,
       type: 'group',
       children: reverse(sortBy(p.models, 'name')).map((m) => ({
-        key: m?.id,
+        key: getModelUniqId(m),
-        label: upperFirst(m?.name),
+        label: (
-        defaultSelectedKeys: [model?.id],
+          <div>
+            {upperFirst(m?.name)} {isVisionModel(m) && <VisionIcon />}
+          </div>
+        ),
         icon: (
           <Avatar src={getModelLogo(m?.id || '')} size={24}>
             {first(m?.name)}
@@ -37,7 +43,11 @@ const SelectModelDropdown: FC<Props & PropsWithChildren> = ({ children, model, o
 
   return (
     <DropdownMenu
-      menu={{ items, style: { maxHeight: '80vh', overflow: 'auto' }, selectedKeys: model ? [model.id] : [] }}
+      menu={{
+        items,
+        style: { maxHeight: '55vh', overflow: 'auto' },
+        selectedKeys: model ? [getModelUniqId(model)] : []
+      }}
       trigger={['click']}
       arrow
       placement="bottom"

src/renderer/src/pages/settings/AssistantSettings.tsx

@@ -108,18 +108,18 @@ const AssistantSettings: FC = () => {
         <Col span={21}>
           <Slider
             min={0}
-            max={1.2}
+            max={2}
             onChange={setTemperature}
             onChangeComplete={onTemperatureChange}
             value={typeof temperature === 'number' ? temperature : 0}
-            marks={{ 0: '0', 0.7: '0.7', 1: '1', 1.2: '1.2' }}
+            marks={{ 0: '0', 0.7: '0.7', 2: '2' }}
             step={0.1}
           />
         </Col>
         <Col span={3}>
           <InputNumber
             min={0}
-            max={1.2}
+            max={2}
             step={0.1}
             value={temperature}
             onChange={onTemperatureChange}

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

@@ -1,25 +1,32 @@
 import { FolderOpenOutlined, SaveOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
-import useAvatar from '@renderer/hooks/useAvatar'
+import { isMac } from '@renderer/config/constant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import i18n from '@renderer/i18n'
 import { backup, reset, restore } from '@renderer/services/backup'
-import LocalStorage from '@renderer/services/storage'
 import { useAppDispatch } from '@renderer/store'
-import { setAvatar } from '@renderer/store/runtime'
+import { setLanguage, setUserName } from '@renderer/store/settings'
-import { setLanguage, setUserName, ThemeMode } from '@renderer/store/settings'
 import { setProxyUrl as _setProxyUrl } from '@renderer/store/settings'
-import { compressImage, isValidProxyUrl } from '@renderer/utils'
+import { ThemeMode } from '@renderer/types'
-import { Avatar, Button, Input, Select, Upload } from 'antd'
+import { isValidProxyUrl } from '@renderer/utils'
+import { Button, Input, Select } from 'antd'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from '.'
 
 const GeneralSettings: FC = () => {
-  const avatar = useAvatar()
+  const {
-  const { language, proxyUrl: storeProxyUrl, userName, theme, setTheme } = useSettings()
+    language,
+    proxyUrl: storeProxyUrl,
+    userName,
+    theme,
+    windowStyle,
+    topicPosition,
+    setTheme,
+    setWindowStyle,
+    setTopicPosition
+  } = useSettings()
   const [proxyUrl, setProxyUrl] = useState<string | undefined>(storeProxyUrl)
   const dispatch = useAppDispatch()
   const { t } = useTranslation()
@@ -48,7 +55,7 @@ const GeneralSettings: FC = () => {
         <SettingRowTitle>{t('common.language')}</SettingRowTitle>
         <Select
           defaultValue={language || 'en-US'}
-          style={{ width: 120 }}
+          style={{ width: 180 }}
           onChange={onSelectLanguage}
           options={[
             { value: 'zh-CN', label: '中文' },
@@ -61,7 +68,7 @@ const GeneralSettings: FC = () => {
         <SettingRowTitle>{t('settings.theme.title')}</SettingRowTitle>
         <Select
           defaultValue={theme}
-          style={{ width: 120 }}
+          style={{ width: 180 }}
           onChange={setTheme}
           options={[
             { value: ThemeMode.light, label: t('settings.theme.light') },
@@ -71,25 +78,32 @@ const GeneralSettings: FC = () => {
         />
       </SettingRow>
       <SettingDivider />
+      {isMac && (
+        <SettingRow>
+          <SettingRowTitle>{t('settings.theme.window.style.title')}</SettingRowTitle>
+          <Select
+            defaultValue={windowStyle || 'opaque'}
+            style={{ width: 180 }}
+            onChange={setWindowStyle}
+            options={[
+              { value: 'transparent', label: t('settings.theme.window.style.transparent') },
+              { value: 'opaque', label: t('settings.theme.window.style.opaque') }
+            ]}
+          />
+        </SettingRow>
+      )}
+      <SettingDivider />
       <SettingRow>
-        <SettingRowTitle>{t('common.avatar')}</SettingRowTitle>
+        <SettingRowTitle>{t('settings.topic.position')}</SettingRowTitle>
-        <Upload
+        <Select
-          customRequest={() => {}}
+          defaultValue={topicPosition || 'right'}
-          accept="image/png, image/jpeg"
+          style={{ width: 180 }}
-          itemRender={() => null}
+          onChange={setTopicPosition}
-          maxCount={1}
+          options={[
-          onChange={async ({ file }) => {
+            { value: 'left', label: t('settings.topic.position.left') },
-            try {
+            { value: 'right', label: t('settings.topic.position.right') }
-              const _file = file.originFileObj as File
+          ]}
-              const compressedFile = await compressImage(_file)
+        />
-              await LocalStorage.storeImage('avatar', compressedFile)
-              dispatch(setAvatar(await LocalStorage.getImage('avatar')))
-            } catch (error: any) {
-              window.message.error(error.message)
-            }
-          }}>
-          <UserAvatar src={avatar} size="large" />
-        </Upload>
       </SettingRow>
       <SettingDivider />
       <SettingRow>
@@ -98,7 +112,7 @@ const GeneralSettings: FC = () => {
           placeholder={t('settings.general.user_name.placeholder')}
           value={userName}
           onChange={(e) => dispatch(setUserName(e.target.value))}
-          style={{ width: 150 }}
+          style={{ width: 180 }}
           maxLength={30}
         />
       </SettingRow>
@@ -109,7 +123,7 @@ const GeneralSettings: FC = () => {
           placeholder="socks5://127.0.0.1:6153"
           value={proxyUrl}
           onChange={(e) => setProxyUrl(e.target.value)}
-          style={{ width: 300 }}
+          style={{ width: 180 }}
           onBlur={() => onSetProxyUrl()}
           type="url"
         />
@@ -117,7 +131,7 @@ const GeneralSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
-        <HStack gap="5px">
+        <HStack gap="5px" justifyContent="space-between">
           <Button onClick={backup} icon={<SaveOutlined />}>
             {t('settings.general.backup.button')}
           </Button>
@@ -140,8 +154,4 @@ const GeneralSettings: FC = () => {
   )
 }
 
-const UserAvatar = styled(Avatar)`
-  cursor: pointer;
-`
-
 export default GeneralSettings

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

@@ -1,10 +1,11 @@
 import { EditOutlined, MessageOutlined, TranslationOutlined } from '@ant-design/icons'
 import { useDefaultModel } from '@renderer/hooks/useAssistant'
 import { useProviders } from '@renderer/hooks/useProvider'
+import { getModelUniqId, hasModel } from '@renderer/services/model'
 import { Model } from '@renderer/types'
 import { Select } from 'antd'
 import { find, sortBy, upperFirst } from 'lodash'
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingContainer, SettingDivider, SettingTitle } from '.'
@@ -23,11 +24,24 @@ const ModelSettings: FC = () => {
       title: p.name,
       options: sortBy(p.models, 'name').map((m) => ({
         label: upperFirst(m.name),
-        value: m.id
+        value: getModelUniqId(m)
       }))
     }))
 
-  const iconStyle = { fontSize: 16, marginRight: 8 }
+  const defaultModelValue = useMemo(
+    () => (hasModel(defaultModel) ? getModelUniqId(defaultModel) : undefined),
+    [defaultModel]
+  )
+
+  const defaultTopicNamingModel = useMemo(
+    () => (hasModel(topicNamingModel) ? getModelUniqId(topicNamingModel) : undefined),
+    [topicNamingModel]
+  )
+
+  const defaultTranslateModel = useMemo(
+    () => (hasModel(translateModel) ? getModelUniqId(translateModel) : undefined),
+    [translateModel]
+  )
 
   return (
     <SettingContainer>
@@ -39,10 +53,12 @@ const ModelSettings: FC = () => {
       </SettingTitle>
       <SettingDivider />
       <Select
-        defaultValue={defaultModel.id}
+        value={defaultModelValue}
+        defaultValue={defaultModelValue}
         style={{ width: 360 }}
-        onChange={(id) => setDefaultModel(find(allModels, { id }) as Model)}
+        onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
         options={selectOptions}
+        placeholder={t('settings.models.empty')}
       />
       <div style={{ height: 30 }} />
       <SettingTitle>
@@ -53,10 +69,12 @@ const ModelSettings: FC = () => {
       </SettingTitle>
       <SettingDivider />
       <Select
-        defaultValue={topicNamingModel.id}
+        value={defaultTopicNamingModel}
+        defaultValue={defaultTopicNamingModel}
         style={{ width: 360 }}
-        onChange={(id) => setTopicNamingModel(find(allModels, { id }) as Model)}
+        onChange={(value) => setTopicNamingModel(find(allModels, JSON.parse(value)) as Model)}
         options={selectOptions}
+        placeholder={t('settings.models.empty')}
       />
       <div style={{ height: 30 }} />
       <SettingTitle>
@@ -67,9 +85,10 @@ const ModelSettings: FC = () => {
       </SettingTitle>
       <SettingDivider />
       <Select
-        defaultValue={translateModel?.id}
+        value={defaultTranslateModel}
+        defaultValue={defaultTranslateModel}
         style={{ width: 360 }}
-        onChange={(id) => setTranslateModel(find(allModels, { id }) as Model)}
+        onChange={(value) => setTranslateModel(find(allModels, JSON.parse(value)) as Model)}
         options={selectOptions}
         placeholder={t('settings.models.empty')}
       />
@@ -77,4 +96,6 @@ const ModelSettings: FC = () => {
   )
 }
 
+const iconStyle = { fontSize: 16, marginRight: 8 }
+
 export default ModelSettings

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

@@ -67,7 +67,8 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve }) => {
       onCancel={onCancel}
       maskClosable={false}
       afterClose={onClose}
-      footer={null}>
+      footer={null}
+      centered>
       <Form
         form={form}
         labelCol={{ flex: '110px' }}

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

@@ -38,6 +38,7 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
       afterClose={onClose}
       width={360}
       closable={false}
+      centered
       title={t('settings.provider.edit.name')}
       okButtonProps={{ disabled: buttonDisabled }}>
       <Input

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

@@ -1,5 +1,6 @@
 import { LoadingOutlined, MinusOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons'
-import { SYSTEM_MODELS } from '@renderer/config/models'
+import VisionIcon from '@renderer/components/Icons/VisionIcon'
+import { isVisionModel, SYSTEM_MODELS } from '@renderer/config/models'
 import { getModelLogo } from '@renderer/config/provider'
 import { useProvider } from '@renderer/hooks/useProvider'
 import { fetchModels } from '@renderer/services/api'
@@ -107,7 +108,8 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
       styles={{
         content: { padding: 0 },
         header: { padding: 22, paddingBottom: 15 }
-      }}>
+      }}
+      centered>
       <SearchContainer>
         <Search placeholder={t('settings.provider.search_placeholder')} allowClear onSearch={setSearchText} />
       </SearchContainer>
@@ -125,6 +127,7 @@ const PopupContainer: React.FC<Props> = ({ provider: _provider, resolve }) => {
                     </Avatar>
                     <ListItemName>
                       {model.name}
+                      {isVisionModel(model) && <VisionIcon />}
                       {isFreeModel(model) && (
                         <Tag style={{ marginLeft: 10 }} color="green">
                           Free
@@ -154,7 +157,8 @@ const onShowModelInfo = (model: Model) => {
     title: model.name,
     content: model?.description,
     icon: null,
-    maskClosable: true
+    maskClosable: true,
+    width: 600
   })
 }
 

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

@@ -6,6 +6,8 @@ import {
   MinusCircleOutlined,
   PlusOutlined
 } from '@ant-design/icons'
+import VisionIcon from '@renderer/components/Icons/VisionIcon'
+import { isVisionModel } from '@renderer/config/models'
 import { getModelLogo } from '@renderer/config/provider'
 import { PROVIDER_CONFIG } from '@renderer/config/provider'
 import { useTheme } from '@renderer/context/ThemeProvider'
@@ -14,7 +16,7 @@ import { checkApi } from '@renderer/services/api'
 import { Provider } from '@renderer/types'
 import { Avatar, Button, Card, Divider, Flex, Input, Space, Switch } from 'antd'
 import Link from 'antd/es/typography/Link'
-import { groupBy } from 'lodash'
+import { groupBy, isEmpty } from 'lodash'
 import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -72,7 +74,6 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
   const docsWebsite = providerConfig?.websites?.docs
   const modelsWebsite = providerConfig?.websites?.models
   const configedApiHost = providerConfig?.api?.url
-  const apiEditable = provider.isSystem ? providerConfig?.api?.editable : true
 
   const onReset = () => {
     setApiHost(configedApiHost)
@@ -131,9 +132,10 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
           placeholder={t('settings.provider.api_host')}
           onChange={(e) => setApiHost(e.target.value)}
           onBlur={onUpdateApiHost}
-          disabled={!apiEditable}
         />
-        {apiEditable && <Button onClick={onReset}>{t('settings.provider.api.url.reset')}</Button>}
+        {!isEmpty(configedApiHost) && apiHost !== configedApiHost && (
+          <Button onClick={onReset}>{t('settings.provider.api.url.reset')}</Button>
+        )}
       </Space.Compact>
       {provider.id === 'ollama' && <OllamSettings />}
       {provider.id === 'graphrag-kylin-mountain' && provider.models.length > 0 && (
@@ -148,7 +150,7 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
                 <Avatar src={getModelLogo(model.id)} size={22} style={{ marginRight: '8px' }}>
                   {model.name[0].toUpperCase()}
                 </Avatar>
-                {model.name}
+                {model.name} {isVisionModel(model) && <VisionIcon />}
               </ModelListHeader>
               <RemoveIcon onClick={() => removeModel(model)} />
             </ModelListItem>

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

@@ -71,6 +71,7 @@ const ProvidersList: FC = () => {
             content: t('settings.provider.delete.content'),
             okButtonProps: { danger: true },
             okText: t('common.delete'),
+            centered: true,
             onOk: () => {
               setSelectedProvider(providers.filter((p) => p.isSystem)[0])
               removeProvider(provider)

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

@@ -1,10 +1,4 @@
-import {
+import { CloudOutlined, InfoCircleOutlined, MessageOutlined, SettingOutlined } from '@ant-design/icons'
-  CloudOutlined,
-  CodeSandboxOutlined,
-  InfoCircleOutlined,
-  MessageOutlined,
-  SettingOutlined
-} from '@ant-design/icons'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { isLocalAi } from '@renderer/config/env'
 import { FC } from 'react'
@@ -41,7 +35,7 @@ const SettingsPage: FC = () => {
               </MenuItemLink>
               <MenuItemLink to="/settings/model">
                 <MenuItem className={isRoute('/settings/model')}>
-                  <CodeSandboxOutlined />
+                  <i className="iconfont icon-ai-model" />
                   {t('settings.model')}
                 </MenuItem>
               </MenuItemLink>
@@ -96,7 +90,7 @@ const ContentContainer = styled.div`
 const SettingMenus = styled.ul`
   display: flex;
   flex-direction: column;
-  min-width: var(--assistants-width);
+  min-width: var(--settings-width);
   border-right: 0.5px solid var(--color-border);
   padding: 10px;
 `
@@ -122,6 +116,11 @@ const MenuItem = styled.li`
     font-size: 16px;
     opacity: 0.8;
   }
+  .iconfont {
+    font-size: 18px;
+    opacity: 0.7;
+    margin-left: -1px;
+  }
   &:hover {
     background: var(--color-background-soft);
   }

src/renderer/src/providers/AiProvider.ts

@@ -22,7 +22,7 @@ export default class AiProvider {
     return this.sdk.translate(message, assistant)
   }
 
-  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
+  public async summaries(messages: Message[], assistant: Assistant): Promise<string> {
     return this.sdk.summaries(messages, assistant)
   }
 
@@ -30,6 +30,10 @@ export default class AiProvider {
     return this.sdk.suggestions(messages, assistant)
   }
 
+  public async generateText({ prompt, content }: { prompt: string; content: string }): Promise<string> {
+    return this.sdk.generateText({ prompt, content })
+  }
+
   public async check(): Promise<{ valid: boolean; error: Error | null }> {
     return this.sdk.check()
   }

src/renderer/src/providers/AnthropicProvider.ts

@@ -3,8 +3,9 @@ import { MessageCreateParamsNonStreaming, MessageParam } from '@anthropic-ai/sdk
 import { DEFAULT_MAX_TOKENS } from '@renderer/config/constant'
 import { getAssistantSettings, getDefaultModel, getTopNamingModel } from '@renderer/services/assistant'
 import { EVENT_NAMES } from '@renderer/services/event'
+import { filterContextMessages, filterMessages } from '@renderer/services/messages'
 import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
-import { sum, takeRight } from 'lodash'
+import { first, sum, takeRight } from 'lodash'
 import OpenAI from 'openai'
 
 import BaseProvider from './BaseProvider'
@@ -17,6 +18,31 @@ export default class AnthropicProvider extends BaseProvider {
     this.sdk = new Anthropic({ apiKey: provider.apiKey, baseURL: this.getBaseURL() })
   }
 
+  private async getMessageContent(message: Message): Promise<MessageParam['content']> {
+    const file = first(message.files)
+
+    if (!file) {
+      return message.content
+    }
+
+    if (file.type === 'image') {
+      const base64Data = await window.api.image.base64(file.path)
+      return [
+        { type: 'text', text: message.content },
+        {
+          type: 'image',
+          source: {
+            data: base64Data.base64,
+            media_type: base64Data.mime.replace('jpg', 'jpeg') as any,
+            type: 'base64'
+          }
+        }
+      ]
+    }
+
+    return message.content
+  }
+
   public async completions(
     messages: Message[],
     assistant: Assistant,
@@ -26,12 +52,18 @@ export default class AnthropicProvider extends BaseProvider {
     const model = assistant.model || defaultModel
     const { contextCount, maxTokens } = getAssistantSettings(assistant)
 
-    const userMessages = takeRight(messages, contextCount + 1).map((message) => {
+    const userMessages: MessageParam[] = []
-      return {
+
+    for (const message of filterMessages(filterContextMessages(takeRight(messages, contextCount + 2)))) {
+      userMessages.push({
         role: message.role,
-        content: message.content
+        content: await this.getMessageContent(message)
-      }
+      })
-    })
+    }
+
+    if (first(userMessages)?.role === 'assistant') {
+      userMessages.shift()
+    }
 
     return new Promise<void>((resolve, reject) => {
       const stream = this.sdk.messages
@@ -85,7 +117,7 @@ export default class AnthropicProvider extends BaseProvider {
     return response.content[0].type === 'text' ? response.content[0].text : ''
   }
 
-  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
+  public async summaries(messages: Message[], assistant: Assistant): Promise<string> {
     const model = getTopNamingModel() || assistant.model || getDefaultModel()
 
     const userMessages = takeRight(messages, 5).map((message) => ({
@@ -93,6 +125,10 @@ export default class AnthropicProvider extends BaseProvider {
       content: message.content
     }))
 
+    if (first(userMessages)?.role === 'assistant') {
+      userMessages.shift()
+    }
+
     const systemMessage = {
       role: 'system',
       content: '你是一名擅长会话的助理，你需要将用户的会话总结为 10 个字以内的标题，不要使用标点符号和其他特殊符号。'
@@ -106,7 +142,26 @@ export default class AnthropicProvider extends BaseProvider {
       max_tokens: 4096
     })
 
-    return message.content[0].type === 'text' ? message.content[0].text : null
+    return message.content[0].type === 'text' ? message.content[0].text : ''
+  }
+
+  public async generateText({ prompt, content }: { prompt: string; content: string }): Promise<string> {
+    const model = getDefaultModel()
+
+    const message = await this.sdk.messages.create({
+      messages: [
+        {
+          role: 'user',
+          content
+        }
+      ],
+      model: model.id,
+      system: prompt,
+      stream: false,
+      max_tokens: 4096
+    })
+
+    return message.content[0].type === 'text' ? message.content[0].text : ''
   }
 
   public async suggestions(): Promise<Suggestion[]> {

src/renderer/src/providers/BaseProvider.ts

@@ -26,8 +26,9 @@ export default abstract class BaseProvider {
     onChunk: ({ text, usage }: { text?: string; usage?: OpenAI.Completions.CompletionUsage }) => void
   ): Promise<void>
   abstract translate(message: Message, assistant: Assistant): Promise<string>
-  abstract summaries(messages: Message[], assistant: Assistant): Promise<string | null>
+  abstract summaries(messages: Message[], assistant: Assistant): Promise<string>
   abstract suggestions(messages: Message[], assistant: Assistant): Promise<Suggestion[]>
+  abstract generateText({ prompt, content }: { prompt: string; content: string }): Promise<string>
   abstract check(): Promise<{ valid: boolean; error: Error | null }>
   abstract models(): Promise<OpenAI.Models.Model[]>
 }

src/renderer/src/providers/GeminiProvider.ts

@@ -1,9 +1,10 @@
-import { GoogleGenerativeAI } from '@google/generative-ai'
+import { Content, GoogleGenerativeAI, InlineDataPart, Part } from '@google/generative-ai'
 import { getAssistantSettings, getDefaultModel, getTopNamingModel } from '@renderer/services/assistant'
 import { EVENT_NAMES } from '@renderer/services/event'
+import { filterContextMessages, filterMessages } from '@renderer/services/messages'
 import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
 import axios from 'axios'
-import { isEmpty, takeRight } from 'lodash'
+import { first, isEmpty, takeRight } from 'lodash'
 import OpenAI from 'openai'
 
 import BaseProvider from './BaseProvider'
@@ -16,6 +17,27 @@ export default class GeminiProvider extends BaseProvider {
     this.sdk = new GoogleGenerativeAI(provider.apiKey)
   }
 
+  private async getMessageParts(message: Message): Promise<Part[]> {
+    const file = first(message.files)
+
+    if (file && file.type === 'image') {
+      const base64Data = await window.api.image.base64(file.path)
+      return [
+        {
+          text: message.content
+        },
+        {
+          inlineData: {
+            data: base64Data.base64,
+            mimeType: base64Data.mime
+          }
+        } as InlineDataPart
+      ]
+    }
+
+    return [{ text: message.content }]
+  }
+
   public async completions(
     messages: Message[],
     assistant: Assistant,
@@ -25,10 +47,10 @@ export default class GeminiProvider extends BaseProvider {
     const model = assistant.model || defaultModel
     const { contextCount, maxTokens } = getAssistantSettings(assistant)
 
-    const userMessages = takeRight(messages, contextCount + 1).map((message) => {
+    const userMessages = filterMessages(filterContextMessages(takeRight(messages, contextCount + 1))).map((message) => {
       return {
         role: message.role,
-        content: message.content
+        message
       }
     })
 
@@ -43,14 +65,19 @@ export default class GeminiProvider extends BaseProvider {
 
     const userLastMessage = userMessages.pop()
 
-    const chat = geminiModel.startChat({
+    const history: Content[] = []
-      history: userMessages.map((message) => ({
-        role: message.role === 'user' ? 'user' : 'model',
-        parts: [{ text: message.content }]
-      }))
-    })
 
-    const userMessagesStream = await chat.sendMessageStream(userLastMessage?.content!)
+    for (const message of userMessages) {
+      history.push({
+        role: message.role === 'user' ? 'user' : 'model',
+        parts: await this.getMessageParts(message.message)
+      })
+    }
+
+    const chat = geminiModel.startChat({ history })
+    const message = await this.getMessageParts(userLastMessage?.message!)
+
+    const userMessagesStream = await chat.sendMessageStream(message)
 
     for await (const chunk of userMessagesStream.stream) {
       if (window.keyv.get(EVENT_NAMES.CHAT_COMPLETION_PAUSED)) break
@@ -84,7 +111,7 @@ export default class GeminiProvider extends BaseProvider {
     return response.text()
   }
 
-  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
+  public async summaries(messages: Message[], assistant: Assistant): Promise<string> {
     const model = getTopNamingModel() || assistant.model || getDefaultModel()
 
     const userMessages = takeRight(messages, 5).map((message) => ({
@@ -119,6 +146,18 @@ export default class GeminiProvider extends BaseProvider {
     return response.text()
   }
 
+  public async generateText({ prompt, content }: { prompt: string; content: string }): Promise<string> {
+    const model = getDefaultModel()
+    const systemMessage = { role: 'system', content: prompt }
+
+    const geminiModel = this.sdk.getGenerativeModel({ model: model.id })
+
+    const chat = await geminiModel.startChat({ systemInstruction: systemMessage.content })
+    const { response } = await chat.sendMessage(content)
+
+    return response.text()
+  }
+
   public async suggestions(): Promise<Suggestion[]> {
     return []
   }

src/renderer/src/providers/OpenAIProvider.ts

@@ -1,8 +1,9 @@
 import { isLocalAi } from '@renderer/config/env'
 import { getAssistantSettings, getDefaultModel, getTopNamingModel } from '@renderer/services/assistant'
 import { EVENT_NAMES } from '@renderer/services/event'
+import { filterContextMessages, filterMessages } from '@renderer/services/messages'
 import { Assistant, Message, Provider, Suggestion } from '@renderer/types'
-import { fileToBase64, removeQuotes } from '@renderer/utils'
+import { removeQuotes } from '@renderer/utils'
 import { first, takeRight } from 'lodash'
 import OpenAI from 'openai'
 import {
@@ -32,13 +33,14 @@ export default class OpenAIProvider extends BaseProvider {
       return message.content
     }
 
-    if (file.type.includes('image')) {
+    if (file.type === 'image') {
+      const base64Data = await window.api.image.base64(file.path)
       return [
         { type: 'text', text: message.content },
         {
           type: 'image_url',
           image_url: {
-            url: await fileToBase64(file)
+            url: base64Data.data
           }
         }
       ]
@@ -57,10 +59,9 @@ export default class OpenAIProvider extends BaseProvider {
     const { contextCount, maxTokens } = getAssistantSettings(assistant)
 
     const systemMessage = assistant.prompt ? { role: 'system', content: assistant.prompt } : undefined
-
     const userMessages: ChatCompletionMessageParam[] = []
 
-    for (const message of takeRight(messages, contextCount + 1)) {
+    for (const message of filterMessages(filterContextMessages(takeRight(messages, contextCount + 1)))) {
       userMessages.push({
         role: message.role,
         content: await this.getMessageContent(message)
@@ -102,7 +103,7 @@ export default class OpenAIProvider extends BaseProvider {
     return response.choices[0].message?.content || ''
   }
 
-  public async summaries(messages: Message[], assistant: Assistant): Promise<string | null> {
+  public async summaries(messages: Message[], assistant: Assistant): Promise<string> {
     const model = getTopNamingModel() || assistant.model || getDefaultModel()
 
     const userMessages = takeRight(messages, 5).map((message) => ({
@@ -127,6 +128,21 @@ export default class OpenAIProvider extends BaseProvider {
     return removeQuotes(response.choices[0].message?.content?.substring(0, 50) || '')
   }
 
+  public async generateText({ prompt, content }: { prompt: string; content: string }): Promise<string> {
+    const model = getDefaultModel()
+
+    const response = await this.sdk.chat.completions.create({
+      model: model.id,
+      stream: false,
+      messages: [
+        { role: 'user', content },
+        { role: 'system', content: prompt }
+      ]
+    })
+
+    return response.choices[0].message?.content || ''
+  }
+
   async suggestions(messages: Message[], assistant: Assistant): Promise<Suggestion[]> {
     const model = assistant.model
 
@@ -177,6 +193,17 @@ export default class OpenAIProvider extends BaseProvider {
   public async models(): Promise<OpenAI.Models.Model[]> {
     try {
       const response = await this.sdk.models.list()
+
+      if (this.provider.id === 'github') {
+        // @ts-ignore key is not typed
+        return response.body.map((model) => ({
+          id: model.name,
+          description: model.summary,
+          object: 'model',
+          owned_by: model.publisher
+        }))
+      }
+
       return response.data
     } catch (error) {
       return []

src/renderer/src/services/api.ts

@@ -61,7 +61,7 @@ export async function fetchChatCompletion({
   }, 1000)
 
   try {
-    await AI.completions(filterMessages(messages), assistant, ({ text, usage }) => {
+    await AI.completions(messages, assistant, ({ text, usage }) => {
       message.content = message.content + text || ''
       message.usage = usage
       onResponse({ ...message, status: 'pending' })
@@ -129,6 +129,23 @@ export async function fetchMessagesSummary({ messages, assistant }: { messages:
   }
 }
 
+export async function fetchGenerate({ prompt, content }: { prompt: string; content: string }): Promise<string> {
+  const model = getDefaultModel()
+  const provider = getProviderByModel(model)
+
+  if (!hasApiKey(provider)) {
+    return ''
+  }
+
+  const AI = new AiProvider(provider)
+
+  try {
+    return await AI.generateText({ prompt, content })
+  } catch (error: any) {
+    return ''
+  }
+}
+
 export async function fetchSuggestions({
   messages,
   assistant
@@ -153,7 +170,7 @@ export async function fetchSuggestions({
   }
 
   try {
-    return await AI.suggestions(messages, assistant)
+    return await AI.suggestions(filterMessages(messages), assistant)
   } catch (error: any) {
     return []
   }

src/renderer/src/services/assistant.ts

@@ -15,9 +15,15 @@ export function getDefaultAssistant(): Assistant {
   }
 }
 
+export function getDefaultAssistantSettings() {
+  return store.getState().assistants.defaultAssistant.settings
+}
+
 export function getDefaultTopic(): Topic {
   return {
     id: uuid(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
     name: i18n.t('chat.default.topic.name'),
     messages: []
   }
@@ -82,8 +88,9 @@ export function covertAgentToAssistant(agent: Agent): Assistant {
   return {
     ...getDefaultAssistant(),
     ...agent,
+    id: agent.group === 'system' ? uuid() : String(agent.id),
     name: getAssistantNameWithAgent(agent),
-    id: agent.group === 'system' ? uuid() : String(agent.id)
+    settings: getDefaultAssistantSettings()
   }
 }
 

src/renderer/src/services/backup.ts

@@ -63,6 +63,7 @@ export async function reset() {
       window.modal.confirm({
         title: i18n.t('message.reset.double.confirm.title'),
         content: i18n.t('message.reset.double.confirm.content'),
+        centered: true,
         onOk: async () => {
           await localStorage.clear()
           await localforage.clear()

src/renderer/src/services/event.ts

@@ -12,7 +12,9 @@ export const EVENT_NAMES = {
   REGENERATE_MESSAGE: 'REGENERATE_MESSAGE',
   CHAT_COMPLETION_PAUSED: 'CHAT_COMPLETION_PAUSED',
   ESTIMATED_TOKEN_COUNT: 'ESTIMATED_TOKEN_COUNT',
+  SHOW_ASSISTANTS: 'SHOW_ASSISTANTS',
   SHOW_CHAT_SETTINGS: 'SHOW_CHAT_SETTINGS',
   SHOW_TOPIC_SIDEBAR: 'SHOW_TOPIC_SIDEBAR',
-  SWITCH_TOPIC_SIDEBAR: 'SWITCH_TOPIC_SIDEBAR'
+  SWITCH_TOPIC_SIDEBAR: 'SWITCH_TOPIC_SIDEBAR',
+  NEW_CONTEXT: 'NEW_CONTEXT'
 }

src/renderer/src/services/file.ts

@@ -0,0 +1,57 @@
+import db from '@renderer/databases'
+import { FileType } from '@renderer/types'
+
+class FileManager {
+  static async selectFiles(options?: Electron.OpenDialogOptions): Promise<FileType[] | null> {
+    const files = await window.api.file.select(options)
+    return files
+  }
+
+  static async uploadFile(file: FileType): Promise<FileType> {
+    const uploadFile = await window.api.file.upload(file)
+    const fileRecord = await db.files.get(uploadFile.id)
+
+    if (fileRecord) {
+      await db.files.update(fileRecord.id, { ...fileRecord, count: fileRecord.count + 1 })
+      return fileRecord
+    }
+
+    await db.files.add(uploadFile)
+
+    return uploadFile
+  }
+
+  static async uploadFiles(files: FileType[]): Promise<FileType[]> {
+    return Promise.all(files.map((file) => this.uploadFile(file)))
+  }
+
+  static async getFile(id: string): Promise<FileType | undefined> {
+    return db.files.get(id)
+  }
+
+  static async deleteFile(id: string): Promise<void> {
+    const file = await this.getFile(id)
+
+    if (!file) {
+      return
+    }
+
+    if (file.count > 1) {
+      await db.files.update(id, { ...file, count: file.count - 1 })
+      return
+    }
+
+    db.files.delete(id)
+    await window.api.file.delete(id + file.ext)
+  }
+
+  static async deleteFiles(ids: string[]): Promise<void> {
+    await Promise.all(ids.map((id) => this.deleteFile(id)))
+  }
+
+  static async allFiles(): Promise<FileType[]> {
+    return db.files.toArray()
+  }
+}
+
+export default FileManager

src/renderer/src/services/messages.ts

@@ -1,11 +1,38 @@
+import { DEFAULT_CONEXTCOUNT } from '@renderer/config/constant'
 import { Assistant, Message } from '@renderer/types'
 import { GPTTokens } from 'gpt-tokens'
 import { isEmpty, takeRight } from 'lodash'
 
 import { getAssistantSettings } from './assistant'
+import FileManager from './file'
 
 export const filterMessages = (messages: Message[]) => {
-  return messages.filter((message) => message.type !== '@').filter((message) => !isEmpty(message.content.trim()))
+  return messages
+    .filter((message) => !['@', 'clear'].includes(message.type!))
+    .filter((message) => !isEmpty(message.content.trim()))
+}
+
+export function filterContextMessages(messages: Message[]): Message[] {
+  const clearIndex = messages.findLastIndex((message) => message.type === 'clear')
+
+  if (clearIndex === -1) {
+    return messages
+  }
+
+  return messages.slice(clearIndex + 1)
+}
+
+export function getContextCount(assistant: Assistant, messages: Message[]) {
+  const contextCount = assistant?.settings?.contextCount ?? DEFAULT_CONEXTCOUNT
+  const _messages = takeRight(messages, contextCount)
+  const clearIndex = _messages.findLastIndex((message) => message.type === 'clear')
+  const messagesCount = _messages.length
+
+  if (clearIndex === -1) {
+    return contextCount
+  }
+
+  return messagesCount - (clearIndex + 1)
 }
 
 export function estimateInputTokenCount(text: string) {
@@ -24,7 +51,7 @@ export function estimateHistoryTokenCount(assistant: Assistant, msgs: Message[])
     model: 'gpt-4o',
     messages: [
       { role: 'system', content: assistant.prompt },
-      ...filterMessages(takeRight(msgs, contextCount)).map((message) => ({
+      ...filterMessages(filterContextMessages(takeRight(msgs, contextCount))).map((message) => ({
         role: message.role,
         content: message.content
       }))
@@ -33,3 +60,7 @@ export function estimateHistoryTokenCount(assistant: Assistant, msgs: Message[])
 
   return all.usedTokens - 7
 }
+
+export function deleteMessageFiles(message: Message) {
+  message.files && FileManager.deleteFiles(message.files.map((f) => f.id))
+}

src/renderer/src/services/model.ts

@@ -0,0 +1,16 @@
+import store from '@renderer/store'
+import { Model } from '@renderer/types'
+import { pick } from 'lodash'
+
+export const getModelUniqId = (m?: Model) => {
+  return m?.id ? JSON.stringify(pick(m, ['id', 'provider'])) : ''
+}
+
+export const hasModel = (m?: Model) => {
+  const allModels = store
+    .getState()
+    .llm.providers.map((p) => p.models)
+    .flat()
+
+  return allModels.find((model) => model.id === m?.id)
+}

src/renderer/src/services/storage.ts

@@ -2,6 +2,8 @@ import { Topic } from '@renderer/types'
 import { convertToBase64 } from '@renderer/utils'
 import localforage from 'localforage'
 
+import { deleteMessageFiles } from './messages'
+
 const IMAGE_PREFIX = 'image://'
 
 export default class LocalStorage {
@@ -15,12 +17,23 @@ export default class LocalStorage {
   }
 
   static async removeTopic(id: string) {
+    const messages = await this.getTopicMessages(id)
+
+    for (const message of messages) {
+      await deleteMessageFiles(message)
+    }
+
     localforage.removeItem(`topic:${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 localforage.setItem(`topic:${id}`, topic)
     }

src/renderer/src/store/assistants.ts

@@ -44,11 +44,14 @@ const assistantsSlice = createSlice({
       )
     },
     addTopic: (state, action: PayloadAction<{ assistantId: string; topic: Topic }>) => {
+      const topic = action.payload.topic
+      topic.createdAt = new Date().toISOString()
+      topic.updatedAt = new Date().toISOString()
       state.assistants = state.assistants.map((assistant) =>
         assistant.id === action.payload.assistantId
           ? {
               ...assistant,
-              topics: uniqBy([action.payload.topic, ...assistant.topics], 'id')
+              topics: uniqBy([topic, ...assistant.topics], 'id')
             }
           : assistant
       )
@@ -64,13 +67,13 @@ const assistantsSlice = createSlice({
       )
     },
     updateTopic: (state, action: PayloadAction<{ assistantId: string; topic: Topic }>) => {
+      const newTopic = action.payload.topic
+      newTopic.updatedAt = new Date().toISOString()
       state.assistants = state.assistants.map((assistant) =>
         assistant.id === action.payload.assistantId
           ? {
               ...assistant,
-              topics: assistant.topics.map((topic) =>
+              topics: assistant.topics.map((topic) => (topic.id === newTopic.id ? newTopic : topic))
-                topic.id === action.payload.topic.id ? action.payload.topic : topic
-              )
             }
           : assistant
       )

src/renderer/src/store/index.ts

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

src/renderer/src/store/llm.ts

@@ -77,6 +77,15 @@ const initialState: LlmState = {
       isSystem: true,
       enabled: false
     },
+    {
+      id: 'github',
+      name: 'Github Models',
+      apiKey: '',
+      apiHost: 'https://models.inference.ai.azure.com/',
+      models: SYSTEM_MODELS.github,
+      isSystem: true,
+      enabled: false
+    },
     {
       id: 'yi',
       name: 'Yi',

src/renderer/src/store/migrate.ts

@@ -1,7 +1,8 @@
 import { SYSTEM_MODELS } from '@renderer/config/models'
 import i18n from '@renderer/i18n'
 import { Assistant } from '@renderer/types'
-import { isEmpty } from 'lodash'
+import localforage from 'localforage'
+import { isEmpty, pick } from 'lodash'
 import { createMigrate } from 'redux-persist'
 
 import { RootState } from '.'
@@ -363,6 +364,61 @@ const migrateConfig = {
         ]
       }
     }
+  },
+  '23': (state: RootState) => {
+    return {
+      ...state,
+      settings: {
+        ...state.settings,
+        showTopics: true,
+        windowStyle: 'transparent'
+      }
+    }
+  },
+  '24': async (state: RootState) => {
+    for (const key of await localforage.keys()) {
+      if (key.startsWith('topic:')) {
+        localforage.getItem(key).then((topic) => localforage.setItem(key, pick(topic, ['id', 'messages'])))
+      }
+    }
+    return {
+      ...state,
+      assistants: {
+        ...state.assistants,
+        assistants: state.assistants.assistants.map((assistant) => ({
+          ...assistant,
+          topics: assistant.topics.map((topic) => ({
+            ...topic,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+          }))
+        }))
+      },
+      settings: {
+        ...state.settings,
+        topicPosition: 'right'
+      }
+    }
+  },
+  '25': (state: RootState) => {
+    return {
+      ...state,
+      llm: {
+        ...state.llm,
+        providers: [
+          ...state.llm.providers,
+          {
+            id: 'github',
+            name: 'Github Models',
+            apiKey: '',
+            apiHost: 'https://models.inference.ai.azure.com/',
+            models: SYSTEM_MODELS.github,
+            isSystem: true,
+            enabled: false
+          }
+        ]
+      }
+    }
   }
 }
 

src/renderer/src/store/runtime.ts

@@ -5,12 +5,14 @@ export interface RuntimeState {
   avatar: string
   generating: boolean
   minappShow: boolean
+  searching: boolean
 }
 
 const initialState: RuntimeState = {
   avatar: UserAvatar,
   generating: false,
-  minappShow: false
+  minappShow: false,
+  searching: false
 }
 
 const runtimeSlice = createSlice({
@@ -25,10 +27,13 @@ const runtimeSlice = createSlice({
     },
     setMinappShow: (state, action: PayloadAction<boolean>) => {
       state.minappShow = action.payload
+    },
+    setSearching: (state, action: PayloadAction<boolean>) => {
+      state.searching = action.payload
     }
   }
 })
 
-export const { setAvatar, setGenerating, setMinappShow } = runtimeSlice.actions
+export const { setAvatar, setGenerating, setMinappShow, setSearching } = runtimeSlice.actions
 
 export default runtimeSlice.reducer

src/renderer/src/store/settings.ts

@@ -1,15 +1,11 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { ThemeMode } from '@renderer/types'
 
 export type SendMessageShortcut = 'Enter' | 'Shift+Enter'
 
-export enum ThemeMode {
-  light = 'light',
-  dark = 'dark',
-  auto = 'auto'
-}
-
 export interface SettingsState {
   showAssistants: boolean
+  showTopics: boolean
   sendMessageShortcut: SendMessageShortcut
   language: string
   proxyUrl?: string
@@ -18,11 +14,14 @@ export interface SettingsState {
   messageFont: 'system' | 'serif'
   showInputEstimatedTokens: boolean
   theme: ThemeMode
+  windowStyle: 'transparent' | 'opaque'
   fontSize: number
+  topicPosition: 'left' | 'right'
 }
 
 const initialState: SettingsState = {
   showAssistants: true,
+  showTopics: true,
   sendMessageShortcut: 'Enter',
   language: navigator.language,
   proxyUrl: undefined,
@@ -31,16 +30,27 @@ const initialState: SettingsState = {
   messageFont: 'system',
   showInputEstimatedTokens: false,
   theme: ThemeMode.light,
-  fontSize: 14
+  windowStyle: 'opaque',
+  fontSize: 14,
+  topicPosition: 'right'
 }
 
 const settingsSlice = createSlice({
   name: 'settings',
   initialState,
   reducers: {
+    setShowAssistants: (state, action: PayloadAction<boolean>) => {
+      state.showAssistants = action.payload
+    },
     toggleShowAssistants: (state) => {
       state.showAssistants = !state.showAssistants
     },
+    setShowTopics: (state, action: PayloadAction<boolean>) => {
+      state.showTopics = action.payload
+    },
+    toggleShowTopics: (state) => {
+      state.showTopics = !state.showTopics
+    },
     setSendMessageShortcut: (state, action: PayloadAction<SendMessageShortcut>) => {
       state.sendMessageShortcut = action.payload
     },
@@ -67,12 +77,22 @@ const settingsSlice = createSlice({
     },
     setFontSize: (state, action: PayloadAction<number>) => {
       state.fontSize = action.payload
+    },
+    setWindowStyle: (state, action: PayloadAction<'transparent' | 'opaque'>) => {
+      state.windowStyle = action.payload
+      console.log(state.windowStyle)
+    },
+    setTopicPosition: (state, action: PayloadAction<'left' | 'right'>) => {
+      state.topicPosition = action.payload
     }
   }
 })
 
 export const {
+  setShowAssistants,
   toggleShowAssistants,
+  setShowTopics,
+  toggleShowTopics,
   setSendMessageShortcut,
   setLanguage,
   setProxyUrl,
@@ -81,7 +101,9 @@ export const {
   setMessageFont,
   setShowInputEstimatedTokens,
   setTheme,
-  setFontSize
+  setFontSize,
+  setWindowStyle,
+  setTopicPosition
 } = settingsSlice.actions
 
 export default settingsSlice.reducer

src/renderer/src/types/index.ts

@@ -27,15 +27,17 @@ export type Message = {
   createdAt: string
   status: 'sending' | 'pending' | 'success' | 'paused' | 'error'
   modelId?: string
-  files?: File[]
+  files?: FileType[]
   images?: string[]
   usage?: OpenAI.Completions.CompletionUsage
-  type?: 'text' | '@'
+  type?: 'text' | '@' | 'clear'
 }
 
 export type Topic = {
   id: string
   name: string
+  createdAt: string
+  updatedAt: string
   messages: Message[]
 }
 
@@ -79,7 +81,34 @@ export type Suggestion = {
 }
 
 export type MinAppType = {
+  id?: string | number
   name: string
   logo: string
   url: string
 }
+
+export interface FileType {
+  id: string
+  name: string
+  origin_name: string
+  path: string
+  size: number
+  ext: string
+  type: FileTypes
+  created_at: Date
+  count: number
+}
+
+export enum FileTypes {
+  IMAGE = 'image',
+  VIDEO = 'video',
+  AUDIO = 'audio',
+  DOCUMENT = 'document',
+  OTHER = 'other'
+}
+
+export enum ThemeMode {
+  light = 'light',
+  dark = 'dark',
+  auto = 'auto'
+}

src/renderer/src/utils/index.ts

@@ -1,5 +1,6 @@
 import { Model } from '@renderer/types'
 import imageCompression from 'browser-image-compression'
+// @ts-ignore next-line`
 import { v4 as uuidv4 } from 'uuid'
 
 export const runAsyncFunction = async (fn: () => void) => {
@@ -224,17 +225,7 @@ export function getBriefInfo(text: string, maxLength: number = 50): string {
   return truncatedText + '...'
 }
 
-export async function fileToBase64(file: File): Promise<string> {
+export function removeTrailingDoubleSpaces(markdown: string): string {
-  return new Promise((resolve, reject) => {
+  // 使用正则表达式匹配末尾的两个空格，并替换为空字符串
-    try {
+  return markdown.replace(/ {2}$/gm, '')
-      const reader = new FileReader()
-      reader.onload = (e: ProgressEvent<FileReader>) => {
-        const result = e.target?.result
-        resolve(typeof result === 'string' ? result : '')
-      }
-      reader.readAsDataURL(file)
-    } catch (error: any) {
-      reject(error)
-    }
-  })
 }

tsconfig.node.json

@@ -5,11 +5,20 @@
     "src/main/**/*",
     "src/preload/**/*",
     "src/main/env.d.ts",
+    "src/renderer/src/types/index.ts"
   ],
   "compilerOptions": {
     "composite": true,
     "types": [
       "electron-vite/node"
-    ]
+    ],
+    "paths": {
+      "@types": [
+        "./src/renderer/src/types/index.ts"
+      ],
+      "@main/*": [
+        "./src/main/*"
+      ]
+    }
   }
 }