41 lines
1.8 KiB
PHP
41 lines
1.8 KiB
PHP
@props(['recipient', 'messages' => []])
|
|
<x-dashboard.page-heading class="m-0 mb-0.5" :title="$recipient->name" description="offline"/>
|
|
<div class="bg-gray-50 h-full overflow-hidden flex-shrink-0">
|
|
<div id="chat-container" data-auth-id="{{ auth()->id() }}" data-partner-id="{{ $recipient->id }}"
|
|
class="text-sm flex flex-col-reverse overflow-y-scroll h-full max-h-screen pb-50 scroll-snap-y-container">
|
|
@forelse($messages as $message)
|
|
<x-chat.message :right="$message->user_id === auth()->user()->id">{{$message->message}}</x-chat.message>
|
|
@empty
|
|
<div id="no-messages-placeholder" 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 :recipient_id="$recipient->id"/>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const container = document.getElementById('chat-container');
|
|
|
|
if (container) {
|
|
const authId = parseInt(container.dataset.authId);
|
|
const partnerId = parseInt(container.dataset.partnerId);
|
|
|
|
// Sort IDs for consistent channel naming
|
|
const user1 = Math.min(authId, partnerId);
|
|
const user2 = Math.max(authId, partnerId);
|
|
|
|
window.Echo.private(`chat.${user1}.${user2}`)
|
|
.listen('MessageSent', (e) => {
|
|
const message = e.message;
|
|
if (!message) return;
|
|
// Check if user is the recipient of the message
|
|
if (message.user_id === partnerId) {
|
|
addMessageToChat({message: e.message.message}, false);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|