Merge branch 'main' into fix/navbar-and-responsiveness

PranavBarthwal · Jun 7, 2024 · f1a3de9 · f1a3de9
2 parents 6351dac + 241d527
commit f1a3de9
Show file tree

Hide file tree

Showing 8 changed files with 672 additions and 197 deletions.
diff --git a/.env.demo b/.env.demo
@@ -6,4 +6,9 @@ VITE_PUBLIC_KEY=
 
 # Environment Variables for NASA API call.
 
-VITE_API_KEY=DEMO_KEY  # use Demo Key only for development.
+VITE_API_KEY=DEMO_KEY  # use Demo Key only for development.
+
+# Environment Variables for chatbot.
+VITE_CHATBOT_API_KEY=DEMO_KEY
+VITE_CHATBOT_SEARCH_ENG_ID=DEMO_KEY
+VITE_GOOGLE_API_URL=DEMO_KEY
diff --git a/index.html b/index.html
@@ -11,11 +11,12 @@
     crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 </head>
 
 <body>
   <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
+  <script type="module" src="./src/main.jsx"></script>
 </body>
 
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -7,6 +7,7 @@ import BackGround from './components/BackGround/BackGround.jsx'
 import ScrollToTop from './components/ScrollToTop/ScrollToTop.jsx'
 import PreLoader from './components/PreLoader/PreLoader.jsx'
 import { useState } from 'react'
+import Chatbot from './components/Chatbot/chatbot.jsx';
 
 
 function App() {
@@ -22,6 +23,7 @@ function App() {
       <Outlet />
       <ScrollToTop/>
       <Footer />
+      <Chatbot />
     </>
   );
 }

diff --git a/src/components/Chatbot/backend.js b/src/components/Chatbot/backend.js
@@ -0,0 +1,88 @@
+const GOOGLE_API_URL = import.meta.env.VITE_GOOGLE_API_URL;
+const API_KEY = import.meta.env.VITE_CHATBOT_API_KEY;
+const CX = import.meta.env.VITE_CHATBOT_SEARCH_ENG_ID;
+
+
+const greetings_responses = {
+    "hi": "Hello! How can I assist you today?",
+    "hello": "Hi there! What can I do for you?",
+    "hi!": "Hey there! What would you like to learn today?",
+    "how are you": "I'm just a bot, but I'm here to help you with NASA-related queries!",
+    "thanks": "You're very welcome! Let me know if you need further assistance!",
+    "thank you": "You're very welcome! Let me know if you need further assistance!",
+    "bye": "Have a great day!",
+    "bye bye": "Have a great day!"
+};
+
+const bannedWords = ['foul', 'improper', 'adultery', 'inappropriate',
+'vulgar', 'obscene', 'profanity', 'explicit','offensive', 'indecent', 'lewd', 'pornography', 'love','husband', 'girlfriend', 'boyfriend', 'gf','bf','infidelity', 'cheating', 'betrayal', 'affair',
+'forbidden', 'immoral', 'promiscuous', 'sleazy', 'sex', '18', 'kill', 'animals', 'makeup', 'marry', 'marraige','indecorous', 'salacious', 'debauchery', 'scandalous',
+'licentious', 'depraved', 'unchaste', 'corrupt','disgraceful', 'sinful', 'sordid', 'perverted','taboo', 'degenerate', 'unclean', 'sinister',
+'unethical', 'repugnant', 'wicked', 'naughty', 'movie', 'actor']; 
+
+async function searchGoogle(query) {
+    const params = new URLSearchParams({
+        "key": API_KEY,
+        "cx": CX,
+        "q": query,
+        "num": 1
+    });
+    const response = await fetch(`${GOOGLE_API_URL}?${params}`);
+const data = await response.json();
+if (response.ok) {
+    if (data.items && data.items.length > 0) {
+        const { title, link, snippet } = data.items[0];
+        const snippetWords = snippet.split(' ');
+        console.log("Snippet words length:", snippetWords.length); 
+        const truncatedSnippetWords = snippetWords.slice(0, 60);
+        let snippetMessage = truncatedSnippetWords.join(' ');
+        let finalSnippetMessage = snippetMessage +=' Follow the link for more.';
+        return {
+            "title": title,
+            "link": link,
+            "snippet": finalSnippetMessage
+        };
+        } else {
+            return { "title": "No results found", "link": "", "snippet": "" };
+        }
+    } else {
+        throw new Error("Failed to fetch search results");
+    }
+}
+
+async function getResponse(userInput) {
+    const user_input = userInput.toLowerCase();
+    if (!user_input) {
+        throw new Error("Error: No input received");
+    }
+
+
+    const containsBannedWord = bannedWords.some(word => user_input.includes(word.toLowerCase()));
+
+    if (containsBannedWord) {
+
+        reportUserQuery(userInput);
+        return "I'm sorry, I cannot respond to that.";
+    }
+
+    if (user_input in greetings_responses) {
+        return greetings_responses[user_input];
+    } else {
+        try {
+            const searchResult = await searchGoogle(user_input);
+
+            const response = `Title: ${searchResult.title}<br/>Link: <a href="${searchResult.link}" target="_blank">${searchResult.link}</a><br/>Snippet: ${searchResult.snippet}`;
+
+            return response;
+        } catch (error) {
+            return "I'm sorry, I couldn't find any information on that.";
+        }
+    }
+}
+
+function reportUserQuery(query) {
+
+    console.log(`User query reported: ${query}`);
+}
+
+export { getResponse };
diff --git a/src/components/Chatbot/chatbot.css b/src/components/Chatbot/chatbot.css
@@ -0,0 +1,260 @@
+/* Chatbot Icon */
+.chat-icon-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    transition: all 0.3s ease;
+  }
+
+  .chat-icon-container:hover {
+    transform: scale(1.1);
+  }
+
+  .chat-icon {
+    background-color: #007bff;
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.chat-icon i {
+  font-size: 24px; 
+  margin-right: 20px; 
+  margin-bottom: 20px; 
+}
+
+
+
+
+  /* Chatbot Popup */
+  /* Existing styles for chatpop-up container */
+.chat-popup-container {
+  position: fixed;
+  bottom: 90px;
+  right: 20px;
+  z-index: 9998;
+  background-color: rgb(0, 0, 0);
+  background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(132, 130, 130, 1) 50%, rgba(170, 170, 170, 1) 77%, rgba(255, 255, 255, 1) 100%);
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  width: 500px;
+}
+
+/* Additional styles for the chatpop-up container background */
+.chat-popup-container {
+  background: radial-gradient(ellipse at bottom, #0d1d31 0%, #0c0d13 100%);
+  overflow: hidden;
+}
+
+@function random_range($min, $max) {
+$rand: random();
+$random_range: $min + floor($rand * (($max - $min) + 1));
+@return $random_range;
+}
+
+.stars {
+position: fixed;
+top: 0;
+left: 0;
+width: 100%;
+height: 120%;
+transform: rotate(-45deg);
+}
+
+.star {
+$star-count: 50;
+--star-color: var(--primary-color);
+--star-tail-length: 6em;
+--star-tail-height: 2px;
+--star-width: calc(var(--star-tail-length) / 6);
+--fall-duration: 9s;
+--tail-fade-duration: var(--fall-duration);
+
+position: absolute;
+top: var(--top-offset);
+left: 0;
+width: var(--star-tail-length);
+height: var(--star-tail-height);
+color: var(--star-color);
+background: linear-gradient(45deg, currentColor, transparent);
+border-radius: 50%;
+filter: drop-shadow(0 0 6px currentColor);
+transform: translate3d(104em, 0, 0);
+animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
+
+@include sp-layout {
+  // For mobile performance, tail-fade animation will be removed QAQ
+  animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
+}
+
+@for $i from 1 through $star-count {
+  &:nth-child(#{$i}) {
+    --star-tail-length: #{random_range(500em, 750em) / 100};
+    --top-offset: #{random_range(0vh, 10000vh) / 100};
+    --fall-duration: #{random_range(6000, 12000s) / 1000};
+    --fall-delay: #{random_range(0, 10000s) / 1000};
+  }
+}
+
+&::before, &::after {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: calc(var(--star-width) / -2);
+  width: var(--star-width);
+  height: 100%;
+  background: linear-gradient(45deg, transparent, currentColor, transparent);
+  border-radius: inherit;
+  animation: blink 2s linear infinite;
+}
+
+&::before {
+  transform: rotate(45deg);
+}
+
+&::after {
+  transform: rotate(-45deg);
+}
+}
+
+@keyframes fall {
+to {
+  transform: translate3d(-30em, 0, 0);
+}
+}
+
+@keyframes tail-fade {
+0%, 50% {
+  width: var(--star-tail-length);
+  opacity: 1;
+}
+
+70%, 80% {
+  width: 0;
+  opacity: 0.4;
+}
+
+100% {
+  width: 0;
+  opacity: 0;
+}
+}
+
+@keyframes blink {
+50% {
+  opacity: 0.6;
+}
+}
+
+  .chat-popup-header {
+    background-color: #007bff;
+    color: white;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    margin-bottom: 10px; 
+    font-size: 20px; 
+  }
+
+
+  .chat-popup-header i {
+    cursor: pointer;
+  }
+
+  .chat-popup-body {
+    padding: 10px;
+    height: 600px;
+    overflow-y: scroll;
+    color: #000000;
+  }
+
+  /* Adjusting chat popup input and send button */
+  .chat-popup-footer {
+    display: flex;
+    justify-content: space-between; 
+    padding: 5px;
+    align-items: flex-end; 
+  }
+
+  .chat-popup-input {
+    flex: 1; 
+    border: none;
+    outline: none;
+    padding: 10px;
+    margin: 0;
+  }
+
+  .chat-popup-send {
+    background-color: #00d057;
+    color: #ffffff;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-left: 10px;
+  }
+
+
+  .bot-message {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 10px;
+    color: white;
+  }
+
+  .bot-message i {
+    font-size: 24px;
+    margin-right: 30px;
+  }
+
+  .bot-message p {
+    background-color: #000000;
+    padding: 10px;
+    border-radius: 10px;
+    max-width: calc(100% - 40px);
+    word-wrap: break-word;
+  }
+
+
+  .user-message {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+  }
+
+  .user-message p {
+    background-color: #007bff;
+    color: white;
+    padding: 10px;
+    border-radius: 10px;
+    max-width: calc(100% - 40px);
+    word-wrap: break-word;
+  }
+
+  .refresh-icon {
+    position: absolute;
+    right: 80px; 
+    top: 12px; 
+    cursor: pointer;
+    font-size: 20px; 
+  }
+
+  .close-icon {
+    cursor: pointer;
+    position: relative;
+    right: 20px;
+    top: -12px; 
+    font-size: 20px; 
+  }
+