Interface.svelte 11.6 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
	import { config, models, settings, user } from '$lib/stores';
5
	import { createEventDispatcher, onMount, getContext } 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();

9
10
	const i18n = getContext('i18n');

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

	// Addons
	let titleAutoGenerate = true;
	let responseAutoCopy = false;
	let titleAutoGenerateModel = '';
17
	let titleAutoGenerateModelExternal = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
18
	let fullScreenMode = false;
19
	let titleGenerationPrompt = '';
20
	let splitLargeChunks = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
21

Timothy J. Baek's avatar
Timothy J. Baek committed
22
23
	// Interface
	let promptSuggestions = [];
24
	let showUsername = false;
25
	let chatDirection: 'LTR' | 'RTL' = 'LTR';
26

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

Timothy J. Baek's avatar
Timothy J. Baek committed
32
33
34
35
36
	const toggleFullScreenMode = async () => {
		fullScreenMode = !fullScreenMode;
		saveSettings({ fullScreenMode: fullScreenMode });
	};

37
38
39
40
41
	const toggleShowUsername = async () => {
		showUsername = !showUsername;
		saveSettings({ showUsername: showUsername });
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
42
43
	const toggleTitleAutoGenerate = async () => {
		titleAutoGenerate = !titleAutoGenerate;
44
45
46
47
48
49
		saveSettings({
			title: {
				...$settings.title,
				auto: titleAutoGenerate
			}
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
	};

	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.'
			);
		}
	};

74
75
76
77
78
	const toggleChangeChatDirection = async () => {
		chatDirection = chatDirection === 'LTR' ? 'RTL' : 'LTR';
		saveSettings({chatDirection});
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
79
	const updateInterfaceHandler = async () => {
80
81
82
83
84
85
		if ($user.role === 'admin') {
			promptSuggestions = await setDefaultPromptSuggestions(localStorage.token, promptSuggestions);
			await config.set(await getBackendConfig());
		}

		saveSettings({
86
87
88
89
90
91
92
			title: {
				...$settings.title,
				model: titleAutoGenerateModel !== '' ? titleAutoGenerateModel : undefined,
				modelExternal:
					titleAutoGenerateModelExternal !== '' ? titleAutoGenerateModelExternal : undefined,
				prompt: titleGenerationPrompt ? titleGenerationPrompt : undefined
			}
93
		});
Timothy J. Baek's avatar
Timothy J. Baek committed
94
95
96
97
98
99
	};

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

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

103
104
105
		titleAutoGenerate = settings?.title?.auto ?? true;
		titleAutoGenerateModel = settings?.title?.model ?? '';
		titleAutoGenerateModelExternal = settings?.title?.modelExternal ?? '';
106
		titleGenerationPrompt =
107
			settings?.title?.prompt ??
Ased Mammad's avatar
Ased Mammad committed
108
109
110
			$i18n.t(
				"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}}';
111
112
113
114

		responseAutoCopy = settings.responseAutoCopy ?? false;
		showUsername = settings.showUsername ?? false;
		fullScreenMode = settings.fullScreenMode ?? false;
115
		splitLargeChunks = settings.splitLargeChunks ?? false;
116
		chatDirection = settings.chatDirection ?? 'LTR';
Timothy J. Baek's avatar
Timothy J. Baek committed
117
118
119
120
121
122
123
124
125
126
	});
</script>

<form
	class="flex flex-col h-full justify-between space-y-3 text-sm"
	on:submit|preventDefault={() => {
		updateInterfaceHandler();
		dispatch('save');
	}}
>
Timothy J. Baek's avatar
Timothy J. Baek committed
127
	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]">
Timothy J. Baek's avatar
Timothy J. Baek committed
128
		<div>
129
			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Add-ons')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
130
131
132

			<div>
				<div class=" py-0.5 flex w-full justify-between">
133
					<div class=" self-center text-xs font-medium">{$i18n.t('Title Auto-Generation')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
134
135
136
137
138
139
140
141
142

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleTitleAutoGenerate();
						}}
						type="button"
					>
						{#if titleAutoGenerate === true}
143
							<span class="ml-2 self-center">{$i18n.t('On')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
144
						{:else}
145
							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
146
147
148
149
150
151
152
						{/if}
					</button>
				</div>
			</div>

			<div>
				<div class=" py-0.5 flex w-full justify-between">
153
154
155
					<div class=" self-center text-xs font-medium">
						{$i18n.t('Response AutoCopy to Clipboard')}
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
156
157
158
159
160
161
162
163
164

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleResponseAutoCopy();
						}}
						type="button"
					>
						{#if responseAutoCopy === true}
165
							<span class="ml-2 self-center">{$i18n.t('On')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
166
						{:else}
167
							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
168
169
170
171
						{/if}
					</button>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
172

Timothy J. Baek's avatar
Timothy J. Baek committed
173
174
			<div>
				<div class=" py-0.5 flex w-full justify-between">
175
					<div class=" self-center text-xs font-medium">{$i18n.t('Full Screen Mode')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
176
177
178
179
180
181
182
183
184

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleFullScreenMode();
						}}
						type="button"
					>
						{#if fullScreenMode === true}
185
							<span class="ml-2 self-center">{$i18n.t('On')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
186
						{:else}
187
							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
Timothy J. Baek's avatar
Timothy J. Baek committed
188
189
190
191
192
						{/if}
					</button>
				</div>
			</div>

193
194
			<div>
				<div class=" py-0.5 flex w-full justify-between">
Timothy J. Baek's avatar
Timothy J. Baek committed
195
					<div class=" self-center text-xs font-medium">
196
						{$i18n.t('Display the username instead of You in the Chat')}
Timothy J. Baek's avatar
Timothy J. Baek committed
197
					</div>
198
199
200
201
202
203
204
205
206

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleShowUsername();
						}}
						type="button"
					>
						{#if showUsername === true}
207
							<span class="ml-2 self-center">{$i18n.t('On')}</span>
208
						{:else}
209
							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
210
211
212
213
						{/if}
					</button>
				</div>
			</div>
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235

			<div>
				<div class=" py-0.5 flex w-full justify-between">
					<div class=" self-center text-xs font-medium">
						{$i18n.t('Fluidly stream large external response chunks')}
					</div>

					<button
						class="p-1 px-3 text-xs flex rounded transition"
						on:click={() => {
							toggleSplitLargeChunks();
						}}
						type="button"
					>
						{#if splitLargeChunks === true}
							<span class="ml-2 self-center">{$i18n.t('On')}</span>
						{:else}
							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
						{/if}
					</button>
				</div>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
236
237
		</div>

238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
		<div>
			<div class=" py-0.5 flex w-full justify-between">
				<div class=" self-center text-xs font-medium">{$i18n.t('Chat direction')}</div>

				<button
					class="p-1 px-3 text-xs flex rounded transition"
					on:click={toggleChangeChatDirection}
					type="button"
				>
					{#if chatDirection === 'LTR'} 
						<span class="ml-2 self-center">{$i18n.t('LTR')}</span>
					{:else}
						<span class="ml-2 self-center">{$i18n.t('RTL')}</span>
					{/if}
				</button>
			</div>
		</div>

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

Timothy J. Baek's avatar
Timothy J. Baek committed
258
		<div>
259
			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Title Auto-Generation Model')}</div>
260
261
262
			<div class="flex w-full gap-2 pr-2">
				<div class="flex-1">
					<div class=" text-xs mb-1">Local Models</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
263
					<select
Timothy J. Baek's avatar
Timothy J. Baek committed
264
						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
265
						bind:value={titleAutoGenerateModel}
266
						placeholder={$i18n.t('Select a model')}
Timothy J. Baek's avatar
Timothy J. Baek committed
267
					>
268
						<option value="" selected>{$i18n.t('Current Model')}</option>
269
270
271
272
273
274
						{#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
275
276
277
						{/each}
					</select>
				</div>
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295

				<div class="flex-1">
					<div class=" text-xs mb-1">External Models</div>
					<select
						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
						bind:value={titleAutoGenerateModelExternal}
						placeholder={$i18n.t('Select a model')}
					>
						<option value="" selected>{$i18n.t('Current Model')}</option>
						{#each $models as model}
							{#if model.name !== 'hr'}
								<option value={model.name} class="bg-gray-100 dark:bg-gray-700">
									{model.name}
								</option>
							{/if}
						{/each}
					</select>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
296
			</div>
297

Timothy J. Baek's avatar
Timothy J. Baek committed
298
			<div class="mt-3 mr-2">
299
				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Title Generation Prompt')}</div>
300
301
				<textarea
					bind:value={titleGenerationPrompt}
Timothy J. Baek's avatar
Timothy J. Baek committed
302
					class="w-full rounded-lg p-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
303
304
305
					rows="3"
				/>
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
306
307
308
309
310
311
312
		</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">
313
314
315
					<div class=" self-center text-sm font-semibold">
						{$i18n.t('Default Prompt Suggestions')}
					</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
316
317

					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
318
						class="p-1 px-3 text-xs flex rounded transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
319
320
						type="button"
						on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
321
322
323
							if (promptSuggestions.length === 0 || promptSuggestions.at(-1).content !== '') {
								promptSuggestions = [...promptSuggestions, { content: '', title: ['', ''] }];
							}
Timothy J. Baek's avatar
Timothy J. Baek committed
324
325
326
327
328
329
330
331
332
						}}
					>
						<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
333
								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
334
335
336
337
							/>
						</svg>
					</button>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
338
339
340
341
342
343
344
				<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"
345
										placeholder={$i18n.t('Title (e.g. Tell me a fun fact)')}
Timothy J. Baek's avatar
Timothy J. Baek committed
346
347
348
349
350
										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"
351
										placeholder={$i18n.t('Subtitle (e.g. about the Roman Empire)')}
Timothy J. Baek's avatar
Timothy J. Baek committed
352
353
354
355
356
357
										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"
358
									placeholder={$i18n.t('Prompt (e.g. Tell me a fun fact about the Roman Empire)')}
Timothy J. Baek's avatar
Timothy J. Baek committed
359
360
361
									bind:value={prompt.content}
								/>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
362

Timothy J. Baek's avatar
Timothy J. Baek committed
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
							<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">
Jannik Streidl's avatar
Jannik Streidl committed
388
						{$i18n.t('Adjusting these settings will apply changes universally to all users.')}
Timothy J. Baek's avatar
Timothy J. Baek committed
389
390
					</div>
				{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
391
392
393
394
			</div>
		{/if}
	</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
395
	<div class="flex justify-end text-sm font-medium">
Timothy J. Baek's avatar
Timothy J. Baek committed
396
		<button
Timothy J. Baek's avatar
Timothy J. Baek committed
397
			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
398
399
			type="submit"
		>
Jannik Streidl's avatar
Jannik Streidl committed
400
			{$i18n.t('Save')}
Timothy J. Baek's avatar
Timothy J. Baek committed
401
402
403
		</button>
	</div>
</form>