File size: 2,547 Bytes
cc38b64
 
d433b55
a8a9533
cc38b64
 
e99e7c2
c0ec977
cc38b64
 
e99e7c2
cc38b64
 
60e17e4
cc38b64
a8a9533
cc38b64
 
 
a8a9533
cc38b64
 
 
a8a9533
cc38b64
 
 
a8a9533
cc38b64
 
 
e6f9144
 
d433b55
 
 
a1a6daf
 
 
e6f9144
 
 
e99e7c2
e6f9144
 
 
d433b55
 
e6f9144
e99e7c2
e6f9144
e99e7c2
e6f9144
 
 
 
d433b55
cc38b64
 
 
56821e6
cc38b64
 
a8a9533
56821e6
 
 
 
cc38b64
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script lang="ts">
	import { base } from "$app/paths";
	import { page } from "$app/state";
	import { env as envPublic } from "$env/dynamic/public";
	import LogoHuggingFaceBorderless from "$lib/components/icons/LogoHuggingFaceBorderless.svelte";
	import Modal from "$lib/components/Modal.svelte";
	import { useSettingsStore } from "$lib/stores/settings";
	import { cookiesAreEnabled } from "$lib/utils/cookiesAreEnabled";
	import Logo from "./icons/Logo.svelte";

	const settings = useSettingsStore();
</script>

<Modal on:close width="!max-w-[400px] !m-4">
	<div
		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-6 bg-gradient-to-b px-5 pb-8 pt-9 text-center sm:px-6"
	>
		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
			<Logo classNames="mr-1" />
			{envPublic.PUBLIC_APP_NAME}
		</h2>

		<p class="text-lg font-semibold leading-snug text-gray-800" style="text-wrap: balance;">
			{envPublic.PUBLIC_APP_DESCRIPTION}
		</p>

		<p class="text-sm text-gray-500">
			{envPublic.PUBLIC_APP_DISCLAIMER_MESSAGE}
		</p>

		<div class="flex w-full flex-col items-center gap-2">
			<button
				class="w-full justify-center rounded-full border-2 border-gray-300 bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
				class:bg-white={page.data.loginEnabled}
				class:text-gray-800={page.data.loginEnabled}
				class:hover:bg-slate-100={page.data.loginEnabled}
				onclick={(e) => {
					e.preventDefault();
					e.stopPropagation();
					if (!cookiesAreEnabled()) {
						window.open(window.location.href, "_blank");
					}

					$settings.ethicsModalAccepted = true;
				}}
			>
				{#if page.data.loginEnabled}
					{#if page.data.guestMode}
						Continue as guest
					{:else}
						Explore the app
					{/if}
				{:else}
					Start chatting
				{/if}
			</button>
			{#if page.data.loginEnabled}
				<form action="{base}/login" target="_parent" method="POST" class="w-full">
					<button
						type="submit"
						class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
					>
						Sign in
						{#if envPublic.PUBLIC_APP_NAME === "HuggingChat"}
							<span class="flex items-center">
								&nbsp;with <LogoHuggingFaceBorderless classNames="text-xl mr-1 ml-1.5 flex-none" /> Hugging
								Face
							</span>
						{/if}
					</button>
				</form>
			{/if}
		</div>
	</div>
</Modal>