fix(flow): fix chat mode modal + toggle (#7296)

* use fixed for modals

* fix chat toggle

frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte

@@ -82,7 +82,7 @@
 {#if open}
 	<div
 		transition:fadeFast|local
-		class={'absolute top-0 bottom-0 left-0 right-0 z-[5000]'}
+		class={'fixed top-0 bottom-0 left-0 right-0 z-[5000]'}
 		role="dialog"
 	>
 		<div

frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte

@@ -32,7 +32,7 @@
 {#if open}
 	<div
 		transition:fadeFast|local
-		class={'absolute top-0 bottom-0 left-0 right-0 z-[5000]'}
+		class={'fixed top-0 bottom-0 left-0 right-0 z-[5000]'}
 		role="dialog"
 	>
 		<div

frontend/src/lib/components/common/modal/Modal.svelte

@@ -45,7 +45,7 @@
 	<div
 		on:click={() => (open = false)}
 		transition:fadeFast|local
-		class={'absolute top-0 bottom-0 left-0 right-0 z-[9999]'}
+		class={'fixed top-0 bottom-0 left-0 right-0 z-[9999]'}
 		role="dialog"
 		tabindex="-1"
 	>

frontend/src/lib/components/flows/content/FlowInput.svelte

@@ -68,7 +68,7 @@
 		flowInputEditorState
 	} = getContext<FlowEditorContext>('FlowEditorContext')
 
-	let chatInputEnabled = $derived(Boolean(flowStore.val.value?.chat_input_enabled))
+	let chatInputEnabled = $state(Boolean(flowStore.val.value?.chat_input_enabled))
 	let shouldUseStreaming = $derived.by(() => {
 		const modules = flowStore.val.value?.modules
 		const lastModule = modules && modules.length > 0 ? modules[modules.length - 1] : undefined
@@ -117,6 +117,10 @@
 		}, 100)
 	})
 
+	$effect(() => {
+		chatInputEnabled = Boolean(flowStore.val.value?.chat_input_enabled)
+	})
+
 	const getDropdownItems = () => {
 		return [
 			{
@@ -398,7 +402,7 @@
 	}
 
 	function handleToggleChatMode() {
-		if (!chatInputEnabled) {
+		if (!flowStore.val.value?.chat_input_enabled) {
 			// Check if there are existing inputs
 			if (hasOtherInputs()) {
 				showChatModeWarning = true
@@ -499,7 +503,10 @@
 	title="Enable Chat Mode?"
 	confirmationText="Continue"
 	onConfirmed={enableChatMode}
-	onCanceled={() => (showChatModeWarning = false)}
+	onCanceled={() => {
+		showChatModeWarning = false
+		chatInputEnabled = false
+	}}
 >
 	<p class="text-sm text-secondary">
 		Enabling Chat Mode will replace all existing flow inputs with a single
@@ -516,9 +523,8 @@
 		{#if !disabled}
 			<Toggle
 				size="sm"
-				checked={chatInputEnabled}
-				on:click={(e) => {
-					e.preventDefault()
+				bind:checked={chatInputEnabled}
+				on:change={(e) => {
 					handleToggleChatMode()
 				}}
 				options={{