open-webui/src/routes/+layout.svelte

<script>
	import { io } from 'socket.io-client';
	import { spring } from 'svelte/motion';
	import { createPyodideWorker } from '$lib/pyodide/createPyodideWorker';
	import { Toaster, toast } from 'svelte-sonner';

	let loadingProgress = spring(0, {
		stiffness: 0.05
	});

	import { onMount, tick, setContext, onDestroy } from 'svelte';
	import {
		config,
		user,
		settings,
		theme,
		WEBUI_NAME,
		WEBUI_VERSION,
		WEBUI_DEPLOYMENT_ID,
		mobile,
		socket,
		socketConnected,
		chatId,
		tags,
		temporaryChatEnabled,
		isLastActiveTab,
		isApp,
		appInfo,
		toolServers,
		playingNotificationSound,
		channels,
		channelId,
		terminalServers,
		showControls,
		showFileNavPath,
		showFileNavDir,
		pyodideWorker,
		desktopEvent
	} from '$lib/stores';
	import { refreshChatList } from '$lib/stores/chatList';
	import { getFileContentById } from '$lib/apis/files';
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';
	import { beforeNavigate } from '$app/navigation';
	import { updated } from '$app/state';

	import i18n, { initI18n, getLanguages, changeLanguage } from '$lib/i18n';

	import '../tailwind.css';
	import '../app.css';
	import 'tippy.js/dist/tippy.css';

	import { executeToolServer, getBackendConfig, getModels, getVersion } from '$lib/apis';
	import { getSessionUser, updateUserTimezone, userSignOut } from '$lib/apis/auths';
	import { getAllTags } from '$lib/apis/chats';
	import { chatCompletion } from '$lib/apis/openai';
	import { isTemporaryChatId } from '$lib/utils/chatId';
	import {
		addOpenAIConnection,
		removeOpenAIConnection,
		addTerminalConnection,
		removeTerminalConnection
	} from '$lib/utils/connections';

	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
	import {
		bestMatchingLanguage,
		cleanText,
		displayFileHandler,
		getUserTimezone,
		removeAllDetails
	} from '$lib/utils';
	import { setTextScale } from '$lib/utils/text-scale';

	import NotificationToast from '$lib/components/NotificationToast.svelte';
	import AppSidebar from '$lib/components/app/AppSidebar.svelte';
	import SyncStatsModal from '$lib/components/chat/Settings/SyncStatsModal.svelte';
	import Spinner from '$lib/components/common/Spinner.svelte';
	import { getOutputText } from '$lib/components/chat/Messages/structuredOutput';
	import { getUserSettings } from '$lib/apis/users';
	import dayjs from 'dayjs';
	import { getChannels } from '$lib/apis/channels';

	const unregisterServiceWorkers = async () => {
		if ('serviceWorker' in navigator) {
			try {
				const registrations = await navigator.serviceWorker.getRegistrations();
				await Promise.all(registrations.map((r) => r.unregister()));
				return true;
			} catch (error) {
				console.error('Error unregistering service workers:', error);
				return false;
			}
		}
		return false;
	};

	// handle frontend updates (https://svelte.dev/docs/kit/configuration#version)
	beforeNavigate(async ({ willUnload, to }) => {
		if (updated.current && !willUnload && to?.url) {
			await unregisterServiceWorkers();
			location.href = to.url.href;
		}
	});

	setContext('i18n', i18n);

	const bc = new BroadcastChannel('active-tab-channel');

	let loaded = false;
	let tokenTimer = null;
	let isAuthRedirectInProgress = false;

	let showRefresh = false;

	let showSyncStatsModal = false;
	let syncStatsEventData = null;

	let heartbeatInterval = null;
	let disconnectToastTimer = null;
	let disconnectWarningShown = false;
	let pageIsVisible = true;
	let pageWasHidden = false;
	let lastVisibleAt = Date.now();
	let disconnectReason = null;

	const BREAKPOINT = 768;
	const DISCONNECT_TOAST_DELAY_MS = 2000;
	const RECENT_RESUME_GRACE_MS = 8000;
	const RESUME_DISCONNECT_REASONS = new Set(['ping timeout', 'transport close', 'transport error']);

	const clearDisconnectToastTimer = () => {
		if (disconnectToastTimer) {
			clearTimeout(disconnectToastTimer);
			disconnectToastTimer = null;
		}
	};

	const recentlyResumed = () =>
		pageWasHidden && Date.now() - lastVisibleAt < RECENT_RESUME_GRACE_MS;

	const isLikelyResumeDisconnect = (reason) => {
		return (!pageIsVisible || recentlyResumed()) && RESUME_DISCONNECT_REASONS.has(reason);
	};

	const scheduleDisconnectToast = () => {
		clearDisconnectToastTimer();

		const resumeDelay = isLikelyResumeDisconnect(disconnectReason)
			? Math.max(RECENT_RESUME_GRACE_MS - (Date.now() - lastVisibleAt), 0)
			: 0;

		disconnectToastTimer = setTimeout(() => {
			disconnectToastTimer = null;

			if ($socket?.connected || !pageIsVisible || isLikelyResumeDisconnect(disconnectReason)) {
				return;
			}

			disconnectWarningShown = true;
			toast.warning($i18n.t('Connection lost. Reconnecting...'));
		}, resumeDelay + DISCONNECT_TOAST_DELAY_MS);
	};

	const setupSocket = async (enableWebsocket) => {
		const _socket = io(`${WEBUI_BASE_URL}` || undefined, {
			reconnection: true,
			reconnectionDelay: 1000,
			reconnectionDelayMax: 5000,
			randomizationFactor: 0.5,
			path: '/ws/socket.io',
			transports: enableWebsocket ? ['websocket'] : ['polling', 'websocket'],
			auth: { token: localStorage.token }
		});
		await socket.set(_socket);

		_socket.on('connect_error', (err) => {
			console.log('connect_error', err);
		});

		let hasConnectedOnce = false;

		_socket.on('connect', async () => {
			console.log('connected', _socket.id);

			// Cancel any pending disconnect toast if we reconnected quickly
			clearDisconnectToastTimer();

			if (hasConnectedOnce) {
				socketConnected.set(true);
				// Only show "Reconnected" if the user actually saw the disconnect warning
				if (disconnectWarningShown) {
					toast.success($i18n.t('Reconnected'));
				}
			}
			disconnectWarningShown = false;
			disconnectReason = null;
			hasConnectedOnce = true;

			const res = await getVersion(localStorage.token);

			const deploymentId = res?.deployment_id ?? null;
			const version = res?.version ?? null;

			if (version !== null || deploymentId !== null) {
				if (
					($WEBUI_VERSION !== null && version !== $WEBUI_VERSION) ||
					($WEBUI_DEPLOYMENT_ID !== null && deploymentId !== $WEBUI_DEPLOYMENT_ID)
				) {
					await unregisterServiceWorkers();
					location.href = location.href;
					return;
				}
			}

			// Send heartbeat every 30 seconds
			heartbeatInterval = setInterval(() => {
				if (_socket.connected) {
					console.log('Sending heartbeat');
					_socket.emit('heartbeat', {});
				}
			}, 30000);

			if (deploymentId !== null) {
				WEBUI_DEPLOYMENT_ID.set(deploymentId);
			}

			if (version !== null) {
				WEBUI_VERSION.set(version);
				window.WEBUI_VERSION = version;
			}

			console.log('version', version);

			if (localStorage.getItem('token')) {
				// Emit user-join event with auth token
				_socket.emit('user-join', { auth: { token: localStorage.token } });
			} else {
				console.warn('No token found in localStorage, user-join event not emitted');
			}
		});

		_socket.on('reconnect_attempt', (attempt) => {
			console.log('reconnect_attempt', attempt);
		});

		_socket.on('reconnect_failed', () => {
			console.log('reconnect_failed');
		});

		_socket.on('disconnect', (reason, details) => {
			console.log(`Socket ${_socket.id} disconnected due to ${reason}`);
			socketConnected.set(false);
			disconnectReason = reason;
			disconnectWarningShown = false;

			// Delay visible warnings while mobile browsers resume suspended tabs.
			if (isLikelyResumeDisconnect(reason)) {
				clearDisconnectToastTimer();
			} else {
				scheduleDisconnectToast();
			}

			if (heartbeatInterval) {
				clearInterval(heartbeatInterval);
				heartbeatInterval = null;
			}

			if (reason === 'io server disconnect') {
				_socket.connect();
			}

			if (details) {
				console.log('Additional details:', details);
			}
		});
	};

	/**
	 * Get or create the persistent Pyodide worker.
	 * The worker persists across executions so the virtual FS (IDBFS) is preserved.
	 */
	const getOrCreateWorker = () => {
		let worker = $pyodideWorker;
		if (!worker) {
			worker = createPyodideWorker();
			pyodideWorker.set(worker);
		}
		return worker;
	};

	const executePythonAsWorker = async (id, code, cb, files = []) => {
		let result = null;
		let stdout = null;
		let stderr = null;

		let executing = true;
		let packages = [
			/\bimport\s+requests\b|\bfrom\s+requests\b/.test(code) ? 'requests' : null,
			/\bimport\s+bs4\b|\bfrom\s+bs4\b/.test(code) ? 'beautifulsoup4' : null,
			/\bimport\s+numpy\b|\bfrom\s+numpy\b/.test(code) ? 'numpy' : null,
			/\bimport\s+pandas\b|\bfrom\s+pandas\b/.test(code) ? 'pandas' : null,
			/\bimport\s+matplotlib\b|\bfrom\s+matplotlib\b/.test(code) ? 'matplotlib' : null,
			/\bimport\s+seaborn\b|\bfrom\s+seaborn\b/.test(code) ? 'seaborn' : null,
			/\bimport\s+sklearn\b|\bfrom\s+sklearn\b/.test(code) ? 'scikit-learn' : null,
			/\bimport\s+scipy\b|\bfrom\s+scipy\b/.test(code) ? 'scipy' : null,
			/\bimport\s+re\b|\bfrom\s+re\b/.test(code) ? 'regex' : null,
			/\bimport\s+seaborn\b|\bfrom\s+seaborn\b/.test(code) ? 'seaborn' : null,
			/\bimport\s+sympy\b|\bfrom\s+sympy\b/.test(code) ? 'sympy' : null,
			/\bimport\s+tiktoken\b|\bfrom\s+tiktoken\b/.test(code) ? 'tiktoken' : null,
			/\bimport\s+pytz\b|\bfrom\s+pytz\b/.test(code) ? 'pytz' : null
		].filter(Boolean);

		const worker = getOrCreateWorker();

		// Fetch file content from the server and prepare for the worker
		let filePayloads = [];
		if (files && files.length > 0) {
			for (const file of files) {
				try {
					const fileId = file?.id;
					const fileName = file?.filename || file?.name || 'file';
					if (fileId) {
						const content = await getFileContentById(fileId);
						if (content) {
							filePayloads.push({ name: fileName, data: content });
						}
					}
				} catch (e) {
					console.error('Failed to fetch file for Pyodide:', e);
				}
			}
		}

		worker.postMessage({
			type: 'execute',
			id: id,
			code: code,
			packages: packages,
			files: filePayloads.length > 0 ? filePayloads : undefined
		});

		// Timeout for this specific execution (not the worker itself)
		let timeoutId = setTimeout(() => {
			if (executing) {
				executing = false;
				stderr = 'Execution Time Limit Exceeded';

				// Terminate and recreate the worker on timeout
				worker.terminate();
				pyodideWorker.set(null);

				if (cb) {
					cb(
						JSON.parse(
							JSON.stringify(
								{
									stdout: stdout,
									stderr: stderr,
									result: result
								},
								(_key, value) => (typeof value === 'bigint' ? value.toString() : value)
							)
						)
					);
				}
			}
		}, 60000);

		// Use addEventListener so multiple concurrent executions don't clobber each other
		const onMessage = (event) => {
			const { id: eventId, ...data } = event.data;
			// Only handle responses for this execution ID
			if (eventId !== id) return;
			// Ignore FS responses (they use a type field)
			if (data.type && data.type.startsWith('fs:')) return;

			console.log('pyodideWorker.onmessage', event);
			clearTimeout(timeoutId);
			worker.removeEventListener('message', onMessage);
			worker.removeEventListener('error', onError);

			data['stdout'] && (stdout = data['stdout']);
			data['stderr'] && (stderr = data['stderr']);
			data['result'] && (result = data['result']);

			if (cb) {
				cb(
					JSON.parse(
						JSON.stringify(
							{
								stdout: stdout,
								stderr: stderr,
								result: result
							},
							(_key, value) => (typeof value === 'bigint' ? value.toString() : value)
						)
					)
				);
			}

			executing = false;
		};

		const onError = (event) => {
			console.log('pyodideWorker.onerror', event);
			clearTimeout(timeoutId);
			worker.removeEventListener('message', onMessage);
			worker.removeEventListener('error', onError);

			if (cb) {
				cb(
					JSON.parse(
						JSON.stringify(
							{
								stdout: stdout,
								stderr: stderr,
								result: result
							},
							(_key, value) => (typeof value === 'bigint' ? value.toString() : value)
						)
					)
				);
			}
			executing = false;
		};

		worker.addEventListener('message', onMessage);
		worker.addEventListener('error', onError);
	};

	const resolveToolServer = (serverUrl) => {
		let toolServer = $settings?.toolServers?.find((server) => server.url === serverUrl);
		if (!toolServer) {
			const terminalServer = ($settings?.terminalServers ?? []).find(
				(server) => server.url === serverUrl
			);
			if (terminalServer) {
				toolServer = {
					url: terminalServer.url,
					auth_type: terminalServer.auth_type ?? 'bearer',
					key: terminalServer.key ?? '',
					path: terminalServer.path ?? '/openapi.json'
				};
			}
		}

		let toolServerData =
			$toolServers?.find((server) => server.url === serverUrl) ??
			$terminalServers?.find((server) => server.url === serverUrl);

		let token = null;
		if (toolServer) {
			const auth_type = toolServer?.auth_type ?? 'bearer';
			if (auth_type === 'bearer') token = toolServer?.key;
			else if (auth_type === 'session') token = localStorage.token;
		}

		return { toolServer, toolServerData, token };
	};

	const isDirectTerminalServer = (serverUrl) =>
		!!serverUrl &&
		(($settings?.terminalServers ?? []).some((server) => server.url === serverUrl) ||
			($terminalServers ?? []).some((server) => !server.id && server.url === serverUrl));

	const terminalFileResult = (result, params, serverUrl, chatId) => {
		const path = result?.path ?? params?.path;
		const name = result?.name ?? String(path ?? '').split('/').filter(Boolean).at(-1) ?? 'file';
		const contentType = result?.content_type ?? result?.mime_type ?? 'application/octet-stream';

		return {
			...(result ?? {}),
			type: 'file',
			source: 'open_terminal',
			displayed: true,
			terminal_selector: serverUrl,
			terminal_url: serverUrl,
			session_id: chatId,
			path,
			full_path: result?.full_path ?? path,
			name,
			mime_type: contentType,
			content_type: contentType
		};
	};

	const executeTool = async (data, cb, chatId) => {
		const { toolServer, toolServerData, token } = resolveToolServer(data.server?.url);
		const defaultInline =
			data?.name === 'display_file' &&
			data?.params?.path &&
			data?.params?.inline === undefined &&
			$settings?.terminalFileDisplay === 'inline' &&
			isDirectTerminalServer(data.server?.url);
		const params = defaultInline ? { ...data.params, inline: true } : data?.params;

		console.log('executeTool', data, toolServer);

		if (toolServer) {
			const res = await executeToolServer(
				token,
				toolServer.url,
				data?.name,
				params,
				toolServerData,
				chatId
			);

			console.log('executeToolServer', res);
			const result = Array.isArray(res) ? res[0] : res;
			const inlineDisplayFile = data?.name === 'display_file' && params?.path && params?.inline === true;
			const output =
				inlineDisplayFile && result?.exists !== false
					? Array.isArray(res)
						? [terminalFileResult(result, params, toolServer.url, chatId)]
						: terminalFileResult(result, params, toolServer.url, chatId)
					: res;

			if (data?.name === 'display_file' && params?.path && !inlineDisplayFile) {
				if (result?.exists !== false) {
					displayFileHandler(params.path, { showControls, showFileNavPath });
				}
			}

			if (['write_file'].includes(data?.name) && params?.path) {
				showFileNavDir.set(result?.path ?? params.path);
			}

			if (cb) {
				cb(structuredClone(output));
			}
		} else {
			if (cb) {
				cb({ error: 'Tool Server Not Found' });
			}
		}
	};

	const chatEventHandler = async (event, cb) => {
		const chat = $page.url.pathname.includes(`/c/${event.chat_id}`);

		// Skip events from temporary chats that are not the current chat.
		// This prevents notifications from being sent to other tabs/devices
		// for privacy, since temporary chats are not meant to be persisted or visible elsewhere.
		const isTemporaryChat = isTemporaryChatId(event.chat_id);
		if (isTemporaryChat && event.chat_id !== $chatId) {
			return;
		}

		let isInBackground = document.visibilityState !== 'visible';
		if (window.electronAPI) {
			const res = await window.electronAPI.send({
				type: 'window:isFocused'
			});
			if (res) {
				isInBackground = !res.isFocused;
			}
		}

		await tick();
		const type = event?.data?.type ?? null;
		const data = event?.data?.data ?? null;

		// Calendar alerts are not chat-scoped, handle before chat_id checks
		if (type === 'calendar:alert' && data) {
			const timeStr =
				data.minutes_until <= 0
					? $i18n.t('Starting now')
					: data.minutes_until === 1
						? $i18n.t('Starting in 1 minute')
						: $i18n.t('Starting in {{count}} minutes', { count: data.minutes_until });

			toast.custom(NotificationToast, {
				componentProps: {
					onClick: () => {
						goto('/calendar');
					},
					title: data.title,
					content: timeStr
				},
				duration: 30000,
				unstyled: true
			});

			if ($isLastActiveTab) {
				if ($settings?.notificationEnabled ?? false) {
					new Notification(`${data.title} / Open WebUI`, {
						body: timeStr,
						// LICENSE covers this Open WebUI notification identifier.
						// Do not alter, remove, obscure, or replace it except as LICENSE permits:
						// https://docs.openwebui.com/license.
						icon: `${WEBUI_BASE_URL}/static/favicon.png`
					});
				}
			}
			return;
		}

		// Session-targeted RPC calls (code execution, tool calls, direct completion)
		// must ALWAYS be processed regardless of active chat or tab visibility,
		// because the backend's sio.call blocks waiting for our callback response.
		if (data?.session_id === $socket.id) {
			if (type === 'execute:python') {
				console.log('execute:python', data);
				executePythonAsWorker(data.id, data.code, cb, data.files || []);
				return;
			} else if (type === 'execute:tool') {
				console.log('execute:tool', data);
				executeTool(data, cb, event.chat_id);
				return;
			} else if (type === 'request:chat:completion') {
				console.log(data, $socket.id);
				const { session_id, channel, form_data, model } = data;

				try {
					const directConnections = $settings?.directConnections ?? {};

					if (directConnections) {
						const urlIdx = model?.urlIdx;

						const OPENAI_API_URL = directConnections.OPENAI_API_BASE_URLS[urlIdx];
						const OPENAI_API_KEY = directConnections.OPENAI_API_KEYS[urlIdx];
						const API_CONFIG = directConnections.OPENAI_API_CONFIGS[urlIdx];

						try {
							if (API_CONFIG?.prefix_id) {
								const prefixId = API_CONFIG.prefix_id;
								form_data['model'] = form_data['model'].replace(`${prefixId}.`, ``);
							}

							const [res, controller] = await chatCompletion(
								OPENAI_API_KEY,
								form_data,
								OPENAI_API_URL
							);

							if (res) {
								// raise if the response is not ok
								if (!res.ok) {
									throw await res.json();
								}

								if (form_data?.stream ?? false) {
									cb({
										status: true
									});
									console.log({ status: true });

									// res will either be SSE or JSON
									const reader = res.body.getReader();
									const decoder = new TextDecoder();

									const processStream = async () => {
										while (true) {
											// Read data chunks from the response stream
											const { done, value } = await reader.read();
											if (done) {
												break;
											}

											// Decode the received chunk
											const chunk = decoder.decode(value, { stream: true });

											// Process lines within the chunk
											const lines = chunk.split('\n').filter((line) => line.trim() !== '');

											for (const line of lines) {
												console.log(line);
												$socket?.emit(channel, line);
											}
										}
									};

									// Process the stream in the background
									await processStream();
								} else {
									const data = await res.json();
									cb(data);
								}
							} else {
								throw new Error('An error occurred while fetching the completion');
							}
						} catch (error) {
							console.error('chatCompletion', error);
							cb(error);
						}
					}
				} catch (error) {
					console.error('chatCompletion', error);
					cb(error);
				} finally {
					$socket.emit(channel, {
						done: true
					});
				}
				return;
			}
		}

		if (
			!event?.internal &&
			((event.chat_id !== $chatId && !$temporaryChatEnabled) || isInBackground)
		) {
			if (type === 'chat:completion') {
				const { done, content, output, title } = data;
				const displayTitle = title || $i18n.t('New Chat');
				const contentPreview = cleanText(removeAllDetails(getOutputText(output) || content || ''));

				if (done) {
					if (
						($settings?.notificationSound ?? true) &&
						($settings?.notificationSoundAlways ?? false)
					) {
						playingNotificationSound.set(true);

						const audio = new Audio(`/audio/notification.mp3`);
						audio.play().finally(() => {
							// Ensure the global state is reset after the sound finishes
							playingNotificationSound.set(false);
						});
					}

					if ($isLastActiveTab) {
						if ($settings?.notificationEnabled ?? false) {
							new Notification(`${displayTitle} / Open WebUI`, {
								body: contentPreview,
								// LICENSE covers this Open WebUI notification identifier.
								// Do not alter, remove, obscure, or replace it except as LICENSE permits:
								// https://docs.openwebui.com/license.
								icon: `${WEBUI_BASE_URL}/static/favicon.png`
							});
						}
					}

					toast.custom(NotificationToast, {
						componentProps: {
							onClick: () => {
								goto(`/c/${event.chat_id}`);
							},
							content: contentPreview,
							title: displayTitle
						},
						duration: 15000,
						unstyled: true
					});
				}
			} else if (type === 'chat:title') {
				await refreshChatList(localStorage.token);
			} else if (type === 'chat:tags') {
				tags.set(await getAllTags(localStorage.token));
			}
		}
	};

	const channelEventHandler = async (event) => {
		console.log('channelEventHandler', event);
		if (event.data?.type === 'typing') {
			return;
		}

		// handle channel created event
		if (event.data?.type === 'channel:created') {
			const res = await getChannels(localStorage.token).catch(async (error) => {
				return null;
			});

			if (res) {
				await channels.set(
					res.sort(
						(a, b) =>
							['', null, 'group', 'dm'].indexOf(a.type) - ['', null, 'group', 'dm'].indexOf(b.type)
					)
				);
			}

			return;
		}

		// check url path
		const channel = $page.url.pathname.includes(`/channels/${event.channel_id}`);

		let isInBackground = document.visibilityState !== 'visible';
		if (window.electronAPI) {
			const res = await window.electronAPI.send({
				type: 'window:isFocused'
			});
			if (res) {
				isInBackground = !res.isFocused;
			}
		}

		if ((!channel || isInBackground) && event?.user?.id !== $user?.id) {
			await tick();
			const type = event?.data?.type ?? null;
			const data = event?.data?.data ?? null;

			if ($channels) {
				if ($channels.find((ch) => ch.id === event.channel_id) && $channelId !== event.channel_id) {
					channels.set(
						$channels.map((ch) => {
							if (ch.id === event.channel_id) {
								if (type === 'message') {
									return {
										...ch,
										unread_count: (ch.unread_count ?? 0) + 1,
										last_message_at: event.created_at
									};
								}
							}
							return ch;
						})
					);
				} else {
					const res = await getChannels(localStorage.token).catch(async (error) => {
						return null;
					});

					if (res) {
						await channels.set(
							res.sort(
								(a, b) =>
									['', null, 'group', 'dm'].indexOf(a.type) -
									['', null, 'group', 'dm'].indexOf(b.type)
							)
						);
					}
				}
			}

			if (type === 'message') {
				const title = `${data?.user?.name}${event?.channel?.type !== 'dm' ? ` (#${event?.channel?.name})` : ''}`;

				if ($isLastActiveTab) {
					if ($settings?.notificationEnabled ?? false) {
						// LICENSE covers this Open WebUI notification identifier.
						// Do not alter, remove, obscure, or replace it except as LICENSE permits:
						// https://docs.openwebui.com/license.
						new Notification(`${title} / Open WebUI`, {
							body: data?.content,
							icon: `${WEBUI_API_BASE_URL}/users/${data?.user?.id}/profile/image`
						});
					}
				}

				toast.custom(NotificationToast, {
					componentProps: {
						onClick: () => {
							goto(`/channels/${event.channel_id}`);
						},
						content: data?.content,
						title: `${title}`
					},
					duration: 15000,
					unstyled: true
				});
			}
		}
	};

	const TOKEN_EXPIRY_BUFFER = 60; // seconds
	const resolveFetchUrl = (input) => {
		if (input instanceof Request) {
			return new URL(input.url, window.location.origin);
		}

		return new URL(input, window.location.origin);
	};

	const resolveFetchHeaders = (input, init) => {
		if (init?.headers) {
			return new Headers(init.headers);
		}

		if (input instanceof Request) {
			return input.headers;
		}

		return new Headers();
	};

	const isAuthenticatedBackendFetch = (input, init) => {
		try {
			const requestUrl = resolveFetchUrl(input);
			const backendOrigin = new URL(WEBUI_BASE_URL || '/', window.location.origin).origin;

			return (
				requestUrl.origin === backendOrigin && resolveFetchHeaders(input, init).has('authorization')
			);
		} catch {
			return false;
		}
	};

	const clearExpiredSession = () => {
		if (isAuthRedirectInProgress) {
			return;
		}

		isAuthRedirectInProgress = true;
		if (tokenTimer) {
			clearInterval(tokenTimer);
			tokenTimer = null;
		}
		user.set(null);
		localStorage.removeItem('token');
		// Clear the OAuth token cookie so /auth doesn't auto-login and redirect-loop
		document.cookie = 'token=; Max-Age=0; path=/';
		userSignOut().catch((error) => {
			console.error('Error signing out expired session:', error);
		});
		toast.error($i18n.t('Session expired. Please sign in again.'));
		isAuthRedirectInProgress = false;
	};

	const isCurrentSessionUnauthorized = async (originalFetch) => {
		return originalFetch(`${WEBUI_API_BASE_URL}/auths/`, {
			method: 'GET',
			headers: {
				'Content-Type': 'application/json',
				Authorization: `Bearer ${localStorage.token}`
			},
			credentials: 'include'
		})
			.then((res) => res.status === 401)
			.catch(() => false);
	};

	const checkTokenExpiry = async () => {
		const exp = $user?.expires_at; // token expiry time in unix timestamp
		const now = Math.floor(Date.now() / 1000); // current time in unix timestamp

		if (!exp) {
			// If no expiry time is set, do nothing
			return;
		}

		if (now >= exp - TOKEN_EXPIRY_BUFFER) {
			clearExpiredSession();
		}
	};

	const desktopEventHandler = async (event) => {
		// Events that don't require auth
		if (event.type === 'page:reload') {
			location.reload();
			return;
		}
		if (event.type === 'page:navigate' && event.data?.path) {
			await goto(event.data.path);
			return;
		}
		if (event.type === 'query' && (event.data?.query || event.data?.files?.length)) {
			desktopEvent.set(event);
			await goto('/');
			return;
		}
		if (event.type === 'call') {
			desktopEvent.set(event);
			await goto('/');
			return;
		}
		if (event.type === 'theme:update' && event.data?.theme) {
			const newTheme = event.data.theme;
			localStorage.setItem('theme', newTheme);
			theme.set(newTheme);

			// Apply theme classes (mirrors logic from chat/Settings/General.svelte)
			const themes = ['dark', 'light', 'oled-dark'];
			let themeToApply =
				newTheme === 'oled-dark' ? 'dark' : newTheme === 'her' ? 'light' : newTheme;
			if (newTheme === 'system') {
				themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
			}
			themes
				.filter((e) => e !== themeToApply)
				.forEach((e) => {
					e.split(' ').forEach((cls) => document.documentElement.classList.remove(cls));
				});
			themeToApply.split(' ').forEach((cls) => document.documentElement.classList.add(cls));
			return;
		}
		if (event.type === 'models:refresh') {
			const token = localStorage.token;
			if (token) {
				models.set(
					await getModels(
						token,
						$config?.features?.enable_direct_connections
							? ($settings?.directConnections ?? null)
							: null
					)
				);
			}
			return;
		}

		const token = localStorage.token;
		if (!token) return;

		// Only admins can modify system-level connections
		if ($user?.role !== 'admin') return;

		try {
			if (event.type === 'connections:terminal') {
				if (event.data.action === 'add') {
					await addTerminalConnection(token, {
						url: event.data.url,
						key: event.data.key,
						name: 'Local Open Terminal'
					});
				} else if (event.data.action === 'remove') {
					await removeTerminalConnection(token, event.data.url);
				}
			} else if (event.type === 'connections:openai') {
				if (event.data.action === 'add') {
					await addOpenAIConnection(token, {
						url: event.data.url,
						key: event.data.key,
						config: event.data.config
					});
				} else if (event.data.action === 'remove') {
					await removeOpenAIConnection(token, event.data.url);
				}
			}
		} catch (e) {
			console.error('Desktop connection update failed:', e);
		}
	};

	const windowMessageEventHandler = async (event) => {
		if (
			!['https://openwebui.com', 'https://www.openwebui.com', 'http://localhost:9999'].includes(
				event.origin
			)
		) {
			return;
		}

		if (event.data === 'export:stats' || event.data?.type === 'export:stats') {
			syncStatsEventData = event.data;
			showSyncStatsModal = true;
		}
	};

	onMount(async () => {
		const originalFetch = window.fetch.bind(window);
		window.fetch = async (input, init) => {
			const response = await originalFetch(input, init);

			if (
				response.status === 401 &&
				localStorage.token &&
				isAuthenticatedBackendFetch(input, init) &&
				(await isCurrentSessionUnauthorized(originalFetch))
			) {
				clearExpiredSession();
			}

			return response;
		};

		window.addEventListener('message', windowMessageEventHandler);

		let touchstartY = 0;

		function isNavOrDescendant(el) {
			const nav = document.querySelector('nav'); // change selector if needed
			return nav && (el === nav || nav.contains(el));
		}

		const touchstartHandler = (e) => {
			if (!isNavOrDescendant(e.target)) return;
			touchstartY = e.touches[0].clientY;
		};

		const touchmoveHandler = (e) => {
			if (!isNavOrDescendant(e.target)) return;
			const touchY = e.touches[0].clientY;
			const touchDiff = touchY - touchstartY;
			if (touchDiff > 50 && window.scrollY === 0) {
				showRefresh = true;
				e.preventDefault();
			}
		};

		const touchendHandler = (e) => {
			if (!isNavOrDescendant(e.target)) return;
			if (showRefresh) {
				showRefresh = false;
				location.reload();
			}
		};

		document.addEventListener('touchstart', touchstartHandler);
		document.addEventListener('touchmove', touchmoveHandler, { passive: false });
		document.addEventListener('touchend', touchendHandler);

		if (typeof window !== 'undefined') {
			if (window.applyTheme) {
				window.applyTheme();
			}
		}

		if (window?.electronAPI) {
			const info = await window.electronAPI.send({
				type: 'app:info'
			});

			if (info) {
				isApp.set(true);
				appInfo.set(info);

				const data = await window.electronAPI.send({
					type: 'app:data'
				});

				if (data) {
					appData.set(data);
				}
			}

			// Listen for desktop service lifecycle events (scalable protocol)
			if (window.electronAPI.onEvent) {
				window.electronAPI.onEvent(desktopEventHandler);
			}
		}

		// Listen for messages on the BroadcastChannel
		bc.onmessage = (event) => {
			if (event.data === 'active') {
				isLastActiveTab.set(false); // Another tab became active
			}
		};

		// Set yourself as the last active tab when this tab is focused
		const handlePageHidden = () => {
			pageIsVisible = false;
			pageWasHidden = true;
			clearDisconnectToastTimer();
		};

		const handlePageVisible = () => {
			pageIsVisible = true;
			lastVisibleAt = Date.now();

			isLastActiveTab.set(true); // This tab is now the active tab
			bc.postMessage('active'); // Notify other tabs that this tab is active

			// Check token expiry when the tab becomes active
			checkTokenExpiry();

			if ($socket && !$socket.connected) {
				scheduleDisconnectToast();
			}
		};

		const handleVisibilityChange = () => {
			if (document.visibilityState === 'visible') {
				handlePageVisible();
			} else {
				handlePageHidden();
			}
		};

		// Add event listener for visibility state changes
		document.addEventListener('visibilitychange', handleVisibilityChange);
		window.addEventListener('pagehide', handlePageHidden);
		window.addEventListener('pageshow', handlePageVisible);

		// Call visibility change handler initially to set state on load
		handleVisibilityChange();

		theme.set(localStorage.theme);

		mobile.set(window.innerWidth < BREAKPOINT);

		const onResize = () => {
			if (window.innerWidth < BREAKPOINT) {
				mobile.set(true);
			} else {
				mobile.set(false);
			}
		};
		window.addEventListener('resize', onResize);

		user.subscribe(async (value) => {
			if (value) {
				$socket?.off('events', chatEventHandler);
				$socket?.off('events:channel', channelEventHandler);

				$socket?.on('events', chatEventHandler);
				$socket?.on('events:channel', channelEventHandler);

				// Set up the token expiry check
				if (tokenTimer) {
					clearInterval(tokenTimer);
				}
				tokenTimer = setInterval(checkTokenExpiry, 15000);
			} else {
				$socket?.off('events', chatEventHandler);
				$socket?.off('events:channel', channelEventHandler);
			}
		});

		let backendConfig = null;
		try {
			backendConfig = await getBackendConfig();
			console.log('Backend config:', backendConfig);
		} catch (error) {
			if (error?.authRedirect) {
				// Forward-auth proxy is redirecting to an external login page.
				// Full-page navigation lets the browser follow the redirect natively.
				window.location.href = '/';
				return;
			}
			console.error('Error loading backend config:', error);
		}
		// Initialize i18n even if we didn't get a backend config,
		// so `/error` can show something that's not `undefined`.

		initI18n(localStorage?.locale);
		if (!localStorage.locale) {
			const languages = await getLanguages();
			const browserLanguages = navigator.languages
				? navigator.languages
				: [navigator.language || navigator.userLanguage];
			const lang = backendConfig?.default_locale
				? backendConfig.default_locale
				: bestMatchingLanguage(languages, browserLanguages, 'en-US');
			changeLanguage(lang);
			dayjs.locale(lang);
		}

		if (backendConfig) {
			// Save Backend Status to Store
			await config.set(backendConfig);
			// LICENSE covers this Open WebUI branding surface, including name, logo,
			// visual, textual, symbolic identifiers, metadata, and surrounding UI.
			// Do not alter, remove, obscure, or replace it except as LICENSE permits:
			// https://docs.openwebui.com/license.
			await WEBUI_NAME.set(backendConfig.name);

			if ($config) {
				await setupSocket($config.features?.enable_websocket ?? true);

				if (localStorage.token) {
					// Get Session User Info
					const sessionUser = await getSessionUser(localStorage.token).catch((error) => {
						toast.error(`${error}`);
						return null;
					});

					if (sessionUser) {
						await user.set(sessionUser);
						try {
							await config.set(await getBackendConfig());
						} catch (error) {
							console.error('Error refreshing backend config:', error);
						}

						// Keep user timezone in sync on every app load/refresh
						const timezone = getUserTimezone();
						if (timezone) {
							updateUserTimezone(localStorage.token, timezone);
						}

						// Relay auth token to desktop app for API access
						if (window.electronAPI?.send) {
							window.electronAPI
								.send({
									type: 'token:update',
									token: localStorage.token
								})
								.catch(() => {});
						}
					} else {
						localStorage.removeItem('token');
						await user.set(null);
					}
				}
			}
		} else {
			// Redirect to /error when Backend Not Detected
			await goto(`/error`);
		}

		await tick();

		if (
			document.documentElement.classList.contains('her') &&
			document.getElementById('progress-bar')
		) {
			loadingProgress.subscribe((value) => {
				const progressBar = document.getElementById('progress-bar');

				if (progressBar) {
					progressBar.style.width = `${value}%`;
				}
			});

			await loadingProgress.set(100);

			document.getElementById('splash-screen')?.remove();

			const audio = new Audio(`/audio/greeting.mp3`);
			const playAudio = () => {
				audio.play();
				document.removeEventListener('click', playAudio);
			};

			document.addEventListener('click', playAudio);

			loaded = true;
		} else {
			document.getElementById('splash-screen')?.remove();
			loaded = true;
		}

		// Auto-show SyncStatsModal when opened with ?sync=true (from community)
		if (
			(window.opener ?? false) &&
			$page.url.searchParams.get('sync') === 'true' &&
			($config?.features?.enable_community_sharing ?? false)
		) {
			showSyncStatsModal = true;
		}

		return () => {
			window.removeEventListener('resize', onResize);
			window.removeEventListener('message', windowMessageEventHandler);
			document.removeEventListener('touchstart', touchstartHandler);
			document.removeEventListener('touchmove', touchmoveHandler);
			document.removeEventListener('touchend', touchendHandler);
			document.removeEventListener('visibilitychange', handleVisibilityChange);
			window.removeEventListener('pagehide', handlePageHidden);
			window.removeEventListener('pageshow', handlePageVisible);
		};
	});

	$: if (typeof document !== 'undefined') {
		document.documentElement.classList.toggle(
			'high-contrast',
			$settings?.highContrastMode ?? false
		);
	}

	onDestroy(() => {
		bc.close();
	});
</script>

<svelte:head>
	<!-- LICENSE covers this Open WebUI branding surface, including name, logo,
	visual, textual, symbolic identifiers, metadata, and surrounding UI.
	Do not alter, remove, obscure, or replace it except as LICENSE permits:
	https://docs.openwebui.com/license. -->
	<title>{$WEBUI_NAME}</title>
	<link crossorigin="anonymous" rel="icon" href="{WEBUI_BASE_URL}/static/favicon.png" />

	<meta name="apple-mobile-web-app-title" content={$WEBUI_NAME} />
	<meta name="description" content={$WEBUI_NAME} />
	<link
		rel="search"
		type="application/opensearchdescription+xml"
		title={$WEBUI_NAME}
		href="/opensearch.xml"
		crossorigin="use-credentials"
	/>
</svelte:head>

<a
	href="#main-content"
	class="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[9999] focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-gray-900 focus:shadow-lg dark:focus:bg-gray-800 dark:focus:text-gray-100"
>
	{$i18n.t('Skip to main content')}
</a>

{#if showRefresh}
	<div class=" py-5">
		<Spinner className="size-5" />
	</div>
{/if}

{#if loaded}
	{#if $isApp}
		<div class="flex flex-row h-screen">
			<AppSidebar />

			<div class="w-full flex-1 max-w-[calc(100%-4.5rem)]">
				<slot />
			</div>
		</div>
	{:else}
		<slot />
	{/if}
{/if}

{#if $config?.features.enable_community_sharing}
	<SyncStatsModal bind:show={showSyncStatsModal} eventData={syncStatsEventData} />
{/if}

<Toaster
	theme={$theme.includes('dark')
		? 'dark'
		: $theme === 'system'
			? window.matchMedia('(prefers-color-scheme: dark)').matches
				? 'dark'
				: 'light'
			: 'light'}
	richColors
	position="top-right"
	closeButton
	toastOptions={{
		classes: {
			closeButton:
				'!bg-white/80 !text-gray-500 !border-gray-200 hover:!bg-gray-50 hover:!text-gray-700 dark:!bg-gray-850 dark:!text-gray-400 dark:!border-gray-700 dark:hover:!bg-gray-800 dark:hover:!text-gray-200'
		}
	}}
/>