Add ethics modal (#129)

* add ethics modal

* bind ethic modal to local storage + add transition

* tweaks

* set app version in an env var

* hide version if env var is undefined

* alignement

---------

Co-authored-by: Adrien Denat <oi@adriendenat.com>

.env

@@ -14,7 +14,7 @@ PUBLIC_USER_MESSAGE_TOKEN=<|prompter|>
 PUBLIC_ASSISTANT_MESSAGE_TOKEN=<|assistant|>
 PUBLIC_SEP_TOKEN=</s>
 PUBLIC_PREPROMPT="Below are a series of dialogues between various people and an AI assistant. The AI tries to be helpful, polite, honest, sophisticated, emotionally aware, and humble-but-knowledgeable. The assistant is happy to help with almost anything, and will do its best to understand exactly what is needed. It also tries to avoid giving false or misleading information, and it caveats when it isn't entirely sure about the right answer. That said, the assistant is practical and really does its best, and doesn't let caution get too much in the way of being useful."
-
+PUBLIC_VERSION=0
 # [{"endpoint": "https://api-inference.huggingface.co/models/...", authorization: "Bearer hf_<token>", weight: 1}] to load balance
 # Eg if one endpoint has weight 2 and the other has weight 1, the first endpoint will be called twice as often
 MODEL_ENDPOINTS=`[]`

src/lib/components/EthicsModal.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { PUBLIC_VERSION } from "$env/static/public";
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import Modal from "$lib/components/Modal.svelte";
+	import { onMount } from "svelte";
+
+	let ethicsModal = false;
+
+	const LOCAL_STORAGE_KEY = "has-seen-ethics-modal";
+
+	onMount(() => {
+		ethicsModal = localStorage.getItem(LOCAL_STORAGE_KEY) === null;
+	});
+
+	const handleClick = () => {
+		ethicsModal = false;
+		localStorage.setItem(LOCAL_STORAGE_KEY, "true");
+	};
+</script>
+
+{#if ethicsModal}
+	<Modal>
+		<div
+			class="flex w-full flex-col items-center gap-6 bg-gradient-to-t from-yellow-500/40 via-yellow-500/10 to-yellow-500/0 px-4 pb-10 pt-9 text-center"
+		>
+			<h2 class="flex items-center text-2xl font-semibold text-gray-800">
+				<Logo classNames="text-3xl mr-1.5" />HuggingChat
+				{#if typeof PUBLIC_VERSION !== "undefined"}
+					<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>
+				{/if}
+			</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>
+			<p class="text-gray-800">
+				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>
+			<button
+				type="button"
+				on:click={handleClick}
+				class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-yellow-500"
+			>
+				Start chatting
+			</button>
+		</div>
+	</Modal>
+{/if}

src/lib/components/MobileNav.svelte

@@ -45,7 +45,7 @@
 	>
 </nav>
 <nav
-	class="fixed inset-0 z-50 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 {isOpen
+	class="fixed inset-0 z-30 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 {isOpen
 		? 'block'
 		: 'hidden'}"
 >

src/lib/components/Modal.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cubicOut } from "svelte/easing";
+	import { fade } from "svelte/transition";
+</script>
+
+<div
+	transition:fade={{ easing: cubicOut, duration: 300 }}
+	class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 p-8 backdrop-blur-sm dark:bg-black/50"
+>
+	<div class="-mt-10 max-w-sm overflow-hidden rounded-2xl bg-white shadow-2xl md:-mt-20">
+		<slot />
+	</div>
+</div>

src/lib/components/chat/ChatIntroduction.svelte

@@ -3,13 +3,14 @@
 		PUBLIC_DISABLE_INTRO_TILES,
 		PUBLIC_MODEL_ID,
 		PUBLIC_MODEL_NAME,
+		PUBLIC_VERSION,
 	} from "$env/static/public";
 
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
 	import CarbonEarth from "~icons/carbon/earth";
 	import { createEventDispatcher } from "svelte";
-
+	console.log(PUBLIC_VERSION);
 	const dispatch = createEventDispatcher<{ message: string }>();
 </script>
 
@@ -19,11 +20,13 @@
 			<div class="mb-3 flex items-center text-2xl font-semibold">
 				<Logo classNames="mr-1 text-yellow-400 text-4xl" />
 				HuggingChat
-				<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 dark:border-gray-700/60 dark:bg-gray-800"
-				>
-					v0
-				</div>
+				{#if typeof PUBLIC_VERSION !== "undefined"}
+					<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 dark:border-gray-700/60 dark:bg-gray-800"
+					>
+						v{PUBLIC_VERSION}
+					</div>
+				{/if}
 			</div>
 			<p class="text-base text-gray-600 dark:text-gray-400">
 				Making the community's best AI chat models available to everyone.

src/routes/+layout.svelte

@@ -12,7 +12,10 @@
 
 	import MobileNav from "$lib/components/MobileNav.svelte";
 	import NavMenu from "$lib/components/NavMenu.svelte";
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import Modal from "$lib/components/Modal.svelte";
 	import Toast from "$lib/components/Toast.svelte";
+	import EthicsModal from "$lib/components/EthicsModal.svelte";
 
 	export let data;
 
@@ -102,5 +105,6 @@
 	{#if currentError}
 		<Toast message={currentError} />
 	{/if}
+	<EthicsModal />
 	<slot />
 </div>