astryx-vue

对话消息

@astryxdesign/core v0.7.1 · ChatMessage

I just pushed the refactored auth module.
Can you review the token validation changes?
2:30 PM已读
Looks good — the refresh token rotation is solid and the error handling covers all the edge cases. Ship it.
2:31 PMClaude Opus 4.6

使用方法 ​

ChatMessage 是一条消息的外壳，负责按发送者角色摆好头像、名字、元信息和对齐方向。

sender 必填。它决定这条消息靠哪边，也决定头像、名字、元信息三个插槽要不要渲染：system 行居中显示，这三样都不出。密度默认跟着外层 ChatMessageList 走，单条消息也可以自己指定。

名字和元信息这两个插槽是给「正文不是气泡」的情况用的。正文第一条是 ChatMessageBubble 时，把名字放到气泡上，名字才会跟气泡的内边距对齐；元信息放在最后一条气泡上，道理一样。

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

<template>
  <ChatMessageList>
    <ChatMessage sender="user">
      <ChatMessageBubble>
        Can you review the token validation changes?
      </ChatMessageBubble>
    </ChatMessage>
    <ChatMessage sender="assistant">
      <ChatMessageBubble variant="ghost">
        Looks good — ship it.
      </ChatMessageBubble>
    </ChatMessage>
  </ChatMessageList>
</template>

示例 ​

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

头像与名字

A
Agent
I reviewed the pull request. The changes look solid — clean code and good test coverage.
10:15 AM
Thanks! Merging it now.
10:16 AM已读
A
Agent
I can run the deployment pipeline once it lands. Just let me know.
10:17 AM

带头像和发送者名字的消息。正文用气泡时名字写在气泡上；正文是自由内容时名字写在消息外层。

透明气泡

Here is an analysis of your production metrics from last week. Traffic peaked at 12,400 requests per second on Wednesday, with a p99 latency of 45ms. Error rate stayed below 0.1% across all endpoints.
9:45 AMClaude Opus 4.6
That looks great. Can you compare it to the week before?
Compared to the previous week, traffic is up 8% and latency improved by 3ms. The deployment on Tuesday seems to have helped.
9:46 AMClaude Opus 4.6

没有可见气泡边界的透明样式。内边距还留着，所以还能对齐，只是背景透明，适合助手的长回复。

多条气泡

I have a couple of questions about the new API.
First, how should we handle pagination?
And second, what's the rate limit?
11:00 AM已送达
A
Agent
Great questions! For pagination, use cursor-based with a limit parameter. The response includes a nextCursor field.
Rate limit is 100 requests per minute per API key. You'll get a 429 response with a Retry-After header if you exceed it.
11:01 AM

用 group 属性收圆角，把同一个人的几条气泡连成一段。first、middle、last 依次写，就能看出是一口气说的。