From dcdbc0c1e3c105150654f933a7e0956bc65f9cd3 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Mon, 24 Jul 2023 09:43:24 -0500
Subject: [PATCH] updated chatbot

---
 donation_website/index.html | 59 ++++++++++++++++++++-------
 donation_website/main.js    | 80 ++++++++++++++++++++++++++++++++++++-
 donation_website/style.css  | 17 +++++++-
 3 files changed, 139 insertions(+), 17 deletions(-)

diff --git a/donation_website/index.html b/donation_website/index.html
index b75309a..21c65e7 100644
--- a/donation_website/index.html
+++ b/donation_website/index.html
@@ -323,10 +323,10 @@
             <div class="accordion">
                 <div class="container">
                     <div class="content-2">
-                        <h2>How we can make a difference</h2>
+                        <h2>Why blood donation is important</h2>
                         <div class="question-answ">
                             <div class="question">
-                                <h3 class="title-question">Give blood</h3>
+                                <h3 class="title-question">Saving Lives</h3>
                                 <button class="question-btn">
                                     <span class="icon-up">
                                         <i class='bx bx-chevron-up'></i>
@@ -337,12 +337,12 @@
                                 </button>
                             </div>
                             <div class="answer">
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+                                <p>Blood donations are critical in medical emergencies and surgeries where patients may need blood transfusions due to accidents, organ transplants, and various medical conditions. By donating blood, you can directly contribute to saving someone's life.</p>
                             </div>
                         </div>
                         <div class="question-answ">
                             <div class="question">
-                                <h3 class="title-question">Host a Blood Drive</h3>
+                                <h3 class="title-question">Treating Medical Conditions</h3>
                                 <button class="question-btn">
                                     <span class="icon-up">
                                         <i class='bx bx-chevron-up'></i>
@@ -353,12 +353,12 @@
                                 </button>
                             </div>
                             <div class="answer">
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+                                <p>Many medical conditions, such as anemia, thalassemia, and certain cancers, require regular blood transfusions to manage the symptoms and improve the quality of life for patients.</p>
                             </div>
                         </div>
                         <div class="question-answ">
                             <div class="question">
-                                <h3 class="title-question">Volunteer</h3>
+                                <h3 class="title-question">Supporting Healthcare Systems</h3>
                                 <button class="question-btn">
                                     <span class="icon-up">
                                         <i class='bx bx-chevron-up'></i>
@@ -369,12 +369,12 @@
                                 </button>
                             </div>
                             <div class="answer">
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+                                <p>Hospitals and medical facilities need a steady and reliable blood supply to handle emergencies and provide proper care to patients.</p>
                             </div>
                         </div>
                         <div class="question-answ">
                             <div class="question">
-                                <h3 class="title-question">Join Our Team</h3>
+                                <h3 class="title-question">Supporting Specific Blood Types</h3>
                                 <button class="question-btn">
                                     <span class="icon-up">
                                         <i class='bx bx-chevron-up'></i>
@@ -385,9 +385,41 @@
                                 </button>
                             </div>
                             <div class="answer">
-                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+                                <p>By donating blood, individuals with rarer blood types can help meet the needs of patients who share their blood type.</p>
                             </div>
-                        </div>       
+                        </div>
+                        <div class="question-answ">
+                            <div class="question">
+                                <h3 class="title-question">Health Benefits for Donors</h3>
+                                <button class="question-btn">
+                                    <span class="icon-up">
+                                        <i class='bx bx-chevron-up'></i>
+                                    </span>
+                                    <span class="icon-down">
+                                        <i class='bx bx-chevron-down'></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="answer">
+                                <p>Donating blood can help reduce the risk of certain health conditions, such as hemochromatosis, by lowering the iron levels in the body.</p>
+                            </div>
+                        </div> 
+                        <div class="question-answ">
+                            <div class="question">
+                                <h3 class="title-question">Screening for Health Conditions</h3>
+                                <button class="question-btn">
+                                    <span class="icon-up">
+                                        <i class='bx bx-chevron-up'></i>
+                                    </span>
+                                    <span class="icon-down">
+                                        <i class='bx bx-chevron-down'></i>
+                                    </span>
+                                </button>
+                            </div>
+                            <div class="answer">
+                                <p>Before blood is used for transfusions, it undergoes rigorous testing for infectious diseases, ensuring the safety of the blood supply. Donating blood can also act as an opportunity to identify potential health issues in donors.</p>
+                            </div>
+                        </div>                  
                     </div>
                     <div class="content-2-img">
                         <img src="images/accordion.png" alt="">
@@ -458,7 +490,7 @@
             </div>
         </div>
 
-        <div class="show-chatbot">
+        <div class="chatbot-aid">
             <button class="chatbot-toggler">
                 <span class="chatbot-icon"><i class='bx bx-message-alt'></i></span>
                 <span class="chatbot-icon"><i class='bx bx-x'></i></span>
@@ -466,16 +498,13 @@
             <div class="chatbot">
                 <div class="chatbot-container">
                     <h2> &nbsp; Chatbot</h2>
-                    <span class="chatbot-icon"><i class='bx bx-x'></i></span>
+                    <span class="chatbot-close-btn chatbot-icon"><i class='bx bx-x'></i></span>
                 </div>
                 <ul class="chatbox">
                     <li class="chat incoming">
                         <span class="chatbot-icon"><i class='bx bx-bot' ></i></span>
                         <p>Hi there &#128075; <br> What can I help you with?</p>
                     </li>
-                    <li class="chat outgoing">
-                        <p>Hello!</p>
-                    </li>
                 </ul>
                 <div class="chat-input">
                     <textarea placeholder="Enter your message" required></textarea>
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" ? `<p></p>`:`<span class="chatbot-icon"><i class='bx bx-bot'></i></span><p></p>`;
+    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;
 }
+/**/