static/chatbot.js

$(document).ready(function() {
    // Initialize variables
    var $chatContainer = $('.chat-container');
    var $chatHeader = $('.chat-header');
    var $chatBody = $('.chat-body');
    var $chatInput = $('.chat-input');
    var $input = $('.chat-input input');
    var $submit = $('.chat_submit');
    var session_id = '';
    $chatBody.children().each(function() {
        $(this).addClass('chat-message');
    });
    const buttonLabels = ["What is Makerlab?", "What is 3D printing?",
        "Who are the founders of Makerlab?", "What are the 3D printing prices at Makerlab?",
        "How can I host a birthday at Makerlab?", "Can I book an appointment at Makerlab?",
        "Tell me about softwares used to create 3D printing designs", "Hi, I am bob. Tell me when Makerlab was founded.",
        "Can I get my custom designs 3D printed at Makerlab?", "Can I host a private event at Makerlab?",
        "Does Makerlab host any workshop?", "When is Makerlab open?", "How can I contact the Makerlab Team?"];


    // Initialize SocketIO connection
    var socket = io.connect('https://' + document.domain + ':' + location.port);
    const container = document.getElementById("button-container");


    for (let i = 0; i < buttonLabels.length; i++) {

        const button = document.createElement("button");
        button.innerHTML = buttonLabels[i];
        button.setAttribute("class", "queries");
        button.setAttribute("id", `button-${i}`);
        button.style.margin = "5px";
        container.appendChild(button);
    }
    scrollButtons();


    // Function to send message to Flask-SocketIO app
    function sendMessage(message) {
        console.log("message: " + message )
        socket.emit('message', {'question': message});
    }

    // Function to display message
    function displayMessage(message, isUser, hasHtml) {
        var $message = $('<div>').addClass('chat-message round');
        if (hasHtml) {
            $messageText = $('<p>').html(message);
        } else {
            $messageText = $('<p>').html(message.replace(/(https?:\/\/[^\s,]+)/g, '<a href="$1" target="_blank">$1</a>').replace(/(SOURCES:)/, '<br>$1'));
        }
        // var $messageText = $('<p>').html(message.replace(/(https?:\/\/[^\s,]+)/g, '<a href="$1">$1</a>'));

        $message.append($messageText);
        if (isUser) {
            $message.addClass('user');
        } else {
            $message.addClass('bot')
        }
        if ($chatBody) {
            $chatBody.append($message);
            if ($chatBody[0]) {
                $chatBody.animate({scrollTop: $chatBody[0].scrollHeight}, 300);
            }
        } else {
            $('.chat-container').append($message);
            $('.chat-container').animate({scrollTop: 0}, 300);
        }
    }


    socket.on('response', function(data) {
        console.log("Received response: " + data.response)
        var response = data.response;
        displayMessage(response, false);
    });


    // Send message on submit
    $submit.click(function(event) {
        event.preventDefault();
        var message = $input.val().trim();
        console.log("Submit clicked: " + message)
        if (message !== '') {
            displayMessage(message, true);
            sendMessage(message);
            $input.val('');
        }
    });

    // Send message on enter key press
    $input.keydown(function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            $submit.click();
        }
    });

    // Initial message
    displayMessage('Learn about <a href="https://makerlab.illinois.edu/" target="_blank">Makerlab</a>', false, true);

    // Function to minimize the widget
    function minimizeWidget() {
        $chatContainer.addClass('minimized');
        $chatHeader.hide();
        $chatBody.hide()
        $chatInput.hide();
        $chatContainer.append('<div class="chat-bot-icon"><i class="fa fa-android"></i></div>');
    }

    // Function to maximize the widget
    function maximizeWidget() {
        $chatContainer.removeClass('minimized');
        $chatBody.show()
        $chatHeader.show();
        $chatInput.show();
        $('.chat-bot-icon').remove();
    }

    // Minimize the widget on click of close button
    $chatHeader.find('.chat-close').click(function() {
        minimizeWidget();
    });

    // Maximize the widget on click of chat-bot-icon
    $chatContainer.on('click', '.chat-bot-icon', function() {
        maximizeWidget();
    });

    // Add event listener to each button
    $('.queries').click(function() {
        // Set the value of the input field to the text content of the clicked button
        $('input[type="text"]').val($(this).text());
    });

    function scrollButtons() {
        var container = document.getElementById("button-container");
        var buttons = container.querySelectorAll(".queries");
        var current = 0;

        var scrollInterval = setInterval(function() {
            buttons[current].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
            current = (current + 1) % buttons.length;
        }, 1000);

        container.addEventListener("mouseenter", function() {
            clearInterval(scrollInterval);
        });

        container.addEventListener("mouseleave", function() {
            scrollInterval = setInterval(function() {
                buttons[current].scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
                current = (current + 1) % buttons.length;
            }, 1000);
        });
    }


});