S SV5UI Plus

Quick Example

Chat Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `chat`

Code

                <script lang="ts">
 import { ChatBubble, ChatMessage, ChatInput } from 'sv5ui-plus';
</script>

<div class="space-y-4">
  <ChatBubble position="end">
    <ChatMessage>Hi there!</ChatMessage>
  </ChatBubble>
  <ChatInput placeholder="Type a message..." />
</div>

Chat

A comprehensive set of components to build chat interfaces, including bubbles, messages, and inputs.

Usage

Combine ChatBubble, ChatMessage, and ChatInput to create conversational UI.

O
Obi-Wan 12:00
Hello there!
G
Grievous 12:01
General Kenobi.
You are a bold one.

Message Variants

Use the variant prop on ChatMessage to change its appearance.

Surface (Default)
Primary
Outline