Skip to content

Commit

Permalink
Add Boiler Plate for Explain Content
Browse files Browse the repository at this point in the history
  • Loading branch information
vjspranav committed Feb 15, 2024
1 parent a213ec4 commit 83cff5c
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 1 deletion.
15 changes: 15 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"react-bootstrap": "^1.6.1",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-icons": "^5.0.1",
"react-responsive": "^9.0.0-beta.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
Expand Down
60 changes: 59 additions & 1 deletion src/components/MonacoEditor.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import { useState, useContext, useEffect } 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";

import Editor, { DiffEditor } from "@monaco-editor/react";
import MDEditor from "@uiw/react-md-editor";
Expand All @@ -8,7 +14,7 @@ import axios from "axios";
// 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 { StagBinContext } from "../App";
Expand Down Expand Up @@ -99,6 +105,21 @@ export default function MEditor() {

const [loading, setLoading] = useState(id ? true : false);

// AI
const [open, setOpen] = useState(false);
const [explanation, setExplanation] = useState("");

const handleOpen = () => {
setOpen(true);
setInterval(() => {
setExplanation("We are still learning...");
}, 3000);
};

const handleClose = () => {
setOpen(false);
};

useEffect(() => {
function set_data_if_exists() {
if (id) {
Expand Down Expand Up @@ -243,6 +264,43 @@ export default function MEditor() {
<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>
);
}

0 comments on commit 83cff5c

Please sign in to comment.