enh: image compression in channels

src/lib/components/channel/MessageInput.svelte

@@ -327,7 +327,9 @@
 					let imageUrl = event.target.result;
 
 					// Compress the image if settings or config require it
-					imageUrl = await compressImageHandler(imageUrl, $settings, $config);
+					if ($settings?.imageCompression && $settings?.imageCompressionInChannels) {
+						imageUrl = await compressImageHandler(imageUrl, $settings, $config);
+					}
 
 					files = [
 						...files,

src/lib/components/chat/Settings/Interface.svelte

@@ -62,6 +62,7 @@
 		width: '',
 		height: ''
 	};
+	let imageCompressionInChannels = true;
 
 	// chat export
 	let stylizedPdfExport = true;
@@ -164,6 +165,11 @@
 		saveSettings({ imageCompression });
 	};
 
+	const toggleImageCompressionInChannels = async () => {
+		imageCompressionInChannels = !imageCompressionInChannels;
+		saveSettings({ imageCompressionInChannels });
+	};
+
 	const toggleChatFadeStreamingText = async () => {
 		chatFadeStreamingText = !chatFadeStreamingText;
 		saveSettings({ chatFadeStreamingText: chatFadeStreamingText });
@@ -375,6 +381,7 @@
 
 		imageCompression = $settings?.imageCompression ?? false;
 		imageCompressionSize = $settings?.imageCompressionSize ?? { width: '', height: '' };
+		imageCompressionInChannels = $settings?.imageCompressionInChannels ?? true;
 
 		defaultModelId = $settings?.models?.at(0) ?? '';
 		if ($config?.default_models) {
@@ -1369,6 +1376,29 @@
 						</div>
 					</div>
 				</div>
+
+				<div>
+					<div class=" py-0.5 flex w-full justify-between">
+						<div id="image-compression-label" class=" self-center text-xs">
+							{$i18n.t('Compress Images in Channels')}
+						</div>
+
+						<button
+							aria-labelledby="image-compression-label"
+							class="p-1 px-3 text-xs flex rounded-sm transition"
+							on:click={() => {
+								toggleImageCompressionInChannels();
+							}}
+							type="button"
+						>
+							{#if imageCompressionInChannels === true}
+								<span class="ml-2 self-center">{$i18n.t('On')}</span>
+							{:else}
+								<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+							{/if}
+						</button>
+					</div>
+				</div>
 			{/if}
 		</div>
 	</div>