src/demos/ChatDemo.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

import {
  ChatMessage,
  ChatMessageBubble,
  ChatMessageList,
  ChatMessageMetadata,
} from '@astryxdesign/core/Chat'
import { Text } from '@astryxdesign/core/Text'
import { Timestamp } from '@astryxdesign/core/Timestamp'

export function ChatDemo() {
  return (
    <ChatMessageList>
      <ChatMessage sender="user">
        <ChatMessageBubble group="first">
          我把权限模块重构好了。
        </ChatMessageBubble>
        <ChatMessageBubble
          group="last"
          metadata={
            <ChatMessageMetadata
              timestamp={
                <Timestamp value="2026-04-28T14:30:00" format="time" />
              }
              status="read"
            />
          }>
          可以帮我检查一下令牌校验的改动吗？
        </ChatMessageBubble>
      </ChatMessage>
      <ChatMessage sender="assistant">
        <ChatMessageBubble
          variant="ghost"
          metadata={
            <ChatMessageMetadata
              timestamp={
                <Timestamp value="2026-04-28T14:31:00" format="time" />
              }
              footer={
                <Text type="supporting" color="secondary">
                  Astryx 助手
                </Text>
              }
            />
          }>
          看过了，刷新令牌轮换和错误处理都覆盖到了，可以发布。
        </ChatMessageBubble>
      </ChatMessage>
    </ChatMessageList>
  )
}