---
status: beta
title: Chat
desc: Used to show conversation and all its data, including the author image, author name, time, etc.
ico: mdi:chat-processing
keywords:
  - ai
  - chat
  - bubble

props:
  - class: .prs-chat
    type: component
    desc: Container
  - class: .prs-chat-start
    type: modifier
    desc: Start aligned
  - class: .prs-chat-end
    type: modifier
    desc: End aligned
  - class: .prs-chat-bubble
    type: part
    desc: Message container
  - class: .prs-chat-image
    type: part
    desc: Optional image/avatar
  - class: .prs-chat-header
    type: part
    desc: Optional header
  - class: .prs-chat-footer
    type: part
    desc: Optional footer

alert:
  ico: mdi:wheelchair-accessibility
  body: |
    **For best accessibility:**  
    The maximum width of a chat bubble should be around **65ch**. This will ensure the best readability.

controls:
  - name: message
    type: text
    label: Message
    desc: Message text.
    default: You were the chosen one...

  - name: variant
    type: radio
    label: Variant
    desc: Color variants.
    default: default
    options:
      - default
      - primary
      - secondary
      - accent
      - info
      - success
      - warning
      - danger

  - name: position
    type: radio
    label: Position
    desc: Use "Start" for response or received messages. Use "End" for sent messages.
    default: start
    options:
      - start
      - end

  - name: avatar
    type: toggle
    label: Avatar
    desc: Optional avatar display.
    default: false

  - name: header
    type: toggle
    label: Header
    desc: Optional header display
    default: false

  - name: footer
    type: toggle
    label: Footer
    desc: Optional footer display.
    default: false

preview: |
  <div class="w-xl max-w-xs">
    <div
      class="prs-chat prs-chat-start"
      :class="{
        'prs-chat-start': position === 'start',
        'prs-chat-end': position === 'end',
      }"
    >
      <div x-show="avatar" x-transition class="prs-chat-image prs-avatar prs-avatar-md"><img src="https://placehold.net/4.png" alt="Chat bubble component" /></div>
      <div x-show="header" x-transition class="prs-chat-header">Ohbee One <time>12:34</time></div>
      <div
        class="prs-chat-bubble"
        :class="{
          'prs-chat-bubble-primary': variant === 'primary',
          'prs-chat-bubble-secondary': variant === 'secondary',
          'prs-chat-bubble-accent': variant === 'accent',
          'prs-chat-bubble-info': variant === 'info',
          'prs-chat-bubble-success': variant === 'success',
          'prs-chat-bubble-warning': variant === 'warning',
          'prs-chat-bubble-danger': variant === 'danger',
        }"
        x-text="message.length ? message : 'You were the chosen one...'"
      ></div>
      <div x-show="footer" x-transition class="prs-chat-footer">Delivered</div>
    </div>
  </div>

code:
  html: |
    <div class="prs-chat {position}">
      {avatar}{header}<div class="prs-chat-bubble{variant}">{message}</div>{footer}
    </div>
  logic:
    message: "this.message"
    variant: "this.variant !== 'default' ? ' prs-chat-bubble-'+ this.variant : ''"
    position: "'prs-chat-'+ this.position"
    avatar: "this.avatar ? '<div class=\"prs-chat-image prs-avatar prs-avatar-md\"><img /></div>\\n  ' : ''"
    header: "this.header ? '<div class=\"prs-chat-header\">Header text <time>HH:MM</time></div>\\n  ' : ''"
    footer: "this.footer ? '\\n  <div class=\"prs-chat-footer\">Footer text</div>' : ''"

---