Skip to content

对话输入抽屉

@astryxdesign/core v0.7.1 · ChatComposerDrawer

design-spec.pdfapi-schema.jsonscreenshot.pngmeeting-notes.md

使用方法 ​

ChatComposerDrawer 放在 ChatComposer 的 drawer 插槽里,用来装附件、上下文标签、预览这类补充内容。只有当你希望用户能把这部分收起来时,才传 count。

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

解剖

部分说明
抽屉表面抽屉本身,叠在对话输入区主体之上。
收起开关传了 count 才出现,键盘和鼠标都能操作。
收起摘要收起时显示的东西:默认是总数徽标加一行文字,也可以换成调用方给的内容。
内容区调用方给的补充内容;收起来时里面的东西键盘和读屏都碰不到。

建议 ​

指引实践
推荐label 用一个具体的复数名词,例如 “Attachments”,这样“展开”“收起”读出来才有意义。
推荐抽屉的开关状态归页面别处管时,用 v-model:is-collapsed 配合 collapsedChange;否则用 defaultIsCollapsed。
避免把输入区的主要操作放进抽屉。这类控件要用 ChatComposer 的 footerActions 或 sendActions,抽屉收起来时它们还在。

示例 ​

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

ChatComposerDrawer — 附件

quarterly-report.pdfbudget-forecast.xlsx

抽屉里有两行:一行是可以横向滚动的图片缩略图,一行是可以逐个删掉的文件标签。不传 count,抽屉就一直展开。

ChatComposerDrawer — 可收起

design-spec.pdfapi-schema.jsonscreenshot.pngmeeting-notes.mdtest-results.csvdeploy-log.txt

条目很多、带收起开关的抽屉。传了 count 才有这个开关;收起来以后显示一个带总数的徽标和一行文字。

ChatComposerDrawer — 确认反馈

  • Do you want to proceed?
  • A
  • B
  • C

抽屉里放一个确认提问和几个带字母的可选项。用户必须先明确选一个才能继续时用它。

ChatComposerDrawer — 带进度

design-spec.pdfapi-schema.jsonscreenshot.png
Context usage

抽屉配一条放在页眉的上下文进度条。附件吃掉了一部分可用字数时,用它把用量显示出来。