@props(['recipient_id'])
<div class="absolute bottom-5 w-8/12 rounded-xl left-50 p-2 bg-white border border-gray-300 shadow-xl">
    <form id="messageBox" data-recipient-id="{{$recipient_id}}" onsubmit="sendMessage(this, event)" action=""
          class="flex space-x-4 items-center">
        <x-ui.textarea class="flex-1" rows="1" name="message" placeholder="Enter your message..."></x-ui.textarea>
        <x-ui.button variant="neutral" icon="">
            <x-heroicon-o-paper-airplane class="w-5 h-5"/>
        </x-ui.button>
    </form>
</div>