templates/chat.html

{% extends 'base.html' %}

{% block title %}CA Waterboard Chatbot{% endblock %}

{% block content %}
    <!-- partial:index.partial.html -->
    <section class="msger">
        <header class="msger-header">
            <div class="msger-header-title">
                <i class="fas fa-bug"></i> Chatbot <i class="fas fa-bug"></i>
            </div>

            {% if session.logged_in %}
                <a href="{{ url_for('logout') }}" class="msger-logout-btn">Logout</a>
            {% endif %}
        </header>

        <main class="msger-chat">
            <div class="msg left-msg">
                <div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/327/327779.svg)">
                </div>

                <div class="msg-bubble">
                    <div class="msg-info">
                        <div class="msg-info-name">Chatbot</div>
                        <div class="msg-info-time">12:45</div>
                    </div>

                    <div class="msg-text">
                        Hi, welcome to ChatBot! Go ahead and send me a message. 😄
                    </div>
                </div>
            </div>

        </main>

        <form class="msger-inputarea" action="/" method="POST">
            <input type="text" class="msger-input" id="textInput" placeholder="Enter your message...">
            <button type="submit" class="msger-send-btn">Send</button>
        </form>
    </section>
    <!-- partial -->
    <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
    <script>

        const msgerForm = get(".msger-inputarea");
        const msgerInput = get(".msger-input");
        const msgerChat = get(".msger-chat");


        // Icons made by Freepik from www.flaticon.com
        const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
        const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
        const BOT_NAME = "    ChatBot";
        const PERSON_NAME = "You";

        msgerForm.addEventListener("submit", event => {
            event.preventDefault();

            const msgText = msgerInput.value;
            if (!msgText) return;

            appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
            msgerInput.value = "";
            botResponse(msgText);
        });

        function appendMessage(name, img, side, text) {
            //   Simple solution for small apps
            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(rawText) {

            // Bot Response
            $.get("/chat", { msg: rawText }).done(function (data) {
                console.log(rawText);
                console.log(data);
                const msgText = data;
                appendMessage(BOT_NAME, BOT_IMG, "left", msgText);

            });

        }


        // 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)}`;
        }
    </script>

{% endblock %}