refac: image max compression size

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

@@ -9,6 +9,7 @@
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import ManageFloatingActionButtonsModal from './Interface/ManageFloatingActionButtonsModal.svelte';
+	import ManageImageCompressionModal from './Interface/ManageImageCompressionModal.svelte';
 	const dispatch = createEventDispatcher();
 
 	const i18n = getContext('i18n');
@@ -93,6 +94,7 @@
 	let iframeSandboxAllowForms = false;
 
 	let showManageFloatingActionButtonsModal = false;
+	let showManageImageCompressionModal = false;
 
 	const toggleLandingPageMode = async () => {
 		landingPageMode = landingPageMode === '' ? 'chat' : '';
@@ -260,6 +262,14 @@
 	}}
 />
 
+<ManageImageCompressionModal
+	bind:show={showManageImageCompressionModal}
+	size={imageCompressionSize}
+	onSave={(size) => {
+		saveSettings({ imageCompressionSize: size });
+	}}
+/>
+
 <form
 	id="tab-interface"
 	class="flex flex-col h-full justify-between space-y-3 text-sm"
@@ -1154,7 +1164,20 @@
 						{$i18n.t('Image Compression')}
 					</div>
 
-					<div class="flex items-center gap-2 p-1">
+					<div class="flex items-center gap-3 p-1">
+						{#if imageCompression}
+							<button
+								class="text-xs text-gray-700 dark:text-gray-400 underline"
+								type="button"
+								aria-label={$i18n.t('Open Modal To Manage Image Compression')}
+								on:click={() => {
+									showManageImageCompressionModal = true;
+								}}
+							>
+								{$i18n.t('Manage')}
+							</button>
+						{/if}
+
 						<Switch
 							ariaLabelledbyId="image-compression-label"
 							tooltip={true}
@@ -1168,39 +1191,6 @@
 			</div>
 
 			{#if imageCompression}
-				<div>
-					<div class=" py-0.5 flex w-full justify-between text-xs">
-						<div id="image-compression-size-label" class=" self-center text-xs">
-							{$i18n.t('Image Max Compression Size')}
-						</div>
-
-						<div class="p-1">
-							<label class="sr-only" for="image-comp-width"
-								>{$i18n.t('Image Max Compression Size width')}</label
-							>
-							<input
-								bind:value={imageCompressionSize.width}
-								type="number"
-								aria-labelledby="image-comp-width"
-								class="w-20 bg-transparent outline-hidden text-center"
-								min="0"
-								placeholder={$i18n.t('Width')}
-							/>x
-							<label class="sr-only" for="image-comp-height"
-								>{$i18n.t('Image Max Compression Size height')}</label
-							>
-							<input
-								bind:value={imageCompressionSize.height}
-								type="number"
-								aria-labelledby="image-comp-height"
-								class="w-20 bg-transparent outline-hidden text-center"
-								min="0"
-								placeholder={$i18n.t('Height')}
-							/>
-						</div>
-					</div>
-				</div>
-
 				<div>
 					<div class=" py-0.5 flex w-full justify-between">
 						<div id="image-compression-in-channels-label" class=" self-center text-xs">