Components
Attachment
附件展示、上传和预览组件集合
Attachment 包含三个组件：
- UserMessageAttachments — 用户消息中的附件展示
- ComposerAttachments — 输入框中的附件列表
- ComposerAddAttachment — 添加附件按钮
引入
import {
UserMessageAttachments,
ComposerAttachments,
ComposerAddAttachment,
} from "aui-components";Props
该组件没有公开的 Props。
UserMessageAttachments
在用户消息中展示已发送的附件。
使用位置
Thread 的 UserMessage 中已预配置：
<MessagePrimitive.Root>
<UserMessageAttachments />
<div>
<MessagePrimitive.Parts />
</div>
</MessagePrimitive.Root>特性
- 自动从
useAuiState(s => s.attachment)获取附件信息 - 根据附件类型显示类型标签（Image / Document / File）
- 支持三种状态：上传中（Uploading）、错误（Error）、正常
- 图片附件支持点击预览（Dialog 弹窗）
ComposerAttachments
在输入框中展示正在上传的附件。
使用位置
<ComposerPrimitive.Root>
<ComposerAttachments />
<ComposerPrimitive.Input />
</ComposerPrimitive.Root>附件状态
| 状态 | 显示 | Props |
|---|---|---|
| 上传中 | Loader2Icon 旋转 + 半透明遮罩 | status.type === "running" |
| 上传失败 | AlertCircleIcon + 红色边框 | status.type === "incomplete" && status.reason === "error" |
| 正常 | 缩略图 | 其他状态 |
AttachmentUI 内部逻辑
const isImage = useAuiState((s) => s.attachment.type === "image");
// 类型标签：Image / Document / File
const typeLabel = useAuiState((s) => s.attachment.type);
// 错误信息
const errorMessage = useAuiState(
(s) => s.attachment.status.message ?? "Upload failed",
);AttachmentRemove
在输入框附件中显示删除按钮（ComposerAttachments 专有）：
<AttachmentPrimitive.Remove
render={<TooltipIconButton tooltip="Remove file" />}
>
<XIcon />
</AttachmentPrimitive.Remove>ComposerAddAttachment
添加附件的按钮。
使用位置
<ComposerPrimitive.Root>
<ComposerAddAttachment />
</ComposerPrimitive.Root>Props
继承所有 ComposerPrimitive.AddAttachment 的 Props：
<ComposerAddAttachment
className="custom-style"
// ComposerPrimitive.AddAttachment 的所有 Props
/>AttachmentPreviewDialog
当附件为图片时，点击附件缩略图弹出预览对话框（Dialog 组件）：
<Dialog>
<DialogTrigger>
<Avatar>{/* 缩略图 */}</Avatar>
</DialogTrigger>
<DialogContent className="sm:max-w-3xl">
<DialogTitle className="sr-only">Image Attachment Preview</DialogTitle>
<img src={src} alt="Attachment preview" />
</DialogContent>
</Dialog>完整示例
import {
UserMessageAttachments,
ComposerAttachments,
ComposerAddAttachment,
} from "aui-components";
import {
ThreadPrimitive,
MessagePrimitive,
ComposerPrimitive,
} from "@assistant-ui/react";
// 自定义 Composer
<ComposerPrimitive.Root>
<ComposerAttachments />
<ComposerPrimitive.Input />
<div className="flex items-center justify-between">
<ComposerAddAttachment />
<ComposerPrimitive.Send />
</div>
</ComposerPrimitive.Root>;相关链接
- Image — 消息中的图片渲染
- TooltipIconButton — 删除按钮使用的工具