-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
92 lines (80 loc) · 3.1 KB
/
index.js
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
const chatLog = document.getElementById('chat-log'),
userInput = document.getElementById('user-input'),
sendButton = document.getElementById('send-button'),
buttonIcon = document.getElementById('button-icon'),
info = document.querySelector('.info');
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
sendMessage();
}
});
function sendMessage() {
const message = userInput.value.trim();
if (message === '') {
return;
}
else if (message === 'developer') {
userInput.value = '';
appendMessage('user', message);
setTimeout(() => {
appendMessage('bot', 'Coder Ayub_dev uni telegramda kuzating');
buttonIcon.classList.add('fa-solid', 'fa-paper-plane');
buttonIcon.classList.remove('fas', 'fa-spinner', 'fa-pulse');
}, 1000);
return;
}
// else if none of above
// appends users message to screen
appendMessage('user', message);
userInput.value = '';
const url = 'https://chatgpt53.p.rapidapi.com/';
const options = {
method: 'POST',
headers: {
'content-type': 'application/json',
'X-RapidAPI-Key': '418472099cmsh024ea385d214dbep1a024ajsn501da81b20be',
'X-RapidAPI-Host': 'chatgpt53.p.rapidapi.com'
},
body: `{"messages":[{"role":"user","content":"${message}"}]}`
};
fetch('https://chatgpt53.p.rapidapi.com/', options).then((response) => response.json()).then((response) => {
appendMessage('bot',response.choices[0].message.content);
// console.log(response);
buttonIcon.classList.add('fa-solid', 'fa-paper-plane');
buttonIcon.classList.remove('fas', 'fa-spinner', 'fa-pulse');
})
.catch((error) => {
if (error.name === 'TypeError') {
appendMessage('bot', "response");
buttonIcon.classList.add('fa-solid', 'fa-paper-plane');
buttonIcon.classList.remove('fas', 'fa-spinner', 'fa-pulse');
}
});
}
function appendMessage(sender, message) {
info.style.display = "none";
// change send button icon to loading using fontawesome
buttonIcon.classList.remove('fa-solid', 'fa-paper-plane');
buttonIcon.classList.add('fas', 'fa-spinner', 'fa-pulse');
const messageElement = document.createElement('div');
const iconElement = document.createElement('div');
const chatElement = document.createElement('div');
const icon = document.createElement('i');
chatElement.classList.add("chat-box");
iconElement.classList.add("icon");
messageElement.classList.add(sender);
messageElement.innerText = message;
if (sender === 'user') {
icon.classList.add('fa-regular', 'fa-user');
iconElement.setAttribute('id', 'user-icon');
} else {
icon.classList.add('fa-solid', 'fa-robot');
iconElement.setAttribute('id', 'bot-icon');
}
iconElement.appendChild(icon);
chatElement.appendChild(iconElement);
chatElement.appendChild(messageElement);
chatLog.appendChild(chatElement);
chatLog.scrollTo = chatLog.scrollHeight;
}