Reopen: Feature/disable login for n messages (#356)

* disable login on first message

* update banner here too

* modal wording tweaks

* prevent NaN

* fix login wall

* fix flicker

* lint

* put modal text behind login check

* fix bug with sending messages without login

* fix misalignment between ui and api

* fix data update on disable login

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

.env

@@ -60,10 +60,10 @@ PUBLIC_SHARE_PREFIX=#https://hf.co/chat
 PUBLIC_GOOGLE_ANALYTICS_ID=#G-XXXXXXXX / Leave empty to disable
 PUBLIC_DEPRECATED_GOOGLE_ANALYTICS_ID=#UA-XXXXXXXX-X / Leave empty to disable
 PUBLIC_ANNOUNCEMENT_BANNERS=`[
-  {
-    "title": "Chat UI is now open sourced on GitHub",
-    "linkTitle": "GitHub repo",
-    "linkHref": "https://github.com/huggingface/chat-ui"
+    {
+    "title": "Llama v2 is live on HuggingChat! 🦙",
+    "linkTitle": "Announcement",
+    "linkHref": "https://huggingface.co/blog/llama2"
   }
 ]`
 
@@ -72,6 +72,7 @@ PARQUET_EXPORT_HF_TOKEN=
 PARQUET_EXPORT_SECRET=
 
 RATE_LIMIT= # requests per minute
+MESSAGES_BEFORE_LOGIN=# how many messages a user can send in a conversation before having to login. set to 0 to force login right away
 
 PUBLIC_APP_NAME=ChatUI # name used as title throughout the app
 PUBLIC_APP_ASSETS=chatui # used to find logos & favicons in static/$PUBLIC_APP_ASSETS

src/hooks.server.ts

@@ -1,4 +1,4 @@
-import { COOKIE_NAME } from "$env/static/private";
+import { COOKIE_NAME, MESSAGES_BEFORE_LOGIN } from "$env/static/private";
 import type { Handle } from "@sveltejs/kit";
 import {
 	PUBLIC_GOOGLE_ANALYTICS_ID,
@@ -64,7 +64,11 @@ export const handle: Handle = async ({ event, resolve }) => {
 		!event.url.pathname.startsWith(`${base}/admin`) &&
 		!["GET", "OPTIONS", "HEAD"].includes(event.request.method)
 	) {
-		if (!user && requiresUser) {
+		if (
+			!user &&
+			requiresUser &&
+			!((MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0) > 0)
+		) {
 			return errorResponse(401, ERROR_MESSAGES.authOnly);
 		}
 

src/lib/components/LoginModal.svelte

@@ -25,11 +25,16 @@
 				v{PUBLIC_VERSION}
 			</div>
 		</h2>
-		<p class="px-4 text-lg font-semibold leading-snug text-gray-800 sm:px-12">
-			This application is for demonstration purposes only.
-		</p>
+		{#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">
-			AI is an area of active research with known problems such as biased generation and
+			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>
 		{#if PUBLIC_APP_DATA_SHARING}
@@ -54,7 +59,6 @@
 						with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5" /> Hugging Face
 					{/if}
 				</button>
-				<p class="mt-2 px-2 text-sm text-gray-500">to start chatting right away</p>
 			{:else}
 				<input type="hidden" name="ethicsModalAccepted" value={true} />
 				{#each Object.entries(settings) as [key, val]}

src/routes/+layout.server.ts

@@ -6,7 +6,7 @@ import { UrlDependency } from "$lib/types/UrlDependency";
 import { defaultModel, models, oldModels, validateModel } from "$lib/server/models";
 import { authCondition, requiresUser } from "$lib/server/auth";
 import { DEFAULT_SETTINGS } from "$lib/types/Settings";
-import { SERPAPI_KEY, SERPER_API_KEY } from "$env/static/private";
+import { SERPAPI_KEY, SERPER_API_KEY, MESSAGES_BEFORE_LOGIN } from "$env/static/private";
 
 export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 	const { conversations } = collections;
@@ -82,5 +82,6 @@ export const load: LayoutServerLoad = async ({ locals, depends, url }) => {
 			email: locals.user.email,
 		},
 		requiresLogin: requiresUser,
+		messagesBeforeLogin: MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0,
 	};
 };

src/routes/+layout.svelte

@@ -178,7 +178,7 @@
 	{#if isSettingsOpen}
 		<SettingsModal on:close={() => (isSettingsOpen = false)} settings={data.settings} />
 	{/if}
-	{#if requiresLogin}
+	{#if requiresLogin && data.messagesBeforeLogin === 0}
 		<LoginModal settings={data.settings} />
 	{/if}
 	<slot />

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

@@ -15,7 +15,7 @@
 	import { webSearchParameters } from "$lib/stores/webSearchParameters";
 	import type { WebSearchMessage } from "$lib/types/WebSearch";
 	import type { Message } from "$lib/types/Message";
-	import { browser } from "$app/environment";
+	import { PUBLIC_APP_DISCLAIMER } from "$env/static/public";
 
 	export let data;
 
@@ -33,6 +33,7 @@
 
 	let loading = false;
 	let pending = false;
+	let loginRequired = false;
 
 	async function getTextGenerationStream(
 		inputs: string,
@@ -195,7 +196,6 @@
 			await getTextGenerationStream(message, messageId, isRetry, searchResponseId ?? undefined);
 
 			webSearchMessages = [];
-			if (browser) invalidate(UrlDependency.Conversation);
 
 			if (messages.filter((m) => m.from === "user").length === 1) {
 				summarizeTitle($page.params.id)
@@ -259,6 +259,12 @@
 	});
 	$: $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>
@@ -279,4 +285,5 @@
 	models={data.models}
 	currentModel={findCurrentModel([...data.models, ...data.oldModels], data.model)}
 	settings={data.settings}
+	{loginRequired}
 />

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

@@ -1,8 +1,8 @@
-import { RATE_LIMIT } from "$env/static/private";
+import { MESSAGES_BEFORE_LOGIN, RATE_LIMIT } from "$env/static/private";
 import { buildPrompt } from "$lib/buildPrompt";
 import { PUBLIC_SEP_TOKEN } from "$lib/constants/publicSepToken";
 import { abortedGenerations } from "$lib/server/abortedGenerations";
-import { authCondition } from "$lib/server/auth";
+import { authCondition, requiresUser } from "$lib/server/auth";
 import { collections } from "$lib/server/database";
 import { modelEndpoint } from "$lib/server/modelEndpoint";
 import { models } from "$lib/server/models";
@@ -37,6 +37,14 @@ export async function POST({ request, fetch, locals, params, getClientAddress })
 		throw error(404, "Conversation not found");
 	}
 
+	if (
+		!locals.user?._id &&
+		requiresUser &&
+		conv.messages.length > (MESSAGES_BEFORE_LOGIN ? parseInt(MESSAGES_BEFORE_LOGIN) : 0)
+	) {
+		throw error(429, "Exceeded number of messages before login");
+	}
+
 	if (RATE_LIMIT !== "") {
 		let nEvents = 0;
 		if (locals.user?._id) {