"example/02_gemm_bilinear/README.md" did not exist on "cd167e492a8f85ec6f5965e50667e8a58d3aa3a1"
Sidebar.svelte 26.5 KB
Newer Older
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
3
	import { v4 as uuidv4 } from 'uuid';

Timothy J. Baek's avatar
Timothy J. Baek committed
4
5
6
	import fileSaver from 'file-saver';
	const { saveAs } = fileSaver;

7
8
	import { goto, invalidateAll } from '$app/navigation';
	import { page } from '$app/stores';
Timothy J. Baek's avatar
Timothy J. Baek committed
9
	import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores';
10
	import { onMount, getContext } from 'svelte';
11
12
13

	const i18n = getContext('i18n');

Timothy J. Baek's avatar
Timothy J. Baek committed
14
15
16
	import {
		deleteChatById,
		getChatList,
Henry Holloway's avatar
Henry Holloway committed
17
		getChatById,
Timothy J. Baek's avatar
Timothy J. Baek committed
18
		getChatListByTagName,
Timothy J. Baek's avatar
Timothy J. Baek committed
19
		updateChatById,
Timothy J. Baek's avatar
Timothy J. Baek committed
20
21
		getAllChatTags,
		archiveChatById
Timothy J. Baek's avatar
Timothy J. Baek committed
22
	} from '$lib/apis/chats';
Jannik Streidl's avatar
Jannik Streidl committed
23
	import { toast } from 'svelte-sonner';
Timothy J. Baek's avatar
Timothy J. Baek committed
24
	import { fade, slide } from 'svelte/transition';
25
	import { WEBUI_BASE_URL } from '$lib/constants';
26
	import Tooltip from '../common/Tooltip.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
27
	import ChatMenu from './Sidebar/ChatMenu.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
28
	import ShareChatModal from '../chat/ShareChatModal.svelte';
Timothy J. Baek's avatar
Timothy J. Baek committed
29
	import ArchiveBox from '../icons/ArchiveBox.svelte';
30
	import ArchivedChatsModal from './Sidebar/ArchivedChatsModal.svelte';
31
32
33
34

	let show = false;
	let navElement;

Timothy J. Baek's avatar
Timothy J. Baek committed
35
	let title: string = 'UI';
36
	let search = '';
37

Timothy J. Baek's avatar
Timothy J. Baek committed
38
39
	let shareChatId = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
40
41
	let selectedChatId = null;

42
43
	let chatDeleteId = null;
	let chatTitleEditId = null;
44
45
	let chatTitle = '';

46
	let showArchivedChatsModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
47
	let showShareChatModal = false;
48
	let showDropdown = false;
49
	let isEditing = false;
50
51

	onMount(async () => {
52
		if (window.innerWidth > 1024) {
Timothy J. Baek's avatar
Timothy J. Baek committed
53
54
55
			show = true;
		}
		await chats.set(await getChatList(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

		let touchstartX = 0;
		let touchendX = 0;

		function checkDirection() {
			const screenWidth = window.innerWidth;
			const swipeDistance = Math.abs(touchendX - touchstartX);
			if (swipeDistance >= screenWidth / 4) {
				if (touchendX < touchstartX) {
					show = false;
				}
				if (touchendX > touchstartX) {
					show = true;
				}
			}
		}

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
73
		const onTouchStart = (e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
74
			touchstartX = e.changedTouches[0].screenX;
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
75
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
76

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
77
		const onTouchEnd = (e) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
78
79
			touchendX = e.changedTouches[0].screenX;
			checkDirection();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
80
81
82
83
84
85
86
87
88
		};

		document.addEventListener('touchstart', onTouchStart);
		document.addEventListener('touchend', onTouchEnd);

		return () => {
			document.removeEventListener('touchstart', onTouchStart);
			document.removeEventListener('touchend', onTouchEnd);
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
	});

	// Helper function to fetch and add chat content to each chat
	const enrichChatsWithContent = async (chatList) => {
		const enrichedChats = await Promise.all(
			chatList.map(async (chat) => {
				const chatDetails = await getChatById(localStorage.token, chat.id).catch((error) => null); // Handle error or non-existent chat gracefully
				if (chatDetails) {
					chat.chat = chatDetails.chat; // Assuming chatDetails.chat contains the chat content
				}
				return chat;
			})
		);

		await chats.set(enrichedChats);
	};
105
106
107
108
109
110

	const loadChat = async (id) => {
		goto(`/c/${id}`);
	};

	const editChatTitle = async (id, _title) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
111
112
113
114
115
116
117
118
119
120
		if (_title === '') {
			toast.error('Title cannot be an empty string.');
		} else {
			title = _title;

			await updateChatById(localStorage.token, id, {
				title: _title
			});
			await chats.set(await getChatList(localStorage.token));
		}
121
122
123
	};

	const deleteChat = async (id) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
124
125
126
		const res = await deleteChatById(localStorage.token, id).catch((error) => {
			toast.error(error);
			chatDeleteId = null;
127

Timothy J. Baek's avatar
Timothy J. Baek committed
128
129
130
131
			return null;
		});

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
132
133
134
135
			if ($chatId === id) {
				goto('/');
			}

Timothy J. Baek's avatar
Timothy J. Baek committed
136
137
			await chats.set(await getChatList(localStorage.token));
		}
138
	};
139
140
141
142
143
144

	const saveSettings = async (updated) => {
		await settings.set({ ...$settings, ...updated });
		localStorage.setItem('settings', JSON.stringify($settings));
		location.href = '/';
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
145
146
147
148
149

	const archiveChatHandler = async (id) => {
		await archiveChatById(localStorage.token, id);
		await chats.set(await getChatList(localStorage.token));
	};
150
151
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
152
<ShareChatModal bind:show={showShareChatModal} chatId={shareChatId} />
Timothy J. Baek's avatar
Timothy J. Baek committed
153
154
155
156
157
158
<ArchivedChatsModal
	bind:show={showArchivedChatsModal}
	on:change={async () => {
		await chats.set(await getChatList(localStorage.token));
	}}
/>
Timothy J. Baek's avatar
Timothy J. Baek committed
159

160
161
<div
	bind:this={navElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
162
	class="h-screen max-h-[100dvh] min-h-screen {show
Timothy J. Baek's avatar
Timothy J. Baek committed
163
		? 'lg:relative w-[260px]'
Timothy J. Baek's avatar
Timothy J. Baek committed
164
		: '-translate-x-[260px] w-[0px]'} bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-200 text-sm transition fixed z-50 top-0 left-0
165
166
        "
>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
167
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
168
		class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] {show
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
169
170
171
			? ''
			: 'invisible'}"
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
172
		<div class="px-2 flex justify-center space-x-2">
173
			<a
Timothy J. Baek's avatar
Timothy J. Baek committed
174
				id="sidebar-new-chat-button"
175
				class="flex-grow flex justify-between rounded-xl px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
176
				href="/"
Timothy J. Baek's avatar
Timothy J. Baek committed
177
				on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
178
179
					selectedChatId = null;

180
					await goto('/');
181
					const newChatButton = document.getElementById('new-chat-button');
182
183
184
					setTimeout(() => {
						newChatButton?.click();
					}, 0);
185
186
187
				}}
			>
				<div class="flex self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
188
					<div class="self-center mr-1.5">
189
190
						<img
							src="{WEBUI_BASE_URL}/static/favicon.png"
191
							class=" size-6 -translate-x-1.5 rounded-full"
192
193
							alt="logo"
						/>
194
195
					</div>

196
					<div class=" self-center font-medium text-sm">{$i18n.t('New Chat')}</div>
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
				</div>

				<div class="self-center">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
						class="w-4 h-4"
					>
						<path
							d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z"
						/>
						<path
							d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z"
						/>
					</svg>
				</div>
214
			</a>
215
216
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
217
		{#if $user?.role === 'admin'}
Timothy J. Baek's avatar
Timothy J. Baek committed
218
			<div class="px-2 flex justify-center mt-0.5">
219
				<a
220
					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
221
					href="/modelfiles"
Timothy J. Baek's avatar
Timothy J. Baek committed
222
223
224
225
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
226
227
228
229
230
231
				>
					<div class="self-center">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
232
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
233
234
235
236
237
238
							stroke="currentColor"
							class="w-4 h-4"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
239
								d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 0 0 2.25-2.25V6a2.25 2.25 0 0 0-2.25-2.25H6A2.25 2.25 0 0 0 3.75 6v2.25A2.25 2.25 0 0 0 6 10.5Zm0 9.75h2.25A2.25 2.25 0 0 0 10.5 18v-2.25a2.25 2.25 0 0 0-2.25-2.25H6a2.25 2.25 0 0 0-2.25 2.25V18A2.25 2.25 0 0 0 6 20.25Zm9.75-9.75H18a2.25 2.25 0 0 0 2.25-2.25V6A2.25 2.25 0 0 0 18 3.75h-2.25A2.25 2.25 0 0 0 13.5 6v2.25a2.25 2.25 0 0 0 2.25 2.25Z"
Timothy J. Baek's avatar
Timothy J. Baek committed
240
241
242
							/>
						</svg>
					</div>
243

Timothy J. Baek's avatar
Timothy J. Baek committed
244
					<div class="flex self-center">
245
						<div class=" self-center font-medium text-sm">{$i18n.t('Modelfiles')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
246
					</div>
247
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
248
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
249

Timothy J. Baek's avatar
Timothy J. Baek committed
250
			<div class="px-2 flex justify-center">
251
				<a
252
					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
253
					href="/prompts"
Timothy J. Baek's avatar
Timothy J. Baek committed
254
255
256
257
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
258
259
260
261
				>
					<div class="self-center">
						<svg
							xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
262
263
							fill="none"
							viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
264
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
265
							stroke="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
266
267
268
							class="w-4 h-4"
						>
							<path
Timothy J. Baek's avatar
Timothy J. Baek committed
269
270
271
								stroke-linecap="round"
								stroke-linejoin="round"
								d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
Timothy J. Baek's avatar
Timothy J. Baek committed
272
273
274
275
276
							/>
						</svg>
					</div>

					<div class="flex self-center">
277
						<div class=" self-center font-medium text-sm">{$i18n.t('Prompts')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
278
					</div>
279
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
280
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
281

Timothy J. Baek's avatar
Timothy J. Baek committed
282
			<div class="px-2 flex justify-center mb-1">
283
				<a
284
					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
285
					href="/documents"
Timothy J. Baek's avatar
Timothy J. Baek committed
286
287
288
289
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
290
291
292
293
294
295
				>
					<div class="self-center">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							fill="none"
							viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
296
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
297
298
299
300
301
302
303
304
305
306
307
308
							stroke="currentColor"
							class="w-4 h-4"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
							/>
						</svg>
					</div>

					<div class="flex self-center">
309
						<div class=" self-center font-medium text-sm">{$i18n.t('Documents')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
310
					</div>
311
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
312
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
313
		{/if}
314

315
316
		<div class="relative flex flex-col flex-1 overflow-y-auto">
			{#if !($settings.saveChatHistory ?? true)}
Timothy J. Baek's avatar
Timothy J. Baek committed
317
				<div class="absolute z-40 w-full h-full bg-gray-50/90 dark:bg-black/90 flex justify-center">
318
					<div class=" text-left px-5 py-2">
319
						<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div>
320
						<div class="text-xs mt-2">
Jannik Streidl's avatar
Jannik Streidl committed
321
322
323
324
325
							{$i18n.t(
								"When history is turned off, new chats on this browser won't appear in your history on any of your devices."
							)}
							<span class=" font-semibold"
								>{$i18n.t('This setting does not sync across browsers or devices.')}</span
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
							>
						</div>

						<div class="mt-3">
							<button
								class="flex justify-center items-center space-x-1.5 px-3 py-2.5 rounded-lg text-xs bg-gray-200 hover:bg-gray-300 transition text-gray-800 font-medium w-full"
								type="button"
								on:click={() => {
									saveSettings({
										saveChatHistory: true
									});
								}}
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 16 16"
									fill="currentColor"
									class="w-3 h-3"
								>
									<path
										fill-rule="evenodd"
										d="M8 1a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0v-6.5A.75.75 0 0 1 8 1ZM4.11 3.05a.75.75 0 0 1 0 1.06 5.5 5.5 0 1 0 7.78 0 .75.75 0 0 1 1.06-1.06 7 7 0 1 1-9.9 0 .75.75 0 0 1 1.06 0Z"
										clip-rule="evenodd"
									/>
								</svg>

Jannik Streidl's avatar
Jannik Streidl committed
352
								<div>{$i18n.t('Enable Chat History')}</div>
353
354
355
							</button>
						</div>
					</div>
356
				</div>
357
			{/if}
358

Timothy J. Baek's avatar
Timothy J. Baek committed
359
			<div class="px-2 mt-1 mb-2 flex justify-center space-x-2">
360
				<div class="flex w-full" id="chat-search">
361
					<div class="self-center pl-3 py-2 rounded-l-xl bg-white dark:bg-gray-950">
362
363
364
365
366
367
368
369
370
371
372
373
374
						<svg
							xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 20 20"
							fill="currentColor"
							class="w-4 h-4"
						>
							<path
								fill-rule="evenodd"
								d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
								clip-rule="evenodd"
							/>
						</svg>
					</div>
375

376
					<input
377
						class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm dark:text-gray-300 dark:bg-gray-950 outline-none"
Jannik Streidl's avatar
Jannik Streidl committed
378
						placeholder={$i18n.t('Search')}
379
						bind:value={search}
Timothy J. Baek's avatar
Timothy J. Baek committed
380
381
382
						on:focus={() => {
							enrichChatsWithContent($chats);
						}}
383
384
385
					/>
				</div>
			</div>
386

Timothy J. Baek's avatar
Timothy J. Baek committed
387
388
389
			{#if $tags.length > 0}
				<div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap">
					<button
390
						class="px-2.5 text-xs font-medium bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
Timothy J. Baek's avatar
Timothy J. Baek committed
391
392
393
394
395
396
397
398
						on:click={async () => {
							await chats.set(await getChatList(localStorage.token));
						}}
					>
						all
					</button>
					{#each $tags as tag}
						<button
399
							class="px-2.5 text-xs font-medium bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
Timothy J. Baek's avatar
Timothy J. Baek committed
400
							on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
401
402
403
404
405
406
								let chatIds = await getChatListByTagName(localStorage.token, tag.name);
								if (chatIds.length === 0) {
									await tags.set(await getAllChatTags(localStorage.token));
									chatIds = await getChatList(localStorage.token);
								}
								await chats.set(chatIds);
Timothy J. Baek's avatar
Timothy J. Baek committed
407
408
409
410
411
412
413
414
							}}
						>
							{tag.name}
						</button>
					{/each}
				</div>
			{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
415
			<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto">
416
417
				{#each $chats.filter((chat) => {
					if (search === '') {
418
419
						return true;
					} else {
420
						let title = chat.title.toLowerCase();
Timothy J. Baek's avatar
Timothy J. Baek committed
421
						const query = search.toLowerCase();
422

Henry Holloway's avatar
Henry Holloway committed
423
424
425
						let contentMatches = false;
						// Access the messages within chat.chat.messages
						if (chat.chat && chat.chat.messages && Array.isArray(chat.chat.messages)) {
Timothy J. Baek's avatar
Timothy J. Baek committed
426
							contentMatches = chat.chat.messages.some((message) => {
Henry Holloway's avatar
Henry Holloway committed
427
428
429
								// Check if message.content exists and includes the search query
								return message.content && message.content.toLowerCase().includes(query);
							});
430
						}
Henry Holloway's avatar
Henry Holloway committed
431
432

						return title.includes(query) || contentMatches;
433
					}
434
				}) as chat, i}
Timothy J. Baek's avatar
Timothy J. Baek committed
435
					<div class=" w-full pr-2 relative group">
Timothy J. Baek's avatar
Timothy J. Baek committed
436
437
						{#if chatTitleEditId === chat.id}
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
438
439
440
								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
								chat.id === chatTitleEditId ||
								chat.id === chatDeleteId
441
									? 'bg-gray-300 dark:bg-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
442
									: chat.id === selectedChatId
443
444
									? 'bg-gray-100 dark:bg-gray-950'
									: 'group-hover:bg-gray-100 dark:group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
Timothy J. Baek's avatar
Timothy J. Baek committed
445
446
447
448
449
							>
								<input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" />
							</div>
						{:else}
							<a
Timothy J. Baek's avatar
Timothy J. Baek committed
450
451
452
								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
								chat.id === chatTitleEditId ||
								chat.id === chatDeleteId
453
									? 'bg-gray-300 dark:bg-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
454
									: chat.id === selectedChatId
455
456
									? 'bg-gray-100 dark:bg-gray-950'
									: ' group-hover:bg-gray-100 dark:group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
Timothy J. Baek's avatar
Timothy J. Baek committed
457
								href="/c/{chat.id}"
458
								on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
459
									selectedChatId = chat.id;
460
461
462
463
									if (window.innerWidth < 1024) {
										show = false;
									}
								}}
Timothy J. Baek's avatar
Timothy J. Baek committed
464
								draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
465
466
							>
								<div class=" flex self-center flex-1 w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
467
									<div class=" text-left self-center overflow-hidden w-full h-[20px]">
468
										{chat.title}
Timothy J. Baek's avatar
Timothy J. Baek committed
469
									</div>
470
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
471
472
							</a>
						{/if}
473

Timothy J. Baek's avatar
Timothy J. Baek committed
474
						<div
Timothy J. Baek's avatar
Timothy J. Baek committed
475
476
							class="
							
Timothy J. Baek's avatar
Timothy J. Baek committed
477
							{chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId
478
								? 'from-gray-300 dark:from-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
479
								: chat.id === selectedChatId
480
481
								? 'from-gray-100 dark:from-gray-950'
								: 'invisible group-hover:visible from-gray-100 dark:from-gray-950'}
Timothy J. Baek's avatar
Timothy J. Baek committed
482
483
484
								absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
								
								  to-transparent"
Timothy J. Baek's avatar
Timothy J. Baek committed
485
486
487
488
						>
							{#if chatTitleEditId === chat.id}
								<div class="flex self-center space-x-1.5 z-10">
									<button
489
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
490
491
492
493
494
495
496
497
498
499
500
										on:click={() => {
											editChatTitle(chat.id, chatTitle);
											chatTitleEditId = null;
											chatTitle = '';
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
501
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
502
503
504
505
506
507
508
509
											<path
												fill-rule="evenodd"
												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
												clip-rule="evenodd"
											/>
										</svg>
									</button>
									<button
510
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
511
512
513
514
515
516
517
518
519
520
										on:click={() => {
											chatTitleEditId = null;
											chatTitle = '';
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
521
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
522
523
524
525
526
527
528
529
530
											<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>
							{:else if chatDeleteId === chat.id}
								<div class="flex self-center space-x-1.5 z-10">
									<button
531
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
532
533
534
535
536
537
538
539
540
										on:click={() => {
											deleteChat(chat.id);
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
541
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
542
543
544
545
546
547
548
549
											<path
												fill-rule="evenodd"
												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
												clip-rule="evenodd"
											/>
										</svg>
									</button>
									<button
550
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
551
552
553
554
555
556
557
558
559
										on:click={() => {
											chatDeleteId = null;
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
560
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
561
562
563
564
565
566
567
											<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>
							{:else}
Timothy J. Baek's avatar
Timothy J. Baek committed
568
								<div class="flex self-center space-x-1 z-10">
Timothy J. Baek's avatar
Timothy J. Baek committed
569
									<ChatMenu
Timothy J. Baek's avatar
Timothy J. Baek committed
570
										chatId={chat.id}
Timothy J. Baek's avatar
Timothy J. Baek committed
571
572
573
574
										shareHandler={() => {
											shareChatId = selectedChatId;
											showShareChatModal = true;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
575
										renameHandler={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
576
577
578
											chatTitle = chat.title;
											chatTitleEditId = chat.id;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
579
										deleteHandler={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
580
581
											chatDeleteId = chat.id;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
582
583
584
										onClose={() => {
											selectedChatId = null;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
585
									>
586
										<button
Timothy J. Baek's avatar
Timothy J. Baek committed
587
											aria-label="Chat Menu"
588
											class=" self-center dark:hover:text-white transition"
589
											on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
590
												selectedChatId = chat.id;
591
											}}
592
										>
593
594
											<svg
												xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
595
596
												viewBox="0 0 16 16"
												fill="currentColor"
597
598
599
												class="w-4 h-4"
											>
												<path
Timothy J. Baek's avatar
Timothy J. Baek committed
600
													d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
601
602
603
												/>
											</svg>
										</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
604
									</ChatMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
605
606
607
608
609
610

									<Tooltip content="Archive">
										<button
											aria-label="Archive"
											class=" self-center dark:hover:text-white transition"
											on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
611
												archiveChatHandler(chat.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
612
613
614
615
616
											}}
										>
											<ArchiveBox />
										</button>
									</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
617
618
619
								</div>
							{/if}
						</div>
620
621
622
					</div>
				{/each}
			</div>
623
624
625
		</div>

		<div class="px-2.5">
Timothy J. Baek's avatar
Timothy J. Baek committed
626
			<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->
627
628
629
630

			<div class="flex flex-col">
				{#if $user !== undefined}
					<button
631
						class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-900 transition"
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
						on:click={() => {
							showDropdown = !showDropdown;
						}}
					>
						<div class=" self-center mr-3">
							<img
								src={$user.profile_image_url}
								class=" max-w-[30px] object-cover rounded-full"
								alt="User profile"
							/>
						</div>
						<div class=" self-center font-semibold">{$user.name}</div>
					</button>

					{#if showDropdown}
						<div
							id="dropdownDots"
649
							class="absolute z-40 bottom-[70px] rounded-lg shadow w-[240px] bg-white dark:bg-gray-900"
Timothy J. Baek's avatar
Timothy J. Baek committed
650
							transition:fade|slide={{ duration: 100 }}
651
						>
652
							<div class="p-1 py-2 w-full">
653
654
								{#if $user.role === 'admin'}
									<button
655
										class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
656
657
										on:click={() => {
											goto('/admin');
658
											showDropdown = false;
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
										}}
									>
										<div class=" self-center mr-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												fill="none"
												viewBox="0 0 24 24"
												stroke-width="1.5"
												stroke="currentColor"
												class="w-5 h-5"
											>
												<path
													stroke-linecap="round"
													stroke-linejoin="round"
													d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
												/>
											</svg>
										</div>
677
										<div class=" self-center font-medium">{$i18n.t('Admin Panel')}</div>
678
									</button>
679
680

									<button
681
										class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
										on:click={() => {
											goto('/playground');
											showDropdown = false;
										}}
									>
										<div class=" self-center mr-3">
											<svg
												xmlns="http://www.w3.org/2000/svg"
												fill="none"
												viewBox="0 0 24 24"
												stroke-width="1.5"
												stroke="currentColor"
												class="w-5 h-5"
											>
												<path
													stroke-linecap="round"
													stroke-linejoin="round"
													d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
												/>
											</svg>
										</div>
703
										<div class=" self-center font-medium">{$i18n.t('Playground')}</div>
704
									</button>
705
706
707
								{/if}

								<button
708
709
710
711
712
713
714
715
716
717
718
719
720
721
									class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
									on:click={() => {
										showArchivedChatsModal = true;
										showDropdown = false;
									}}
								>
									<div class=" self-center mr-3">
										<ArchiveBox className="size-5" strokeWidth="1.5" />
									</div>
									<div class=" self-center font-medium">{$i18n.t('Archived Chats')}</div>
								</button>

								<button
									class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
722
723
									on:click={async () => {
										await showSettings.set(true);
724
										showDropdown = false;
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
									}}
								>
									<div class=" self-center mr-3">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke-width="1.5"
											stroke="currentColor"
											class="w-5 h-5"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z"
											/>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
											/>
										</svg>
									</div>
748
									<div class=" self-center font-medium">{$i18n.t('Settings')}</div>
749
750
751
								</button>
							</div>

752
							<hr class=" dark:border-gray-800 m-0 p-0" />
753

754
							<div class="p-1 py-2 w-full">
755
								<button
756
									class="flex rounded-md py-2.5 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-800 transition"
757
758
759
									on:click={() => {
										localStorage.removeItem('token');
										location.href = '/auth';
760
										showDropdown = false;
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
									}}
								>
									<div class=" self-center mr-3">
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-5 h-5"
										>
											<path
												fill-rule="evenodd"
												d="M3 4.25A2.25 2.25 0 015.25 2h5.5A2.25 2.25 0 0113 4.25v2a.75.75 0 01-1.5 0v-2a.75.75 0 00-.75-.75h-5.5a.75.75 0 00-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 00.75-.75v-2a.75.75 0 011.5 0v2A2.25 2.25 0 0110.75 18h-5.5A2.25 2.25 0 013 15.75V4.25z"
												clip-rule="evenodd"
											/>
											<path
												fill-rule="evenodd"
												d="M6 10a.75.75 0 01.75-.75h9.546l-1.048-.943a.75.75 0 111.004-1.114l2.5 2.25a.75.75 0 010 1.114l-2.5 2.25a.75.75 0 11-1.004-1.114l1.048-.943H6.75A.75.75 0 016 10z"
												clip-rule="evenodd"
											/>
										</svg>
									</div>
782
									<div class=" self-center font-medium">{$i18n.t('Sign Out')}</div>
783
784
785
786
787
788
789
790
791
792
								</button>
							</div>
						</div>
					{/if}
				{/if}
			</div>
		</div>
	</div>

	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
793
		id="sidebar-handle"
Timothy J. Baek's avatar
Timothy J. Baek committed
794
		class="fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
795
	>
Jannik Streidl's avatar
Jannik Streidl committed
796
797
798
799
800
		<Tooltip
			placement="right"
			content={`${show ? $i18n.t('Close') : $i18n.t('Open')} ${$i18n.t('sidebar')}`}
			touch={false}
		>
801
802
803
804
805
806
807
808
			<button
				id="sidebar-toggle-button"
				class=" group"
				on:click={() => {
					show = !show;
				}}
				><span class="" data-state="closed"
					><div
809
						class="flex h-[72px] w-8 items-center justify-center opacity-50 group-hover:opacity-100 transition"
810
811
812
813
814
815
816
817
818
819
820
821
822
					>
						<div class="flex h-6 w-6 flex-col items-center">
							<div
								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {show
									? 'group-hover:rotate-[15deg]'
									: 'group-hover:rotate-[-15deg]'}"
							/>
							<div
								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {show
									? 'group-hover:rotate-[-15deg]'
									: 'group-hover:rotate-[15deg]'}"
							/>
						</div>
823
					</div>
824
825
826
				</span>
			</button>
		</Tooltip>
827
828
	</div>
</div>