astryx-vue

对话消息气泡

@astryxdesign/core v0.7.1 · ChatMessageBubble

I just pushed the latest changes to the feature branch.
Can you review when you get a chance?
9:15 AM已读
The changes look great. Ship it!
9:16 AM

使用方法 ​

ChatMessageBubble 是消息里那块带底色和圆角的内容框。它不给发送者属性，而是从外层 ChatMessage 自己读出来，于是底色、圆角、对齐都会跟着走。不在 ChatMessage 里时，按助手那一侧显示。

variant 选外观：filled 是常规的实心气泡；ghost 只保留内边距、去掉底色，正文没有可见边界但仍能对齐。名字和元信息各有插槽，左右内边距跟气泡正文一致。同一个人的连续几条用 group 写着 first / middle / last，靠发送者那一侧的圆角会收小，看起来是一整段。

气泡里只有一个代码块，或者只有带 astryx-chat-card 类的元素时，气泡会自己去掉内边距和底色，让卡片跟气泡边缘齐平。

vue
<script setup lang="ts">
import { ChatMessage, ChatMessageBubble } from '@astryx-vue/core/Chat'
</script>

<template>
  <ChatMessage sender="user">
    <ChatMessageBubble>
      Can you review the token validation changes?
    </ChatMessageBubble>
  </ChatMessage>
</template>

示例 ​

常见的用法和不同的状态。

自定义内容

Can you pull up the Q3 report?
Navi
Sure, here is the artifact from last quarter.

Q3 Performance Report

12 pages · updated 2 days ago

9:45 AMClaude Opus 4.6

消息里放自定义内容，并且跟气泡的文字列对齐。示例把一个卡片包在 width="100%" 的透明气泡里，左边缘就贴着气泡文字，宽度铺满整列而不是被默认的气泡宽上限卡住；时间放在气泡的元信息插槽里。

疏密

Compact

The build completed in 4.2 seconds.
Ship it to staging.

Balanced

The build completed in 4.2 seconds.
Ship it to staging.

Spacious

The build completed in 4.2 seconds.
Ship it to staging.

紧凑、平衡、宽松三种疏密并排看。疏密会影响气泡内边距、圆角，以及同一组气泡之间的间距。

分组

A
Agent
I reviewed the three files you shared.
The data model looks solid, but the API handler has a race condition on concurrent writes.
I can draft a fix if you want.
10:45 AM
Yes please!
Also add a test for the concurrent case.
10:46 AM已送达

多条气泡用 first、middle、last 标位置。靠发送者那一侧的圆角会收小，看着是一口气说完的一段。

元信息

A
Agent
Your deployment finished successfully. All 14 checks passed.
9:15 AMClaude Opus 4.6
Great, can you send me the production URL?
9:16 AM已读

名字和元信息插槽，位置跟气泡内边距对齐。一条消息里，名字放第一条气泡，元信息放最后一条气泡。

变体

Filled — sender-colored background (default)

Can you summarize the latest deployment logs?

Ghost — transparent background, keeps alignment padding

The last deploy completed at 2:41 PM with zero errors across all three regions.

实心和透明两种气泡，用户和助手两侧都能用。常规消息用实心；不想看到边界、又要对齐时用透明。