Skip to content

对话消息气泡

@astryxdesign/core v0.7.1 · ChatMessageBubble

属性 ​

属性类型默认值说明
variant'filled' | 'ghost''filled''filled' 铺发送者那一侧的底色。'ghost' 保留内边距、去掉底色,混排内容照样能对齐。气泡里只有一个代码块,或者只有带 astryx-chat-card 类的元素时,气泡会去掉内边距和底色,让卡片跟气泡边缘齐平。
namestring—气泡上方的发送者名字,左右位置跟气泡内边距对齐。写在一条消息的第一条气泡上;如果第一条内容不是气泡,改用 ChatMessage 的 name。
group'first' | 'middle' | 'last'—在一组气泡里的位置。会把靠发送者那一侧的圆角收小。单独一条气泡不用写。
widthstring—换掉默认的 max(80%, 280px) 宽度上限。想让气泡里的内容铺满整列,就写 100%。配合 variant="ghost" 用来放卡片和附件。

插槽 ​

  • default:气泡正文。纯文本、Markdown 或者任意元素都行。气泡只负责表面。
  • name:替代 name 属性。
  • metadata:气泡下方的元信息,位置跟气泡内边距对齐。写在一条消息的最后一条气泡上;如果最后一条内容不是气泡,改用 ChatMessage 的 metadata 插槽。

暴露 ​

  • element:气泡表面那一层元素。