From 4e4d7281eb014b137adcabfdcab1565f46cf7f03 Mon Sep 17 00:00:00 2001
From: Aarush Saboo <160993404+aarushsaboo@users.noreply.github.com>
Date: Mon, 21 Oct 2024 00:59:48 +0530
Subject: [PATCH] Added a chatbot help button that is responsive and will be
 used to display the chatbot when clicked on.

---
 client/src/components/ChatbotHelp.css | 30 +++++++++++++++++++++++++++
 client/src/components/ChatbotHelp.jsx | 23 ++++++++++++++++++++
 client/src/pages/Home.jsx             |  2 ++
 3 files changed, 55 insertions(+)
 create mode 100644 client/src/components/ChatbotHelp.css
 create mode 100644 client/src/components/ChatbotHelp.jsx

diff --git a/client/src/components/ChatbotHelp.css b/client/src/components/ChatbotHelp.css
new file mode 100644
index 0000000..d8f6f82
--- /dev/null
+++ b/client/src/components/ChatbotHelp.css
@@ -0,0 +1,30 @@
+.chatbotHelpContainer {
+    position: fixed;
+    display: flex;
+    bottom: 10px; /* Adjust this to where you want the element */
+    right: 20px; /* Adjust this to where you want the element */
+    z-index: 1000; /* Ensures it stays on top of other elements */
+}
+
+.chatbotHelpContainer svg:nth-of-type(2){
+    transform: translateX(58px);
+    z-index: 888;
+        transition: fill 0.3s ease, filter 0.3s ease;
+}
+
+.chatbotHelpContainer svg:nth-of-type(2) circle{
+    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
+    cursor: pointer;
+
+}
+.chatbotHelpContainer svg:nth-of-type(2) circle:hover{
+    fill: black;
+}
+.chatbotHelpContainer svg:nth-of-type(1):hover ~ svg:nth-of-type(2) circle{
+    fill: black;
+}
+.chatbotHelpContainer svg:nth-of-type(1){
+    transform: translate(175px, 85px);
+    z-index: 889;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/client/src/components/ChatbotHelp.jsx b/client/src/components/ChatbotHelp.jsx
new file mode 100644
index 0000000..3628298
--- /dev/null
+++ b/client/src/components/ChatbotHelp.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import "./ChatbotHelp.css";
+
+const ChatbotHelp = () => {
+  return (
+    <div className="chatbotHelpContainer">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="auto"
+        viewBox="0 -960 960 960"
+        width="32px"
+        fill="white"
+      >
+        <path d="M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z" />
+      </svg>
+      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="100" cy="100" r="26" fill="rgb(253, 134, 75)" />
+      </svg>
+    </div>
+  );
+};
+
+export default ChatbotHelp;
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 79d56b2..e0135f7 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -3,6 +3,7 @@ import Carousel from '../components/Carousel'
 import CategoriesHead from '../components/TopCategoriesHead'
 import TopCategoriesList from '../components/TopCategoriesList'
 import BuyCard from '../components/BuyCards'
+import ChatbotHelp from '../components/ChatbotHelp'
 
 function Home() {
   return (
@@ -16,6 +17,7 @@ function Home() {
         <CategoriesHead title="Supersaver" greenTitle="Up to 50% off"/>
         <BuyCard/>
       </div>
+      <ChatbotHelp />
     </>
   )
 }