diff --git a/package-lock.json b/package-lock.json index 6e8e09f..579f649 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,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", @@ -19542,6 +19543,14 @@ "react": "^15.6.2 || ^16.0 || ^17" } }, + "node_modules/react-icons": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -40701,6 +40710,12 @@ "integrity": "sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==", "requires": {} }, + "react-icons": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz", + "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 3bd22a5..5107896 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/MonacoEditor.js b/src/components/MonacoEditor.js index 31680e3..3ceeee4 100644 --- a/src/components/MonacoEditor.js +++ b/src/components/MonacoEditor.js @@ -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"; @@ -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"; @@ -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) { @@ -243,6 +264,43 @@ export default function MEditor() { + + + Explanation + + + {!explanation && "Understanding your content..."} + + {explanation ? explanation : } + + + + + + + ); }