@foreach($chatData->sortBy('id') as $chat)
    <div class="row no-gutters mb-3 {{ $chat->from_id == \Auth::user()->id ? 'justify-content-end' : ''}}">
        <div class="col-auto p-0 d-flex flex-column">
        <div class="chat-bubble {{ $chat->from_id == \Auth::user()->id ? 'chat-bubble--right' : 'chat-bubble--left'}}">
            @if($chat->from_id == \Auth::user()->id)
            <svg width="57" height="24" viewBox="0 0 57 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M27.2572 1.06431C28.0287 0.512119 29.066 0.51212 29.8375 1.06431L55.4492 19.3963C57.2018 20.6507 56.3143 23.4153 54.159 23.4153H2.93563C0.780329 23.4153 -0.107127 20.6507 1.64549 19.3963L27.2572 1.06431Z" fill="#1ECB98"></path>
                </svg>
            @else
            <svg width="57" height="24" viewBox="0 0 57 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M27.2572 1.06431C28.0287 0.512119 29.066 0.51212 29.8375 1.06431L55.4492 19.3963C57.2018 20.6507 56.3143 23.4153 54.159 23.4153H2.93563C0.780329 23.4153 -0.107127 20.6507 1.64549 19.3963L27.2572 1.06431Z" fill="#F4F4F4"></path>
            </svg>
            @endif
            {{ $chat->message }}
        </div>
        <label class="mt-2">
           {{ \Carbon\Carbon::parse($chat->created_at)->diffForHumans()}}
        </label>
        </div>
    </div>
@endforeach