Merge pull request #1157 from writer/AB-591

feat(ui): close socket on inactivity - AB-591

Author: madeindjs

src/ui/src/builder/BuilderApp.vue

@@ -114,6 +114,7 @@
 
 		<div id="modal"></div>
 
+		<BuilderAppSocketTimeoutModal />
 		<!-- TOOLTIP -->
 
 		<BuilderTooltip id="tooltip" />
@@ -150,6 +151,8 @@ import BuilderCollaborationTracker from "./BuilderCollaborationTracker.vue";
 import BaseNote from "@/components/core/base/BaseNote.vue";
 import ShareResizeVertical from "@/components/shared/ShareResizeVertical.vue";
 import { defineAsyncComponentWithLoader } from "@/utils/defineAsyncComponentWithLoader";
+import BuilderAppSocketTimeoutModal from "./BuilderAppSocketTimeoutModal.vue";
+import { useSocketTimeout } from "./useSocketTimeout";
 
 provide(injectionKeys.isAutogenModalShown, ref(false));
 
@@ -178,6 +181,8 @@ const collaborationManager = inject(injectionKeys.collaborationManager);
 const tracking = useWriterTracking(wf);
 const toasts = useToasts();
 
+provide(injectionKeys.socketTimeout, useSocketTimeout(wf, 10));
+
 const noteEl = useTemplateRef("noteEl");
 
 function refreshNotesPosition() {

src/ui/src/builder/BuilderAppSocketTimeoutModal.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import injectionKeys from "@/injectionKeys";
+import WdsModal from "@/wds/WdsModal.vue";
+import type { ModalAction } from "@/wds/WdsModal.vue";
+import { computed, inject } from "vue";
+
+const socketTimeout = inject(injectionKeys.socketTimeout)!;
+
+const actions = computed<ModalAction[]>(() => [
+	{
+		desc: "Reconnect",
+		loading: socketTimeout.reconnecting.value,
+		fn: () => {
+			socketTimeout.reconnect();
+		},
+	},
+]);
+
+const description = `You’ve been disconnected because you were inactive for ${socketTimeout.timeoutMin} minutes. Click below to reconnect and pick up where you left off.`;
+</script>
+
+<template>
+	<WdsModal
+		v-if="socketTimeout.socketClosed.value"
+		title="Session Expired"
+		:description
+		:actions
+	>
+	</WdsModal>
+</template>

src/ui/src/builder/panels/BuilderCodePanel.vue

@@ -168,7 +168,10 @@ const {
 	save,
 } = useSourceFiles(wf);
 
-const { enablePrevention, disablePrevention } = useUnsavedChangesPrevention();
+const socketTimeout = inject(injectionKeys.socketTimeout);
+
+const { enablePrevention, disablePrevention } =
+	useUnsavedChangesPrevention(socketTimeout);
 
 const {
 	showModal,

src/ui/src/builder/useSocketTimeout.ts

@@ -0,0 +1,71 @@
+import { useAbortController } from "@/composables/useAbortController";
+import type { Core } from "@/writerTypes";
+import { ref, onMounted, watch } from "vue";
+
+/**
+ * @param timeoutMin the inactivity time required to close the socket
+ */
+export function useSocketTimeout(wf: Core, timeoutMin: number) {
+	const timeoutMs = timeoutMin * 60 * 1_000;
+
+	let timer = undefined;
+
+	const socketClosed = ref(false);
+	const reconnecting = ref(false);
+	const prevent = ref(false);
+
+	function schedule() {
+		if (document.visibilityState === "visible") return;
+		clearSchedule();
+		timer = setTimeout(() => {
+			wf.stopSync();
+			socketClosed.value = true;
+		}, timeoutMs);
+	}
+
+	function clearSchedule() {
+		if (timer) clearTimeout(timer);
+	}
+
+	watch(prevent, () => {
+		if (prevent.value) clearSchedule();
+	});
+
+	async function reconnect() {
+		reconnecting.value = true;
+		try {
+			await wf.init();
+			socketClosed.value = false;
+		} catch {
+			window.location.reload(); // fallback to full reload
+		} finally {
+			reconnecting.value = false;
+		}
+	}
+
+	const abort = useAbortController();
+
+	onMounted(() => {
+		document.addEventListener(
+			"visibilitychange",
+			() => {
+				if (document.visibilityState === "visible") {
+					clearSchedule();
+				} else if (!prevent.value) {
+					schedule();
+				}
+			},
+			{ signal: abort.signal },
+		);
+	});
+
+	return {
+		timeoutMin,
+		socketClosed,
+		reconnecting,
+		prevent,
+		clearSchedule,
+		schedule,
+		reconnect,
+	};
+}

src/ui/src/composables/useBlueprintRun.ts

@@ -1,7 +1,8 @@
-import type { generateCore } from "@/core";
-import { generateBuilderManager } from "@/builder/builderManager";
 import { computed, readonly, Ref, ref, unref } from "vue";
 import { useWriterTracking } from "./useWriterTracking";
+import type { BuilderManager, Core } from "@/writerTypes";
+import { inject } from "vue";
+import injectionKeys from "@/injectionKeys";
 
 interface RunBlueprintResponse {
 	ok: boolean;
@@ -19,7 +20,7 @@ interface RunBlueprintResponse {
 }
 
 function runBlueprint(
-	wf: ReturnType<typeof generateCore>,
+	wf: Core,
 	blueprintComponentId: string,
 	branchId?: string,
 ) {
@@ -44,27 +45,21 @@ function runBlueprint(
 		}
 
 		wf.forwardEvent(
-			branchId ?
-			new CustomEvent(
-				"wf-run-blueprint-branch", 
-				{
-					detail: {
-						callback,
-						handler: "run_blueprint_branch",
-						payload: { "branch_id": branchId }
-					},
-				}
-			) :
-			new CustomEvent(
-				"wf-run-blueprint", 
-				{
-					detail: {
-						callback,
-						handler: "run_blueprint_by_id",
-						payload: { blueprint_id: blueprintComponentId },
-					},
-				}
-			),
+			branchId
+				? new CustomEvent("wf-run-blueprint-branch", {
+						detail: {
+							callback,
+							handler: "run_blueprint_branch",
+							payload: { branch_id: branchId },
+						},
+					})
+				: new CustomEvent("wf-run-blueprint", {
+						detail: {
+							callback,
+							handler: "run_blueprint_by_id",
+							payload: { blueprint_id: blueprintComponentId },
+						},
+					}),
 			null,
 			true,
 		).catch((err) => {
@@ -74,10 +69,7 @@ function runBlueprint(
 	});
 }
 
-function stopBlueprintRun(
-	wf: ReturnType<typeof generateCore>,
-	runId: string,
-) {
+function stopBlueprintRun(wf: Core, runId: string) {
 	return new Promise<void>((res, rej) => {
 		const tracking = useWriterTracking(wf);
 		tracking.track("blueprints_run_stopped");
@@ -86,23 +78,25 @@ function stopBlueprintRun(
 			new CustomEvent("wf-stop-blueprint", {
 				detail: {
 					handler: "stop_blueprint_run",
-					payload: { run_id: runId},
+					payload: { run_id: runId },
 				},
 			}),
 			null,
 			true,
 		)
 			.then(() => res())
 			.catch((err) => {
-				tracking.track("blueprints_run_stop_failed", { error: String(err) });
+				tracking.track("blueprints_run_stop_failed", {
+					error: String(err),
+				});
 				rej(err);
 			});
 	});
 }
 
 export function useBlueprintRun(
-	wf: ReturnType<typeof generateCore>,
-	wfbm: ReturnType<typeof generateBuilderManager>,
+	wf: Core,
+	wfbm: BuilderManager,
 	blueprintComponentId: string | Ref<string>,
 ) {
 	const isRunning = ref(false);
@@ -119,7 +113,7 @@ export function useBlueprintRun(
 
 	async function stop() {
 		const activeRunId = wfbm.activeBlueprintRunId.value;
-		if(!activeRunId) return;
+		if (!activeRunId) return;
 		await stopBlueprintRun(wf, activeRunId);
 	}
 
@@ -130,10 +124,11 @@ export type BlueprintsRunListItem = { blueprintId: string; branchId: string };
 type MaybeRef<T> = T | Ref<T>;
 
 export function useBlueprintsRun(
-	wf: ReturnType<typeof generateCore>,
+	wf: Core,
 	blueprintComponentIds: MaybeRef<BlueprintsRunListItem[]>,
 ) {
 	const runningBlueprintIds = ref<string[]>([]);
+	const socketTimeout = inject(injectionKeys.socketTimeout);
 
 	async function handleRunBlueprint({
 		blueprintId,
@@ -142,6 +137,7 @@ export function useBlueprintsRun(
 		if (runningBlueprintIds.value.includes(blueprintId)) return;
 
 		try {
+			if (socketTimeout) socketTimeout.prevent.value = true;
 			runningBlueprintIds.value = [
 				blueprintId,
 				...runningBlueprintIds.value,
@@ -151,6 +147,7 @@ export function useBlueprintsRun(
 			runningBlueprintIds.value = runningBlueprintIds.value.filter(
 				(id) => id !== blueprintId,
 			);
+			if (socketTimeout) socketTimeout.prevent.value = false;
 		}
 	}
 	async function run() {

src/ui/src/composables/useUnsavedChangesPrevention.ts

@@ -1,21 +1,24 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import { useAbortController } from "@/composables/useAbortController";
+import { SocketTimeout } from "@/writerTypes";
 
 const BEFORE_UNLOAD_MESSAGE =
 	"You have unsaved changes. Are you sure you want to leave?";
 
-export function useUnsavedChangesPrevention() {
+export function useUnsavedChangesPrevention(socketTimeout?: SocketTimeout) {
 	const hasUnsavedChanges = ref(false);
 	const beforeUnloadHandler = ref<
 		((event: BeforeUnloadEvent) => void) | null
 	>(null);
 
 	function enablePrevention() {
 		hasUnsavedChanges.value = true;
+		if (socketTimeout) socketTimeout.prevent.value = true;
 	}
 
 	function disablePrevention() {
 		hasUnsavedChanges.value = false;
+		if (socketTimeout) socketTimeout.prevent.value = false;
 	}
 
 	function handleBeforeUnload(event: BeforeUnloadEvent) {

src/ui/src/core/index.ts

@@ -82,7 +82,7 @@ export function generateCore() {
 	let mailInbox: MailItem[] = [];
 	let mailSubscriptions: { mailType: string; fn: Function }[] = [];
 	const collaborationPingSubscriptions: { fn: Function }[] = [];
-	
+
 	let pendingComponentUpdate = false;
 
 	const activePageId = ref<Component["id"] | undefined>();
@@ -241,7 +241,7 @@ export function generateCore() {
 	// Open and setup websocket
 
 	async function startSync(): Promise<void> {
-		if (webSocket) return; // Open WebSocket exists
+		if (webSocket && syncHealth.value === "connected") return; // Open WebSocket exists
 
 		const logger = useLogger();
 
@@ -254,11 +254,14 @@ export function generateCore() {
 			syncHealth.value = "connected";
 			logger.log("WebSocket connected. Initialising stream...");
 			sendFrontendMessage("streamInit", { sessionId });
-			
+
 			if (pendingComponentUpdate) {
 				pendingComponentUpdate = false;
 				sendComponentUpdate().catch((error) => {
-					logger.error("Failed to retry component update after reconnect:", error);
+					logger.error(
+						"Failed to retry component update after reconnect:",
+						error,
+					);
 					pendingComponentUpdate = true;
 				});
 			}
@@ -401,6 +404,13 @@ export function generateCore() {
 		});
 	}
 
+	function stopSync(): void {
+		if (!webSocket) return;
+		webSocket.onclose = () => {};
+		webSocket.close();
+		syncHealth.value = "offline";
+	}
+
 	/**
 	 * Dispatches the given mail to the relevant mail subscriptions.
 	 * Items that cannot be distributed remain in the inbox.
@@ -951,6 +961,7 @@ export function generateCore() {
 		isChildOf,
 		featureFlags: readonly(featureFlags),
 		getWebSocket,
+		stopSync,
 		// writer cloud variables
 		writerApplication: readonly(writerApplication),
 		isWriterCloudApp,

src/ui/src/injectionKeys.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, InjectionKey, Ref, VNode } from "vue";
-import {
+import type {
 	BuilderManager,
 	CollaborationManager,
 	Component,
@@ -8,6 +8,7 @@ import {
 	InstancePathItem,
 	NotesManager,
 	SecretsManager,
+	SocketTimeout,
 } from "./writerTypes";
 
 export default {
@@ -34,4 +35,5 @@ export default {
 	flattenedInstancePath: Symbol() as InjectionKey<string>,
 	instanceData: Symbol() as InjectionKey<Ref[]>,
 	isAutogenModalShown: Symbol() as InjectionKey<Ref<boolean>>,
+	socketTimeout: Symbol() as InjectionKey<SocketTimeout>,
 };