+layout.svelte 10.1 KB
Newer Older
1
<script lang="ts">
Jannik Streidl's avatar
Jannik Streidl committed
2
	import { toast } from 'svelte-sonner';
3
	import { onMount, tick, getContext } from 'svelte';
4
	import { openDB, deleteDB } from 'idb';
5
6
7
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

8
9
	import { goto } from '$app/navigation';

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
10
11
	import { getModels as _getModels } from '$lib/utils';
	import { getOllamaVersion } from '$lib/apis/ollama';
12
	import { getModelfiles } from '$lib/apis/modelfiles';
13
	import { getPrompts } from '$lib/apis/prompts';
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
14

15
16
	import { getDocs } from '$lib/apis/documents';
	import { getAllChatTags } from '$lib/apis/chats';
Timothy J. Baek's avatar
Timothy J. Baek committed
17

Timothy J. Baek's avatar
Timothy J. Baek committed
18
19
20
21
22
23
24
	import {
		user,
		showSettings,
		settings,
		models,
		modelfiles,
		prompts,
Timothy J. Baek's avatar
Timothy J. Baek committed
25
		documents,
26
27
28
		tags,
		showChangelog,
		config
Timothy J. Baek's avatar
Timothy J. Baek committed
29
	} from '$lib/stores';
30
	import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
Timothy J. Baek's avatar
Timothy J. Baek committed
31
	import { compareVersion } from '$lib/utils';
Timothy J. Baek's avatar
Timothy J. Baek committed
32

Timothy J. Baek's avatar
Timothy J. Baek committed
33
34
	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
	import Sidebar from '$lib/components/layout/Sidebar.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
35
	import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
36
	import ChangelogModal from '$lib/components/ChangelogModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
37
	import Tooltip from '$lib/components/common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
38

39
40
	const i18n = getContext('i18n');

Timothy J. Baek's avatar
Timothy J. Baek committed
41
	let ollamaVersion = '';
Timothy J. Baek's avatar
Timothy J. Baek committed
42
	let loaded = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
43
	let showShortcutsButtonElement: HTMLButtonElement;
44
45
46
	let DB = null;
	let localDBChats = [];

Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
	let showShortcuts = false;

49
	const getModels = async () => {
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
50
		return _getModels(localStorage.token);
51
52
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
53
54
	const setOllamaVersion = async (version: string = '') => {
		if (version === '') {
55
			version = await getOllamaVersion(localStorage.token).catch((error) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
56
				return '';
Timothy J. Baek's avatar
Timothy J. Baek committed
57
58
			});
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
59
60
61
62

		ollamaVersion = version;

		console.log(ollamaVersion);
Timothy J. Baek's avatar
Timothy J. Baek committed
63
		if (compareVersion(REQUIRED_OLLAMA_VERSION, ollamaVersion)) {
Timothy J. Baek's avatar
Timothy J. Baek committed
64
			toast.error(`Ollama Version: ${ollamaVersion !== '' ? ollamaVersion : 'Not Detected'}`);
Timothy J. Baek's avatar
Timothy J. Baek committed
65
66
67
		}
	};

Timothy J. Baek's avatar
Timothy J. Baek committed
68
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
69
		if ($user === undefined) {
Timothy J. Baek's avatar
Timothy J. Baek committed
70
			await goto('/auth');
Timothy J. Baek's avatar
Timothy J. Baek committed
71
		} else if (['user', 'admin'].includes($user.role)) {
72
73
74
			try {
				// Check if IndexedDB exists
				DB = await openDB('Chats', 1);
75

76
77
78
				if (DB) {
					const chats = await DB.getAllFromIndex('chats', 'timestamp');
					localDBChats = chats.map((item, idx) => chats[chats.length - 1 - idx]);
79

80
81
82
83
					if (localDBChats.length === 0) {
						await deleteDB('Chats');
					}
				}
84

85
86
87
88
				console.log(DB);
			} catch (error) {
				// IndexedDB Not Found
			}
89

Timothy J. Baek's avatar
fix  
Timothy J. Baek committed
90
			await models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
91
			await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
92

Timothy J. Baek's avatar
Timothy J. Baek committed
93
			await modelfiles.set(await getModelfiles(localStorage.token));
94
			await prompts.set(await getPrompts(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
95
			await documents.set(await getDocs(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
96
			await tags.set(await getAllChatTags(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
97

Timothy J. Baek's avatar
Timothy J. Baek committed
98
99
			modelfiles.subscribe(async () => {
				// should fetch models
100
				await models.set(await getModels());
Timothy J. Baek's avatar
Timothy J. Baek committed
101
			});
102

Timothy J. Baek's avatar
Timothy J. Baek committed
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
			document.addEventListener('keydown', function (event) {
				const isCtrlPressed = event.ctrlKey || event.metaKey; // metaKey is for Cmd key on Mac
				// Check if the Shift key is pressed
				const isShiftPressed = event.shiftKey;

				// Check if Ctrl + Shift + O is pressed
				if (isCtrlPressed && isShiftPressed && event.key.toLowerCase() === 'o') {
					event.preventDefault();
					console.log('newChat');
					document.getElementById('sidebar-new-chat-button')?.click();
				}

				// Check if Shift + Esc is pressed
				if (isShiftPressed && event.key === 'Escape') {
					event.preventDefault();
					console.log('focusInput');
					document.getElementById('chat-textarea')?.focus();
				}

				// Check if Ctrl + Shift + ; is pressed
				if (isCtrlPressed && isShiftPressed && event.key === ';') {
					event.preventDefault();
					console.log('copyLastCodeBlock');
					const button = [...document.getElementsByClassName('copy-code-button')]?.at(-1);
					button?.click();
				}

				// Check if Ctrl + Shift + C is pressed
				if (isCtrlPressed && isShiftPressed && event.key.toLowerCase() === 'c') {
					event.preventDefault();
					console.log('copyLastResponse');
					const button = [...document.getElementsByClassName('copy-response-button')]?.at(-1);
					console.log(button);
					button?.click();
				}

				// Check if Ctrl + Shift + S is pressed
				if (isCtrlPressed && isShiftPressed && event.key.toLowerCase() === 's') {
					event.preventDefault();
					console.log('toggleSidebar');
					document.getElementById('sidebar-toggle-button')?.click();
				}

				// Check if Ctrl + Shift + Backspace is pressed
				if (isCtrlPressed && isShiftPressed && event.key === 'Backspace') {
					event.preventDefault();
					console.log('deleteChat');
					document.getElementById('delete-chat-button')?.click();
				}

153
154
				// Check if Ctrl + . is pressed
				if (isCtrlPressed && event.key === '.') {
155
156
157
158
159
					event.preventDefault();
					console.log('openSettings');
					document.getElementById('open-settings-button')?.click();
				}

Timothy J. Baek's avatar
Timothy J. Baek committed
160
161
162
163
				// Check if Ctrl + / is pressed
				if (isCtrlPressed && event.key === '/') {
					event.preventDefault();
					console.log('showShortcuts');
164
					showShortcutsButtonElement.click();
Timothy J. Baek's avatar
Timothy J. Baek committed
165
166
167
				}
			});

168
169
170
			if ($user.role === 'admin') {
				showChangelog.set(localStorage.version !== $config.version);
			}
171

Timothy J. Baek's avatar
Timothy J. Baek committed
172
173
			await tick();
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
174

Timothy J. Baek's avatar
Timothy J. Baek committed
175
176
		loaded = true;
	});
177
178
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
179
{#if loaded}
Timothy J. Baek's avatar
Timothy J. Baek committed
180
	<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
Timothy J. Baek's avatar
Timothy J. Baek committed
181
		<Tooltip content="Help" placement="left">
Timothy J. Baek's avatar
Timothy J. Baek committed
182
183
184
185
186
187
188
189
190
191
192
			<button
				id="show-shortcuts-button"
				bind:this={showShortcutsButtonElement}
				class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full"
				on:click={() => {
					showShortcuts = !showShortcuts;
				}}
			>
				?
			</button>
		</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
193
194
195
196
	</div>

	<ShortcutsModal bind:show={showShortcuts} />

Timothy J. Baek's avatar
Timothy J. Baek committed
197
	<div class="app relative">
198
		{#if !['user', 'admin'].includes($user.role)}
199
			<div class="fixed w-full h-full flex z-50">
200
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
201
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
				>
					<div class="m-auto pb-44 flex flex-col justify-center">
						<div class="max-w-md">
							<div class="text-center dark:text-white text-2xl font-medium z-50">
								Account Activation Pending<br /> Contact Admin for WebUI Access
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
								Your account status is currently pending activation. To access the WebUI, please
								reach out to the administrator. Admins can manage user statuses from the Admin
								Panel.
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
217
									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
218
219
220
221
									on:click={async () => {
										location.href = '/';
									}}
								>
Ased Mammad's avatar
Ased Mammad committed
222
									{$i18n.t('Check Again')}
223
224
225
226
227
228
229
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localStorage.removeItem('token');
										location.href = '/auth';
Ased Mammad's avatar
Ased Mammad committed
230
									}}>{$i18n.t('Sign Out')}</button
231
232
233
234
235
236
								>
							</div>
						</div>
					</div>
				</div>
			</div>
237
238
239
		{:else if localDBChats.length > 0}
			<div class="fixed w-full h-full flex z-50">
				<div
Timothy J. Baek's avatar
Timothy J. Baek committed
240
					class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center"
241
242
243
244
245
246
247
248
				>
					<div class="m-auto pb-44 flex flex-col justify-center">
						<div class="max-w-md">
							<div class="text-center dark:text-white text-2xl font-medium z-50">
								Important Update<br /> Action Required for Chat Log Storage
							</div>

							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
249
250
251
252
253
254
255
256
								{$i18n.t(
									"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through"
								)}
								<span class="font-semibold dark:text-white"
									>{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
								>. {$i18n.t(
									'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
								)}
257
258
259
260
							</div>

							<div class=" mt-6 mx-auto relative group w-fit">
								<button
Timothy J. Baek's avatar
Timothy J. Baek committed
261
									class="relative z-20 flex px-5 py-2 rounded-full bg-white border border-gray-100 dark:border-none hover:bg-gray-100 transition font-medium text-sm"
262
263
264
265
266
267
268
269
									on:click={async () => {
										let blob = new Blob([JSON.stringify(localDBChats)], {
											type: 'application/json'
										});
										saveAs(blob, `chat-export-${Date.now()}.json`);

										const tx = DB.transaction('chats', 'readwrite');
										await Promise.all([tx.store.clear(), tx.done]);
270
										await deleteDB('Chats');
271
272
273
274
275
276
277
278
279
280
281

										localDBChats = [];
									}}
								>
									Download & Delete
								</button>

								<button
									class="text-xs text-center w-full mt-2 text-gray-400 underline"
									on:click={async () => {
										localDBChats = [];
Ased Mammad's avatar
Ased Mammad committed
282
									}}>{$i18n.t('Close')}</button
283
284
								>
							</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
285
286
287
288
289
290
						</div>
					</div>
				</div>
			</div>
		{/if}

291
		<div
Timothy J. Baek's avatar
Timothy J. Baek committed
292
			class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 min-h-screen overflow-auto flex flex-row"
293
294
295
		>
			<Sidebar />
			<SettingsModal bind:show={$showSettings} />
296
			<ChangelogModal bind:show={$showChangelog} />
297
298
299
			<slot />
		</div>
	</div>
300
{/if}
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344

<style>
	.loading {
		display: inline-block;
		clip-path: inset(0 1ch 0 0);
		animation: l 1s steps(3) infinite;
		letter-spacing: -0.5px;
	}

	@keyframes l {
		to {
			clip-path: inset(0 -1ch 0 0);
		}
	}

	pre[class*='language-'] {
		position: relative;
		overflow: auto;

		/* make space  */
		margin: 5px 0;
		padding: 1.75rem 0 1.75rem 1rem;
		border-radius: 10px;
	}

	pre[class*='language-'] button {
		position: absolute;
		top: 5px;
		right: 5px;

		font-size: 0.9rem;
		padding: 0.15rem;
		background-color: #828282;

		border: ridge 1px #7b7b7c;
		border-radius: 5px;
		text-shadow: #c4c4c4 0 0 2px;
	}

	pre[class*='language-'] button:hover {
		cursor: pointer;
		background-color: #bcbabb;
	}
</style>