# AI 机器人对话页面的拖放上传与文件预览

**URL:** https://meta.discourse.org/t/drag-drop-upload-file-previews-for-ai-bot-conversations-page/407336
**Category:** Theme component
**Tags:** ai, ai-bot
**Created:** [2026年七月11日 18:57 UTC](https://meta.discourse.org/t/drag-drop-upload-file-previews-for-ai-bot-conversations-page/407336 "2026-07-11T18:57:19Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2026年七月11日 18:57 UTC](https://meta.discourse.org/t/drag-drop-upload-file-previews-for-ai-bot-conversations-page/407336/1 "2026-07-11T18:57:19Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **摘要** | AI 机器人对话页面的拖放上传与文件预览功能 |
| 🛠 | **仓库** | [GitHub - VaperinaDEV/drag-drop-upload-file-previews-ai-bot-page: Drag & Drop Upload + File Previews for AI Bot Conversations page · GitHub](https://github.com/VaperinaDEV/drag-drop-upload-file-previews-ai-bot-page) |
| ❤ | **觉得有用吗？** | [\> ./support --coffee](https://meta.discourse.org/u/don) |
| ❓ | **安装指南** | [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **Discourse 主题新手？** | [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

安装此主题组件

大家好 👋

目前在 [AI 机器人对话页面](https://meta.discourse.org/discourse-ai/ai-bot/conversations) 中上传文件时，只能通过上传按钮进行操作。而且一旦文件被附加，您只能看到一行纯文本形式的文件名，没有预览，也没有任何视觉提示来表明您实际附加的是什么文件。

## 该组件新增的功能

- **在对话面板的任意位置拖放** —— 不仅限于文本区域，整个面板都是一个拖放区域，并且在拖拽过程中会显示高亮状态。
- **真实的图片缩略图** —— 针对图片上传，在客户端生成缩略图，并连同文件名一起显示，而不仅仅是文本。
- **基于扩展名的彩色徽章** —— 用于非图片文件（如 PDF、DOCX、XLSX、ZIP、MP3、代码文件等），即使这些文件类型无法提供真实预览，也能让上传列表在视觉上易于浏览。
- **可通过主题设置进行配置** —— 包括一个 `default_badge_color` 回退颜色，以及一个 `extension_colors` 对象模式设置，允许管理员直接在主题设置界面中按扩展名添加或覆盖颜色，无需编辑代码。

## 设置

| 设置项 | 描述 |
| --- | --- |
| `default_badge_color` | 未明确设置颜色的扩展名的回退十六进制颜色 |
| `extension_colors` | `{ extension, color }` 行的对象模式列表，用于覆盖或扩展内置的分类颜色 |

内置分类已经涵盖了大多数常见的文件类型（文档、电子表格、演示文稿、归档、音频、视频、代码、字体、电子书），因此大多数人可能完全不需要修改 `extension_colors`。

---

_[View the full topic](https://meta.discourse.org/t/drag-drop-upload-file-previews-for-ai-bot-conversations-page/407336)._