edge-components

Chat: Color 

<div>
    <div class="chat chat-start">
        <div class="chat-bubble chat-bubble-primary">
            Color primary
        </div>
    </div>

    <div class="chat chat-start">
        <div class="chat-bubble chat-bubble-secondary">
            Color secondary
        </div>
    </div>

    <div class="chat chat-start">
        <div class="chat-bubble chat-bubble-accent">
            Color accent
        </div>
    </div>

    <div class="chat chat-start">
        <div class="chat-bubble chat-bubble-info">
            Color info
        </div>
    </div>

    <div class="chat chat-start">
        <div class="chat-bubble chat-bubble-success">
            Color success
        </div>
    </div>

    <div class="chat chat-start">
        <div class="chat-bubble chat-bubble-warning">
            Color warning
        </div>
    </div>

    <div class="chat chat-start">
        <div class="chat-bubble chat-bubble-error">
            Color error
        </div>
    </div>

</div>
 
<div>
  @!jrmc.chat({ message: 'Color primary', class: 'chat-bubble-primary' })
  @!jrmc.chat({ message: 'Color secondary', class: 'chat-bubble-secondary' })
  @!jrmc.chat({ message: 'Color accent', class: 'chat-bubble-accent' })
  @!jrmc.chat({ message: 'Color info', class: 'chat-bubble-info' })
  @!jrmc.chat({ message: 'Color success', class: 'chat-bubble-success' })
  @!jrmc.chat({ message: 'Color warning', class: 'chat-bubble-warning' })
  @!jrmc.chat({ message: 'Color error', class: 'chat-bubble-error' })
</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