Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Chat

<c-lb.chat /> Markdown

Chat bubble component for Django: display conversation threads and message interfaces. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Basic Chat

It didn't go well.
Oh no, what happened?
I forgot to save my work before the update.
That's rough. Lesson learned! 
<div class="space-y-2 w-full max-w-md">
  <c-lb.chat placement="start">
    <c-lb.chat.bubble>It didn't go well.</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="end">
    <c-lb.chat.bubble>Oh no, what happened?</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="start">
    <c-lb.chat.bubble>I forgot to save my work before the update.</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="end">
    <c-lb.chat.bubble>That's rough. Lesson learned!</c-lb.chat.bubble>
  </c-lb.chat>
</div>

With Avatars

Alice
Alice
How are you doing today?
Delivered
Bob
Bob
I'm doing great, thanks for asking!
Seen
Alice
Alice
That's wonderful to hear!
Delivered 
{% load static %}
<div class="space-y-2 w-full max-w-md">
  <c-lb.chat placement="start">
    <c-lb.chat.image src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Alice" />
    <c-lb.chat.header>Alice <time datetime="2024-01-01 10:00">10:00 AM</time></c-lb.chat.header>
    <c-lb.chat.bubble>How are you doing today?</c-lb.chat.bubble>
    <c-lb.chat.footer class="opacity-50">Delivered</c-lb.chat.footer>
  </c-lb.chat>

  <c-lb.chat placement="end">
    <c-lb.chat.image src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Bob" />
    <c-lb.chat.header>Bob <time datetime="2024-01-01 10:02">10:02 AM</time></c-lb.chat.header>
    <c-lb.chat.bubble>I'm doing great, thanks for asking!</c-lb.chat.bubble>
    <c-lb.chat.footer class="opacity-50">Seen</c-lb.chat.footer>
  </c-lb.chat>

  <c-lb.chat placement="start">
    <c-lb.chat.image src="{% static 'lbdocs/img/stock/avatar.png' %}" alt="Alice" />
    <c-lb.chat.header>Alice <time datetime="2024-01-01 10:05">10:05 AM</time></c-lb.chat.header>
    <c-lb.chat.bubble>That's wonderful to hear!</c-lb.chat.bubble>
    <c-lb.chat.footer class="opacity-50">Delivered</c-lb.chat.footer>
  </c-lb.chat>
</div>

Bubble Colors

Primary bubble
Secondary bubble
Accent bubble
Neutral bubble
Info bubble
Success bubble
Warning bubble
Error bubble 
<div class="space-y-2 w-full max-w-md">
  <c-lb.chat placement="start">
    <c-lb.chat.bubble variant="primary">Primary bubble</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="end">
    <c-lb.chat.bubble variant="secondary">Secondary bubble</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="start">
    <c-lb.chat.bubble variant="accent">Accent bubble</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="end">
    <c-lb.chat.bubble variant="neutral">Neutral bubble</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="start">
    <c-lb.chat.bubble variant="info">Info bubble</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="end">
    <c-lb.chat.bubble variant="success">Success bubble</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="start">
    <c-lb.chat.bubble variant="warning">Warning bubble</c-lb.chat.bubble>
  </c-lb.chat>

  <c-lb.chat placement="end">
    <c-lb.chat.bubble variant="error">Error bubble</c-lb.chat.bubble>
  </c-lb.chat>
</div>

API Reference

c-lb.chat

Property Type Default Required Description
class string - No Additional CSS classes to apply
placement
start end
start No Horizontal placement of the chat message
Slot Name Description
default Chat content using chat.image, chat.header, chat.bubble, and chat.footer components

c-lb.chat.bubble

Property Type Default Required Description
class string - No Additional CSS classes to apply
variant
primary secondary accent neutral info success warning error
- No Bubble color variant
Slot Name Description
default Message content displayed inside the bubble

c-lb.chat.image

Property Type Default Required Description
class string - No Additional CSS classes to apply
src string - No Image source URL for the avatar
alt string Avatar No Alt text for the avatar image
size
sm md lg
md No Avatar image size
Slot Name Description
default Custom avatar content (overrides automatic image rendering when src is not provided)

c-lb.chat.header

Property Type Default Required Description
class string - No Additional CSS classes to apply
Slot Name Description
default Header content such as sender name and timestamp

c-lb.chat.footer

Property Type Default Required Description
class string - No Additional CSS classes to apply
Slot Name Description
default Footer content such as delivery status or read receipts
Prev Carousel
Next Collapse