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 | - | - |
| editable | Whether bubble is editable | boolean | EditableBubbleOption | false | - |
| 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 | - | - |
| onEditing | Editing 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.The auto-scroll feature in Bubble.List works by reversing the order of messages. In a fixed-height Bubble.List, if there isn't enough content to fill the available space, the messages will be aligned to the bottom. To achieve top alignment, it's recommended to wrap Bubble.List in a parent container with a fixed height and flexbox properties (display: flex and flex-direction: column). This allows Bubble.List to adapt its height and align content to the top when the list isn't full. This approach is demonstrated in the Bubble List demo.
<div style={{ height: 600, display: 'flex', flexDirection: 'column' }}><Bubble.List items={items} autoScroll /></div>
Alternatively, if you prefer not to use a flexbox layout, you can set a max-height on the Bubble.List itself using the rootStyle prop. This way, the list's height will adapt to its content, resulting in a top-aligned appearance when the content is sparse.
<Bubble.List items={items} autoScroll rootStyle={{ maxHeight: 600 }} />
| 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 | 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 EditableBubbleOption {/*** @description Whether to enable editing*/editing?: boolean;/*** @description Button UI for commit*/okText?: React.ReactNode;/*** @description Button UI for cancel*/cancelText?: React.ReactNode;}
interface BubbleAnimationOption {/*** @description Animation effect type, typewriter, fade* @default 'fade-in'*/effect: 'typing' | 'fade-in';/*** @description Content step units, array format as random intervals* @default 6*/step?: number | [number, number];/*** @description Animation trigger interval* @default 100*/interval?: number;/*** @description Whether to restart an animation with the common prefix of the text* @default true*/keepPrefix?: boolean;/*** @description Stepping UI under typewriter effect* @default undefined*/suffix?: React.ReactNode;}
type RoleProps = Pick<BubbleProps,| 'typing'| 'variant'| 'shape'| 'placement'| 'rootClassName'| 'classNames'| 'className'| 'rootStyle'| 'styles'| 'style'| 'loading'| 'loadingRender'| 'contentRender'| 'footerPlacement'| 'components'> & { key: string | number; role: string };export type FuncRoleProps = (data: BubbleData) => RoleProps;export type RoleType = Partial<Record<'ai' | 'system' | 'user', RoleProps | FuncRoleProps>> &Record<string, RoleProps | FuncRoleProps>;
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.
Editable bubble, support simple editing of string type content, and should be protected by XSS in onEditing when used.
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.
