AiBubble
AiBubble is the core component for AI conversation interaction.
Basic Usage
Display visual differences between user and assistant, along with loading animations.
Artificial Intelligence (AI) is technology that can perform tasks that typically require human intelligence.
Can it write code by itself?
Advanced Features & Variants
AiBubble features a built-in Markdown engine and highlight.js parsing. It offers various variants (variant), shapes (shape), and specialized metadata support.
This is a Markdown rendering example. Let’s see some code:
typescriptconst greeting = 'Hello World';
console.log(greeting);
Great! Can I change the style?
Sure, this is outlined mode.
It looks really premium.
If you don’t like outlines, you can use borderless mode.
Typing Effect & Visual Feedback
More than just a loading state, it allows text to flow out with a flickering cursor, mimicking the AI writing experience.
TIP
Enhanced Feedback: When typing mode is enabled, the component automatically appends a "Blinking Cursor" to the last line and adds a "Gentle Ripple" glow to the bubble background, making the generation process feel alive.
- Streaming Performance: Under the hood, we introduced a
requestAnimationFramedebouncing queue. When receiving high-frequency text payloads intypingmode, it stabilizes the intense Markdown parsing and keeps your browser refreshing at a seamless 60 frames per second without blocking the main thread!
Citations & Reference Tooltip
AI responses often need verification to avoid hallucinations. Besides appending a raw list at the bottom, we injected a smart Citation syntax interceptor natively. If the citations array is present and the model outputs Markdown tags like [1] or [2]: the bubble automatically transforms them into interactive, softly-glowing citation badges. 💡 Try it: Hover your mouse over [1], [2], or [3] in the text below to trigger the elegant floating citation popover.
According to the latest YH-UI guide 1, we recommend using Composition API 2. Moreover, Vite’s build optimizations 3 can significantly improve UX.
Multimodal Rendering
The component supports direct display of various media formats, including image grids, audio players with waveform animations, and file/download cards.
Here are the audio assets and reference documents I generated for you.
Advanced Configuration: Markdown & Structured Data
With markdown-options, structured-data, and callbacks on-run-code / on-explain-code, you can turn AiBubble into a richer Markdown and data visualization surface.
This is a Markdown rendering example. Let’s see some code:
typescriptconst greeting = 'Hello World';
console.log(greeting);
| Metric | Value |
|---|---|
| Tokens | 256 |
| Latency(ms) | 120 |
More Examples
Custom Avatar
Customize the bubble avatar using the avatar prop or #avatar slot.
Hello! I’m your AI assistant. How can I help you today?
I want to learn how to use this component library.
Custom Header/Footer Slots
Use #header and #footer slots to customize the bubble's supplementary information area.
This is a bubble with custom header and footer.
Bubble Placement
Control the bubble alignment using the placement prop.
Left aligned bubble (start)
Right aligned bubble (end)
System Message
Use role="system" to display system notices or announcements.
⚠️ System Notice: This conversation has exceeded 30 minutes. Please save your progress.
How can I assist you today?
Plain Text Mode
Disable Markdown parsing to display plain text content.
Full Conversation Flow
Demonstrate a complete multi-turn conversation.
Hello! I’m your AI assistant today. What can I help you with?
I’d like to learn Vue 3’s Composition API.
Composition API is a new API style introduced in Vue 3 that allows you to organize component logic better.
Can you give me an example?
Of course!
vue<script setup>
import { ref, computed } from "vue"
const count = ref(0)
const doubled = computed(() => count.value * 2)
<\/script>
<template>
<button @click="count++">Count: {{ count }}</button>
</template>
This is a simple Composition API example.