fix: background default and other glitches

package-lock.json

@@ -13,7 +13,6 @@
         "@emotion/react": "11.10.6",
         "@emotion/server": "11.10.0",
         "@emotion/styled": "11.10.6",
-        "@monaco-editor/react": "4.5.0",
         "@mui/icons-material": "5.11.16",
         "@mui/material": "5.12.0",
         "axios": "1.3.5",
@@ -31,6 +30,7 @@
       },
       "devDependencies": {
         "@semantic-release/git": "^10.0.1",
+        "@types/node": "18.15.11",
         "@types/react-syntax-highlighter": "^15.5.6",
         "husky": "^8.0.3",
         "prettier": "^2.8.7"
@@ -431,30 +431,6 @@
       "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
-    "node_modules/@monaco-editor/loader": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.3.tgz",
-      "integrity": "sha512-6KKF4CTzcJiS8BJwtxtfyYt9shBiEv32ateQ9T4UVogwn4HM/uPo9iJd2Dmbkpz8CM6Y0PDUpjnZzCwC+eYo2Q==",
-      "dependencies": {
-        "state-local": "^1.0.6"
-      },
-      "peerDependencies": {
-        "monaco-editor": ">= 0.21.0 < 1"
-      }
-    },
-    "node_modules/@monaco-editor/react": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.0.tgz",
-      "integrity": "sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ==",
-      "dependencies": {
-        "@monaco-editor/loader": "^1.3.3"
-      },
-      "peerDependencies": {
-        "monaco-editor": ">= 0.25.0 < 1",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/@mui/base": {
       "version": "5.0.0-alpha.125",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.125.tgz",
@@ -1692,6 +1668,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@types/node": {
+      "version": "18.15.11",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
+      "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==",
+      "dev": true
+    },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
@@ -5568,12 +5550,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/monaco-editor": {
-      "version": "0.37.1",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.37.1.tgz",
-      "integrity": "sha512-jLXEEYSbqMkT/FuJLBZAVWGuhIb4JNwHE9kPTorAVmsdZ4UzHAfgWxLsVtD7pLRFaOwYPhNG9nUCpmFL1t/dIg==",
-      "peer": true
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -10679,11 +10655,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/state-local": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
-      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
-    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",

package.json

@@ -42,7 +42,6 @@
     "@emotion/react": "11.10.6",
     "@emotion/server": "11.10.0",
     "@emotion/styled": "11.10.6",
-    "@monaco-editor/react": "4.5.0",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.0",
     "axios": "1.3.5",
@@ -60,6 +59,7 @@
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",
+    "@types/node": "18.15.11",
     "@types/react-syntax-highlighter": "^15.5.6",
     "husky": "^8.0.3",
     "prettier": "^2.8.7"

public/js/utils.js

@@ -50,12 +50,6 @@ function answer(window_, channel, targetOrigin = "*") {
 }
 
 function handleTemplate(template) {
-	for (let i = 1; i < 1_000; i++) {
-		window.clearInterval(i);
-		window.cancelAnimationFrame(i);
-		window.clearTimeout(i);
-	}
-
 	try {
 		Function("Template", `${template};`)();
 	} catch (error) {

src/pages/live.tsx

@@ -11,7 +11,7 @@ const styles = (
 			height: 100%;
 			width: 100%;
 			overflow: hidden;
-		    background: white;
+		    background: #a9a9a9;
 		}
 		#__next {
 			display: contents;

src/services/api/index.ts

@@ -1,5 +1,6 @@
 import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from "openai";
 import { nanoid } from "nanoid";
+import process from "node:process";
 
 const configuration = new Configuration({
 	apiKey: process.env.OPENAI_API_KEY,
@@ -53,9 +54,8 @@ export async function toOpenAI({
 				{
 					role: "system",
 					content: miniPrompt`
-All UPPERCASE words are IMPORTANT, all "UPPERCASE" words in QUOTES (") indicate KEYWORDS,
-You are an expert JavaScript Developer, with a creative mindset.
-You are a Canvas-2d expert and performance guru.
+All UPPERCASE words are IMPORTANT, all "UPPERCASE" words in QUOTES (") indicate KEYWORDS.
+You are: expert JavaScript Developer, creative, Canvas-2d expert, performance guru, interaction expert.
 You strictly follow all "DOCS".
 You ALWAYS follow the "ADD", "REMOVE", "INPUT" and "OUTPUT FORMAT".
 You NEVER explain anything.