image generation wip

static/css/chat.css

@@ -363,6 +363,18 @@ body:not(.loading) #loading {
 	max-width: 800px;
 }
 
+.message.loading .text::after {
+	content: "";
+	display: block;
+	position: relative;
+	width: 32px;
+	height: 3px;
+	background: #cad3f5;
+	animation: swivel 1.5s ease-in-out infinite;
+	opacity: 0.5;
+	margin-top: 5px;
+}
+
 .message:not(.editing) textarea.text,
 .message.editing div.text {
 	display: none;
@@ -1256,7 +1268,7 @@ label[for="reasoning-tokens"] {
 	}
 
 	50% {
-		left: calc(100%);
+		left: 100%;
 		transform: translateX(-100%);
 	}
 }

static/css/dropdown.css

@@ -111,6 +111,10 @@
 	background-image: url(icons/tags/json.svg)
 }
 
+.tags .tag.image {
+	background-image: url(icons/tags/image.svg)
+}
+
 .tags .tag.all {
 	background-image: url(icons/tags/all.svg)
 }

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

@@ -146,6 +146,7 @@
 
 		#editing = false;
 		#state = false;
+		#loading = false;
 
 		#_diff;
 		#pending = {};
@@ -750,6 +751,16 @@
 			this.#save();
 		}
 
+		setLoading(loading) {
+			if (this.#loading === loading) {
+				return;
+			}
+
+			this.#loading = loading;
+
+			this.#_message.classList.toggle("loading", this.#loading);
+		}
+
 		setState(state) {
 			if (this.#state === state) {
 				return;
@@ -1032,7 +1043,21 @@
 			messages: messages.map(message => message.getData()).filter(Boolean),
 		};
 
-		let message, generationID;
+		let message, generationID, timeout;
+
+		function stopLoadingTimeout() {
+			clearTimeout(timeout);
+
+			message?.setLoading(false);
+		}
+
+		function startLoadingTimeout() {
+			clearTimeout(timeout);
+
+			timeout = setTimeout(() => {
+				message?.setLoading(true);
+			}, 1500);
+		}
 
 		function finish(aborted = false) {
 			if (!message) {
@@ -1076,6 +1101,8 @@
 				signal: chatController.signal,
 			},
 			chunk => {
+				stopLoadingTimeout();
+
 				if (chunk === "aborted") {
 					chatController = null;
 
@@ -1135,6 +1162,8 @@
 
 						break;
 				}
+
+				startLoadingTimeout();
 			}
 		);
 	}