forked from eatvio/eatvio-infra
91 lines
5.4 KiB
PHP
91 lines
5.4 KiB
PHP
<div class="flex-grow-1 overflow-hidden position-relative --bg_white --shadow --radius" id="chatBlock">
|
||
<div class="d-flex align-items-center justify-content-between p-3 chat_top_pannel">
|
||
<div class="d-flex align-items-center">
|
||
<button type="button" class="me-2 d-md-none" id="showChatList">
|
||
<svg width="13" height="26">
|
||
<use xlink:href="#BigLeftArrow"></use>
|
||
</svg>
|
||
</button>
|
||
|
||
@if($recipientUser)
|
||
<img src="{{ $recipientUser->profile_photo_url }}" width="42px" height="42px" class="me-2 --radius_100 pic-42px">
|
||
<small>
|
||
<span class="d-block --f_bold lh-1">{{ $recipientUser->name }}</span>
|
||
<small class="--f_grey">В сети 37 минут назад</small>
|
||
</small>
|
||
@endif
|
||
</div>
|
||
<ul class="navbar-nav" style="--bs-scroll-height:100px;">
|
||
<li class="nav-item dropdown">
|
||
<a id="dLabel" class="nav-link py-0 dropdown-toggle-js" href="#" data-bs-toggle="dropdown" aria-expanded="false" role="button">
|
||
<svg width="18" height="4">
|
||
<use xlink:href="#Dots"></use>
|
||
</svg>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
|
||
<li><a class="dropdown-item" href="#"><svg width="23" height="16" class="me-2">
|
||
<use xlink:href="#Mute"></use>
|
||
</svg>Отключить звук</a></li>
|
||
<li><a class="dropdown-item" href="#"><svg width="23" height="22" class="me-2">
|
||
<use xlink:href="#Trash"></use>
|
||
</svg>Удалить чат</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="messages_container px-2 px-md-3 d-flex" style="flex-direction: column-reverse;">
|
||
@foreach($messages as $message)
|
||
@php
|
||
$author = App\Models\User::find($message['from_user_id']);
|
||
$authorPhoto = $author->profile_photo_url;
|
||
$isAuthorPost = $curUserId == $message['from_user_id'];
|
||
|
||
if (is_string($message['created_at'])) {
|
||
$createdAt = Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $message['created_at'])->setTimezone('Europe/Moscow')->diffForHumans();
|
||
} else {
|
||
$createdAt = $message['created_at']->setTimezone('Europe/Moscow')->diffForHumans();
|
||
}
|
||
@endphp
|
||
<div class="d-flex my-3 me-5 {{ $isAuthorPost ? 'justify-content-end' : ''}}">
|
||
@if(!$isAuthorPost)
|
||
<img src="{{ $authorPhoto }}" width="42px" height="42px" class="me-2 --radius_100 pic-42px">
|
||
@endif
|
||
<div class="--message {{ $isAuthorPost ? 'text-end' : ''}}"><small>
|
||
<div>
|
||
<a href="{{ route('profile.show', $author) }}" class="me-1 --f_bold">{{ $author->name }}</a>
|
||
<small class="--f_grey d-block pr-2">{{ $createdAt }}</small>
|
||
</div>
|
||
<div class="ml-2 mr-2">
|
||
{{ $message['data'] }}
|
||
</div>
|
||
</small>
|
||
</div>
|
||
@if($isAuthorPost)
|
||
<img src="{{ $authorPhoto }}" width="42px" height="42px" class="me-2 --radius_100 pic-42px">
|
||
@endif
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
<form wire:submit="sendChatMessage">
|
||
<div class="d-flex justify-content-between align-items-center px-3 py-2 pb-4 chat_bottom_panel bg_F0F2F5">
|
||
<button type="button" class="me-3">
|
||
<svg width="21" height="24">
|
||
<use xlink:href="#ClipIcon"></use>
|
||
</svg>
|
||
</button>
|
||
<input type="text" onkeydown='scrollDownChatWindow()' wire:model="curMessage" wire:keydown.debounce.500ms="whisperTypeing" class="form-control --bg_white" @disabled(is_null($recipientUser)) placeholder="Написать сообщение..." />
|
||
<button type="button" class="ms-3">
|
||
<svg width="19" height="25">
|
||
<use xlink:href="#Voice"></use>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
</form>
|
||
<template x-if="$store.typing">
|
||
<div style="position: absolute;bottom: 0;left: 0;margin-left: 4em;">
|
||
<span x-text="$store.activePeer + ' is typing...'"></span>
|
||
</div>
|
||
</template>
|
||
</div>
|