improvements

static/css/chat.css

@@ -358,11 +358,16 @@ body:not(.loading) #loading {
 	background: #181926;
 	min-width: 480px;
 	min-height: 100px;
+	max-width: 100%;
 	padding: 10px 12px;
-	width: 100%;
+	width: calc(700px - 24px);
 	border-radius: 2px;
 }
 
+.message.assistant textarea.text {
+	width: calc(800px - 24px);
+}
+
 .message .text .error {
 	color: #ed8796;
 }
@@ -392,6 +397,7 @@ body:not(.loading) #loading {
 }
 
 .message .body {
+	position: relative;
 	border-bottom-left-radius: 6px;
 	border-bottom-right-radius: 6px;
 	overflow: hidden;
@@ -402,6 +408,21 @@ body:not(.loading) #loading {
 	background: #24273a;
 }
 
+.message.collapsed .body {
+	height: 32px;
+}
+
+.message.collapsed .body::before {
+	position: absolute;
+	content: "collapsed...";
+	font-style: italic;
+	color: #939ab7;
+	font-size: 12px;
+	top: 50%;
+	left: 12px;
+	transform: translateY(-50%);
+}
+
 .tool .call,
 .reasoning .toggle {
 	position: relative;
@@ -419,7 +440,7 @@ body:not(.loading) #loading {
 	background-image: url(icons/reasoning.svg);
 	position: absolute;
 	top: -2px;
-	left: -2px;
+	left: 0px;
 	width: 20px;
 	height: 20px;
 }
@@ -481,11 +502,11 @@ body:not(.loading) #loading {
 }
 
 .reasoning.expanded .toggle::after {
-	transform: rotate(180deg);
+	transform: scaleY(-100%);
 }
 
 .tool.expanded .call .name::after {
-	transform: translateY(-50%) rotate(180deg);
+	transform: translateY(-50%) scaleY(-100%);
 }
 
 .tool .call::before {
@@ -528,6 +549,29 @@ body:not(.loading) #loading {
 	pointer-events: all;
 }
 
+.message .collapse {
+	position: relative;
+	margin-right: 14px;
+}
+
+.message .collapse::before {
+	content: "";
+	transition: 150ms;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.message.collapsed .collapse::before {
+	transform: scaleY(-100%);
+}
+
+.message .collapse::after {
+	position: absolute;
+	top: 4px;
+	right: -14px;
+}
+
 .message.errored .options .copy,
 .message.errored .options .edit,
 .message.waiting .options,
@@ -769,6 +813,7 @@ select {
 	gap: 4px;
 }
 
+.message .options .collapse::after,
 #chat .option+.option::before {
 	content: "";
 	display: block;
@@ -792,6 +837,8 @@ body.loading #version,
 .message .role::before,
 .message .tag-json,
 .message .tag-search,
+.message .collapse,
+.message .collapse::before,
 .message .copy,
 .message .edit,
 .message .retry,
@@ -839,6 +886,10 @@ input.invalid {
 	border: 1px solid #ed8796;
 }
 
+.message .collapse::before {
+	background-image: url(icons/collapse.svg);
+}
+
 .pre-copy,
 .message .copy {
 	background-image: url(icons/copy.svg);

static/css/icons/collapse.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/js/chat.js

@@ -34,6 +34,16 @@
 		$password = document.getElementById("password"),
 		$login = document.getElementById("login");
 
+	const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+
+	let platform = "";
+
+	detectPlatform().then(result => {
+		platform = result;
+
+		console.info(`Detected platform: ${platform}`);
+	});
+
 	const messages = [],
 		models = {},
 		modelList = [],
@@ -143,7 +153,6 @@
 		#error = false;
 
 		#editing = false;
-		#expanded = false;
 		#state = false;
 
 		#_diff;
@@ -159,7 +168,7 @@
 		#_tool;
 		#_statistics;
 
-		constructor(role, reasoning, text, files = []) {
+		constructor(role, reasoning, text, files = [], collapsed = false) {
 			this.#id = uid();
 			this.#role = role;
 			this.#reasoning = reasoning || "";
@@ -167,7 +176,7 @@
 
 			this.#_diff = document.createElement("div");
 
-			this.#build();
+			this.#build(collapsed);
 			this.#render();
 
 			for (const file of files) {
@@ -181,9 +190,9 @@
 			}
 		}
 
-		#build() {
+		#build(collapsed) {
 			// main message div
-			this.#_message = make("div", "message", this.#role);
+			this.#_message = make("div", "message", this.#role, collapsed ? "collapsed" : "");
 
 			// message role (wrapper)
 			const _wrapper = make("div", "role", this.#role);
@@ -224,11 +233,9 @@
 			_reasoning.appendChild(_toggle);
 
 			_toggle.addEventListener("click", () => {
-				this.#expanded = !this.#expanded;
+				_reasoning.classList.toggle("expanded");
 
-				_reasoning.classList.toggle("expanded", this.#expanded);
-
-				if (this.#expanded) {
+				if (_reasoning.classList.contains("expanded")) {
 					this.#updateReasoningHeight();
 				}
 
@@ -303,6 +310,19 @@
 
 			this.#_message.appendChild(_opts);
 
+			// collapse option
+			const _optCollapse = make("button", "collapse");
+
+			_optCollapse.title = "Collapse/Expand message";
+
+			_opts.appendChild(_optCollapse);
+
+			_optCollapse.addEventListener("click", () => {
+				this.#_message.classList.toggle("collapsed");
+
+				this.#save();
+			});
+
 			// copy option
 			const _optCopy = make("button", "copy");
 
@@ -620,6 +640,10 @@
 				data.statistics = this.#statistics;
 			}
 
+			if (this.#_message.classList.contains("collapsed") && full) {
+				data.collapsed = true;
+			}
+
 			if (!data.files?.length && !data.reasoning && !data.text && !data.tool) {
 				return false;
 			}
@@ -656,7 +680,7 @@
 				console.error(err);
 
 				if (!retrying && err.message.includes("not found")) {
-					setTimeout(this.loadGenerationData.bind(this), 750, generationID, true);
+					setTimeout(this.loadGenerationData.bind(this), 1500, generationID, true);
 				}
 			}
 		}
@@ -956,12 +980,18 @@
 			model: $model.value,
 			temperature: temperature,
 			iterations: iterations,
+			tools: {
+				json: jsonMode,
+				search: searchTool,
+			},
 			reasoning: {
 				effort: effort,
 				tokens: tokens || 0,
 			},
-			json: jsonMode,
-			search: searchTool,
+			metadata: {
+				timezone: timezone,
+				platform: platform,
+			},
 			messages: messages.map(message => message.getData()).filter(Boolean),
 		};
 
@@ -975,7 +1005,7 @@
 			message.setState(false);
 
 			if (!aborted) {
-				setTimeout(message.loadGenerationData.bind(message), 750, generationID);
+				setTimeout(message.loadGenerationData.bind(message), 1000, generationID);
 			}
 
 			message = null;
@@ -1258,7 +1288,7 @@
 		}
 
 		loadValue("messages", []).forEach(message => {
-			const obj = new Message(message.role, message.reasoning, message.text, message.files || []);
+			const obj = new Message(message.role, message.reasoning, message.text, message.files || [], message.collapsed);
 
 			if (message.error) {
 				obj.showError(message.error);

static/js/lib.js

@@ -45,6 +45,8 @@ function uid() {
 }
 
 function make(tag, ...classes) {
+	classes = classes.filter(Boolean);
+
 	const el = document.createElement(tag);
 
 	if (classes.length) {
@@ -222,3 +224,94 @@ function selectFile(accept, multiple, handler, onError = false) {
 		input.click();
 	});
 }
+
+async function detectPlatform() {
+	let os, arch;
+
+	let platform = navigator.platform || "";
+
+	if (navigator.userAgentData?.getHighEntropyValues) {
+		try {
+			const data = await navigator.userAgentData.getHighEntropyValues(["platform", "architecture"]);
+
+			platform = data.platform;
+			arch = data.architecture;
+		} catch {}
+	}
+
+	const ua = navigator.userAgent || "";
+
+	// Windows
+	if (/Windows NT 10\.0/.test(ua)) os = "Windows 10/11";
+	else if (/Windows NT 6\.3/.test(ua)) os = "Windows 8.1";
+	else if (/Windows NT 6\.2/.test(ua)) os = "Windows 8";
+	else if (/Windows NT 6\.1/.test(ua)) os = "Windows 7";
+	else if (/Windows NT 6\.0/.test(ua)) os = "Windows Vista";
+	else if (/Windows NT 5\.1/.test(ua)) os = "Windows XP";
+	else if (/Windows NT 5\.0/.test(ua)) os = "Windows 2000";
+	else if (/Windows NT 4\.0/.test(ua)) os = "Windows NT 4.0";
+	else if (/Win(98|95|16)/.test(ua)) os = "Windows (legacy)";
+	else if (/Windows/.test(ua)) os = "Windows (unknown version)";
+	// Mac OS
+	else if (/Mac OS X/.test(ua)) {
+		os = "macOS";
+
+		const match = ua.match(/Mac OS X ([0-9_]+)/);
+
+		if (match) {
+			os += ` ${match[1].replace(/_/g, ".")}`;
+		} else {
+			os += " (unknown version)";
+		}
+	}
+	// Chrome OS
+	else if (/CrOS/.test(ua)) {
+		os = "Chrome OS";
+
+		const match = ua.match(/CrOS [^ ]+ ([0-9.]+)/);
+
+		if (match) {
+			os += ` ${match[1]}`;
+		}
+	}
+	// Linux (special)
+	else if (/FreeBSD/.test(ua)) os = "FreeBSD";
+	else if (/OpenBSD/.test(ua)) os = "OpenBSD";
+	else if (/NetBSD/.test(ua)) os = "NetBSD";
+	else if (/SunOS/.test(ua)) os = "Solaris";
+	// Linux (generic)
+	else if (/Linux/.test(ua)) {
+		if (/Ubuntu/i.test(ua)) os = "Ubuntu";
+		else if (/Debian/i.test(ua)) os = "Debian";
+		else if (/Fedora/i.test(ua)) os = "Fedora";
+		else if (/CentOS/i.test(ua)) os = "CentOS";
+		else if (/Red Hat/i.test(ua)) os = "Red Hat";
+		else if (/SUSE/i.test(ua)) os = "SUSE";
+		else if (/Gentoo/i.test(ua)) os = "Gentoo";
+		else if (/Arch/i.test(ua)) os = "Arch Linux";
+		else os = "Linux";
+	}
+	// Mobile
+	else if (/Android/.test(ua)) os = "Android";
+	else if (/iPhone|iPad|iPod/.test(ua)) os = "iOS";
+
+	// We still have no OS?
+	if (!os && platform) {
+		if (platform.includes("Win")) os = "Windows";
+		else if (/Mac/.test(platform)) os = "macOS";
+		else if (/Linux/.test(platform)) os = "Linux";
+		else os = platform;
+	}
+
+	// Detect architecture
+	if (!arch) {
+		if (/WOW64|Win64|x64|amd64/i.test(ua)) arch = "x64";
+		else if (/arm64|aarch64/i.test(ua)) arch = "arm64";
+		else if (/i[0-9]86|x86/i.test(ua)) arch = "x86";
+		else if (/ppc/i.test(ua)) arch = "ppc";
+		else if (/sparc/i.test(ua)) arch = "sparc";
+		else if (platform && /arm/i.test(platform)) arch = "arm";
+	}
+
+	return `${os || "Unknown OS"}${arch ? `, ${arch}` : ""}`;
+}