better disabled

src/routes/canvas/chat-node.svelte

@@ -4,7 +4,7 @@
 	import { images } from "$lib/state/images.svelte.js";
 	import { models } from "$lib/state/models.svelte";
 	import { token } from "$lib/state/token.svelte";
-	import type { Model } from "$lib/types.js";
+	import { PipelineTag, type Model } from "$lib/types.js";
 	import { AsyncQueue } from "$lib/utils/queue.js";
 	import { InferenceClient } from "@huggingface/inference";
 	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
@@ -81,23 +81,42 @@
 		try {
 			const client = new InferenceClient(token.value);
 
-			const messages: ChatCompletionInputMessage[] = history.flatMap(n => {
-				const res: ChatCompletionInputMessage[] = [];
-				if (n.data.query) {
-					res.push({
-						role: "user",
-						content: n.data.query,
-					});
-				}
-				if (n.data.response) {
-					res.push({
-						role: "assistant",
-						content: n.data.response,
-					});
-				}
-
-				return res;
-			});
+			const messages: ChatCompletionInputMessage[] = await Promise.all(
+				history.flatMap(async n => {
+					const res: ChatCompletionInputMessage[] = [];
+					if (n.data.query) {
+						let content: string | Array<{ type: string; text?: string; image_url?: { url: string } }> = n.data.query;
+
+						// If node has images, convert to multimodal format
+						if (n.data.imageIds && n.data.imageIds.length > 0) {
+							const urls = await Promise.all(n.data.imageIds.map(k => images.get(k)));
+							content = [
+								{
+									type: "text",
+									text: n.data.query,
+								},
+								...n.data.imageIds.map((_imgKey, i) => ({
+									type: "image_url",
+									image_url: { url: urls[i] as string },
+								})),
+							];
+						}
+
+						res.push({
+							role: "user",
+							content,
+						});
+					}
+					if (n.data.response) {
+						res.push({
+							role: "assistant",
+							content: n.data.response,
+						});
+					}
+
+					return res;
+				}),
+			).then(arr => arr.flat());
 
 			const stream = client.chatCompletionStream(
 				{
@@ -273,10 +292,14 @@
 		return { x: x + 150, y: y + 150 };
 	}
 
+	const currentModel = $derived(models.all.find(m => m.id === data.modelId));
+	const supportsImgUpload = $derived(currentModel?.pipeline_tag === PipelineTag.ImageTextToText);
+
 	const fileQueue = new AsyncQueue();
 	const fileUpload = new FileUpload({
 		accept: "image/*",
 		multiple: true,
+		disabled: () => !supportsImgUpload,
 		async onAccept(file) {
 			fileQueue.add(async () => {
 				const key = await images.upload(file);
@@ -289,7 +312,6 @@
 				if (fileQueue.queue.length <= 1) fileUpload.clear();
 			});
 		},
-		// TODO: disable on models that don't support img upload
 	});
 </script>
 
@@ -336,8 +358,12 @@
 					<div class="flex items-center gap-2">
 						<button
 							type="button"
-							class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-gray-600 transition-colors hover:bg-gray-200 hover:text-gray-900"
-							title="Attach file"
+							class="flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-gray-600 transition-colors"
+							class:opacity-50={!supportsImgUpload}
+							class:cursor-not-allowed={!supportsImgUpload}
+							class:hover:bg-gray-200={supportsImgUpload}
+							class:hover:text-gray-900={supportsImgUpload}
+							title={supportsImgUpload ? "Attach file" : "Model doesn't support images"}
 							{...fileUpload.trigger}
 						>
 							<IconAttachment class="h-4 w-4" />