---
group:
  title: Output
  order: 3
title: Bubble
description: Chat Bubble
---

<DemoTitle title="Bubble" desc="Chat Bubble"></DemoTitle>

<code src="./demo/basic.tsx" height="auto">Example</code>

#### User Bubble Examples

The following are examples and variations of this component

<code src="./demo/avatar.tsx" height="auto">With Avatar</code>
<code src="./demo/userWithImage.tsx" height="auto">With Image</code>
<code src="./demo/userWithFile.tsx" height="auto">With File</code>

#### Model Bubble Examples
The following are examples and variations of this component

<code src="./demo/assistantWithCode.tsx" height="auto">With Code</code>
<code src="./demo/assistantWithImage.tsx" height="auto">With Image</code>
<code src="./demo/assistantWithThinking.tsx" height="auto">With Thinking Process</code>
<code src="./demo/assistantWithProcess.tsx" height="auto">With Step-by-Step Processing</code>
<code src="./demo/assistantWithSearch.tsx" height="auto">With Link References</code>
<code src="./demo/assistantWithErrorStatus.tsx" height="auto">Status Display</code>

#### API

<ApiParser source="./interface.ts" id="BubbleProps"></ApiParser>