Bring back disclaimer modal & updates to guest mode (#526)

* Changes to modal on login:
- Ethics modal on page load
- Login modal pop up for guest mode later
- Change message limit to be 5 messages across all conversations

* fix login button width

* tweak modals

* Update src/routes/+layout.server.ts

Co-authored-by: Mishig <[email protected]>

* Fix linting

---------

Co-authored-by: Victor Mustar <[email protected]>
Co-authored-by: Mishig <[email protected]>

.env.template

@@ -142,7 +142,7 @@ PUBLIC_APP_DATA_SHARING=1
 PUBLIC_APP_DISCLAIMER=1
 
 RATE_LIMIT=16
-MESSAGES_BEFORE_LOGIN=1# how many messages a user can send in a conversation before having to login. set to 0 to force login right away
+MESSAGES_BEFORE_LOGIN=5# how many messages a user can send in a conversation before having to login. set to 0 to force login right away
 
 PUBLIC_GOOGLE_ANALYTICS_ID=G-8Q63TH4CSL
 

src/lib/components/DisclaimerModal.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+	import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
+	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
+	import Modal from "$lib/components/Modal.svelte";
+	import type { LayoutData } from "../../routes/$types";
+	import Logo from "./icons/Logo.svelte";
+
+	export let settings: LayoutData["settings"];
+</script>
+
+<Modal>
+	<div
+		class="flex w-full flex-col items-center gap-6 bg-gradient-to-b from-primary-500/40 via-primary-500/10 to-primary-500/0 px-5 pb-8 pt-9 text-center sm:px-6"
+	>
+		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
+			<Logo classNames="mr-1" />
+			{PUBLIC_APP_NAME}
+		</h2>
+
+		<p class="text-lg font-semibold leading-snug text-gray-800" style="text-wrap: balance;">
+			{PUBLIC_APP_DESCRIPTION}
+		</p>
+
+		<p class="text-sm text-gray-500">
+			Disclaimer: AI is an area of active research with known problems such as biased generation and
+			misinformation. Do not use this application for high-stakes decisions or advice.
+		</p>
+
+		<div class="flex w-full flex-col items-center gap-2">
+			{#if $page.data.guestMode || !$page.data.loginEnabled}
+				<form action="{base}/settings" target="_parent" method="POST" class="w-full">
+					<input type="hidden" name="ethicsModalAccepted" value={true} />
+					{#each Object.entries(settings).filter(([k]) => !(k === "customPrompts")) as [key, val]}
+						<input type="hidden" name={key} value={val} />
+					{/each}
+					<input
+						type="hidden"
+						name="customPrompts"
+						value={JSON.stringify(settings.customPrompts)}
+					/>
+					<button
+						type="submit"
+						class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-100"
+						class:bg-white={$page.data.loginEnabled}
+						class:text-gray-800={$page.data.loginEnabled}
+					>
+						{#if $page.data.loginEnabled}
+							Try as guest
+						{:else}
+							Start chatting
+						{/if}
+					</button>
+				</form>
+			{/if}
+			{#if $page.data.loginEnabled}
+				<form action="{base}/login" target="_parent" method="POST" class="w-full">
+					<button
+						type="submit"
+						class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+					>
+						Sign in
+						{#if PUBLIC_APP_NAME === "HuggingChat"}
+							with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5 flex-none" /> Hugging Face
+						{/if}
+					</button>
+				</form>
+			{/if}
+		</div>
+	</div>
+</Modal>

src/lib/components/LoginModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
-	import { PUBLIC_APP_DATA_SHARING, PUBLIC_APP_NAME, PUBLIC_VERSION } from "$env/static/public";
+	import { PUBLIC_APP_DESCRIPTION, PUBLIC_APP_NAME } from "$env/static/public";
 	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
 	import Modal from "$lib/components/Modal.svelte";
 	import type { LayoutData } from "../../routes/$types";
@@ -9,47 +9,32 @@
 	export let settings: LayoutData["settings"];
 </script>
 
-<Modal>
+<Modal on:close>
 	<div
-		class="flex w-full flex-col items-center gap-6 bg-gradient-to-t from-primary-500/40 via-primary-500/10 to-primary-500/0 px-4 pb-10 pt-9 text-center"
+		class="flex w-full flex-col items-center gap-6 bg-gradient-to-b from-primary-500/40 via-primary-500/10 to-primary-500/0 px-5 pb-8 pt-9 text-center"
 	>
 		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
 			<Logo classNames="mr-1" />
 			{PUBLIC_APP_NAME}
-			<div
-				class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400"
-			>
-				v{PUBLIC_VERSION}
-			</div>
 		</h2>
-		{#if $page.data.requiresLogin}
-			<p
-				class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12"
-				style="text-wrap: balance;"
-			>
-				Please Sign in with Hugging Face to continue
-			</p>
-		{/if}
-		<p class="text-base text-gray-800">
-			Disclaimer: AI is an area of active research with known problems such as biased generation and
-			misinformation. Do not use this application for high-stakes decisions or advice.
+		<p class="text-lg font-semibold leading-snug text-gray-800" style="text-wrap: balance;">
+			{PUBLIC_APP_DESCRIPTION}
 		</p>
-		{#if PUBLIC_APP_DATA_SHARING}
-			<p class="px-2 text-sm text-gray-500">
-				Your conversations will be shared with model authors unless you disable it from your
-				settings.
-			</p>
-		{/if}
+		<p class="rounded-xl border bg-white/80 p-2 text-base text-gray-800">
+			You have reached the guest message limit, please Sign In with your Hugging Face account to
+			continue.
+		</p>
+
 		<form
-			action="{base}/{$page.data.requiresLogin ? 'login' : 'settings'}"
+			action="{base}/{$page.data.loginRequired ? 'login' : 'settings'}"
 			target="_parent"
 			method="POST"
 			class="flex w-full flex-col items-center gap-2"
 		>
-			{#if $page.data.requiresLogin}
+			{#if $page.data.loginRequired}
 				<button
 					type="submit"
-					class="mt-2 flex items-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
+					class="flex w-full items-center justify-center whitespace-nowrap rounded-full bg-black px-5 py-2 text-center text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
 				>
 					Sign in
 					{#if PUBLIC_APP_NAME === "HuggingChat"}
@@ -63,7 +48,7 @@
 				{/each}
 				<button
 					type="submit"
-					class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-primary-500"
+					class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
 				>
 					Start chatting
 				</button>

src/lib/components/NavMenu.svelte

@@ -67,7 +67,7 @@
 		<form action="{base}/login" method="POST" target="_parent">
 			<button
 				type="submit"
-				class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+				class="flex h-9 w-full flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 			>
 				Login
 			</button>

src/lib/components/chat/ChatWindow.svelte

@@ -15,6 +15,8 @@
 	import WebSearchToggle from "../WebSearchToggle.svelte";
 	import LoginModal from "../LoginModal.svelte";
 	import type { WebSearchUpdate } from "$lib/types/MessageUpdate";
+	import { page } from "$app/stores";
+	import DisclaimerModal from "../DisclaimerModal.svelte";
 
 	export let messages: Message[] = [];
 	export let loading = false;
@@ -26,7 +28,6 @@
 	export let webSearchMessages: WebSearchUpdate[] = [];
 	export let preprompt: string | undefined = undefined;
 
-	export let loginRequired = false;
 	$: isReadOnly = !models.some((model) => model.id === currentModel.id);
 
 	let loginModalOpen = false;
@@ -47,8 +48,15 @@
 </script>
 
 <div class="relative min-h-0 min-w-0">
-	{#if loginModalOpen}
-		<LoginModal {settings} on:close={() => (loginModalOpen = false)} />
+	{#if !settings.ethicsModalAcceptedAt}
+		<DisclaimerModal {settings} />
+	{:else if loginModalOpen}
+		<LoginModal
+			{settings}
+			on:close={() => {
+				loginModalOpen = false;
+			}}
+		/>
 	{/if}
 	<ChatMessages
 		{loading}
@@ -61,7 +69,13 @@
 		isAuthor={!shared}
 		{webSearchMessages}
 		{preprompt}
-		on:message
+		on:message={(ev) => {
+			if ($page.data.loginRequired) {
+				loginModalOpen = true;
+			} else {
+				dispatch("message", ev.detail);
+			}
+		}}
 		on:vote
 		on:retry={(ev) => {
 			if (!loading) dispatch("retry", ev.detail);
@@ -91,8 +105,11 @@
 					placeholder="Ask anything"
 					bind:value={message}
 					on:submit={handleSubmit}
-					on:keypress={() => {
-						if (loginRequired) loginModalOpen = true;
+					on:keypress={(ev) => {
+						if ($page.data.loginRequired) {
+							ev.preventDefault();
+							loginModalOpen = true;
+						}
 					}}
 					maxRows={4}
 					disabled={isReadOnly}

src/routes/+layout.server.ts

@@ -38,6 +38,26 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 		});
 	}
 
+	// get the number of messages where `from === "assistant"` across all conversations.
+	const totalMessages =
+		(
+			await conversations
+				.aggregate([
+					{ $match: authCondition(locals) },
+					{ $project: { messages: 1 } },
+					{ $unwind: "$messages" },
+					{ $match: { "messages.from": "assistant" } },
+					{ $count: "messages" },
+				])
+				.toArray()
+		)[0]?.messages ?? 0;
+
+	const messagesBeforeLogin = MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0;
+
+	const userHasExceededMessages = messagesBeforeLogin > 0 && totalMessages > messagesBeforeLogin;
+
+	const loginRequired = requiresUser && !locals.user && userHasExceededMessages;
+
 	return {
 		conversations: await conversations
 			.find(authCondition(locals))
@@ -83,7 +103,8 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 			avatarUrl: locals.user.avatarUrl,
 			email: locals.user.email,
 		},
-		requiresLogin: requiresUser,
-		messagesBeforeLogin: MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0,
+		loginRequired,
+		loginEnabled: requiresUser,
+		guestMode: requiresUser && messagesBeforeLogin > 0,
 	};
 };

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
 	import { page } from "$app/stores";
 	import "../styles/main.css";
 	import { base } from "$app/paths";
-	import { PUBLIC_ORIGIN, PUBLIC_APP_DISCLAIMER } from "$env/static/public";
+	import { PUBLIC_ORIGIN } from "$env/static/public";
 
 	import { shareConversation } from "$lib/shareConversation";
 	import { UrlDependency } from "$lib/types/UrlDependency";
@@ -14,7 +14,6 @@
 	import NavMenu from "$lib/components/NavMenu.svelte";
 	import Toast from "$lib/components/Toast.svelte";
 	import SettingsModal from "$lib/components/SettingsModal.svelte";
-	import LoginModal from "$lib/components/LoginModal.svelte";
 	import { PUBLIC_APP_ASSETS, PUBLIC_APP_NAME } from "$env/static/public";
 	import titleUpdate from "$lib/stores/titleUpdate";
 
@@ -94,13 +93,6 @@
 
 	$: if ($error) onError();
 
-	const requiresLogin =
-		!$page.error &&
-		!$page.route.id?.startsWith("/r/") &&
-		(data.requiresLogin
-			? !data.user
-			: !data.settings.ethicsModalAcceptedAt && !!PUBLIC_APP_DISCLAIMER);
-
 	$: if ($titleUpdate) {
 		const convIdx = data.conversations.findIndex(({ id }) => id === $titleUpdate?.convId);
 
@@ -157,7 +149,7 @@
 		<NavMenu
 			conversations={data.conversations}
 			user={data.user}
-			canLogin={data.user === undefined && data.requiresLogin}
+			canLogin={data.user === undefined && data.loginEnabled}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 			on:clickSettings={() => (isSettingsOpen = true)}
@@ -168,7 +160,7 @@
 		<NavMenu
 			conversations={data.conversations}
 			user={data.user}
-			canLogin={data.user === undefined && data.requiresLogin}
+			canLogin={data.user === undefined && data.loginEnabled}
 			on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 			on:clickSettings={() => (isSettingsOpen = true)}
@@ -185,8 +177,5 @@
 			models={data.models}
 		/>
 	{/if}
-	{#if requiresLogin && data.messagesBeforeLogin === 0}
-		<LoginModal settings={data.settings} />
-	{/if}
 	<slot />
 </div>

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

@@ -12,7 +12,6 @@
 	import { findCurrentModel } from "$lib/utils/models";
 	import { webSearchParameters } from "$lib/stores/webSearchParameters";
 	import type { Message } from "$lib/types/Message";
-	import { PUBLIC_APP_DISCLAIMER } from "$env/static/public";
 	import type { MessageUpdate, WebSearchUpdate } from "$lib/types/MessageUpdate";
 	import titleUpdate from "$lib/stores/titleUpdate";
 
@@ -32,7 +31,6 @@
 
 	let loading = false;
 	let pending = false;
-	let loginRequired = false;
 
 	async function convFromShared() {
 		try {
@@ -266,12 +264,6 @@
 
 	$: $page.params.id, (isAborted = true);
 	$: title = data.conversations.find((conv) => conv.id === $page.params.id)?.title ?? data.title;
-
-	$: loginRequired =
-		(data.requiresLogin
-			? !data.user
-			: !data.settings.ethicsModalAcceptedAt && !!PUBLIC_APP_DISCLAIMER) &&
-		messages.length >= data.messagesBeforeLogin;
 </script>
 
 <svelte:head>
@@ -299,5 +291,4 @@
 	models={data.models}
 	currentModel={findCurrentModel([...data.models, ...data.oldModels], data.model)}
 	settings={data.settings}
-	{loginRequired}
 />

src/routes/conversation/[id]/+server.ts

@@ -49,13 +49,28 @@ export async function POST({ request, fetch, locals, params, getClientAddress })
 		ip: getClientAddress(),
 	});
 
-	// make sure an anonymous user can't post more than one message
+	// guest mode check
 	if (
 		!locals.user?._id &&
 		requiresUser &&
-		conv.messages.length > (MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0)
+		(MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0) > 0
 	) {
-		throw error(429, "Exceeded number of messages before login");
+		const totalMessages =
+			(
+				await collections.conversations
+					.aggregate([
+						{ $match: authCondition(locals) },
+						{ $project: { messages: 1 } },
+						{ $unwind: "$messages" },
+						{ $match: { "messages.from": "assistant" } },
+						{ $count: "messages" },
+					])
+					.toArray()
+			)[0]?.messages ?? 0;
+
+		if (totalMessages > parseInt(MESSAGES_BEFORE_LOGIN)) {
+			throw error(429, "Exceeded number of messages before login");
+		}
 	}
 
 	// check if the user is rate limited