Sync widgets demo

packages/widgets/src/lib/components/InferenceWidget/shared/WidgetFooter/WidgetFooter.svelte

@@ -2,7 +2,7 @@
 	import IconCode from "../../..//Icons/IconCode.svelte";
 	import IconMaximize from "../../..//Icons/IconMaximize.svelte";
 
-	export let onClickMaximizeBtn: () => void;
+	export let isMaximized = false;
 	export let outputJson: string;
 	export let isDisabled = false;
 
@@ -22,9 +22,13 @@
 			JSON Output
 		</button>
 	{/if}
-	<button class="ml-auto flex items-center" on:click|preventDefault={onClickMaximizeBtn}>
+	<button class="ml-auto flex items-center" on:click|preventDefault={() => (isMaximized = !isMaximized)}>
 		<IconMaximize classNames="mr-1" />
-		Maximize
+		{#if !isMaximized}
+			Maximize
+		{:else}
+			Minimize
+		{/if}
 	</button>
 </div>
 {#if outputJson && isOutputJsonVisible}

packages/widgets/src/lib/components/InferenceWidget/shared/WidgetWrapper/WidgetWrapper.svelte

@@ -104,10 +104,6 @@
 			}
 		})();
 	});
-
-	function onClickMaximizeBtn() {
-		isMaximized = !isMaximized;
-	}
 </script>
 
 {#if isDisabled && !inputSamples.length}
@@ -120,7 +116,7 @@
 		 {!modelLoadInfo ? 'hidden' : ''}"
 	>
 		{#if isMaximized}
-			<button class="absolute right-12 top-6" on:click={onClickMaximizeBtn}>
+			<button class="absolute right-12 top-6" on:click={() => (isMaximized = !isMaximized)}>
 				<IconCross classNames="text-xl text-gray-500 hover:text-black" />
 			</button>
 		{/if}
@@ -150,6 +146,6 @@
 			<WidgetModelLoading estimatedTime={modelLoading.estimatedTime} />
 		{/if}
 		<slot name="bottom" />
-		<WidgetFooter {onClickMaximizeBtn} {outputJson} {isDisabled} />
+		<WidgetFooter bind:isMaximized {outputJson} {isDisabled} />
 	</div>
 {/if}