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

      Loading...

Render as markdown content to show rich text!

Link: Ant Design X

Content render

Cooperate with markdown-it to achieve customized rendering content.

      Loading...

variant: filled

variant: outlined

variant: shadow

prompt

Variant

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

      Loading...

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

shape: corner

Shape

Set the shape of the bubble through the nxShape prop.

      Loading...

Use Role As:

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.

Bubble list

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

      Loading...

Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content. Mock welcome content.

Mock user content.

Custom Loading...

Semantic custom

Sample for adjusting the bubble effect through semantic and loading customization.

      Loading...

API#

nx-bubble#

Property	Description	Type	Default
`[nxContent]`	Content of the bubble	`string`	`''`
`[nxMessageRender]`	Custom message rendering template	`TemplateRef<{ content: string }> \| null`	`null`
`[nxAvatar]`	Avatar component or properties	`NxBubbleAvatar`	-
`[nxHeader]`	Header content of the bubble	`string \| TemplateRef<void> \| null`	`null`
`[nxFooter]`	Footer content of the bubble	`string \| TemplateRef<void> \| null`	`null`
`[nxLoading]`	Loading state	`boolean`	-
`[nxLoadingRender]`	Custom loading state rendering template	`TemplateRef<void> \| null`	`null`
`[nxPlacement]`	Placement of the bubble	`NxBubblePlacement`	`'start'`
`[nxShape]`	Shape of the bubble	`NxBubbleShape`	`'default'`
`[nxTyping]`	Typing effect configuration	`boolean \| NxTypingOption`	`DEFAULT_TYPING_OPTION`
`[nxVariant]`	Variant of the bubble	`NxBubbleVariant`	`'filled'`
`(nxContentUpdate)`	Callback triggered when content is updated	`EventEmitter<void>`	-
`(nxTypingComplete)`	Callback triggered when the typing effect is completed	`EventEmitter<void>`	-

nx-bubble-list#

Property	Description	Type	Default
`[nxAutoScroll]`	Whether to automatically scroll to the latest position when content is updated	`boolean`	`true`
`[nxItems]`	List of bubble items	`NxBubbleListItem[]`	Required
`[nxRoles]`	Set default properties for bubbles, `role` will be automatically matched	`NxBubbleRoles`	-

interface NxBubbleListItem {
  key?: string;
  role?: string;
  content?: string;
  loading?: boolean;
  placement?: NxBubblePlacement;
  shape?: NxBubbleShape;
  variant?: NxBubbleVariant;
  typing?: boolean | NxTypingOption;
  avatar?: NxBubbleAvatar;
  headerRender?: TemplateRef<{ content: string; info: { key?: string } }> | null;
  footerRender?: TemplateRef<{ content: string; info: { key?: string } }> | null;
  messageRender?: TemplateRef<{ content: string }> | null;
  loadingRender?: TemplateRef<void> | null;
}