blatui

Components

Chat

A composable chat transcript — role-aware message bubbles with avatars, names, timestamps and a typing indicator.

php artisan blatui:add chat
AS
Assistant 09:41
Hi! How can I help you today?
YO
You 09:41
I'm trying to center a div and it won't behave.
AS
Assistant 09:42
Classic. Try a flex parent with items-center and justify-center — that handles both axes at once.
YO
You 09:42
That did it. Thank you! 
<x-ui.chat class="h-80 w-full max-w-md rounded-lg border bg-background">
    <x-ui.chat-message role="assistant" name="Assistant" time="09:41">
        Hi! How can I help you today?
    </x-ui.chat-message>

    <x-ui.chat-message role="user" name="You" time="09:41">
        I'm trying to center a div and it won't behave.
    </x-ui.chat-message>

    <x-ui.chat-message role="assistant" name="Assistant" time="09:42">
        Classic. Try a flex parent with items-center and justify-center — that handles both axes at once.
    </x-ui.chat-message>

    <x-ui.chat-message role="user" name="You" time="09:42">
        That did it. Thank you!
    </x-ui.chat-message>
</x-ui.chat>

Typing

YO
You 11:20
Can you summarize the meeting notes?
AS
Assistant 
<x-ui.chat class="h-80 w-full max-w-md rounded-lg border bg-background">
    <x-ui.chat-message role="user" name="You" time="11:20">
        Can you summarize the meeting notes?
    </x-ui.chat-message>

    <x-ui.chat-message role="assistant" name="Assistant" :typing="true" />
</x-ui.chat>

With Avatars

Ada AD
Ada 14:02
Morning! Did the deploy finish overnight?
Sam SA
Sam 14:03
Yep, green across the board. No rollbacks.
Ada AD
Ada 14:03
Perfect. I'll close the change ticket then. 
<x-ui.chat class="h-80 w-full max-w-md rounded-lg border bg-background">
    <x-ui.chat-message
        role="assistant"
        name="Ada"
        time="14:02"
        avatar="https://picsum.photos/seed/ada/64/64"
    >
        Morning! Did the deploy finish overnight?
    </x-ui.chat-message>

    <x-ui.chat-message
        role="user"
        name="Sam"
        time="14:03"
        avatar="https://picsum.photos/seed/sam/64/64"
    >
        Yep, green across the board. No rollbacks.
    </x-ui.chat-message>

    <x-ui.chat-message
        role="assistant"
        name="Ada"
        time="14:03"
        avatar="https://picsum.photos/seed/ada/64/64"
    >
        Perfect. I'll close the change ticket then.
    </x-ui.chat-message>
</x-ui.chat>