feat: add AI chat widget (#256)

* feat: add ChatButton component to homepage features

* style: update chat button and iframe styles

* refactor: move chat button functionality to separate module

* feat: add query parameter to chat iframe source

* refactor: improve chat iframe display and container styling

.eslintrc

@@ -106,7 +106,7 @@
     "react/no-unknown-property": [
       "error",
       {
-        "ignore": ["scrolling"]
+        "ignore": ["scrolling","fill"]
       }
     ]
   }

src/ChatWidget/ChatButton.jsx

@@ -0,0 +1,51 @@
+import React, {useState} from "react";
+import {chatButton, chatButtonOpen, chatIframe, chatIframeContainer, closeIcon} from "./chatStyles";
+
+function ChatButton() {
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleClick = () => {
+    setIsChatOpen(!isChatOpen);
+  };
+
+  return (
+    <div>
+      <button
+        style={{
+          ...chatButton,
+          ...(isChatOpen ? chatButtonOpen : {}),
+          ...(isHovered ? {backgroundColor: "#2E2A57"} : {}),
+        }}
+        onClick={handleClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {isChatOpen ? (
+          <span style={closeIcon}>×</span>
+        ) : (
+          <>
+            <svg style={{marginRight: "5px"}} 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"
+                  fill="#ffffff"
+                ></path>
+              </g>
+            </svg>
+            Chat with AI
+          </>
+        )}
+      </button>
+      <div style={{...chatIframeContainer, display: isChatOpen ? "flex" : "none"}}>
+        <iframe
+          src="https://ai.casbin.com/?isRaw=1"
+          title="Chat with AI"
+          style={chatIframe}
+        ></iframe>
+      </div>
+    </div>
+  );
+}
+
+export default ChatButton;

src/ChatWidget/chatStyles.js

@@ -0,0 +1,49 @@
+export const chatButton = {
+  position: "fixed",
+  bottom: "20px",
+  right: "20px",
+  backgroundColor: "#403B79",
+  color: "white",
+  border: "none",
+  borderRadius: "50px",
+  padding: "10px 20px",
+  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+  cursor: "pointer",
+  zIndex: 1000,
+  display: "flex",
+  alignItems: "center",
+  fontWeight: "bold",
+  fontSize: "16px",
+  transition: "all 0.3s ease",
+};
+
+export const chatButtonOpen = {
+  borderRadius: "50%",
+  width: "50px",
+  height: "50px",
+  padding: 0,
+  justifyContent: "center",
+};
+
+export const closeIcon = {
+  fontSize: "50px",
+  fontWeight: "100",
+  lineHeight: 1,
+};
+
+export const chatIframeContainer = {
+  position: "fixed",
+  bottom: "80px",
+  right: "20px",
+  width: "min(500px, calc(100vw - 40px))",
+  height: "min(600px, calc(100vh - 100px))",
+  borderRadius: "10px",
+  zIndex: 1001,
+  flexDirection: "column",
+  overflow: "hidden",
+};
+
+export const chatIframe = {
+  width: "100%",
+  height: "100%",
+};

src/ChatWidget/chatWidget.js

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import ChatButton from "./ChatButton";
+
+export function initChatWidget(targetElement) {
+  if (typeof window !== "undefined" && targetElement) {
+    const chatContainer = document.createElement("div");
+    targetElement.appendChild(chatContainer);
+    ReactDOM.render(<ChatButton />, chatContainer);
+  }
+}
+
+export {ChatButton};

src/components/HomepageFeatures/index.js

@@ -1,8 +1,9 @@
-import React from "react";
+import React, {useEffect} from "react";
 import clsx from "clsx";
 import styles from "./styles.module.css";
 import Translate from "@docusaurus/Translate";
 import {useColorMode} from "@docusaurus/theme-common";
+import {initChatWidget} from "../../ChatWidget/chatWidget";
 
 const FeatureList = [
   {
@@ -69,6 +70,11 @@ function Feature({title, path, description}) {
 }
 
 export default function HomepageFeatures() {
+
+  useEffect(() => {
+    initChatWidget(document.body);
+  }, []);
+
   return (
     <section className={styles.features}>
       <div className="container">