提示词附件 PromptAttachment

Prompt 的附件能力由 uploadConfig 开启，附件列表由 PromptAttachment 渲染。它读取 Prompt 内置上传模块的文件列表，逐个展示缩略图、名称、进度与操作入口，自身不持有文件数据。

基础使用

给 Prompt 传入 uploadConfig 后，选中的文件会交给上传模块，附件区默认渲染 PromptAttachment。uploadConfig 的类型是 PromptUploadConfig，它继承了上传配置（accept、multiple、action、customRequest、defaultFileList 等），并额外提供 draggable 与 pasteable 控制拖入与粘贴。

abortable 控制上传中与排队中的文件能否中断，showProgress 控制上传进度，previewable 控制图片缩略图能否预览。需要改动这些默认值时，在 attachment 插槽里自己放一个 PromptAttachment 即可。

Attachment

abortable

showProgress

previewable

• 
  preview.png
• notes.md

Attach files with the button, by drag or by paste

隐藏源代码

附件操作

attachment、start、end、send 插槽的作用域都会给出附件上传的操作：fileList 是当前文件列表，open 与 addFiles 添加文件，submit、retry 与 abort 控制上传，remove 与 clear 移除文件，download 交给 customDownload 处理。submit、retry 与 abort 不传文件 id 时作用于全部对应文件。

下面的例子关闭了 autoUpload，新文件会先停在待上传状态，再通过作用域里的 submit 统一上传。

1 file(s)

• notes.md

Use the actions above the attachment list

隐藏源代码

独立使用

PromptAttachment 从上传上下文读取文件列表，所以并不只属于 Prompt：把它放进 Upload 的 file-list 插槽，就能用同一套卡片替换默认的文件列表，Upload 的 accept、multiple、customRequest、draggable 等配置照常生效。

• 
  preview.png
• notes.md

隐藏源代码

API

PromptAttachmentProps

属性	类型	可选	默认值	描述	版本
abortable	boolean	是	true	是否允许中断附件列表中进行中和排队中的上传。	0.2.1
showProgress	boolean	是	true	是否展示附件列表的上传进度。	0.2.1
previewable	boolean	是	true	是否允许预览附件列表中的图片。	0.2.1

PromptUploadConfig

属性	类型	可选	默认值	描述	版本
draggable	boolean	是	true	是否允许把文件拖入 Prompt 的输入区域。	0.2.1
pasteable	boolean	是	true	是否允许把文件粘贴到 Prompt 的输入区域。	0.2.1

PromptUploadScope

附件相关插槽的作用域类型，PromptAttachment 也从这里读取文件列表。

export type UploadProviderScope = {
	fileList: FileInfo[]
	mode: UploadProviderProps['mode']
	size: UploadProviderProps['size']
	disabled: boolean | undefined
	abortable: boolean | undefined
	download: (file: FileInfo) => void
	open: () => void
	addFiles: (files: File[], e?: Event) => void
	submit: (fileId?: string) => void
	retry: (fileId?: string) => void
	abort: (id?: string) => void
	remove: (id: string, e?: MouseEvent) => Promise<void>
	clear: () => void
}

export type PromptUploadScope = UploadProviderScope

FileInfo

export interface FileInfo {
	id: string
	name: string
	type?: string
	file?: File
	state: 'pending' | 'queueing' | 'uploading' | 'finished' | 'error'
	progress: number
	url?: string
	thumbnailUrl?: string
	response?: any
}