tags and caching

static/css/chat.css

@@ -34,13 +34,13 @@
 }
 
 ::-webkit-scrollbar-track {
-	background: #181926;
+	background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
 	background-color: #cad3f5;
+	border: none;
 	border-radius: 4px;
-	border: 1px solid #181926;
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -49,7 +49,7 @@
 
 * {
 	scrollbar-width: thin;
-	scrollbar-color: #cad3f5 #181926;
+	scrollbar-color: #cad3f5 transparent;
 }
 
 html,

static/css/dropdown.css

@@ -48,6 +48,14 @@
 	overflow-y: auto;
 }
 
+.dropdown .selected,
+.dropdown .opt {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 5px;
+}
+
 .dropdown .opt {
 	padding: 4px 6px;
 	cursor: pointer;
@@ -66,6 +74,34 @@
 	display: none;
 }
 
+.dropdown .label {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	max-width: 300px;
+}
+
+.dropdown .tags {
+	display: flex;
+	gap: 2px;
+}
+
+.dropdown .tags .tag {
+	width: 18px;
+	height: 18px;
+	background-position: center;
+	background-size: contain;
+	background-repeat: no-repeat;
+}
+
+.tags .tag.reasoning {
+	background-image: url(icons/tags/reasoning.svg)
+}
+
+.tags .tag.tools {
+	background-image: url(icons/tags/tools.svg)
+}
+
 .dropdown .search {
 	background: #2a2e41;
 	border-top: 2px solid #494d64;

static/css/icons/tags/reasoning.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/css/icons/tags/tools.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

@@ -448,8 +448,11 @@
 			const el = document.createElement("option");
 
 			el.value = model.id;
+			el.title = model.description;
 			el.textContent = model.name;
 
+			el.dataset.tags = (model.tags || []).join(",");
+
 			$model.appendChild(el);
 		}
 

static/js/dropdown.js

@@ -15,9 +15,15 @@
 			this.#search = "searchable" in el.dataset;
 
 			this.#_select.querySelectorAll("option").forEach((option) => {
+				const tags = option.dataset.tags?.trim();
+
 				this.#options.push({
 					value: option.value,
 					label: option.textContent,
+
+					title: option.title || false,
+					tags: tags ? tags.split(",") : [],
+
 					search: searchable(option.textContent),
 				});
 			});
@@ -75,9 +81,10 @@
 
 			// options
 			for (const option of this.#options) {
+				// option wrapper
 				const _opt = make("div", "opt");
 
-				_opt.textContent = option.label;
+				_opt.title = option.title || "";
 
 				_opt.addEventListener("click", () => {
 					this.#_select.value = option.value;
@@ -85,6 +92,30 @@
 					this.#_dropdown.classList.remove("open");
 				});
 
+				// option label
+				const _label = make("div", "label");
+
+				_label.title = option.label;
+				_label.textContent = option.label;
+
+				_opt.appendChild(_label);
+
+				// option tags (optional)
+				if (option.tags?.length) {
+					const _tags = make("div", "tags");
+
+					for (const tag of option.tags) {
+						const _tag = make("div", "tag", tag);
+
+						_tag.title = tag;
+
+						_tags.appendChild(_tag);
+					}
+
+					_opt.appendChild(_tags);
+				}
+
+				// add to options
 				_options.appendChild(_opt);
 
 				option.el = _opt;
@@ -128,14 +159,14 @@
 
 		#render() {
 			if (this.#selected === false) {
-				this.#_selected.textContent = "";
+				this.#_selected.innerHTML = "";
 
 				return;
 			}
 
 			const selection = this.#options[this.#selected];
 
-			this.#_selected.textContent = selection.label;
+			this.#_selected.innerHTML = selection.el.innerHTML;
 		}
 
 		#filter() {

static/js/lib.js

@@ -45,7 +45,9 @@ function uid() {
 function make(tag, ...classes) {
 	const el = document.createElement(tag);
 
-	el.classList.add(...classes);
+	if (classes.length) {
+		el.classList.add(...classes);
+	}
 
 	return el;
 }