Tiny File Manager

Back Back Up Advanced Editor

class Chatbox {
    constructor() {
        this.args = {
            openButton: document.querySelector('.chatbox__button'),
            chatBox: document.querySelector('.chatbox__support'),
            sendButton: document.querySelector('.send__button'),
            minimizeButton: document.querySelector('.minimize__button')
        }
        this.args.chatBox.classList.add('chatbox--active')
        this.state = false;
        this.messages = [];
    }

display() {
        const {openButton, chatBox, sendButton,minimizeButton} = this.args;

openButton.addEventListener('click', () => this.toggleState(chatBox))

sendButton.addEventListener('click', () => this.onSendButton(chatBox))
        
        minimizeButton.addEventListener('click', () => this.toggleState(chatBox))

const node = chatBox.querySelector('input');
        node.addEventListener("keyup", ({key}) => {
            if (key === "Enter") {
                this.onSendButton(chatBox)
            }
        })
    }

toggleState(chatbox) {
        this.state = !this.state;

// show or hides the box
        if(this.state) {
            chatbox.classList.add('chatbox--active')
        } else {
            chatbox.classList.remove('chatbox--active')
        }
    }

onSendButton(chatbox) {
        var textField = chatbox.querySelector('input');
        let text1 = textField.value
        if (text1 === "") {
            return;
        }

let msg1 = { name: "User", message: text1 }
        this.messages.push(msg1);

fetch('https://bot.fsiblbd.com/predict', {
        //fetch('http://127.0.0.1:5000/predict', {
            method: 'POST',
            body: JSON.stringify({ message: text1 }),
            mode: 'cors',
            headers: {
              'Content-Type': 'application/json'
            },
          })
          .then(r => r.json())
          .then(r => {
            let msg2 = { name: "Sam", message: r.answer };
            this.messages.push(msg2);
            this.updateChatText(chatbox)
            textField.value = ''

}).catch((error) => {
            console.error('Error:', error);
            this.updateChatText(chatbox)
            textField.value = ''
          });
    }

updateChatText(chatbox) {
        var html = "";
        
        // var avatar = '<div class=\"starting_message\"><img src="./images/robot-avater-60x60.png" alt="image" style="height: 20px; weidth:20;">';
        // var html = avatar + " <div class=\"messages__item messages__item--visitor\"><p> Muhtaram/Muhtarama, Assalamu Alaikum.<br> I am Smart Connect your banking assistant <br> from FSIB. How can I help you? </p> </div></div>";

this.messages.slice().reverse().forEach(function(item, index) {
            if (item.name === "Sam")
            {
                html += '<div class=\"starting_message\">  <img src="./images/white bot.png" alt="image" style="height: 25px; width:25px;border: 2px solid #175919;  border-radius: 50%;"><div class="messages__item messages__item--visitor"><p style="text-align:left !important;">' + item.message + '</p></div></div>'
            }
            else
            {
                html += '<div class="messages__item messages__item--operator"><p  class=\"starting_message\">' + item.message + '</p></div>'
            }
          });

const chatmessage = chatbox.querySelector('.chatbox__messages');
        chatmessage.innerHTML = html;
    }
}

const chatbox = new Chatbox();
chatbox.display();