From 54a2cc28761a36a7596d1e266df8f58fa5e9be5a Mon Sep 17 00:00:00 2001
From: addiii4 <adityacheema4@gmail.com>
Date: Tue, 3 Sep 2024 06:52:26 +1000
Subject: [PATCH 1/2] Fixed close button vanishing when scrolling

---
 src/App.jsx                      |  2 --
 src/components/ChatbotButton.jsx | 36 ++++++++++++++++++++------------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 496fe47..a710d85 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,6 +1,4 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
 import { ChakraProvider } from '@chakra-ui/react';
 import ChatbotButton from './components/ChatbotButton';
 import './App.css'
diff --git a/src/components/ChatbotButton.jsx b/src/components/ChatbotButton.jsx
index 670a4e0..8a8ef13 100644
--- a/src/components/ChatbotButton.jsx
+++ b/src/components/ChatbotButton.jsx
@@ -25,7 +25,13 @@ const ChatbotButton = () => {
   return (
     <Box position="fixed" bottom="4" right="4" zIndex="1000">
       {!isOpen && (
-        <IconButton onClick={toggleChat} colorScheme="blue" borderRadius="full" p="4" icon={<ChatIcon />} />
+        <IconButton
+          onClick={toggleChat}
+          colorScheme="blue"
+          borderRadius="full"
+          p="4"
+          icon={<ChatIcon />}
+        />
       )}
       {isOpen && (
         <Box
@@ -41,26 +47,29 @@ const ChatbotButton = () => {
           display="flex"
           flexDirection="column"
         >
+          <IconButton
+            icon={<CloseIcon />}
+            onClick={toggleChat}
+            colorScheme="red"
+            size="sm"
+            borderRadius="full"
+            width="1" 
+            mr="0"
+          />
           <VStack spacing="4" flex="1" overflowY="auto">
-            <Box width="full" textAlign="right">
-              <IconButton
-                icon={<CloseIcon />}
-                onClick={toggleChat}
-                colorScheme="red"
-                size="sm"
-                borderRadius="full"
-              />
-            </Box>
+            <Box width="full" textAlign="right"></Box>
             {isInitialLoaded && (
               <VStack spacing="2" align="stretch" flex="1">
                 {messages.map((message, index) => (
                   <HStack
                     key={index}
-                    justifyContent={message.role === 'user' ? 'flex-end' : 'flex-start'}
+                    justifyContent={
+                      message.role === "user" ? "flex-end" : "flex-start"
+                    }
                   >
                     <Box
-                      bg={message.role === 'user' ? 'blue.500' : 'gray.300'}
-                      color={message.role === 'user' ? 'white' : 'black'}
+                      bg={message.role === "user" ? "blue.500" : "gray.300"}
+                      color={message.role === "user" ? "white" : "black"}
                       px="4"
                       py="2"
                       borderRadius="md"
@@ -75,6 +84,7 @@ const ChatbotButton = () => {
           <Box mt="4">
             <InputGroup>
               <Input
+                bg="gray.100"
                 value={inputValue}
                 onChange={handleInputChange}
                 placeholder="Type your message here..."

From 1771d07c6eac6da26854d245523aa317bc3db05f Mon Sep 17 00:00:00 2001
From: addiii4 <adityacheema4@gmail.com>
Date: Wed, 2 Oct 2024 11:42:53 +1000
Subject: [PATCH 2/2] Changed button to work now

---
 src/components/ChatbotButton.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ChatbotButton.jsx b/src/components/ChatbotButton.jsx
index 8a8ef13..7bc0735 100644
--- a/src/components/ChatbotButton.jsx
+++ b/src/components/ChatbotButton.jsx
@@ -53,8 +53,7 @@ const ChatbotButton = () => {
             colorScheme="red"
             size="sm"
             borderRadius="full"
-            width="1" 
-            mr="0"
+            width="1"
           />
           <VStack spacing="4" flex="1" overflowY="auto">
             <Box width="full" textAlign="right"></Box>