updated UI

components/AiButton.js

@@ -1,4 +1,3 @@
-
 import React, { useState } from "react";
 import ChatComponent from "./chatbutton1"; // Adjust the path as needed
 
@@ -13,29 +12,45 @@ function AiButton() {
 
   return (
     <div style={{ maxWidth: "800px", margin: "0 auto", padding: "20px" }}>
-      {/* Render the "Ask AI" button if the chat is not shown */}
-      {!showChat && (
-        <button
-          onClick={toggleChat}
-          style={{
-            padding: "10px 20px",
-            fontSize: "16px",
-            cursor: "pointer",
-            marginBottom: "20px",
-            backgroundColor: "#007bff", // Blue background
-            color: "#fff", // White text
-            border: "none", // Remove default border
-            borderRadius: "5px", // Rounded corners
-            transition: "background-color 0.3s ease", // Smooth hover effect
-          }}
-          onMouseOver={(e) => (e.target.style.backgroundColor = "#0056b3")} // Darker blue on hover
-          onMouseOut={(e) => (e.target.style.backgroundColor = "#007bff")} // Revert on mouse out
-        >
-          Ask AI
-        </button>
-      )}
-      {/* Render the ChatComponent when showChat is true, passing the onClose prop */}
-      {showChat && <ChatComponent onClose={toggleChat} />}
+      <button
+        onClick={toggleChat}
+        style={{
+          padding: "10px 20px",
+          fontSize: "16px",
+          cursor: "pointer",
+          marginBottom: "20px",
+          backgroundColor: "#007bff",
+          color: "#fff",
+          border: "none",
+          borderRadius: "5px",
+          transition: "all 0.2s ease",
+          opacity: showChat ? 0 : 1,
+          transform: showChat ? "scale(0.95)" : "scale(1)",
+          pointerEvents: showChat ? "none" : "auto"
+        }}
+        onMouseOver={(e) => (e.target.style.backgroundColor = "#0056b3")}
+        onMouseOut={(e) => (e.target.style.backgroundColor = "#007bff")}
+      >
+        Ask AI
+      </button>
+
+      <div style={{
+        position: "fixed",
+        bottom: 0,
+        right: 0,
+        opacity: showChat ? 1 : 0,
+        visibility: showChat ? "visible" : "hidden",
+        transition: "opacity 0.2s ease, visibility 0.2s ease",
+      }}>
+        {showChat && <ChatComponent onClose={toggleChat} />}
+      </div>
+
+      <style jsx>{`
+        button:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
+        }
+      `}</style>
     </div>
   );
 }