619 lines
42 KiB
PHP
619 lines
42 KiB
PHP
@use('Namu\WireChat\Helpers\Helper')
|
|
|
|
<footer class="shrink-0 h-auto relative sticky bottom-0 mt-auto">
|
|
|
|
{{-- Check if group allows :sending messages --}}
|
|
@if ($conversation->isGroup() && !$conversation->group?->allowsMembersToSendMessages() && !$authParticipant->isAdmin())
|
|
<div
|
|
class="dark:bg-[var(--wc-dark-secondary)] bg-[var(--wc-light-secondary)] w-full text-center text-gray-600 dark:text-gray-200 justify-center text-sm flex py-4 ">
|
|
Only admins can send messages
|
|
</div>
|
|
@else
|
|
<div id="chat-footer" x-data="{ 'openEmojiPicker': false }"
|
|
class=" px-3 md:px-1 border-t shadow-sm bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-secondary)] z-50 border-[var(--wc-light-primary)] dark:border-[var(--wc-dark-primary)] flex flex-col gap-3 items-center w-full mx-auto">
|
|
|
|
{{-- Emoji section , we put it seperate to avoid interfering as overlay for form when opened --}}
|
|
<section wire:ignore x-cloak x-show="openEmojiPicker" x-transition:enter="transition ease-out duration-180 transform"
|
|
x-transition:enter-start=" translate-y-full" x-transition:enter-end=" translate-y-0"
|
|
x-transition:leave="transition ease-in duration-180 transform" x-transition:leave-start=" translate-y-0"
|
|
x-transition:leave-end="translate-y-full"
|
|
class="w-full flex hidden sm:flex py-2 sm:px-4 py-1.5 border-b border-[var(--wc-light-primary)] dark:border-[var(--wc-dark-primary)] h-96 min-w-full">
|
|
|
|
<emoji-picker dusk="emoji-picker" style="width: 100%"
|
|
class=" flex w-full h-full rounded-xl"
|
|
x-init="$el.dataSource = '/js/vendor/emoji-picker-element-data/en/emojibase/data.json'"></emoji-picker>
|
|
</section>
|
|
{{-- form and detail section --}}
|
|
<section
|
|
class=" py-2 sm:px-4 py-1.5 z-50 dark:bg-[var(--wc-dark-secondary)] bg-[var(--wc-light-secondary)] flex flex-col gap-3 items-center w-full mx-auto">
|
|
|
|
{{-- Media preview section --}}
|
|
<section x-show="$wire.media.length>0 ||$wire.files.length>0" x-cloak
|
|
class=" flex flex-col w-full gap-3" wire:loading.class="animate-pulse" wire:target="sendMessage">
|
|
|
|
|
|
|
|
@if (count($media) > 0)
|
|
<div x-data="attachments('media')">
|
|
{{-- todo: Implement error handling fromserver during file uploads --}}
|
|
{{--
|
|
@error('media')
|
|
<span class="flex text-sm text-red-500 pb-2 bg-gray-100 p-2 w-full justify-between">
|
|
{{$message}}
|
|
<button @click="$wire.resetAttachmentErrors()">X</button>
|
|
</span>
|
|
@enderror --}}
|
|
{{-- todo:Show progress when uploading files --}}
|
|
{{-- <div x-show="isUploading" class="w-full">
|
|
<progress class="w-full h-1 rounded-lg" max="100" x-bind:value="progress"></progress>
|
|
</div> --}}
|
|
<section
|
|
class=" flex overflow-x-scroll ms-overflow-style-none items-center w-full col-span-12 py-2 gap-5 "
|
|
style=" scrollbar-width: none; -ms-overflow-style: none;">
|
|
|
|
|
|
{{-- Loop through media for preview --}}
|
|
@foreach ($media as $key => $mediaItem)
|
|
@if (str()->startsWith($mediaItem->getMimeType(), 'image/'))
|
|
<div class="relative h-24 sm:h-36 aspect-4/3 ">
|
|
{{-- Delete image --}}
|
|
<button wire:loading.attr="disabled"
|
|
class="disabled:cursor-progress absolute -top-2 -right-2 z-10 dark:text-gray-50"
|
|
@click="removeUpload('{{ $mediaItem->getFilename() }}')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
|
fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|
<path
|
|
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path
|
|
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
</button>
|
|
<img class="h-full w-full rounded-lg object-scale-down"
|
|
src="{{ $mediaItem->temporaryUrl() }}" alt="mediaItem">
|
|
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Attachemnt is Video/ --}}
|
|
@if (str()->startsWith($mediaItem->getMimeType(), 'video/'))
|
|
<div class="relative h-24 sm:h-36 ">
|
|
<button wire:loading.attr="disabled"
|
|
class="disabled:cursor-progress absolute -top-2 -right-2 z-10 dark:text-gray-50"
|
|
@click="removeUpload('{{ $mediaItem->getFilename() }}')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
|
fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|
<path
|
|
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path
|
|
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
</button>
|
|
<x-wirechat::video height="h-24 sm:h-36 " :cover="false"
|
|
:showToggleSound="false" :source="$mediaItem->temporaryUrl()" />
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
|
|
|
|
<label wire:loading.class="cursor-progress"
|
|
class="shrink-0 cursor-pointer relative w-16 h-14 rounded-lg bg-[var(--wc-light-secondary)] dark:bg-[var(--wc-dark-primary)] hover:bg-[var(--wc-light-primary)] dark:hover:bg-[var(--wc-dark-primary)] border border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-secondary)] flex text-center justify-center ">
|
|
<input wire:loading.attr="disabled"
|
|
@change="handleFileSelect(event,{{ count($media) }})" type="file" multiple
|
|
accept="{{ Helper::formattedMediaMimesForAcceptAttribute() }}" class="sr-only">
|
|
<span class="m-auto ">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
|
class="w-7 h-7 text-gray-600 dark:text-gray-100">
|
|
<path fill-rule="evenodd"
|
|
d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
|
|
</span>
|
|
</label>
|
|
|
|
</section>
|
|
</div>
|
|
|
|
@endif
|
|
{{-- ----------------------- --}}
|
|
{{-- Files preview section --}}
|
|
@if (count($files) > 0)
|
|
<section x-data="attachments('files')"
|
|
class="flex overflow-x-scroll ms-overflow-style-none items-center w-full col-span-12 py-2 gap-5 "
|
|
style=" scrollbar-width: none; -ms-overflow-style: none;">
|
|
|
|
{{-- Loop through files for preview --}}
|
|
@foreach ($files as $key => $file)
|
|
<div class="relative shrink-0">
|
|
{{-- Delete file button --}}
|
|
<button wire:loading.attr="disabled"
|
|
class="disabled:cursor-progress absolute -top-2 -right-2 z-10"
|
|
@click="removeUpload('{{ $file->getFilename() }}')">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
|
fill="currentColor"
|
|
class="bi bi-x-circle dark:text-white dark:hover:text-red-500 hover:text-red-500 transition-colors"
|
|
viewBox="0 0 16 16">
|
|
<path
|
|
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path
|
|
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
</button>
|
|
|
|
{{-- File details --}}
|
|
<div
|
|
class="flex items-center group overflow-hidden bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] hover:border-[var(--wc-light-primary)] dark:hover:border-[var(--wc-dark-primary)] border border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-secondary)] rounded-xl">
|
|
<span class=" p-2">
|
|
{{-- document svg:HI --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
fill="currentColor" class="w-8 h-8 text-gray-500 dark:text-gray-100">
|
|
<path
|
|
d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625Z" />
|
|
<path
|
|
d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" />
|
|
</svg>
|
|
</span>
|
|
|
|
<p class="mt-auto p-2 text-gray-600 dark:text-gray-100 text-sm">
|
|
{{ $file->getClientOriginalName() }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
{{-- Add more files --}}
|
|
{{-- TODO @if "( count($media)< $MAXFILES )" to hide upload button when maz files exceeded --}}
|
|
<label wire:loading.class="cursor-progress"
|
|
class="cursor-pointer shrink-0 relative w-16 h-14 rounded-lg bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-primary)] hover:border-[var(--wc-light-primary)] dark:hover:border-[var(--wc-dark-primary)] border border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-secondary)] transition-colors flex text-center justify-center ">
|
|
<input wire:loading.attr="disabled"
|
|
@change="handleFileSelect(event,{{ count($files) }})" type="file" multiple
|
|
accept="{{ Helper::formattedFileMimesForAcceptAttribute() }}" class="sr-only"
|
|
hidden>
|
|
<span class=" m-auto">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
|
class="w-6 h-6 dark:text-gray-50">
|
|
<path fill-rule="evenodd"
|
|
d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
|
|
|
|
</span>
|
|
</label>
|
|
|
|
</section>
|
|
@endif
|
|
</section>
|
|
|
|
|
|
{{-- Replying to --}}
|
|
@if ($replyMessage != null)
|
|
<section class="p-px py-1 w-full col-span-12">
|
|
<div class="flex justify-between items-center dark:text-white">
|
|
<h6 class="text-sm">
|
|
{{ $replyMessage?->ownedBy($this->auth) ? __('wirechat::chat.labels.replying_to_yourself'): __('wirechat::chat.labels.replying_to',['participant'=>$replyMessage->sendable?->name]) }}
|
|
</h6>
|
|
<button wire:loading.attr="disabled" wire:click="removeReply()"
|
|
class="disabled:cursor-progress">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Message being replied to --}}
|
|
<p class="truncate text-sm text-gray-500 dark:text-gray-200 max-w-md">
|
|
{{ $replyMessage->body != '' ? $replyMessage->body : ($replyMessage->hasAttachment() ? 'Attachment' : '') }}
|
|
</p>
|
|
|
|
</section>
|
|
@endif
|
|
|
|
|
|
|
|
<form x-data="{
|
|
'body': $wire.entangle('body'),
|
|
insertNewLine: function(textarea) {
|
|
{{-- Get the current cursor position --}}
|
|
var startPos = textarea.selectionStart;
|
|
var endPos = textarea.selectionEnd;
|
|
|
|
{{-- Insert a line break character at the cursor position --}}
|
|
var text = textarea.value;
|
|
var newText = text.substring(0, startPos) + '\n' + text.substring(endPos, text.length);
|
|
|
|
{{-- Update the textarea value and cursor position --}}
|
|
textarea.value = newText;
|
|
textarea.selectionStart = startPos + 1; // Set cursor position after the inserted newline
|
|
textarea.selectionEnd = startPos + 1;
|
|
|
|
{{-- update height of element smoothly --}}
|
|
textarea.style.height = 'auto';
|
|
textarea.style.height = textarea.scrollHeight + 'px';
|
|
|
|
}
|
|
}" x-init="{{-- Emoji picture click event listener --}}
|
|
document.querySelector('emoji-picker')
|
|
.addEventListener('emoji-click', event => {
|
|
// Get the emoji unicode from the event
|
|
const emoji = event.detail['unicode'];
|
|
|
|
// Get the current value and cursor position
|
|
const inputField = $refs.body;
|
|
const inputFieldValue = inputField._x_model.get() ?? '';
|
|
|
|
const startPos = inputField.selectionStart;
|
|
const endPos = inputField.selectionEnd;
|
|
|
|
// Insert the emoji at the current cursor position
|
|
const newValue = inputFieldValue.substring(0, startPos) + emoji + inputFieldValue.substring(endPos);
|
|
|
|
// Update the value and move cursor after the emoji
|
|
inputField._x_model.set(newValue);
|
|
|
|
|
|
inputField.setSelectionRange(startPos + emoji.length, startPos + emoji.length);
|
|
});"
|
|
@submit.prevent="((body && body?.trim().length > 0) || ($wire.media && $wire.media.length > 0)|| ($wire.files && $wire.files.length > 0)) ? ($wire.sendMessage(), openEmojiPicker = false) : null"
|
|
method="POST" autocapitalize="off" @class(['flex items-center col-span-12 w-full gap-2 gap-5'])>
|
|
@csrf
|
|
|
|
<input type="hidden" autocomplete="false" style="display: none">
|
|
|
|
|
|
{{-- Emoji Triggger icon --}}
|
|
<div class="w-10 hidden sm:flex max-w-fit items-center">
|
|
<button wire:loading.attr="disabled" type="button" dusk="emoji-trigger-button"
|
|
@click="openEmojiPicker = ! openEmojiPicker" x-ref="emojibutton"
|
|
class="cursor-pointer hover:scale-105 transition-transform disabled:cursor-progress rounded-full p-px dark:border-gray-700">
|
|
<svg x-bind:style="openEmojiPicker && { color: 'var(--wc-brand-primary)' }"
|
|
viewBox="0 0 24 24" height="24" width="24"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
class="w-7 h-7 text-gray-600 dark:text-gray-300 srtoke-[1.3] dark:stroke-[1.2]"
|
|
version="1.1" x="0px" y="0px" enable-background="new 0 0 24 24">
|
|
<title>smiley</title>
|
|
<path fill="currentColor"
|
|
d="M9.153,11.603c0.795,0,1.439-0.879,1.439-1.962S9.948,7.679,9.153,7.679 S7.714,8.558,7.714,9.641S8.358,11.603,9.153,11.603z M5.949,12.965c-0.026-0.307-0.131,5.218,6.063,5.551 c6.066-0.25,6.066-5.551,6.066-5.551C12,14.381,5.949,12.965,5.949,12.965z M17.312,14.073c0,0-0.669,1.959-5.051,1.959 c-3.505,0-5.388-1.164-5.607-1.959C6.654,14.073,12.566,15.128,17.312,14.073z M11.804,1.011c-6.195,0-10.826,5.022-10.826,11.217 s4.826,10.761,11.021,10.761S23.02,18.423,23.02,12.228C23.021,6.033,17.999,1.011,11.804,1.011z M12,21.354 c-5.273,0-9.381-3.886-9.381-9.159s3.942-9.548,9.215-9.548s9.548,4.275,9.548,9.548C21.381,17.467,17.273,21.354,12,21.354z M15.108,11.603c0.795,0,1.439-0.879,1.439-1.962s-0.644-1.962-1.439-1.962s-1.439,0.879-1.439,1.962S14.313,11.603,15.108,11.603z">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Show upload pop if media or file are empty --}}
|
|
{{-- Also only show upload popup if allowed in configuration --}}
|
|
@if (count($this->media) == 0 &&
|
|
count($this->files) == 0 &&
|
|
(config('wirechat.allow_file_attachments', true) || config('wirechat.allow_media_attachments', true)))
|
|
<x-wirechat::popover position="top" popoverOffset="70">
|
|
|
|
<x-slot name="trigger" wire:loading.attr="disabled">
|
|
<span dusk="upload-trigger-button">
|
|
|
|
{{-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-7 h-7 dark:text-white/90">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg> --}}
|
|
{{-- <svg xmlns="http://www.w3.org/2000/svg"
|
|
width="16" height="16" fill="currentColor"
|
|
class="bi bi-plus-lg w-6 h-6 text-gray-600 dark:text-white/90" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd"
|
|
d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
|
|
</svg> --}}
|
|
|
|
{{-- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.3" stroke="currentColor" class="size-6 w-7 h-7 text-gray-600 dark:text-white/90">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
|
|
</svg> --}}
|
|
<svg class="size-6 w-7 h-7 text-gray-600 dark:text-white/60"
|
|
xmlns="http://www.w3.org/2000/svg" width="36" height="36"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2"
|
|
stroke-linecap="round" stroke-linejoin="round" class="ai ai-Attach">
|
|
<path
|
|
d="M6 7.91V16a6 6 0 0 0 6 6v0a6 6 0 0 0 6-6V6a4 4 0 0 0-4-4v0a4 4 0 0 0-4 4v9.182a2 2 0 0 0 2 2v0a2 2 0 0 0 2-2V8" />
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
</x-slot>
|
|
|
|
{{-- content --}}
|
|
<div class="grid gap-2 w-full ">
|
|
|
|
{{-- Upload Files --}}
|
|
@if (config('wirechat.allow_file_attachments', true))
|
|
<label wire:loading.class="cursor-progress" x-data="attachments('files')"
|
|
class="cursor-pointer">
|
|
<input wire:loading.attr="disabled" wire:target="sendMessage"
|
|
dusk="file-upload-input"
|
|
@change="handleFileSelect(event, {{ count($files) }})" type="file"
|
|
multiple accept="{{ Helper::formattedFileMimesForAcceptAttribute() }}"
|
|
class="sr-only" style="display: none">
|
|
|
|
<div
|
|
class="w-full flex items-center gap-3 px-1.5 py-2 rounded-md hover:bg-[var(--wc-light-primary)] dark:hover:bg-[var(--wc-dark-primary)] cursor-pointer">
|
|
|
|
<span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
|
|
fill="currentColor" style="color: var(--wc-brand-primary);"
|
|
class="bi bi-folder-fill w-6 h-6" viewBox="0 0 16 16">
|
|
<path
|
|
d="M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.825a2 2 0 0 1-1.991-1.819l-.637-7a2 2 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3m-8.322.12q.322-.119.684-.12h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981z" />
|
|
</svg>
|
|
</span>
|
|
|
|
<span class=" dark:text-white">
|
|
@lang('wirechat::chat.actions.upload_file.label')
|
|
</span>
|
|
</div>
|
|
</label>
|
|
@endif
|
|
|
|
|
|
{{-- Upload Media --}}
|
|
@if (config('wirechat.allow_media_attachments', true))
|
|
<label wire:loading.class="cursor-progress" x-data="attachments('media')"
|
|
class="cursor-pointer">
|
|
|
|
{{-- Trigger image upload --}}
|
|
<input dusk="media-upload-input" wire:loading.attr="disabled"
|
|
wire:target="sendMessage"
|
|
@change="handleFileSelect(event, {{ count($media) }})" type="file"
|
|
multiple accept="{{ Helper::formattedMediaMimesForAcceptAttribute() }}"
|
|
class="sr-only" style="display: none">
|
|
|
|
<div
|
|
class="w-full flex items-center gap-3 px-1.5 py-2 rounded-md hover:bg-[var(--wc-light-primary)] dark:hover:bg-[var(--wc-dark-primary)] cursor-pointer">
|
|
|
|
<span class="">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
|
|
fill="currentColor" class="w-6 h-6"
|
|
style="color: var(--wc-brand-primary);">
|
|
<path fill-rule="evenodd"
|
|
d="M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
|
|
<span class=" dark:text-white">
|
|
@lang('wirechat::chat.actions.upload_media.label')
|
|
</span>
|
|
</div>
|
|
</label>
|
|
@endif
|
|
|
|
|
|
</div>
|
|
</x-wirechat::popover>
|
|
@endif
|
|
|
|
{{-- --------------- --}}
|
|
{{-- TextArea Input --}}
|
|
{{-- --------------- --}}
|
|
|
|
<div @class(['flex gap-2 sm:px-2 w-full'])>
|
|
<textarea @focus-input-field.window="$el.focus()" autocomplete="off" x-model='body' x-ref="body"
|
|
wire:loading.delay.longest.attr="disabled" wire:target="sendMessage" id="chat-input-field" autofocus
|
|
type="text" name="message" placeholder="{{ __('wirechat::chat.inputs.message.placeholder') }}" maxlength="1700" rows="1"
|
|
@input="$el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px';"
|
|
@keydown.shift.enter.prevent="insertNewLine($el)" {{-- @keydown.enter.prevent prevents the
|
|
default behavior of Enter key press only if Shift is not held down. --}} @keydown.enter.prevent=""
|
|
@keyup.enter.prevent="$event.shiftKey ? null : (((body && body?.trim().length > 0) || ($wire.media && $wire.media.length > 0)) ? ($wire.sendMessage(), openEmojiPicker = false) : null)"
|
|
class="w-full disabled:cursor-progress resize-none h-auto max-h-20 sm:max-h-72 flex grow border-0 outline-0 focus:border-0 focus:ring-0 hover:ring-0 rounded-lg dark:text-white bg-none dark:bg-inherit focus:outline-hidden "
|
|
x-init="document.querySelector('emoji-picker')
|
|
.addEventListener('emoji-click', event => {
|
|
const emoji = event.detail['unicode'];
|
|
const inputField = $refs.body;
|
|
|
|
// Get the current cursor position (start and end)
|
|
const startPos = inputField.selectionStart;
|
|
const endPos = inputField.selectionEnd;
|
|
|
|
// Get current value of the input field
|
|
const currentValue = inputField.value;
|
|
|
|
// Insert the emoji at the cursor position, preserving line breaks and spaces
|
|
const newValue = currentValue.substring(0, startPos) + emoji + currentValue.substring(endPos);
|
|
|
|
// Update Alpine.js model (x-model='body') with the new value
|
|
inputField._x_model.set(newValue);
|
|
|
|
// Set the cursor position after the inserted emoji
|
|
inputField.setSelectionRange(startPos + emoji.length, startPos + emoji.length);
|
|
|
|
// Ensure the textarea resizes correctly after adding the emoji
|
|
inputField.style.height = 'auto';
|
|
inputField.style.height = inputField.scrollHeight + 'px';
|
|
});"></textarea>
|
|
|
|
|
|
</div>
|
|
|
|
{{-- --------------- --}}
|
|
{{-- input Actions --}}
|
|
{{-- --------------- --}}
|
|
|
|
<div x-cloak @class(['w-[5%] justify-end min-w-max items-center gap-2 '])>
|
|
|
|
{{-- Submit button --}}
|
|
<button
|
|
x-show="((body?.trim()?.length>0) || $wire.media.length > 0 || $wire.files.length > 0 )"
|
|
wire:loading.attr="disabled" wire:target="sendMessage" type="submit"
|
|
id="sendMessageButton" class="cursor-pointer hover:text-[var(--wc-brand-primary)] transition-color ml-auto disabled:cursor-progress cursor-pointer font-bold">
|
|
|
|
<svg class="w-7 h-7 dark:text-gray-200" xmlns="http://www.w3.org/2000/svg"
|
|
width="36" height="36" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
|
|
stroke-linejoin="round" class="ai ai-Send">
|
|
<path
|
|
d="M9.912 12H4L2.023 4.135A.662.662 0 0 1 2 3.995c-.022-.721.772-1.221 1.46-.891L22 12 3.46 20.896c-.68.327-1.464-.159-1.46-.867a.66.66 0 0 1 .033-.186L3.5 15" />
|
|
</svg>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
{{-- send Like button --}}
|
|
{{-- <button
|
|
x-show="!((body?.trim()?.length>0) || $wire.media.length > 0 || $wire.files.length > 0 )"
|
|
wire:loading.attr="disabled" wire:target="sendMessage" wire:click='sendLike()'
|
|
type="button" class="hover:scale-105 transition-transform cursor-pointer group disabled:cursor-progress">
|
|
|
|
<!-- outlined heart -->
|
|
<span class=" group-hover:hidden transition">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
class="w-7 h-7 text-gray-600 dark:text-white/90 stroke-[1.4] dark:stroke-[1.4]">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
|
</svg>
|
|
</span>
|
|
<!-- filled heart -->
|
|
<span class="hidden group-hover:block transition " x-bounce>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
|
|
class="size-6 w-7 h-7 text-red-500">
|
|
<path
|
|
d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
|
|
</svg>
|
|
</span>
|
|
|
|
</button> --}}
|
|
|
|
|
|
</div>
|
|
|
|
</form>
|
|
</section>
|
|
|
|
|
|
|
|
@script
|
|
<script>
|
|
Alpine.data('attachments', (type = "media") => ({
|
|
// State variables
|
|
isDropping: false, // Tracks if a file is being dragged over the drop area
|
|
type: type, // Type of file being uploaded (e.g., "media" or "file")
|
|
isUploading: false, // Indicates if files are currently uploading
|
|
MAXFILES: @json(config('wirechat.attachments.max_uploads', 5)), // Maximum number of files allowed
|
|
maxSize: @json(config('wirechat.attachments.media_max_upload_size', 12288)) * 1024, // Max size per file (in bytes)
|
|
allowedFileTypes: type === 'media' ? @json(config('wirechat.attachments.media_mimes')) :
|
|
@json(config('wirechat.attachments.file_mimes')), // Allowed MIME types based on type
|
|
progress: 0, // Progress of the current upload (0-100)
|
|
wireModel: type, // The Livewire model to bind to
|
|
|
|
// Handle file selection from the input field
|
|
handleFileSelect(event, count) {
|
|
if (event.target.files.length) {
|
|
const files = event.target.files;
|
|
|
|
// Validate selected files and upload if valid
|
|
this.validateFiles(files, count)
|
|
.then((validFiles) => {
|
|
if (validFiles.length > 0) {
|
|
this.uploadFiles(validFiles);
|
|
} else {
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
});
|
|
}
|
|
},
|
|
|
|
// Upload files using Livewire's upload
|
|
uploadFiles(files) {
|
|
this.isUploading = true;
|
|
this.progress = 0;
|
|
|
|
// Initialize per-file progress tracking
|
|
const fileProgress = Array.from(files).map(() => 0);
|
|
files.forEach((file, index) => {
|
|
$wire.upload(
|
|
`${this.wireModel}`, // Livewire model
|
|
file, // Single file
|
|
() => {
|
|
fileProgress[index] = 100; // Mark this file as complete
|
|
// this.isUploading = false;
|
|
this.progress = Math.round((fileProgress.reduce((a, b) => a + b, 0)) / files.length);
|
|
},
|
|
(error) => {
|
|
// this.isUploading = false;
|
|
fileProgress[index] = -1; // Mark as failed
|
|
$dispatch('wirechat-toast', { type: 'error', message: `Validation error: ${error}` });
|
|
},
|
|
(event) => {
|
|
fileProgress[index] = event.detail.progress; // Update per-file progress
|
|
this.progress = Math.round((fileProgress.reduce((a, b) => a + b, 0)) / files.length); // Overall progress
|
|
}
|
|
);
|
|
});
|
|
},
|
|
|
|
// Upload files using Livewire's uploadMultiple method
|
|
|
|
// Remove an uploaded file from Livewire
|
|
removeUpload(filename) {
|
|
$wire.removeUpload(this.wireModel, filename);
|
|
},
|
|
|
|
// Validate selected files against constraints
|
|
validateFiles(files, count) {
|
|
const totalFiles = count + files.length; // Total file count including existing uploads
|
|
|
|
// Check if total file count exceeds the maximum allowed
|
|
if (totalFiles > this.MAXFILES) {
|
|
files = Array.from(files).slice(0, this.MAXFILES -
|
|
count); // Limit files to the allowed number
|
|
$dispatch('wirechat-toast', {
|
|
type: 'warning',
|
|
message: @js(__('wirechat::validation.max.array', ['attribute' => __('wirechat::chat.inputs.media.label'),'max'=>config('wirechat.attachments.max_uploads', 5)]))
|
|
});
|
|
}
|
|
|
|
// Filter invalid files based on size and type
|
|
const invalidFiles = Array.from(files).filter((file) => {
|
|
const fileType = file.type.split('/')[1].toLowerCase(); // Extract file extension
|
|
return file.size > this.maxSize || !this.allowedFileTypes.includes(
|
|
fileType); // Check size and type
|
|
});
|
|
|
|
// Filter valid files
|
|
const validFiles = Array.from(files).filter((file) => {
|
|
const fileType = file.type.split('/')[1].toLowerCase();
|
|
return file.size <= this.maxSize && this.allowedFileTypes.includes(fileType);
|
|
});
|
|
|
|
// Handle invalid files by showing appropriate error messages
|
|
if (invalidFiles.length > 0) {
|
|
invalidFiles.forEach((file) => {
|
|
if (file.size > this.maxSize) {
|
|
$dispatch('wirechat-toast', {
|
|
type: 'warning',
|
|
message: @js(__('wirechat::validation.max.file', ['attribute' => __('wirechat::chat.inputs.media.label'),'max'=>config('wirechat.attachments.media_max_upload_size', 12288)]))
|
|
// message: `File size exceeds the maximum limit (${this.maxSize / 1024 / 1024}MB): ${file.name}`
|
|
});
|
|
} else {
|
|
const extension = file.name.split('.').pop().toLowerCase();
|
|
$dispatch('wirechat-toast', {
|
|
type: 'warning',
|
|
message: @js(__('wirechat::validation.mimes', [ 'attribute' => __('wirechat::chat.inputs.media.label'), 'values' => implode(', ', config('wirechat.attachments.media_mimes')) ]))
|
|
// message: `One or more Files not uploaded: .${extension} (type not allowed)`
|
|
});
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
return Promise.resolve(validFiles); // Return valid files for further processing
|
|
}
|
|
}));
|
|
</script>
|
|
@endscript
|
|
</div>
|
|
@endif
|
|
|
|
|
|
|
|
</footer>
|