Skip to content

Commit 64a2a40

Browse files
Husan7Husan7
authored
CHAT BOT ISSUE #1129 
1 parent 4b7aeb1 commit 64a2a40

File tree

3 files changed

+317
-0
lines changed

3 files changed

+317
-0
lines changed

‎Chatbot/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
3+
<html lang="en" dir="ltr">
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Chatbot</title>
7+
<link rel="stylesheet" href="style.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<!-- Google Fonts Link For Icons -->
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
12+
<script src="script.js" defer></script>
13+
</head>
14+
<body>
15+
<button class="chatbot-toggler">
16+
<span class="material-symbols-rounded">mode_comment</span>
17+
<span class="material-symbols-outlined">close</span>
18+
</button>
19+
<div class="chatbot">
20+
<header>
21+
<h2>Chatbot</h2>
22+
<span class="close-btn material-symbols-outlined">close</span>
23+
</header>
24+
<ul class="chatbox">
25+
<li class="chat incoming">
26+
<span class="material-symbols-outlined">smart_toy</span>
27+
<p>Hi there 👋<br>How can I help you today?</p>
28+
</li>
29+
</ul>
30+
<div class="chat-input">
31+
<textarea placeholder="Enter a message..." spellcheck="false" required></textarea>
32+
<span id="send-btn" class="material-symbols-rounded">send</span>
33+
</div>
34+
</div>
35+
36+
</body>
37+
</html>

‎Chatbot/script.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
const chatbotToggler = document.querySelector(".chatbot-toggler");
2+
const closeBtn = document.querySelector(".close-btn");
3+
const chatbox = document.querySelector(".chatbox");
4+
const chatInput = document.querySelector(".chat-input textarea");
5+
const sendChatBtn = document.querySelector(".chat-input span");
6+
7+
let userMessage = null; // Variable to store user's message
8+
const API_KEY = "PASTE-YOUR-API-KEY"; // Paste your API key here
9+
const inputInitHeight = chatInput.scrollHeight;
10+
11+
const createChatLi = (message, className) => {
12+
// Create a chat <li> element with passed message and className
13+
const chatLi = document.createElement("li");
14+
chatLi.classList.add("chat", `${className}`);
15+
let chatContent = className === "outgoing" ? `<p></p>` : `<span class="material-symbols-outlined">smart_toy</span><p></p>`;
16+
chatLi.innerHTML = chatContent;
17+
chatLi.querySelector("p").textContent = message;
18+
return chatLi; // return chat <li> element
19+
}
20+
21+
const generateResponse = (chatElement) => {
22+
const API_URL = "https://api.openai.com/v1/chat/completions";
23+
const messageElement = chatElement.querySelector("p");
24+
25+
// Define the properties and message for the API request
26+
const requestOptions = {
27+
method: "POST",
28+
headers: {
29+
"Content-Type": "application/json",
30+
"Authorization": `Bearer ${API_KEY}`
31+
},
32+
body: JSON.stringify({
33+
model: "gpt-3.5-turbo",
34+
messages: [{role: "user", content: userMessage}],
35+
})
36+
}
37+
38+
// Send POST request to API, get response and set the reponse as paragraph text
39+
fetch(API_URL, requestOptions).then(res => res.json()).then(data => {
40+
messageElement.textContent = data.choices[0].message.content.trim();
41+
}).catch(() => {
42+
messageElement.classList.add("error");
43+
messageElement.textContent = "Oops! Something went wrong. Please try again.";
44+
}).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
45+
}
46+
47+
const handleChat = () => {
48+
userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace
49+
if(!userMessage) return;
50+
51+
// Clear the input textarea and set its height to default
52+
chatInput.value = "";
53+
chatInput.style.height = `${inputInitHeight}px`;
54+
55+
// Append the user's message to the chatbox
56+
chatbox.appendChild(createChatLi(userMessage, "outgoing"));
57+
chatbox.scrollTo(0, chatbox.scrollHeight);
58+
59+
setTimeout(() => {
60+
// Display "Thinking..." message while waiting for the response
61+
const incomingChatLi = createChatLi("Thinking...", "incoming");
62+
chatbox.appendChild(incomingChatLi);
63+
chatbox.scrollTo(0, chatbox.scrollHeight);
64+
generateResponse(incomingChatLi);
65+
}, 600);
66+
}
67+
68+
chatInput.addEventListener("input", () => {
69+
// Adjust the height of the input textarea based on its content
70+
chatInput.style.height = `${inputInitHeight}px`;
71+
chatInput.style.height = `${chatInput.scrollHeight}px`;
72+
});
73+
74+
chatInput.addEventListener("keydown", (e) => {
75+
// If Enter key is pressed without Shift key and the window
76+
// width is greater than 800px, handle the chat
77+
if(e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
78+
e.preventDefault();
79+
handleChat();
80+
}
81+
});
82+
83+
sendChatBtn.addEventListener("click", handleChat);
84+
closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
85+
chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));

‎Chatbot/style.css‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
/* Import Google font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
box-sizing: border-box;
8+
font-family: "Poppins", sans-serif;
9+
}
10+
body {
11+
background: #E3F2FD;
12+
}
13+
.chatbot-toggler {
14+
position: fixed;
15+
bottom: 30px;
16+
right: 35px;
17+
outline: none;
18+
border: none;
19+
height: 50px;
20+
width: 50px;
21+
display: flex;
22+
cursor: pointer;
23+
align-items: center;
24+
justify-content: center;
25+
border-radius: 50%;
26+
background: #724ae8;
27+
transition: all 0.2s ease;
28+
}
29+
body.show-chatbot .chatbot-toggler {
30+
transform: rotate(90deg);
31+
}
32+
.chatbot-toggler span {
33+
color: #fff;
34+
position: absolute;
35+
}
36+
.chatbot-toggler span:last-child,
37+
body.show-chatbot .chatbot-toggler span:first-child {
38+
opacity: 0;
39+
}
40+
body.show-chatbot .chatbot-toggler span:last-child {
41+
opacity: 1;
42+
}
43+
.chatbot {
44+
position: fixed;
45+
right: 35px;
46+
bottom: 90px;
47+
width: 420px;
48+
background: #fff;
49+
border-radius: 15px;
50+
overflow: hidden;
51+
opacity: 0;
52+
pointer-events: none;
53+
transform: scale(0.5);
54+
transform-origin: bottom right;
55+
box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
56+
0 32px 64px -48px rgba(0,0,0,0.5);
57+
transition: all 0.1s ease;
58+
}
59+
body.show-chatbot .chatbot {
60+
opacity: 1;
61+
pointer-events: auto;
62+
transform: scale(1);
63+
}
64+
.chatbot header {
65+
padding: 16px 0;
66+
position: relative;
67+
text-align: center;
68+
color: #fff;
69+
background: #724ae8;
70+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
71+
}
72+
.chatbot header span {
73+
position: absolute;
74+
right: 15px;
75+
top: 50%;
76+
display: none;
77+
cursor: pointer;
78+
transform: translateY(-50%);
79+
}
80+
header h2 {
81+
font-size: 1.4rem;
82+
}
83+
.chatbot .chatbox {
84+
overflow-y: auto;
85+
height: 510px;
86+
padding: 30px 20px 100px;
87+
}
88+
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
89+
width: 6px;
90+
}
91+
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
92+
background: #fff;
93+
border-radius: 25px;
94+
}
95+
.chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
96+
background: #ccc;
97+
border-radius: 25px;
98+
}
99+
.chatbox .chat {
100+
display: flex;
101+
list-style: none;
102+
}
103+
.chatbox .outgoing {
104+
margin: 20px 0;
105+
justify-content: flex-end;
106+
}
107+
.chatbox .incoming span {
108+
width: 32px;
109+
height: 32px;
110+
color: #fff;
111+
cursor: default;
112+
text-align: center;
113+
line-height: 32px;
114+
align-self: flex-end;
115+
background: #724ae8;
116+
border-radius: 4px;
117+
margin: 0 10px 7px 0;
118+
}
119+
.chatbox .chat p {
120+
white-space: pre-wrap;
121+
padding: 12px 16px;
122+
border-radius: 10px 10px 0 10px;
123+
max-width: 75%;
124+
color: #fff;
125+
font-size: 0.95rem;
126+
background: #724ae8;
127+
}
128+
.chatbox .incoming p {
129+
border-radius: 10px 10px 10px 0;
130+
}
131+
.chatbox .chat p.error {
132+
color: #721c24;
133+
background: #f8d7da;
134+
}
135+
.chatbox .incoming p {
136+
color: #000;
137+
background: #f2f2f2;
138+
}
139+
.chatbot .chat-input {
140+
display: flex;
141+
gap: 5px;
142+
position: absolute;
143+
bottom: 0;
144+
width: 100%;
145+
background: #fff;
146+
padding: 3px 20px;
147+
border-top: 1px solid #ddd;
148+
}
149+
.chat-input textarea {
150+
height: 55px;
151+
width: 100%;
152+
border: none;
153+
outline: none;
154+
resize: none;
155+
max-height: 180px;
156+
padding: 15px 15px 15px 0;
157+
font-size: 0.95rem;
158+
}
159+
.chat-input span {
160+
align-self: flex-end;
161+
color: #724ae8;
162+
cursor: pointer;
163+
height: 55px;
164+
display: flex;
165+
align-items: center;
166+
visibility: hidden;
167+
font-size: 1.35rem;
168+
}
169+
.chat-input textarea:valid ~ span {
170+
visibility: visible;
171+
}
172+
173+
@media (max-width: 490px) {
174+
.chatbot-toggler {
175+
right: 20px;
176+
bottom: 20px;
177+
}
178+
.chatbot {
179+
right: 0;
180+
bottom: 0;
181+
height: 100%;
182+
border-radius: 0;
183+
width: 100%;
184+
}
185+
.chatbot .chatbox {
186+
height: 90%;
187+
padding: 25px 15px 100px;
188+
}
189+
.chatbot .chat-input {
190+
padding: 5px 15px;
191+
}
192+
.chatbot header span {
193+
display: block;
194+
}
195+
}

0 commit comments

Comments
 (0)