Bubble
Bubble
A bubble component for chat.
Importimport { Bubble } from "@ant-design/x"; |
Sourcecomponents/bubble |
Ant Design XImportimport { Bubble } from "@ant-design/x"; |
Sourcecomponents/bubble |
Often used when chatting.
Common Props Reference: Common Props
| Attributes | Description | Type | Default | Version |
|---|---|---|---|---|
| prefixCls | Custom class prefixes | string | - | - |
| rootStyle | Root Node Style | React.CSSProperties | - | - |
| styles | Semantic structure style | Record<SemanticDOM, CSSProperties> | - | |
| rootClassName | Root node class name | string | - | - |
| classNames | Semantic structure class | Record<SemanticDOM, string> | - | |
| placement | Bubble Location | start | end | start | - |
| loading | Load Status | boolean | - | - |
| loadingRender | Custom loading content rendering | () => React.ReactNode | - | - |
| content | Bubble Contents | ContentType | - | - |
| contentRender | Custom content rendering | (content: ContentType) => React.ReactNode | - | - |
| typing | Typing Animation Effects | boolean | BubbleAnimationOption | false | - |
| streaming | Whether it is streaming | boolean | false | - |
| variant | Bubble style variants | filled | outlined | shadow | borderless | filled | - |
| shape | Bubble Shape | default | round | corner | default | - |
| footerPlacement | Bottom Slot Position | outer-start | outer-end | inner-start | inner-end | outer-start | - |
| components | Expand Slot Configuration | { header?: BubbleSlot; footer?: BubbleSlot; avatar?: BubbleSlot; extra?: BubbleSlot; } | - | - |
| onTyping | Animation Execution Callback | (rendererContent: string, currentContent: string) => void | - | - |
| onTypingComplete | Animation end callback | (content: string) => void | - | - |
streaming can be passed to tell Bubble if the current content is a streaming input. When in streaming mode, with or without Bubble input animation, the Bubble will not trigger the onTypingComplete callback until streaming becomes false, even if the current content has fully outputted. This avoids the issue of multiple triggers of onTypingComplete callbacks due to unstable streaming, ensuring that only onTypingComplete is triggered once during a streaming process.
In this example, you can try to force the streaming flag to be turned off while
onTypingComplete will be triggered multiple times when performing a load slowly because the streaming speed cannot keep up with the animation speed.onTypingComplete will be triggered every time you stream the input.| Attributes | Description | Type | Default | Version |
|---|---|---|---|---|
| prefixCls | Custom class prefixes | string | - | - |
| rootClassName | Root node class name | string | - | - |
| rootStyle | Root Node Style | React.CSSProperties | - | - |
| items | Bubble data list, key, role required | (BubbleProps & { key: string | number, role: string }) [] | - | - |
| autoScroll | Whether to auto-scroll | boolean | true | - |
| role | Role default configuration | Partial<Record<ai | system | user, RoleType>> & Record<string, RoleType> | - | - |
Default type
type ContentType = React.ReactNode | AnyObject | string | number;
Custom type usage
type CustomContentType {...}<Bubble<CustomContentType> {... props} />
type BubbleSlot<ContentType> = React.ReactNode | ((content: ContentType) => React.ReactNode);
interface BubbleAnimationOption {/*** @description Animation effect type, typewriter, fade*/effect: 'typing' | 'fade-in';/*** @description Content step units, array format as random intervals*/step?: number | [number, number];/*** @description Animation trigger interval*/interval?: number;/*** @description Whether to restart an animation with the common prefix of the text*/keepPrefix?: boolean;/*** @description Stepping UI under typewriter effect*/suffix?: React.ReactNode;}
type RoleType = Pick<BubbleProps,| 'typing'| 'variant'| 'shape'| 'placement'| 'rootClassName'| 'classNames'| 'className'| 'rootStyle'| 'styles'| 'style'| 'loading'| 'loadingRender'| 'contentRender'| 'footerPlacement'| 'components'> & { key: string | number; role: string };
Basic usage.
variant and shape, borderless Bubble is suitable for rendering custom-styled content.
Bubble sidebar and placement, placement will change the position of the primary and secondary sidebars.
Bubble header, placement will change the alignment of the header.
Bubble footer, not affected by placement, use footerPlacement to control the rendering position of the footer.
Control the loading state by loading prop.
Animation effect. It only works if content is a string or contentRender renders a string. Non-string scenes require custom rendering animations. When it takes effect, if content remains unchanged and other configurations change, the animation does not re-execute.
Stream. streaming can be passed to tell Bubble if the current content is a streaming input.
Custom rendering content.
Cooperate with x-markdown to achieve customized rendering content.
Bubble list with preset styles, supports automatic scrolling, supports using role to define different types of bubbles and set properties. Bubble.List is a controlled component, and Bubble is internally memoized, so it is recommended to use setState callback form to modify the items property, and try to ensure the stability of the configuration of non-essential rendering data items, so as to ensure the high performance rendering of Bubble.List.
Bubble.List ref.
Sample for adjusting the bubble effect through semantic and loading customization.
Cooperate with @antv/GPT-Vis to achieve customized rendering chart of LLM stream output.
