[livechat] frontend

.php

    <div class="row" style="height: 470px;">
        <div class="col col-md-4 h-100 overflow-auto overflow-hidden-scroll border-end pe-0">
            <div class="list-group" id="list-tab" role="tablist">
                <?php foreach ($userDiscussions as $userDiscussion) :
                    /** @var WP_User $second_member */
                    $second_member = $userDiscussion->member_1 == $user
                        ? $userDiscussion->member_2
                        : $userDiscussion->member_1;

                    require_once('includes/repositories/repository-message.php');
                    $messageRepo = new MessageRepository();
                    if ($userDiscussion->id != null) {
                        /** @var Message $latestMessage */
                        $latestMessage = $messageRepo->getAllForDiscussion($userDiscussion->id, true)[0];
                    }

                    $profile_photo = $second_member->profile_photo != ''
                        ? get_site_url() . '/' . $second_member->profile_photo
                        : 'http://www.gravatar.com/avatar/' . md5($second_member->user_email) . '?s=150&d=retro&r=g'
                ?>
                    <a class="list-group-item list-group-item-action d-flex align-items-center py-2 <?= $userDiscussion == $userDiscussions[0] ? 'active' : '' ?>" id="list-discussion-<?= $userDiscussion->id  ?>-list" data-bs-toggle="list" href="#list-discussion-<?= $userDiscussion->id ?>" role="tab" aria-controls="list-discussion-<?= $userDiscussion->id ?>">
                        <div class="flex-shrink-0">
                            <img class="company_logo rounded-circle" src="<?= $profile_photo ?>" style="object-fit: cover;" alt="Profile photo">
                        </div>
                        <div class="d-none d-md-block ms-3 flex-grow-1 align-items-center" style="min-width: 0;">
                            <div class="font-weight-bold h6"><?= $second_member->display_name ?></div>
                            <?php if (isset($latestMessage)) : ?>
                                <span class="d-block text-truncate" id="latest-message-<?= $userDiscussion->id ?>">
                                    <?= $latestMessage->sender == $second_member
                                        ? $latestMessage->content
                                        : "<span style='font-style: italic;'>Vous: </span>" . $latestMessage->content
                                    ?>
                                </span>
                            <?php endif; ?>
                        </div>

                        <?php if ($userDiscussion->id != null && $messageRepo->getUnreadMessagesCount($userDiscussion->id, $user->ID) != null) : ?>
                            <span id="unread-number-<?= $userDiscussion->id ?>" class="d-none d-md-block badge bg-warning text-dark rounded-pill ms-2"><?= $messageRepo->getUnreadMessagesCount($userDiscussion->id, $user->ID) ?></span>
                        <?php endif; ?>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="col-9 col-md-8 overflow-hidden">
            <div class="tab-content" style="height: 480px;" id="nav-tabContent">
                <?php foreach ($userDiscussions as $userDiscussion) : ?>
                    <div class="tab-pane fade <?= $userDiscussion === $userDiscussions[0] ? 'show active' : '' ?> h-100 overflow-auto overflow-hidden-scroll" id="list-discussion-<?= $userDiscussion->id ?>" role="tabpanel" aria-labelledby="list-discussion-<?= $userDiscussion->id ?>-list">
                        <div id="discussion-<?= $userDiscussion->id ?>" class="h-100">
                            <div class="alert alert-info small mx-5 p-1 text-center">Debut de conversation</div>
                            <?php
                            $messages = $messageRepo->getAllForDiscussion($userDiscussion->id ?? 0) ?? [];
                            foreach ($messages as $message) :
                            ?>
                                <div class="talk-bubble <?= $message->sender == $user ? 'talk-bubble-right float-end' : 'talk-bubble-left float-start' ?> w-100">
                                    <?= $message->content ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                        <div class="w-100 position-absolute bottom-0">
                            <?= do_shortcode("[form-message discussion='{$userDiscussion->id}']"); ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>