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 the Makerlab?", "What is 3D printing?",
        "Who are the founders of Makerlab?", "What are the prices for printing?",
        "How can I host a birthday at Makerlab?", "Can I book an appointment at Makerlab?",
        "Tell me about software used to create 3D printing designs",
        "Can I get my custom designs 3D printed at Makerlab?", "Can I host a private event at Makerlab?",
        "Does Makerlab host any workshops?", "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);
    displayMessage('This bot is powered by Gpt 3.5 and thus may get things wrong. You can click on any of the questions on the left and they will get copied to this window. You can also type in a question here.  If you find the bot useful or have feedback on improving it, drop us a line at <a href="https://makerlab.illinois.edu/contact" target="_blank">Makerlab - Contact</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);
        });
    }


});