Smooth scrolling for messages

Raccoon254 · May 19, 2024 · ce657ed · ce657ed
1 parent 6bcc353
commit ce657ed
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 8 deletions.
diff --git a/app/Livewire/Messages.php b/app/Livewire/Messages.php
@@ -33,6 +33,8 @@ public function openChat($id): void
     {
         $this->selectedUser = User::find($id);
         $this->messages = $this->loggedInUser->messages()->where('receiver_id', $id)->orWhere('sender_id', $id)->orderBy('created_at', 'asc')->get();
+
+        $this->dispatch('chatOpened');
     }
 
     //sendMessage

diff --git a/app/Models/User.php b/app/Models/User.php
@@ -34,9 +34,9 @@ public function messages(): HasMany
         return $this->hasMany(Message::class, 'sender_id');
     }
 
-    public function getLastMessageAttribute(): string
+    public function getLastMessageAttribute(): ?Message
     {
-        return $this->messages()->latest()->first()->message ?? '';
+        return $this->messages()->orderBy('created_at', 'desc')->first();
     }
 
     public function referrals(): HasMany

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -45,11 +45,11 @@ input:-webkit-autofill {
 }
 
 .received-message{
-    @apply rounded-t-2xl rounded-br-2xl bg-gray-200 text-gray-700 p-1 px-4;
+    @apply rounded-t-2xl rounded-br-2xl bg-green-400 overflow-hidden text-gray-700 p-1 px-4;
 }
 
 .received-message-attachment{
-    @apply rounded-b-2xl overflow-clip rounded-tr-2xl bg-gray-200 text-gray-700 p-1 mt-1;
+    @apply rounded-b-2xl overflow-clip rounded-tr-2xl bg-green-400 text-gray-700 p-1;
 }
 
 .sent-message-attachment{

diff --git a/resources/views/livewire/display-chat-message.blade.php b/resources/views/livewire/display-chat-message.blade.php
@@ -17,7 +17,7 @@ class="inline-block {{ $message->sender_id == Auth::id() ? 'bg-blue-500 text-whi
                     <div class="min-w-[128px]">
                         <div
                             onclick="viewAttachment('{{ $attachment->type }}', '{{ Storage::url($attachment->path) }}')"
-                            class="bg-gray-200 rounded-xl ring-1 ring-white overflow-hidden relative">
+                            class="bg-gray-200 rounded-xl ring-1 ring-gray-100 overflow-hidden relative">
                             @if (in_array($attachment->type, ['image/jpeg', 'image/png', 'image/gif']))
                                 <img
                                     src="{{ Storage::url($attachment->path) }}"

diff --git a/resources/views/messages.blade.php b/resources/views/messages.blade.php
@@ -41,9 +41,9 @@ class="w-10 h-10 bg-white rounded-full">
                                         <p class="text-gray-500">No messages yet.</p>
                                     </div>
                                 @else
-                                    <div class="space-y-4">
+                                    <div id="messageContainer" class="space-y-4 overflow-y-auto">
                                         @foreach($messages as $message)
-                                            <livewire:DisplayChatMessage :message="$message" :key="$message->id"/>
+                                            <livewire:DisplayChatMessage :message="$message" :key="$message->id.$message->updated_at"/>
                                         @endforeach
                                     </div>
                                 @endif
@@ -86,7 +86,7 @@ class="w-12 h-12 bg-white rounded-full">
 
                                         <!-- Last message from user -->
                                         <p class="text-gray-500 text-xs">
-                                            {{ $user->lastMessage ? $user->lastMessage->message : 'No message yet' }}
+                                            {{ $user->lastMessage ? $user->lastMessage->content : 'No message yet' }}
                                         </p>
                                     </div>
                                 </div>
@@ -99,3 +99,16 @@ class="w-12 h-12 bg-white rounded-full">
         </div>
     </div>
 </div>
+@script
+<script>
+    Livewire.on('chatOpened', (event) => {
+        setTimeout(() => {
+            const messageContainer = document.getElementById('messageContainer');
+            messageContainer.scrollTo({
+                top: messageContainer.scrollHeight,
+                behavior: 'smooth',
+            });
+        }, 10);
+    });
+</script>
+@endscript