feat: enhance chat button with animation and style improvements (#257)

casbin · Aug 2, 2024 · d6e905d · d6e905d
1 parent 669be00
commit d6e905d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git a/src/ChatWidget/ChatButton.jsx b/src/ChatWidget/ChatButton.jsx
@@ -1,9 +1,30 @@
-import React, {useState} from "react";
-import {chatButton, chatButtonOpen, chatIframe, chatIframeContainer, closeIcon} from "./chatStyles";
+import React, {useEffect, useState} from "react";
+import {
+  chatButton,
+  chatButtonOpen,
+  chatIframe,
+  chatIframeContainer,
+  chatIframeContainerOpen,
+  closeIcon
+} from "./chatStyles";
 
 function ChatButton() {
   const [isChatOpen, setIsChatOpen] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
+  const [containerStyle, setContainerStyle] = useState(chatIframeContainer);
+  const [iconRotation, setIconRotation] = useState(0);
+
+  useEffect(() => {
+    if (isChatOpen) {
+      setTimeout(() => {
+        setContainerStyle({...chatIframeContainer, ...chatIframeContainerOpen});
+      }, 50);
+      setIconRotation(-90);
+    } else {
+      setContainerStyle(chatIframeContainer);
+      setIconRotation(0);
+    }
+  }, [isChatOpen]);
 
   const handleClick = () => {
     setIsChatOpen(!isChatOpen);
@@ -22,10 +43,20 @@ function ChatButton() {
         onMouseLeave={() => setIsHovered(false)}
       >
         {isChatOpen ? (
-          <span style={closeIcon}>×</span>
+          <span style={{...closeIcon, transform: `rotate(${iconRotation}deg)`}}>×</span>
         ) : (
           <>
-            <svg style={{marginRight: "5px"}} viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+            <svg
+              style={{
+                marginRight: "5px",
+                transition: "transform 0.3s ease",
+                transform: `rotate(${iconRotation}deg)`,
+              }}
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+            >
               <g transform="scale(-1, 1) translate(-1024, 0)">
                 <path
                   d="M1002.7 448C1002.7 212.4 783 21.3 512 21.3S21.3 212.4 21.3 448c0 194.7 149.9 358.9 354.8 410.1-21.1 66.9-77.4 123.2-77.4 123.2s548.8-34.3 677.6-395c17.1-43.4 26.4-89.9 26.4-138.3z"
@@ -37,12 +68,13 @@ function ChatButton() {
           </>
         )}
       </button>
-      <div style={{...chatIframeContainer, display: isChatOpen ? "flex" : "none"}}>
-        <iframe
-          src="https://ai.casbin.com/?isRaw=1"
-          title="Chat with AI"
-          style={chatIframe}
-        ></iframe>
+      <div
+        style={{
+          ...containerStyle,
+          display: isChatOpen ? "flex" : "none",
+        }}
+      >
+        <iframe src="https://ai.casbin.com/?isRaw=1" title="Chat with AI" style={chatIframe} />
       </div>
     </div>
   );

diff --git a/src/ChatWidget/chatStyles.js b/src/ChatWidget/chatStyles.js
@@ -29,6 +29,7 @@ export const closeIcon = {
   fontSize: "50px",
   fontWeight: "100",
   lineHeight: 1,
+  transition: "transform 0.3s ease",
 };
 
 export const chatIframeContainer = {
@@ -41,6 +42,14 @@ export const chatIframeContainer = {
   zIndex: 1001,
   flexDirection: "column",
   overflow: "hidden",
+  transition: "all 0.3s ease",
+  transform: "translateY(30px)",
+  opacity: 1,
+};
+
+export const chatIframeContainerOpen = {
+  transform: "translateY(0)",
+  opacity: 1,
 };
 
 export const chatIframe = {