File size: 4,567 Bytes
e99e7c2
 
 
 
797e348
e99e7c2
 
 
 
 
 
a8a9533
e99e7c2
 
 
 
 
 
 
623efa6
e99e7c2
623efa6
 
 
 
 
e99e7c2
821697c
a8a9533
3fbaea4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e99e7c2
 
 
821697c
e99e7c2
821697c
 
 
e99e7c2
 
 
d3e9153
 
 
821697c
d3e9153
 
 
 
821697c
 
 
 
 
 
 
 
 
 
 
 
797e348
 
 
 
 
 
5a5937a
797e348
 
 
 
 
 
 
 
e99e7c2
 
 
 
 
 
6f6d080
e99e7c2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
06feee8
e99e7c2
 
 
 
 
 
 
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<script lang="ts">
	import Modal from "$lib/components/Modal.svelte";
	import CarbonClose from "~icons/carbon/close";
	import CarbonTrashCan from "~icons/carbon/trash-can";
	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";

	import { enhance } from "$app/forms";
	import { base } from "$app/paths";

	import { useSettingsStore } from "$lib/stores/settings";
	import Switch from "$lib/components/Switch.svelte";
	import { env as envPublic } from "$env/dynamic/public";

	let isConfirmingDeletion = false;

	let settings = useSettingsStore();
</script>

<div class="flex w-full flex-col gap-5">
	<div class="flex flex-col items-start justify-between text-xl font-semibold text-gray-800">
		<h2>Application Settings</h2>
		<span class="text-sm font-light text-gray-500">
			Latest deployment <span class="gap-2 font-mono"
				>{envPublic.PUBLIC_COMMIT_SHA.slice(0, 7)}</span
			>
		</span>
	</div>
	<div class="flex h-full max-w-2xl flex-col gap-2 max-sm:pt-0">
		{#if envPublic.PUBLIC_APP_DATA_SHARING === "1"}
			<!-- svelte-ignore a11y-label-has-associated-control -->
			<label class="flex items-center">
				<Switch
					name="shareConversationsWithModelAuthors"
					bind:checked={$settings.shareConversationsWithModelAuthors}
				/>
				<div class="inline cursor-pointer select-none items-center gap-2 pl-2">
					Share conversations with model authors
				</div>
			</label>

			<p class="text-sm text-gray-500">
				Sharing your data will help improve the training data and make open models better over time.
			</p>
		{/if}
		<!-- svelte-ignore a11y-label-has-associated-control -->
		<label class="mt-6 flex items-center">
			<Switch name="hideEmojiOnSidebar" bind:checked={$settings.hideEmojiOnSidebar} />
			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
				Hide emoticons in conversation topics
				<p class="text-sm font-normal text-gray-500">
					Emoticons are shown in the sidebar by default, enable this to hide them.
				</p>
			</div>
		</label>

		<!-- svelte-ignore a11y-label-has-associated-control -->
		<label class="mt-6 flex items-center">
			<Switch name="disableStream" bind:checked={$settings.disableStream} />
			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
				Disable streaming tokens
			</div>
		</label>

		<!-- svelte-ignore a11y-label-has-associated-control -->
		<label class="mt-6 flex items-center">
			<Switch name="directPaste" bind:checked={$settings.directPaste} />
			<div class="inline cursor-pointer select-none items-center gap-2 pl-2 font-semibold">
				Paste text directly into chat
				<p class="text-sm font-normal text-gray-500">
					By default, when pasting long text into the chat, we treat it as a plaintext file. Enable
					this to paste directly into the chat instead.
				</p>
			</div>
		</label>

		<div class="mt-12 flex flex-col gap-3">
			<a
				href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
				target="_blank"
				rel="noreferrer"
				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
				><CarbonArrowUpRight class="mr-1.5 shrink-0 text-sm " /> Share your feedback on HuggingChat</a
			>
			<button
				on:click|preventDefault={() => (isConfirmingDeletion = true)}
				type="submit"
				class="flex items-center underline decoration-gray-300 underline-offset-2 hover:decoration-gray-700"
				><CarbonTrashCan class="mr-2 inline text-sm text-red-500" />Delete all conversations</button
			>
		</div>
	</div>

	{#if isConfirmingDeletion}
		<Modal on:close={() => (isConfirmingDeletion = false)}>
			<form
				use:enhance={() => {
					isConfirmingDeletion = false;
				}}
				method="post"
				action="{base}/conversations?/delete"
				class="flex w-full flex-col gap-5 p-6"
			>
				<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
					<h2>Are you sure?</h2>
					<button
						type="button"
						class="group"
						on:click|stopPropagation={() => (isConfirmingDeletion = false)}
					>
						<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
					</button>
				</div>
				<p class="text-gray-800">
					This action will delete all your conversations. This cannot be undone.
				</p>
				<button
					type="submit"
					class="mt-2 rounded-full bg-red-700 px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-all hover:ring focus-visible:outline-none focus-visible:ring"
				>
					Confirm deletion
				</button>
			</form>
		</Modal>
	{/if}
</div>