estimate tokens

static/css/chat.css

@@ -833,6 +833,8 @@ body:not(.loading) #loading {
 	padding-right: 14px;
 	border-radius: 6px;
 	border: 1px solid #363a4f;
+	overflow: hidden;
+	min-width: 140px;
 }
 
 .files .file .name {
@@ -847,14 +849,32 @@ body:not(.loading) #loading {
 	flex-shrink: 0;
 }
 
+.files .file .tokens {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	backdrop-filter: blur(4px);
+	font-size: 13px;
+	pointer-events: none;
+	opacity: 0;
+	transition: 150ms;
+}
+
+.files .file:hover .tokens {
+	opacity: 1;
+}
+
 .files .file button.remove {
 	content: "";
 	position: absolute;
 	background-image: url(icons/remove.svg);
-	width: 16px;
-	height: 16px;
-	top: 1px;
-	right: 1px;
+	top: 0;
+	right: 0;
 	opacity: 0;
 	transition: 150ms;
 }
@@ -1115,6 +1135,11 @@ label[for="reasoning-tokens"] {
 	background-image: url(icons/attach.svg);
 }
 
+#upload.loading {
+	animation: rotating 1.2s linear infinite;
+	background-image: url(icons/spinner.svg);
+}
+
 #json,
 #search,
 #scrolling,

static/js/chat.js

@@ -71,6 +71,7 @@
 		activeMessage = null,
 		isResizing = false,
 		scrollResize = false,
+		isUploading = false,
 		totalCost = 0;
 
 	function updateTotalCost() {
@@ -1476,6 +1477,31 @@
 		});
 	}
 
+	async function resolveTokenCount(str) {
+		try {
+			const response = await fetch("/-/tokenize", {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({
+						string: str,
+					}),
+				}),
+				data = await response.json();
+
+			if (!response.ok) {
+				throw new Error(data?.error || response.statusText);
+			}
+
+			return data.tokens;
+		} catch (err) {
+			console.error(err);
+		}
+
+		return false;
+	}
+
 	let attachments = [];
 
 	function buildFileElement(file, callback) {
@@ -1490,6 +1516,15 @@
 
 		_file.appendChild(_name);
 
+		// token count
+		if ("tokens" in file) {
+			const _tokens = make("div", "tokens");
+
+			_tokens.textContent = `~${new Intl.NumberFormat("en-US").format(file.tokens)} tokens`;
+
+			_file.appendChild(_tokens);
+		}
+
 		// remove button
 		const _remove = make("button", "remove");
 
@@ -1718,6 +1753,10 @@
 	});
 
 	$upload.addEventListener("click", async () => {
+		if (isUploading) {
+			return;
+		}
+
 		const files = await selectFile(
 			// the ultimate list
 			"text/*",
@@ -1744,9 +1783,29 @@
 			return;
 		}
 
+		isUploading = true;
+
+		$upload.classList.add("loading");
+
+		const promises = [];
+
+		for (const file of files) {
+			promises.push(
+				resolveTokenCount(file.content).then(tokens => {
+					file.tokens = tokens;
+				})
+			);
+		}
+
+		await Promise.all(promises);
+
 		for (const file of files) {
 			pushAttachment(file);
 		}
+
+		$upload.classList.remove("loading");
+
+		isUploading = false;
 	});
 
 	$add.addEventListener("click", () => {