feat: show login modal if login is required for creating assistants & tools (#1640)

Author: nsarrazin

chart/env/prod.yaml

@@ -417,7 +417,7 @@ envVars:
   PUBLIC_APP_COLOR: "yellow"
   PUBLIC_APP_DESCRIPTION: "Making the community's best AI chat models available to everyone."
   PUBLIC_APP_DISCLAIMER_MESSAGE: "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."
-  PUBLIC_APP_GUEST_MESSAGE: "You have reached the guest message limit, Sign In with a free Hugging Face account to continue using HuggingChat."
+  PUBLIC_APP_GUEST_MESSAGE: "Sign in with a free Hugging Face account to continue using HuggingChat."
   PUBLIC_APP_DATA_SHARING: 0
   PUBLIC_APP_DISCLAIMER: 1
   PUBLIC_PLAUSIBLE_SCRIPT_URL: "/js/script.js"

src/lib/components/chat/ChatWindow.svelte

@@ -12,7 +12,6 @@
 	import ChatInput from "./ChatInput.svelte";
 	import StopGeneratingBtn from "../StopGeneratingBtn.svelte";
 	import type { Model } from "$lib/types/Model";
-	import LoginModal from "../LoginModal.svelte";
 	import { page } from "$app/stores";
 	import FileDropzone from "./FileDropzone.svelte";
 	import RetryBtn from "../RetryBtn.svelte";
@@ -36,6 +35,7 @@
 	import { fly } from "svelte/transition";
 	import { cubicInOut } from "svelte/easing";
 	import type { ToolFront } from "$lib/types/Tool";
+	import { loginModalOpen } from "$lib/stores/loginModal";
 
 	export let messages: Message[] = [];
 	export let loading = false;
@@ -50,7 +50,6 @@
 
 	$: isReadOnly = !models.some((model) => model.id === currentModel.id);
 
-	let loginModalOpen = false;
 	let message: string;
 	let timeout: ReturnType<typeof setTimeout>;
 	let isSharedRecently = false;
@@ -250,13 +249,6 @@
 />
 
 <div class="relative min-h-0 min-w-0">
-	{#if loginModalOpen}
-		<LoginModal
-			on:close={() => {
-				loginModalOpen = false;
-			}}
-		/>
-	{/if}
 	<div
 		class="scrollbar-custom h-full overflow-y-auto"
 		use:snapScrollToBottom={messages.length ? [...messages] : false}
@@ -330,7 +322,7 @@
 					on:message={(ev) => {
 						if ($page.data.loginRequired) {
 							ev.preventDefault();
-							loginModalOpen = true;
+							$loginModalOpen = true;
 						} else {
 							dispatch("message", ev.detail);
 						}
@@ -343,7 +335,7 @@
 					on:message={(ev) => {
 						if ($page.data.loginRequired) {
 							ev.preventDefault();
-							loginModalOpen = true;
+							$loginModalOpen = true;
 						} else {
 							dispatch("message", ev.detail);
 						}
@@ -442,7 +434,7 @@
 								on:beforeinput={(ev) => {
 									if ($page.data.loginRequired) {
 										ev.preventDefault();
-										loginModalOpen = true;
+										$loginModalOpen = true;
 									}
 								}}
 								on:paste={onPaste}

src/lib/stores/loginModal.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const loginModalOpen = writable(false);

src/routes/+layout.svelte

@@ -19,6 +19,8 @@
 	import titleUpdate from "$lib/stores/titleUpdate";
 	import DisclaimerModal from "$lib/components/DisclaimerModal.svelte";
 	import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
+	import { loginModalOpen } from "$lib/stores/loginModal";
+	import LoginModal from "$lib/components/LoginModal.svelte";
 
 	export let data;
 
@@ -215,6 +217,14 @@
 	<DisclaimerModal on:close={() => ($settings.ethicsModalAccepted = true)} />
 {/if}
 
+{#if $loginModalOpen}
+	<LoginModal
+		on:close={() => {
+			$loginModalOpen = false;
+		}}
+	/>
+{/if}
+
 <ExpandNavigation
 	isCollapsed={isNavCollapsed}
 	on:click={() => (isNavCollapsed = !isNavCollapsed)}

src/routes/assistants/+page.svelte

@@ -26,6 +26,7 @@
 	import { isDesktop } from "$lib/utils/isDesktop";
 	import { SortKey } from "$lib/types/Assistant";
 	import { ReviewStatus } from "$lib/types/Review";
+	import { loginModalOpen } from "$lib/stores/loginModal";
 
 	export let data: PageData;
 
@@ -152,12 +153,23 @@
 					Show unfeatured assistants
 				</label>
 			{/if}
-			<a
-				href={`${base}/settings/assistants/new`}
-				class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
-			>
-				<CarbonAdd />Create new assistant
-			</a>
+			{#if $page.data.loginRequired && !data.user}
+				<button
+					on:click={() => {
+						$loginModalOpen = true;
+					}}
+					class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
+				>
+					<CarbonAdd />Create new assistant
+				</button>
+			{:else}
+				<a
+					href={`${base}/settings/assistants/new`}
+					class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
+				>
+					<CarbonAdd />Create new assistant
+				</a>
+			{/if}
 		</div>
 
 		<div class="mt-7 flex flex-wrap items-center gap-x-2 gap-y-3 text-sm">

src/routes/tools/+page.svelte

@@ -21,6 +21,7 @@
 	import ToolLogo from "$lib/components/ToolLogo.svelte";
 	import { ReviewStatus } from "$lib/types/Review";
 	import { useSettingsStore } from "$lib/stores/settings";
+	import { loginModalOpen } from "$lib/stores/loginModal";
 
 	export let data: PageData;
 
@@ -142,12 +143,23 @@
 					Show unfeatured tools
 				</label>
 			{/if}
-			<a
-				href={`${base}/tools/new`}
-				class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
-			>
-				<CarbonAdd />Create new tool
-			</a>
+			{#if $page.data.loginRequired && !data.user}
+				<button
+					on:click={() => {
+						$loginModalOpen = true;
+					}}
+					class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
+				>
+					<CarbonAdd />Create new tool
+				</button>
+			{:else}
+				<a
+					href={`${base}/tools/new`}
+					class="flex items-center gap-1 whitespace-nowrap rounded-lg border bg-white py-1 pl-1.5 pr-2.5 shadow-sm hover:bg-gray-50 hover:shadow-none dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-700"
+				>
+					<CarbonAdd />Create new tool
+				</a>
+			{/if}
 		</div>
 
 		<div class="mb-4 mt-7 flex flex-wrap items-center gap-x-2 gap-y-3 text-sm">