Created send message input --Livewire component

app/Livewire/Messages.php

@@ -5,15 +5,19 @@
 use App\Models\User;
 use Illuminate\View\View;
 use Livewire\Component;
+use Livewire\WithFileUploads;
 
 class Messages extends Component
 {
+    use WithFileUploads;
+
     public $loggedInUser;
     public $currentUserRole;
     public $search = '';
     public $selectedUser;
     public $message;
     public $messages;
+    public array $attachments = [];
 
     public function mount(): void
     {

app/Livewire/SendMessageInput.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Livewire;
+
+use Livewire\Component;
+
+class SendMessageInput extends Component
+{
+    public function render()
+    {
+        return view('livewire.send-message-input');
+    }
+}

resources/css/app.css

@@ -56,3 +56,6 @@ input:-webkit-autofill {
     @apply rounded-b-2xl rounded-tl-2xl bg-blue-500 text-white p-1 mt-1 px-4;
 }
 
+.message-input{
+    @apply w-full rounded-md px-12 border-2 border-gray-300 p-3 ring-1 ring-gray-300 ring-offset-1 transition-all duration-300 ease-in-out focus:border-blue-300 focus:outline-none bg-gray-200 text-gray-800;
+}

resources/views/livewire/send-message-input.blade.php

@@ -0,0 +1,58 @@
+<div class="flex flex-col">
+    @if (count($attachments) > 0)
+        <div class="flex w-full p-2 pt-3">
+            @foreach($attachments as $attachment)
+                <div
+                    class="flex relative flex-col items-center justify-center w-16 h-16 bg-blue-200 rounded-md mr-2">
+                    @if (in_array($attachment->getMimeType(), ['image/jpeg', 'image/png']))
+                        <img src="{{ $attachment->temporaryUrl() }}" alt="Attachment"
+                             class="w-16 h-16 object-cover rounded-md">
+                    @elseif ($attachment->getMimeType() == 'image/svg+xml')
+                        <i class="fas fa-file-image text-4xl text-gray-500"></i>
+                    @elseif ($attachment->getMimeType() == 'application/zip')
+                        <i class="fas fa-file-archive text-4xl text-gray-500"></i>
+                    @else
+                        <i class="fas fa-file text-4xl text-gray-500"></i>
+                    @endif
+                    <!-- Displaying the first five characters of the file name -->
+                    <span class="text-xs mt-1">
+                                    {{ substr($attachment->getClientOriginalName(), 0, 5) }}{{ strlen($attachment->getClientOriginalName()) > 5 ? '...' : '' }}
+                                </span>
+                    <button wire:click="removeAttachment('{{ $attachment->getClientOriginalName() }}')"
+                            class="absolute btn-warning btn btn-xs btn-circle top-0 right-1 text-red-500 hover:text-red-700 -mt-2 -mr-3">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+            @endforeach
+
+        </div>
+    @endif
+    <div class="text-red-500 bg-gray-100 text-xs px-4">
+        @error('attachments.*') <span class="error m-1">{{ $message }}</span> @enderror
+        @error('newMessage') <span class="error m-1">{{ $message }}</span> @enderror
+    </div>
+    <div class="px-2 relative flex items-center">
+        <label class="w-full">
+            <input id="messageInput" wire:model="newMessage" wire:keydown.enter="sendMessage"
+                   class="message-input"
+                   type="text" placeholder="Type your message...">
+        </label>
+        <!-- Hidden file input -->
+        <input wire:model.live="attachments" type="file" id="fileInput" multiple style="display: none;">
+        <!-- Clip icon for opening file dialog -->
+        <button
+            class="btn absolute left-3 btn-ghost ring-1 ring-primary text-primary top[50%] transform[-50%] btn-sm btn-circle ml-2"
+            onclick="document.getElementById('fileInput').click();">
+            <i class="fas fa-paperclip"></i>
+        </button>
+        <!-- Send message button -->
+        <button wire:click="sendMessage"
+                wire:loading.class.remove="btn-primary"
+                wire:loading.class="btn-ghost"
+                class="btn absolute right-3 btn-primary top[50%] transform[-50%] btn-sm btn-circle mr-2">
+            <i wire:target="sendMessage" wire:loading.class="hidden" class="fas fa-paper-plane"></i>
+            <span wire:loading wire:target="sendMessage"
+                  class="loading loading-spinner text-primary loading-sm"></span>
+        </button>
+    </div>
+</div>

resources/views/messages.blade.php

@@ -35,21 +35,17 @@ class="w-12 h-12 rounded-full">
                                     </div>
                                 @endif
                             </div>
-                            <div class="flex gap-3">
-                                <input type="text" wire:model="message" placeholder="Type a message ..."
-                                       class="w-full p-2 rounded-lg border border-gray-200 focus:outline-none">
-                                <button wire:click="sendMessage"
-                                        class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md">
-                                    Send
-                                </button>
-                            </div>
+
+                            <!-- Send message input -->
+                            <livewire:SendMessageInput :selectedUser="$selectedUser" :key="$selectedUser->id"/>
                         </div>
                     @else
                         <div class="flex items-center justify-center h-full">
                             <h1 class="text-gray-800 font-semibold">Select a user to chat with</h1>
                         </div>
                     @endif
                 </div>
+
                 @if($currentUserRole == 'writer')
                     <div class="w-1/3 p-3 flex overflow-y-auto flex-col gap-3 rounded-lg">
                         <!-- Search -->