wecuro_blog/application/modules/onboarding/views/onboarding-chat.php

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> -->
<!-- <link rel="stylesheet" href="chatcss.css"> -->
<?php //pre($chat); ?>
<section class="msger">
    <header class="msger-header">
        <div class="msger-header-title">
        <i class="fas fa-comment-alt"></i> Chat
        </div>
        <div class="msger-header-options">
            <!-- <span><i class="fas fa-cog"></i></span> -->
        </div>
    </header>
    
    <main class="msger-chat">
        <div class="msg left-msg">
            <div
                class="msg-img"
                style="background-image: url(<?php echo base_url(); ?>common/app-assets/images/logo/logo.png)"
            >
            </div>
            <div class="msg-bubble">
                <div class="msg-info">
                <div class="msg-info-name"><?=$chat['bot']['name']?></div>
                <!-- <div class="msg-info-time"><?=$chat['bot']['time']?></div> -->
                </div>
        
                <div class="msg-text">
                    <?=$chat['bot']['msg']?>
                </div>
               
                <div class="msg-text">
                    <?php foreach($chat['bot']['question'] as $question){ ?> 
                    <a href='javascript:void(0)' onclick='msgOptions(this)' qid="<?=$question['id']?>" class='btn  msger-options msg_fix'><?=$question['question']?></a>
                    <?php } ?>
                </div>
            </div>
        </div>
    
        <!-- <div class="msg right-msg">
            <div
                class="msg-img"
                style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"
            ></div>
    
            <div class="msg-bubble">
                <div class="msg-info">
                <div class="msg-info-name"><?=$chat['user']['name']?></div>
                <div class="msg-info-time"><?=$chat['user']['time']?></div>
                </div>
        
                <div class="msg-text">
                    <?=$chat['user']['msg']?>
                </div>
                <div class="msg-text">
                    <?php foreach($chat['user']['question'] as $question){ ?> 
                    <a href='#' target='blank' onclick='msgOptions(this)'  class='btn btn-primary msger-options'><?=$question['question']?></a>
                    <?php } ?>
                </div>
            </div>
        </div> -->
    </main>
    
    <form class="msger-inputarea">
        <input style="display: none;" type="text" class="msger-id">
        <input style="display: none;" type="text" class="msger-input">
        <button style="display: none;"  type="submit" class="msger-send-btn">Send</button>
    </form>
</section>
<script>
    //const vid='<?=$vid?>';
    const videoId = <?=$vid?>;
    const msgerForm = get(".msger-inputarea");
    const msgerInput = get(".msger-input");
    const msgerId = get(".msger-id");
    const msgerChat = get(".msger-chat");
    const msgerButton = get(".msger-send-btn");

    // Icons made by Freepik from www.flaticon.com
    //const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
    const BOT_IMG = "<?php echo base_url(); ?>common/app-assets/images/logo/logo.png";
    const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
    const BOT_NAME = "WeCuro";
    const PERSON_NAME = "<?=$user->fname?>";

    msgerForm.addEventListener("submit", event => {
        event.preventDefault();
        const msgText = msgerInput.value;
        const msgId = msgerId.value;
        if (!msgText) return;
        appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
        msgerInput.value = "";
        msgerId.value = "";

        botResponse(msgId);
    });


    var elements = document.getElementsByClassName("msger-options");

    function msgOptions(_this)
    {
        msgerInput.value = _this.innerHTML;
        msgerId.value = $(_this).attr('qid');
        msgerButton.click();
    }


    function appendMessage(name, img, side, text) {
        const msgHTML = `
            <div class="msg ${side}-msg">
            <div class="msg-img" style="background-image: url(${img})"></div>

            <div class="msg-bubble">
                <div class="msg-info">
                <div class="msg-info-name">${name}</div>
                <div class="msg-info-time">${formatDate(new Date())}</div>
                </div>

                <div class="msg-text">${text}</div>
            </div>
            </div>
        `;

        msgerChat.insertAdjacentHTML("beforeend", msgHTML);
        msgerChat.scrollTop += 500;
    }

    function botResponse(inpMsg) {
        //console.log(inpMsg);
        var timePlay = $(".vjs-current-time-display").html();
        //console.log(timePlay);
        $.post('<?php echo base_url(); ?>/onboarding/getAnswer/',
                {
                    '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>',
                    'questionId':inpMsg,
                    'timePlay':timePlay,
                    'videoId':videoId, 
                },
                function (msg){
                    //console.log(msg);
                    
                    var output = JSON.parse(msg);
                    var text=''+output.answer+'<br>';
                    if(output.child_questions){
                        text+='Select your next question.<br>';
                        $.each(output.child_questions, function(key,val) {
                            text+="<a href='javascript:void(0)' onclick='msgOptions(this)' qid="+val.id+" class='btn  msger-options msg_fix'>"+val.question+"</a>"; 
                        });
                    }
                    appendMessage(BOT_NAME, BOT_IMG, "left", text);
                    
                }
        );
    }

    // Utils
    function get(selector, root = document) {
        return root.querySelector(selector);
    }

    function formatDate(date) {
        const h = "0" + date.getHours();
        const m = "0" + date.getMinutes();
        return `${h.slice(-2)}:${m.slice(-2)}`;
    }

    function random(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

</script>