show pricing and better title format

static/js/chat.js

@@ -1450,8 +1450,18 @@
 
 		// render models
 		fillSelect($model, data.models, (el, model) => {
+			const separator = "─".repeat(24);
+
+			el.title = [
+				model.name,
+				separator,
+				`Created:\t\t${formatTimestamp(model.created)}`,
+				`Pricing/1M:\t$${fixed(model.pricing.input, 2)} In | $${fixed(model.pricing.output, 2)} Out`,
+				separator,
+				stripMarkdown(model.description),
+			].join("\n");
+
 			el.value = model.id;
-			el.title = `${model.name} (${formatTimestamp(model.created)})\n---\n${model.description}`;
 			el.textContent = model.name;
 
 			el.dataset.tags = (model.tags || []).join(",");

static/js/dropdown.js

@@ -168,6 +168,7 @@
 
 		#render() {
 			if (this.#selected === false) {
+				this.#_selected.title = "";
 				this.#_selected.innerHTML = "";
 
 				return;
@@ -175,6 +176,7 @@
 
 			const selection = this.#options[this.#selected];
 
+			this.#_selected.title = selection.title;
 			this.#_selected.innerHTML = selection.el.innerHTML;
 		}
 

static/js/markdown.js

@@ -162,4 +162,25 @@
 	window.renderInline = markdown => {
 		return marked.parseInline(markdown.trim());
 	};
+
+	window.stripMarkdown = markdown => {
+		return (
+			markdown
+				// Remove headings
+				.replace(/^#+\s*/gm, "")
+				// Remove links, keeping the link text
+				.replace(/\[([^\]]+)\]\([^\)]+\)/g, "$1")
+				// Remove bold/italics, keeping the text
+				.replace(/(\*\*|__|\*|_|~~|`)(.*?)\1/g, "$2")
+				// Remove images
+				.replace(/!\[[^\]]*\]\([^)]*\)/g, "")
+				// Remove horizontal rules
+				.replace(/^-{3,}\s*$/gm, "")
+				// Remove list markers
+				.replace(/^\s*([*-]|\d+\.)\s+/gm, "")
+				// Collapse multiple newlines into one
+				.replace(/\n{2,}/g, "\n")
+				.trim()
+		);
+	};
 })();