chore(version): 0.8.9

feat: remove image compress
refactor: main code
2024-11-03 01:26:23 +08:00 · 2024-11-03 01:26:00 +08:00 · 2024-11-02 23:32:59 +08:00 · 2024-11-02 21:45:23 +08:00 · 2024-11-02 15:30:41 +08:00 · 2024-11-02 15:13:43 +08:00
137 changed files with 13498 additions and 1821 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,3 +5,4 @@ LICENSE.md
 tsconfig.json
 tsconfig.*.json
 CHANGELOG*.md
+agents.json
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -1,32 +1,29 @@
-This software is licensed under the **Apache License 2.0**. In addition to the terms of the Apache License 2.0, the following additional terms apply to the use of Cherry Studio:
+# Code of Conduct

-**I. Commercial Use License**
+## Our Pledge

-1. **Free Commercial Use**: Users can use the software for commercial purposes without modifying the code.
-2. **Commercial License Required**: A commercial license is required if any of the following conditions are met:
-   1. You modify, develop, or alter the software, including but not limited to changes to the application name, logo, code, or functionality.
-   2. You provide multi-tenant services to enterprise customers with 10 or more users.
-   3. You pre-install or integrate the software into hardware devices or products and bundle it for sale.
-   4. You are engaging in large-scale procurement for government or educational institutions, especially involving security, data privacy, or other sensitive requirements.
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.

-**II. Contributor Agreement**
+## Our Standards

-As a contributor to Cherry Studio, you agree to the following:
+Examples of behavior that contributes to creating a positive environment include:

-1. **License Adjustment**: The producer reserves the right to adjust the open-source license as needed, making it stricter or more lenient.
-2. **Commercial Use**: Any code you contribute may be used for commercial purposes, including but not limited to cloud business operations.
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members

-**III. Other Terms**
+Examples of unacceptable behavior by participants include:

-1. The interpretation of these terms is subject to the discretion of Cherry Studio developers.
-2. These terms may be updated, and users will be notified through the software when changes occur.
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting

-For any questions or to request a commercial license, please contact the Cherry Studio development team.
+## Our Responsibilities

-Apart from the specific conditions mentioned above, all other rights and restrictions follow the Apache License 2.0. Detailed information about the Apache License 2.0 can be found at http://www.apache.org/licenses/LICENSE-2.0.
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

---
-
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,72 +1,45 @@
-## Cherry Studio目录结构和功能
+# Cherry Studio 贡献者指南

-### 1. `/src`: 主要源代码目录
-   - ** `/main`**: Electron主进程相关代码
-     - 负责应用的生命周期管理、窗口创建、IPC通信等
-   - ** `/renderer`**: Electron渲染进程相关代码
-     - 包含用户界面的实现，使用TypeScript和SCSS
-   - ** `/preload`**: 预加载脚本
-     - 用于在渲染进程中安全地暴露主进程功能
-   - ** `/components`**: React组件
-     - 可复用的UI组件，如对话框、输入框等
-   - ** `/pages`**: 应用的主要页面
-     - 如聊天界面、设置页面等
-   - ** `/store`**: 状态管理
-     - 可能使用Redux或MobX来管理应用状态
-   - ** `/utils`**: 工具函数
-     - 包含各种辅助函数和工具类
-   - ** `/styles`**: 全局样式文件
-     - 包含SCSS文件，定义全局样式和主题
+欢迎来到 Cherry Studio 的贡献者社区！我们致力于将 Cherry Studio 打造成一个长期提供价值的项目，并希望邀请更多的开发者加入我们的行列。无论您是经验丰富的开发者还是刚刚起步的初学者，您的贡献都将帮助我们更好地服务用户，提升软件质量。

-### 2. `/public`: 静态资源目录
-   - 包含图标、字体等静态文件
+## 如何贡献

-### 3. `/electron`: Electron相关配置
-   - 包含Electron的构建和打包配置
+以下是您可以参与的几种方式：

-### 4. `/scripts`: 构建和开发脚本
-   - 包含npm脚本，用于开发、构建和部署
+1. **贡献代码**：帮助我们开发新功能或优化现有代码。请确保您的代码符合我们的编码标准，并通过所有测试。

-### 5. `/types`: TypeScript类型定义
-   - 包含自定义的类型定义文件
+2. **修复 BUG**：如果您发现了 BUG，欢迎提交修复方案。请在提交前确认问题已被解决，并附上相关测试。

-### 6. `/tests`: 测试文件目录
-   - 包含单元测试和集成测试
+3. **维护 Issue**：协助我们管理 GitHub 上的 issue，帮助标记、分类和解决问题。

-### 7. `/docs`: 文档目录
-   - 包含项目文档、API文档等
+4. **产品设计**：参与产品设计讨论，帮助我们改进用户体验和界面设计。

-### 8. `/config`: 配置文件目录
-   - 包含各种配置文件，如webpack配置、环境变量等
+5. **编写文档**：帮助我们完善用户手册、API 文档和开发者指南。

-### 9. `/migrations`: 数据库迁移文件
-   - 由于使用了Sequelize，这里可能包含数据库结构的变更记录
+6. **社区维护**：参与社区讨论，帮助解答用户问题，促进社区活跃。

-### 10. `/models`: 数据模型
-    - 定义Sequelize的数据模型，对应数据库表结构
+7. **推广使用**：通过博客、社交媒体等渠道推广 Cherry Studio，吸引更多用户和开发者。

-## 主要功能实现
+## 开始贡献

-### 1. LLM提供商集成
-   - 可能在`/src/utils`或`/src/services`中实现与不同LLM API的集成
+1. **Fork 仓库**：在 GitHub 上 fork 我们的仓库，并将其克隆到本地。

-### 2. 多助手和多主题支持
-   - 在`/src/store`中管理助手和主题的状态
-   - 在`/src/components`中实现相关的UI组件
+2. **创建分支**：为您要进行的更改创建一个新的分支。

-### 3. 多模型对话
-   - 在`/src/pages`的聊天界面中实现
-   - 可能使用`/src/store`来管理对话状态
+3. **提交更改**：在本地进行更改并提交。请确保您的提交信息清晰明了。

-### 4. 拖放排序
-   - 在`/src/components`中实现相关的可拖拽组件
+4. **发起 Pull Request**：将您的更改推送到 GitHub，并发起 Pull Request。请描述您的更改内容和原因。

-### 5. 代码高亮
-   - 可能使用第三方库，如Prism.js，集成在`/src/components`中
+### 其他建议

-### 6. Mermaid图表支持
-   - 在`/src/components`中集成Mermaid库
+- **联系开发者**：在提交 PR 之前，您可以先和开发者进行联系，共同探讨或者获取帮助。
+- **成为核心开发者**：如果您能够稳定为项目贡献，恭喜您可以成为项目核心开发者，获取到项目成员身份。

-### 7. 数据持久化
-   - 使用Sequelize在`/models`中定义数据模型
-   - 在`/migrations`中管理数据库结构变更
+## 联系我们
+
+如果您有任何问题或建议，欢迎通过以下方式联系我们：
+
+- 微信：kangfenmao
+- [GitHub Issues](https://github.com/kangfenmao/cherry-studio/issues)
+
+感谢您的支持和贡献！我们期待与您一起将 Cherry Studio 打造成更好的产品。
--- a/README.ja.md
+++ b/README.ja.md
@@ -1,91 +0,0 @@
-<div align="center">
-  <a href="https://github.com/kangfenmao/cherry-studio/releases">
-    <img src="https://github.com/kangfenmao/cherry-studio/blob/main/build/icon.png?raw=true" width="150" height="150" alt="banner" />
-  </a>
-</div>
-<div align="center">
-  <a href="./README.md">English</a> | <a href="./README.zh.md">中文</a> | 日本語
-</div>
-
-# 🍒 Cherry Studio
-
-![](https://github.com/user-attachments/assets/7b4f2f78-5cbe-4be8-9aec-f98d8405a505)
-
-Cherry Studioは、複数のLLMプロバイダーをサポートするデスクトップクライアントで、Windows、Mac、Linuxで利用可能です。
-
-👏 [Telegramグループ](https://t.me/CherryStudioAI)に参加しましょう
-
-# 🌠 スクリーンショット
-
-![](https://github.com/user-attachments/assets/28585d83-4bf0-4714-b561-8c7bf57cc600)
-![](https://github.com/user-attachments/assets/8576863a-f632-4776-bc12-657eeced9da3)
-![](https://github.com/user-attachments/assets/790790d7-b462-48dd-bde1-91c1697a4648)
-
-# 🌟 特徴
-
-<div align="center">
-  <a href="https://www.producthunt.com/posts/cherry-studio?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cherry&#0045;studio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=496640&theme=light" alt="Cherry&#0032;Studio - AI&#0032;Chatbots&#0044;&#0032;AI&#0032;Desktop&#0032;Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-</div>
-
-1. 複数のLLMプロバイダーをサポート。
-2. 複数のアシスタントを作成可能。
-3. 複数のトピックを作成可能。
-4. 同じ会話で複数のモデルを使用して質問に回答可能。
-5. ドラッグアンドドロップでの並べ替えをサポート。
-6. コードハイライト。
-7. Mermaidチャート
-
-# 🖥️ 開発
-
-## IDEの設定
-
-[VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-
-## プロジェクトの設定
-
-### インストール
-
-```bash
-$ yarn
-```
-
-### 開発
-
-```bash
-$ yarn dev
-```
-
-### ビルド
-
-```bash
-# Windowsの場合
-$ yarn build:win
-
-# macOSの場合
-$ yarn build:mac
-
-# Linuxの場合
-$ yarn build:linux
-```
-
-# ⭐️ スター履歴
-
-[![Star History Chart](https://api.star-history.com/svg?repos=kangfenmao/cherry-studio&type=Timeline)](https://star-history.com/#kangfenmao/cherry-studio&Timeline)
-
-# 🚀 コントリビューター
-
-<a href="https://github.com/kangfenmao/cherry-studio/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=kangfenmao/cherry-studio" />
-</a>
-
-# コミュニティ
-
-[Telegram](https://t.me/CherryStudioAI)
-
-# スポンサー
-
-[Buy Me a Coffee](docs/sponsor.md)
-
-# 📃 ライセンス
-
-[LICENSE](./LICENSE)
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
  </a>
 </div>
 <div align="center">
-  English | <a href="./README.zh.md">中文</a> | <a href="./README.ja.md">日本語</a>
+  English | <a href="./docs/README.zh.md">中文</a> | <a href="./docs/README.ja.md">日本語</a>
 </div>

 # 🍒 Cherry Studio
@@ -21,25 +21,47 @@ Cherry Studio is a desktop client that supports for multiple LLM providers, avai
 ![](https://github.com/user-attachments/assets/8576863a-f632-4776-bc12-657eeced9da3)
 ![](https://github.com/user-attachments/assets/790790d7-b462-48dd-bde1-91c1697a4648)

-# 🌟 Features
+# 🌟 Key Features

-<div align="center">
-  <a href="https://www.producthunt.com/posts/cherry-studio?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cherry&#0045;studio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=496640&theme=light" alt="Cherry&#0032;Studio - AI&#0032;Chatbots&#0044;&#0032;AI&#0032;Desktop&#0032;Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-</div>
+1. **Diverse LLM Provider Support**:

-1. Support for Multiple LLM Providers.
-2. Allows creation of multiple Assistants.
-3. Enables creation of multiple topics.
-4. Allows using multiple models to answer questions in the same conversation.
-5. Supports drag-and-drop sorting.
-6. Code highlighting.
-7. Mermaid chart
+   - ☁️ Major LLM Cloud Services: OpenAI, Gemini, Anthropic, and more
+   - 🔗 AI Web Service Integration: Claude, Peplexity, Poe, and others
+   - 💻 Local Model Support with Ollama
+
+2. **AI Assistants & Conversations**:
+
+   - 📚 300+ Pre-configured AI Assistants
+   - 🤖 Custom Assistant Creation
+   - 💬 Multi-model Simultaneous Conversations
+
+3. **Document & Data Processing**:
+
+   - 📄 Support for Text, Images, Office, PDF, and more
+   - ☁️ WebDAV File Management and Backup
+   - 📊 Mermaid Chart Visualization
+   - 💻 Code Syntax Highlighting
+
+4. **Practical Tools Integration**:
+
+   - 🔍 Global Search Functionality
+   - 📝 Topic Management System
+   - 🔤 AI-powered Translation
+   - 🎯 Drag-and-drop Sorting
+   - 🔌 Mini Program Support
+
+5. **Enhanced User Experience**:
+   - 🖥️ Cross-platform Support for Windows, Mac, and Linux
+   - 📦 Ready to Use, No Environment Setup Required
+   - 🎨 Light/Dark Themes and Transparent Window
+   - 📝 Complete Markdown Rendering
+   - 🤲 Easy Content Sharing

 # 🖥️ Develop

 ## IDE Setup

-[VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+[Cursor](https://www.cursor.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

 ## Project Setup

@@ -68,24 +90,52 @@ $ yarn build:mac
 $ yarn build:linux
 ```

-# ⭐️ Star History
+# 🤝 Contributing

-[![Star History Chart](https://api.star-history.com/svg?repos=kangfenmao/cherry-studio&type=Timeline)](https://star-history.com/#kangfenmao/cherry-studio&Timeline)
+We welcome contributions to Cherry Studio! Here are some ways you can contribute:
+
+1. **Contribute Code**: Develop new features or optimize existing code.
+2. **Fix Bugs**: Submit fixes for any bugs you find.
+3. **Maintain Issues**: Help manage GitHub issues.
+4. **Product Design**: Participate in design discussions.
+5. **Write Documentation**: Improve user manuals and guides.
+6. **Community Engagement**: Join discussions and help users.
+7. **Promote Usage**: Spread the word about Cherry Studio.
+
+## Getting Started
+
+1. **Fork the Repository**: Fork and clone it to your local machine.
+2. **Create a Branch**: For your changes.
+3. **Submit Changes**: Commit and push your changes.
+4. **Open a Pull Request**: Describe your changes and reasons.
+
+For more detailed guidelines, please refer to our [Contributing Guide](./CONTRIBUTING.md).
+
+Thank you for your support and contributions!

 # 🚀 Contributors

 <a href="https://github.com/kangfenmao/cherry-studio/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=kangfenmao/cherry-studio" />
 </a>
+<br /><br />

-# Community
+# 🌐 Community

-[Telegram](https://t.me/CherryStudioAI)
+[Telegram](https://t.me/CherryStudioAI) | [Email](mailto:kangfenmao@gmail.com) | [Twitter](https://x.com/kangfenmao)

-# Sponsor
+# 📣 Product Hunt
+
+<a href="https://www.producthunt.com/posts/cherry-studio?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cherry&#0045;studio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=496640&theme=light" alt="Cherry&#0032;Studio - AI&#0032;Chatbots&#0044;&#0032;AI&#0032;Desktop&#0032;Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+# ☕ Sponsor

 [Buy Me a Coffee](docs/sponsor.md)

 # 📃 License

 [LICENSE](./LICENSE)
+
+# ⭐️ Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=kangfenmao/cherry-studio&type=Timeline)](https://star-history.com/#kangfenmao/cherry-studio&Timeline)
--- a/README.zh.md
+++ b/README.zh.md
@@ -1,110 +0,0 @@
-<div align="center">
-  <a href="https://github.com/kangfenmao/cherry-studio/releases">
-    <img src="https://github.com/kangfenmao/cherry-studio/blob/main/build/icon.png?raw=true" width="150" height="150" alt="banner" />
-  </a>
-</div>
-<div align="center">
-  中文 / <a href="https://github.com/kangfenmao/cherry-studio">English</a> / <a href="./README.ja.md">日本語</a>
-</div>
-
-# 🍒 Cherry Studio
-
-![](https://github.com/user-attachments/assets/995910f3-177a-4d1e-97ea-04e3b009ba36)
-
-Cherry Studio 是一款跨平台桌面客户端，支持多个大语言模型（LLM）服务商，兼容 Windows、Mac 和 Linux 系统，并拥丰富的个性化选项与领先的功能设计。
-
-👏 欢迎加入 [Telegram 群组](https://t.me/CherryStudioAI)
-
-# 🌠 界面
-
-<img width="1582" alt="Xnip2024-09-23_15-01-53" src="https://github.com/user-attachments/assets/554aa31b-87b6-49fe-877d-af313e1608b0">
-<img width="1582" alt="Xnip2024-09-23_15-02-27" src="https://github.com/user-attachments/assets/f43fb4c8-194a-4f46-8575-6db2bd136cb9">
-<img width="1582" alt="Xnip2024-09-23_16-12-19" src="https://github.com/user-attachments/assets/82ce3cc1-5a0b-49aa-9fe4-0376d34be1f8">
-<img width="1582" alt="Xnip2024-09-23_16-11-44" src="https://github.com/user-attachments/assets/55e420c8-fc0f-40a0-868e-d75bebeb5af3">
-<img width="1582" alt="Xnip2024-09-23_16-11-50" src="https://github.com/user-attachments/assets/7413384e-a7c7-4525-96ea-ccd395d7e51a">
-<img width="1582" alt="Xnip2024-09-23_16-12-59" src="https://github.com/user-attachments/assets/894b5e97-569f-4471-813c-c48d19455215">
-
-# 🌟 特性
-
-<div align="center">
-  <a href="https://www.producthunt.com/posts/cherry-studio?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cherry&#0045;studio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=496640&theme=light" alt="Cherry&#0032;Studio - AI&#0032;Chatbots&#0044;&#0032;AI&#0032;Desktop&#0032;Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
-</div>
-
-## 😌 轻松上手
-
-🍏Windows，Mac，Linux跨平台支持
-
-📦开箱即用，无需 Python 与 Docker
-
-🤝简洁、友好的界面与交互设计
-
-## 🛠️多样化的 LLM 服务模式支持
-
-☁️ 全面覆盖 LLM 云服务，支持自定义 api key 与模型管理：OpenAI，Gemini，Anthropic，硅基流动...
-
-🔗汇聚流行的 AI Web 服务，并计划通过功能增强提升体验：Claude，Peplexity，Poe，腾讯元宝，知乎直答...
-
-💻支持 Ollama 运行本地模型
-
-## 📲个性化的功能体验
-
-📄完整的 Markdown 与 Mermaid 渲染支持
-
-🤖使用与创建智能体提升工作效率
-
-🔤持续迭代的翻译功能
-
-🤲生成结果支持 Markdown 与图片分享
-
-📎文件与图片上传，RAG 与多模态对话
-
-🎨透明窗口与明暗主题支持
-
-# 🖥️ 开发指南
-
-## 开发环境
-
-[VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-
-## 项目设置
-
-### 安装依赖
-
-```bash
-$ yarn
-```
-
-### 启动开发环境
-
-```bash
-$ yarn dev
-```
-
-### 构建版本
-
-```bash
-# For windows
-$ yarn build:win
-
-# For macOS
-$ yarn build:mac
-
-# For Linux
-$ yarn build:linux
-```
-
-# ⭐️ Star 记录
-
-[![Star History Chart](https://api.star-history.com/svg?repos=kangfenmao/cherry-studio&type=Timeline)](https://star-history.com/#kangfenmao/cherry-studio&Timeline)
-
-# 社区
-
-[Telegram](https://t.me/CherryStudioAI)
-
-# 赞助
-
-[微信赞赏码](docs/sponsor.md)
-
-# 📃 许可证
-
-[LICENSE](./LICENSE)
--- a/docs/README.ja.md
+++ b/docs/README.ja.md
@@ -0,0 +1,140 @@
+<div align="center">
+  <a href="https://github.com/kangfenmao/cherry-studio/releases">
+    <img src="https://github.com/kangfenmao/cherry-studio/blob/main/build/icon.png?raw=true" width="150" height="150" alt="banner" />
+  </a>
+</div>
+<div align="center">
+  <a href="./README.md">English</a> | <a href="./README.zh.md">中文</a> | 日本語
+</div>
+
+# 🍒 Cherry Studio
+
+![](https://github.com/user-attachments/assets/7b4f2f78-5cbe-4be8-9aec-f98d8405a505)
+
+Cherry Studioは、複数のLLMプロバイダーをサポートするデスクトップクライアントで、Windows、Mac、Linuxで利用可能です。
+
+👏 [Telegramグループ](https://t.me/CherryStudioAI)に参加しましょう
+
+# 🌠 スクリーンショット
+
+![](https://github.com/user-attachments/assets/28585d83-4bf0-4714-b561-8c7bf57cc600)
+![](https://github.com/user-attachments/assets/8576863a-f632-4776-bc12-657eeced9da3)
+![](https://github.com/user-attachments/assets/790790d7-b462-48dd-bde1-91c1697a4648)
+
+# 🌟 主な機能
+
+1. **多様な LLM サービス対応**：
+
+   - ☁️ 主要な LLM クラウドサービス対応：OpenAI、Gemini、Anthropic など
+   - 🔗 AI Web サービス統合：Claude、Peplexity、Poe など
+   - 💻 Ollama によるローカルモデル実行対応
+
+2. **AI アシスタントと対話**：
+
+   - 📚 300+ の事前設定済み AI アシスタント
+   - 🤖 カスタム AI アシスタントの作成
+   - 💬 複数モデルでの同時対話機能
+
+3. **文書とデータ処理**：
+
+   - 📄 テキスト、画像、Office、PDF など多様な形式対応
+   - ☁️ WebDAV によるファイル管理とバックアップ
+   - 📊 Mermaid による図表作成
+   - 💻 コードハイライト機能
+
+4. **実用的なツール統合**：
+
+   - 🔍 グローバル検索機能
+   - 📝 トピック管理システム
+   - 🔤 AI による翻訳機能
+   - 🎯 ドラッグ＆ドロップによる整理
+   - 🔌 ミニプログラム対応
+
+5. **優れたユーザー体験**：
+   - 🖥️ Windows、Mac、Linux のクロスプラットフォーム対応
+   - 📦 環境構築不要ですぐに使用可能
+   - 🎨 ライト/ダークテーマと透明ウィンドウ対応
+   - 📝 完全な Markdown レンダリング
+   - 🤲 簡単な共有機能
+
+# 🖥️ 開発
+
+## IDEの設定
+
+[Cursor](https://www.cursor.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+
+## プロジェクトの設定
+
+### インストール
+
+```bash
+$ yarn
+```
+
+### 開発
+
+```bash
+$ yarn dev
+```
+
+### ビルド
+
+```bash
+# Windowsの場合
+$ yarn build:win
+
+# macOSの場合
+$ yarn build:mac
+
+# Linuxの場合
+$ yarn build:linux
+```
+
+# 🤝 貢献
+
+Cherry Studioへの貢献を歓迎します！以下の方法で貢献できます：
+
+1. **コードの貢献**：新機能を開発するか、既存のコードを最適化します。
+2. **バグの修正**：見つけたバグを修正します。
+3. **問題の管理**：GitHubの問題を管理するのを手伝います。
+4. **製品デザイン**：デザインの議論に参加します。
+5. **ドキュメントの作成**：ユーザーマニュアルやガイドを改善します。
+6. **コミュニティの参加**：ディスカッションに参加し、ユーザーを支援します。
+7. **使用の促進**：Cherry Studioを広めます。
+
+## 始め方
+
+1. **リポジトリをフォーク**：フォークしてローカルマシンにクローンします。
+2. **ブランチを作成**：変更のためのブランチを作成します。
+3. **変更を提出**：変更をコミットしてプッシュします。
+4. **プルリクエストを開く**：変更内容と理由を説明します。
+
+詳細なガイドラインについては、[貢献ガイド](./CONTRIBUTING.md)をご覧ください。
+
+ご支援と貢献に感謝します！
+
+# 🚀 コントリビューター
+
+<a href="https://github.com/kangfenmao/cherry-studio/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=kangfenmao/cherry-studio" />
+</a>
+
+# コミュニティ
+
+[Telegram](https://t.me/CherryStudioAI) | [Email](mailto:kangfenmao@gmail.com) | [Twitter](https://x.com/kangfenmao)
+
+# 📣 プロダクトハント
+
+<a href="https://www.producthunt.com/posts/cherry-studio?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cherry&#0045;studio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=496640&theme=light" alt="Cherry&#0032;Studio - AI&#0032;Chatbots&#0044;&#0032;AI&#0032;Desktop&#0032;Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+# スポンサー
+
+[Buy Me a Coffee](sponsor.md)
+
+# 📃 ライセンス
+
+[LICENSE](./LICENSE)
+
+# ⭐️ スター履歴
+
+[![Star History Chart](https://api.star-history.com/svg?repos=kangfenmao/cherry-studio&type=Timeline)](https://star-history.com/#kangfenmao/cherry-studio&Timeline)
--- a/docs/README.zh.md
+++ b/docs/README.zh.md
@@ -0,0 +1,141 @@
+<div align="center">
+  <a href="https://github.com/kangfenmao/cherry-studio/releases">
+    <img src="https://github.com/kangfenmao/cherry-studio/blob/main/build/icon.png?raw=true" width="150" height="150" alt="banner" />
+  </a>
+</div>
+<div align="center">
+  中文 / <a href="https://github.com/kangfenmao/cherry-studio">English</a> / <a href="./README.ja.md">日本語</a>
+</div>
+
+# 🍒 Cherry Studio
+
+![](https://github.com/user-attachments/assets/995910f3-177a-4d1e-97ea-04e3b009ba36)
+
+Cherry Studio 是一款支持多个大语言模型（LLM）服务商的桌面客户端，兼容 Windows、Mac 和 Linux 系统。
+
+👏 欢迎加入 [Telegram 群组](https://t.me/CherryStudioAI)
+
+# 🌠 界面
+
+![](https://github.com/user-attachments/assets/28585d83-4bf0-4714-b561-8c7bf57cc600)
+![](https://github.com/user-attachments/assets/8576863a-f632-4776-bc12-657eeced9da3)
+![](https://github.com/user-attachments/assets/790790d7-b462-48dd-bde1-91c1697a4648)
+
+# 🌟 主要特性
+
+1. **多样化 LLM 服务支持**：
+
+   - ☁️ 支持主流 LLM 云服务：OpenAI、Gemini、Anthropic、硅基流动等
+   - 🔗 集成流行 AI Web 服务：Claude、Peplexity、Poe、腾讯元宝、知乎直答等
+   - 💻 支持 Ollama 本地模型部署
+
+2. **智能助手与对话**：
+
+   - 📚 内置 300+ 预配置 AI 助手
+   - 🤖 支持自定义创建专属助手
+   - 💬 多模型同时对话，获得多样化观点
+
+3. **文档与数据处理**：
+
+   - 📄 支持文本、图片、Office、PDF 等多种格式
+   - ☁️ WebDAV 文件管理与数据备份
+   - 📊 Mermaid 图表可视化
+   - 💻 代码高亮显示
+
+4. **实用工具集成**：
+
+   - 🔍 全局搜索功能
+   - 📝 话题管理系统
+   - 🔤 AI 驱动的翻译功能
+   - 🎯 拖拽排序
+   - 🔌 小程序支持
+
+5. **优质使用体验**：
+   - 🖥️ Windows、Mac、Linux 跨平台支持
+   - 📦 开箱即用，无需配置环境
+   - 🎨 支持明暗主题与透明窗口
+   - 📝 完整的 Markdown 渲染
+   - 🤲 便捷的内容分享功能
+
+# 🖥️ 开发
+
+## IDE 设置
+
+[Cursor](https://www.cursor.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+
+## 项目设置
+
+### 安装
+
+```bash
+$ yarn
+```
+
+### 开发
+
+```bash
+$ yarn dev
+```
+
+### 构建
+
+```bash
+# Windows
+$ yarn build:win
+
+# macOS
+$ yarn build:mac
+
+# Linux
+$ yarn build:linux
+```
+
+# 🤝 贡献
+
+我们欢迎对 Cherry Studio 的贡献！您可以通过以下方式贡献：
+
+1. **贡献代码**：开发新功能或优化现有代码。
+2. **修复错误**：提交您发现的错误修复。
+3. **维护问题**：帮助管理 GitHub 问题。
+4. **产品设计**：参与设计讨论。
+5. **撰写文档**：改进用户手册和指南。
+6. **社区参与**：加入讨论并帮助用户。
+7. **推广使用**：宣传 Cherry Studio。
+
+## 入门
+
+1. **Fork 仓库**：Fork 并克隆到您的本地机器。
+2. **创建分支**：为您的更改创建分支。
+3. **提交更改**：提交并推送您的更改。
+4. **打开 Pull Request**：描述您的更改和原因。
+
+有关更详细的指南，请参阅我们的 [贡献指南](./CONTRIBUTING.md)。
+
+感谢您的支持和贡献！
+
+# 🚀 贡献者
+
+<a href="https://github.com/kangfenmao/cherry-studio/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=kangfenmao/cherry-studio" />
+</a>
+<br /><br />
+
+# 🌐 社区
+
+[Telegram](https://t.me/CherryStudioAI) | [Email](mailto:kangfenmao@gmail.com) | [Twitter](https://x.com/kangfenmao)
+
+# 📣 产品猎人
+
+<a href="https://www.producthunt.com/posts/cherry-studio?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-cherry&#0045;studio" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=496640&theme=light" alt="Cherry&#0032;Studio - AI&#0032;Chatbots&#0044;&#0032;AI&#0032;Desktop&#0032;Client | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
+
+# ☕ 赞助
+
+[微信赞赏码](sponsor.md)
+
+# 📃 许可证
+
+[LICENSE](./LICENSE)
+
+# ⭐️ Star 记录
+
+[![Star History Chart](https://api.star-history.com/svg?repos=kangfenmao/cherry-studio&type=Timeline)](https://star-history.com/#kangfenmao/cherry-studio&Timeline)
--- a/docs/dev/faq.md
+++ b/docs/dev/faq.md
@@ -1,95 +0,0 @@
-# FAQ 文档
-本文档适用于：产品手册、官网页面、课程测验、现场 Q&A。
-
-## 问题1：Cherry Studio 支持哪些操作系统？
- **答案**：Cherry Studio 支持 Windows、Mac 和 Linux 操作系统。
-
-## 问题2：Cherry Studio 的主要功能有哪些？
- **答案**：Cherry Studio 的主要功能包括：
-  1. 支持多个 LLM 提供商
-  2. 允许创建多个助手
-  3. 支持创建多个主题
-  4. 允许在同一对话中使用多个模型来回答问题
-  5. 支持拖放排序
-  6. 代码高亮
-  7. Mermaid 图表支持
-
-## 问题3：Cherry Studio 的主要目录结构是怎样的？
- **答案**：Cherry Studio 的主要目录结构如下：
-  - `/src`: 主要源代码目录
-  - `/build`: 构建相关文件
-  - `/docs`: 文档目录
-  - `/resources`: 资源文件目录
-  - `/scripts`: 脚本文件目录
-
-## 问题4：如何在 Windows 环境下 fork Cherry Studio 并修改部分功能？
- **答案**：在 Windows 环境下 fork Cherry Studio 并修改部分功能的步骤如下：
-  1. 在 GitHub 上 fork Cherry Studio 仓库
-  2. 克隆 fork 的仓库到本地：`git clone https://github.com/your-username/cherry-studio.git`
-  3. 进入项目目录：`cd cherry-studio`
-  4. 安装依赖：`yarn install`
-  5. 修改所需的功能代码
-  6. 测试修改：`yarn dev`
-  7. 提交修改：`git add .` 和 `git commit -m "描述你的修改"`
-  8. 推送到你的 fork 仓库：`git push origin main`
-
-## 问题5：Cherry Studio 使用了哪些主要技术栈？
- **答案**：Cherry Studio 主要使用了以下技术栈：
-  - TypeScript
-  - SCSS
-  - Electron
-  - Vite
-  - Sequelize
-
-## 问题6：如何贡献代码到 Cherry Studio 项目？
- **答案**：贡献代码到 Cherry Studio 项目的步骤如下：
-  1. Fork 项目仓库
-  2. 创建你的特性分支：`git checkout -b feature/AmazingFeature`
-  3. 提交你的修改：`git commit -m 'Add some AmazingFeature'`
-  4. 推送到分支：`git push origin feature/AmazingFeature`
-  5. 打开一个 Pull Request
-
-## 问题7：Cherry Studio 的 `/src` 目录主要包含哪些内容？
- **答案**：Cherry Studio 的 `/src` 目录主要包含以下内容：
-  - 主进程代码（Electron 主进程）
-  - 渲染进程代码（用户界面）
-  - 组件
-  - 工具函数
-  - 状态管理
-  - 样式文件
-
-## 问题8：如何在 Cherry Studio 中添加新的 LLM 提供商？
- **答案**：要在 Cherry Studio 中添加新的 LLM 提供商，你需要：
-  1. 在 `/src/services` 或类似目录下创建新的服务文件
-  2. 实现与新 LLM 提供商 API 的集成
-  3. 在用户界面中添加新提供商的选项
-  4. 更新配置和状态管理以支持新提供商
-
-## 问题9：Cherry Studio 的构建过程是怎样的？
- **答案**：Cherry Studio 的构建过程主要包括：
-  1. 使用 Vite 构建前端资源
-  2. 使用 Electron Builder 打包桌面应用
-  3. 根据不同平台（Windows、Mac、Linux）生成相应的安装包
-
-## 问题10：如何在 Cherry Studio 中实现新的 UI 主题？
- **答案**：在 Cherry Studio 中实现新的 UI 主题的步骤：
-  1. 在 `/src/styles` 目录下创建新的主题 SCSS 文件
-  2. 定义新主题的颜色变量和样式
-  3. 在主样式文件中导入新主题
-  4. 更新主题切换逻辑以包含新主题
-  5. 在用户界面中添加新主题的选项
-
-## 问题11：Cherry Studio 如何处理多语言支持？
- **答案**：Cherry Studio 可能通过以下方式处理多语言支持：
-  1. 使用 i18n 库进行国际化
-  2. 在 `/src/locales` 或类似目录下存储不同语言的翻译文件
-  3. 实现语言切换功能
-  4. 在组件中使用翻译函数或组件来显示多语言文本
-
-## 问题12：如何为 Cherry Studio 编写单元测试？
- **答案**：为 Cherry Studio 编写单元测试的步骤：
-  1. 在 `/tests` 目录下创建测试文件
-  2. 使用测试框架（如 Jest）编写测试用例
-  3. 模拟 Electron 环境和其他依赖
-  4. 运行测试命令：`yarn test`
-  5. 确保测试覆盖主要功能和组件
--- a/docs/dev/structure.md
+++ b/docs/dev/structure.md
@@ -1,72 +0,0 @@
-## Cherry Studio目录结构和功能
-
-### 1. `/src`: 主要源代码目录
-   - ** `/main`**: Electron主进程相关代码
-     - 负责应用的生命周期管理、窗口创建、IPC通信等
-   - ** `/renderer`**: Electron渲染进程相关代码
-     - 包含用户界面的实现，使用TypeScript和SCSS
-   - ** `/preload`**: 预加载脚本
-     - 用于在渲染进程中安全地暴露主进程功能
-   - ** `/components`**: React组件
-     - 可复用的UI组件，如对话框、输入框等
-   - ** `/pages`**: 应用的主要页面
-     - 如聊天界面、设置页面等
-   - ** `/store`**: 状态管理
-     - 可能使用Redux或MobX来管理应用状态
-   - ** `/utils`**: 工具函数
-     - 包含各种辅助函数和工具类
-   - ** `/styles`**: 全局样式文件
-     - 包含SCSS文件，定义全局样式和主题
-
-### 2. `/public`: 静态资源目录
-   - 包含图标、字体等静态文件
-
-### 3. `/electron`: Electron相关配置
-   - 包含Electron的构建和打包配置
-
-### 4. `/scripts`: 构建和开发脚本
-   - 包含npm脚本，用于开发、构建和部署
-
-### 5. `/types`: TypeScript类型定义
-   - 包含自定义的类型定义文件
-
-### 6. `/tests`: 测试文件目录
-   - 包含单元测试和集成测试
-
-### 7. `/docs`: 文档目录
-   - 包含项目文档、API文档等
-
-### 8. `/config`: 配置文件目录
-   - 包含各种配置文件，如webpack配置、环境变量等
-
-### 9. `/migrations`: 数据库迁移文件
-   - 由于使用了Sequelize，这里可能包含数据库结构的变更记录
-
-### 10. `/models`: 数据模型
-    - 定义Sequelize的数据模型，对应数据库表结构
-
-## 主要功能实现
-
-### 1. LLM提供商集成
-   - 可能在`/src/utils`或`/src/services`中实现与不同LLM API的集成
-
-### 2. 多助手和多主题支持
-   - 在`/src/store`中管理助手和主题的状态
-   - 在`/src/components`中实现相关的UI组件
-
-### 3. 多模型对话
-   - 在`/src/pages`的聊天界面中实现
-   - 可能使用`/src/store`来管理对话状态
-
-### 4. 拖放排序
-   - 在`/src/components`中实现相关的可拖拽组件
-
-### 5. 代码高亮
-   - 可能使用第三方库，如Prism.js，集成在`/src/components`中
-
-### 6. Mermaid图表支持
-   - 在`/src/components`中集成Mermaid库
-
-### 7. 数据持久化
-   - 使用Sequelize在`/models`中定义数据模型
-   - 在`/migrations`中管理数据库结构变更
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -63,6 +63,6 @@ electronDownload:
 afterSign: scripts/notarize.js
 releaseInfo:
  releaseNotes: |
-    增加数学公式渲染引擎切换
-    多个系统滚动条样式统一
-    修复添加默认助手会添加两个
+    支持聊天气泡样式和简洁样式切换
+    支持导出对话为 Word 文档
+    错误修复
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "CherryStudio",
-  "version": "0.8.3",
+  "version": "0.8.9",
  "private": true,
  "description": "A powerful AI assistant for producer.",
  "main": "./out/main/index.js",
@@ -39,12 +39,14 @@
    "@electron-toolkit/preload": "^3.0.0",
    "@electron-toolkit/utils": "^3.0.0",
    "archiver": "^7.0.1",
+    "docx": "^9.0.2",
    "electron-log": "^5.1.5",
    "electron-store": "^8.2.0",
    "electron-updater": "^6.3.9",
    "electron-window-state": "^5.0.3",
    "fs-extra": "^11.2.0",
    "html2canvas": "^1.4.1",
+    "markdown-it": "^14.1.0",
    "officeparser": "^4.1.1",
    "unzipper": "^0.12.3",
    "webdav": "4.11.4"
@@ -60,6 +62,7 @@
    "@reduxjs/toolkit": "^2.2.5",
    "@types/fs-extra": "^11",
    "@types/lodash": "^4.17.5",
+    "@types/markdown-it": "^14",
    "@types/node": "^18.19.9",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
@@ -93,7 +96,6 @@
    "openai": "^4.52.1",
    "prettier": "^3.2.4",
    "react": "^18.2.0",
-    "react-custom-scrollbars-2": "^4.5.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^14.1.2",
    "react-markdown": "^9.0.1",
--- a/packages/database/src/agents.js
+++ b/packages/database/src/agents.js
@@ -20,6 +20,8 @@ db.all('SELECT * FROM agents', [], (err, rows) => {
  // 将 ID 类型转换为字符串
  for (const row of rows) {
    row.id = row.id.toString()
+    row.group = row.group.toString().split(',')
+    row.group = row.group.map((item) => item.trim().replace('\r\n', ''))
  }

  // 将查询结果转换为JSON字符串
--- a/src/main/config.ts
+++ b/src/main/config.ts
@@ -1,25 +1,15 @@
-import fs from 'node:fs'
-
 import { app } from 'electron'
-import Store from 'electron-store'
-import path from 'path'
+
+import { getDataPath } from './utils'

 const isDev = process.env.NODE_ENV === 'development'

-isDev && app.setPath('userData', app.getPath('userData') + 'Dev')
-
-const getDataPath = () => {
-  const dataPath = path.join(app.getPath('userData'), 'Data')
-  if (!fs.existsSync(dataPath)) {
-    fs.mkdirSync(dataPath, { recursive: true })
-  }
-  return dataPath
+if (isDev) {
+  app.setPath('userData', app.getPath('userData') + 'Dev')
 }

 export const DATA_PATH = getDataPath()

-export const appConfig = new Store()
-
 export const titleBarOverlayDark = {
  height: 40,
  color: '#00000000',
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -3,9 +3,15 @@ import { app, BrowserWindow } from 'electron'
 import installExtension, { REDUX_DEVTOOLS } from 'electron-devtools-installer'

 import { registerIpc } from './ipc'
+import { registerZoomShortcut } from './services/ShortcutService'
 import { updateUserDataPath } from './utils/upgrade'
 import { createMainWindow } from './window'

+// Check for single instance lock
+if (!app.requestSingleInstanceLock()) {
+  app.quit()
+}
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
@@ -30,6 +36,8 @@ app.whenReady().then(async () => {

  const mainWindow = createMainWindow()

+  registerZoomShortcut(mainWindow)
+
  registerIpc(mainWindow, app)

  if (process.env.NODE_ENV === 'development') {
@@ -39,6 +47,15 @@ app.whenReady().then(async () => {
  }
 })

+// Listen for second instance
+app.on('second-instance', () => {
+  const mainWindow = BrowserWindow.getAllWindows()[0]
+  if (mainWindow) {
+    mainWindow.isMinimized() && mainWindow.restore()
+    mainWindow.focus()
+  }
+})
+
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
--- a/src/main/ipc.ts
+++ b/src/main/ipc.ts
@@ -1,42 +1,60 @@
+import path from 'node:path'
+
 import { BrowserWindow, ipcMain, session, shell } from 'electron'

-import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
+import { titleBarOverlayDark, titleBarOverlayLight } from './config'
 import AppUpdater from './services/AppUpdater'
 import BackupManager from './services/BackupManager'
-import FileManager from './services/FileManager'
+import { configManager } from './services/ConfigManager'
+import { ExportService } from './services/ExportService'
+import FileStorage from './services/FileStorage'
 import { compress, decompress } from './utils/zip'
 import { createMinappWindow } from './window'

-const fileManager = new FileManager()
+const fileManager = new FileStorage()
 const backupManager = new BackupManager()
+const exportService = new ExportService(fileManager)

 export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
  const { autoUpdater } = new AppUpdater(mainWindow)

-  // IPC
-  ipcMain.handle('get-app-info', () => ({
+  ipcMain.handle('app:info', () => ({
    version: app.getVersion(),
    isPackaged: app.isPackaged,
-    appPath: app.getAppPath()
+    appPath: app.getAppPath(),
+    filesPath: path.join(app.getPath('userData'), 'Data', 'Files')
  }))

-  ipcMain.handle('open-website', (_, url: string) => {
-    shell.openExternal(url)
+  ipcMain.handle('app:proxy', (_, proxy: string) => session.defaultSession.setProxy(proxy ? { proxyRules: proxy } : {}))
+  ipcMain.handle('app:reload', () => mainWindow.reload())
+  ipcMain.handle('open:website', (_, url: string) => shell.openExternal(url))
+
+  // theme
+  ipcMain.handle('app:set-theme', (_, theme: 'light' | 'dark') => {
+    configManager.setTheme(theme)
+    mainWindow?.setTitleBarOverlay &&
+      mainWindow.setTitleBarOverlay(theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight)
  })

-  ipcMain.handle('set-proxy', (_, proxy: string) => {
-    session.defaultSession.setProxy(proxy ? { proxyRules: proxy } : {})
+  // check for update
+  ipcMain.handle('app:check-for-update', async () => {
+    return {
+      currentVersion: autoUpdater.currentVersion,
+      update: await autoUpdater.checkForUpdates()
+    }
  })

-  ipcMain.handle('reload', () => mainWindow.reload())
-
+  // zip
  ipcMain.handle('zip:compress', (_, text: string) => compress(text))
  ipcMain.handle('zip:decompress', (_, text: Buffer) => decompress(text))
+
+  // backup
  ipcMain.handle('backup:backup', backupManager.backup)
  ipcMain.handle('backup:restore', backupManager.restore)
  ipcMain.handle('backup:backupToWebdav', backupManager.backupToWebdav)
  ipcMain.handle('backup:restoreFromWebdav', backupManager.restoreFromWebdav)

+  // file
  ipcMain.handle('file:open', fileManager.open)
  ipcMain.handle('file:save', fileManager.save)
  ipcMain.handle('file:select', fileManager.selectFile)
@@ -50,7 +68,10 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
  ipcMain.handle('file:write', fileManager.writeFile)
  ipcMain.handle('file:saveImage', fileManager.saveImage)
  ipcMain.handle('file:base64Image', fileManager.base64Image)
+  ipcMain.handle('file:download', fileManager.downloadFile)
+  ipcMain.handle('file:copy', fileManager.copyFile)

+  // minapp
  ipcMain.handle('minapp', (_, args) => {
    createMinappWindow({
      url: args.url,
@@ -62,17 +83,6 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
    })
  })

-  ipcMain.handle('set-theme', (_, theme: 'light' | 'dark') => {
-    appConfig.set('theme', theme)
-    mainWindow?.setTitleBarOverlay &&
-      mainWindow.setTitleBarOverlay(theme === 'dark' ? titleBarOverlayDark : titleBarOverlayLight)
-  })
-
-  // 触发检查更新(此方法用于被渲染线程调用，例如页面点击检查更新按钮来调用此方法)
-  ipcMain.handle('check-for-update', async () => {
-    return {
-      currentVersion: autoUpdater.currentVersion,
-      update: await autoUpdater.checkForUpdates()
-    }
-  })
+  // export
+  ipcMain.handle('export:word', exportService.exportToWord)
 }
--- a/src/main/services/ConfigManager.ts
+++ b/src/main/services/ConfigManager.ts
@@ -0,0 +1,19 @@
+import Store from 'electron-store'
+
+export class ConfigManager {
+  private store: Store
+
+  constructor() {
+    this.store = new Store()
+  }
+
+  getTheme(): 'light' | 'dark' {
+    return this.store.get('theme', 'light') as 'light' | 'dark'
+  }
+
+  setTheme(theme: 'light' | 'dark') {
+    this.store.set('theme', theme)
+  }
+}
+
+export const configManager = new ConfigManager()
--- a/src/main/services/ExportService.ts
+++ b/src/main/services/ExportService.ts
@@ -0,0 +1,222 @@
+/* eslint-disable no-case-declarations */
+// ExportService
+
+import { AlignmentType, BorderStyle, Document, HeadingLevel, Packer, Paragraph, ShadingType, TextRun } from 'docx'
+import { dialog } from 'electron'
+import Logger from 'electron-log'
+import MarkdownIt from 'markdown-it'
+
+import FileStorage from './FileStorage'
+
+export class ExportService {
+  private fileManager: FileStorage
+  private md: MarkdownIt
+
+  constructor(fileManager: FileStorage) {
+    this.fileManager = fileManager
+    this.md = new MarkdownIt()
+  }
+
+  private convertMarkdownToDocxElements(markdown: string) {
+    const tokens = this.md.parse(markdown, {})
+    const elements: any[] = []
+    let listLevel = 0
+
+    const processInlineTokens = (tokens: any[]): TextRun[] => {
+      const runs: TextRun[] = []
+      for (const token of tokens) {
+        switch (token.type) {
+          case 'text':
+            runs.push(new TextRun(token.content))
+            break
+          case 'strong':
+            runs.push(new TextRun({ text: token.content, bold: true }))
+            break
+          case 'em':
+            runs.push(new TextRun({ text: token.content, italics: true }))
+            break
+          case 'code_inline':
+            runs.push(new TextRun({ text: token.content, font: 'Consolas', size: 20 }))
+            break
+        }
+      }
+      return runs
+    }
+
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i]
+
+      switch (token.type) {
+        case 'heading_open':
+          // 获取标题级别 (h1 -> h6)
+          const level = parseInt(token.tag.slice(1)) as 1 | 2 | 3 | 4 | 5 | 6
+          const headingText = tokens[i + 1].content
+          elements.push(
+            new Paragraph({
+              text: headingText,
+              heading: HeadingLevel[`HEADING_${level}`],
+              spacing: {
+                before: 240,
+                after: 120
+              }
+            })
+          )
+          i += 2 // 跳过内容标记和闭合标记
+          break
+
+        case 'paragraph_open':
+          const inlineTokens = tokens[i + 1].children || []
+          elements.push(
+            new Paragraph({
+              children: processInlineTokens(inlineTokens),
+              spacing: {
+                before: 120,
+                after: 120
+              }
+            })
+          )
+          i += 2
+          break
+
+        case 'bullet_list_open':
+          listLevel++
+          break
+
+        case 'bullet_list_close':
+          listLevel--
+          break
+
+        case 'list_item_open':
+          const itemInlineTokens = tokens[i + 2].children || []
+          elements.push(
+            new Paragraph({
+              children: [
+                new TextRun({ text: '•', bold: true }),
+                new TextRun({ text: '\t' }),
+                ...processInlineTokens(itemInlineTokens)
+              ],
+              indent: {
+                left: listLevel * 720
+              }
+            })
+          )
+          i += 3
+          break
+
+        case 'fence': // 代码块
+          const codeLines = token.content.split('\n')
+          elements.push(
+            new Paragraph({
+              children: codeLines.map(
+                (line) =>
+                  new TextRun({
+                    text: line + '\n',
+                    font: 'Consolas',
+                    size: 20,
+                    break: 1
+                  })
+              ),
+              shading: {
+                type: ShadingType.SOLID,
+                color: 'F5F5F5'
+              },
+              spacing: {
+                before: 120,
+                after: 120
+              },
+              border: {
+                top: { style: BorderStyle.SINGLE, size: 1, color: 'DDDDDD' },
+                bottom: { style: BorderStyle.SINGLE, size: 1, color: 'DDDDDD' },
+                left: { style: BorderStyle.SINGLE, size: 1, color: 'DDDDDD' },
+                right: { style: BorderStyle.SINGLE, size: 1, color: 'DDDDDD' }
+              }
+            })
+          )
+          break
+
+        case 'hr':
+          elements.push(
+            new Paragraph({
+              children: [new TextRun({ text: '─'.repeat(50), color: '999999' })],
+              alignment: AlignmentType.CENTER
+            })
+          )
+          break
+
+        case 'blockquote_open':
+          const quoteText = tokens[i + 2].content
+          elements.push(
+            new Paragraph({
+              children: [
+                new TextRun({
+                  text: quoteText,
+                  italics: true
+                })
+              ],
+              indent: {
+                left: 720
+              },
+              border: {
+                left: {
+                  style: BorderStyle.SINGLE,
+                  size: 3,
+                  color: 'CCCCCC'
+                }
+              },
+              spacing: {
+                before: 120,
+                after: 120
+              }
+            })
+          )
+          i += 3
+          break
+      }
+    }
+
+    return elements
+  }
+
+  public exportToWord = async (_: Electron.IpcMainInvokeEvent, markdown: string, fileName: string): Promise<void> => {
+    try {
+      const elements = this.convertMarkdownToDocxElements(markdown)
+
+      const doc = new Document({
+        styles: {
+          paragraphStyles: [
+            {
+              id: 'Normal',
+              name: 'Normal',
+              run: {
+                size: 24,
+                font: 'Arial'
+              }
+            }
+          ]
+        },
+        sections: [
+          {
+            properties: {},
+            children: elements
+          }
+        ]
+      })
+
+      const buffer = await Packer.toBuffer(doc)
+
+      const filePath = dialog.showSaveDialogSync({
+        title: '保存文件',
+        filters: [{ name: 'Word Document', extensions: ['docx'] }],
+        defaultPath: fileName
+      })
+
+      if (filePath) {
+        await this.fileManager.writeFile(_, filePath, buffer)
+        Logger.info('[ExportService] Document exported successfully')
+      }
+    } catch (error) {
+      Logger.error('[ExportService] Export to Word failed:', error)
+      throw error
+    }
+  }
+}
--- a/src/main/services/FileStorage.ts
+++ b/src/main/services/FileStorage.ts
@@ -1,4 +1,4 @@
-import { documentExts } from '@main/constant'
+import { documentExts, imageExts } from '@main/constant'
 import { getFileType } from '@main/utils/file'
 import { FileType } from '@types'
 import * as crypto from 'crypto'
@@ -19,7 +19,7 @@ import * as path from 'path'
 import { chdir } from 'process'
 import { v4 as uuidv4 } from 'uuid'

-class FileManager {
+class FileStorage {
  private storageDir = path.join(app.getPath('userData'), 'Data', 'Files')
  private tempDir = path.join(app.getPath('temp'), 'CherryStudio')

@@ -119,6 +119,31 @@ class FileManager {
    return Promise.all(fileMetadataPromises)
  }

+  private async compressImage(sourcePath: string, destPath: string): Promise<void> {
+    try {
+      const stats = fs.statSync(sourcePath)
+      const fileSizeInMB = stats.size / (1024 * 1024)
+
+      // 如果图片大于1MB才进行压缩
+      if (fileSizeInMB > 1) {
+        try {
+          await fs.promises.copyFile(sourcePath, destPath)
+          logger.info('[FileStorage] Image compressed successfully:', sourcePath)
+        } catch (jimpError) {
+          logger.error('[FileStorage] Image compression failed:', jimpError)
+          await fs.promises.copyFile(sourcePath, destPath)
+        }
+      } else {
+        // 小图片直接复制
+        await fs.promises.copyFile(sourcePath, destPath)
+      }
+    } catch (error) {
+      logger.error('[FileStorage] Image handling failed:', error)
+      // 错误情况下直接复制原文件
+      await fs.promises.copyFile(sourcePath, destPath)
+    }
+  }
+
  public uploadFile = async (_: Electron.IpcMainInvokeEvent, file: FileType): Promise<FileType> => {
    const duplicateFile = await this.findDuplicateFile(file.path)

@@ -128,10 +153,18 @@ class FileManager {

    const uuid = uuidv4()
    const origin_name = path.basename(file.path)
-    const ext = path.extname(origin_name)
+    const ext = path.extname(origin_name).toLowerCase()
    const destPath = path.join(this.storageDir, uuid + ext)

+    logger.info('[FileStorage] Uploading file:', file.path)
+
+    // 根据文件类型选择处理方式
+    if (imageExts.includes(ext)) {
+      await this.compressImage(file.path, destPath)
+    } else {
      await fs.promises.copyFile(file.path, destPath)
+    }
+
    const stats = await fs.promises.stat(destPath)
    const fileType = getFileType(ext)

@@ -265,7 +298,7 @@ class FileManager {
    fileName: string,
    content: string,
    options?: SaveDialogOptions
-  ): Promise<void> => {
+  ): Promise<string | null> => {
    try {
      const result: SaveDialogReturnValue = await dialog.showSaveDialog({
        title: '保存文件',
@@ -276,8 +309,11 @@ class FileManager {
      if (!result.canceled && result.filePath) {
        await writeFileSync(result.filePath, content, { encoding: 'utf-8' })
      }
+
+      return result.filePath
    } catch (err) {
      logger.error('[IPC - Error]', 'An error occurred saving the file:', err)
+      return null
    }
  }

@@ -315,6 +351,105 @@ class FileManager {
      return null
    }
  }
+
+  public downloadFile = async (_: Electron.IpcMainInvokeEvent, url: string): Promise<FileType> => {
+    try {
+      const response = await fetch(url)
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
      }

-export default FileManager
+      // 尝试从Content-Disposition获取文件名
+      const contentDisposition = response.headers.get('Content-Disposition')
+      let filename = 'download'
+
+      if (contentDisposition) {
+        const filenameMatch = contentDisposition.match(/filename="?(.+)"?/i)
+        if (filenameMatch) {
+          filename = filenameMatch[1]
+        }
+      }
+
+      // 如果URL中有文件名，使用URL中的文件名
+      const urlFilename = url.split('/').pop()
+      if (urlFilename && urlFilename.includes('.')) {
+        filename = urlFilename
+      }
+
+      // 如果文件名没有后缀，根据Content-Type添加后缀
+      if (!filename.includes('.')) {
+        const contentType = response.headers.get('Content-Type')
+        const ext = this.getExtensionFromMimeType(contentType)
+        filename += ext
+      }
+
+      const uuid = uuidv4()
+      const ext = path.extname(filename)
+      const destPath = path.join(this.storageDir, uuid + ext)
+
+      // 将响应内容写入文件
+      const buffer = Buffer.from(await response.arrayBuffer())
+      await fs.promises.writeFile(destPath, buffer)
+
+      const stats = await fs.promises.stat(destPath)
+      const fileType = getFileType(ext)
+
+      const fileMetadata: FileType = {
+        id: uuid,
+        origin_name: filename,
+        name: uuid + ext,
+        path: destPath,
+        created_at: stats.birthtime,
+        size: stats.size,
+        ext: ext,
+        type: fileType,
+        count: 1
+      }
+
+      return fileMetadata
+    } catch (error) {
+      logger.error('[FileStorage] Download file error:', error)
+      throw error
+    }
+  }
+
+  private getExtensionFromMimeType(mimeType: string | null): string {
+    if (!mimeType) return '.bin'
+
+    const mimeToExtension: { [key: string]: string } = {
+      'image/jpeg': '.jpg',
+      'image/png': '.png',
+      'image/gif': '.gif',
+      'application/pdf': '.pdf',
+      'text/plain': '.txt',
+      'application/msword': '.doc',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': '.docx',
+      'application/zip': '.zip',
+      'application/x-zip-compressed': '.zip',
+      'application/octet-stream': '.bin'
+    }
+
+    return mimeToExtension[mimeType] || '.bin'
+  }
+
+  public copyFile = async (_: Electron.IpcMainInvokeEvent, id: string, destPath: string): Promise<void> => {
+    try {
+      const sourcePath = path.join(this.storageDir, id)
+
+      // 确保目标目录存在
+      const destDir = path.dirname(destPath)
+      if (!fs.existsSync(destDir)) {
+        await fs.promises.mkdir(destDir, { recursive: true })
+      }
+
+      // 复制文件
+      await fs.promises.copyFile(sourcePath, destPath)
+      logger.info('[FileStorage] File copied successfully:', { from: sourcePath, to: destPath })
+    } catch (error) {
+      logger.error('[FileStorage] Copy file failed:', error)
+      throw error
+    }
+  }
+}
+
+export default FileStorage
--- a/src/main/services/ShortcutService.ts
+++ b/src/main/services/ShortcutService.ts
@@ -0,0 +1,53 @@
+import { BrowserWindow, globalShortcut } from 'electron'
+
+export function registerZoomShortcut(mainWindow: BrowserWindow) {
+  const registerShortcuts = () => {
+    // 注册放大快捷键 (Ctrl+Plus 或 Cmd+Plus)
+    globalShortcut.register('CommandOrControl+=', () => {
+      if (mainWindow) {
+        const currentZoom = mainWindow.webContents.getZoomFactor()
+        const newZoom = currentZoom + 0.1
+        // Prevent zoom factor from exceeding reasonable limits
+        if (newZoom <= 5.0) {
+          mainWindow.webContents.setZoomFactor(newZoom)
+        }
+      }
+    })
+
+    // 注册缩小快捷键 (Ctrl+Minus 或 Cmd+Minus)
+    globalShortcut.register('CommandOrControl+-', () => {
+      if (mainWindow) {
+        const currentZoom = mainWindow.webContents.getZoomFactor()
+        const newZoom = currentZoom - 0.1
+        // Prevent zoom factor from going below 0.1
+        if (newZoom >= 0.1) {
+          mainWindow.webContents.setZoomFactor(newZoom)
+        }
+      }
+    })
+
+    // 注册重置缩放快捷键 (Ctrl+0 或 Cmd+0)
+    globalShortcut.register('CommandOrControl+0', () => {
+      if (mainWindow) {
+        mainWindow.webContents.setZoomFactor(1)
+      }
+    })
+  }
+
+  const unregisterShortcuts = () => {
+    globalShortcut.unregister('CommandOrControl+=')
+    globalShortcut.unregister('CommandOrControl+-')
+    globalShortcut.unregister('CommandOrControl+0')
+  }
+
+  // 当窗口获得焦点时注册快捷键
+  mainWindow.on('focus', registerShortcuts)
+
+  // 当窗口失去焦点时注销快捷键
+  mainWindow.on('blur', unregisterShortcuts)
+
+  // 初始注册（如果窗口已经处于焦点状态）
+  if (mainWindow.isFocused()) {
+    registerShortcuts()
+  }
+}
--- a/src/main/services/WebDav.ts
+++ b/src/main/services/WebDav.ts
@@ -12,7 +12,9 @@ export default class WebDav {

    this.instance = createClient(params.webdavHost, {
      username: params.webdavUser,
-      password: params.webdavPass
+      password: params.webdavPass,
+      maxBodyLength: Infinity,
+      maxContentLength: Infinity
    })

    this.putFileContents = this.putFileContents.bind(this)
--- a/src/main/utils/index.ts
+++ b/src/main/utils/index.ts
@@ -1,3 +1,4 @@
+import fs from 'node:fs'
 import path from 'node:path'

 import { app } from 'electron'
@@ -5,3 +6,11 @@ import { app } from 'electron'
 export function getResourcePath() {
  return path.join(app.getAppPath(), 'resources')
 }
+
+export function getDataPath() {
+  const dataPath = path.join(app.getPath('userData'), 'Data')
+  if (!fs.existsSync(dataPath)) {
+    fs.mkdirSync(dataPath, { recursive: true })
+  }
+  return dataPath
+}
--- a/src/main/window.ts
+++ b/src/main/window.ts
@@ -4,7 +4,8 @@ import windowStateKeeper from 'electron-window-state'
 import { join } from 'path'

 import icon from '../../build/icon.png?asset'
-import { appConfig, titleBarOverlayDark, titleBarOverlayLight } from './config'
+import { titleBarOverlayDark, titleBarOverlayLight } from './config'
+import { configManager } from './services/ConfigManager'

 export function createMainWindow() {
  // Load the previous state with fallback to defaults
@@ -13,7 +14,7 @@ export function createMainWindow() {
    defaultHeight: 670
  })

-  const theme = appConfig.get('theme') || 'light'
+  const theme = configManager.getTheme()

  // Create the browser window.
  const isMac = process.platform === 'darwin'
--- a/src/preload/index.d.ts
+++ b/src/preload/index.d.ts
@@ -12,6 +12,7 @@ declare global {
        version: string
        isPackaged: boolean
        appPath: string
+        filesPath: string
      }>
      checkForUpdate: () => void
      openWebsite: (url: string) => void
@@ -19,8 +20,10 @@ declare global {
      setTheme: (theme: 'light' | 'dark') => void
      minApp: (options: { url: string; windowOptions?: Electron.BrowserWindowConstructorOptions }) => void
      reload: () => void
+      zip: {
        compress: (text: string) => Promise<Buffer>
        decompress: (text: Buffer) => Promise<string>
+      }
      backup: {
        backup: (fileName: string, data: string, destinationPath?: string) => Promise<Readable>
        restore: (backupPath: string) => Promise<string>
@@ -38,9 +41,18 @@ declare global {
        create: (fileName: string) => Promise<string>
        write: (filePath: string, data: Uint8Array | string) => Promise<void>
        open: (options?: OpenDialogOptions) => Promise<{ fileName: string; filePath: string; content: Buffer } | null>
-        save: (path: string, content: string | NodeJS.ArrayBufferView, options?: SaveDialogOptions) => void
+        save: (
+          path: string,
+          content: string | NodeJS.ArrayBufferView,
+          options?: SaveDialogOptions
+        ) => Promise<string | null>
        saveImage: (name: string, data: string) => void
        base64Image: (fileId: string) => Promise<{ mime: string; base64: string; data: string }>
+        download: (url: string) => Promise<FileType | null>
+        copy: (fileId: string, destPath: string) => Promise<void>
+      }
+      export: {
+        toWord: (markdown: string, fileName: string) => Promise<void>
      }
    }
  }
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -4,15 +4,17 @@ import { contextBridge, ipcRenderer, OpenDialogOptions } from 'electron'

 // Custom APIs for renderer
 const api = {
-  getAppInfo: () => ipcRenderer.invoke('get-app-info'),
-  checkForUpdate: () => ipcRenderer.invoke('check-for-update'),
-  openWebsite: (url: string) => ipcRenderer.invoke('open-website', url),
-  setProxy: (proxy: string) => ipcRenderer.invoke('set-proxy', proxy),
-  setTheme: (theme: 'light' | 'dark') => ipcRenderer.invoke('set-theme', theme),
+  getAppInfo: () => ipcRenderer.invoke('app:info'),
+  reload: () => ipcRenderer.invoke('app:reload'),
+  setProxy: (proxy: string) => ipcRenderer.invoke('app:proxy', proxy),
+  checkForUpdate: () => ipcRenderer.invoke('app:check-for-update'),
+  setTheme: (theme: 'light' | 'dark') => ipcRenderer.invoke('app:set-theme', theme),
+  openWebsite: (url: string) => ipcRenderer.invoke('open:website', url),
  minApp: (url: string) => ipcRenderer.invoke('minapp', url),
-  reload: () => ipcRenderer.invoke('reload'),
+  zip: {
    compress: (text: string) => ipcRenderer.invoke('zip:compress', text),
-  decompress: (text: Buffer) => ipcRenderer.invoke('zip:decompress', text),
+    decompress: (text: Buffer) => ipcRenderer.invoke('zip:decompress', text)
+  },
  backup: {
    backup: (fileName: string, data: string, destinationPath?: string) =>
      ipcRenderer.invoke('backup:backup', fileName, data, destinationPath),
@@ -35,7 +37,12 @@ const api = {
      ipcRenderer.invoke('file:save', path, content, options),
    selectFolder: () => ipcRenderer.invoke('file:selectFolder'),
    saveImage: (name: string, data: string) => ipcRenderer.invoke('file:saveImage', name, data),
-    base64Image: (fileId: string) => ipcRenderer.invoke('file:base64Image', fileId)
+    base64Image: (fileId: string) => ipcRenderer.invoke('file:base64Image', fileId),
+    download: (url: string) => ipcRenderer.invoke('file:download', url),
+    copy: (fileId: string, destPath: string) => ipcRenderer.invoke('file:copy', fileId, destPath)
+  },
+  export: {
+    toWord: (markdown: string, fileName: string) => ipcRenderer.invoke('export:word', markdown, fileName)
  }
 }

--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -14,6 +14,7 @@ import AppsPage from './pages/apps/AppsPage'
 import FilesPage from './pages/files/FilesPage'
 import HistoryPage from './pages/history/HistoryPage'
 import HomePage from './pages/home/HomePage'
+import PaintingsPage from './pages/paintings/PaintingsPage'
 import SettingsPage from './pages/settings/SettingsPage'
 import TranslatePage from './pages/translate/TranslatePage'

@@ -30,6 +31,7 @@ function App(): JSX.Element {
                  <Route path="/" element={<HomePage />} />
                  <Route path="/files" element={<FilesPage />} />
                  <Route path="/agents" element={<AgentsPage />} />
+                  <Route path="/paintings" element={<PaintingsPage />} />
                  <Route path="/translate" element={<TranslatePage />} />
                  <Route path="/apps" element={<AppsPage />} />
                  <Route path="/messages/*" element={<HistoryPage />} />
--- a/src/renderer/src/assets/images/paintings/image-size-1-1.svg
+++ b/src/renderer/src/assets/images/paintings/image-size-1-1.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.06667 4.73333C2.06667 3.26057 3.26057 2.06667 4.73333 2.06667H9V1H4.73333C2.67147 1 1 2.67147 1 4.73333V9H2.06667V4.73333ZM2.06667 15.2667C2.06667 16.7394 3.26057 17.9333 4.73333 17.9333H9V19H4.73333C2.67147 19 1 17.3285 1 15.2667V11H2.06667V15.2667ZM15.2667 2.06667C16.7394 2.06667 17.9333 3.26057 17.9333 4.73333V9H19V4.73333C19 2.67147 17.3285 1 15.2667 1H11V2.06667H15.2667ZM17.9333 15.2667C17.9333 16.7394 16.7394 17.9333 15.2667 17.9333H11V19H15.2667C17.3285 19 19 17.3285 19 15.2667V11H17.9333V15.2667Z" fill="#030712"/>
+</svg>
--- a/src/renderer/src/assets/images/paintings/image-size-1-2.svg
+++ b/src/renderer/src/assets/images/paintings/image-size-1-2.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.93333 3.73333C4.93333 2.26057 5.978 1.06667 7.26667 1.06667H9V0H7.26667C5.46254 0 4 1.67147 4 3.73333V8H4.93333V3.73333ZM4.93333 16.2667C4.93333 17.7394 5.978 18.9333 7.26667 18.9333H9V20H7.26667C5.46254 20 4 18.3285 4 16.2667V12H4.93333V16.2667ZM13.7333 1.06667C15.022 1.06667 16.0667 2.26057 16.0667 3.73333V8H17V3.73333C17 1.67147 15.5375 0 13.7333 0H12V1.06667H13.7333ZM16.0667 16.2667C16.0667 17.7394 15.022 18.9333 13.7333 18.9333H12V20H13.7333C15.5375 20 17 18.3285 17 16.2667V12H16.0667V16.2667Z" fill="#030712"/>
+</svg>
--- a/src/renderer/src/assets/images/paintings/image-size-16-9.svg
+++ b/src/renderer/src/assets/images/paintings/image-size-16-9.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.06667 7.26667C1.06667 5.978 2.26057 4.93333 3.73333 4.93333H8V4H3.73333C1.67147 4 0 5.46254 0 7.26667V9H1.06667V7.26667ZM1.06667 11.2667C1.06667 12.7394 2.26057 13.9333 3.73333 13.9333H8V15H3.73333C1.67147 15 0 13.3285 0 11.2667V10H1.06667V11.2667ZM16.2667 4.93333C17.7394 4.93333 18.9333 5.978 18.9333 7.26667V9H20V7.26667C20 5.46254 18.3285 4 16.2667 4H12V4.93333H16.2667ZM18.9333 11.2667C18.9333 12.7394 17.7394 13.9333 16.2667 13.9333H12V15H16.2667C18.3285 15 20 13.3285 20 11.2667V10H18.9333V11.2667Z" fill="#030712"/>
+</svg>
--- a/src/renderer/src/assets/images/paintings/image-size-3-2.svg
+++ b/src/renderer/src/assets/images/paintings/image-size-3-2.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.06667 5.26667C1.06667 3.978 2.26057 2.93333 3.73333 2.93333H8V2H3.73333C1.67147 2 0 3.46254 0 5.26667V9H1.06667V5.26667ZM1.06667 14.7333C1.06667 16.022 2.26057 17.0667 3.73333 17.0667H8V18H3.73333C1.67147 18 0 16.5375 0 14.7333V11H1.06667V14.7333ZM16.2667 2.93333C17.7394 2.93333 18.9333 3.978 18.9333 5.26667V9H20V5.26667C20 3.46254 18.3285 2 16.2667 2H12V2.93333H16.2667ZM18.9333 14.7333C18.9333 16.022 17.7394 17.0667 16.2667 17.0667H12V18H16.2667C18.3285 18 20 16.5375 20 14.7333V11H18.9333V14.7333Z" fill="#030712"/>
+</svg>
--- a/src/renderer/src/assets/images/paintings/image-size-3-4.svg
+++ b/src/renderer/src/assets/images/paintings/image-size-3-4.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.93333 3.73333C2.93333 2.26057 3.978 1.06667 5.26667 1.06667H9V0H5.26667C3.46254 0 2 1.67147 2 3.73333V8H2.93333V3.73333ZM2.93333 16.2667C2.93333 17.7394 3.978 18.9333 5.26667 18.9333H9V20H5.26667C3.46254 20 2 18.3285 2 16.2667V12H2.93333V16.2667ZM14.7333 1.06667C16.022 1.06667 17.0667 2.26057 17.0667 3.73333V8H18V3.73333C18 1.67147 16.5375 0 14.7333 0H11V1.06667H14.7333ZM17.0667 16.2667C17.0667 17.7394 16.022 18.9333 14.7333 18.9333H11V20H14.7333C16.5375 20 18 18.3285 18 16.2667V12H17.0667V16.2667Z" fill="#030712"/>
+</svg>
--- a/src/renderer/src/assets/images/paintings/image-size-9-16.svg
+++ b/src/renderer/src/assets/images/paintings/image-size-9-16.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.93333 3.73333C5.93333 2.26057 6.978 1.06667 8.26667 1.06667H10V0H8.26667C6.46254 0 5 1.67147 5 3.73333V8H5.93333V3.73333ZM5.93333 16.2667C5.93333 17.7394 6.978 18.9333 8.26667 18.9333H10V20H8.26667C6.46254 20 5 18.3285 5 16.2667V12H5.93333V16.2667ZM12.7333 1.06667C14.022 1.06667 15.0667 2.26057 15.0667 3.73333V8H16V3.73333C16 1.67147 14.5375 0 12.7333 0H11V1.06667H12.7333ZM15.0667 16.2667C15.0667 17.7394 14.022 18.9333 12.7333 18.9333H11V20H12.7333C14.5375 20 16 18.3285 16 16.2667V12H15.0667V16.2667Z" fill="#030712"/>
+</svg>
--- a/src/renderer/src/assets/images/providers/hyperbolic.png
+++ b/src/renderer/src/assets/images/providers/hyperbolic.png
--- a/src/renderer/src/assets/images/providers/infini-ai.png
+++ b/src/renderer/src/assets/images/providers/infini-ai.png
--- a/src/renderer/src/assets/images/providers/lepton.png
+++ b/src/renderer/src/assets/images/providers/lepton.png
--- a/src/renderer/src/assets/images/providers/mixedbread.png
+++ b/src/renderer/src/assets/images/providers/mixedbread.png
--- a/src/renderer/src/assets/images/providers/volcengine.png
+++ b/src/renderer/src/assets/images/providers/volcengine.png
--- a/src/renderer/src/assets/styles/ant.scss
+++ b/src/renderer/src/assets/styles/ant.scss
@@ -1,7 +1,11 @@
-#inputbar .ant-input {
+#inputbar {
  resize: none;
 }

+.ant-image-preview-switch-left {
+  -webkit-app-region: no-drag;
+}
+
 .ant-btn:not(:disabled):focus-visible {
  outline: none;
 }
--- a/src/renderer/src/assets/styles/index.scss
+++ b/src/renderer/src/assets/styles/index.scss
@@ -9,7 +9,7 @@
  --color-white-soft: rgba(255, 255, 255, 0.8);
  --color-white-mute: rgba(255, 255, 255, 0.94);

-  --color-black: #181818;
+  --color-black: #151515;
  --color-black-soft: #202020;
  --color-black-mute: #262626;

@@ -34,6 +34,7 @@
  --color-icon-white: #ffffff;
  --color-border: #ffffff24;
  --color-border-soft: #ffffff20;
+  --color-border-mute: #ffffff11;
  --color-error: #f44336;
  --color-link: #1677ff;
  --color-code-background: #323232;
@@ -51,6 +52,11 @@
  --assistants-width: 275px;
  --topic-list-width: 275px;
  --settings-width: 250px;
+
+  --chat-background: #111111;
+  --chat-background-user: #28b561;
+  --chat-background-assistant: #2c2c2c;
+  --chat-text-user: var(--color-black);
 }

 body[theme-mode='light'] {
@@ -83,6 +89,7 @@ body[theme-mode='light'] {
  --color-icon-white: #000000;
  --color-border: #00000028;
  --color-border-soft: #00000028;
+  --color-border-mute: #00000011;
  --color-error: #f44336;
  --color-link: #1677ff;
  --color-code-background: #e3e3e3;
@@ -91,6 +98,11 @@ body[theme-mode='light'] {

  --navbar-background-mac: rgba(255, 255, 255, 0.6);
  --navbar-background: rgba(255, 255, 255);
+
+  --chat-background: #f3f3f3;
+  --chat-background-user: #95ec69;
+  --chat-background-assistant: #ffffff;
+  --chat-text-user: var(--color-text);
 }

 *,
@@ -136,6 +148,7 @@ html,
 body,
 #root {
  height: 100%;
+  width: 100%;
  margin: 0;
 }

@@ -155,8 +168,6 @@ body,
 body[os='mac'] {
  #content-container {
    border-top-left-radius: 10px;
-    border-bottom-left-radius: 10px;
-    border-top-right-radius: 10px;
    border-left: 0.5px solid var(--color-border);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.05);
  }
@@ -189,7 +200,11 @@ body[os='windows'] {
 }

 .text-nowrap {
-  white-space: nowrap;
+  display: -webkit-box !important;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
+  white-space: normal;
+  word-wrap: break-word;
 }
--- a/src/renderer/src/assets/styles/markdown.scss
+++ b/src/renderer/src/assets/styles/markdown.scss
@@ -95,7 +95,7 @@
  }

  span {
-    word-break: break-all;
+    white-space: pre;
  }

  code {
@@ -107,6 +107,8 @@
    background: var(--color-background-mute);
    padding: 3px 5px;
    border-radius: 5px;
+    word-break: keep-all;
+    white-space: pre;
  }

  pre {
--- a/src/renderer/src/assets/styles/scrollbar.scss
+++ b/src/renderer/src/assets/styles/scrollbar.scss
@@ -1,11 +1,15 @@
 :root {
-  --color-scrollbar-thumb: #6b6b6b;
-  --color-scrollbar-thumb-hover: #939393;
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.15);
+  --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
+  --color-scrollbar-thumb-right: rgba(255, 255, 255, 0.25);
+  --color-scrollbar-thumb-right-hover: rgba(255, 255, 255, 0.35);
 }

 body[theme-mode='light'] {
-  --color-scrollbar-thumb: #b1b1b1;
-  --color-scrollbar-thumb-hover: #7d7d7d;
+  --color-scrollbar-thumb: rgba(0, 0, 0, 0.15);
+  --color-scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
+  --color-scrollbar-thumb-right: rgba(0, 0, 0, 0.25);
+  --color-scrollbar-thumb-right-hover: rgba(0, 0, 0, 0.35);
 }

 /* 全局初始化滚动条样式 */
--- a/src/renderer/src/components/Popups/AddAssistantPopup.tsx
+++ b/src/renderer/src/components/Popups/AddAssistantPopup.tsx
@@ -3,16 +3,18 @@ import { TopView } from '@renderer/components/TopView'
 import systemAgents from '@renderer/config/agents.json'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
-import { createAssistantFromAgent } from '@renderer/services/assistant'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { createAssistantFromAgent } from '@renderer/services/AssistantService'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Agent, Assistant } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import { Divider, Input, InputRef, Modal, Tag } from 'antd'
+import { take } from 'lodash'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 import { HStack } from '../Layout'
+import Scrollbar from '../Scrollbar'

 interface Props {
  resolve: (value: Assistant | undefined) => void
@@ -93,7 +95,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
      </HStack>
      <Divider style={{ margin: 0, borderBlockStartWidth: 0.5 }} />
      <Container>
-        {agents.map((agent) => (
+        {take(agents, 100).map((agent) => (
          <AgentItem
            key={agent.id}
            onClick={() => onCreateAssistant(agent)}
@@ -110,14 +112,10 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
  )
 }

-const Container = styled.div`
+const Container = styled(Scrollbar)`
  padding: 0 12px;
  height: 50vh;
  margin-top: 10px;
-  overflow-y: auto;
-  &::-webkit-scrollbar {
-    display: none;
-  }
 `

 const AgentItem = styled.div`
--- a/src/renderer/src/components/Popups/SelectModelPopup.tsx
+++ b/src/renderer/src/components/Popups/SelectModelPopup.tsx
@@ -3,7 +3,7 @@ import VisionIcon from '@renderer/components/Icons/VisionIcon'
 import { TopView } from '@renderer/components/TopView'
 import { getModelLogo, isVisionModel } from '@renderer/config/models'
 import { useProviders } from '@renderer/hooks/useProvider'
-import { getModelUniqId } from '@renderer/services/model'
+import { getModelUniqId } from '@renderer/services/ModelService'
 import { Model } from '@renderer/types'
 import { Avatar, Divider, Empty, Input, InputRef, Menu, MenuProps, Modal } from 'antd'
 import { first, reverse, sortBy } from 'lodash'
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 import { HStack } from '../Layout'
-import { Scrollbar } from '../Scrollbar'
+import Scrollbar from '../Scrollbar'

 type MenuItem = Required<MenuProps>['items'][number]

--- a/src/renderer/src/components/Popups/UserPopup.tsx
+++ b/src/renderer/src/components/Popups/UserPopup.tsx
@@ -1,6 +1,6 @@
 import useAvatar from '@renderer/hooks/useAvatar'
 import { useSettings } from '@renderer/hooks/useSettings'
-import ImageStorage from '@renderer/services/storage'
+import ImageStorage from '@renderer/services/ImageStorage'
 import { useAppDispatch } from '@renderer/store'
 import { setAvatar } from '@renderer/store/runtime'
 import { setUserName } from '@renderer/store/settings'
--- a/src/renderer/src/components/Scrollbar/index.tsx
+++ b/src/renderer/src/components/Scrollbar/index.tsx
@@ -1,22 +1,57 @@
-import { ScrollbarProps, Scrollbars } from 'react-custom-scrollbars-2'
+import { throttle } from 'lodash'
+import { FC, forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'

-export const Scrollbar: React.FC<ScrollbarProps> = ({ children, ...props }) => {
-  return (
-    <Scrollbars
-      autoHide
-      {...props}
-      renderThumbVertical={(props) => <Thumb {...props} />}
-      renderTrackHorizontal={(props) => <Thumb {...props} />}>
-      {children}
-    </Scrollbars>
-  )
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  right?: boolean
+  ref?: any
 }

-const Thumb = styled.div`
-  border-radius: 10px;
-  background-color: var(--color-scrollbar-thumb);
+const Scrollbar: FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const [isScrolling, setIsScrolling] = useState(false)
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  const handleScroll = useCallback(
+    throttle(() => {
+      setIsScrolling(true)
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+
+      timeoutRef.current = setTimeout(() => setIsScrolling(false), 1500) // 增加到 2 秒
+    }, 200),
+    []
+  )
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return (
+    <Container {...props} isScrolling={isScrolling} onScroll={handleScroll} ref={ref}>
+      {props.children}
+    </Container>
+  )
+})
+
+const Container = styled.div<{ isScrolling: boolean; right?: boolean }>`
+  overflow-y: auto;
+  &::-webkit-scrollbar-thumb {
+    transition: background 2s ease;
+    background: ${(props) =>
+      props.isScrolling ? `var(--color-scrollbar-thumb${props.right ? '-right' : ''})` : 'transparent'};
    &:hover {
-    background-color: var(--color-scrollbar-thumb-hover);
+      background: ${(props) =>
+        props.isScrolling ? `var(--color-scrollbar-thumb${props.right ? '-right' : ''}-hover)` : 'transparent'};
+    }
  }
 `
+
+Scrollbar.displayName = 'Scrollbar'
+
+export default Scrollbar
--- a/src/renderer/src/components/TranslateButton.tsx
+++ b/src/renderer/src/components/TranslateButton.tsx
@@ -0,0 +1,70 @@
+import { TranslationOutlined } from '@ant-design/icons'
+import { useDefaultModel } from '@renderer/hooks/useAssistant'
+import { fetchTranslate } from '@renderer/services/ApiService'
+import { getDefaultTopic, getDefaultTranslateAssistant } from '@renderer/services/AssistantService'
+import { getUserMessage } from '@renderer/services/MessagesService'
+import { Button } from 'antd'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface Props {
+  text?: string
+  onTranslated: (translatedText: string) => void
+  disabled?: boolean
+  style?: React.CSSProperties
+}
+
+const TranslateButton: FC<Props> = ({ text, onTranslated, disabled, style }) => {
+  const { t } = useTranslation()
+  const { translateModel } = useDefaultModel()
+  const [isTranslating, setIsTranslating] = useState(false)
+
+  const handleTranslate = async () => {
+    if (!text?.trim()) return
+
+    if (!translateModel) {
+      window.message.error({
+        content: t('translate.error.not_configured'),
+        key: 'translate-message'
+      })
+      return
+    }
+
+    // 先复制原文到剪贴板
+    await navigator.clipboard.writeText(text)
+
+    setIsTranslating(true)
+    try {
+      const assistant = getDefaultTranslateAssistant('english', text)
+      const message = getUserMessage({
+        assistant,
+        topic: getDefaultTopic('default'),
+        type: 'text'
+      })
+
+      const translatedText = await fetchTranslate({ message, assistant })
+      onTranslated(translatedText)
+    } catch (error) {
+      console.error('Translation failed:', error)
+      window.message.error({
+        content: t('translate.error.failed'),
+        key: 'translate-message'
+      })
+    } finally {
+      setIsTranslating(false)
+    }
+  }
+
+  return (
+    <Button
+      icon={<TranslationOutlined style={{ fontSize: 14 }} />}
+      onClick={handleTranslate}
+      disabled={disabled || isTranslating}
+      loading={isTranslating}
+      style={style}
+      size="small"
+    />
+  )
+}
+
+export default TranslateButton
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -1,9 +1,10 @@
-import { FileSearchOutlined, FolderOutlined, TranslationOutlined } from '@ant-design/icons'
+import { FileSearchOutlined, FolderOutlined, PictureOutlined, TranslationOutlined } from '@ant-design/icons'
 import { isMac } from '@renderer/config/constant'
 import { isLocalAi, UserAvatar } from '@renderer/config/env'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import useAvatar from '@renderer/hooks/useAvatar'
+import { useRuntime } from '@renderer/hooks/useRuntime'
 import { useSettings } from '@renderer/hooks/useSettings'
-import { useRuntime } from '@renderer/hooks/useStore'
 import { Avatar } from 'antd'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -21,6 +22,7 @@ const Sidebar: FC = () => {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const { windowStyle } = useSettings()
+  const { theme, toggleTheme } = useTheme()

  const isRoute = (path: string): string => (pathname === path ? 'active' : '')
  const isRoutes = (path: string): string => (pathname.startsWith(path) ? 'active' : '')
@@ -58,6 +60,11 @@ const Sidebar: FC = () => {
              <i className="iconfont icon-business-smart-assistant" />
            </Icon>
          </StyledLink>
+          <StyledLink onClick={() => to('/paintings')}>
+            <Icon className={isRoute('/paintings')}>
+              <PictureOutlined style={{ fontSize: 16 }} />
+            </Icon>
+          </StyledLink>
          <StyledLink onClick={() => to('/translate')}>
            <Icon className={isRoute('/translate')}>
              <TranslationOutlined />
@@ -81,6 +88,14 @@ const Sidebar: FC = () => {
        </Menus>
      </MainMenus>
      <Menus onClick={MinApp.onClose}>
+        <Icon onClick={() => toggleTheme()}>
+          {theme === 'dark' ? (
+            <i className="iconfont icon-theme icon-dark1" />
+          ) : (
+            <i className="iconfont icon-theme icon-theme-light" />
+          )}
+        </Icon>
+
        <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
          <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
            <i className="iconfont icon-setting" />
--- a/src/renderer/src/config/agents.json
+++ b/src/renderer/src/config/agents.json
--- a/src/renderer/src/config/constant.ts
+++ b/src/renderer/src/config/constant.ts
@@ -8,7 +8,7 @@ export const isMac = platform === 'darwin'
 export const isWindows = platform === 'win32' || platform === 'win64'
 export const isLinux = platform === 'linux'

-export const imageExts = ['.jpg', '.png', '.jpeg']
+export const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
 export const documentExts = ['.pdf', '.docx', '.pptx', '.xlsx', '.odt', '.odp', '.ods']
 export const textExts = [
  '.txt', // 普通文本文件
--- a/src/renderer/src/config/models.ts
+++ b/src/renderer/src/config/models.ts
@@ -381,13 +381,13 @@ export const SYSTEM_MODELS: Record<string, Model[]> = {
  ],
  anthropic: [
    {
-      id: 'claude-3-5-sonnet-20240620',
+      id: 'claude-3-5-sonnet-latest',
      provider: 'anthropic',
      name: 'Claude 3.5 Sonnet',
      group: 'Claude 3.5'
    },
    {
-      id: 'claude-3-opus-20240229',
+      id: 'claude-3-opus-latest',
      provider: 'anthropic',
      name: 'Claude 3 Opus',
      group: 'Claude 3'
@@ -930,6 +930,51 @@ export const SYSTEM_MODELS: Record<string, Model[]> = {
  ]
 }

+export const TEXT_TO_IMAGES_MODELS = [
+  {
+    id: 'black-forest-labs/FLUX.1-dev',
+    provider: 'silicon',
+    name: 'FLUX.1-dev',
+    group: 'FLUX'
+  },
+  {
+    id: 'black-forest-labs/FLUX.1-schnell',
+    provider: 'silicon',
+    name: 'FLUX.1-schnell',
+    group: 'FLUX'
+  },
+  {
+    id: 'Pro/black-forest-labs/FLUX.1-schnell',
+    provider: 'silicon',
+    name: 'FLUX.1-schnell Pro',
+    group: 'FLUX'
+  },
+  {
+    id: 'stabilityai/stable-diffusion-3-5-large',
+    provider: 'silicon',
+    name: 'Stable Diffusion 3.5 Large',
+    group: 'Stable Diffusion'
+  },
+  {
+    id: 'stabilityai/stable-diffusion-3-medium',
+    provider: 'silicon',
+    name: 'Stable Diffusion 3 Medium',
+    group: 'Stable Diffusion'
+  },
+  {
+    id: 'stabilityai/stable-diffusion-2-1',
+    provider: 'silicon',
+    name: 'Stable Diffusion 2.1',
+    group: 'Stable Diffusion'
+  },
+  {
+    id: 'stabilityai/stable-diffusion-xl-base-1.0',
+    provider: 'silicon',
+    name: 'Stable Diffusion XL Base 1.0',
+    group: 'Stable Diffusion'
+  }
+]
+
 export function isTextToImageModel(model: Model): boolean {
  return TEXT_TO_IMAGE_REGEX.test(model.id)
 }
--- a/src/renderer/src/hooks/useAppInit.ts
+++ b/src/renderer/src/hooks/useAppInit.ts
@@ -3,14 +3,14 @@ import { isLocalAi } from '@renderer/config/env'
 import db from '@renderer/databases'
 import i18n from '@renderer/i18n'
 import { useAppDispatch } from '@renderer/store'
-import { setAvatar } from '@renderer/store/runtime'
+import { setAvatar, setFilesPath } from '@renderer/store/runtime'
 import { runAsyncFunction } from '@renderer/utils'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { useEffect } from 'react'

 import { useDefaultModel } from './useAssistant'
+import { useRuntime } from './useRuntime'
 import { useSettings } from './useSettings'
-import { useRuntime } from './useStore'

 export function useAppInit() {
  const dispatch = useAppDispatch()
@@ -56,4 +56,11 @@ export function useAppInit() {
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
+
+  useEffect(() => {
+    // set files path
+    window.api.getAppInfo().then((info) => {
+      dispatch(setFilesPath(info.filesPath))
+    })
+  }, [dispatch])
 }
--- a/src/renderer/src/hooks/useAssistant.ts
+++ b/src/renderer/src/hooks/useAssistant.ts
@@ -1,4 +1,4 @@
-import { getDefaultTopic } from '@renderer/services/assistant'
+import { getDefaultTopic } from '@renderer/services/AssistantService'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import {
  addAssistant,
--- a/src/renderer/src/hooks/usePaintings.ts
+++ b/src/renderer/src/hooks/usePaintings.ts
@@ -0,0 +1,42 @@
+import { TEXT_TO_IMAGES_MODELS } from '@renderer/config/models'
+import FileManager from '@renderer/services/FileManager'
+import { useAppDispatch, useAppSelector } from '@renderer/store'
+import { addPainting, removePainting, updatePainting, updatePaintings } from '@renderer/store/paintings'
+import { Painting } from '@renderer/types'
+import { uuid } from '@renderer/utils'
+
+export function usePaintings() {
+  const paintings = useAppSelector((state) => state.paintings.paintings)
+  const dispatch = useAppDispatch()
+
+  return {
+    paintings,
+    addPainting: () => {
+      const newPainting: Painting = {
+        id: uuid(),
+        urls: [],
+        files: [],
+        prompt: '',
+        negativePrompt: '',
+        imageSize: '1024x1024',
+        numImages: 1,
+        seed: '',
+        steps: 25,
+        guidanceScale: 4.5,
+        model: TEXT_TO_IMAGES_MODELS[0].id
+      }
+      dispatch(addPainting(newPainting))
+      return newPainting
+    },
+    removePainting: async (painting: Painting) => {
+      FileManager.deleteFiles(painting.files)
+      dispatch(removePainting(painting))
+    },
+    updatePainting: (painting: Painting) => {
+      dispatch(updatePainting(painting))
+    },
+    updatePaintings: (paintings: Painting[]) => {
+      dispatch(updatePaintings(paintings))
+    }
+  }
+}
--- a/src/renderer/src/hooks/useRuntime.ts
+++ b/src/renderer/src/hooks/useRuntime.ts
@@ -0,0 +1,5 @@
+import { useAppSelector } from '@renderer/store'
+
+export function useRuntime() {
+  return useAppSelector((state) => state.runtime)
+}
--- a/src/renderer/src/hooks/useSettings.ts
+++ b/src/renderer/src/hooks/useSettings.ts
@@ -28,3 +28,12 @@ export function useSettings() {
    }
  }
 }
+
+export function useMessageStyle() {
+  const { messageStyle } = useSettings()
+  const isBubbleStyle = messageStyle === 'bubble'
+
+  return {
+    isBubbleStyle
+  }
+}
--- a/src/renderer/src/hooks/useStore.ts
+++ b/src/renderer/src/hooks/useStore.ts
@@ -21,7 +21,3 @@ export function useShowTopics() {
    toggleShowTopics: () => dispatch(toggleShowTopics())
  }
 }
-
-export function useRuntime() {
-  return useAppSelector((state) => state.runtime)
-}
--- a/src/renderer/src/hooks/useTopic.ts
+++ b/src/renderer/src/hooks/useTopic.ts
@@ -1,5 +1,5 @@
 import db from '@renderer/databases'
-import { deleteMessageFiles } from '@renderer/services/messages'
+import { deleteMessageFiles } from '@renderer/services/MessagesService'
 import store from '@renderer/store'
 import { Assistant, Topic } from '@renderer/types'
 import { find } from 'lodash'
--- a/src/renderer/src/i18n/index.ts
+++ b/src/renderer/src/i18n/index.ts
@@ -1,9 +1,9 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'

-import enUS from './en-us.json'
-import zhCN from './zh-cn.json'
-import zhTW from './zh-tw.json'
+import enUS from './locales/en-us.json'
+import zhCN from './locales/zh-cn.json'
+import zhTW from './locales/zh-tw.json'

 const resources = {
  'en-US': enUS,
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -29,7 +29,8 @@
      "back": "Back",
      "chat": "Chat",
      "close": "Close",
-      "cancel": "Cancel"
+      "cancel": "Cancel",
+      "download": "Download"
    },
    "button": {
      "add": "Add",
@@ -63,7 +64,10 @@
      "upgrade.success.content": "Please restart the application to complete the upgrade",
      "upgrade.success.button": "Restart",
      "topic.added": "New topic added",
-      "save.success.title": "Saved successfully"
+      "save.success.title": "Saved successfully",
+      "message.style": "Message Style",
+      "message.style.bubble": "Bubble",
+      "message.style.plain": "Plain"
    },
    "chat": {
      "save": "Save",
@@ -80,6 +84,7 @@
      "topics.export.title": "Export",
      "topics.export.image": "Export as image",
      "topics.export.md": "Export as markdown",
+      "topics.export.word": "Export as Word",
      "input.new_topic": "New Topic",
      "input.topics": " Topics ",
      "input.clear": "Clear",
@@ -137,13 +142,38 @@
      "stream_output": "Stream Output",
      "search": "Search models..."
    },
+    "images": {
+      "title": "Images",
+      "image.size": "Image Size",
+      "button.new.image": "New Image",
+      "button.delete.image": "Delete Image",
+      "button.delete.image.confirm": "Are you sure you want to delete this image?",
+      "number_images": "Number Images",
+      "number_images_tip": "Number of images to generate (1-4)",
+      "seed": "Seed",
+      "seed_tip": "The same seed and prompt can produce similar images",
+      "inference_steps": "Inference Steps",
+      "inference_steps_tip": "The number of inference steps to perform. More steps produce higher quality but take longer",
+      "guidance_scale": "Guidance Scale",
+      "guidance_scale_tip": "Classifier Free Guidance. How close you want the model to stick to your prompt when looking for a related image to show you",
+      "negative_prompt": "Negative Prompt",
+      "negative_prompt_tip": "Describe what you don't want included in the image",
+      "prompt_placeholder": "Describe the image you want to create, e.g. A serene lake at sunset with mountains in the background",
+      "regenerate.confirm": "This will replace your existing generated images. Do you want to continue?"
+    },
    "files": {
      "title": "Files",
      "file": "File",
      "name": "Name",
      "size": "Size",
      "count": "Count",
-      "created_at": "Created At"
+      "created_at": "Created At",
+      "image": "Image",
+      "text": "Text",
+      "document": "Document",
+      "actions": "Actions",
+      "open": "Open",
+      "all": "All Files"
    },
    "agents": {
      "title": "Agents",
@@ -169,7 +199,9 @@
      "edit.message.user.placeholder": "Enter user message",
      "edit.message.empty.content": "Conversation input content cannot be empty",
      "edit.model.select.title": "Select Model",
-      "edit.settings.hide_preset_messages": "Hide Preset Message"
+      "edit.settings.hide_preset_messages": "Hide Preset Message",
+      "search.no_results": "No results found",
+      "sorting.title": "Sorting"
    },
    "minapp": {
      "title": "MinApp"
@@ -179,6 +211,7 @@
      "search.placeholder": "Search topics or messages...",
      "continue_chat": "Continue Chatting",
      "search.topics.empty": "No topics found, press Enter to search all messages",
+      "search.messages": "Search All Messages",
      "locate.message": "Locate the message"
    },
    "provider": {
@@ -307,7 +340,16 @@
      "topic.position": "Topic Position",
      "topic.position.left": "Left",
      "topic.position.right": "Right",
-      "topic.show.time": "Show Topic Time"
+      "topic.show.time": "Show Topic Time",
+      "shortcuts": {
+        "title": "Keyboard Shortcuts",
+        "action": "Action",
+        "key": "Key",
+        "new_topic": "New Topic",
+        "zoom_in": "Zoom In",
+        "zoom_out": "Zoom Out",
+        "zoom_reset": "Reset Zoom"
+      }
    },
    "translate": {
      "title": "Translation",
@@ -315,7 +357,8 @@
      "button.translate": "Translate",
      "error.not_configured": "Translation model is not configured",
      "input.placeholder": "Enter text to translate",
-      "output.placeholder": "Translation"
+      "output.placeholder": "Translation",
+      "confirm": "Original text has been copied to clipboard. Do you want to replace it with the translated text?"
    },
    "languages": {
      "english": "English",
@@ -338,11 +381,23 @@
    },
    "error": {
      "chat.response": "Something went wrong. Please check if you have set your API key in the Settings > Providers",
-      "backup.file_format": "Backup file format error"
+      "backup.file_format": "Backup file format error",
+      "provider_disabled": "Model provider is not enabled",
+      "no_api_key": "API key is not configured"
    },
    "words": {
      "knowledgeGraph": "Knowledge Graph",
      "visualization": "Visualization"
+    },
+    "export": {
+      "attached_files": "Attached Files",
+      "user": "User",
+      "assistant": "Assistant",
+      "created": "Created",
+      "last_updated": "Last Updated",
+      "messages": "Messages",
+      "conversation_details": "Conversation Details",
+      "conversation_history": "Conversation History"
    }
  }
 }
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -29,7 +29,8 @@
      "back": "返回",
      "chat": "聊天",
      "close": "关闭",
-      "cancel": "取消"
+      "cancel": "取消",
+      "download": "下载"
    },
    "button": {
      "add": "添加",
@@ -60,10 +61,13 @@
      "reset.double.confirm.title": "数据丢失！！！",
      "reset.double.confirm.content": "你的全部数据都会丢失，如果没有备份数据，将无法恢复，确定要继续吗？",
      "upgrade.success.title": "升级成功",
-      "upgrade.success.content": "重启应用以完成升级",
+      "upgrade.success.content": "重启用以完成升级",
      "upgrade.success.button": "重启",
      "topic.added": "话题添加成功",
-      "save.success.title": "保存成功"
+      "save.success.title": "保存成功",
+      "message.style": "消息样式",
+      "message.style.bubble": "气泡",
+      "message.style.plain": "简洁"
    },
    "chat": {
      "save": "保存",
@@ -80,6 +84,7 @@
      "topics.export.title": "导出",
      "topics.export.image": "导出为图片",
      "topics.export.md": "导出为 Markdown",
+      "topics.export.word": "导出为 Word",
      "input.new_topic": "新话题",
      "input.topics": " 话题 ",
      "input.clear": "清空消息",
@@ -137,13 +142,38 @@
      "stream_output": "流式输出",
      "search": "搜索模型..."
    },
+    "images": {
+      "title": "图片",
+      "image.size": "图片尺寸",
+      "button.new.image": "新建图片",
+      "button.delete.image": "删除图片",
+      "button.delete.image.confirm": "确定要删除此图片吗?",
+      "number_images": "生成数量",
+      "number_images_tip": "一次生成的图片数量 (1-4)",
+      "seed": "随机种子",
+      "seed_tip": "相同的种子和提示词可以生成相似的图片",
+      "inference_steps": "推理步数",
+      "inference_steps_tip": "要执行的推理步数。步数越多，质量越高但耗时越长",
+      "guidance_scale": "引导比例",
+      "guidance_scale_tip": "无分类器指导。控制模型在寻找相关图像时对提示词的遵循程度",
+      "negative_prompt": "反向提示词",
+      "negative_prompt_tip": "描述你不想在图片中出现的内容",
+      "prompt_placeholder": "描述你想创建的图片，例如：一个宁静的湖泊，夕阳西下，远处是群山",
+      "regenerate.confirm": "这将覆盖已生成的图片，是否继续？"
+    },
    "files": {
      "title": "文件",
      "file": "文件",
      "name": "文件名",
      "size": "大小",
      "count": "文件数",
-      "created_at": "创建时间"
+      "created_at": "创建时间",
+      "image": "图片",
+      "text": "文本",
+      "document": "文档",
+      "actions": "操作",
+      "open": "打开",
+      "all": "所有文件"
    },
    "agents": {
      "title": "智能体",
@@ -169,7 +199,9 @@
      "edit.message.user.placeholder": "输入用户消息",
      "edit.message.empty.content": "会话输入内容不能为空",
      "edit.model.select.title": "选择模型",
-      "edit.settings.hide_preset_messages": "隐藏预设消息"
+      "edit.settings.hide_preset_messages": "隐藏预设消息",
+      "search.no_results": "没有找到相关智能体",
+      "sorting.title": "排序"
    },
    "minapp": {
      "title": "小程序"
@@ -179,6 +211,7 @@
      "search.placeholder": "搜索话题或消息...",
      "continue_chat": "继续聊天",
      "search.topics.empty": "没有找到相关话题, 点击回车键搜索所有消息",
+      "search.messages": "搜索所有消息",
      "locate.message": "定位到消息"
    },
    "provider": {
@@ -258,7 +291,7 @@
      "provider.search_placeholder": "搜索模型 ID 或名称",
      "provider.api.url.reset": "重置",
      "provider.api.url.preview": "预览: {{url}}",
-      "provider.api.url.tip": "/结尾忽略v1版本，#结尾强制使用输入地址",
+      "provider.api.url.tip": "/结尾忽略v1版本，#结尾制使用输入地址",
      "models.default_assistant_model": "默认助手模型",
      "models.topic_naming_model": "话题命名模型",
      "models.translate_model": "翻译模型",
@@ -307,7 +340,16 @@
      "topic.position": "话题位置",
      "topic.position.left": "左侧",
      "topic.position.right": "右侧",
-      "topic.show.time": "显示话题时间"
+      "topic.show.time": "显示话题时间",
+      "shortcuts": {
+        "title": "快捷方式",
+        "action": "操作",
+        "key": "按键",
+        "new_topic": "新建话题",
+        "zoom_in": "放大界面",
+        "zoom_out": "缩小界面",
+        "zoom_reset": "置缩放"
+      }
    },
    "translate": {
      "title": "翻译",
@@ -315,7 +357,8 @@
      "button.translate": "翻译",
      "error.not_configured": "翻译模型未配置",
      "input.placeholder": "输入文本进行翻译",
-      "output.placeholder": "翻译"
+      "output.placeholder": "翻译",
+      "confirm": "原文已复制到剪贴板，是否用翻译后的文本替换？"
    },
    "languages": {
      "english": "英文",
@@ -338,11 +381,23 @@
    },
    "error": {
      "chat.response": "出错了，如果没有配置 API 密钥，请前往设置 > 模型提供商中配置密钥",
-      "backup.file_format": "备份文件格式错误"
+      "backup.file_format": "备份文件格式错误",
+      "provider_disabled": "模型提供商未启用",
+      "no_api_key": "API 密钥未配置"
    },
    "words": {
      "knowledgeGraph": "知识图谱",
      "visualization": "可视化"
+    },
+    "export": {
+      "attached_files": "附件",
+      "user": "用户",
+      "assistant": "助手",
+      "created": "创建时间",
+      "last_updated": "最后更新",
+      "messages": "消息数",
+      "conversation_details": "会话详情",
+      "conversation_history": "会话历史"
    }
  }
 }
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@@ -29,7 +29,8 @@
      "back": "返回",
      "chat": "聊天",
      "close": "關閉",
-      "cancel": "取消"
+      "cancel": "取消",
+      "download": "下載"
    },
    "button": {
      "add": "添加",
@@ -63,7 +64,10 @@
      "upgrade.success.content": "請重新啟動應用以完成升級",
      "upgrade.success.button": "重新啟動",
      "topic.added": "新話題已添加",
-      "save.success.title": "保存成功"
+      "save.success.title": "保存成功",
+      "message.style": "消息樣式",
+      "message.style.bubble": "氣泡",
+      "message.style.plain": "簡潔"
    },
    "chat": {
      "save": "保存",
@@ -80,6 +84,7 @@
      "topics.export.title": "匯出",
      "topics.export.image": "匯出為圖片",
      "topics.export.md": "匯出為 Markdown",
+      "topics.export.word": "導出為 Word",
      "input.new_topic": "新話題",
      "input.topics": " 話題 ",
      "input.clear": "清除",
@@ -137,13 +142,38 @@
      "stream_output": "串流輸出",
      "search": "搜尋模型..."
    },
+    "images": {
+      "title": "繪圖",
+      "image.size": "影像尺寸",
+      "button.new.image": "新繪圖",
+      "button.delete.image": "刪除繪圖",
+      "button.delete.image.confirm": "確定要刪除此繪圖嗎?",
+      "number_images": "生成數量",
+      "number_images_tip": "一次生成的圖片數量 (1-4)",
+      "seed": "隨機種子",
+      "seed_tip": "相同的種子和提示詞可以生成相似的圖片",
+      "inference_steps": "推理步數",
+      "inference_steps_tip": "要執行的推理步數。步數越多，質量越高但耗時越長",
+      "guidance_scale": "引導比例",
+      "guidance_scale_tip": "無分類器指導。控制模型在尋找相關圖像時對提示詞的遵循程度",
+      "negative_prompt": "反向提示詞",
+      "negative_prompt_tip": "描述你不想在圖片中出現的內容",
+      "prompt_placeholder": "描述你想創建的圖片，例如：一個寧靜的湖泊，夕陽西下，遠處是群山",
+      "regenerate.confirm": "這將覆蓋已生成的圖片，是否繼續？"
+    },
    "files": {
      "title": "檔案",
      "file": "檔案",
      "name": "名稱",
      "size": "大小",
      "count": "數量",
-      "created_at": "建立時間"
+      "created_at": "建立時間",
+      "image": "圖片",
+      "text": "文本",
+      "document": "文檔",
+      "actions": "操作",
+      "open": "打開",
+      "all": "所有檔案"
    },
    "agents": {
      "title": "智能體",
@@ -169,7 +199,9 @@
      "edit.message.user.placeholder": "輸入用戶消息",
      "edit.message.empty.content": "會話輸入內容不能為空",
      "edit.model.select.title": "選擇模型",
-      "edit.settings.hide_preset_messages": "隱藏預設消息"
+      "edit.settings.hide_preset_messages": "隱藏預設消息",
+      "search.no_results": "沒有找到相關智能體",
+      "sorting.title": "排序"
    },
    "minapp": {
      "title": "小程序"
@@ -179,6 +211,7 @@
      "search.placeholder": "搜尋話題或訊息...",
      "continue_chat": "繼續聊天",
      "search.topics.empty": "沒有找到相關話題, 點擊回車鍵搜尋所有訊息",
+      "search.messages": "搜尋所有訊息",
      "locate.message": "定位到訊息"
    },
    "provider": {
@@ -307,7 +340,16 @@
      "topic.position": "話題位置",
      "topic.position.left": "左側",
      "topic.position.right": "右側",
-      "topic.show.time": "顯示話題時間"
+      "topic.show.time": "顯示話題時間",
+      "shortcuts": {
+        "title": "快速方式",
+        "action": "操作",
+        "key": "按鍵",
+        "new_topic": "新建話題",
+        "zoom_in": "放大界面",
+        "zoom_out": "縮小界面",
+        "zoom_reset": "重置縮放"
+      }
    },
    "translate": {
      "title": "翻譯",
@@ -315,7 +357,8 @@
      "button.translate": "翻譯",
      "error.not_configured": "翻譯模型未配置",
      "input.placeholder": "輸入文字進行翻譯",
-      "output.placeholder": "翻譯"
+      "output.placeholder": "翻譯",
+      "confirm": "原文已複製到剪貼簿，是否用翻譯後的文字替換？"
    },
    "languages": {
      "english": "英文",
@@ -338,11 +381,23 @@
    },
    "error": {
      "chat.response": "出現錯誤。如果尚未配置 API 密鑰，請前往設定 > 模型提供者中配置密鑰",
-      "backup.file_format": "備份文件格式錯誤"
+      "backup.file_format": "備份文件格式錯誤",
+      "provider_disabled": "模型提供商未啟用",
+      "no_api_key": "API 密鑰未配置"
    },
    "words": {
      "knowledgeGraph": "知識圖譜",
      "visualization": "可視化"
+    },
+    "export": {
+      "attached_files": "附件",
+      "user": "用戶",
+      "assistant": "助手",
+      "created": "創建時間",
+      "last_updated": "最後更新",
+      "messages": "訊息數",
+      "conversation_details": "會話詳情",
+      "conversation_history": "會話歷史"
    }
  }
 }
--- a/src/renderer/src/pages/agents/Agents.tsx
+++ b/src/renderer/src/pages/agents/Agents.tsx
@@ -1,162 +0,0 @@
-import { DeleteOutlined, EditOutlined, MoreOutlined, PlusOutlined } from '@ant-design/icons'
-import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
-import DragableList from '@renderer/components/DragableList'
-import { HStack } from '@renderer/components/Layout'
-import { Scrollbar } from '@renderer/components/Scrollbar'
-import { useAgents } from '@renderer/hooks/useAgents'
-import { createAssistantFromAgent } from '@renderer/services/assistant'
-import { Agent } from '@renderer/types'
-import { Button, Dropdown } from 'antd'
-import { ItemType } from 'antd/es/menu/interface'
-import { useCallback, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-import AddAgentPopup from './components/AddAgentPopup'
-
-interface Props {
-  onClick: (agent: Agent) => void
-}
-
-const Agents: React.FC<Props> = ({ onClick }) => {
-  const { t } = useTranslation()
-  const { agents, removeAgent, updateAgents } = useAgents()
-  const [dragging, setDragging] = useState(false)
-
-  const getMenuItems = useCallback(
-    (agent: Agent) =>
-      [
-        {
-          label: t('agents.edit.title'),
-          key: 'edit',
-          icon: <EditOutlined />,
-          onClick: () => AssistantSettingsPopup.show({ assistant: agent })
-        },
-        {
-          label: t('agents.add.button'),
-          key: 'create',
-          icon: <PlusOutlined />,
-          onClick: () => createAssistantFromAgent(agent)
-        },
-        { type: 'divider' },
-        {
-          label: t('common.delete'),
-          key: 'delete',
-          icon: <DeleteOutlined />,
-          danger: true,
-          onClick: () => {
-            window.modal.confirm({
-              centered: true,
-              content: t('agents.delete.popup.content'),
-              onOk: () => removeAgent(agent.id)
-            })
-          }
-        }
-      ] as ItemType[],
-    [removeAgent, t]
-  )
-
-  return (
-    <Scrollbar style={{ maxWidth: 'var(--assistants-width)' }}>
-      <Container style={{ paddingBottom: dragging ? 30 : 0 }}>
-        {agents.length > 0 && (
-          <DragableList
-            list={agents}
-            onUpdate={updateAgents}
-            onDragStart={() => setDragging(true)}
-            onDragEnd={() => setDragging(false)}>
-            {(agent: Agent) => (
-              <Dropdown menu={{ items: getMenuItems(agent) }} trigger={['contextMenu']}>
-                <AgentItem onClick={() => onClick(agent)}>
-                  <HStack alignItems="center" justifyContent="space-between" h="36px">
-                    <AgentItemName className="text-nowrap">
-                      {agent.emoji} {agent.name}
-                    </AgentItemName>
-                    <ActionButton className="actions" gap="15px" onClick={(e) => e.stopPropagation()}>
-                      <Dropdown menu={{ items: getMenuItems(agent) }} trigger={['hover']}>
-                        <MoreOutlined style={{ cursor: 'pointer' }} />
-                      </Dropdown>
-                    </ActionButton>
-                  </HStack>
-                  <AgentItemPrompt>{agent.prompt}</AgentItemPrompt>
-                </AgentItem>
-              </Dropdown>
-            )}
-          </DragableList>
-        )}
-        {!dragging && (
-          <Button
-            type="dashed"
-            icon={<PlusOutlined />}
-            onClick={() => AddAgentPopup.show()}
-            style={{ borderRadius: 20, height: 34 }}>
-            {t('agents.add.title')}
-          </Button>
-        )}
-        <div style={{ height: 10 }} />
-      </Container>
-    </Scrollbar>
-  )
-}
-
-const Container = styled.div`
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  border-right: 0.5px solid var(--color-border);
-  min-height: calc(100vh - var(--navbar-height));
-  width: var(--assistants-width);
-`
-
-const AgentItem = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 12px;
-  min-height: 38px;
-  border-radius: 10px;
-  user-select: none;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border: 0.5px solid var(--color-border);
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  &:hover {
-    .actions {
-      display: flex;
-    }
-  }
-  &:hover {
-    border: 0.5px solid var(--color-primary);
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  }
-`
-
-const AgentItemName = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`
-
-const AgentItemPrompt = styled.div`
-  font-size: 12px;
-  color: var(--color-text-soft);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-top: -5px;
-  color: var(--color-text-3);
-`
-
-const ActionButton = styled(HStack)`
-  align-items: center;
-  justify-content: center;
-  display: none;
-  background-color: var(--color-background-soft);
-  width: 24px;
-  height: 24px;
-  border-radius: 12px;
-  font-size: 16px;
-  color: var(--color-icon);
-`
-
-export default Agents
--- a/src/renderer/src/pages/agents/AgentsPage.tsx
+++ b/src/renderer/src/pages/agents/AgentsPage.tsx
@@ -1,31 +1,77 @@
+import { SearchOutlined } from '@ant-design/icons'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
-import { VStack } from '@renderer/components/Layout'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import SystemAgents from '@renderer/config/agents.json'
-import { createAssistantFromAgent } from '@renderer/services/assistant'
+import { createAssistantFromAgent } from '@renderer/services/AssistantService'
 import { Agent } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Col, Row, Typography } from 'antd'
+import { Col, Empty, Input, Row, Tabs as TabsAntd, Typography } from 'antd'
 import { groupBy, omit } from 'lodash'
-import { FC } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
 import styled from 'styled-components'

-import Agents from './Agents'
+import { groupTranslations } from './agentGroupTranslations'
 import AgentCard from './components/AgentCard'
+import MyAgents from './components/MyAgents'

 const { Title } = Typography

+const getAgentsFromSystemAgents = () => {
+  const agents: Agent[] = []
+  for (let i = 0; i < SystemAgents.length; i++) {
+    for (let j = 0; j < SystemAgents[i].group.length; j++) {
+      const agent = { ...SystemAgents[i], group: SystemAgents[i].group[j], topics: [], type: 'agent' } as Agent
+      agents.push(agent)
+    }
+  }
+  return agents
+}
+
+let _agentGroups: Record<string, Agent[]> = {}
+
 const AgentsPage: FC = () => {
-  const agentGroups = groupBy(SystemAgents, 'group')
-  const { t } = useTranslation()
+  const [search, setSearch] = useState('')
+
+  const agentGroups = useMemo(() => {
+    if (Object.keys(_agentGroups).length === 0) {
+      _agentGroups = groupBy(getAgentsFromSystemAgents(), 'group')
+    }
+    return _agentGroups
+  }, [])
+
+  const { t, i18n } = useTranslation()
+
+  const filteredAgentGroups = useMemo(() => {
+    const groups = { 我的: [] }
+
+    if (!search.trim()) {
+      Object.entries(agentGroups).forEach(([group, agents]) => {
+        groups[group] = agents
+      })
+      return groups
+    }
+
+    Object.entries(agentGroups).forEach(([group, agents]) => {
+      const filteredAgents = agents.filter(
+        (agent) =>
+          agent.name.toLowerCase().includes(search.toLowerCase()) ||
+          agent.description?.toLowerCase().includes(search.toLowerCase())
+      )
+      if (filteredAgents.length > 0) {
+        groups[group] = filteredAgents
+      }
+    })
+    return groups
+  }, [agentGroups, search])

  const getAgentName = (agent: Agent) => {
    return agent.emoji ? agent.emoji + ' ' + agent.name : agent.name
  }

-  const onAddAgentConfirm = (agent: Agent) => {
+  const onAddAgentConfirm = useCallback(
+    (agent: Agent) => {
      window.modal.confirm({
        title: getAgentName(agent),
        content: (
@@ -42,7 +88,9 @@ const AgentsPage: FC = () => {
        okText: t('agents.add.button'),
        onOk: () => createAssistantFromAgent(agent)
      })
-  }
+    },
+    [t]
+  )

  const getAgentFromSystemAgent = (agent: (typeof SystemAgents)[number]) => {
    return {
@@ -54,41 +102,78 @@ const AgentsPage: FC = () => {
    }
  }

+  const getLocalizedGroupName = useCallback(
+    (group: string) => {
+      const currentLang = i18n.language
+      return groupTranslations[group]?.[currentLang] || group
+    },
+    [i18n.language]
+  )
+
+  const tabItems = useMemo(() => {
+    let groups = Object.keys(filteredAgentGroups)
+
+    groups = groups.includes('办公') ? [groups[0], '办公', ...groups.slice(1)] : groups
+
+    return groups.map((group, i) => {
+      const id = String(i + 1)
+      const localizedGroupName = getLocalizedGroupName(group)
+
+      return {
+        label: localizedGroupName,
+        key: id,
+        children: (
+          <TabContent key={group}>
+            <Title level={5} key={group} style={{ marginBottom: 16 }}>
+              {localizedGroupName}
+            </Title>
+            <Row gutter={[20, 20]}>
+              {group === '我的' ? (
+                <MyAgents onClick={onAddAgentConfirm} search={search} />
+              ) : (
+                filteredAgentGroups[group]?.map((agent, index) => (
+                  <Col span={6} key={group + index}>
+                    <AgentCard onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))} agent={agent as any} />
+                  </Col>
+                ))
+              )}
+            </Row>
+          </TabContent>
+        )
+      }
+    })
+  }, [filteredAgentGroups, getLocalizedGroupName, onAddAgentConfirm, search])
+
  return (
    <Container>
      <Navbar>
-        <NavbarCenter style={{ borderRight: 'none' }}>{t('agents.title')}</NavbarCenter>
+        <NavbarCenter style={{ borderRight: 'none', justifyContent: 'space-between' }}>
+          {t('agents.title')}
+          <Input
+            placeholder={t('common.search')}
+            className="nodrag"
+            style={{ width: '30%', height: 28 }}
+            size="small"
+            variant="filled"
+            allowClear
+            suffix={<SearchOutlined />}
+            value={search}
+            maxLength={50}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          <div style={{ width: 80 }} />
+        </NavbarCenter>
      </Navbar>
      <ContentContainer id="content-container">
-        <Agents onClick={onAddAgentConfirm} />
-        <Scrollbar>
        <AssistantsContainer>
-            <VStack style={{ flex: 1 }}>
-              {Object.keys(agentGroups)
-                .reverse()
-                .map((group) => (
-                  <div key={group}>
-                    <Title level={5} key={group} style={{ marginBottom: 16 }}>
-                      {group}
-                    </Title>
-                    <Row gutter={16}>
-                      {agentGroups[group].map((agent, index) => {
-                        return (
-                          <Col span={8} key={group + index}>
-                            <AgentCard
-                              onClick={() => onAddAgentConfirm(getAgentFromSystemAgent(agent))}
-                              agent={agent as any}
-                            />
-                          </Col>
-                        )
-                      })}
-                    </Row>
-                  </div>
-                ))}
-              <div style={{ minHeight: 20 }} />
-            </VStack>
+          {tabItems.length > 0 ? (
+            <Tabs tabPosition="right" animated items={tabItems} />
+          ) : (
+            <EmptyView>
+              <Empty description={t('agents.search.no_results')} />
+            </EmptyView>
+          )}
        </AssistantsContainer>
-        </Scrollbar>
      </ContentContainer>
    </Container>
  )
@@ -107,6 +192,8 @@ const ContentContainer = styled.div`
  flex-direction: row;
  justify-content: center;
  height: 100%;
+  padding: 0 10px;
+  padding-left: 0;
 `

 const AssistantsContainer = styled.div`
@@ -114,7 +201,14 @@ const AssistantsContainer = styled.div`
  flex: 1;
  flex-direction: row;
  height: calc(100vh - var(--navbar-height));
-  padding: 15px 20px;
+`
+
+const TabContent = styled(Scrollbar)`
+  height: calc(100vh - var(--navbar-height));
+  padding: 10px 10px 10px 15px;
+  margin-right: -4px;
+  padding-bottom: 20px !important;
+  overflow-x: hidden;
 `

 const AgentPrompt = styled.div`
@@ -123,4 +217,63 @@ const AgentPrompt = styled.div`
  max-width: 560px;
 `

+const EmptyView = styled.div`
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+  color: var(--color-text-secondary);
+`
+
+const Tabs = styled(TabsAntd)`
+  display: flex;
+  flex: 1;
+  flex-direction: row-reverse;
+  .ant-tabs-tabpane {
+    padding-right: 0 !important;
+  }
+  .ant-tabs-nav {
+    min-width: 140px;
+    max-width: 140px;
+  }
+  .ant-tabs-nav-list {
+    padding: 10px 8px;
+  }
+  .ant-tabs-nav-operations {
+    display: none !important;
+  }
+  .ant-tabs-tab {
+    margin: 0 !important;
+    border-radius: 20px;
+    margin-bottom: 5px !important;
+    font-size: 13px;
+    justify-content: left;
+    padding: 7px 12px !important;
+    &:hover {
+      color: var(--color-text) !important;
+      background-color: var(--color-background-soft);
+    }
+  }
+  .ant-tabs-tab-active {
+    background-color: var(--color-background-mute);
+    border-right: none;
+  }
+  .ant-tabs-content-holder {
+    border-left: 0.5px solid var(--color-border);
+    border-right: none;
+  }
+  .ant-tabs-ink-bar {
+    display: none;
+  }
+  .ant-tabs-tab-btn:active {
+    color: var(--color-text) !important;
+  }
+  .ant-tabs-tab-active {
+    .ant-tabs-tab-btn {
+      color: var(--color-text) !important;
+    }
+  }
+`
+
 export default AgentsPage
--- a/src/renderer/src/pages/agents/agentGroupTranslations.ts
+++ b/src/renderer/src/pages/agents/agentGroupTranslations.ts
@@ -0,0 +1,180 @@
+export type GroupTranslations = {
+  [key: string]: {
+    'en-US': string
+    'zh-CN': string
+    'zh-TW': string
+  }
+}
+
+export const groupTranslations: GroupTranslations = {
+  我的: {
+    'en-US': 'My Agents',
+    'zh-CN': '我的',
+    'zh-TW': '我的'
+  },
+  职业: {
+    'en-US': 'Career',
+    'zh-CN': '职业',
+    'zh-TW': '職業'
+  },
+  商业: {
+    'en-US': 'Business',
+    'zh-CN': '商业',
+    'zh-TW': '商業'
+  },
+  工具: {
+    'en-US': 'Tools',
+    'zh-CN': '工具',
+    'zh-TW': '工具'
+  },
+  语言: {
+    'en-US': 'Language',
+    'zh-CN': '语言',
+    'zh-TW': '語言'
+  },
+  办公: {
+    'en-US': 'Office',
+    'zh-CN': '办公',
+    'zh-TW': '辦公'
+  },
+  通用: {
+    'en-US': 'General',
+    'zh-CN': '通用',
+    'zh-TW': '通用'
+  },
+  写作: {
+    'en-US': 'Writing',
+    'zh-CN': '写作',
+    'zh-TW': '寫作'
+  },
+  Artifacts: {
+    'en-US': 'Artifacts',
+    'zh-CN': 'Artifacts',
+    'zh-TW': 'Artifacts'
+  },
+  编程: {
+    'en-US': 'Programming',
+    'zh-CN': '编程',
+    'zh-TW': '編程'
+  },
+  情感: {
+    'en-US': 'Emotion',
+    'zh-CN': '情感',
+    'zh-TW': '情感'
+  },
+  教育: {
+    'en-US': 'Education',
+    'zh-CN': '教育',
+    'zh-TW': '教育'
+  },
+  创意: {
+    'en-US': 'Creative',
+    'zh-CN': '创意',
+    'zh-TW': '創意'
+  },
+  学术: {
+    'en-US': 'Academic',
+    'zh-CN': '学术',
+    'zh-TW': '學術'
+  },
+  设计: {
+    'en-US': 'Design',
+    'zh-CN': '设计',
+    'zh-TW': '設計'
+  },
+  艺术: {
+    'en-US': 'Art',
+    'zh-CN': '艺术',
+    'zh-TW': '藝術'
+  },
+  娱乐: {
+    'en-US': 'Entertainment',
+    'zh-CN': '娱乐',
+    'zh-TW': '娛樂'
+  },
+  生活: {
+    'en-US': 'Life',
+    'zh-CN': '生活',
+    'zh-TW': '生活'
+  },
+  医疗: {
+    'en-US': 'Medical',
+    'zh-CN': '医疗',
+    'zh-TW': '醫療'
+  },
+  游戏: {
+    'en-US': 'Games',
+    'zh-CN': '游戏',
+    'zh-TW': '遊戲'
+  },
+  翻译: {
+    'en-US': 'Translation',
+    'zh-CN': '翻译',
+    'zh-TW': '翻譯'
+  },
+  音乐: {
+    'en-US': 'Music',
+    'zh-CN': '音乐',
+    'zh-TW': '音樂'
+  },
+  点评: {
+    'en-US': 'Review',
+    'zh-CN': '点评',
+    'zh-TW': '點評'
+  },
+  文案: {
+    'en-US': 'Copywriting',
+    'zh-CN': '文案',
+    'zh-TW': '文案'
+  },
+  百科: {
+    'en-US': 'Encyclopedia',
+    'zh-CN': '百科',
+    'zh-TW': '百科'
+  },
+  健康: {
+    'en-US': 'Health',
+    'zh-CN': '健康',
+    'zh-TW': '健康'
+  },
+  营销: {
+    'en-US': 'Marketing',
+    'zh-CN': '营销',
+    'zh-TW': '營銷'
+  },
+  科学: {
+    'en-US': 'Science',
+    'zh-CN': '科学',
+    'zh-TW': '科學'
+  },
+  分析: {
+    'en-US': 'Analysis',
+    'zh-CN': '分析',
+    'zh-TW': '分析'
+  },
+  法律: {
+    'en-US': 'Legal',
+    'zh-CN': '法律',
+    'zh-TW': '法律'
+  },
+  咨询: {
+    'en-US': 'Consulting',
+    'zh-CN': '咨询',
+    'zh-TW': '諮詢'
+  },
+  金融: {
+    'en-US': 'Finance',
+    'zh-CN': '金融',
+    'zh-TW': '金融'
+  },
+  旅游: {
+    'en-US': 'Travel',
+    'zh-CN': '旅游',
+    'zh-TW': '旅遊'
+  },
+  管理: {
+    'en-US': 'Management',
+    'zh-CN': '管理',
+    'zh-TW': '管理'
+  }
+}
--- a/src/renderer/src/pages/agents/components/AddAgentCard.tsx
+++ b/src/renderer/src/pages/agents/components/AddAgentCard.tsx
@@ -0,0 +1,41 @@
+import { PlusOutlined } from '@ant-design/icons'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+interface AddAgentCardProps {
+  onClick: () => void
+  className?: string
+}
+
+const AddAgentCard = ({ onClick, className }: AddAgentCardProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <StyledCard className={className} onClick={onClick}>
+      <PlusOutlined style={{ fontSize: 24 }} />
+      <span style={{ marginTop: 10 }}>{t('agents.add.title')}</span>
+    </StyledCard>
+  )
+}
+
+const StyledCard = styled.div`
+  width: 100%;
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-background);
+  border-radius: 15px;
+  border: 1px dashed var(--color-border);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: var(--color-text-soft);
+
+  &:hover {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+`
+
+export default AddAgentCard
--- a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
+++ b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
@@ -5,8 +5,8 @@ import EmojiPicker from '@renderer/components/EmojiPicker'
 import { TopView } from '@renderer/components/TopView'
 import { AGENT_PROMPT } from '@renderer/config/prompts'
 import { useAgents } from '@renderer/hooks/useAgents'
-import { fetchGenerate } from '@renderer/services/api'
-import { getDefaultModel } from '@renderer/services/assistant'
+import { fetchGenerate } from '@renderer/services/ApiService'
+import { getDefaultModel } from '@renderer/services/AssistantService'
 import { Agent } from '@renderer/types'
 import { getLeadingEmoji, uuid } from '@renderer/utils'
 import { Button, Form, FormInstance, Input, Modal, Popover } from 'antd'
--- a/src/renderer/src/pages/agents/components/AgentCard.tsx
+++ b/src/renderer/src/pages/agents/components/AgentCard.tsx
@@ -1,77 +1,208 @@
+import { EllipsisOutlined } from '@ant-design/icons'
 import { Agent } from '@renderer/types'
-import { Col } from 'antd'
+import { getLeadingEmoji } from '@renderer/utils'
+import { Dropdown } from 'antd'
 import styled from 'styled-components'

 interface Props {
  agent: Agent
  onClick?: () => void
+  contextMenu?: { label: string; onClick: () => void }[]
+  menuItems?: {
+    key: string
+    label: string
+    icon?: React.ReactNode
+    danger?: boolean
+    onClick: () => void
+  }[]
 }

-const AgentCard: React.FC<Props> = ({ agent, onClick }) => {
-  return (
+const AgentCard: React.FC<Props> = ({ agent, onClick, contextMenu, menuItems }) => {
+  const emoji = agent.emoji || getLeadingEmoji(agent.name)
+  const prompt = (agent.description || agent.prompt).substring(0, 100).replace(/\\n/g, '')
+  const content = (
    <Container onClick={onClick}>
-      {agent.emoji && <EmojiHeader>{agent.emoji}</EmojiHeader>}
-      <Col>
-        <AgentHeader>
-          <AgentName style={{ marginBottom: 0 }}>{agent.name}</AgentName>
-        </AgentHeader>
-        <AgentCardPrompt>{agent.prompt}</AgentCardPrompt>
-      </Col>
+      {emoji && <BannerBackground className="banner-background">{emoji}</BannerBackground>}
+      <EmojiContainer className="emoji-container">{emoji}</EmojiContainer>
+      {menuItems && (
+        <MenuContainer onClick={(e) => e.stopPropagation()}>
+          <Dropdown
+            menu={{
+              items: menuItems.map((item) => ({
+                ...item,
+                onClick: (e) => {
+                  e.domEvent.stopPropagation()
+                  e.domEvent.preventDefault()
+                  setTimeout(() => {
+                    item.onClick()
+                  }, 0)
+                }
+              }))
+            }}
+            trigger={['click']}
+            placement="bottomRight">
+            <EllipsisOutlined style={{ cursor: 'pointer', fontSize: 20 }} />
+          </Dropdown>
+        </MenuContainer>
+      )}
+      <CardInfo className="card-info">
+        <AgentName>{agent.name}</AgentName>
+        <AgentPrompt className="agent-prompt">{prompt}...</AgentPrompt>
+      </CardInfo>
    </Container>
  )
+
+  if (contextMenu) {
+    return (
+      <Dropdown
+        menu={{
+          items: contextMenu.map((item) => ({
+            key: item.label,
+            label: item.label,
+            onClick: () => item.onClick()
+          }))
+        }}
+        trigger={['contextMenu']}>
+        {content}
+      </Dropdown>
+    )
+  }
+
+  return content
 }

 const Container = styled.div`
+  width: 100%;
+  height: 180px;
  display: flex;
-  flex-direction: row;
-  margin-bottom: 16px;
-  border: 0.5px solid var(--color-border);
-  border-radius: 10px;
-  padding: 15px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+  gap: 10px;
+  background-color: var(--color-background);
+  border-radius: 15px;
  position: relative;
+  overflow: hidden;
  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-  &:hover {
-    border: 0.5px solid var(--color-primary);
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border: 0.5px solid var(--color-border);
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 70px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    background: var(--color-background-soft);
+    transition: all 0.5s ease;
+    border-bottom: none;
+  }
+
+  * {
+    z-index: 1;
+  }
+
+  .agent-prompt {
+    opacity: 1;
+    transform: translateY(0);
  }
 `
-const EmojiHeader = styled.div`
-  width: 20px;
+
+const EmojiContainer = styled.div`
+  width: 55px;
+  height: 55px;
+  min-width: 55px;
+  min-height: 55px;
+  background-color: var(--color-background);
+  border-radius: 50%;
+  border: 4px solid var(--color-border);
+  margin-top: 8px;
+  transition: all 0.5s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+`
+
+const CardInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.5s ease;
+  padding: 0 15px;
+  width: 100%;
+`
+
+const AgentName = styled.span`
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--color-text);
+  margin-top: 5px;
+  line-height: 1.4;
+  max-width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+`
+
+const AgentPrompt = styled.p`
+  color: var(--color-text-soft);
+  font-size: 12px;
+  max-width: 100%;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.5s ease;
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+`
+
+const BannerBackground = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 70px;
  display: flex;
-  flex-direction: row;
  justify-content: center;
  align-items: center;
-  margin-right: 5px;
-  font-size: 20px;
-  line-height: 20px;
+  font-size: 500px;
+  opacity: 0.1;
+  filter: blur(8px);
+  z-index: 0;
+  overflow: hidden;
+  transition: all 0.5s ease;
 `

-const AgentHeader = styled.div`
+const MenuContainer = styled.div`
+  position: absolute;
+  top: 10px;
+  right: 10px;
  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
  align-items: center;
-`
+  justify-content: center;
+  background-color: var(--color-background-soft);
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  font-size: 16px;
+  color: var(--color-icon);
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: 2;

-const AgentName = styled.div`
-  line-height: 1.2;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  color: var(--color-text-1);
-`
-
-const AgentCardPrompt = styled.div`
-  color: #666;
-  margin-top: 6px;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  white-space: pre-wrap;
-  font-size: 12px;
+  ${Container}:hover & {
+    opacity: 1;
+  }
 `

 export default AgentCard
--- a/src/renderer/src/pages/agents/components/ManageAgentsPopup.tsx
+++ b/src/renderer/src/pages/agents/components/ManageAgentsPopup.tsx
@@ -0,0 +1,100 @@
+import { MenuOutlined } from '@ant-design/icons'
+import DragableList from '@renderer/components/DragableList'
+import { Box, HStack } from '@renderer/components/Layout'
+import { TopView } from '@renderer/components/TopView'
+import { useAgents } from '@renderer/hooks/useAgents'
+import { Empty, Modal } from 'antd'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+const PopupContainer: React.FC = () => {
+  const [open, setOpen] = useState(true)
+  const { t } = useTranslation()
+  const { agents, updateAgents } = useAgents()
+
+  const onOk = () => {
+    setOpen(false)
+  }
+
+  const onCancel = () => {
+    setOpen(false)
+  }
+
+  const onClose = async () => {
+    ManageAgentsPopup.hide()
+  }
+
+  useEffect(() => {
+    if (agents.length === 0) {
+      setOpen(false)
+    }
+  }, [agents])
+
+  return (
+    <Modal
+      title={t('agents.manage.title')}
+      open={open}
+      onOk={onOk}
+      onCancel={onCancel}
+      afterClose={onClose}
+      footer={null}
+      centered>
+      <Container>
+        {agents.length > 0 && (
+          <DragableList list={agents} onUpdate={updateAgents}>
+            {(item) => (
+              <AgentItem>
+                <Box mr={8}>
+                  {item.emoji} {item.name}
+                </Box>
+                <HStack gap="15px">
+                  <MenuOutlined style={{ cursor: 'move' }} />
+                </HStack>
+              </AgentItem>
+            )}
+          </DragableList>
+        )}
+        {agents.length === 0 && <Empty description="" />}
+      </Container>
+    </Modal>
+  )
+}
+
+const Container = styled.div`
+  padding: 12px 0;
+  height: 50vh;
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`
+
+const AgentItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-radius: 8px;
+  user-select: none;
+  background-color: var(--color-background-soft);
+  margin-bottom: 8px;
+  .anticon {
+    font-size: 16px;
+    color: var(--color-icon);
+  }
+  &:hover {
+    background-color: var(--color-background-mute);
+  }
+`
+
+export default class ManageAgentsPopup {
+  static topviewId = 0
+  static hide() {
+    TopView.hide('ManageAgentsPopup')
+  }
+  static show() {
+    TopView.show(<PopupContainer />, 'ManageAgentsPopup')
+  }
+}
--- a/src/renderer/src/pages/agents/components/MyAgents.tsx
+++ b/src/renderer/src/pages/agents/components/MyAgents.tsx
@@ -0,0 +1,109 @@
+import { DeleteOutlined, EditOutlined, PlusOutlined, SortAscendingOutlined } from '@ant-design/icons'
+import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
+import { useAgents } from '@renderer/hooks/useAgents'
+import { createAssistantFromAgent } from '@renderer/services/AssistantService'
+import { Agent } from '@renderer/types'
+import { Col } from 'antd'
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import AddAgentCard from './AddAgentCard'
+import AddAgentPopup from './AddAgentPopup'
+import AgentCard from './AgentCard'
+import ManageAgentsPopup from './ManageAgentsPopup'
+
+interface Props {
+  onClick?: (agent: Agent) => void
+  search?: string
+}
+
+const MyAgents: React.FC<Props> = ({ onClick, search }) => {
+  const { t } = useTranslation()
+  const { agents, removeAgent } = useAgents()
+
+  const filteredAgents = useMemo(() => {
+    if (!search?.trim()) return agents
+
+    return agents.filter(
+      (agent) =>
+        agent.name.toLowerCase().includes(search.toLowerCase()) ||
+        agent.description?.toLowerCase().includes(search.toLowerCase())
+    )
+  }, [agents, search])
+
+  const handleDelete = useCallback(
+    (agent: Agent) => {
+      window.modal.confirm({
+        centered: true,
+        content: t('agents.delete.popup.content'),
+        onOk: () => removeAgent(agent.id)
+      })
+    },
+    [removeAgent, t]
+  )
+
+  return (
+    <>
+      {filteredAgents.map((agent) => {
+        const dropdownMenuItems = [
+          {
+            key: 'edit',
+            label: t('agents.edit.title'),
+            icon: <EditOutlined />,
+            onClick: () => AssistantSettingsPopup.show({ assistant: agent })
+          },
+          {
+            key: 'create',
+            label: t('agents.add.button'),
+            icon: <PlusOutlined />,
+            onClick: () => createAssistantFromAgent(agent)
+          },
+          {
+            key: 'sort',
+            label: t('agents.sorting.title'),
+            icon: <SortAscendingOutlined />,
+            onClick: () => ManageAgentsPopup.show()
+          },
+          {
+            key: 'delete',
+            label: t('common.delete'),
+            icon: <DeleteOutlined />,
+            danger: true,
+            onClick: () => handleDelete(agent)
+          }
+        ]
+
+        const contextMenuItems = [
+          {
+            label: t('agents.edit.title'),
+            onClick: () => AssistantSettingsPopup.show({ assistant: agent })
+          },
+          {
+            label: t('agents.add.button'),
+            onClick: () => createAssistantFromAgent(agent)
+          },
+          {
+            label: t('common.delete'),
+            onClick: () => handleDelete(agent)
+          }
+        ]
+
+        return (
+          <Col span={6} key={agent.id}>
+            <AgentCard
+              agent={agent}
+              onClick={() => onClick?.(agent)}
+              contextMenu={contextMenuItems}
+              menuItems={dropdownMenuItems}
+            />
+          </Col>
+        )
+      })}
+      <Col span={6}>
+        <AddAgentCard onClick={() => AddAgentPopup.show()} />
+      </Col>
+    </>
+  )
+}
+
+export default MyAgents
--- a/src/renderer/src/pages/files/FilesPage.tsx
+++ b/src/renderer/src/pages/files/FilesPage.tsx
@@ -1,45 +1,44 @@
+import { FileImageOutlined, FilePdfOutlined, FileTextOutlined } from '@ant-design/icons'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
-import { VStack } from '@renderer/components/Layout'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import db from '@renderer/databases'
-import FileManager from '@renderer/services/file'
+import FileManager from '@renderer/services/FileManager'
 import { FileType, FileTypes } from '@renderer/types'
 import { formatFileSize } from '@renderer/utils'
-import { Image, Table } from 'antd'
+import { Col, Image, Menu, Row, Spin, Table } from 'antd'
 import dayjs from 'dayjs'
 import { useLiveQuery } from 'dexie-react-hooks'
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 const FilesPage: FC = () => {
  const { t } = useTranslation()
-  const files = useLiveQuery<FileType[]>(() => db.files.orderBy('count').reverse().toArray())
+  const [fileType, setFileType] = useState<FileTypes | 'all'>('all')
+
+  const files = useLiveQuery<FileType[]>(() => {
+    if (fileType === 'all') {
+      return db.files.orderBy('count').toArray()
+    }
+    return db.files.where('type').equals(fileType).sortBy('count')
+  }, [fileType])

  const dataSource = files?.map((file) => {
-    const isImage = file.type === FileTypes.IMAGE
-    const ImageView = <Image src={'file://' + file.path} preview={false} style={{ maxHeight: '40px' }} />
    return {
      key: file.id,
-      file: isImage ? ImageView : <FileNameText className="text-nowrap">{file.origin_name}</FileNameText>,
-      name: <a href={'file://' + FileManager.getSafePath(file)}>{file.origin_name}</a>,
+      file: <FileNameText className="text-nowrap">{file.origin_name}</FileNameText>,
      size: formatFileSize(file),
      count: file.count,
-      created_at: dayjs(file.created_at).format('MM-DD HH:mm')
+      created_at: dayjs(file.created_at).format('MM-DD HH:mm'),
+      actions: <a href={'file://' + FileManager.getSafePath(file)}>{t('files.open')}</a>
    }
  })

  const columns = [
-    {
-      title: t('files.file'),
-      dataIndex: 'file',
-      key: 'file',
-      width: '300px'
-    },
    {
      title: t('files.name'),
-      dataIndex: 'name',
-      key: 'name'
+      dataIndex: 'file',
+      key: 'file'
    },
    {
      title: t('files.size'),
@@ -58,26 +57,68 @@ const FilesPage: FC = () => {
      dataIndex: 'created_at',
      key: 'created_at',
      width: '120px'
+    },
+    {
+      title: t('files.actions'),
+      dataIndex: 'actions',
+      key: 'actions',
+      width: '50px'
    }
  ]

+  const menuItems = [
+    { key: 'all', label: t('files.all'), icon: <FileTextOutlined /> },
+    { key: FileTypes.IMAGE, label: t('files.image'), icon: <FileImageOutlined /> },
+    { key: FileTypes.TEXT, label: t('files.text'), icon: <FileTextOutlined /> },
+    { key: FileTypes.DOCUMENT, label: t('files.document'), icon: <FilePdfOutlined /> }
+  ]
+
  return (
    <Container>
      <Navbar>
        <NavbarCenter style={{ borderRight: 'none' }}>{t('files.title')}</NavbarCenter>
      </Navbar>
      <ContentContainer id="content-container">
-        <Scrollbar>
-          <VStack style={{ width: '100%', padding: 15 }}>
+        <SideNav>
+          <Menu selectedKeys={[fileType]} items={menuItems} onSelect={({ key }) => setFileType(key as FileTypes)} />
+        </SideNav>
+        <TableContainer right>
+          {fileType === FileTypes.IMAGE && files?.length && files?.length > 0 ? (
+            <Image.PreviewGroup>
+              <Row gutter={[16, 16]}>
+                {files?.map((file) => (
+                  <Col key={file.id} xs={24} sm={12} md={8} lg={4} xl={3}>
+                    <ImageWrapper>
+                      <LoadingWrapper>
+                        <Spin />
+                      </LoadingWrapper>
+                      <Image
+                        src={FileManager.getFileUrl(file)}
+                        style={{ height: '100%', objectFit: 'cover', cursor: 'pointer' }}
+                        preview={{ mask: false }}
+                        onLoad={(e) => {
+                          const img = e.target as HTMLImageElement
+                          img.parentElement?.classList.add('loaded')
+                        }}
+                      />
+                      <ImageInfo>
+                        <div>{formatFileSize(file)}</div>
+                      </ImageInfo>
+                    </ImageWrapper>
+                  </Col>
+                ))}
+              </Row>
+            </Image.PreviewGroup>
+          ) : (
            <Table
              dataSource={dataSource}
              columns={columns}
-              style={{ width: '100%', marginBottom: 20 }}
+              style={{ width: '100%' }}
              size="small"
              pagination={{ pageSize: 100 }}
            />
-          </VStack>
-        </Scrollbar>
+          )}
+        </TableContainer>
      </ContentContainer>
    </Container>
  )
@@ -87,21 +128,119 @@ const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
-  height: 100%;
+  height: calc(100vh - var(--navbar-height));
 `

 const ContentContainer = styled.div`
  display: flex;
  flex: 1;
  flex-direction: row;
-  justify-content: center;
-  height: 100%;
+  min-height: 100%;
+`
+
+const TableContainer = styled(Scrollbar)`
+  padding: 15px;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
 `

 const FileNameText = styled.div`
  font-size: 14px;
  color: var(--color-text);
-  max-width: 300px;
+`
+
+const ImageWrapper = styled.div`
+  position: relative;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 8px;
+  background-color: var(--color-background-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0.5px solid var(--color-border);
+
+  .ant-image {
+    height: 100%;
+    width: 100%;
+    opacity: 0;
+    transition:
+      opacity 0.3s ease,
+      transform 0.3s ease;
+
+    &.loaded {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    .ant-image.loaded {
+      transform: scale(1.05);
+    }
+
+    div:last-child {
+      opacity: 1;
+    }
+  }
+`
+
+const LoadingWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-background-soft);
+`
+
+const ImageInfo = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  padding: 5px 8px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  font-size: 12px;
+
+  > div:first-child {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`
+
+const SideNav = styled.div`
+  width: var(--assistants-width);
+  border-right: 0.5px solid var(--color-border);
+  padding: 15px;
+
+  .ant-menu {
+    border-inline-end: none !important;
+    background: transparent;
+  }
+
+  .ant-menu-item {
+    height: 40px;
+    line-height: 40px;
+    margin: 4px 0;
+    width: 100%;
+
+    &:hover {
+      background-color: var(--color-background-soft);
+    }
+
+    &.ant-menu-item-selected {
+      background-color: var(--color-background-soft);
+      color: var(--color-primary);
+    }
+  }
 `

 export default FilesPage
--- a/src/renderer/src/pages/history/HistoryPage.tsx
+++ b/src/renderer/src/pages/history/HistoryPage.tsx
@@ -82,10 +82,15 @@ const TopicsPage: FC = () => {
          />
        </Header>
        <Divider style={{ margin: 0 }} />
-        <TopicsHistory keywords={search} onClick={onTopicClick as any} style={{ display: isShow('topics') }} />
+        <TopicsHistory
+          keywords={search}
+          onClick={onTopicClick as any}
+          onSearch={onSearch}
+          style={{ display: isShow('topics') }}
+        />
        <TopicMessages topic={topic} style={{ display: isShow('topic') }} />
        <SearchResults
-          keywords={search}
+          keywords={isShow('search') ? search : ''}
          onMessageClick={onMessageClick}
          onTopicClick={onTopicClick}
          style={{ display: isShow('search') }}
--- a/src/renderer/src/pages/history/components/SearchMessage.tsx
+++ b/src/renderer/src/pages/history/components/SearchMessage.tsx
@@ -1,7 +1,7 @@
 import { ArrowRightOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
 import { default as MessageItem } from '@renderer/pages/home/Messages/Message'
-import { locateToMessage } from '@renderer/services/messages'
+import { locateToMessage } from '@renderer/services/MessagesService'
 import { Message } from '@renderer/types'
 import { Button } from 'antd'
 import { FC } from 'react'
@@ -24,7 +24,7 @@ const SearchMessage: FC<Props> = ({ message, ...props }) => {
  return (
    <MessagesContainer {...props}>
      <ContainerWrapper style={{ paddingTop: 20, paddingBottom: 20, position: 'relative' }}>
-        <MessageItem message={message} showMenu={false} />
+        <MessageItem message={message} />
        <Button
          type="text"
          size="middle"
--- a/src/renderer/src/pages/history/components/SearchResults.tsx
+++ b/src/renderer/src/pages/history/components/SearchResults.tsx
@@ -48,6 +48,13 @@ const SearchResults: FC<Props> = ({ keywords, onMessageClick, onTopicClick, ...p

  const onSearch = useCallback(async () => {
    setSearchResults([])
+
+    if (keywords.length === 0) {
+      setSearchStats({ count: 0, time: 0 })
+      setSearchTerms([])
+      return
+    }
+
    const startTime = performance.now()
    const results: { message: Message; topic: Topic }[] = []
    const newSearchTerms = keywords
@@ -74,8 +81,12 @@ const SearchResults: FC<Props> = ({ keywords, onMessageClick, onTopicClick, ...p
  const highlightText = (text: string) => {
    let highlightedText = removeMarkdown(text)
    searchTerms.forEach((term) => {
+      try {
        const regex = new RegExp(term, 'gi')
        highlightedText = highlightedText.replace(regex, (match) => `<mark>${match}</mark>`)
+      } catch (error) {
+        //
+      }
    })
    return <span dangerouslySetInnerHTML={{ __html: highlightedText }} />
  }
--- a/src/renderer/src/pages/history/components/TopicMessages.tsx
+++ b/src/renderer/src/pages/history/components/TopicMessages.tsx
@@ -1,9 +1,9 @@
 import { ArrowRightOutlined, MessageOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
 import useScrollPosition from '@renderer/hooks/useScrollPosition'
-import { getAssistantById } from '@renderer/services/assistant'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { locateToMessage } from '@renderer/services/messages'
+import { getAssistantById } from '@renderer/services/AssistantService'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import { locateToMessage } from '@renderer/services/MessagesService'
 import { Topic } from '@renderer/types'
 import { Button, Divider, Empty } from 'antd'
 import { t } from 'i18next'
@@ -38,7 +38,7 @@ const TopicMessages: FC<Props> = ({ topic, ...props }) => {
      <ContainerWrapper style={{ paddingTop: 30, paddingBottom: 30 }}>
        {topic?.messages.map((message) => (
          <div key={message.id} style={{ position: 'relative' }}>
-            <MessageItem message={message} showMenu={false} />
+            <MessageItem message={message} />
            <Button
              type="text"
              size="middle"
--- a/src/renderer/src/pages/history/components/TopicsHistory.tsx
+++ b/src/renderer/src/pages/history/components/TopicsHistory.tsx
@@ -1,8 +1,10 @@
+import { SearchOutlined } from '@ant-design/icons'
+import { VStack } from '@renderer/components/Layout'
 import { useAssistants } from '@renderer/hooks/useAssistant'
 import useScrollPosition from '@renderer/hooks/useScrollPosition'
 import { getTopicById } from '@renderer/hooks/useTopic'
 import { Topic } from '@renderer/types'
-import { Divider, Empty } from 'antd'
+import { Button, Divider, Empty } from 'antd'
 import dayjs from 'dayjs'
 import { groupBy, isEmpty, orderBy } from 'lodash'
 import { useTranslation } from 'react-i18next'
@@ -11,9 +13,10 @@ import styled from 'styled-components'
 type Props = {
  keywords: string
  onClick: (topic: Topic) => void
+  onSearch: () => void
 } & React.HTMLAttributes<HTMLDivElement>

-const TopicsHistory: React.FC<Props> = ({ keywords, onClick, ...props }) => {
+const TopicsHistory: React.FC<Props> = ({ keywords, onClick, onSearch, ...props }) => {
  const { assistants } = useAssistants()
  const { t } = useTranslation()
  const { handleScroll, containerRef } = useScrollPosition('TopicsHistory')
@@ -31,9 +34,12 @@ const TopicsHistory: React.FC<Props> = ({ keywords, onClick, ...props }) => {
  if (isEmpty(filteredTopics)) {
    return (
      <ListContainer {...props}>
-        <ContainerWrapper>
+        <VStack alignItems="center">
          <Empty description={t('history.search.topics.empty')} />
-        </ContainerWrapper>
+          <Button style={{ width: 200, marginTop: 20 }} type="primary" onClick={onSearch} icon={<SearchOutlined />}>
+            {t('history.search.messages')}
+          </Button>
+        </VStack>
      </ListContainer>
    )
  }
@@ -58,6 +64,13 @@ const TopicsHistory: React.FC<Props> = ({ keywords, onClick, ...props }) => {
            ))}
          </ListItem>
        ))}
+        {keywords.length >= 2 && (
+          <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+            <Button style={{ width: 200, marginTop: 20 }} type="primary" onClick={onSearch} icon={<SearchOutlined />}>
+              {t('history.search.messages')}
+            </Button>
+          </div>
+        )}
        <div style={{ minHeight: 30 }}></div>
      </ContainerWrapper>
    </ListContainer>
--- a/src/renderer/src/pages/home/Chat.tsx
+++ b/src/renderer/src/pages/home/Chat.tsx
@@ -19,13 +19,18 @@ interface Props {

 const Chat: FC<Props> = (props) => {
  const { assistant } = useAssistant(props.assistant.id)
-  const { topicPosition } = useSettings()
+  const { topicPosition, messageStyle } = useSettings()
  const { showTopics } = useShowTopics()

  return (
-    <Container id="chat">
+    <Container id="chat" className={messageStyle}>
      <Main vertical flex={1} justify="space-between">
-        <Messages assistant={assistant} topic={props.activeTopic} setActiveTopic={props.setActiveTopic} />
+        <Messages
+          key={props.activeTopic.id}
+          assistant={assistant}
+          topic={props.activeTopic}
+          setActiveTopic={props.setActiveTopic}
+        />
        <Inputbar assistant={assistant} setActiveTopic={props.setActiveTopic} />
      </Main>
      {topicPosition === 'right' && showTopics && (
@@ -47,7 +52,35 @@ const Container = styled.div`
  height: 100%;
  flex: 1;
  justify-content: space-between;
-  background-color: var(--color-background);
+  &.bubble {
+    background-color: var(--chat-background);
+    .system-prompt {
+      background-color: var(--chat-background-assistant);
+    }
+    .message-content-container {
+      margin: 5px 0;
+      border-radius: 8px;
+      padding: 10px 15px 0 15px;
+    }
+    .message-user {
+      .markdown,
+      .anticon,
+      .iconfont,
+      .message-tokens {
+        color: var(--chat-text-user);
+      }
+      .message-action-button:hover {
+        background-color: var(--color-white-soft);
+      }
+    }
+    #inputbar {
+      border-radius: 0;
+      margin: 0;
+      border: none;
+      border-top: 1px solid var(--color-border-mute);
+      background: var(--color-background);
+    }
+  }
 `

 const Main = styled(Flex)`
--- a/src/renderer/src/pages/home/HomePage.tsx
+++ b/src/renderer/src/pages/home/HomePage.tsx
@@ -52,6 +52,7 @@ const Container = styled.div`
  display: flex;
  flex: 1;
  flex-direction: column;
+  max-width: calc(100vw - var(--sidebar-width));
 `

 const ContentContainer = styled.div`
--- a/src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx
+++ b/src/renderer/src/pages/home/Inputbar/AttachmentPreview.tsx
@@ -1,4 +1,4 @@
-import FileManager from '@renderer/services/file'
+import FileManager from '@renderer/services/FileManager'
 import { FileType } from '@renderer/types'
 import { Upload } from 'antd'
 import { isEmpty } from 'lodash'
@@ -35,8 +35,9 @@ const Container = styled.div`
  display: flex;
  flex-direction: row;
  gap: 10px;
-  margin: 10px 20px;
-  margin-right: 0;
+  padding: 10px 20px;
+  background: var(--color-background);
+  border-top: 1px solid var(--color-border-mute);
 `

 export default AttachmentPreview
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -11,12 +11,13 @@ import { documentExts, imageExts, textExts } from '@renderer/config/constant'
 import { isVisionModel } from '@renderer/config/models'
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
-import { useSettings } from '@renderer/hooks/useSettings'
-import { useRuntime, useShowTopics } from '@renderer/hooks/useStore'
-import { addAssistantMessagesToTopic, getDefaultTopic } from '@renderer/services/assistant'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import FileManager from '@renderer/services/file'
-import { estimateTextTokens as estimateTxtTokens } from '@renderer/services/tokens'
+import { useRuntime } from '@renderer/hooks/useRuntime'
+import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings'
+import { useShowTopics } from '@renderer/hooks/useStore'
+import { addAssistantMessagesToTopic, getDefaultTopic } from '@renderer/services/AssistantService'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import FileManager from '@renderer/services/FileManager'
+import { estimateTextTokens as estimateTxtTokens } from '@renderer/services/TokenService'
 import store, { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setGenerating, setSearching } from '@renderer/store/runtime'
 import { Assistant, FileType, Message, Topic } from '@renderer/types'
@@ -57,6 +58,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
  const containerRef = useRef(null)
  const { showTopics, toggleShowTopics } = useShowTopics()
  const { searching } = useRuntime()
+  const { isBubbleStyle } = useMessageStyle()
  const dispatch = useAppDispatch()

  const isVision = useMemo(() => isVisionModel(model), [model])
@@ -87,6 +89,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
      assistantId: assistant.id,
      topicId: assistant.topics[0].id || uuid(),
      createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      type: 'text',
      status: 'success'
    }

@@ -297,7 +300,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
          autoFocus
          contextMenu="true"
          variant="borderless"
-          rows={1}
+          rows={isBubbleStyle ? 2 : 1}
          ref={textareaRef}
          style={{ fontSize }}
          styles={{ textarea: TextareaStyle }}
@@ -373,11 +376,6 @@ const Container = styled.div`
  flex-direction: column;
 `

-const TextareaStyle: CSSProperties = {
-  paddingLeft: 0,
-  padding: '10px 15px 8px'
-}
-
 const InputBarContainer = styled.div`
  border: 1px solid var(--color-border-soft);
  transition: all 0.3s ease;
@@ -386,16 +384,24 @@ const InputBarContainer = styled.div`
  border-radius: 10px;
 `

+const TextareaStyle: CSSProperties = {
+  paddingLeft: 0,
+  padding: '10px 15px 8px'
+}
+
 const Textarea = styled(TextArea)`
  padding: 0;
  border-radius: 0;
  display: flex;
  flex: 1;
  font-family: Ubuntu;
-  resize: vertical;
+  resize: none !important;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
+  &.ant-input {
+    line-height: 1.4;
+  }
 `

 const Toolbar = styled.div`
--- a/src/renderer/src/pages/home/Markdown/Artifacts.tsx
+++ b/src/renderer/src/pages/home/Markdown/Artifacts.tsx
@@ -1,3 +1,4 @@
+import { DownloadOutlined, ExpandOutlined } from '@ant-design/icons'
 import MinApp from '@renderer/components/MinApp'
 import { AppLogo } from '@renderer/config/env'
 import { extractTitle } from '@renderer/utils/formula'
@@ -31,10 +32,10 @@ const Artifacts: FC<Props> = ({ html }) => {

  return (
    <Container>
-      <Button type="primary" size="middle" onClick={onPreview}>
+      <Button type="primary" icon={<ExpandOutlined />} onClick={onPreview}>
        {t('chat.artifacts.button.preview')}
      </Button>
-      <Button size="middle" onClick={onDownload}>
+      <Button icon={<DownloadOutlined />} onClick={onDownload}>
        {t('chat.artifacts.button.download')}
      </Button>
    </Container>
--- a/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
+++ b/src/renderer/src/pages/home/Markdown/CodeBlock.tsx
@@ -88,7 +88,6 @@ const CodeHeader = styled.div`
  color: var(--color-text);
  font-size: 14px;
  font-weight: bold;
-  /* background-color: var(--color-code-background); */
  height: 34px;
  padding: 0 10px;
  border-top-left-radius: 8px;
--- a/src/renderer/src/pages/home/Markdown/ImagePreview.tsx
+++ b/src/renderer/src/pages/home/Markdown/ImagePreview.tsx
@@ -8,19 +8,21 @@ import {
  ZoomOutOutlined
 } from '@ant-design/icons'
 import { download } from '@renderer/utils/download'
-import { Image, Space } from 'antd'
+import { Image as AntImage, ImageProps as AntImageProps, Space } from 'antd'
 import React from 'react'
 import styled from 'styled-components'

-interface ImagePreviewProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+interface ImagePreviewProps extends AntImageProps {
  src: string
 }

-const ImagePreview: React.FC<ImagePreviewProps> = ({ src }) => {
+const ImagePreview: React.FC<ImagePreviewProps> = ({ src, ...props }) => {
  return (
-    <Image
+    <AntImage
      src={src}
+      {...props}
      preview={{
+        mask: typeof props.preview === 'object' ? props.preview.mask : false,
        toolbarRender: (
          _,
          {
--- a/src/renderer/src/pages/home/Markdown/Markdown.tsx
+++ b/src/renderer/src/pages/home/Markdown/Markdown.tsx
@@ -49,6 +49,7 @@ const Markdown: FC<Props> = ({ message }) => {
      className="markdown"
      rehypePlugins={rehypePlugins}
      remarkPlugins={[remarkMath, remarkGfm]}
+      disallowedElements={mathEngine === 'KaTeX' ? ['style'] : []}
      components={
        {
          a: Link,
--- a/src/renderer/src/pages/home/Messages/Message.tsx
+++ b/src/renderer/src/pages/home/Messages/Message.tsx
@@ -1,65 +1,87 @@
 import { FONT_FAMILY } from '@renderer/config/constant'
+import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useModel } from '@renderer/hooks/useModel'
-import { useSettings } from '@renderer/hooks/useSettings'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { Message } from '@renderer/types'
+import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings'
+import { fetchChatCompletion } from '@renderer/services/ApiService'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import { estimateMessageUsage } from '@renderer/services/TokenService'
+import { Message, Topic } from '@renderer/types'
+import { classNames, runAsyncFunction } from '@renderer/utils'
 import { Divider } from 'antd'
-import { FC, memo, useEffect, useMemo, useRef } from 'react'
+import { Dispatch, FC, memo, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 import MessageContent from './MessageContent'
 import MessageHeader from './MessageHeader'
 import MessageMenubar from './MessageMenubar'
-import MessgeTokens from './MessageTokens'
+import MessageTokens from './MessageTokens'

 interface Props {
  message: Message
+  topic?: Topic
  index?: number
  total?: number
-  lastMessage?: boolean
-  showMenu?: boolean
  hidePresetMessages?: boolean
-  onEditMessage?: (message: Message) => void
+  onGetMessages?: () => Message[]
+  onSetMessages?: Dispatch<SetStateAction<Message[]>>
  onDeleteMessage?: (message: Message) => void
 }

 const MessageItem: FC<Props> = ({
-  message,
+  message: _message,
+  topic,
  index,
-  lastMessage,
-  showMenu = true,
  hidePresetMessages,
-  onEditMessage,
-  onDeleteMessage
+  onDeleteMessage,
+  onSetMessages,
+  onGetMessages
 }) => {
+  const [message, setMessage] = useState(_message)
  const { t } = useTranslation()
  const { assistant, setModel } = useAssistant(message.assistantId)
  const model = useModel(message.modelId)
+  const { isBubbleStyle } = useMessageStyle()
  const { showMessageDivider, messageFont, fontSize } = useSettings()
-  const messageRef = useRef<HTMLDivElement>(null)
+  const messageContainerRef = useRef<HTMLDivElement>(null)

-  const isLastMessage = lastMessage || index === 0
+  const isLastMessage = index === 0
  const isAssistantMessage = message.role === 'assistant'

+  const showMenubar = !message.status.includes('ing')
+
  const fontFamily = useMemo(() => {
    return messageFont === 'serif' ? FONT_FAMILY.replace('sans-serif', 'serif').replace('Ubuntu, ', '') : FONT_FAMILY
  }, [messageFont])

  const messageBorder = showMessageDivider ? undefined : 'none'
+  const messageBackground = isBubbleStyle
+    ? isAssistantMessage
+      ? 'var(--chat-background-assistant)'
+      : 'var(--chat-background-user)'
+    : undefined
+
+  const onEditMessage = useCallback(
+    (msg: Message) => {
+      setMessage(msg)
+      const messages = onGetMessages?.().map((m) => (m.id === message.id ? message : m))
+      messages && onSetMessages?.(messages)
+      topic && db.topics.update(topic.id, { messages })
+    },
+    [message, onGetMessages, onSetMessages, topic]
+  )

  useEffect(() => {
    const unsubscribes = [
      EventEmitter.on(EVENT_NAMES.LOCATE_MESSAGE + ':' + message.id, (highlight: boolean = true) => {
-        if (messageRef.current) {
-          messageRef.current.scrollIntoView({ behavior: 'smooth' })
+        if (messageContainerRef.current) {
+          messageContainerRef.current.scrollIntoView({ behavior: 'smooth' })
          if (highlight) {
            setTimeout(() => {
-              messageRef.current?.classList.add('message-highlight')
-              setTimeout(() => {
-                messageRef.current?.classList.remove('message-highlight')
-              }, 2500)
+              const classList = messageContainerRef.current?.classList
+              classList?.add('message-highlight')
+              setTimeout(() => classList?.remove('message-highlight'), 2500)
            }, 500)
          }
        }
@@ -68,6 +90,41 @@ const MessageItem: FC<Props> = ({
    return () => unsubscribes.forEach((unsub) => unsub())
  }, [message])

+  useEffect(() => {
+    if (message.role === 'user' && !message.usage) {
+      runAsyncFunction(async () => {
+        const usage = await estimateMessageUsage(message)
+        setMessage({ ...message, usage })
+        const topic = await db.topics.get({ id: message.topicId })
+        const messages = topic?.messages.map((m) => (m.id === message.id ? { ...m, usage } : m))
+        db.topics.update(message.topicId, { messages })
+      })
+    }
+  }, [message])
+
+  useEffect(() => {
+    if (topic && onGetMessages && onSetMessages) {
+      if (message.status === 'sending' && index === 0) {
+        const messages = onGetMessages()
+        fetchChatCompletion({
+          message,
+          messages: messages.filter((m) => !m.status.includes('ing')),
+          assistant,
+          topic,
+          onResponse: (msg) => {
+            setMessage(msg)
+            if (msg.status !== 'pending') {
+              const _messages = messages.map((m) => (m.id === msg.id ? msg : m))
+              onSetMessages(_messages)
+              db.topics.update(topic.id, { messages: _messages })
+            }
+          }
+        })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
  if (hidePresetMessages && message.isPreset) {
    return null
  }
@@ -81,13 +138,27 @@ const MessageItem: FC<Props> = ({
  }

  return (
-    <MessageContainer key={message.id} className="message" ref={messageRef}>
+    <MessageContainer
+      key={message.id}
+      className={classNames({
+        message: true,
+        'message-assistant': isAssistantMessage,
+        'message-user': !isAssistantMessage
+      })}
+      ref={messageContainerRef}
+      style={isBubbleStyle ? { alignItems: isAssistantMessage ? 'start' : 'end' } : undefined}>
      <MessageHeader message={message} assistant={assistant} model={model} />
-      <MessageContentContainer style={{ fontFamily, fontSize }}>
+      <MessageContentContainer
+        className="message-content-container"
+        style={{ fontFamily, fontSize, background: messageBackground }}>
        <MessageContent message={message} model={model} />
-        {!lastMessage && showMenu && (
-          <MessageFooter style={{ border: messageBorder, flexDirection: isLastMessage ? 'row-reverse' : undefined }}>
-            <MessgeTokens message={message} isLastMessage={isLastMessage} />
+        {showMenubar && (
+          <MessageFooter
+            style={{
+              border: messageBorder,
+              flexDirection: isLastMessage || isBubbleStyle ? 'row-reverse' : undefined
+            }}>
+            <MessageTokens message={message} isLastMessage={isLastMessage} />
            <MessageMenubar
              message={message}
              model={model}
@@ -129,6 +200,7 @@ const MessageContainer = styled.div`
 `

 const MessageContentContainer = styled.div`
+  max-width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
@@ -145,6 +217,7 @@ const MessageFooter = styled.div`
  padding: 2px 0;
  margin-top: 2px;
  border-top: 0.5px dashed var(--color-border);
+  gap: 20px;
 `

 export default memo(MessageItem)
--- a/src/renderer/src/pages/home/Messages/MessageAttachments.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageAttachments.tsx
@@ -1,4 +1,4 @@
-import FileManager from '@renderer/services/file'
+import FileManager from '@renderer/services/FileManager'
 import { FileTypes, Message } from '@renderer/types'
 import { Image as AntdImage, Upload } from 'antd'
 import { FC } from 'react'
@@ -16,7 +16,7 @@ const MessageAttachments: FC<Props> = ({ message }) => {
  if (message?.files && message.files[0]?.type === FileTypes.IMAGE) {
    return (
      <Container>
-        {message.files?.map((image) => <Image src={'file://' + image.path} key={image.id} width="33%" />)}
+        {message.files?.map((image) => <Image src={FileManager.getFileUrl(image)} key={image.id} width="33%" />)}
      </Container>
    )
  }
--- a/src/renderer/src/pages/home/Messages/MessageContent.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageContent.tsx
@@ -1,20 +1,17 @@
 import { SyncOutlined } from '@ant-design/icons'
 import { Message, Model } from '@renderer/types'
 import { getBriefInfo } from '@renderer/utils'
-import { Alert } from 'antd'
 import React from 'react'
-import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 import Markdown from '../Markdown/Markdown'
 import MessageAttachments from './MessageAttachments'
+import MessageError from './MessageError'

 const MessageContent: React.FC<{
  message: Message
  model?: Model
 }> = ({ message, model }) => {
-  const { t } = useTranslation()
-
  if (message.status === 'sending') {
    return (
      <MessageContentLoading>
@@ -24,14 +21,7 @@ const MessageContent: React.FC<{
  }

  if (message.status === 'error') {
-    return (
-      <Alert
-        message={<div style={{ fontSize: 14 }}>{t('error.chat.response')}</div>}
-        description={<Markdown message={message} />}
-        type="error"
-        style={{ marginBottom: 15, padding: 10, fontSize: 12 }}
-      />
-    )
+    return <MessageError message={message} />
  }

  if (message.type === '@' && model) {
@@ -52,6 +42,8 @@ const MessageContentLoading = styled.div`
  flex-direction: row;
  align-items: center;
  height: 32px;
+  margin-top: -5px;
+  margin-bottom: 5px;
 `

 export default React.memo(MessageContent)
--- a/src/renderer/src/pages/home/Messages/MessageError.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageError.tsx
@@ -0,0 +1,21 @@
+import { Message } from '@renderer/types'
+import { Alert } from 'antd'
+import { t } from 'i18next'
+import { FC } from 'react'
+
+import Markdown from '../Markdown/Markdown'
+
+const MessageError: FC<{ message: Message }> = ({ message }) => {
+  return (
+    <>
+      <Alert
+        description={t('error.chat.response')}
+        type="error"
+        style={{ marginBottom: 15, padding: 10, fontSize: 12 }}
+      />
+      <Markdown message={message} />
+    </>
+  )
+}
+
+export default MessageError
--- a/src/renderer/src/pages/home/Messages/MessageHeader.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
@@ -4,12 +4,12 @@ import { startMinAppById } from '@renderer/config/minapps'
 import { getModelLogo } from '@renderer/config/models'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import useAvatar from '@renderer/hooks/useAvatar'
-import { useSettings } from '@renderer/hooks/useSettings'
+import { useMessageStyle, useSettings } from '@renderer/hooks/useSettings'
 import { Assistant, Message, Model } from '@renderer/types'
 import { firstLetter, removeLeadingEmoji } from '@renderer/utils'
 import { Avatar } from 'antd'
 import dayjs from 'dayjs'
-import { FC, useCallback, useMemo } from 'react'
+import { CSSProperties, FC, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

@@ -24,8 +24,7 @@ const MessageHeader: FC<Props> = ({ assistant, model, message }) => {
  const { theme } = useTheme()
  const { userName } = useSettings()
  const { t } = useTranslation()
-
-  const isAssistantMessage = message.role === 'assistant'
+  const { isBubbleStyle } = useMessageStyle()

  const avatarSource = useMemo(() => {
    if (isLocalAi) return AppLogo
@@ -39,15 +38,23 @@ const MessageHeader: FC<Props> = ({ assistant, model, message }) => {
    return userName || t('common.you')
  }, [message.role, model?.id, model?.name, t, userName])

-  const avatarName = useMemo(() => firstLetter(assistant?.name).toUpperCase(), [assistant?.name])
+  const isAssistantMessage = message.role === 'assistant'

+  const avatarName = useMemo(() => firstLetter(assistant?.name).toUpperCase(), [assistant?.name])
  const username = useMemo(() => removeLeadingEmoji(getUserName()), [getUserName])

  const showMiniApp = () => model?.provider && startMinAppById(model?.provider)

+  const avatarStyle: CSSProperties | undefined = isBubbleStyle
+    ? {
+        flexDirection: isAssistantMessage ? 'row' : 'row-reverse',
+        textAlign: isAssistantMessage ? 'left' : 'right'
+      }
+    : undefined
+
  return (
    <Container>
-      <AvatarWrapper>
+      <AvatarWrapper style={avatarStyle}>
        {isAssistantMessage ? (
          <Avatar
            src={avatarSource}
@@ -79,25 +86,23 @@ const MessageHeader: FC<Props> = ({ assistant, model, message }) => {
 }

 const Container = styled.div`
-  margin-right: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 4px;
-  justify-content: space-between;
 `

 const AvatarWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
+  gap: 10px;
 `

 const UserWrap = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
-  margin-left: 12px;
 `

 const UserName = styled.div`
--- a/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageMenubar.tsx
@@ -10,7 +10,7 @@ import {
 } from '@ant-design/icons'
 import SelectModelPopup from '@renderer/components/Popups/SelectModelPopup'
 import TextEditPopup from '@renderer/components/Popups/TextEditPopup'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Message, Model } from '@renderer/types'
 import { removeTrailingDoubleSpaces } from '@renderer/utils'
 import { Dropdown, Popconfirm, Tooltip } from 'antd'
@@ -96,27 +96,27 @@ const MessageMenubar: FC<Props> = (props) => {
    <MenusBar className={`menubar ${isLastMessage && 'show'}`}>
      {message.role === 'user' && (
        <Tooltip title="Edit" mouseEnterDelay={0.8}>
-          <ActionButton onClick={onEdit}>
+          <ActionButton className="message-action-button" onClick={onEdit}>
            <EditOutlined />
          </ActionButton>
        </Tooltip>
      )}
      <Tooltip title={t('common.copy')} mouseEnterDelay={0.8}>
-        <ActionButton onClick={onCopy}>
+        <ActionButton className="message-action-button" onClick={onCopy}>
          {!copied && <i className="iconfont icon-copy"></i>}
          {copied && <CheckOutlined style={{ color: 'var(--color-primary)' }} />}
        </ActionButton>
      </Tooltip>
      {canRegenerate && (
        <Tooltip title={t('common.regenerate')} mouseEnterDelay={0.8}>
-          <ActionButton onClick={onSelectModel}>
+          <ActionButton className="message-action-button" onClick={onSelectModel}>
            <SyncOutlined />
          </ActionButton>
        </Tooltip>
      )}
      {isAssistantMessage && (
        <Tooltip title={t('chat.message.new.branch')} mouseEnterDelay={0.8}>
-          <ActionButton onClick={onNewBranch}>
+          <ActionButton className="message-action-button" onClick={onNewBranch}>
            <ForkOutlined />
          </ActionButton>
        </Tooltip>
@@ -127,14 +127,14 @@ const MessageMenubar: FC<Props> = (props) => {
        icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
        onConfirm={() => onDeleteMessage?.(message)}>
        <Tooltip title={t('common.delete')} mouseEnterDelay={1}>
-          <ActionButton>
+          <ActionButton className="message-action-button">
            <DeleteOutlined />
          </ActionButton>
        </Tooltip>
      </Popconfirm>
      {!isUserMessage && (
        <Dropdown menu={{ items: dropdownItems }} trigger={['click']} placement="topRight" arrow>
-          <ActionButton>
+          <ActionButton className="message-action-button">
            <MenuOutlined />
          </ActionButton>
        </Dropdown>
--- a/src/renderer/src/pages/home/Messages/MessageTokens.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageTokens.tsx
@@ -1,5 +1,5 @@
-import { useRuntime } from '@renderer/hooks/useStore'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { useRuntime } from '@renderer/hooks/useRuntime'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Message } from '@renderer/types'
 import styled from 'styled-components'

@@ -15,7 +15,11 @@ const MessgeTokens: React.FC<{ message: Message; isLastMessage: boolean }> = ({
  }

  if (message.role === 'user') {
-    return <MessageMetadata onClick={locateMessage}>Tokens: {message?.usage?.total_tokens}</MessageMetadata>
+    return (
+      <MessageMetadata className="message-tokens" onClick={locateMessage}>
+        Tokens: {message?.usage?.total_tokens}
+      </MessageMetadata>
+    )
  }

  if (isLastMessage && generating) {
@@ -24,7 +28,7 @@ const MessgeTokens: React.FC<{ message: Message; isLastMessage: boolean }> = ({

  if (message.role === 'assistant') {
    return (
-      <MessageMetadata onClick={locateMessage}>
+      <MessageMetadata className="message-tokens" onClick={locateMessage}>
        Tokens: {message?.usage?.total_tokens} | ↑{message?.usage?.prompt_tokens} | ↓{message?.usage?.completion_tokens}
      </MessageMetadata>
    )
--- a/src/renderer/src/pages/home/Messages/Messages.tsx
+++ b/src/renderer/src/pages/home/Messages/Messages.tsx
@@ -1,13 +1,19 @@
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import db from '@renderer/databases'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { getTopic, TopicManager } from '@renderer/hooks/useTopic'
-import { fetchChatCompletion, fetchMessagesSummary } from '@renderer/services/api'
-import { getDefaultTopic } from '@renderer/services/assistant'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
-import { deleteMessageFiles, filterMessages, getContextCount } from '@renderer/services/messages'
-import { estimateHistoryTokens, estimateMessageUsage } from '@renderer/services/tokens'
+import { fetchMessagesSummary } from '@renderer/services/ApiService'
+import { getDefaultTopic } from '@renderer/services/AssistantService'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import {
+  deleteMessageFiles,
+  filterMessages,
+  getAssistantMessage,
+  getContextCount,
+  getUserMessage
+} from '@renderer/services/MessagesService'
+import { estimateHistoryTokens } from '@renderer/services/TokenService'
 import { Assistant, Message, Model, Topic } from '@renderer/types'
 import { captureScrollableDiv, runAsyncFunction, uuid } from '@renderer/utils'
 import { t } from 'i18next'
@@ -27,34 +33,37 @@ interface Props {

 const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
  const [messages, setMessages] = useState<Message[]>([])
-  const [lastMessage, setLastMessage] = useState<Message | null>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const { updateTopic, addTopic } = useAssistant(assistant.id)
  const { showTopics, topicPosition, showAssistants } = useSettings()

+  const messagesRef = useRef(messages)
+  messagesRef.current = messages
+
  const maxWidth = useMemo(() => {
    const showRightTopics = showTopics && topicPosition === 'right'
    const minusAssistantsWidth = showAssistants ? '- var(--assistants-width)' : ''
    const minusRightTopicsWidth = showRightTopics ? '- var(--assistants-width)' : ''
-    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth}`
+    return `calc(100vw - var(--sidebar-width) ${minusAssistantsWidth} ${minusRightTopicsWidth} - 5px)`
  }, [showAssistants, showTopics, topicPosition])

+  const scrollToBottom = useCallback(() => {
+    setTimeout(() => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'auto' }), 50)
+  }, [])
+
  const onSendMessage = useCallback(
    async (message: Message) => {
-      if (message.role === 'user') {
-        estimateMessageUsage(message).then((usage) => {
+      const assistantMessage = getAssistantMessage({ assistant, topic })
+
      setMessages((prev) => {
-            const _messages = prev.map((m) => (m.id === message.id ? { ...m, usage } : m))
-            db.topics.update(topic.id, { messages: _messages })
-            return _messages
+        const messages = prev.concat([message, assistantMessage])
+        db.topics.put({ id: topic.id, messages })
+        return messages
      })
-        })
-      }
-      const _messages = [...messages, message]
-      setMessages(_messages)
-      db.topics.put({ id: topic.id, messages: _messages })
+
+      scrollToBottom()
    },
-    [messages, topic.id]
+    [assistant, scrollToBottom, topic]
  )

  const autoRenameTopic = useCallback(async () => {
@@ -79,56 +88,19 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
    [messages, topic.id]
  )

-  const onEditMessage = useCallback(
-    (message: Message) => {
-      const _messages = messages.map((m) => (m.id === message.id ? message : m))
-      setMessages(_messages)
-      db.topics.update(topic.id, { messages: _messages })
-    },
-    [messages, topic.id]
-  )
-
-  const scrollToBottom = useCallback(() => {
-    setTimeout(() => containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'auto' }), 10)
+  const onGetMessages = useCallback(() => {
+    return messagesRef.current
  }, [])

  useEffect(() => {
    const unsubscribes = [
-      EventEmitter.on(EVENT_NAMES.SEND_MESSAGE, async (msg: Message) => {
-        await onSendMessage(msg)
-
-        // Scroll to bottom
-        scrollToBottom()
-
-        // Fetch completion
-        fetchChatCompletion({
-          assistant,
-          messages: [...messages, msg],
-          topic,
-          onResponse: setLastMessage
-        })
-      }),
-      EventEmitter.on(EVENT_NAMES.RECEIVE_MESSAGE, async (msg: Message) => {
-        setLastMessage(null)
-        onSendMessage(msg)
+      EventEmitter.on(EVENT_NAMES.SEND_MESSAGE, onSendMessage),
+      EventEmitter.on(EVENT_NAMES.RECEIVE_MESSAGE, async () => {
        setTimeout(() => EventEmitter.emit(EVENT_NAMES.AI_AUTO_RENAME), 100)
      }),
      EventEmitter.on(EVENT_NAMES.REGENERATE_MESSAGE, async (model: Model) => {
        const lastUserMessage = last(filterMessages(messages).filter((m) => m.role === 'user'))
-        if (lastUserMessage) {
-          onSendMessage({
-            ...lastUserMessage,
-            id: uuid(),
-            type: '@',
-            modelId: model.id
-          })
-          fetchChatCompletion({
-            assistant,
-            topic,
-            messages: [...messages, lastUserMessage],
-            onResponse: setLastMessage
-          })
-        }
+        lastUserMessage && onSendMessage({ ...lastUserMessage, id: uuid(), type: '@', modelId: model.id })
      }),
      EventEmitter.on(EVENT_NAMES.AI_AUTO_RENAME, autoRenameTopic),
      EventEmitter.on(EVENT_NAMES.CLEAR_MESSAGES, () => {
@@ -156,16 +128,11 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
          return
        }

-        onSendMessage({
-          id: uuid(),
-          assistantId: assistant.id,
-          role: 'user',
-          content: '',
-          topicId: topic.id,
-          createdAt: new Date().toISOString(),
-          status: 'success',
-          type: 'clear'
-        } as Message)
+        setMessages((prev) => {
+          const messages = prev.concat([getUserMessage({ assistant, topic, type: 'clear' })])
+          db.topics.put({ id: topic.id, messages })
+          return messages
+        })

        scrollToBottom()
      }),
@@ -219,32 +186,37 @@ const Messages: FC<Props> = ({ assistant, topic, setActiveTopic }) => {
    })
  }, [assistant, messages])

+  const memoizedMessages = useMemo(() => reverse([...messages]), [messages])
+
  return (
-    <Scrollbar>
-      <Container id="messages" style={{ maxWidth }} key={assistant.id} ref={containerRef}>
-        <Suggestions assistant={assistant} messages={messages} lastMessage={lastMessage} />
-        {lastMessage && <MessageItem key={lastMessage.id} message={lastMessage} lastMessage />}
-        {reverse([...messages]).map((message, index) => (
+    <Container
+      id="messages"
+      style={{ maxWidth }}
+      key={assistant.id}
+      ref={containerRef}
+      right={topicPosition === 'left'}>
+      <Suggestions assistant={assistant} messages={messages} />
+      {memoizedMessages.map((message, index) => (
        <MessageItem
          key={message.id}
          message={message}
+          topic={topic}
          index={index}
          hidePresetMessages={assistant.settings?.hideMessages}
-            onEditMessage={onEditMessage}
+          onSetMessages={setMessages}
          onDeleteMessage={onDeleteMessage}
+          onGetMessages={onGetMessages}
        />
      ))}
      <Prompt assistant={assistant} key={assistant.prompt} />
    </Container>
-    </Scrollbar>
  )
 }

-const Container = styled.div`
+const Container = styled(Scrollbar)`
  display: flex;
  flex-direction: column-reverse;
  padding: 10px 0;
-  background-color: var(--color-background);
  padding-bottom: 20px;
  overflow-x: hidden;
 `
--- a/src/renderer/src/pages/home/Messages/Prompt.tsx
+++ b/src/renderer/src/pages/home/Messages/Prompt.tsx
@@ -18,7 +18,7 @@ const Prompt: FC<Props> = ({ assistant }) => {
  }

  return (
-    <Container onClick={() => AssistantSettingsPopup.show({ assistant })}>
+    <Container className="system-prompt" onClick={() => AssistantSettingsPopup.show({ assistant })}>
      <Text>{prompt}</Text>
    </Container>
  )
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@@ -3,13 +3,11 @@ import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar
 import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
 import { HStack } from '@renderer/components/Layout'
 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 { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Assistant, Topic } from '@renderer/types'
-import { Switch } from 'antd'
 import { FC, useCallback } from 'react'
 import styled from 'styled-components'

@@ -24,7 +22,6 @@ interface Props {
 const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
  const { assistant } = useAssistant(activeAssistant.id)
  const { showAssistants, toggleShowAssistants } = useShowAssistants()
-  const { theme, toggleTheme } = useTheme()
  const { topicPosition } = useSettings()
  const { showTopics, toggleShowTopics } = useShowTopics()

@@ -63,12 +60,6 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
          <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`} />
@@ -118,12 +109,4 @@ const TitleText = styled.span`
  font-weight: 500;
 `

-const ThemeSwitch = styled(Switch)`
-  -webkit-app-region: no-drag;
-  margin-right: 10px;
-  .icon-theme {
-    font-size: 14px;
-  }
-`
-
 export default HeaderNavbar
--- a/src/renderer/src/pages/home/Tabs/Assistants.tsx
+++ b/src/renderer/src/pages/home/Tabs/Assistants.tsx
@@ -2,12 +2,12 @@ import { DeleteOutlined, EditOutlined, MinusCircleOutlined, PlusOutlined, SaveOu
 import AssistantSettingsPopup from '@renderer/components/AssistantSettings'
 import DragableList from '@renderer/components/DragableList'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
-import { getDefaultTopic } from '@renderer/services/assistant'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { getDefaultTopic } from '@renderer/services/AssistantService'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setSearching } from '@renderer/store/runtime'
 import { Assistant } from '@renderer/types'
@@ -179,7 +179,6 @@ const Assistants: FC<Props> = ({
  }, [activeAssistant?.id, list, onSwitchAssistant])

  return (
-    <Scrollbar>
    <Container>
      {assistants.length >= 10 && (
        <SearchContainer>
@@ -234,11 +233,10 @@ const Assistants: FC<Props> = ({
      )}
      <div style={{ minHeight: 10 }}></div>
    </Container>
-    </Scrollbar>
  )
 }

-const Container = styled.div`
+const Container = styled(Scrollbar)`
  display: flex;
  flex-direction: column;
  padding-top: 10px;
--- a/src/renderer/src/pages/home/Tabs/Settings.tsx
+++ b/src/renderer/src/pages/home/Tabs/Settings.tsx
@@ -1,6 +1,6 @@
 import { CheckOutlined, QuestionCircleOutlined, ReloadOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { DEFAULT_CONEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
@@ -11,6 +11,7 @@ import {
  setFontSize,
  setMathEngine,
  setMessageFont,
+  setMessageStyle,
  setPasteLongTextAsFile,
  setRenderInputMessageAsMarkdown,
  setShowInputEstimatedTokens,
@@ -35,6 +36,7 @@ const SettingsTab: FC<Props> = (props) => {
  const [maxTokens, setMaxTokens] = useState(assistant?.settings?.maxTokens ?? 0)
  const [streamOutput, setStreamOutput] = useState(assistant?.settings?.streamOutput ?? true)
  const [fontSizeValue, setFontSizeValue] = useState(fontSize)
+  const { messageStyle } = useSettings()
  const { t } = useTranslation()

  const dispatch = useAppDispatch()
@@ -100,7 +102,6 @@ const SettingsTab: FC<Props> = (props) => {
  }, [assistant])

  return (
-    <Scrollbar>
    <Container>
      <SettingSubtitle style={{ marginTop: 5 }}>
        {t('settings.messages.model.title')}{' '}
@@ -215,6 +216,18 @@ const SettingsTab: FC<Props> = (props) => {
        />
      </SettingRow>
      <SettingDivider />
+      <SettingRow>
+        <SettingRowTitleSmall>{t('message.message.style')}</SettingRowTitleSmall>
+        <Select
+          value={messageStyle}
+          onChange={(value) => dispatch(setMessageStyle(value))}
+          style={{ width: 100 }}
+          size="small">
+          <Select.Option value="plain">{t('message.message.style.plain')}</Select.Option>
+          <Select.Option value="bubble">{t('message.message.style.bubble')}</Select.Option>
+        </Select>
+      </SettingRow>
+      <SettingDivider />
      <SettingRow>
        <SettingRowTitleSmall>{t('settings.messages.math_engine')}</SettingRowTitleSmall>
        <Select
@@ -291,11 +304,10 @@ const SettingsTab: FC<Props> = (props) => {
        />
      </SettingRow>
    </Container>
-    </Scrollbar>
  )
 }

-const Container = styled.div`
+const Container = styled(Scrollbar)`
  display: flex;
  flex: 1;
  flex-direction: column;
--- a/src/renderer/src/pages/home/Tabs/Topics.tsx
+++ b/src/renderer/src/pages/home/Tabs/Topics.tsx
@@ -8,16 +8,16 @@ import {
 } from '@ant-design/icons'
 import DragableList from '@renderer/components/DragableList'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
-import { Scrollbar } from '@renderer/components/Scrollbar'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { TopicManager } from '@renderer/hooks/useTopic'
-import { fetchMessagesSummary } from '@renderer/services/api'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { fetchMessagesSummary } from '@renderer/services/ApiService'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import store, { useAppSelector } from '@renderer/store'
 import { setGenerating } from '@renderer/store/runtime'
 import { Assistant, Topic } from '@renderer/types'
-import { exportTopicAsMarkdown } from '@renderer/utils/export'
+import { exportTopicAsMarkdown, topicToMarkdown } from '@renderer/utils/export'
 import { Dropdown, MenuProps } from 'antd'
 import dayjs from 'dayjs'
 import { findIndex } from 'lodash'
@@ -36,7 +36,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
  const { assistant, removeTopic, moveTopic, updateTopic, updateTopics } = useAssistant(_assistant.id)
  const { t } = useTranslation()
  const generating = useAppSelector((state) => state.runtime.generating)
-  const { showTopicTime } = useSettings()
+  const { showTopicTime, topicPosition } = useSettings()

  const borderRadius = showTopicTime ? 12 : 17

@@ -141,6 +141,14 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
              label: t('chat.topics.export.md'),
              key: 'markdown',
              onClick: () => exportTopicAsMarkdown(topic)
+            },
+            {
+              label: t('chat.topics.export.word'),
+              key: 'word',
+              onClick: async () => {
+                const markdown = await topicToMarkdown(topic)
+                window.api.export.toWord(markdown, topic.name)
+              }
            }
          ]
        }
@@ -178,8 +186,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
  )

  return (
-    <Scrollbar>
-      <Container>
+    <Container right={topicPosition === 'right'}>
      <DragableList list={assistant.topics} onUpdate={updateTopics}>
        {(topic) => {
          const isActive = topic.id === activeTopic?.id
@@ -211,11 +218,10 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
      </DragableList>
      <div style={{ minHeight: '10px' }}></div>
    </Container>
-    </Scrollbar>
  )
 }

-const Container = styled.div`
+const Container = styled(Scrollbar)`
  display: flex;
  flex-direction: column;
  padding-top: 10px;
--- a/src/renderer/src/pages/home/Tabs/index.tsx
+++ b/src/renderer/src/pages/home/Tabs/index.tsx
@@ -3,7 +3,7 @@ import AddAssistantPopup from '@renderer/components/Popups/AddAssistantPopup'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useShowTopics } from '@renderer/hooks/useStore'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Assistant, Topic } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import { Segmented, SegmentedProps } from 'antd'
@@ -147,8 +147,10 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
 const Container = styled.div`
  display: flex;
  flex-direction: column;
-  width: var(--assistants-width);
+  max-width: var(--assistants-width);
+  min-width: var(--assistants-width);
  height: calc(100vh - var(--navbar-height));
+  background-color: var(--color-background);
  overflow: hidden;
  .collapsed {
    width: 0;
--- a/src/renderer/src/pages/home/components/Suggestions.tsx
+++ b/src/renderer/src/pages/home/components/Suggestions.tsx
@@ -1,8 +1,9 @@
-import { fetchSuggestions } from '@renderer/services/api'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
+import { fetchSuggestions } from '@renderer/services/ApiService'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { Assistant, Message, Suggestion } from '@renderer/types'
 import { uuid } from '@renderer/utils'
 import dayjs from 'dayjs'
+import { last } from 'lodash'
 import { FC, useEffect, useState } from 'react'
 import BeatLoader from 'react-spinners/BeatLoader'
 import styled from 'styled-components'
@@ -10,12 +11,11 @@ import styled from 'styled-components'
 interface Props {
  assistant: Assistant
  messages: Message[]
-  lastMessage: Message | null
 }

 const suggestionsMap = new Map<string, Suggestion[]>()

-const Suggestions: FC<Props> = ({ assistant, messages, lastMessage }) => {
+const Suggestions: FC<Props> = ({ assistant, messages }) => {
  const [suggestions, setSuggestions] = useState<Suggestion[]>(
    suggestionsMap.get(messages[messages.length - 1]?.id) || []
  )
@@ -29,6 +29,7 @@ const Suggestions: FC<Props> = ({ assistant, messages, lastMessage }) => {
      assistantId: assistant.id,
      topicId: assistant.topics[0].id || uuid(),
      createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+      type: 'text',
      status: 'success'
    }

@@ -54,7 +55,7 @@ const Suggestions: FC<Props> = ({ assistant, messages, lastMessage }) => {
    setSuggestions(suggestionsMap.get(messages[messages.length - 1]?.id) || [])
  }, [messages])

-  if (lastMessage) {
+  if (last(messages)?.status !== 'success') {
    return null
  }

--- a/src/renderer/src/pages/paintings/Artboard.tsx
+++ b/src/renderer/src/pages/paintings/Artboard.tsx
@@ -0,0 +1,193 @@
+import { CopyOutlined, DownloadOutlined } from '@ant-design/icons'
+import FileManager from '@renderer/services/FileManager'
+import { Painting } from '@renderer/types'
+import { download } from '@renderer/utils/download'
+import { Button, Dropdown, Spin } from 'antd'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+import ImagePreview from '../home/Markdown/ImagePreview'
+
+interface ArtboardProps {
+  painting: Painting
+  isLoading: boolean
+  currentImageIndex: number
+  onPrevImage: () => void
+  onNextImage: () => void
+  onCancel: () => void
+}
+
+const Artboard: FC<ArtboardProps> = ({
+  painting,
+  isLoading,
+  currentImageIndex,
+  onPrevImage,
+  onNextImage,
+  onCancel
+}) => {
+  const { t } = useTranslation()
+
+  const getCurrentImageUrl = () => {
+    const currentFile = painting.files[currentImageIndex]
+    return currentFile ? FileManager.getFileUrl(currentFile) : ''
+  }
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault()
+  }
+
+  const getContextMenuItems = () => {
+    return [
+      {
+        key: 'copy',
+        label: t('common.copy'),
+        icon: <CopyOutlined />,
+        onClick: () => {
+          navigator.clipboard.writeText(painting.urls[currentImageIndex])
+        }
+      },
+      {
+        key: 'download',
+        label: t('common.download'),
+        icon: <DownloadOutlined />,
+        onClick: () => download(getCurrentImageUrl())
+      }
+    ]
+  }
+
+  return (
+    <Container>
+      <LoadingContainer spinning={isLoading}>
+        {painting.files.length > 0 ? (
+          <ImageContainer>
+            {painting.files.length > 1 && (
+              <NavigationButton onClick={onPrevImage} style={{ left: 10 }}>
+                ←
+              </NavigationButton>
+            )}
+            <Dropdown menu={{ items: getContextMenuItems() }} trigger={['contextMenu']}>
+              <ImagePreview
+                src={getCurrentImageUrl()}
+                preview={{ mask: false }}
+                onContextMenu={handleContextMenu}
+                style={{
+                  width: '70vh',
+                  height: '70vh',
+                  objectFit: 'contain',
+                  backgroundColor: 'var(--color-background-soft)',
+                  cursor: 'pointer'
+                }}
+              />
+            </Dropdown>
+            {painting.files.length > 1 && (
+              <NavigationButton onClick={onNextImage} style={{ right: 10 }}>
+                →
+              </NavigationButton>
+            )}
+            <ImageCounter>
+              {currentImageIndex + 1} / {painting.files.length}
+            </ImageCounter>
+          </ImageContainer>
+        ) : (
+          <ImagePlaceholder />
+        )}
+        {isLoading && (
+          <LoadingOverlay>
+            <Spin size="large" />
+            <CancelButton onClick={onCancel}>{t('common.cancel')}</CancelButton>
+          </LoadingOverlay>
+        )}
+      </LoadingContainer>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`
+
+const ImagePlaceholder = styled.div`
+  display: flex;
+  width: 70vh;
+  height: 70vh;
+  background-color: var(--color-background-soft);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`
+
+const ImageContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .ant-spin {
+    max-height: none;
+  }
+
+  .ant-spin-spinning {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 3;
+  }
+`
+
+const NavigationButton = styled(Button)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  opacity: 0.7;
+  &:hover {
+    opacity: 1;
+  }
+`
+
+const ImageCounter = styled.div`
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+`
+
+const LoadingContainer = styled.div<{ spinning: boolean }>`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: ${(props) => (props.spinning ? 0.5 : 1)};
+  transition: opacity 0.3s;
+`
+
+const LoadingOverlay = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+`
+
+const CancelButton = styled(Button)`
+  margin-top: 10px;
+  z-index: 1001;
+`
+
+export default Artboard
--- a/src/renderer/src/pages/paintings/PaintingsList.tsx
+++ b/src/renderer/src/pages/paintings/PaintingsList.tsx
@@ -0,0 +1,154 @@
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'
+import DragableList from '@renderer/components/DragableList'
+import Scrollbar from '@renderer/components/Scrollbar'
+import { usePaintings } from '@renderer/hooks/usePaintings'
+import FileManager from '@renderer/services/FileManager'
+import { Painting } from '@renderer/types'
+import { classNames } from '@renderer/utils'
+import { Popconfirm } from 'antd'
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+interface PaintingsListProps {
+  paintings: Painting[]
+  selectedPainting: Painting
+  onSelectPainting: (painting: Painting) => void
+  onDeletePainting: (painting: Painting) => void
+  onNewPainting: () => void
+}
+
+const PaintingsList: FC<PaintingsListProps> = ({
+  paintings,
+  selectedPainting,
+  onSelectPainting,
+  onDeletePainting,
+  onNewPainting
+}) => {
+  const { t } = useTranslation()
+  const [dragging, setDragging] = useState(false)
+  const { updatePaintings } = usePaintings()
+
+  return (
+    <Container style={{ paddingBottom: dragging ? 80 : 10 }}>
+      <DragableList
+        list={paintings}
+        onUpdate={updatePaintings}
+        onDragStart={() => setDragging(true)}
+        onDragEnd={() => setDragging(false)}>
+        {(item: Painting) => (
+          <CanvasWrapper key={item.id}>
+            <Canvas
+              className={classNames(selectedPainting.id === item.id && 'selected')}
+              onClick={() => onSelectPainting(item)}>
+              {item.files[0] && <ThumbnailImage src={FileManager.getFileUrl(item.files[0])} alt="" />}
+            </Canvas>
+            <DeleteButton>
+              <Popconfirm
+                title={t('images.button.delete.image.confirm')}
+                onConfirm={() => onDeletePainting(item)}
+                okButtonProps={{ danger: true }}
+                placement="left">
+                <DeleteOutlined />
+              </Popconfirm>
+            </DeleteButton>
+          </CanvasWrapper>
+        )}
+      </DragableList>
+      {!dragging && (
+        <NewPaintingButton onClick={onNewPainting}>
+          <PlusOutlined />
+        </NewPaintingButton>
+      )}
+    </Container>
+  )
+}
+
+const Container = styled(Scrollbar)`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background-color: var(--color-background);
+  max-width: 100px;
+  border-left: 0.5px solid var(--color-border);
+  height: calc(100vh - var(--navbar-height));
+  overflow-x: hidden;
+`
+
+const CanvasWrapper = styled.div`
+  position: relative;
+
+  &:hover {
+    .delete-button {
+      opacity: 1;
+    }
+  }
+`
+
+const Canvas = styled.div`
+  width: 80px;
+  height: 80px;
+  background-color: var(--color-background-soft);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border: 1px solid var(--color-background-soft);
+  overflow: hidden;
+  position: relative;
+
+  &.selected {
+    border: 1px solid var(--color-primary);
+  }
+
+  &:hover {
+    background-color: var(--color-background-mute);
+  }
+`
+
+const ThumbnailImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+`
+
+const DeleteButton = styled.div.attrs({ className: 'delete-button' })`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border-radius: 50%;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--color-error);
+  background-color: var(--color-background-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const NewPaintingButton = styled.div`
+  width: 80px;
+  height: 80px;
+  min-height: 80px;
+  margin-top: -10px;
+  background-color: var(--color-background-soft);
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border: 1px dashed var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-2);
+
+  &:hover {
+    background-color: var(--color-background-mute);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+`
+
+export default PaintingsList
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
kangfenmao	45dd76e281	chore(version): 0.8.9	2024-11-03 01:26:23 +08:00
kangfenmao	568d4814e3	feat: remove image compress	2024-11-03 01:26:00 +08:00
kangfenmao	9468f3b511	refactor: main code	2024-11-02 23:32:59 +08:00
kangfenmao	04af940144	feat: export to word	2024-11-02 21:45:23 +08:00
kangfenmao	e33d9ac0ae	fix: 在对话中插入图片时，应该自动压缩一下 #132	2024-11-02 15:30:41 +08:00
kangfenmao	cd835b7c36	fix: Ctrl + - 缩放时缩到最小再缩的话会报错 #266	2024-11-02 15:13:43 +08:00
kangfenmao	dd4239da87	fix: 默认模型在模型服务中禁用后显示错误 #266	2024-11-02 15:11:36 +08:00
kangfenmao	41c3895da4	feat: add message card style switch	2024-11-01 21:50:40 +08:00
kangfenmao	2e9c7d0830	fix: chat text color	2024-11-01 18:14:23 +08:00
kangfenmao	8ea73e14c9	style(message): user message use black color	2024-11-01 17:43:21 +08:00
kangfenmao	3791556b13	chore(version): 0.8.8	2024-11-01 12:39:11 +08:00
kangfenmao	e0dab5cf5b	feat: set topic position to left	2024-11-01 12:28:13 +08:00
kangfenmao	1785e7df0a	feat: dynamic handling for tab groups	2024-11-01 12:18:48 +08:00
kangfenmao	6cb1846b23	fix: ui and layout	2024-11-01 12:06:30 +08:00
kangfenmao	21243579b3	feat: added sorting functionality and updated translations	2024-11-01 11:46:11 +08:00
kangfenmao	0d2ad2e4c3	feat: improved ui layout and added reusable add agent card component	2024-11-01 11:00:17 +08:00
kangfenmao	071a3950cd	feat: topic position set default to left	2024-10-31 17:11:32 +08:00
Teo	dc6066b74c	refactor(navbar): 移除未使用的代码	2024-10-31 16:51:38 +08:00
Teo	ce55d8d0e7	refactor(navbar): 移除未使用的代码	2024-10-31 16:51:38 +08:00
Teo	d4ae321cd2	style(toggleTheme): 将主题切换按钮移到左下角菜单栏中	2024-10-31 16:51:38 +08:00
Teo	89dd35c98d	style(chat): 对话界面改为左右布局	2024-10-31 16:51:38 +08:00
Teo	b8c70a3061	style(markdown): 小代码块不换行	2024-10-31 16:51:38 +08:00
kangfenmao	968a749aaa	chore(version): 0.8.7	2024-10-31 15:01:37 +08:00
kangfenmao	e2fc593624	style: update responsive container styling for paintingslist component	2024-10-31 14:39:27 +08:00
kangfenmao	0e1674ce6c	feat: added new painting functionality with mac device restriction	2024-10-31 14:35:05 +08:00
kangfenmao	18566989be	chore(version): 0.8.6	2024-10-31 13:34:06 +08:00
kangfenmao	31fa10f185	feat: improved real-time painting generation support	2024-10-31 13:28:07 +08:00
kangfenmao	f6aa0dc55a	feat: added translations and ui improvements	2024-10-31 13:18:35 +08:00
kangfenmao	ca2a9ed84a	feat: added translation options for opening all files	2024-10-31 12:17:27 +08:00
kangfenmao	79f6d598ab	feat: added translation functionality and chinese support	2024-10-31 12:11:30 +08:00
kangfenmao	fb564733e4	style: prevent drag on image preview switch	2024-10-31 11:38:37 +08:00
kangfenmao	63e5972dd2	feat: improvedscrollbar component functionality and added internationalization support to agentspage component	2024-10-31 11:31:38 +08:00
首都爱护动物协会	b80270709f	add new providers logo	2024-10-31 09:37:17 +08:00
首都爱护动物协会	d7b459dcee	Agents Page Upgrade 1. Simplified the layout of the agents page for improved user experience. 2. Enhanced the design of agent cards for a more visually appealing look.	2024-10-31 09:37:17 +08:00
kangfenmao	76b9e1a65e	fix: painting no provider	2024-10-31 09:23:58 +08:00
kangfenmao	b148c5adf5	feat: files ui improvements	2024-10-30 20:45:48 +08:00
kangfenmao	2313f66ad9	refactor: services	2024-10-30 17:23:52 +08:00
kangfenmao	02edd983d1	chore: remove useless files	2024-10-30 00:32:27 +08:00
kangfenmao	3e049baaa4	feat: added file download functionality and improved api	2024-10-30 00:32:27 +08:00
kangfenmao	7401d85825	feat: add paintaing page	2024-10-30 00:32:27 +08:00
AHpx-Lap	241dcddfed	feat: use auto theme as default	2024-10-30 00:31:56 +08:00
kangfenmao	cd0ea8154d	chore: update dependencies and electron version	2024-10-30 00:31:03 +08:00
kangfenmao	6d6788eeb2	feat: update feature list and documentation for improved user understanding	2024-10-29 16:12:16 +08:00
kangfenmao	9ac35ae3d8	docs: update documentation to reflect project changes	2024-10-29 15:29:44 +08:00
kangfenmao	72e847258d	feat: add instance lock and second instance handling	2024-10-29 14:48:48 +08:00
kangfenmao	0cc460a4a3	chore(version): 0.8.5	2024-10-29 02:46:45 +08:00
kangfenmao	98307d5d85	feat: add chinese translations and improve ui	2024-10-29 02:26:10 +08:00
kangfenmao	f73749ac63	feat: add keyborad shortcut settings	2024-10-29 01:55:11 +08:00
kangfenmao	c5deba270f	docs: update sponsorship links and qr code references	2024-10-29 00:45:26 +08:00
kangfenmao	bf5617393b	feat: enhanced search functionality with translation support	2024-10-29 00:40:44 +08:00
kangfenmao	057efbf98c	fix: agents sort	2024-10-29 00:27:35 +08:00
kangfenmao	2143a6614e	fix: add X-Api-Key headers #246	2024-10-28 23:33:20 +08:00
kangfenmao	6f9eb2ae75	fix: add claude-3-5-sonnet-latest support #247	2024-10-28 16:40:37 +08:00
kangfenmao	73c2945961	fix: agents tabs not shown	2024-10-28 16:23:55 +08:00
首都爱护动物协会	18beffcc29	Update agents.json	2024-10-28 08:50:59 +08:00
kangfenmao	2b17319855	feat: enhanced text wrapping and ant-input styling	2024-10-27 22:50:45 +08:00
kangfenmao	d77c1ce2b4	feat: update agents.json	2024-10-27 19:53:20 +08:00
kangfenmao	b43f5c9ead	fix: fix stale state issue in chat component	2024-10-27 19:30:18 +08:00
kangfenmao	a8651ec558	feat: enhanced ui with translation and layout improvements	2024-10-27 19:13:54 +08:00
kangfenmao	d76a173706	feat: use real file path	2024-10-27 18:58:23 +08:00
kangfenmao	7ec3cb05f2	feat: scroll to bottom on messages page load	2024-10-27 18:33:01 +08:00
kangfenmao	a83d514169	fix: removed filter condition and messages from fetchchatcompletion() payload	2024-10-27 00:11:30 +08:00
kangfenmao	1f8551135f	style: optimized performance and refined styles	2024-10-26 23:48:14 +08:00
kangfenmao	1444739cc6	style: align tab content horizontally and ignore agents.json with prettier	2024-10-26 23:36:06 +08:00
kangfenmao	c7cbecad68	feat: update ui components with improved design and functionality	2024-10-26 23:14:33 +08:00
kangfenmao	ab1c597e1c	refactor: improved code readability for filtering agents	2024-10-26 22:38:31 +08:00
kangfenmao	ac21c90b6f	feat: add agents tabs and search	2024-10-26 22:33:47 +08:00
kangfenmao	9ec0836d26	feat: added icons to buttons for preview and download	2024-10-26 17:29:35 +08:00
kangfenmao	ee966010e1	refactor: messages completion	2024-10-26 17:12:06 +08:00
kangfenmao	7c99621558	fix: WebDAV 备份失败 maxBodyLength 限制 #243	2024-10-25 13:26:46 +08:00
kangfenmao	cfb3eb7d90	docs: update documentation for a more inclusive environment and added japanese and chinese documentation	2024-10-25 00:09:01 +08:00
kangfenmao	64ad2fc9f4	chore(version): 0.8.4	2024-10-24 23:14:14 +08:00
kangfenmao	7f0909c796	fix: 新的滚动条组件	2024-10-24 23:08:11 +08:00