Reopen: Feature/disable login for n messages (huggingface#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) {