Chat

Chat Component

The Chat component provides a container for chat messages, stacking them vertically with spacing. It works together with the Chat.Message subcomponent to render sent and received messages with flexible layouts, avatars, tooltips, and footers.

---

Chat.Message Component

The Chat.Message component displays an individual chat message bubble. It supports two message types—sent (outgoing) and received (incoming)—each styled differently. Messages can include optional avatars, tooltips, titles, and footers.

Example Usage

<x-chat>
    <x-chat.message type="sent" footer="Seen 10:30 AM" tooltip="Delivered">
        <x-slot:avatar>
            <x-avatar size="sm" src="https://avatars.cyanfox.de" placeholderInitials="LP" status="success" />
        </x-slot:avatar>
        Hello, how are you?
    </x-chat.message>

    <x-chat.message type="received" title="Alice" footer="Read 10:31 AM" tooltip="Online">
        <x-slot:avatar>
            <x-avatar size="sm" src="https://avatars.cyanfox.de" placeholderInitials="AL" status="online" />
        </x-slot:avatar>
        I'm good, thanks!
    </x-chat.message>
</x-chat>

Props (Chat.Message)

• type (string, default: "sent")
  Defines the message alignment and styling. Accepts sent (right-aligned) or received (left-aligned).

• typing (bool, default: false)
  Indicates if the message is a typing indicator (not visibly used in this snippet but reserved for future use).

• footer (string|null)
  Optional text displayed below the message bubble, typically for timestamps or status.

• title (string|null)
  Optional title shown above the message content (only for received messages).

• avatar (string|null)
  Slot content for an avatar component or element displayed alongside the message bubble.

• tooltip (string|null)
  Tooltip text shown when hovering over the message bubble.

Props (Chat)

• No explicit props; it simply wraps the chat messages in a flex column with spacing.

Overview

The Chat component acts as a flexible container for messages, while the Chat.Message component styles individual chat bubbles for sent and received messages. It supports avatars, optional titles, footers, and tooltips for richer chat UI experiences. The layout and colors adapt for light and dark modes using Tailwind CSS.