Option to disable login on first N messages (#352)

* disable login on first message

* update banner here too

* modal wording tweaks

* prevent NaN

---------

Co-authored-by: Victor Mustar <[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,7 @@ 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 && !((parseInt(MESSAGES_BEFORE_LOGIN) || 0) > 0)) {
 			return errorResponse(401, ERROR_MESSAGES.authOnly);
 		}
 

src/lib/components/LoginModal.svelte

@@ -25,11 +25,14 @@
 				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
+			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>
 		<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 +57,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: 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

@@ -16,6 +16,7 @@
 	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;
 
@@ -279,4 +280,8 @@
 	models={data.models}
 	currentModel={findCurrentModel([...data.models, ...data.oldModels], data.model)}
 	settings={data.settings}
+	loginRequired={(data.requiresLogin
+		? !data.user
+		: !data.settings.ethicsModalAcceptedAt && !!PUBLIC_APP_DISCLAIMER) &&
+		data.messages.length > data.messagesBeforeLogin}
 />