@props(['recipient', 'chats' => []])
<x-dashboard.page-heading class="m-0 mb-0.5" :title="$recipient->name" description=""/>
<div class="bg-gray-100 h-full overflow-hidden">
    <div class="text-sm flex flex-col-reverse overflow-y-scroll h-full max-h-screen pb-50 scroll-snap-y-container">
        @forelse($chats as $chat)
            <x-chat.message :right="$chat->user_id === auth()->user()->id">{{$chat->text}}</x-chat.message>
        @empty
            <div class="grid px-4 my-1 w-full h-full place-items-center ">
                <p class="text-gray-600">No Messages Found!</p>
            </div>
        @endforelse
    </div>
    <x-chat.message-input/>
</div>