fix: disply chats in sidebar, minor ui issues

app/Actions/SendMessageAction.php

@@ -15,13 +15,17 @@ public function __construct(private CreateOrGetInboxAction $inboxAction) {}
     public function execute(User $sender, User $recipient, array $data): void
     {
         // find the inbox between the two users
+        \DB::beginTransaction();
         $inbox = $this->inboxAction->execute($recipient, $sender);
+        $inbox->last_message = $data['message'];
+        $inbox->last_user_id = $sender->id;
+        $inbox->save();
         $message = $inbox->messages()->create([
             'message' => $data['message'],
             'user_id' => $sender->id,
         ]);
 
         broadcast(new MessageSent($message))->toOthers();
-
+        \DB::commit();
     }
 }

app/Http/Controllers/ChatController.php

@@ -13,7 +13,8 @@ class ChatController extends Controller
     //
     public function index(#[CurrentUser] User $user)
     {
-        return view('dashboards.user.chat');
+        return view('dashboards.user.chat')
+            ->with('inboxes', $user->inboxes);
     }
 
     public function show(#[CurrentUser] User $sender, User $recipient, CreateOrGetInboxAction $action)
@@ -27,7 +28,8 @@ public function show(#[CurrentUser] User $sender, User $recipient, CreateOrGetIn
 
         return view('dashboards.user.chat')
             ->with('recipient', $recipient)
-            ->with('chats', $inbox->messages()->latest()->get());
+            ->with('inboxes', $sender->inboxes)
+            ->with('messages', $inbox->messages()->latest()->get());
     }
 
     /**

app/Models/Inbox.php

@@ -3,9 +3,9 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
-use Illuminate\Database\Eloquent\Relations\HasOne;
 
 /**
  * @property int $id
@@ -37,13 +37,19 @@ public function users(): BelongsToMany
         return $this->belongsToMany(User::class);
     }
 
-    public function lastUser(): HasOne
+    public function lastUser(): BelongsTo
     {
-        return $this->hasOne(User::class, 'id', 'last_user_id');
+        return $this->belongsTo(User::class, 'id', 'last_user_id');
     }
 
     public function messages(): HasMany
     {
         return $this->hasMany(Message::class, 'inbox_id');
     }
+
+    public function getRecipientAttribute(): User
+    {
+        // first user in the relationship that is NOT the authenticated user
+        return $this->users->where('id', '!=', auth()->id())->first();
+    }
 }

resources/js/message.js

@@ -23,7 +23,7 @@ export const addMessageToChat = (message, right = false) => {
 
     const messagePlaceholder = `
         <div class="grid px-4 my-1 w-full ${right ? 'place-items-end' : 'place-items-start'}">
-            <div class="w-fit px-6 py-2 rounded-2xl  bg-gray-200">
+            <div class="max-w-[40vw] py-2 px-4 rounded-2xl  bg-gray-200">
                 ${message.message}
             </div>
         </div>`;

resources/views/components/chat/message-box.blade.php

@@ -1,11 +1,10 @@
-@props(['recipient', 'chats' => []])
+@props(['recipient', 'messages' => []])
-<x-dashboard.page-heading class="m-0 mb-0.5" :title="$recipient->name" description=""/>
+<x-dashboard.page-heading class="m-0 mb-0.5" :title="$recipient->name" description="offline"/>
-<div class="bg-gray-100 h-full overflow-hidden">
+<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($chats as $chat)
+        @forelse($messages as $message)
-            @ds($chat)
+            <x-chat.message :right="$message->user_id === auth()->user()->id">{{$message->message}}</x-chat.message>
-            <x-chat.message :right="$chat->user_id === auth()->user()->id">{{$chat->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>

resources/views/components/chat/message.blade.php

@@ -1,6 +1,7 @@
 @props(['right' => false])
 <div class="grid px-4 my-1 w-full @if($right) place-items-end @else place-items-start @endif">
-    <div class="w-fit px-6 py-2 rounded-full bg-gray-200">
+    <div class="max-w-[40vw] py-2 px-4 @if($right) rounded-l-xl rounded-br-xl @else rounded-r-xl rounded-bl-xl @endif bg-gray-200">
         {{ $slot }}
+
     </div>
 </div>

resources/views/components/chat/sidebar-item.blade.php

@@ -1,8 +1,8 @@
 @props(['avatar', 'name', 'status' => 'inactive', 'message' => '', 'link' => ''])
-<x-dashboard.broker.sidebar.item :link="$link" class="w-full">
+<x-dashboard.broker.sidebar.item :link="$link" class="">
     <x-ui.avatar class="w-12! h-12! text-xl!">{{$avatar}}</x-ui.avatar>
-    <div class="flex flex-col text-left">
+    <div class="flex flex-col text-left max-w-24">
-        <p class="sidebar-text text-sm font-bold">{{$name}}</p>
+        <p class="sidebar-text text-sm  transition-opacity duration-300 ease-in-out font-bold">{{$name}}</p>
-        <p class="sidebar-text text-sm text-accent-600">{{$message}}</p>
+        <p class="sidebar-text text-sm text-accent-600  transition-opacity duration-300 ease-in-out truncate">{{$message}}</p>
     </div>
 </x-dashboard.broker.sidebar.item>

resources/views/components/explore/profile-menu.blade.php

@@ -22,6 +22,14 @@
                         <p>Control Panel</p>
                     </a>
                 </li>
+                <li class="py-2 px-4 hover:bg-gray-100 hover:text-gray-900 hover:cursor-pointer hover:font-bold">
+                    <a href="{{route('chat')}}" class="flex space-x-4">
+                        <div class="p-1 bg-gray-200 rounded-xl text-gray-900">
+                            <x-heroicon-o-chat-bubble-left-right class="w-4"/>
+                        </div>
+                        <p>Chat</p>
+                    </a>
+                </li>
             @endif
 
         </ul>

resources/views/dashboards/user/chat.blade.php

@@ -1,16 +1,23 @@
 <x-chat.layout>
     <x-slot:sidebarItems>
-        <x-chat.sidebar-item :link="route('chat.show', 8)" name="Kushal Saha" avatar="Ku" message="Hi, how do i do that ?"/>
+        @forelse($inboxes as $inbox)
-        <x-chat.sidebar-item name="Jhon Doe" avatar="JD" message="How much for thr tv ?"/>
+            <x-chat.sidebar-item
-        <x-chat.sidebar-item name="Jane Marry" avatar="JM" message="I will let you know"/>
+                :name="$inbox->recipient->name"
+                :link="route('chat.show', $inbox->recipient->id)"
+                :avatar="(new \App\Services\ProfileInitialsService)->create($inbox->recipient->name)"
+                :message="$inbox->last_message"/>
+        @empty
+            No chats found !
+        @endforelse
     </x-slot:sidebarItems>
+    <div class="overflow-y-hidden">
 
         @if(isset($recipient))
-        <x-chat.message-box :recipient="$recipient" :chats="$chats" />
+            <x-chat.message-box :recipient="$recipient" :messages="$messages"/>
         @else
             <div class="w-full h-full flex items-center justify-center">
                 <p class="font-bold text-5xl text-gray-400">Start a chat ! </p>
             </div>
         @endif
-
+    </div>
 </x-chat.layout>