LocoMotion

Advanced Chat

Chat bubbles are used to display messages in a structured way. They can contain text, user images, a header, and a footer.

Preview

Hey Marcia! How are you doing?

I'm doing great! How about you?

I'm doing great too! Thanks for asking.

That's great to hear!

Read 10:45 AM

Unknown Number (555) 883-1234

Who dis? Why am I in this group chat?!

Failed to send

Code

.w-full
  = daisy_chat do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))
    - chat.with_bubble do
      Hey Marcia! How are you doing?

  = daisy_chat do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-3.jpg"))
    - chat.with_bubble do
      I'm doing great! How about you?

  = daisy_chat do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))
    - chat.with_bubble do
      I'm doing great too! Thanks for asking.

  = daisy_chat do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-3.jpg"))
    - chat.with_bubble do
      That's great to hear!
    - chat.with_footer do
      Read 10:45 AM

  = # Custom content messages
  = daisy_chat(css: "chat-end") do |chat|
    - chat.with_avatar(icon: "user", icon_css: "text-yellow-400")
    - chat.with_header do
      Unknown Number (555) 883-1234
    - chat.with_footer(css: "text-red-600 mt-1 flex items-center gap-x-2") do
      = heroicon_tag("exclamation-triangle", variant: :outline, class: "h-4 w-4")
      %span
        Failed to send

    .chat-bubble
      Who dis? Why am I in this group chat?!

Colored Chat

Chat bubbles can be colored to differentiate between different users or types of messages.

Preview

Jill Started sharing her location.

Hey Marcia! How are you doing?

I'm blue da ba dee da ba daa

Maybe this will help!

Jill sent you $50.

Wow, thanks! ❤️

Code

.w-full
  = daisy_chat do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))
    - chat.with_bubble(css: "chat-bubble-accent flex items-center gap-x-1") do
      = heroicon_tag "map-pin", class: "w-5 h-5"
      %strong
        Jill
      %span
        Started sharing her location.

  = daisy_chat do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))
    - chat.with_bubble(css: "bg-base-300 text-base-content") do
      Hey Marcia! How are you doing?

  = daisy_chat(css: "chat-end") do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-4.jpg"))
    - chat.with_bubble(css: "chat-bubble-primary") do
      I'm blue da ba dee da ba daa

  = daisy_chat do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))
    - chat.with_bubble(css: "bg-base-300 text-base-content") do
      Maybe this will help!

  = daisy_chat do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-2.jpg"))
    - chat.with_bubble(css: "chat-bubble-success text-base-200") do
      .flex.justify-center
        = heroicon_tag "currency-dollar", class: "w-12 h-12"
      Jill sent you <strong>$50</strong>.

  = daisy_chat(css: "chat-end") do |chat|
    - chat.with_avatar(src: image_path("avatars/lady-smiling-4.jpg"))
    - chat.with_bubble(css: "chat-bubble-primary") do
      Wow, thanks! ❤️

Chat Bubbles

Advanced Chat

Colored Chat