From b6c7e8673b66c1cc3ee4f92682a13df48d6ca4a4 Mon Sep 17 00:00:00 2001
From: 199ocero <199ocero@gmail.com>
Date: Sun, 21 Jul 2024 09:32:32 +0800
Subject: [PATCH] feat:added file upload and minor improvements

---
 README.md                                     |  27 +++
 config/filachat.php                           |  62 +++++++
 resources/css/filachat.css                    |   3 +
 resources/css/index.css                       |   1 -
 .../filachat/components/chat-box.blade.php    | 152 +++++++++++++---
 .../filachat/components/chat-list.blade.php   |   6 +-
 .../FilaChatMessageReceiverIsAwayEvent.php    |  37 ++++
 src/FilaChatServiceProvider.php               |   2 +-
 src/Livewire/ChatBox.php                      | 164 +++++++++++++-----
 src/Models/FilaChatConversation.php           |  20 ++-
 src/Traits/CanGetOriginalFileName.php         |  11 ++
 src/Traits/CanValidateAudio.php               |  27 +++
 src/Traits/CanValidateDocument.php            |  29 ++++
 src/Traits/CanValidateImage.php               |  24 +++
 src/Traits/CanValidateVideo.php               |  28 +++
 15 files changed, 521 insertions(+), 72 deletions(-)
 create mode 100644 resources/css/filachat.css
 delete mode 100644 resources/css/index.css
 create mode 100644 src/Events/FilaChatMessageReceiverIsAwayEvent.php
 create mode 100644 src/Traits/CanGetOriginalFileName.php
 create mode 100644 src/Traits/CanValidateAudio.php
 create mode 100644 src/Traits/CanValidateDocument.php
 create mode 100644 src/Traits/CanValidateImage.php
 create mode 100644 src/Traits/CanValidateVideo.php

diff --git a/README.md b/README.md
index 0668c7b..eca50a1 100644
--- a/README.md
+++ b/README.md
@@ -36,6 +36,12 @@ php artisan filachat:install
 
 You can view the full content of the config file here: [config/filachat.php](https://github.com/199ocero/filachat/blob/main/config/filachat.php)
 
+Next, execute the following command to generate assets in your public folder.
+
+```bash
+php artisan filament:assets
+```
+
 > [!NOTE]  
 > This step is optional if you want to enable role restrictions. You only need to create an agent if you want to set up role-based chat support.
 
@@ -112,6 +118,27 @@ Then everytime you start your application in your local environment, you will ne
 php artisan reverb:start
 ```
 
+When using file uploads, Livewire has a default file size limit of 12 MB. To change this limit, you need to publish the Livewire configuration file using the command `php artisan livewire:publish --config` and then adjust the `rule`.
+
+```php
+<?php
+
+return [
+    //...
+    'temporary_file_upload' => [
+        'rules' => 'max:20000',       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
+    ],
+    //...
+];
+```
+
+You also need to adjust the `post_max_size` and `upload_max_filesize` settings in your `php.ini` file.
+
+```ini
+post_max_size = 20MB
+upload_max_filesize = 20MB
+```
+
 ## Testing
 
 ```bash
diff --git a/config/filachat.php b/config/filachat.php
index c906f12..e5cd326 100644
--- a/config/filachat.php
+++ b/config/filachat.php
@@ -110,6 +110,68 @@
     */
     'receiver_name_column' => 'name',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Upload Files
+    |--------------------------------------------------------------------------
+    |
+    | This option specifies the mime types and the type of disk to be used.
+    |
+    */
+    'disk' => 'public',
+    // this configuration is only use if the disk is S3
+    's3' => [
+        'directory' => 'attachments',
+        'visibility' => 'public',
+    ],
+    // these are the mime types that are allowed and you can remove if you want
+    'mime_types' => [
+        // audio
+        'audio/m4a',
+        'audio/wav',
+        'audio/mpeg',
+        'audio/ogg',
+        'audio/aac',
+        'audio/flac',
+        'audio/midi',
+
+        // images
+        'image/png',
+        'image/jpeg',
+        'image/jpg',
+        'image/gif',
+
+        // videos
+        'video/mp4',
+        'video/avi',
+        'video/quicktime',
+        'video/webm',
+        'video/x-matroska',
+        'video/x-flv',
+        'video/mpeg',
+
+        // documents
+        'application/pdf',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'text/csv',
+        'text/plain',
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'application/vnd.ms-powerpoint',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    ],
+    /*
+    | If you want to change the maximum file size above 12mb you need to publish
+    | livewire config file and change the value for rules. Example below is from livewire config file.
+    | 'rules' => null, // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
+    */
+    'max_file_size' => 12288, // default livewire 12MB converted to kilobytes
+    'min_file_size' => 1,
+    // this option here is for number of files to be uploaded
+    'max_files' => 10,
+    'min_files' => 0,
+
     /*
     |--------------------------------------------------------------------------
     | Route Slug
diff --git a/resources/css/filachat.css b/resources/css/filachat.css
new file mode 100644
index 0000000..c9043c7
--- /dev/null
+++ b/resources/css/filachat.css
@@ -0,0 +1,3 @@
+.filachat-filepond .filepond--root {
+    max-height: 20rem;
+}
\ No newline at end of file
diff --git a/resources/css/index.css b/resources/css/index.css
deleted file mode 100644
index b3949d5..0000000
--- a/resources/css/index.css
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../vendor/filament/filament/resources/css/theme.css';
diff --git a/resources/views/filachat/components/chat-box.blade.php b/resources/views/filachat/components/chat-box.blade.php
index 9263a57..2f85290 100644
--- a/resources/views/filachat/components/chat-box.blade.php
+++ b/resources/views/filachat/components/chat-box.blade.php
@@ -1,6 +1,8 @@
 @props(['selectedConversation'])
 <!-- Right Section (Chat Conversation) -->
-<div class="flex flex-col w-full md:w-2/3 overflow-hidden">
+<div
+x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref('filachat-styles', package: 'jaocero/filachat'))]"
+class="flex flex-col w-full md:w-2/3 overflow-hidden">
     @if ($selectedConversation)
         <!-- Chat Header -->
         <div class="flex items-center h-20 gap-2 p-5 border-b dark:border-gray-800/60 border-gray-200/90">
@@ -27,18 +29,27 @@
         </div>
 
         <!-- Chat Messages -->
-        <div x-data="{ markAsRead: false }" x-init="Echo.channel('filachat')
-            .listen('.JaOcero\\FilaChat\\Events\\FilaChatMessageReadEvent', e => {
-                if (e.conversationId == @js($selectedConversation->id)) {
-                    markAsRead = true;
-                }
-            });" id="chatContainer"
+        <div x-data="{ markAsRead: false }" x-init="
+
+            Echo.channel('filachat')
+                .listen('.JaOcero\\FilaChat\\Events\\FilaChatMessageReadEvent', e => {
+                    if (e.conversationId == @js($selectedConversation->id)) {
+                        markAsRead = true;
+                    }
+                })
+                .listen('.JaOcero\\FilaChat\\Events\\FilaChatMessageReceiverIsAwayEvent', e => {
+                    if (e.conversationId == @js($selectedConversation->id)) {
+                        markAsRead = false;
+                    }
+                });
+
+            " id="chatContainer"
             class="flex flex-col-reverse flex-1 p-5 overflow-y-auto">
             <!-- Message Item -->
-            @foreach ($messages as $index => $message)
+            @foreach ($conversationMessages as $index => $message)
                 <div wire:key="{{ $message->id }}">
                   @php
-                        $nextMessage = $messages[$index + 1] ?? null;
+                        $nextMessage = $conversationMessages[$index + 1] ?? null;
                         $nextMessageDate = $nextMessage ? \Carbon\Carbon::parse($nextMessage->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'))->format('Y-m-d') : null;
                         $currentMessageDate = \Carbon\Carbon::parse($message->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'))->format('Y-m-d');
 
@@ -47,7 +58,7 @@ class="flex flex-col-reverse flex-1 p-5 overflow-y-auto">
                     @endphp
 
                     @if ($showDateBadge)
-                        <div class="flex justify-center">
+                        <div class="flex justify-center my-4">
                             <x-filament::badge>
                                 {{ \Carbon\Carbon::parse($message->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'))->format('F j, Y') }}
                             </x-filament::badge>
@@ -55,11 +66,11 @@ class="flex flex-col-reverse flex-1 p-5 overflow-y-auto">
                     @endif
                     @if ($message->senderable_id !== auth()->user()->id)
                         @php
-                            $previousMessageDate = isset($messages[$index - 1]) ? \Carbon\Carbon::parse($messages[$index - 1]->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'))->format('Y-m-d') : null;
+                            $previousMessageDate = isset($conversationMessages[$index - 1]) ? \Carbon\Carbon::parse($conversationMessages[$index - 1]->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'))->format('Y-m-d') : null;
 
                             $currentMessageDate = \Carbon\Carbon::parse($message->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'))->format('Y-m-d');
 
-                            $previousSenderId = $messages[$index - 1]->senderable_id ?? null;
+                            $previousSenderId = $conversationMessages[$index - 1]->senderable_id ?? null;
 
                             // Show avatar if the current message is the first in a consecutive sequence or a new day
                             $showAvatar = $message->senderable_id !== auth()->user()->id && ($message->senderable_id !== $previousSenderId || $currentMessageDate !== $previousMessageDate);
@@ -73,20 +84,112 @@ class="flex flex-col-reverse flex-1 p-5 overflow-y-auto">
                             @else
                                 <div class="w-6 h-6"></div> <!-- Placeholder to align the messages properly -->
                             @endif
-                            <div class="max-w-md p-2 bg-gray-200 rounded-lg dark:bg-gray-800">
-                                <p class="text-sm">{{ $message->message }}</p>
+                            <div class="max-w-md p-2 bg-gray-200 rounded-t-xl rounded-br-xl dark:bg-gray-800">
+                                @if ($message->message)
+                                    <p class="text-sm">{{ $message->message }}</p>
+                                @endif
+                                @if ($message->attachments && count($message->attachments) > 0)
+                                    @foreach ($message->attachments as $attachment)
+                                        @php
+                                            $originalFileName = $this->getOriginalFileName($attachment, $message->original_attachment_file_names);
+                                        @endphp
+                                        <div wire:click="downloadFile('{{ $attachment }}', '{{ $originalFileName }}')" class="flex items-center gap-1 bg-gray-50 dark:bg-gray-700 p-2 my-2 rounded-lg group cursor-pointer">
+                                            <div class="p-2 text-white bg-gray-500 dark:bg-gray-600 rounded-full group-hover:bg-gray-700 group-hover:dark:bg-gray-800">
+                                                @php
+                                                    $icon = 'heroicon-m-x-mark';
+
+                                                    if($this->validateImage($attachment)) {
+                                                        $icon = 'heroicon-m-photo';
+                                                    }
+
+                                                    if ($this->validateDocument($attachment)) {
+                                                        $icon = 'heroicon-m-paper-clip';
+                                                    }
+
+                                                    if ($this->validateVideo($attachment)) {
+                                                        $icon = 'heroicon-m-video-camera';
+                                                    }
+
+                                                    if ($this->validateAudio($attachment)) {
+                                                        $icon = 'heroicon-m-speaker-wave';
+                                                    }
+
+                                                @endphp
+                                                <x-filament::icon icon="{{ $icon }}" class="w-4 h-4" />
+                                            </div>
+                                            <p class="text-sm text-gray-600 dark:text-white group-hover:underline">
+                                                {{ $originalFileName }}
+                                            </p>
+                                        </div>
+                                    @endforeach
+                                @endif
                                 <p class="mt-1 text-xs text-gray-500 dark:text-gray-600 text-start">
-                                    {{ \Carbon\Carbon::parse($message->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'))->format('F j, Y') }}
+                                    @php
+                                        $createdAt = \Carbon\Carbon::parse($message->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'));
+
+                                        if ($createdAt->isToday()) {
+                                            $date = $createdAt->format('g:i A');
+                                        } else {
+                                            $date = $createdAt->format('M d, Y g:i A');
+                                        }
+                                    @endphp
+                                    {{ $date }}
                                 </p>
                             </div>
                         </div>
                     @else
                         <!-- Right Side -->
                         <div class="flex flex-col items-end gap-2 mb-2">
-                            <div class="max-w-md p-2 text-white rounded-lg bg-primary-600 dark:bg-primary-500">
-                                <p class="text-sm">{{ $message->message }}</p>
+                            <div class="max-w-md p-2 text-white rounded-t-xl rounded-bl-xl bg-primary-600 dark:bg-primary-500">
+                                @if ($message->message)
+                                    <p class="text-sm">{{ $message->message }}</p>
+                                @endif
+                                @if ($message->attachments && count($message->attachments) > 0)
+                                    @foreach ($message->attachments as $attachment)
+                                        @php
+                                            $originalFileName = $this->getOriginalFileName($attachment, $message->original_attachment_file_names);
+                                        @endphp
+                                        <div wire:click="downloadFile('{{ $attachment }}', '{{ $originalFileName }}')" class="flex items-center gap-1 bg-primary-500 dark:bg-primary-800 p-2 my-2 rounded-lg group cursor-pointer">
+                                            <div class="p-2 text-white bg-primary-600 rounded-full group-hover:bg-primary-700 group-hover:dark:bg-primary-900">
+                                                @php
+                                                    $icon = 'heroicon-m-x-circle';
+
+                                                    if($this->validateImage($attachment)) {
+                                                        $icon = 'heroicon-m-photo';
+                                                    }
+
+                                                    if ($this->validateDocument($attachment)) {
+                                                        $icon = 'heroicon-m-paper-clip';
+                                                    }
+
+                                                    if ($this->validateVideo($attachment)) {
+                                                        $icon = 'heroicon-m-video-camera';
+                                                    }
+
+                                                    if ($this->validateAudio($attachment)) {
+                                                        $icon = 'heroicon-m-speaker-wave';
+                                                    }
+
+                                                @endphp
+                                                <x-filament::icon icon="{{ $icon }}" class="w-4 h-4" />
+                                            </div>
+                                            <p class="text-sm text-white group-hover:underline">
+                                                {{ $originalFileName }}
+                                            </p>
+                                        </div>
+                                    @endforeach
+                                @endif
                                 <p class="text-xs text-primary-300 dark:text-primary-200 text-end">
-                                    {{ \Carbon\Carbon::parse($message->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'))->format('F j, Y') }}
+                                    @php
+                                        $createdAt = \Carbon\Carbon::parse($message->created_at)->setTimezone(config('filachat.timezone', 'app.timezone'));
+
+                                        if ($createdAt->isToday()) {
+                                            $date = $createdAt->format('g:i A');
+                                        } else {
+                                            $date = $createdAt->format('M d, Y g:i A');
+                                        }
+                                    @endphp
+                                    {{ $date }}
                                 </p>
                             </div>
                             <template x-if="markAsRead || @js($message->last_read_at) !== null">
@@ -111,7 +214,7 @@ class="flex flex-col-reverse flex-1 p-5 overflow-y-auto">
             <!-- Repeat Message Item for multiple messages -->
             @if ($this->paginator->hasMorePages())
                 <div x-intersect="$wire.loadMoreMessages" class="h-4">
-                    <div class="w-full mb-2 text-center text-gray-500">Loading more messages...</div>
+                    <div class="w-full mb-6 text-center text-gray-500">Loading more messages...</div>
                 </div>
             @endif
         </div>
@@ -120,14 +223,13 @@ class="flex flex-col-reverse flex-1 p-5 overflow-y-auto">
 
         <!-- Chat Input -->
         <div class="w-full p-4 border-t dark:border-gray-800/60 border-gray-200/90">
-            <form wire:submit="sendMessage" class="flex items-center justify-between w-full gap-2">
-                <div class="w-full">
+            <form wire:submit="sendMessage" class="flex items-end justify-between w-full gap-4">
+                <div class="w-full max-h-96 overflow-y-auto">
                     {{ $this->form }}
                 </div>
-
-                <x-filament::button type="submit">
-                    Send
-                </x-filament::button>
+                <div class="p-1">
+                    <x-filament::button type="submit" icon="heroicon-m-paper-airplane" class="!gap-0"></x-filament::button>
+                </div>
             </form>
 
             <x-filament-actions::modals />
diff --git a/resources/views/filachat/components/chat-list.blade.php b/resources/views/filachat/components/chat-list.blade.php
index 0c6306c..2254502 100644
--- a/resources/views/filachat/components/chat-list.blade.php
+++ b/resources/views/filachat/components/chat-list.blade.php
@@ -62,7 +62,11 @@
                                 </div>
                                 <div class="flex items-center justify-between gap-1">
                                     <p class="text-sm text-gray-600 truncate dark:text-gray-400">
-                                        {{ $conversation->latest_message }}</p>
+                                        @if($conversation->is_sender)
+                                            <span class="text-primary-600 dark:text-primary-400 font-bold">You: </span>
+                                        @endif
+                                        {{ $conversation->latest_message }}
+                                    </p>
                                     @if ($conversation->unread_count > 0)
                                         <x-filament::badge>
                                             {{ $conversation->unread_count }}
diff --git a/src/Events/FilaChatMessageReceiverIsAwayEvent.php b/src/Events/FilaChatMessageReceiverIsAwayEvent.php
new file mode 100644
index 0000000..ba096cc
--- /dev/null
+++ b/src/Events/FilaChatMessageReceiverIsAwayEvent.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace JaOcero\FilaChat\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class FilaChatMessageReceiverIsAwayEvent implements ShouldBroadcastNow
+{
+    use Dispatchable;
+    use InteractsWithSockets;
+    use SerializesModels;
+
+    public string $type = FilaChatMessageReceiverIsAwayEvent::class;
+
+    /**
+     * Create a new event instance.
+     */
+    public function __construct(
+        public int $conversationId,
+    ) {
+        //
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return array<int, \Illuminate\Broadcasting\Channel>
+     */
+    public function broadcastOn()
+    {
+        return new Channel('filachat');
+    }
+}
diff --git a/src/FilaChatServiceProvider.php b/src/FilaChatServiceProvider.php
index 4676109..5e3d749 100644
--- a/src/FilaChatServiceProvider.php
+++ b/src/FilaChatServiceProvider.php
@@ -103,7 +103,7 @@ protected function getAssets(): array
     {
         return [
             // AlpineComponent::make('filachat', __DIR__ . '/../resources/dist/components/filachat.js'),
-            // Css::make('filachat-styles', __DIR__ . '/../resources/dist/filachat.css'),
+            Css::make('filachat-styles', __DIR__ . '/../resources/css/filachat.css')->loadedOnRequest(),
             // Js::make('filachat-scripts', __DIR__ . '/../resources/dist/filachat.js'),
         ];
     }
diff --git a/src/Livewire/ChatBox.php b/src/Livewire/ChatBox.php
index cb17b85..7768a5e 100644
--- a/src/Livewire/ChatBox.php
+++ b/src/Livewire/ChatBox.php
@@ -6,12 +6,20 @@
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
 use Filament\Forms\Form;
+use Filament\Forms\Get;
 use Filament\Notifications\Notification;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Storage;
 use JaOcero\FilaChat\Events\FilaChatMessageEvent;
 use JaOcero\FilaChat\Events\FilaChatMessageReadEvent;
+use JaOcero\FilaChat\Events\FilaChatMessageReceiverIsAwayEvent;
 use JaOcero\FilaChat\Models\FilaChatMessage;
+use JaOcero\FilaChat\Traits\CanGetOriginalFileName;
+use JaOcero\FilaChat\Traits\CanValidateAudio;
+use JaOcero\FilaChat\Traits\CanValidateDocument;
+use JaOcero\FilaChat\Traits\CanValidateImage;
+use JaOcero\FilaChat\Traits\CanValidateVideo;
 use Livewire\Attributes\Computed;
 use Livewire\Attributes\On;
 use Livewire\Component;
@@ -19,6 +27,11 @@
 
 class ChatBox extends Component implements HasForms
 {
+    use CanGetOriginalFileName;
+    use CanValidateAudio;
+    use CanValidateDocument;
+    use CanValidateImage;
+    use CanValidateVideo;
     use InteractsWithForms;
     use WithPagination;
 
@@ -26,16 +39,18 @@ class ChatBox extends Component implements HasForms
 
     public $currentPage = 1;
 
-    public Collection $messages;
+    public Collection $conversationMessages;
 
     public ?array $data = [];
 
+    public bool $showUpload = false;
+
     public function mount(): void
     {
         $this->form->fill();
 
         if ($this->selectedConversation) {
-            $this->messages = collect();
+            $this->conversationMessages = collect();
             $this->loadMoreMessages();
         }
     }
@@ -57,64 +72,107 @@ public function form(Form $form): Form
 
         return $form
             ->schema([
-                Forms\Components\Textarea::make('message')
+                Forms\Components\FileUpload::make('attachments')
                     ->hiddenLabel()
-                    ->placeholder(function () use ($isRoleEnabled, $isAgent, $isOtherPersonAgent) {
-                        if ($isRoleEnabled) {
-
-                            // if both in the conversation are normal users
-                            if (! $isAgent && ! $isOtherPersonAgent) {
-                                return 'You cannot write a message for other user...';
+                    ->multiple()
+                    ->storeFileNamesIn('original_attachment_file_names')
+                    ->fetchFileInformation()
+                    ->disk(config('filachat.disk'))
+                    ->directory(fn () => config('filachat.disk') == 's3' ? config('filachat.s3.directory') : 'attachments')
+                    ->visibility(fn () => config('filachat.disk') == 's3' ? config('filachat.s3.visibility') : 'public')
+                    ->acceptedFileTypes(config('filachat.mime_types'))
+                    ->maxSize(config('filachat.max_file_size'))
+                    ->minSize(config('filachat.min_file_size'))
+                    ->maxFiles(config('filachat.max_files'))
+                    ->minFiles(config('filachat.min_files'))
+                    ->panelLayout('grid')
+                    ->extraAttributes([
+                        'class' => 'filachat-filepond',
+                    ])
+                    ->visible(fn () => $this->showUpload),
+                Forms\Components\Split::make([
+                    Forms\Components\Actions::make([
+                        Forms\Components\Actions\Action::make('show_hide_upload')
+                            ->hiddenLabel()
+                            ->icon('heroicon-m-plus')
+                            ->color('gray')
+                            ->tooltip('Upload Files')
+                            ->action(fn () => $this->showUpload = ! $this->showUpload),
+                    ])
+                        ->grow(false),
+                    Forms\Components\Textarea::make('message')
+                        ->hiddenLabel()
+                        ->placeholder(function () use ($isRoleEnabled, $isAgent, $isOtherPersonAgent) {
+                            if ($isRoleEnabled) {
+
+                                // if both in the conversation are normal users
+                                if (! $isAgent && ! $isOtherPersonAgent) {
+                                    return 'You cannot write a message for other user...';
+                                }
+
+                                // if both in the conversation are agents
+                                if ($isAgent && $isOtherPersonAgent) {
+                                    return 'You cannot write a message for other agent...';
+                                }
                             }
 
-                            // if both in the conversation are agents
-                            if ($isAgent && $isOtherPersonAgent) {
-                                return 'You cannot write a message for other agent...';
-                            }
-                        }
+                            return 'Write a message...';
+                        })
+                        ->disabled(function () use ($isRoleEnabled, $isAgent, $isOtherPersonAgent) {
 
-                        return 'Write a message...';
-                    })
-                    ->required()
-                    ->rows(1)
-                    ->autosize()
-                    ->disabled(function () use ($isRoleEnabled, $isAgent, $isOtherPersonAgent) {
+                            if ($isRoleEnabled) {
 
-                        if ($isRoleEnabled) {
+                                // if both in the conversation are normal users
+                                if (! $isAgent && ! $isOtherPersonAgent) {
+                                    return true;
+                                }
 
-                            // if both in the conversation are normal users
-                            if (! $isAgent && ! $isOtherPersonAgent) {
-                                return true;
-                            }
+                                // if both in the conversation are agents
+                                if ($isAgent && $isOtherPersonAgent) {
+                                    return true;
+                                }
 
-                            // if both in the conversation are agents
-                            if ($isAgent && $isOtherPersonAgent) {
-                                return true;
-                            }
+                                // if one in the conversation is an agent
+                                if ($isAgent && ! $isOtherPersonAgent) {
+                                    return false;
+                                }
 
-                            // if one in the conversation is an agent
-                            if ($isAgent && ! $isOtherPersonAgent) {
-                                return false;
+                                // if one in the conversation is a normal user
+                                if (! $isAgent && $isOtherPersonAgent) {
+                                    return false;
+                                }
                             }
 
-                            // if one in the conversation is a normal user
-                            if (! $isAgent && $isOtherPersonAgent) {
+                            // if roles are not enabled
+                            return false;
+                        })
+                        ->required(function (Get $get) {
+                            if (count($get('attachments')) > 0) {
                                 return false;
                             }
-                        }
 
-                        // if roles are not enabled
-                        return false;
-                    }),
+                            return true;
+                        })
+                        ->rows(1)
+                        ->autosize()
+                        ->grow(true),
+                ])
+                    ->verticallyAlignEnd(),
             ])
             ->columns('full')
+            ->extraAttributes([
+                'class' => 'p-1',
+            ])
             ->statePath('data');
     }
 
     public function sendMessage(): void
     {
+        $data = $this->form->getState();
+        $rawData = $this->form->getRawState();
+
         try {
-            DB::transaction(function () {
+            DB::transaction(function () use ($data) {
                 if (auth()->id() === $this->selectedConversation->receiverable_id) {
                     $receiverableId = $this->selectedConversation->senderable_id;
                     $receiverableType = $this->selectedConversation->senderable_type;
@@ -125,13 +183,19 @@ public function sendMessage(): void
 
                 $newMessage = FilaChatMessage::query()->create([
                     'filachat_conversation_id' => $this->selectedConversation->id,
+                    'message' => $data['message'] ?? null,
+                    'attachments' => isset($data['attachments']) && count($data['attachments']) > 0 ? $data['attachments'] : null,
+                    'original_attachment_file_names' => isset($data['original_attachment_file_names']) && count($data['original_attachment_file_names']) > 0 ? $data['original_attachment_file_names'] : null,
                     'senderable_id' => auth()->id(),
                     'senderable_type' => auth()->user()::class,
                     'receiverable_id' => $receiverableId,
                     'receiverable_type' => $receiverableType,
-                    'message' => $this->data['message'],
                 ]);
 
+                $this->conversationMessages->prepend($newMessage);
+
+                $this->showUpload = false;
+
                 $this->form->fill();
 
                 $this->selectedConversation->updated_at = now();
@@ -165,11 +229,10 @@ public function broadcastNewMessage($data)
              * is the selected conversation
              */
             if ($data['conversationId'] && $data['conversationId'] === $this->selectedConversation?->id) {
-                $this->dispatch('chat-box-scroll-to-bottom');
 
                 $message = FilaChatMessage::find($data['messageId']);
 
-                $this->messages->prepend($message);
+                $this->conversationMessages->prepend($message);
 
                 if ($message->receiverable_id === auth()->id() && $message->receiverable_type === auth()->user()::class) {
                     $message->last_read_at = now();
@@ -177,6 +240,11 @@ public function broadcastNewMessage($data)
 
                     broadcast(new FilaChatMessageReadEvent($this->selectedConversation->id));
                 }
+            } else {
+                // This will be executed to the sender if the receiver is not in the selected conversation
+                if ($data['senderId'] === auth()->id()) {
+                    broadcast(new FilaChatMessageReceiverIsAwayEvent($data['conversationId']));
+                }
             }
 
             /**
@@ -191,7 +259,7 @@ public function broadcastNewMessage($data)
 
     public function loadMoreMessages()
     {
-        $this->messages->push(...$this->paginator->getCollection());
+        $this->conversationMessages->push(...$this->paginator->getCollection());
 
         $this->currentPage = $this->currentPage + 1;
 
@@ -204,6 +272,16 @@ public function paginator()
         return $this->selectedConversation->messages()->latest()->paginate(10, ['*'], 'page', $this->currentPage);
     }
 
+    public function downloadFile(string $path, string $originalFileName)
+    {
+        // Check if the file exists
+        if (Storage::disk(config('filachat.disk'))->exists($path)) {
+            return Storage::disk(config('filachat.disk'))->download($path, $originalFileName);
+        }
+
+        return abort(404, 'File not found');
+    }
+
     public function render()
     {
         return view('filachat::filachat.components.chat-box');
diff --git a/src/Models/FilaChatConversation.php b/src/Models/FilaChatConversation.php
index 23d92ac..a7ae5dd 100644
--- a/src/Models/FilaChatConversation.php
+++ b/src/Models/FilaChatConversation.php
@@ -48,7 +48,14 @@ public function getLatestMessageAttribute()
     {
         $latestMessage = $this->latestMessage();
 
-        return $latestMessage ? $latestMessage->message : null;
+        if ($latestMessage->message) {
+            return $latestMessage->message;
+        }
+
+        $attachmentCount = count($latestMessage->attachments);
+        $fileWord = $attachmentCount > 1 ? 'files' : 'file';
+
+        return 'Sent ' . $attachmentCount . ' ' . $fileWord . '.';
     }
 
     public function getUnreadCountAttribute()
@@ -85,6 +92,17 @@ public function getOtherPersonNameAttribute()
         return 'Unknown Name';
     }
 
+    public function getIsSenderAttribute()
+    {
+        $latestMessage = $this->latestMessage();
+
+        if ($latestMessage->senderable_id === auth()->user()->id) {
+            return true;
+        }
+
+        return false;
+    }
+
     protected function getName($user, $column)
     {
         return $user ? $user->{$column} : 'Unknown Name';
diff --git a/src/Traits/CanGetOriginalFileName.php b/src/Traits/CanGetOriginalFileName.php
new file mode 100644
index 0000000..41cec3c
--- /dev/null
+++ b/src/Traits/CanGetOriginalFileName.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace JaOcero\FilaChat\Traits;
+
+trait CanGetOriginalFileName
+{
+    public function getOriginalFileName(string $path, array $names): string
+    {
+        return $names[$path] ?? 'File name not found';
+    }
+}
diff --git a/src/Traits/CanValidateAudio.php b/src/Traits/CanValidateAudio.php
new file mode 100644
index 0000000..baee518
--- /dev/null
+++ b/src/Traits/CanValidateAudio.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace JaOcero\FilaChat\Traits;
+
+trait CanValidateAudio
+{
+    protected $validAudioExtensions = [
+        'm4a',  // For audio/m4a
+        'wav',  // For audio/wav
+        'mp3',  // For audio/mpeg (commonly associated with MP3 files)
+        'ogg',  // For audio/ogg
+        'aac',  // For audio/aac
+        'flac', // For audio/flac
+        'midi', // For audio/midi (alternative extension: .mid)
+    ];
+
+    public function validateAudio(string $imagePath): bool
+    {
+        $extension = strtolower(pathinfo($imagePath, PATHINFO_EXTENSION));
+
+        if (in_array($extension, $this->validAudioExtensions)) {
+            return true;
+        }
+
+        return false;
+    }
+}
diff --git a/src/Traits/CanValidateDocument.php b/src/Traits/CanValidateDocument.php
new file mode 100644
index 0000000..505b6c7
--- /dev/null
+++ b/src/Traits/CanValidateDocument.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace JaOcero\FilaChat\Traits;
+
+trait CanValidateDocument
+{
+    protected $validDocumentExtensions = [
+        'pdf',    // For application/pdf
+        'doc',    // For application/msword
+        'docx',   // For application/vnd.openxmlformats-officedocument.wordprocessingml.document
+        'csv',    // For text/csv
+        'txt',    // For text/plain
+        'xls',    // For application/vnd.ms-excel
+        'xlsx',   // For application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
+        'ppt',    // For application/vnd.ms-powerpoint
+        'pptx',   // For application/vnd.openxmlformats-officedocument.presentationml.presentation
+    ];
+
+    public function validateDocument(string $documentPath): bool
+    {
+        $extension = strtolower(pathinfo($documentPath, PATHINFO_EXTENSION));
+
+        if (in_array($extension, $this->validDocumentExtensions)) {
+            return true;
+        }
+
+        return false;
+    }
+}
diff --git a/src/Traits/CanValidateImage.php b/src/Traits/CanValidateImage.php
new file mode 100644
index 0000000..6362cdc
--- /dev/null
+++ b/src/Traits/CanValidateImage.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace JaOcero\FilaChat\Traits;
+
+trait CanValidateImage
+{
+    protected $validImageExtensions = [
+        'png',  // For image/png
+        'jpeg', // For image/jpeg
+        'jpg',  // For image/jpg
+        'gif',  // For image/gif
+    ];
+
+    public function validateImage(string $imagePath): bool
+    {
+        $extension = strtolower(pathinfo($imagePath, PATHINFO_EXTENSION));
+
+        if (in_array($extension, $this->validImageExtensions)) {
+            return true;
+        }
+
+        return false;
+    }
+}
diff --git a/src/Traits/CanValidateVideo.php b/src/Traits/CanValidateVideo.php
new file mode 100644
index 0000000..8e45adf
--- /dev/null
+++ b/src/Traits/CanValidateVideo.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace JaOcero\FilaChat\Traits;
+
+trait CanValidateVideo
+{
+    protected $validVideoExtensions = [
+        'mp4',      // For video/mp4
+        'avi',      // For video/avi
+        'mov',      // For video/quicktime
+        'webm',     // For video/webm
+        'mkv',      // For video/x-matroska
+        'flv',      // For video/x-flv
+        'mpeg',     // For video/mpeg
+        'mpg',      // For video/mpeg (alternative extension)
+    ];
+
+    public function validateVideo(string $imagePath): bool
+    {
+        $extension = strtolower(pathinfo($imagePath, PATHINFO_EXTENSION));
+
+        if (in_array($extension, $this->validVideoExtensions)) {
+            return true;
+        }
+
+        return false;
+    }
+}