Chat

ChatBubble 支持 text / voice / file / image 四变体，ChatInputBar 是底部输入。

ChatBubble

IM 气泡，左右方向 × 4 变体 × 3 主色。received 渲染白底 + 头像，sent 渲染主色底。

Import

import { ChatBubble, ChatInputBar } from "@forge-ui/react";

Text Usage

type 控制方向，variant="text" 为默认。

Alex

Hey, how's it going?

All good, working on the new design.

10:32

1<ChatBubble type="received" avatar={avatar} senderName="Alex" content="Hey, how's it going?" />
2<ChatBubble type="sent" content="All good, working on the new design." time="10:32" />

Voice

variant="voice" 渲染播放按钮 + 21 条波形柱 + 可选时长。

0:15

0:08

1<ChatBubble type="received" variant="voice" voiceDuration="0:15" avatar={avatar} />
2<ChatBubble type="sent" variant="voice" voiceDuration="0:08" />

File

brief.pdf

2.4 MB

1<ChatBubble type="received" variant="file" fileName="brief.pdf" fileSize="2.4 MB" avatar={avatar} />

Colors

3 主色，下方示意 sent 气泡（received 始终白底）。

Purple

Blue

Black

1<ChatBubble type="sent" color="purple" content="Purple" />
2<ChatBubble type="sent" color="blue" content="Blue" />
3<ChatBubble type="sent" color="black" content="Black" />

API

Attribute	Type	Default	Description
`type`	`'sent' \| 'received'`	`—`	决定左右对齐、气泡背景与圆角缺口方向。
`variant`	`'text' \| 'voice' \| 'file' \| 'image'`	`'text'`	气泡内容类型。
`color`	`'purple' \| 'blue' \| 'black'`	`'purple'`	主色（影响 sent 气泡背景、voice 播放按钮等）。
`content`	`string`	`—`	text 变体正文。
`time`	`string`	`—`	气泡下方时间文案。
`avatar`	`string`	`—`	received 变体左侧头像 URL。
`senderName`	`string`	`—`	received 变体上方发送人姓名。
`images`	`string[]`	`—`	image 变体图片数组。
`extraImageCount`	`number`	`—`	image 变体尾部 +N。
`fileName / fileSize`	`string`	`—`	file 变体文件名与大小。
`voiceDuration`	`string`	`—`	voice 变体播放时长文案。

ChatInputBar

底部输入栏：附件按钮 + 输入框 + 紫色发送按钮，回车即发。

Usage

1<ChatInputBar onSend={(msg) => console.log(msg)} />

API

Attribute	Type	Default	Description
`placeholder`	`string`	`'Type a message...'`	输入框占位符。
`onSend`	`(message: string) => void`	`—`	发送回调，Enter 或点按钮触发。
`className`	`string`	`''`	额外 className。

看所有变体 →