对话输入区 | astryx-vue

使用方法

ChatComposer 是对话页面里写字发送的那一整块。它管草稿（你给 v-model 就归你管，不给它自己存）、默认带标签能力的输入框、发送和停止两颗按钮，另外还有抽屉、页眉、页脚、状态提示这几个可选位置。自己写的输入框和发送按钮也能接进来：通过 useChatComposerContext() 拿到同一份草稿、提交、禁用、停止和聚焦的约定。

import { ChatComposer } from '@astryx-vue/core/Chat'

解剖

部分	说明
输入区框架	最外层。把主体包起来，上面或下面还能各挂一条状态提示。
输入区主体	圆角的抬升表面，里面放页眉、输入框和页脚。
抽屉	主体上方的内容，放附件之类可以展开的东西，一般用 ChatComposerDrawer。
页眉	一行，开头放操作，末尾放上下文信息。
输入框	默认的 ChatComposerInput，或者通过 useChatComposerContext() 接进来的自定义编辑器。
页脚	一行，放调用方给的操作和发送操作，外加那颗主按钮。
发送或停止	默认的 ChatSendButton，或者自定义的 sendButton；它提交当前草稿，或者请求中断。
状态提示	错误或警告反馈，画在输入区主体的上面或下面。

示例

常见的用法、变化和状态。

ChatComposer — 附件

feature-prd.docx2026-roadmap.pdfuser-flow.figlaunch-plan.docxuser-feedback.csvanalytics-kpis.csv

抽屉里放可以逐个删掉的附件标签。用户能给这条消息带上文件或上下文时用它。

ChatComposer — 扁平样式

elevation="none" — flat, with a text-input-style border and focus ring

输入区默认是抬起的（elevation="low"）。把 elevation 设成 "none" 就变平，这时它画一条边框，静止、悬停、聚焦的样子都跟文本输入框一致。

ChatComposer — 页脚操作

Model selector and settings dropdowns

页脚放模型选择和设置两个下拉菜单，发送按钮左边的位置放一个麦克风按钮。

ChatComposer — 完整配置

All slots populated

design-spec.pdfrequirements.docxwireframes.figapi-spec.yamluser-research.csv

所有插槽都放满：可折叠的附件抽屉、页眉操作、上下文进度条、页脚下拉菜单，以及麦克风按钮。展示输入区能配到的最全的样子。

ChatComposer — 最简

最简的输入区：一个占位文字，加一个提交处理。往页面里塞一个输入框，用这个就够。

ChatComposer — 流式输出

Send a message to start streaming

带有流式状态和停止按钮的输入区。助手正在生成回答、用户可以中途取消时用它。

ChatComposer — 校验提示

Error message (with top position)

Failed to send message. Please try again.

Warning message (with bottom position)

Context window is 90% full.

带错误和警告提示的输入区。提示可以放在输入区上面，也可以放在下面，用来告诉用户校验结果或系统状态。

使用方法 ​

解剖

示例 ​