Chat

Chat bubbles for AI assistant and messaging interfaces. Supports user, assistant, and system messages with avatars, typing indicators, and input areas.

Basic Messages

Preview

How do I reset my password?

Go to Settings → Security → Change Password. You'll need to enter your current password first.

Thanks, that worked!

<div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
  <!-- User message -->
  <div class="chat-message chat-user">
    <div class="chat-bubble">
      <p>How do I reset my password?</p>
    </div>
  </div>

  <!-- Assistant message -->
  <div class="chat-message chat-assistant">
    <div class="chat-bubble">
      <p>Go to Settings → Security → Change Password. You'll need to enter your current password first.</p>
    </div>
  </div>

  <!-- User message -->
  <div class="chat-message chat-user">
    <div class="chat-bubble">
      <p>Thanks, that worked!</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-4">
  <!-- User message -->
  <div class="flex gap-3 max-w-[85%] ml-auto flex-row-reverse">
    <div class="py-3 px-4 rounded-2xl rounded-br-sm bg-primary text-primary-content text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">How do I reset my password?</p>
    </div>
  </div>

  <!-- Assistant message -->
  <div class="flex gap-3 max-w-[85%] mr-auto">
    <div class="py-3 px-4 rounded-2xl rounded-bl-sm bg-base-200 text-base-content border border-base-300 text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">Go to Settings → Security → Change Password. You'll need to enter your current password first.</p>
    </div>
  </div>

  <!-- User message -->
  <div class="flex gap-3 max-w-[85%] ml-auto flex-row-reverse">
    <div class="py-3 px-4 rounded-2xl rounded-br-sm bg-primary text-primary-content text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">Thanks, that worked!</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

With Avatars

Preview

Can you help me with the inventory module?

Of course! What would you like to know about the inventory module?

<div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
  <!-- User message with avatar -->
  <div class="chat-message chat-user">
    <div class="chat-avatar">JD</div>
    <div class="chat-bubble">
      <p>Can you help me with the inventory module?</p>
    </div>
  </div>

  <!-- Assistant message with avatar -->
  <div class="chat-message chat-assistant">
    <div class="chat-avatar">AI</div>
    <div class="chat-bubble">
      <p>Of course! What would you like to know about the inventory module?</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-4">
  <!-- User message with avatar -->
  <div class="flex gap-3 max-w-[85%] ml-auto flex-row-reverse">
    <div class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full text-sm font-semibold" style="background-color: color-mix(in oklch, var(--color-primary) 20%, transparent); color: var(--color-primary);">JD</div>
    <div class="py-3 px-4 rounded-2xl rounded-br-sm bg-primary text-primary-content text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">Can you help me with the inventory module?</p>
    </div>
  </div>

  <!-- Assistant message with avatar -->
  <div class="flex gap-3 max-w-[85%] mr-auto">
    <div class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-base-300 text-base-content text-sm font-semibold">AI</div>
    <div class="py-3 px-4 rounded-2xl rounded-bl-sm bg-base-200 text-base-content border border-base-300 text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">Of course! What would you like to know about the inventory module?</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Typing Indicator

Preview

What's the status of my order?

<div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
  <div class="chat-message chat-user">
    <div class="chat-bubble">
      <p>What's the status of my order?</p>
    </div>
  </div>

  <!-- Typing indicator -->
  <div class="chat-message chat-assistant">
    <div class="chat-avatar">AI</div>
    <div class="chat-typing">
      <div class="chat-typing-dot"></div>
      <div class="chat-typing-dot"></div>
      <div class="chat-typing-dot"></div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-4">
  <div class="flex gap-3 max-w-[85%] ml-auto flex-row-reverse">
    <div class="py-3 px-4 rounded-2xl rounded-br-sm bg-primary text-primary-content text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">What's the status of my order?</p>
    </div>
  </div>

  <!-- Typing indicator -->
  <div class="flex gap-3 max-w-[85%] mr-auto">
    <div class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-base-300 text-base-content text-sm font-semibold">AI</div>
    <div class="flex items-center gap-1 py-3 px-4 bg-base-200 border border-base-300 rounded-2xl rounded-bl-sm">
      <div class="w-2 h-2 rounded-full bg-base-content/30 animate-bounce" style="animation-delay: 0s;"></div>
      <div class="w-2 h-2 rounded-full bg-base-content/30 animate-bounce" style="animation-delay: 0.2s;"></div>
      <div class="w-2 h-2 rounded-full bg-base-content/30 animate-bounce" style="animation-delay: 0.4s;"></div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - CSS animations handle the typing dots

Rich Content

Preview

How do I create a new product?

Here are the steps to create a new product:

Go to Inventory → Products
Click the + New Product button
Fill in name, SKU, and price
Click Save

The product will be available immediately in your catalog.

<div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
  <div class="chat-message chat-user">
    <div class="chat-bubble">
      <p>How do I create a new product?</p>
    </div>
  </div>

  <div class="chat-message chat-assistant">
    <div class="chat-bubble">
      <p>Here are the steps to create a new product:</p>
      <ol>
        <li>Go to <code>Inventory → Products</code></li>
        <li>Click the <code>+ New Product</code> button</li>
        <li>Fill in name, SKU, and price</li>
        <li>Click <code>Save</code></li>
      </ol>
      <p>The product will be available immediately in your catalog.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-4">
  <div class="flex gap-3 max-w-[85%] ml-auto flex-row-reverse">
    <div class="py-3 px-4 rounded-2xl rounded-br-sm bg-primary text-primary-content text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">How do I create a new product?</p>
    </div>
  </div>

  <div class="flex gap-3 max-w-[85%] mr-auto">
    <div class="py-3 px-4 rounded-2xl rounded-bl-sm bg-base-200 text-base-content border border-base-300 text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">Here are the steps to create a new product:</p>
      <ol class="my-1 pl-5">
        <li class="my-0.5">Go to <code class="px-1.5 py-px bg-base-content/8 rounded text-[0.875em] font-mono">Inventory → Products</code></li>
        <li class="my-0.5">Click the <code class="px-1.5 py-px bg-base-content/8 rounded text-[0.875em] font-mono">+ New Product</code> button</li>
        <li class="my-0.5">Fill in name, SKU, and price</li>
        <li class="my-0.5">Click <code class="px-1.5 py-px bg-base-content/8 rounded text-[0.875em] font-mono">Save</code></li>
      </ol>
      <p class="m-0 mt-2">The product will be available immediately in your catalog.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

System Message

Preview

Session started — Feb 26, 2026

Hello! How can I help you today?

<div style="display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
  <div class="chat-message chat-system">
    <div class="chat-bubble" style="background-color: var(--color-base-200); color: var(--color-base-content); opacity: 0.7; text-align: center; font-size: 0.8125rem;">
      Session started — Feb 26, 2026
    </div>
  </div>

  <div class="chat-message chat-assistant">
    <div class="chat-avatar">AI</div>
    <div class="chat-bubble">
      <p>Hello! How can I help you today?</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4 p-4">
  <div class="flex w-full">
    <div class="w-full py-3 px-4 rounded-2xl bg-base-200 text-base-content/70 text-center text-[0.8125rem]">
      Session started — Feb 26, 2026
    </div>
  </div>

  <div class="flex gap-3 max-w-[85%] mr-auto">
    <div class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-base-300 text-base-content text-sm font-semibold">AI</div>
    <div class="py-3 px-4 rounded-2xl rounded-bl-sm bg-base-200 text-base-content border border-base-300 text-[0.9375rem] leading-relaxed break-words">
      <p class="m-0">Hello! How can I help you today?</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Chat with Input Area

Preview

Welcome! I'm your assistant. Ask me anything about your store.

Show me today's sales summary

Here's your sales summary for today:

Total revenue: €2,450.00
Orders: 34
Average order: €72.06

<div style="display: flex; flex-direction: column; height: 380px; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); overflow: hidden;">
  <!-- Messages area -->
  <div style="flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1rem;">
    <div class="chat-message chat-assistant">
      <div class="chat-avatar">AI</div>
      <div class="chat-bubble">
        <p>Welcome! I'm your assistant. Ask me anything about your store.</p>
      </div>
    </div>

    <div class="chat-message chat-user">
      <div class="chat-bubble">
        <p>Show me today's sales summary</p>
      </div>
    </div>

    <div class="chat-message chat-assistant">
      <div class="chat-avatar">AI</div>
      <div class="chat-bubble">
        <p>Here's your sales summary for today:</p>
        <ul>
          <li>Total revenue: €2,450.00</li>
          <li>Orders: 34</li>
          <li>Average order: €72.06</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Input area -->
  <div class="chat-input-area">
    <textarea class="input" rows="1" placeholder="Type a message..." style="flex: 1; resize: none;"></textarea>
    <button class="btn color-primary">Send</button>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col h-[380px] border border-base-300 rounded-2xl overflow-hidden">
  <!-- Messages area -->
  <div class="flex-1 overflow-y-auto flex flex-col gap-4 p-4">
    <div class="flex gap-3 max-w-[85%] mr-auto">
      <div class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-base-300 text-base-content text-sm font-semibold">AI</div>
      <div class="py-3 px-4 rounded-2xl rounded-bl-sm bg-base-200 text-base-content border border-base-300 text-[0.9375rem] leading-relaxed break-words">
        <p class="m-0">Welcome! I'm your assistant. Ask me anything about your store.</p>
      </div>
    </div>

    <div class="flex gap-3 max-w-[85%] ml-auto flex-row-reverse">
      <div class="py-3 px-4 rounded-2xl rounded-br-sm bg-primary text-primary-content text-[0.9375rem] leading-relaxed break-words">
        <p class="m-0">Show me today's sales summary</p>
      </div>
    </div>

    <div class="flex gap-3 max-w-[85%] mr-auto">
      <div class="shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-base-300 text-base-content text-sm font-semibold">AI</div>
      <div class="py-3 px-4 rounded-2xl rounded-bl-sm bg-base-200 text-base-content border border-base-300 text-[0.9375rem] leading-relaxed break-words">
        <p class="m-0">Here's your sales summary for today:</p>
        <ul class="my-1 pl-5">
          <li class="my-0.5">Total revenue: €2,450.00</li>
          <li class="my-0.5">Orders: 34</li>
          <li class="my-0.5">Average order: €72.06</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Input area -->
  <div class="flex items-end gap-2 p-4 border-t border-base-300">
    <textarea class="input flex-1" rows="1" placeholder="Type a message..." style="resize: none;"></textarea>
    <button class="btn color-primary">Send</button>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Classes Reference

Class	Description
.chat-message	Message container (flex, max-width 85%)
.chat-user	User message alignment (right, reversed)
.chat-assistant	Assistant message alignment (left)
.chat-system	System message (full width)
.chat-bubble	Message bubble with padding and border-radius
.chat-avatar	Optional avatar circle (32px)
.chat-typing	Typing indicator container
.chat-typing-dot	Animated dot (3 required)
.chat-input-area	Input area with border-top