Skip to content

Commit f6b6fd4

Browse files
Chayandas07Chayandas07
authored
Merge pull request #59 from LAKSHAYBANSAL879/main
Add files via upload
2 parents 7e050f7 + ba1ac28 commit f6b6fd4

File tree

10 files changed

+1090
-0
lines changed

10 files changed

+1090
-0
lines changed

‎CHATBOT/index.css‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
font-family: 'Roboto Slab', serif;
6+
box-sizing: border-box;
7+
}
8+
body{
9+
background-color: rgb(240, 237, 235);
10+
11+
}
12+
.chatbot{
13+
background-color: rgb(249, 209, 195);
14+
right:3vw;
15+
position: fixed;
16+
bottom: 9vh;
17+
transform: scale(0.5);
18+
opacity: 0;
19+
pointer-events: none;
20+
width: 40vw;
21+
border-radius: 20px;
22+
box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
23+
0 32px 64px -48px rgba(0,0,0,0.5);
24+
padding-left: 3px;
25+
height: fit-content;
26+
padding-bottom: 20px;
27+
transform: all 1s ease-in;
28+
}
29+
.show-chatbot .chatbot{
30+
transform: scale(1);
31+
opacity: 1;
32+
pointer-events: auto;
33+
}
34+
.show-chatbot .chatbot-toggler span:last-child{
35+
opacity: 1;
36+
}
37+
.chatbot ul{
38+
list-style: none;
39+
}
40+
h2{
41+
background-color: rgba(185, 39, 238, 0.692);
42+
width: 100%;
43+
text-align: center;
44+
/* padding: 16px 0px; */
45+
height: 8vh;
46+
padding-top: 5px;
47+
font-size: 30px;
48+
49+
}
50+
.chatbot .chatbox{
51+
height: 30vw;
52+
overflow-y: auto;
53+
padding: 15px 20px 70px;
54+
}
55+
.chatbox .chat{
56+
display: flex;
57+
}
58+
.chatbot .outgoing{
59+
justify-content: flex-end;
60+
gap:2vh;
61+
margin-top: 2vh;
62+
margin-bottom: 2vh;
63+
}
64+
.chatbox .chat p{
65+
padding: 12px 16px;
66+
font-size: 20px;
67+
white-space: pre-wrap;
68+
color: white;
69+
border-radius: 10px 10px 0 10px;
70+
background: rgba(185, 39, 238, 0.692);
71+
}
72+
.chatbox .incoming p{
73+
color: black;
74+
background: ghostwhite;
75+
border-radius: 10px 10px 10px 0;
76+
}
77+
.chatbox .incoming span{
78+
height: 32px;
79+
width: 32px;
80+
color: white;
81+
background: rgba(185, 39, 238, 0.692);
82+
align-self: flex-end;
83+
text-align: center;
84+
line-height: 32px;
85+
border-radius: 4px;
86+
margin-top:1vh ;
87+
margin-right: 1vw;
88+
89+
}
90+
.chatbot .chat-input{
91+
position: absolute;
92+
height: 7vh;
93+
bottom: 0;
94+
width: 100%;
95+
background: white;
96+
padding: 5px 15px;
97+
border-top: 2px solid #ccc;
98+
display: flex;
99+
gap: 1.5vw;
100+
/* justify-content: center; */
101+
align-items: center;
102+
margin-bottom: 0.5vh;
103+
}
104+
.chat-input textarea{
105+
font-size: 20px;
106+
border: none;
107+
outline: none;
108+
width: 2vw;
109+
110+
}
111+
.chat-input span{
112+
visibility: hidden;
113+
cursor: pointer;
114+
}
115+
.chat-input textarea:valid ~span{
116+
visibility: visible;
117+
}
118+
.chatbox .chat p.error{
119+
color: #fff;
120+
background-color: rgb(234, 125, 125);
121+
}
122+
.chatbot-toggler{
123+
124+
position: fixed;
125+
right: 3vw;
126+
bottom: 3vh;
127+
color: #fff;
128+
border: none;
129+
outline: none;
130+
background: rgba(185, 39, 238, 0.692);
131+
cursor: pointer;
132+
border-radius: 50%;
133+
width: 3vw;
134+
height: 5vh;
135+
136+
display: flex;
137+
justify-content: center;
138+
align-items: center;
139+
140+
}
141+
.chatbot-toggler span{
142+
position: absolute;
143+
}
144+
.show-chatbot .chatbot-toggler span:first-child, .chatbot-toggler span:last-child{
145+
opacity: 0;
146+
}
147+
@media (max-width:969px){
148+
.chatbot{
149+
position: fixed;
150+
right: 30vw;
151+
/* bottom: 40vh; */
152+
height: fit-content;
153+
top:10vh;
154+
155+
padding-bottom: 40px;
156+
}
157+
.chatbot-toggler{
158+
position: fixed;
159+
right: 20vw;
160+
bottom: 25vh;
161+
width: 5vw;
162+
height: 5vh;
163+
164+
}
165+
.chatbox{
166+
padding-top: 20px;
167+
padding-bottom: 20px;
168+
169+
}
170+
}
171+
@media(max-width:650px){
172+
.chatbot{
173+
width: 50vw;
174+
}
175+
h2{
176+
font-size: 20px;
177+
height: fit-content;
178+
padding: 5px;
179+
width: 100%;
180+
text-align: center;
181+
}
182+
.chatbot .outgoing{
183+
justify-content: flex-end;
184+
gap:1vh;
185+
margin-top: 2vh;
186+
margin-left: 2vh;
187+
font-size: 15px;
188+
189+
}
190+
.chatbox .chat p{
191+
padding: 8px 12px;
192+
font-size: 12px;
193+
color: white;
194+
border-radius: 10px 10px 0 10px;
195+
background: rgba(185, 39, 238, 0.692);
196+
}
197+
.chatbox .incoming p{
198+
color: black;
199+
background: ghostwhite;
200+
border-radius: 10px 10px 10px 0;
201+
}
202+
.chatbox .incoming span{
203+
height: 22px;
204+
width: 22px;
205+
color: white;
206+
background: rgba(185, 39, 238, 0.692);
207+
align-self: flex-end;
208+
text-align: center;
209+
line-height: 22px;
210+
border-radius: 4px;
211+
margin-top:1vh ;
212+
margin-right: 1vw;
213+
font-size: 15px;
214+
margin-left: -2vw;
215+
}
216+
.chatbot .chat-input{
217+
position: absolute;
218+
height: 5vh;
219+
bottom: 2px;
220+
width: 95%;
221+
margin-left: 1vw;
222+
padding: 5px 15px;
223+
224+
display: flex;
225+
gap: 1.5vw;
226+
/* justify-content: center; */
227+
align-items: center;
228+
margin-bottom: 0.5vh;
229+
230+
}
231+
.chat-input textarea{
232+
font-size: 15px;
233+
border: none;
234+
outline: none;
235+
width: fit-content;
236+
/* text-align: center; */
237+
238+
}
239+
}
240+
#apiId{
241+
display: flex;
242+
justify-content: center;
243+
align-items: flex-start;
244+
flex-direction: column;
245+
margin-left: 10px;
246+
margin-top: 10px;
247+
gap: 2vh;
248+
font-size: 16px;
249+
}
250+
#apiId input{
251+
height: 4vh;
252+
border-radius: 10px;
253+
}
254+
#apiId a{
255+
text-decoration: none;
256+
color: blue;
257+
}
258+
#apiId button{
259+
border-radius: 10px;
260+
background-color: rgba(185, 39, 238, 0.692);
261+
color: #fff;
262+
padding: 10px;
263+
264+
}

‎CHATBOT/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Welcome To My Chatbot</title>
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
9+
<link rel="stylesheet" href="index.css">
10+
</head>
11+
<body>
12+
<div id="apiId">
13+
14+
<label for="apikey">ENTER YOUR API KEY HERE</label>
15+
<input type="text" name="">
16+
<button class="subit-api">Submit API Key</button>
17+
<!-- < <input type="text" name="api" id="api"> -->
18+
<h3>Generate your own API KEY BY <br><a href="https://platform.openai.com/account/api-keys">clicking here</a></h3>
19+
</div>
20+
<button class="chatbot-toggler">
21+
<span class="material-symbols-outlined">mode_comment
22+
</span>
23+
<span class="material-symbols-outlined" id="close-chat-btn">close
24+
</span>
25+
</button>
26+
<div class="chatbot">
27+
<header><h2> Welcome to Chatbot </h2></header>
28+
<ul class="chatbox">
29+
<li class="chat incoming">
30+
<span class="material-symbols-outlined">smart_toy
31+
</span>
32+
<p>Hi there &#128075; <br> Welcome to my chatbot <br>How can I help you today</p>
33+
</li>
34+
35+
</ul>
36+
<div class="chat-input">
37+
<textarea placeholder="Enter your message here ... " spellcheck="false" style="height: 5vh; width: 70%; "></textarea>
38+
<span id="send-btn" class="material-symbols-outlined">send</span>
39+
</div>
40+
<script src="index.js" defer></script>
41+
</body>
42+
</html>

‎CHATBOT/index.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
const sendChatBtn = document.querySelector(".chat-input span");
2+
const chatbox = document.querySelector(".chatbox");
3+
const chatInput = document.querySelector(".chat-input textarea");
4+
const chatbottoggler = document.querySelector(".chatbot-toggler");
5+
const closeChatBtn = document.getElementById("close-chat-btn");
6+
7+
let userMessage;
8+
const apiBox = document.querySelector("#apiId")
9+
const apiInput = document.querySelector("#apiId input")
10+
const apiButton = document.querySelector("#apiId button")
11+
12+
13+
apiButton.addEventListener("click",()=>{
14+
apikey=apiInput.value;
15+
apiBox.style.display="none";
16+
})
17+
const createChatLi = (message, className) => {
18+
const chatLi = document.createElement("li");
19+
chatLi.classList.add("chat", className);
20+
let chatContent = className === "outgoing" ? `<p>${message}</p>` : ` <span class="material-symbols-outlined">smart_toy</span><p>${message}</p>`;
21+
chatLi.innerHTML = chatContent;
22+
return chatLi;
23+
};
24+
25+
const generateResponse = (incomingChatLi) => {
26+
const apiurl = "https://api.openai.com/v1/chat/completions";
27+
const messageElement = incomingChatLi.querySelector("p");
28+
const requestOptions = {
29+
method: "POST",
30+
headers: {
31+
"Content-Type": "application/json",
32+
"Authorization": `Bearer ${apikey}`
33+
},
34+
body: JSON.stringify({
35+
model: "gpt-3.5-turbo",
36+
messages: [{ role: "user", content: userMessage }]
37+
})
38+
};
39+
fetch(apiurl, requestOptions)
40+
.then((res) => res.json())
41+
.then((data) => {
42+
console.log(data);
43+
messageElement.textContent = data.choices[0].message.content.trim();
44+
})
45+
.catch((error) => {
46+
messageElement.classList.add("error");
47+
messageElement.textContent = "Oops, something went wrong";
48+
console.log(error);
49+
})
50+
.finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
51+
};
52+
53+
const handleChat = () => {
54+
userMessage = chatInput.value.trim();
55+
if (!userMessage) return;
56+
chatbox.appendChild(createChatLi(userMessage, "outgoing"));
57+
chatbox.scrollTo(0, chatbox.scrollHeight);
58+
console.log(userMessage);
59+
chatInput.value = "";
60+
setTimeout(() => {
61+
const incomingChatLi = createChatLi("Thinking ... Please Wait!", "incoming");
62+
chatbox.appendChild(incomingChatLi);
63+
chatbox.scrollTo(0, chatbox.scrollHeight);
64+
generateResponse(incomingChatLi);
65+
}, 600);
66+
};
67+
68+
chatbottoggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
69+
sendChatBtn.addEventListener("click", handleChat);
70+

0 commit comments

Comments
 (0)