diff --git a/donation_website/main.js b/donation_website/main.js
index 5b08768..b15565b 100644
--- a/donation_website/main.js
+++ b/donation_website/main.js
@@ -15,6 +15,7 @@ for (let x = 0; x < menuTrigger.length; x++){
closeTrigger[x].addEventListener('click', closeMenu);
overlay.addEventListener('click', closeMenu)
}
+
//submenu
const submenu = document.querySelectorAll('.sub-trigger');
submenu.forEach((menu) => menu.addEventListener('click', toggle));
@@ -25,6 +26,7 @@ const submenu = document.querySelectorAll('.sub-trigger');
this.classList.toggle('expand')
}
}
+
//progress
function progressBar(progressBarNum, progressStart, progressEnd, speed) {
@@ -76,6 +78,7 @@ const swiper = new Swiper('.swiper', {
prevEl: '.button-prev',
},
});
+
//accordion
const questions = document.querySelectorAll('.question-answ');
questions.forEach(function(question){
@@ -88,4 +91,79 @@ const questions = document.querySelectorAll('.question-answ');
})
question.classList.toggle('show-text');
})
- })
+ })
+
+//chatbot
+const sendBtn = document.querySelector(".chat-input span");
+const chatInput = document.querySelector(".chat-input textarea");
+const chatbox = document.querySelector(".chatbox");
+const chatbotToggler = document.querySelector(".chatbot-toggler");
+const chatbotCloseBtn = document.querySelector(".chatbot-close-btn");
+
+let userMessage;
+const api_key = "API KEY";
+const inputHeight = chatInput.scrollHeight;
+
+const createChat = (message, className) => {
+ const chat_ = document.createElement("li");
+ chat_.classList.add("chat", className);
+ let chatContent = className === "outgoing" ? `
`:`
`;
+ chat_.innerHTML = chatContent;
+ chat_.querySelector("p").textContent = message;
+ return chat_;
+}
+const generateRespond = (incomingChat_) => {
+ const api_url = "https://api.openai.com/v1/chat/completions";
+ const messageElement = incomingChat_.querySelector("p");
+
+ const requestOptions = {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${api_key}`
+ },
+ body:JSON.stringify({
+ model: "gpt-3.5-turbo",
+ messages: [{role: "user", content: userMessage}]
+ })
+ }
+ fetch(api_url, requestOptions).then(res => res.json()).then(data => {
+ messageElement.textContent = data.choices[0].message.content;
+ }).catch((error) => {
+ messageElement.classList.add("error");
+ messageElement.textContent = "Something went wrong, please try again!";
+ }).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight));
+}
+
+const handleChat = () =>{
+ userMessage = chatInput.value.trim();
+ if(!userMessage) return;
+ chatInput.value = "";
+ chatInput.style.height = `${inputHeight}px`
+
+ chatbox.appendChild(createChat(userMessage, "outgoing"));
+ chatbox.scrollTo(0, chatbox.scrollHeight);
+
+ setTimeout (() => {
+ const incomingChat_ = createChat("Typing...", "incoming")
+ chatbox.appendChild(incomingChat_);
+ chatbox.scrollTo(0, chatbox.scrollHeight);
+ generateRespond(incomingChat_);
+ }, 600);
+}
+chatInput.addEventListener("input", () => {
+ chatInput.style.height = `${inputHeight}px`
+ chatInput.style.height = `${chatInput.scrollHeight}px`
+});
+
+chatInput.addEventListener("keydown", (x) => {
+ if(x.key === "Enter" && !x.shiftKey && window.innerWidth > 800){
+ x.preventDefault();
+ handleChat();
+ }
+});
+
+sendBtn.addEventListener("click", handleChat);
+chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
+chatbotCloseBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
+
diff --git a/donation_website/style.css b/donation_website/style.css
index 8ff0a31..0951a9b 100644
--- a/donation_website/style.css
+++ b/donation_website/style.css
@@ -477,6 +477,7 @@ form.search i{
}
.content-1-text p{
margin: 0.5rem 0 2.5rem;
+ color: #625a71;
text-align: justify;
}
.content-1-text .primary-btn:hover{
@@ -679,6 +680,11 @@ form.search i{
cursor: pointer;
align-items: center;
justify-content: center;
+ transition: all 0.3s ease;
+ z-index: 1000;
+}
+.show-chatbot .chatbot-toggler{
+ transform: rotate(90deg);
}
.chatbot-toggler span{
position: absolute;
@@ -700,6 +706,8 @@ form.search i{
overflow: hidden;
box-shadow: 0 0 120px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
transform: scale(0.5);
+ transition: all 0.1s ease;
+ transform-origin: bottom right;
opacity: 0;
pointer-events: none;
z-index: 1000;
@@ -734,7 +742,7 @@ form.search i{
}
.chatbot .chatbox{
height: 400px;
- padding: 30px 20px 70px;
+ padding: 30px 20px 100px;
overflow-y: auto;
}
.chatbox .chat{
@@ -742,12 +750,17 @@ form.search i{
}
.chatbox .chat p{
max-width: 75%;
+ white-space: pre-wrap;
background: #E34234;
padding: 12px 16px;
border-radius: 5px 5px 0 5px;
color: white;
font-size: 14px;
}
+.chatbox .chat p.error{
+ color: red;
+ background-color: rgb(250, 225, 225);
+}
.chatbox .incoming span{
height: 32px;
width: 32px;
@@ -790,6 +803,7 @@ form.search i{
height: 55px;
width: 100%;
overflow-y: hidden;
+ max-height: 200px;
}
.chat-input textarea:valid ~ span{
visibility: visible;
@@ -802,6 +816,7 @@ form.search i{
line-height: 55px;
visibility: hidden;
}
+/**/
@@ -458,7 +490,7 @@