Merge pull request #1077 from multiversx/ag/ask-ai

Fixed AI Chatbox styles

Author: MiroMargineanu

src/components/AskAiButton/ChatWindow.tsx

@@ -74,16 +74,21 @@ const ChatWindow = ({ onClose }) => {
     <div
       className="chat-modal bg-white dark:bg-neutral-900"
       style={{
-        height: "50%",
+        maxWidth: "min(960px, calc(100% - 32px))",
+        maxHeight: "min(640px, calc(100% - 32px))",
+        height: "100%",
+        width: "100%",
         borderRadius: "16px",
+        display: "flex",
+        flexDirection: "column",
         overflow: "hidden",
       }}
     >
       {/* Modal Header */}
       <div
         className="chat-modal-header bg-white  dark:bg-neutral-900 text-neutral-900 dark:text-white"
         style={{
-          padding: "32px 0px 16px",
+          padding: "16px 0px",
           margin: "0px 16px",
           borderBottom: "1px solid #333",
           display: "flex",
@@ -118,18 +123,18 @@ const ChatWindow = ({ onClose }) => {
       {/* Chat Messages Area */}
       <div
         style={{
-          height: "60vh",
           display: "flex",
           flexDirection: "column",
           justifyContent: "flex-end",
+          overflow: "auto",
+          flex: 1,
         }}
       >
         <div
           className="chat-modal-body"
           ref={chatBodyRef}
           style={{
             padding: "16px 16px 32px",
-
             overflowY: "auto",
           }}
         >
@@ -209,8 +214,7 @@ const ChatWindow = ({ onClose }) => {
         style={{
           display: "flex",
           position: "relative",
-          padding: "0px 16px 32px",
-          // boxShadow: " 0px -8px 32px 0px rgba(23,23,23,1)",
+          padding: "0px 16px 16px",
         }}
       >
         <input
@@ -226,6 +230,7 @@ const ChatWindow = ({ onClose }) => {
             outline: "none",
             border: "1px solid #333",
             borderRadius: "12px",
+            paddingRight: 64,
             background: "transparent",
           }}
           onKeyDown={(e) => {
@@ -246,7 +251,7 @@ const ChatWindow = ({ onClose }) => {
             position: "absolute",
             right: "20px",
             bottom: "50%",
-            transform: "translateY(calc(50% - 16px))",
+            transform: "translateY(calc(50% - 8px))",
           }}
         >
           Send

src/components/AskAiButton/index.tsx

@@ -51,19 +51,19 @@ const AskAiButton = () => {
         onRequestClose={closeModal}
         contentLabel="Example Popup"
         style={{
-          overlay: { backgroundColor: "rgba(0,0,0,0.5)" },
+          overlay: { backgroundColor: "rgba(0,0,0,0.5)", zIndex: 200 },
           content: {
-            maxWidth: "min(1200px, calc(100% - 32px))",
             position: "fixes",
-            margin: "auto",
-            marginTop: "70px",
-            minHeight: "80vh",
-            maxHeight: "80vh",
             zIndex: "10000",
+            backgroundColor: "rgba(0,0,0,0.15)",
+            height: "100vh",
             padding: "0px",
             background: "none",
             border: "none",
             overflow: "hidden",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
           },
         }}
       >