Hugging Face's logo

Spaces:
yoeldcd
/
COBY
Running

App Files Community
COBY
File size: 3,572 Bytes 
6c4099c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 

var xhr;
var outputArea;
var inputComand;

var bubleId = 0;
var reqId = 0;

const bubbleTypes = {"message": "message", "sended": "sended", "received": "received", "error": "error"};

function main() {

    xhr = new XMLHttpRequest();
    outputArea = document.getElementById('outputArea');
    inputComand = document.getElementById('inputComand');

    // add keyboard listener
    window.addEventListener('keyup', function (e) {
        (e.key === 'Enter') && send(inputComand.value);
    });

    // add button action listeners
    document.querySelector('#sendButton').addEventListener('click', send);
    document.querySelector('#clearButton').addEventListener('click', clearChat);
    
    addChatBuble("EMPECEMOS", "message");
}

function makeSendHandler(chatBubble) {

    xhr.onload = function (e) {
        let response = xhr.responseText;

        chatBubble.getElementsByClassName('statusIcon')[0].className = 'statusIcon statusChecked';

        if (response.length < 1) {
            send();
            return;
        } else {
            addChatBuble(xhr.responseText, bubbleTypes.received);
        }

    };

    xhr.onerror = function (e) {

        chatBubble.getElementsByClassName('statusIcon')[0].className = 'statusIcon statusError';
        addChatBuble(e.type + "", bubbleTypes.error);
    };

}

function send(inputComandText) {

    inputComandText || (inputComandText = inputComand.value);
    inputComand.value = "";

    let chatBubble;

    // predict next's
    if (inputComandText.length === 0) {
        sendRequest("n 200");
        return;
    }

    // delete all bubbles
    if (inputComandText.includes("cls")) {
        clearChat();
        return;
    }

    // send input context
    chatBubble = addChatBuble(inputComandText, bubbleTypes.sended);
    makeSendHandler(chatBubble);
    sendRequest(inputComandText);

}

function sendRequest(requestComandText) {

    reqId = new Date().getTime();
    xhr.open("GET", document.location.origin + "?cmd=\"" + requestComandText + "\"&reqId=" + reqId);
    xhr.send();

}

function addChatBuble(message, type) {

    let chatBubble;
    let messageBox;
    let controlBox;
    let deleteBtn;
    let statusIcon;


    type = (type || bubbleTypes.sended);

    // initializes chatBubble DOM elements
    chatBubble = document.createElement('div');
    chatBubble.className = "chatBubble " + bubbleTypes[type];
    chatBubble.id = "bubble" + bubleId++;

    messageBox = document.createElement('spam');
    messageBox.innerText = message;
    messageBox.className = "messageBox";

    controlBox = document.createElement('spam');
    controlBox.className = 'controlBox';

    // make chatbuble control DOM elements
    deleteBtn = document.createElement('spam');
    deleteBtn.className = "deleteButton";
    deleteBtn.onclick = function () {
        outputArea.removeChild(chatBubble);
    };
    
    controlBox.appendChild(deleteBtn);
    
    if (type === bubbleTypes.sended) {
        // add message status icon
        statusIcon = document.createElement('spam');
        statusIcon.className = 'statusIcon statusSended';
        controlBox.appendChild(statusIcon);
    }

    // make chatBubble DOM
    chatBubble.appendChild(messageBox);
    chatBubble.appendChild(controlBox);

    outputArea.appendChild(chatBubble);

    // slide to lats bubble
    document.location = "#" + chatBubble.id;
    inputComand.focus();

    return chatBubble;
}

function clearChat() {
    outputArea.innerHTML = "";
    sendRequest("cls");
    addChatBuble("EMPECEMOS\n DE NUEVO", "message");
}