Made changes

piyushg-07 · Jun 13, 2024 · 7abf8a9 · 7abf8a9
1 parent d4c5449
commit 7abf8a9
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/chatBot/script.js b/chatBot/script.js
@@ -5,7 +5,6 @@ const chatBox = document.querySelector('.chatbot__box');
 const chatbotCloseBtn = document.querySelector('.chatbot__header span');
 
 let userMessage;
-// Need GPT key
 const inputInitHeight = chatInput.scrollHeight;
 const API_KEY = '033f3bcc57msh4cbeceaaa74b3fbp172fd5jsn8008c32db481'; // ~IMPORTANT~
 
@@ -24,7 +23,7 @@ const generateResponse = (incomingChatLi) => {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      "X-RapidAPI-Key": "033f3bcc57msh4cbeceaaa74b3fbp172fd5jsn8008c32db481", // ! IMPORTANT !
+      "X-RapidAPI-Key": API_KEY, // ~IMPORTANT~
       "X-RapidAPI-Host": "chatgpt53.p.rapidapi.com",
     },
     body: JSON.stringify({
@@ -35,21 +34,28 @@ const generateResponse = (incomingChatLi) => {
   console.log('Sending API request:', requestOptions);
 
   fetch(API_URL, requestOptions)
-    .then((res) => res.json())
+    .then((res) => {
+      if (!res.ok) {
+        throw new Error(`HTTP error! status: ${res.status}`);
+      }
+      return res.json();
+    })
     .then((data) => {
       console.log('API response:', data);
-      console.log(data.choices[0].message.content);
-      messageElement.textContent = data.choices[0].message.content;
+      if (data && data.choices && data.choices.length > 0 && data.choices[0].message && data.choices[0].message.content) {
+        messageElement.textContent = data.choices[0].message.content;
+      } else {
+        throw new Error('Invalid API response format');
+      }
     })
     .catch((error) => {
-      console.log('API error:', error);
+      console.error('API error:', error);
       messageElement.classList.add('error');
       messageElement.textContent = 'Oops! Please try again!';
     })
     .finally(() => chatBox.scrollTo(0, chatBox.scrollHeight));
 };
 
-
 const handleChat = () => {
   userMessage = chatInput.value.trim();
   if (!userMessage) return;

diff --git a/chatBot/style.css b/chatBot/style.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
 .chatbot__button {
     position: fixed;
     bottom: 15px;
@@ -36,7 +37,7 @@
     width: 400px;
     background-color: #f3f7f8;
     border-radius: 15px;
-    box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1) 0 32px 64px -48px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), 0 32px 64px -48px rgba(0, 0, 0, 0.5);
     transform: scale(0.5);
     transition: transform 0.3s ease;
     overflow: hidden;
@@ -60,7 +61,7 @@
 .chatbot__header span {
     display: none;
     position: absolute;
-    top: 40%;
+    top: 50%;
     right: 20px;
     color: #202020;
     transform: translateY(-50%);
@@ -165,22 +166,40 @@
     visibility: hidden;
 }
 
-.chatbot__textarea:valid~span {
+.chatbot__textarea:valid ~ span {
     visibility: visible;
 }
 
+/* Added responsiveness */
 @media (max-width: 490px) {
     .chatbot {
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 0;
+        right: 23px;
+        bottom: 85px;
+        width: 90%;
+        height: 71%;
+        border-radius: 30px
     }
     .chatbot__box {
-        height: 90%;
+        height: calc(100% - 140px); 
+        padding: 20px 10px 80px; 
     }
     .chatbot__header span {
         display: inline;
     }
-}
+    .chatbot__header {
+        padding: 10px 0; 
+    }
+    .chatbox__title {
+        font-size: 1.2rem; 
+    }
+    .chatbot__input-box {
+        padding: 5px 10px; 
+    }
+    .chatbot__textarea {
+        width: 70%; 
+        padding: 10px 10px 10px 0; 
+    }
+    .chatbot__input-box span {
+        font-size: 1.5rem; 
+    }
+}