Composer · Pactor UI 资产库

元信息

字段	值
规范 ID	`component.composer`
名称	Composer
二级分类	AI 与会话（`ai-chat`）
用途	输入提示词、附件和发送操作
描述	中文惯用名：输入区。

预览

静态结构：列 = 附件区（Attachment，attachments 非空时渲染，onRemoveAttachment / onRetryAttachment 透出）+ 输入区（ChatInput：自适应高度、Enter 发送 / Shift+Enter 换行 / IME 保护、非受控发送后自动清空）；loading 禁用发送。

DSL 结构

DslNode

{
  "type": "Composer",
  "props": {
    "value": "${state.draft}",
    "placeholder": "输入消息，Enter 发送",
    "rows": 3
  },
  "events": {
    "onChange": {
      "action": "setState",
      "params": {
        "draft": "${event}"
      }
    },
    "onSubmit": {
      "action": "setState",
      "params": {
        "draft": ""
      }
    }
  }
}

何时用

何时使用

输入提示词、附件和发送操作：会话输入区。

何时不用

只要输入框结构（自定义工具栏槽）：使用 ChatInput。
完整会话产品输入（transport / 提及）：使用 @pactor-app/chat 的 Composer。

变体

变体	视觉形态	适用场景
纯输入	ChatInput	常规提问
带附件	附件 chips + 输入	带上下文文件提问

API 属性

属性	类型	默认值	说明
`value`	`string`	—	受控值
`placeholder`	`string`	—	占位提示
`disabled / loading`	`boolean`	false	禁用 / 发送中（禁用发送）
`rows`	`number`	3	最小行数
`attachments`	`AttachmentItemData[]`	[]	附件列表
`onRemoveAttachment / onRetryAttachment`	`event`	—	附件移除 / 重试，传出 id / 下标
`onChange`	`event`	—	输入事件，传出 string
`onSubmit`	`event`	—	发送事件，传出当前文本（${event}）
`className / style`	`string / CSSProperties`	—	通用：根节点 class 合并 / 内联样式

使用规范

附件的上传与存储由调用方负责，组件只呈现与上报事件。

正例

✓ 最小会话页：MessageList + Composer，onSubmit 接入数据源发送。

反例

✕ 在 Composer 里塞业务提交逻辑（应走 service / action）。

Design Token 映射

不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。

关联资产