Init context menu

static/koboldai.css

@@ -2148,6 +2148,42 @@ body {
 	border-radius: var(--radius_settings_button);
 }
 
+/* Context Menu */
+#context-menu {
+	position: absolute;
+	cursor: default;
+
+	/* Nothing should be above the context menu (that I can think of) */
+	z-index: 9999999;
+
+	/* TODO: Theme */
+	background-color: #222f3a;
+	border: 1px solid #485e6d;
+}
+
+#context-menu > hr {
+	/* TODO: Theme */
+	border-top: 2px solid #485e6d;
+	margin: 5px 5px;
+}
+
+.context-menu-item {
+	padding: 5px;
+	padding-right: 25px;
+	min-width: 100px;
+}
+
+.context-menu-item:hover {
+	/* TODO: Theme */
+	background-color: #273b48;
+}
+
+.context-menu-item > .material-icons-outlined {
+	position: relative;
+	top: 2px;
+	font-size: 15px;
+}
+
 /*---------------------------------- Global ------------------------------------------------*/
 .hidden {
 	display: none;

static/koboldai.js

@@ -4290,6 +4290,33 @@ $(document).ready(function(){
 	debugContainer.addEventListener("click", function(e) {
 		debugContainer.classList.add("hidden");
 	});
+
+	// Context menu
+	const contextMenu = document.getElementById("context-menu");
+
+	$("#gamescreen").contextmenu(function(event) {
+		contextMenu.classList.remove("hidden");
+
+		// Set position to click position
+		contextMenu.style.left = `${event.originalEvent.x}px`;
+		contextMenu.style.top = `${event.originalEvent.y}px`;
+
+		// Don't open browser context menu
+		event.preventDefault();
+
+		// Don't let the document contextmenu catch us and close our context menu
+		event.stopPropagation();
+	});
+
+	// When we make a browser context menu, close ours.
+	$(document).contextmenu(function(event) {
+		contextMenu.classList.add("hidden");
+	});
+
+	// When we click outside of our context menu, close ours.
+	$(document).click(function(event) {
+		contextMenu.classList.add("hidden");
+	});
 });
 
 document.addEventListener("keydown", function(event) {

templates/index_new.html

@@ -138,6 +138,55 @@
 		<span class="material-icons-outlined">upload_file</span>
 	</div>
 
-	
+	<div id="context-menu">
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">content_cut</span>
+			Cut
+		</div>
+
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">content_copy</span>
+			Copy
+		</div>
+
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">content_paste</span>
+			Paste
+		</div>
+		
+		<hr>
+
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">assignment</span>
+			Add to Memory
+		</div>
+
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">auto_stories</span>
+			Add to World Info Entry
+		</div>
+
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">insights</span>
+			Add as Bias
+		</div>
+
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">refresh</span>
+			Retry from here
+		</div>
+
+		<hr>
+
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">assessment</span>
+			View Token Probabilities
+		</div>
+
+		<div class="context-menu-item">
+			<span class="material-icons-outlined">account_tree</span>
+			View Token Probabilities
+		</div>
+	</div>
 </body>
 </html>