allow guest on home and shared convo (#1960)

* allow guest on home and shared convo

* lint

* more interactions

* add also to mobile nav menu

src/hooks.server.ts

@@ -138,16 +138,37 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 	event.locals.sessionId = auth.sessionId;
 
-	if (
-		loginEnabled &&
-		!auth.user &&
-		config.AUTOMATIC_LOGIN === "true" &&
-		!event.url.pathname.startsWith(`${base}/login`) &&
-		!event.url.pathname.startsWith(`${base}/healthcheck`)
-	) {
-		// To get the same CSRF token after callback
-		refreshSessionCookie(event.cookies, auth.secretSessionId);
-		return await triggerOauthFlow({ request: event.request, url: event.url, locals: event.locals });
+	if (loginEnabled && !auth.user) {
+		if (config.AUTOMATIC_LOGIN === "true") {
+			// AUTOMATIC_LOGIN: always redirect to OAuth flow (unless already on login or healthcheck pages)
+			if (
+				!event.url.pathname.startsWith(`${base}/login`) &&
+				!event.url.pathname.startsWith(`${base}/healthcheck`)
+			) {
+				// To get the same CSRF token after callback
+				refreshSessionCookie(event.cookies, auth.secretSessionId);
+				return await triggerOauthFlow({
+					request: event.request,
+					url: event.url,
+					locals: event.locals,
+				});
+			}
+		} else {
+			// Redirect to OAuth flow unless on the authorized pages (home, shared conversation, login, healthcheck)
+			if (
+				event.url.pathname !== `${base}/` &&
+				event.url.pathname !== `${base}` &&
+				!event.url.pathname.startsWith(`${base}/login`) &&
+				!event.url.pathname.startsWith(`${base}/login/callback`) &&
+				!event.url.pathname.startsWith(`${base}/healthcheck`) &&
+				!event.url.pathname.startsWith(`${base}/r/`) &&
+				!event.url.pathname.startsWith(`${base}/conversation/`) &&
+				!event.url.pathname.startsWith(`${base}/api`)
+			) {
+				refreshSessionCookie(event.cookies, auth.secretSessionId);
+				return triggerOauthFlow({ request: event.request, url: event.url, locals: event.locals });
+			}
+		}
 	}
 
 	event.locals.user = auth.user || undefined;

src/lib/components/MobileNav.svelte

@@ -17,6 +17,7 @@
 	import { Spring } from "svelte/motion";
 	import { shareModal } from "$lib/stores/shareModal";
 	import { loading } from "$lib/stores/loading";
+	import { requireAuthUser } from "$lib/utils/auth";
 	interface Props {
 		title: string | undefined;
 		children?: import("svelte").Snippet;
@@ -105,7 +106,15 @@
 				<IconShare classNames={!canShare ? "opacity-40" : ""} />
 			</button>
 		{/if}
-		<a href="{base}/" class="flex size-8 shrink-0 items-center justify-center text-lg">
+		<a
+			href="{base}/"
+			class="flex size-8 shrink-0 items-center justify-center text-lg"
+			onclick={(e) => {
+				if (requireAuthUser()) {
+					e.preventDefault();
+				}
+			}}
+		>
 			<IconNew />
 		</a>
 	</div>

src/lib/components/NavConversationItem.svelte

@@ -9,6 +9,7 @@
 	import type { ConvSidebar } from "$lib/types/ConvSidebar";
 
 	import EditConversationModal from "$lib/components/EditConversationModal.svelte";
+	import { requireAuthUser } from "$lib/utils/auth";
 
 	interface Props {
 		conv: ConvSidebar;
@@ -49,6 +50,7 @@
 				title="Cancel delete action"
 				onclick={(e) => {
 					e.preventDefault();
+					if (requireAuthUser()) return;
 					confirmDelete = false;
 				}}
 			>
@@ -60,6 +62,7 @@
 				title="Confirm delete action"
 				onclick={(e) => {
 					e.preventDefault();
+					if (requireAuthUser()) return;
 					confirmDelete = false;
 					ondeleteConversation?.(conv.id.toString());
 				}}
@@ -75,6 +78,7 @@
 				title="Edit conversation title"
 				onclick={(e) => {
 					e.preventDefault();
+					if (requireAuthUser()) return;
 					renameOpen = true;
 				}}
 			>
@@ -87,6 +91,7 @@
 				title="Delete conversation"
 				onclick={(event) => {
 					event.preventDefault();
+					if (requireAuthUser()) return;
 					if (event.shiftKey) {
 						ondeleteConversation?.(conv.id.toString());
 					} else {

src/lib/components/NavMenu.svelte

@@ -27,6 +27,7 @@
 	import { browser } from "$app/environment";
 	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
 	import { useAPIClient, handleResponse } from "$lib/APIClient";
+	import { requireAuthUser } from "$lib/utils/auth";
 
 	const publicConfig = usePublicConfig();
 	const client = useAPIClient();
@@ -49,8 +50,18 @@
 
 	let hasMore = $state(true);
 
-	function handleNewChatClick() {
+	function handleNewChatClick(e: MouseEvent) {
 		isAborted.set(true);
+
+		if (requireAuthUser()) {
+			e.preventDefault();
+		}
+	}
+
+	function handleNavItemClick(e: MouseEvent) {
+		if (requireAuthUser()) {
+			e.preventDefault();
+		}
 	}
 
 	const dateRanges = [
@@ -174,6 +185,7 @@
 	<a
 		href="{base}/models"
 		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		onclick={handleNavItemClick}
 	>
 		Models
 		<span
@@ -186,6 +198,7 @@
 		<a
 			href="{base}/settings/application"
 			class="flex h-9 flex-none flex-grow items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+			onclick={handleNavItemClick}
 		>
 			Settings
 		</a>

src/lib/components/chat/ChatInput.svelte

@@ -7,6 +7,8 @@
 	import IconPaperclip from "$lib/components/icons/IconPaperclip.svelte";
 
 	import { isVirtualKeyboard } from "$lib/utils/isVirtualKeyboard";
+	import { requireAuthUser } from "$lib/utils/auth";
+
 	interface Props {
 		files?: File[];
 		mimeTypes?: string[];
@@ -160,6 +162,7 @@
 		{disabled}
 		onfocus={handleFocus}
 		onblur={handleBlur}
+		onbeforeinput={requireAuthUser}
 	></textarea>
 
 	{#if !showNoTools}
@@ -194,6 +197,11 @@
 								aria-label="Upload file"
 								type="file"
 								onchange={onFileChange}
+								onclick={(e) => {
+									if (requireAuthUser()) {
+										e.preventDefault();
+									}
+								}}
 								accept={mimeTypes.join(",")}
 							/>
 							<IconPaperclip classNames="text-xl" />

src/lib/components/chat/ChatMessage.svelte

@@ -17,6 +17,7 @@
 	import Alternatives from "./Alternatives.svelte";
 	import MessageAvatar from "./MessageAvatar.svelte";
 	import { PROVIDERS_HUB_ORGS } from "@huggingface/inference";
+	import { requireAuthUser } from "$lib/utils/auth";
 
 	interface Props {
 		message: Message;
@@ -329,7 +330,10 @@
 						class="hidden cursor-pointer items-center gap-1 rounded-md border border-gray-200 px-1.5 py-0.5 text-xs text-gray-400 group-hover:flex hover:flex hover:text-gray-500 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-300 lg:-right-2"
 						title="Edit"
 						type="button"
-						onclick={() => (editMsdgId = message.id)}
+						onclick={() => {
+							if (requireAuthUser()) return;
+							editMsdgId = message.id;
+						}}
 					>
 						<CarbonPen />
 						Edit

src/lib/components/chat/ChatWindow.svelte

@@ -32,6 +32,7 @@
 	import { cubicInOut } from "svelte/easing";
 
 	import { isVirtualKeyboard } from "$lib/utils/isVirtualKeyboard";
+	import { requireAuthUser } from "$lib/utils/auth";
 
 	interface Props {
 		messages?: Message[];
@@ -74,7 +75,7 @@
 	let pastedLongContent = $state(false);
 
 	const handleSubmit = () => {
-		if (loading || !draft) return;
+		if (requireAuthUser() || loading || !draft) return;
 		onmessage?.(draft);
 		draft = "";
 	};
@@ -273,12 +274,13 @@
 	});
 
 	function triggerPrompt(prompt: string) {
-		if (loading) return;
+		if (requireAuthUser() || loading) return;
 		draft = prompt;
 		handleSubmit();
 	}
 
 	async function startExample(example: RouterExample) {
+		if (requireAuthUser()) return;
 		activeRouterExamplePrompt = example.prompt;
 
 		if (browser && example.attachments?.length) {
@@ -533,6 +535,11 @@
 					{#if !currentModel.isRouter || !loading}
 						<a
 							href="{base}/settings/{currentModel.id}"
+							onclick={(e) => {
+								if (requireAuthUser()) {
+									e.preventDefault();
+								}
+							}}
 							class="inline-flex items-center gap-1 hover:underline"
 						>
 							{#if currentModel.isRouter}

src/lib/components/chat/FileDropzone.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { requireAuthUser } from "$lib/utils/auth";
 	import CarbonImage from "~icons/carbon/image";
 
 	interface Props {
@@ -18,7 +19,7 @@
 
 	async function dropHandle(event: DragEvent) {
 		event.preventDefault();
-		if (event.dataTransfer && event.dataTransfer.items) {
+		if (!requireAuthUser() && event.dataTransfer && event.dataTransfer.items) {
 			// Use DataTransferItemList interface to access the file(s)
 			if (files.length > 0) {
 				files = [];

src/lib/utils/auth.ts

@@ -0,0 +1,15 @@
+import { goto } from "$app/navigation";
+import { base } from "$app/paths";
+import { page } from "$app/state";
+
+/**
+ * Redirects to the login page if the user is not authenticated
+ * and the login feature is enabled.
+ */
+export function requireAuthUser(): boolean {
+	if (page.data.loginEnabled && !page.data.user) {
+		goto(`${base}/login`, { invalidateAll: true });
+		return true;
+	}
+	return false;
+}

src/routes/+layout.svelte

@@ -22,6 +22,7 @@
 	import IconShare from "$lib/components/icons/IconShare.svelte";
 	import { shareModal } from "$lib/stores/shareModal";
 	import BackgroundGenerationPoller from "$lib/components/BackgroundGenerationPoller.svelte";
+	import { requireAuthUser } from "$lib/utils/auth";
 
 	let { data = $bindable(), children } = $props();
 
@@ -95,11 +96,8 @@
 	}
 
 	function closeWelcomeModal() {
+		if (requireAuthUser()) return;
 		settings.set({ welcomeModalSeen: true });
-
-		if (!data.user && data.loginEnabled) {
-			goto(`${base}/login`, { invalidateAll: true });
-		}
 	}
 
 	onDestroy(() => {
@@ -161,6 +159,7 @@
 			if (oPressed && e.shiftKey && metaOrCtrl) {
 				e.preventDefault();
 				isAborted.set(true);
+				if (requireAuthUser()) return;
 				goto(`${base}/`, { invalidateAll: true });
 			}
 		};
@@ -176,7 +175,10 @@
 	);
 
 	// Show the welcome modal once on first app load
-	let showWelcome = $derived(!$settings.welcomeModalSeen && !(page.data.shared === true));
+	let showWelcome = $derived(
+		!$settings.welcomeModalSeen &&
+			!(page.data.shared === true && page.route.id?.startsWith("/conversation/"))
+	);
 </script>
 
 <svelte:head>
@@ -223,7 +225,7 @@
 	{/if}
 </svelte:head>
 
-{#if showWelcome || (!data.user && data.loginEnabled)}
+{#if showWelcome}
 	<WelcomeModal close={closeWelcomeModal} />
 {/if}
 

src/routes/conversation/[id]/+page.svelte

@@ -27,6 +27,7 @@
 	import { updateDebouncer } from "$lib/utils/updates.js";
 	import SubscribeModal from "$lib/components/SubscribeModal.svelte";
 	import { loading } from "$lib/stores/loading.js";
+	import { requireAuthUser } from "$lib/utils/auth.js";
 
 	let { data = $bindable() } = $props();
 
@@ -393,6 +394,8 @@
 	}
 
 	async function onRetry(payload: { id: Message["id"]; content?: string }) {
+		if (requireAuthUser()) return;
+
 		const lastMsgId = payload.id;
 		messagesPath = createMessagesPath(messages, lastMsgId);