Chat 聊天

用于显示带头像和元数据的对话的聊天消息气泡。

引入

import { Chat } from 'asterui'

示例

基本聊天

不同位置的简单聊天气泡。

</>

Hey! How are you?

I'm doing great, thanks for asking!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat position="start" message="Hey! How are you?" />
        <Chat position="end" message="I'm doing great, thanks for asking!" />
      </div>
    )
}

export default App

带头像

带用户头像的聊天气泡。

</>

Hey! Did you see the new updates?

Yes! They look amazing!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="start"
          avatar="/avatar-1.webp"
          avatarAlt="User"
          message="Hey! Did you see the new updates?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          avatarAlt="Me"
          message="Yes! They look amazing!"
        />
      </div>
    )
}

export default App

带标题

带姓名和时间戳标题的聊天气泡。

</>

Alice 12:45

Good morning! Ready for the meeting?

Bob 12:46

Yes, joining now!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="start"
          avatar="/avatar-1.webp"
          header={<span>Alice <time className="text-xs opacity-50">12:45</time></span>}
          message="Good morning! Ready for the meeting?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          header={<span>Bob <time className="text-xs opacity-50">12:46</time></span>}
          message="Yes, joining now!"
        />
      </div>
    )
}

export default App

彩色气泡

不同颜色变体的聊天气泡。

</>

Primary color message

Secondary color message

Success color message

Error color message

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat position="start" color="primary" message="Primary color message" />
        <Chat position="end" color="secondary" message="Secondary color message" />
        <Chat position="start" color="success" message="Success color message" />
        <Chat position="end" color="error" message="Error color message" />
      </div>
    )
}

export default App

带页脚

带送达状态页脚的聊天气泡。

</>

Did you get my message?

Delivered

Hello?

Seen at 12:46

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="end"
          avatar="/avatar-1.webp"
          footer={<span className="text-xs opacity-50">Delivered</span>}
          message="Did you get my message?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          footer={<span className="text-xs opacity-50">Seen at 12:46</span>}
          message="Hello?"
        />
      </div>
    )
}

export default App

API

Chat

属性	描述	类型	默认值
message	消息内容	React.ReactNode	-
position	气泡位置	'start' | 'end'	'start'
avatar	头像图片 URL	string	-
avatarAlt	头像替代文本	string	-
header	标题内容（姓名、时间）	React.ReactNode	-
footer	页脚内容（状态）	React.ReactNode	-
color	气泡颜色变体	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'	-
className	额外的 CSS 类名	string	-
data-testid	用于测试的测试 ID	string	-

无障碍

• 为头像图片使用有意义的替代文本
• 消息内容可被屏幕阅读器读取
• 位置类有助于传达对话流程