improvements

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}` : ""}`;
+}