| category | group | title | description | cover | coverDark | demo | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Components |
|
Bubble |
A bubble component for chat. |
|
Often used when chatting.
debug
Basic
Placement and avatar
Header and footer
Loading
Typing effect
Content render
Variant
Shape
Bubble List
Semantic Custom
Custom List Content
Using GPT-Vis to render charts
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| avatar | Avatar component | React.ReactNode | - | |
| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | |
| content | Content of bubble | string | - | |
| footer | Footer content | React.ReactNode | - | |
| header | Header content | React.ReactNode | - | |
| loading | Loading state of Message | boolean | - | |
| placement | Direction of Message | start | end |
start |
|
| shape | Shape of bubble | round | corner |
- | |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | |
| typing | Show message with typing motion | boolean | { step?: number, interval?: number } | false | |
| variant | Style variant | filled | borderless | outlined | shadow |
filled |
|
| loadingRender | Customize loading content | () => ReactNode | - | |
| messageRender | Customize display content | (content?: string) => ReactNode | - | |
| onTypingComplete | Callback when typing effect is completed. If typing is not set, it will be triggered immediately when rendering. | () => void | - | |
| extra | Customize extra content | React.ReactNode | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoScroll | When the content is updated, scroll to the latest position automatically. If the user scrolls, the automatic scrolling will be paused. | boolean | true | |
| items | Bubble items list | (BubbleProps & { key?: string | number, role?: string })[] | - | |
| roles | Set the default properties of the bubble. The role in items will be automatically matched. |
Record<string, BubbleProps> | (bubble) => BubbleProps | - |