Even mobile can be part of this revolution

StagBIN · Feb 16, 2024 · 5ac3b32 · 5ac3b32
1 parent da1324f
commit 5ac3b32
Showing 1 changed file with 68 additions and 3 deletions.
diff --git a/src/components/AceEditor.js b/src/components/AceEditor.js
@@ -11,13 +11,18 @@ import "ace-builds/src-noconflict/theme-twilight";
 import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/ext-beautify";
 import { useState, useContext } from "react";
-
+import Dialog from "@material-ui/core/Dialog";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
 // Loading
 import Backdrop from "@material-ui/core/Backdrop";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import { makeStyles } from "@material-ui/core";
+import { Box, makeStyles } from "@material-ui/core";
 
-import { API_URL } from "../Constants";
+import { API_URL, EXPLAIN_URL } from "../Constants";
 import { StagBinContext } from "../App";
 
 let reqData = {};
@@ -85,6 +90,29 @@ export default function PEditor() {
 
   let { id } = useParams();
   const [loading, setLoading] = useState(id ? true : false);
+
+  // AI
+  const [open, setOpen] = useState(false);
+  const [explanation, setExplanation] = useState("");
+
+  const handleOpen = () => {
+    setOpen(true);
+    axios
+      .post(EXPLAIN_URL, { data: data })
+      .then((res) => {
+        setExplanation(res.data.body);
+      })
+      .catch((err) => {
+        console.log(err);
+        setExplanation("Failed to understand the content");
+      });
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setExplanation("");
+  };
+
   function set_data_if_exists() {
     if (id) {
       if (id.indexOf(".") !== -1) {
@@ -152,6 +180,43 @@ export default function PEditor() {
       <Backdrop className={classes.backdrop} open={loading}>
         <CircularProgress color="inherit" />
       </Backdrop>
+      <Button
+        color="primary"
+        aria-label="add"
+        variant="contained"
+        onClick={handleOpen}
+        style={{
+          position: "fixed",
+          bottom: "40px",
+          right: "20px",
+          opacity: "0.7",
+          size: "large",
+          display: data ? "block" : "none",
+        }}
+      >
+        Explain Content
+      </Button>
+      <Dialog open={open} onClose={handleClose}>
+        <DialogTitle>Explanation</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {!explanation && "Understanding your content..."}
+            <Box
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              height="100%"
+            >
+              {explanation ? explanation : <CircularProgress />}
+            </Box>
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose} color="primary">
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 }