Interface.svelte 8.82 KB
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
2
3
<script lang="ts">
	import { getBackendConfig } from '$lib/apis';
	import { setDefaultPromptSuggestions } from '$lib/apis/configs';
4
5
	import { config, models, user } from '$lib/stores';
	import { createEventDispatcher, onMount } from 'svelte';
Jannik Streidl's avatar
Jannik Streidl committed
6
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
7
8
	const dispatch = createEventDispatcher();

Timothy J. Baek's avatar
Timothy J. Baek committed
9
10
11
12
13
14
	export let saveSettings: Function;

	// Addons
	let titleAutoGenerate = true;
	let responseAutoCopy = false;
	let titleAutoGenerateModel = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
15
	let fullScreenMode = false;
16
	let titleGenerationPrompt = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
17

Timothy J. Baek's avatar
Timothy J. Baek committed
18
19
	// Interface
	let promptSuggestions = [];
20
21
	let showUsername = false;

Timothy J. Baek's avatar
Timothy J. Baek committed
22
23
24
25
26
	const toggleFullScreenMode = async () => {
		fullScreenMode = !fullScreenMode;
		saveSettings({ fullScreenMode: fullScreenMode });
	};

27
28
29
30
31
	const toggleShowUsername = async () => {
		showUsername = !showUsername;
		saveSettings({ showUsername: showUsername });
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
32
33
	const toggleTitleAutoGenerate = async () => {
		titleAutoGenerate = !titleAutoGenerate;
34
		saveSettings({ titleAutoGenerate: titleAutoGenerate });
Timothy J. Baek's avatar
Timothy J. Baek committed
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
	};

	const toggleResponseAutoCopy = async () => {
		const permission = await navigator.clipboard
			.readText()
			.then(() => {
				return 'granted';
			})
			.catch(() => {
				return '';
			});

		console.log(permission);

		if (permission === 'granted') {
			responseAutoCopy = !responseAutoCopy;
			saveSettings({ responseAutoCopy: responseAutoCopy });
		} else {
			toast.error(
				'Clipboard write permission denied. Please check your browser settings to grant the necessary access.'
			);
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
59
	const updateInterfaceHandler = async () => {
60
61
62
63
64
65
		if ($user.role === 'admin') {
			promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
			await config.set(await getBackendConfig());
		}

		saveSettings({
66
67
			titleAutoGenerateModel: titleAutoGenerateModel !== '' ? titleAutoGenerateModel : undefined,
			titleGenerationPrompt: titleGenerationPrompt ? titleGenerationPrompt : undefined
68
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
69
70
71
72
73
74
	};

	onMount(async () => {
		if ($user.role === 'admin') {
			promptSuggestions = $config?.default_prompt_suggestions;
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
75
76
77

		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');

78
		titleAutoGenerate = settings.titleAutoGenerate ?? true;
Timothy J. Baek's avatar
Timothy J. Baek committed
79
		responseAutoCopy = settings.responseAutoCopy ?? false;
80
		showUsername = settings.showUsername ?? false;
Timothy J. Baek's avatar
Timothy J. Baek committed
81
		fullScreenMode = settings.fullScreenMode ?? false;
82
83
84
85
		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
		titleGenerationPrompt =
			settings.titleGenerationPrompt ??
			`Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}`;
Timothy J. Baek's avatar
Timothy J. Baek committed
86
87
88
89
90
91
92
93
94
95
	});
</script>

<form
	class="flex flex-col h-full justify-between space-y-3 text-sm"
	on:submit|preventDefault={() => {
		updateInterfaceHandler();
		dispatch('save');
	}}
>
96
	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-80">
Timothy J. Baek's avatar
Timothy J. Baek committed
97
		<div>
98
			<div class=" mb-1 text-sm font-medium">WebUI Add-ons</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
99
100
101

			<div>
				<div class=" py-0.5 flex w-full justify-between">
102
					<div class=" self-center text-xs font-medium">Title Auto-Generation</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
103
104
105
106
107
108
109
110
111

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleTitleAutoGenerate();
						}}
						type="button"
					>
						{#if titleAutoGenerate === true}
112
							<span class="ml-2 self-center">On</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
113
						{:else}
114
							<span class="ml-2 self-center">Off</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
115
116
117
118
119
120
121
						{/if}
					</button>
				</div>
			</div>

			<div>
				<div class=" py-0.5 flex w-full justify-between">
122
					<div class=" self-center text-xs font-medium">Response AutoCopy to Clipboard</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
123
124
125
126
127
128
129
130
131

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleResponseAutoCopy();
						}}
						type="button"
					>
						{#if responseAutoCopy === true}
132
							<span class="ml-2 self-center">On</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
133
						{:else}
134
							<span class="ml-2 self-center">Off</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
135
136
137
138
						{/if}
					</button>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
139

Timothy J. Baek's avatar
Timothy J. Baek committed
140
141
			<div>
				<div class=" py-0.5 flex w-full justify-between">
142
					<div class=" self-center text-xs font-medium">Full Screen Mode</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
143
144
145
146
147
148
149
150
151

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleFullScreenMode();
						}}
						type="button"
					>
						{#if fullScreenMode === true}
152
							<span class="ml-2 self-center">On</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
153
						{:else}
154
							<span class="ml-2 self-center">Off</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
155
156
157
158
159
						{/if}
					</button>
				</div>
			</div>

160
161
			<div>
				<div class=" py-0.5 flex w-full justify-between">
Timothy J. Baek's avatar
Timothy J. Baek committed
162
					<div class=" self-center text-xs font-medium">
163
						Display the username instead of "You" in the Chat
Timothy J. Baek's avatar
Timothy J. Baek committed
164
					</div>
165
166
167
168
169
170
171
172
173

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleShowUsername();
						}}
						type="button"
					>
						{#if showUsername === true}
174
							<span class="ml-2 self-center">On</span>
175
						{:else}
176
							<span class="ml-2 self-center">Off</span>
177
178
179
180
						{/if}
					</button>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
181
182
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
183
		<hr class=" dark:border-gray-700" />
Timothy J. Baek's avatar
Timothy J. Baek committed
184

Timothy J. Baek's avatar
Timothy J. Baek committed
185
		<div>
186
187
188
			<div class=" mb-2.5 text-sm font-medium">Set Title Auto-Generation Model</div>
			<div class="flex w-full">
				<div class="flex-1 mr-2">
Timothy J. Baek's avatar
Timothy J. Baek committed
189
					<select
Timothy J. Baek's avatar
Timothy J. Baek committed
190
						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
Timothy J. Baek's avatar
Timothy J. Baek committed
191
						bind:value={titleAutoGenerateModel}
192
						placeholder="Select a model"
Timothy J. Baek's avatar
Timothy J. Baek committed
193
					>
194
						<option value="" selected>Current Model</option>
195
196
197
198
199
200
						{#each $models as model}
							{#if model.size != null}
								<option value={model.name} class="bg-gray-100 dark:bg-gray-700">
									{model.name + ' (' + (model.size / 1024 ** 3).toFixed(1) + ' GB)'}
								</option>
							{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
201
202
203
204
						{/each}
					</select>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
205
			<div class="mt-3 mr-2">
206
				<div class=" mb-2.5 text-sm font-medium">Title Generation Prompt</div>
207
208
				<textarea
					bind:value={titleGenerationPrompt}
Timothy J. Baek's avatar
Timothy J. Baek committed
209
					class="w-full rounded-lg p-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
210
211
212
					rows="3"
				/>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
213
214
215
216
217
218
219
		</div>

		{#if $user.role === 'admin'}
			<hr class=" dark:border-gray-700" />

			<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
				<div class="flex w-full justify-between mb-2">
220
					<div class=" self-center text-sm font-semibold">Default Prompt Suggestions</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
221
222

					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
223
						class="p-1 px-3 text-xs flex rounded transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
224
225
						type="button"
						on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
226
227
228
							if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
								promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
229
230
231
232
233
234
235
236
237
						}}
					>
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
Timothy J. Baek's avatar
Timothy J. Baek committed
238
								d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
Timothy J. Baek's avatar
Timothy J. Baek committed
239
240
241
242
							/>
						</svg>
					</button>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
				<div class="flex flex-col space-y-1">
					{#each promptSuggestions as prompt, promptIdx}
						<div class=" flex border dark:border-gray-600 rounded-lg">
							<div class="flex flex-col flex-1">
								<div class="flex border-b dark:border-gray-600 w-full">
									<input
										class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
										placeholder="Title (e.g. Tell me a fun fact)"
										bind:value={prompt.title[0]}
									/>

									<input
										class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
										placeholder="Subtitle (e.g. about the Roman Empire)"
										bind:value={prompt.title[1]}
									/>
								</div>

								<input
									class="px-3 py-1.5 text-xs w-full bg-transparent outline-none border-r dark:border-gray-600"
									placeholder="Prompt (e.g. Tell me a fun fact about the Roman Empire)"
									bind:value={prompt.content}
								/>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
267

Timothy J. Baek's avatar
Timothy J. Baek committed
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
							<button
								class="px-2"
								type="button"
								on:click={() => {
									promptSuggestions.splice(promptIdx, 1);
									promptSuggestions = promptSuggestions;
								}}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 20 20"
									fill="currentColor"
									class="w-4 h-4"
								>
									<path
										d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
									/>
								</svg>
							</button>
						</div>
					{/each}
				</div>

				{#if promptSuggestions.length > 0}
					<div class="text-xs text-left w-full mt-2">
293
						Adjusting these settings will apply changes universally to all users.
Timothy J. Baek's avatar
Timothy J. Baek committed
294
295
					</div>
				{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
296
297
298
299
			</div>
		{/if}
	</div>

300
	<div class="flex justify-end pt-3 text-sm font-medium">
Timothy J. Baek's avatar
Timothy J. Baek committed
301
		<button
Timothy J. Baek's avatar
Timothy J. Baek committed
302
			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
Timothy J. Baek's avatar
Timothy J. Baek committed
303
304
			type="submit"
		>
305
			Save
Timothy J. Baek's avatar
Timothy J. Baek committed
306
307
308
		</button>
	</div>
</form>