add dump button

static/css/chat.css

@@ -1011,6 +1011,7 @@ body.loading #version,
 #scrolling,
 #import,
 #export,
+#dump,
 #clear,
 #upload,
 #add,
@@ -1170,6 +1171,7 @@ label[for="reasoning-tokens"] {
 #scrolling,
 #import,
 #export,
+#dump,
 #clear {
 	position: unset !important;
 }
@@ -1210,6 +1212,15 @@ label[for="reasoning-tokens"] {
 	background-image: url(icons/export.svg);
 }
 
+#dump {
+	background-image: url(icons/dump.svg);
+}
+
+#dump.loading {
+	animation: rotating 1.2s linear infinite;
+	background-image: url(icons/spinner.svg);
+}
+
 #clear {
 	background-image: url(icons/trash.svg);
 }

static/css/icons/dump.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

static/index.html

@@ -99,6 +99,7 @@
 					<div class="option">
 						<button id="export" title="Export the entire chat as a JSON file"></button>
 						<button id="import" title="Import a chat form a JSON file"></button>
+						<button id="dump" title="Dump the actual OpenRouter request for the current chat"></button>
 						<button id="clear" title="Clear the entire chat"></button>
 					</div>
 				</div>

static/js/chat.js

@@ -37,6 +37,7 @@
 		$scrolling = document.getElementById("scrolling"),
 		$export = document.getElementById("export"),
 		$import = document.getElementById("import"),
+		$dump = document.getElementById("dump"),
 		$clear = document.getElementById("clear"),
 		$authentication = document.getElementById("authentication"),
 		$authError = document.getElementById("auth-error"),
@@ -72,6 +73,7 @@
 		isResizing = false,
 		scrollResize = false,
 		isUploading = false,
+		isDumping = false,
 		totalCost = 0;
 
 	function updateTotalCost() {
@@ -1085,15 +1087,7 @@
 		return true;
 	}
 
-	function generate(cancel = false, noPush = false) {
+	function buildRequest(noPush = false) {
-		if (abortNow() && cancel) {
-			return;
-		}
-
-		if (autoScrolling) {
-			setFollowTail(true);
-		}
-
 		let temperature = parseFloat($temperature.value);
 
 		if (Number.isNaN(temperature) || temperature < 0 || temperature > 2) {
@@ -1127,11 +1121,7 @@
 			pushMessage();
 		}
 
-		const controller = new AbortController();
+		return {
-
-		$chat.classList.add("completing");
-
-		const body = {
 			prompt: $prompt.value,
 			model: $model.value,
 			temperature: temperature,
@@ -1150,6 +1140,22 @@
 			},
 			messages: messages.map(message => message.getData()).filter(Boolean),
 		};
+	}
+
+	function generate(cancel = false, noPush = false) {
+		if (abortNow() && cancel) {
+			return;
+		}
+
+		if (autoScrolling) {
+			setFollowTail(true);
+		}
+
+		const body = buildRequest(noPush);
+
+		const controller = new AbortController();
+
+		$chat.classList.add("completing");
 
 		let message, generationID, stopTimeout;
 
@@ -1995,6 +2001,42 @@
 		restore();
 	});
 
+	$dump.addEventListener("click", async () => {
+		if (isDumping) {
+			return;
+		}
+
+		isDumping = true;
+
+		$dump.classList.add("loading");
+
+		const body = buildRequest(true);
+
+		try {
+			const response = await fetch("/-/dump", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify(body),
+			});
+
+			const json = await response.json();
+
+			if (!response.ok) {
+				throw new Error(json?.error || response.statusText);
+			}
+
+			download("request.json", "application/json", JSON.stringify(json.request, null, 4));
+		} catch (err) {
+			notify(err);
+		}
+
+		$dump.classList.remove("loading");
+
+		isDumping = false;
+	});
+
 	$scrolling.addEventListener("click", () => {
 		autoScrolling = !autoScrolling;