edge-components

Chat: Sample 

<div>
    <div class="chat chat-start">
        <div class="chat-image avatar">
            <div class="w-10 rounded-full">
                <img src="https://picsum.photos/192/192" />
            </div>
        </div>
        <div class="chat-header">
            Obi-Wan Kenobi
            <time class="text-xs opacity-50">2 hours ago</time>
        </div>
        <div class="chat-bubble ">
            It was said that you would, destroy the Sith, not join them.
        </div>
        <div class="chat-footer opacity-50">
            Delivered
        </div>
    </div>

    <div class="chat chat-end" position="end">
        <div class="chat-image avatar">
            <div class="w-10 rounded-full">
                <img src="https://picsum.photos/192/192" />
            </div>
        </div>
        <div class="chat-header">
            Anakin
            <time class="text-xs opacity-50">12:46</time>
        </div>
        <div class="chat-bubble chat-bubble-accent">
            It was said that you would, destroy the Sith, not join them.
        </div>
        <div class="chat-footer opacity-50">
            Seen at 12:46
        </div>
    </div>

</div>
 
<div>
  @jrmc.chat()
    @slot('avatar')
      <img src="https://picsum.photos/192/192" />
    @end
    @slot('header')
      Obi-Wan Kenobi
      <time class="text-xs opacity-50">2 hours ago</time>
    @end
    @slot('footer')
      Delivered
    @end
    It was said that you would, destroy the Sith, not join them.
  @end

  @jrmc.chat({ position: 'end', class: 'chat-bubble-accent' })
    @slot('avatar')
      <img src="https://picsum.photos/192/192" />
    @end
    @slot('header')
      Anakin
      <time class="text-xs opacity-50">12:46</time>
    @end
    @slot('footer')
      Seen at 12:46
    @end
    It was said that you would, destroy the Sith, not join them.
  @end
</div>

Chat bubble

Doc : daisyui chat

Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.

Class name Type
chat Component Container for one line of conversation and all its data
chat-start Modifier Aligns chat to left (required)
chat-end Modifier Aligns chat to end (required)
chat-image Component For the author image
chat-header Component For the line above the chat bubble
chat-footer Component For the line below the chat bubble
chat-bubble Component For the content of chat
chat-bubble-primary Modifier sets primary color for the chat-bubble
chat-bubble-secondary Modifier sets secondary color for the chat-bubble
chat-bubble-accent Modifier sets accent color for the chat-bubble
chat-bubble-info Modifier sets info color for the chat-bubble
chat-bubble-success Modifier sets success color for the chat-bubble
chat-bubble-warning Modifier sets warning color for the chat-bubble
chat-bubble-error Modifier sets error color for the chat-bubble