Bubble

Docs

Bubble

A bubble component for chat.

hello world !

Installation

pnpm dlx shadcn@latest add https://ui.aoian.chat/r/bubble

Usage

import {
  Bubble,
  BubbleContent,
  BubbleWrapper,
} from "@/components/aoian-ui/bubble/bubble"

<Bubble>
  <BubbleWrapper>
    <BubbleContent>hello world !</BubbleContent>
  </BubbleWrapper>
</Bubble>

Examples

Placement and avatar

Set custom avatar by avatar prop, set the placement of the message by placement prop, which has two preset values: start and end.

Open in

Good morning, how are you?

What a beautiful day!

Hi, good morning, I'm fine!

Thank you!

Header and footer

Use header and footer properties to set the header and footer of the bubble content.

Open in

Aoian UI

Good morning, how are you?

Loading

Control the loading state by loading prop.

Open in

Good morning, how are you?

Loading state:

Typing effect

Enable typing output by setting the typing prop. If the updated content is a subset of the previous content, it will continue to output, otherwise it will output again.

Open in

A💗

Content render

Cooperate with markdown-it to achieve customized rendering content.

Open in

Variant

Set the style variant of the bubble through the variant property.

Open in

variant: filled

variant: outlined

variant: shadow

variant: borderless to customize

Shape

Set the shape of bubble through shape.

Open in

shape: default

This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component. This is a long text message to show the multiline view of the bubble component.

shape: round

variant: corner

Bubble List

Preset Bubble list. Support auto scroll. Use roles to set default properties of Bubble.

Open in

Mock user content.

Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content. Mock AI content.

Mock user content.

Props

Bubble

Prop	Type	Default	Description
`placement`	`start` \| `end`	`start`	Direction of Message
`loading`	`boolean`	`false`	Loading state of Message
`typing`	`boolean` \| `{ step?: number, interval?: number }`	`false`	Show message with typing motion
`avatarPlaceholder`	`boolean`	`false`	Whether to display the empty avatar
`messageRender`	`(content?: string) => ReactNode`	`-`	Customize display content
`onTypingComplete`	`() => void`	`-`	Callback when typing effect is completed. If typing is not set, it will be triggered immediately when rendering.

BubbleAvatar

Prop	Type	Default	Description
`textClassName`	`string`	`-`	Text class name
`triggerClassName`	`string`	`-`	Trigger class name
`src`	`string`	`-`	Avatar image path
`alt`	`string`	`false`	Avatar image alt
`loading`	`boolean`	`false`	Loading state of Trigger
`placeholder`	`boolean`	`-`	Whether to display the empty avatar， The same as Bubble avatarPlaceholder

BubbleHeader

Prop	Type	Default	Description
`className`	`string`	`-`	Class name

BubbleFooter

Prop	Type	Default	Description
`className`	`string`	`-`	Class name

BubbleContent

Prop	Type	Default	Description
`variant`	`filled` \| `borderless` \| `outlined` \| `shadow`	`filled`	Style variant
`shape`	`round` \| `corner` \| `default`	`default`	Shape of bubble

BubbleList

Prop	Type	Default	Description
`autoScroll`	`boolean`	`true`	Bubble items list
`items`	`(BubbleProps & { key?: string \| number, role?: string, content: string })[]`	`-`	Bubble items list
`roles`	`Record<string, BubbleProps> \| (bubble) => BubbleProps`	`-`	Set the default properties of the bubble. The role in items will be automatically matched.

Installation Prompt

On This Page

Installation
Usage
Examples
Props