{
updateScrollPosition();
});
"
@scroll-bottom.window="
requestAnimationFrame(() => {
{{-- overflow-y: hidden; is used to hide the vertical scrollbar initially. --}}
$el.style.overflowY='hidden';
{{-- scroll the element down --}}
$el.scrollTop = $el.scrollHeight;
{{-- After updating the chat height, overflowY is set back to 'auto',
which allows the browser to determine whether to display the scrollbar
based on the content height. --}}
$el.style.overflowY='auto';
});
"
x-cloak
class='flex flex-col h-full relative gap-2 gap-y-4 p-4 md:p-5 lg:p-8 grow overscroll-contain overflow-x-hidden w-full my-auto'
style="contain: content" >
{{-- Define previous message outside the loop --}}
@php
$previousMessage = null;
@endphp
@if ($loadedMessages)
{{-- @dd($loadedMessages) --}}
@foreach ($loadedMessages as $date => $messageGroup)
{{-- Date --}}
{{ $date }}
@foreach ($messageGroup as $key => $message)
{{-- @dd($message) --}}
@php
$belongsToAuth = $message->belongsToAuth();
$parent = $message->parent ?? null;
$attachment = $message->attachment ?? null;
$isEmoji = $message->isEmoji();
// keep track of previous message
// The ($key -1 ) will get the previous message from loaded
// messages since $key is directly linked to $message
if ($key > 0) {
$previousMessage = $messageGroup->get($key - 1);
}
// Get the next message
$nextMessage = $key < $messageGroup->count() - 1 ? $messageGroup->get($key + 1) : null;
@endphp
{{-- Message user Avatar --}}
{{-- Hide avatar if message belongs to auth --}}
@if (!$belongsToAuth && !$isPrivate)
$belongsToAuth,
'order-1' => !$belongsToAuth,
])>
{{-- Show sender name is message does not belong to auth and conversation is group --}}
{{-- -------------------- --}}
{{-- Attachment section --}}
{{-- -------------------- --}}
@if ($attachment)
@if (!$belongsToAuth && $isGroup)