refac

src/lib/apis/configs/index.ts

@@ -509,6 +509,17 @@ export const getOAuthClientAuthorizationUrl = (clientId: string, type: null | st
 	return `${WEBUI_BASE_URL}/oauth/clients/${oauthClientId}/authorize`;
 };
 
+export const initiateOAuthRedirect = (tool: {
+	id: string;
+	serverId: string;
+	authType?: string | null;
+}) => {
+	sessionStorage.setItem('pendingOAuthToolId', tool.id);
+	sessionStorage.setItem('oauthRedirectInProgressToolId', tool.id);
+	const authUrl = getOAuthClientAuthorizationUrl(tool.serverId, tool.authType ?? 'mcp');
+	window.open(authUrl, '_self', 'noopener');
+};
+
 export const getCodeExecutionConfig = async (token: string) => {
 	let error = null;
 

src/lib/components/chat/Chat.svelte

@@ -97,6 +97,7 @@
 	import { uploadFile } from '$lib/apis/files';
 	import { createOpenAITextStream } from '$lib/apis/streaming';
 	import { getFunctions } from '$lib/apis/functions';
+	import { initiateOAuthRedirect } from '$lib/apis/configs';
 	import { updateFolderById } from '$lib/apis/folders';
 
 	import Banner from '../common/Banner.svelte';
@@ -343,6 +344,27 @@
 		console.log('saveSessionSelectedModels', selectedModels, sessionStorage.selectedModels);
 	};
 
+	const continueOAuthRedirect = async () => {
+		if (pendingOAuthTools.length === 0) {
+			sessionStorage.removeItem('oauthRedirectInProgressToolId');
+			return;
+		}
+
+		if (chatIdProp) {
+			return;
+		}
+
+		const nextTool = pendingOAuthTools[0];
+		if (sessionStorage.getItem('oauthRedirectInProgressToolId') === nextTool.id) {
+			sessionStorage.removeItem('oauthRedirectInProgressToolId');
+			return;
+		}
+
+		saveSessionSelectedModels();
+		await tick();
+		initiateOAuthRedirect(nextTool);
+	};
+
 	let oldSelectedModelIds = [''];
 	$: if (!equal(selectedModelIds, oldSelectedModelIds)) {
 		onSelectedModelIdsChange();
@@ -423,6 +445,7 @@
 					}
 					selectedToolIds = authed;
 					pendingOAuthTools = unauthed;
+					await continueOAuthRedirect();
 				} else if ($settings?.tools) {
 					selectedToolIds = $settings.tools;
 				} else {

src/lib/components/chat/MessageInput.svelte

@@ -62,7 +62,7 @@
 	import { getSessionUser } from '$lib/apis/auths';
 
 	import { WEBUI_BASE_URL, WEBUI_API_BASE_URL, PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';
-	import { getOAuthClientAuthorizationUrl } from '$lib/apis/configs';
+	import { initiateOAuthRedirect } from '$lib/apis/configs';
 
 	import { createNoteHandler } from '../notes/utils';
 	import { getSuggestionRenderer } from '../common/RichTextInput/suggestions';
@@ -1986,12 +1986,7 @@
 											<Tooltip content={$i18n.t('Click to connect')} placement="top">
 												<button
 													on:click|preventDefault={() => {
-														sessionStorage.setItem('pendingOAuthToolId', pendingTool.id);
+														initiateOAuthRedirect(pendingTool);
-														const authUrl = getOAuthClientAuthorizationUrl(
-															pendingTool.serverId,
-															pendingTool.authType ?? 'mcp'
-														);
-														window.open(authUrl, '_self', 'noopener');
 													}}
 													type="button"
 													class="group px-2 py-[5px] flex gap-1.5 items-center text-xs rounded-full transition-colors duration-300 focus:outline-hidden max-w-full overflow-hidden

src/lib/components/chat/MessageInput/IntegrationsMenu.svelte

@@ -13,7 +13,7 @@
 		terminalServers
 	} from '$lib/stores';
 
-	import { getOAuthClientAuthorizationUrl } from '$lib/apis/configs';
+	import { initiateOAuthRedirect } from '$lib/apis/configs';
 	import { deleteOAuthSession } from '$lib/apis/auths';
 	import { getTools } from '$lib/apis/tools';
 	import { getSkills } from '$lib/apis/skills';
@@ -397,14 +397,13 @@
 								if (!(tools[toolId]?.authenticated ?? true)) {
 									e.preventDefault();
 
-									let parts = toolId.split(':');
+									const parts = toolId.split(':');
-									let serverId = parts?.at(-1) ?? toolId;
+									initiateOAuthRedirect({
-
+										id: toolId,
-									// Persist the tool ID so we can re-enable it after OAuth redirect
+										serverId: parts.at(-1) ?? toolId,
-									sessionStorage.setItem('pendingOAuthToolId', toolId);
+										authType:
-
+											parts.length > 1 ? (parts[0] === 'server' ? parts[1] : parts[0]) : null
-									const authUrl = getOAuthClientAuthorizationUrl(serverId, 'mcp');
+									});
-									window.open(authUrl, '_self', 'noopener');
 								} else {
 									tools[toolId].enabled = !tools[toolId].enabled;