@props([
    'chats' => null,
    'robot' => null,
    'conversation' => null,
])

<div class="chat-history">
    <ul id="chat-list">
        <li>
            <div class="message-data">
                <span class="name">{{ $robot->name }}</span>
                <span
                    class="data-time small">{{ $conversation ? $conversation->created_at->format('H:i') : \Carbon\Carbon::now()->format('H:i') }}</span>
            </div>
            <div class="message my-message">
                @lang('robots.welcomeMessage')
            </div>
        </li>
        @foreach ($chats as $chat)
            @if ($chat->user_id != 0)
                <li class="clearfix">
                    <div class="message-data text-end">
                        <span class="data-time small" datetime="">{{ $chat->created_at->format('H:i') }}</span>
                        <span class="name">{{ $chat->user->name }}</span>
                    </div>
                    <div class="message other-message float-end">
                        {{ $chat->message }}
                    </div>
                </li>
            @endif
            @if ($chat->robot_id != 0)
                <li>
                    <div class="message-data">
                        <span class="name">{{ $chat->robot->name }}</span>
                        <span class="data-time small">{{ $chat->created_at->format('H:i') }}</span>
                    </div>
                    <div class="message my-message">
                        {!! $chat->message !!}
                    </div>
                </li>
            @endif
        @endforeach
    </ul>
</div>
<div class="chat-message">
    <textarea class="form-control" autofocus name="message-to-send" id="message-to-send" placeholder="Type your message"
        rows="2"></textarea>
    <button type="button" class="btn btn-primary" id="send" data-coreui-toggle="tooltip"
        title="@lang('robots.send')">
        <svg width="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 140">
            <path
                d="M176.84,210a6.23,6.23,0,0,1,6.77-.81L324.16,277,271,294.13l-59-46.67,43.19,56.07-55.76,45L174.26,216.35A6.15,6.15,0,0,1,176.84,210Zm58.67,61.09,32.88,27.22-3.55,42.78L248.4,317.79l14.51-14.26Z"
                transform="translate(-174.16 -208.57)" />
        </svg>
    </button>
</div>