fix: correctly handle clipboard images in prompts

The textVariableHandler was using URL.createObjectURL() for clipboard images, which created a blob URL instead of the required base64-encoded data URL. This caused an "illegal base64 data" error when sending messages with images pasted via a {{CLIPBOARD}} prompt.

This commit updates the handler to use FileReader.readAsDataURL() to properly encode the image, aligning it with the existing on:paste logic. Additionally, it adds error handling for navigator.clipboard.read() to address potential permission issues in Firefox.

src/lib/components/chat/MessageInput.svelte

@@ -168,29 +168,30 @@
 				return '{{CLIPBOARD}}';
 			});
 
-			const clipboardItems = await navigator.clipboard.read();
+			const clipboardItems = await navigator.clipboard.read().catch((err) => {
+				console.error('Failed to read clipboard items:', err);
+				return [];
+			});
 
-			let imageUrl = null;
 			for (const item of clipboardItems) {
-				// Check for known image types
 				for (const type of item.types) {
 					if (type.startsWith('image/')) {
 						const blob = await item.getType(type);
-						imageUrl = URL.createObjectURL(blob);
+						const reader = new FileReader();
+						reader.onload = (event) => {
+							files = [
+								...files,
+								{
+									type: 'image',
+									url: event.target.result as string
+								}
+							];
+						};
+						reader.readAsDataURL(blob);
 					}
 				}
 			}
 
-			if (imageUrl) {
-				files = [
-					...files,
-					{
-						type: 'image',
-						url: imageUrl
-					}
-				];
-			}
-
 			text = text.replaceAll('{{CLIPBOARD}}', clipboardText);
 		}