Sidebar.svelte 23.6 KB
Newer Older
1
<script lang="ts">
Timothy J. Baek's avatar
Timothy J. Baek committed
2
	import { goto } from '$app/navigation';
Timothy J. Baek's avatar
Timothy J. Baek committed
3
4
5
6
7
8
9
10
11
12
	import {
		user,
		chats,
		settings,
		showSettings,
		chatId,
		tags,
		showSidebar,
		mobile
	} from '$lib/stores';
13
	import { onMount, getContext } from 'svelte';
14
15
16

	const i18n = getContext('i18n');

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

36
	const BREAKPOINT = 1024;
Timothy J. Baek's avatar
Timothy J. Baek committed
37

38
39
40
	let show = false;
	let navElement;

Timothy J. Baek's avatar
Timothy J. Baek committed
41
	let title: string = 'UI';
42
	let search = '';
43

Timothy J. Baek's avatar
Timothy J. Baek committed
44
45
	let shareChatId = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
46
47
	let selectedChatId = null;

48
49
	let chatDeleteId = null;
	let chatTitleEditId = null;
50
51
	let chatTitle = '';

52
	let showArchivedChatsModal = false;
Timothy J. Baek's avatar
Timothy J. Baek committed
53
	let showShareChatModal = false;
54
	let showDropdown = false;
55
	let isEditing = false;
56

57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
	let filteredChatList = [];

	$: filteredChatList = $chats.filter((chat) => {
		if (search === '') {
			return true;
		} else {
			let title = chat.title.toLowerCase();
			const query = search.toLowerCase();

			let contentMatches = false;
			// Access the messages within chat.chat.messages
			if (chat.chat && chat.chat.messages && Array.isArray(chat.chat.messages)) {
				contentMatches = chat.chat.messages.some((message) => {
					// Check if message.content exists and includes the search query
					return message.content && message.content.toLowerCase().includes(query);
				});
			}

			return title.includes(query) || contentMatches;
		}
	});

79
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
80
		showSidebar.set(window.innerWidth > BREAKPOINT);
Timothy J. Baek's avatar
Timothy J. Baek committed
81
		await chats.set(await getChatList(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
82

83
84
		let touchstart;
		let touchend;
Timothy J. Baek's avatar
Timothy J. Baek committed
85
86
87

		function checkDirection() {
			const screenWidth = window.innerWidth;
88
			const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX);
Timothy J. Baek's avatar
Timothy J. Baek committed
89
			if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 8) {
90
				if (touchend.screenX < touchstart.screenX) {
Timothy J. Baek's avatar
Timothy J. Baek committed
91
					showSidebar.set(false);
Timothy J. Baek's avatar
Timothy J. Baek committed
92
				}
93
				if (touchend.screenX > touchstart.screenX) {
Timothy J. Baek's avatar
Timothy J. Baek committed
94
					showSidebar.set(true);
Timothy J. Baek's avatar
Timothy J. Baek committed
95
96
97
98
				}
			}
		}

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
99
		const onTouchStart = (e) => {
100
101
			touchstart = e.changedTouches[0];
			console.log(touchstart.clientX);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
102
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
103

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
104
		const onTouchEnd = (e) => {
105
			touchend = e.changedTouches[0];
Timothy J. Baek's avatar
Timothy J. Baek committed
106
			checkDirection();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
107
108
		};

109
		const onResize = () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
110
111
			if ($showSidebar && window.innerWidth < BREAKPOINT) {
				showSidebar.set(false);
112
			}
Timothy J. Baek's avatar
Timothy J. Baek committed
113
		};
114

115
116
		window.addEventListener('touchstart', onTouchStart);
		window.addEventListener('touchend', onTouchEnd);
117
		window.addEventListener('resize', onResize);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
118
119

		return () => {
120
121
122
			window.removeEventListener('touchstart', onTouchStart);
			window.removeEventListener('touchend', onTouchEnd);
			window.removeEventListener('resize', onResize);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
123
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
	});

	// 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);
	};
140
141
142
143
144
145

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

	const editChatTitle = async (id, _title) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
146
		if (_title === '') {
Jannik Streidl's avatar
Jannik Streidl committed
147
			toast.error($i18n.t('Title cannot be an empty string.'));
Timothy J. Baek's avatar
Timothy J. Baek committed
148
149
150
151
152
153
154
155
		} else {
			title = _title;

			await updateChatById(localStorage.token, id, {
				title: _title
			});
			await chats.set(await getChatList(localStorage.token));
		}
156
157
158
	};

	const deleteChat = async (id) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
159
160
161
		const res = await deleteChatById(localStorage.token, id).catch((error) => {
			toast.error(error);
			chatDeleteId = null;
162

Timothy J. Baek's avatar
Timothy J. Baek committed
163
164
165
166
			return null;
		});

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
167
168
169
170
			if ($chatId === id) {
				goto('/');
			}

Timothy J. Baek's avatar
Timothy J. Baek committed
171
172
			await chats.set(await getChatList(localStorage.token));
		}
173
	};
174
175
176
177
178
179

	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
180
181
182
183
184

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

Timothy J. Baek's avatar
Timothy J. Baek committed
187
<ShareChatModal bind:show={showShareChatModal} chatId={shareChatId} />
Timothy J. Baek's avatar
Timothy J. Baek committed
188
189
190
191
192
193
<ArchivedChatsModal
	bind:show={showArchivedChatsModal}
	on:change={async () => {
		await chats.set(await getChatList(localStorage.token));
	}}
/>
Timothy J. Baek's avatar
Timothy J. Baek committed
194

Timothy J. Baek's avatar
Timothy J. Baek committed
195
196
197
198
<!-- svelte-ignore a11y-no-static-element-interactions -->

{#if $showSidebar}
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
199
		class=" fixed md:hidden z-40 top-0 right-0 left-0 bottom-0 bg-black/60 w-full min-h-screen h-screen flex justify-center overflow-hidden overscroll-contain"
Timothy J. Baek's avatar
Timothy J. Baek committed
200
201
202
203
204
205
		on:mousedown={() => {
			showSidebar.set(!$showSidebar);
		}}
	/>
{/if}

206
207
<div
	bind:this={navElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
208
209
	id="sidebar"
	class="h-screen max-h-[100dvh] min-h-screen {$showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
210
		? 'lg:relative w-[260px]'
Timothy J. Baek's avatar
Timothy J. Baek committed
211
		: '-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 rounded-r-2xl
212
        "
Timothy J. Baek's avatar
Timothy J. Baek committed
213
	data-state={$showSidebar}
214
>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
215
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
216
		class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] z-50 {$showSidebar
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
217
218
219
			? ''
			: 'invisible'}"
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
		<div class="px-2 flex justify-between space-x-2">
			<button
				class=" cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-850 transition"
				on:click={() => {
					showSidebar.set(!$showSidebar);
				}}
			>
				<div class=" m-auto self-center">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke-width="2"
						stroke="currentColor"
						class="size-5"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"
						/>
					</svg>
				</div>
			</button>
244
			<a
Timothy J. Baek's avatar
Timothy J. Baek committed
245
				id="sidebar-new-chat-button"
246
				class="flex justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
247
				href="/"
Timothy J. Baek's avatar
Timothy J. Baek committed
248
				on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
249
250
					selectedChatId = null;

251
					await goto('/');
252
					const newChatButton = document.getElementById('new-chat-button');
253
254
255
					setTimeout(() => {
						newChatButton?.click();
					}, 0);
256
257
258
259
260
261
262
				}}
			>
				<div class="self-center">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
263
						class="size-5"
264
265
266
267
268
269
270
271
272
					>
						<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>
273
			</a>
274
275
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
276
		{#if $user?.role === 'admin'}
Timothy J. Baek's avatar
Timothy J. Baek committed
277
			<div class="px-2 flex justify-center mt-0.5">
278
				<a
Timothy J. Baek's avatar
Timothy J. Baek committed
279
					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
280
					href="/modelfiles"
Timothy J. Baek's avatar
Timothy J. Baek committed
281
282
283
284
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
285
286
287
288
289
290
				>
					<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
291
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
292
293
294
295
296
297
							stroke="currentColor"
							class="w-4 h-4"
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
298
								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
299
300
301
							/>
						</svg>
					</div>
302

Timothy J. Baek's avatar
Timothy J. Baek committed
303
					<div class="flex self-center">
304
						<div class=" self-center font-medium text-sm">{$i18n.t('Modelfiles')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
305
					</div>
306
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
307
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
308

Timothy J. Baek's avatar
Timothy J. Baek committed
309
			<div class="px-2 flex justify-center">
310
				<a
Timothy J. Baek's avatar
Timothy J. Baek committed
311
					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
312
					href="/prompts"
Timothy J. Baek's avatar
Timothy J. Baek committed
313
314
315
316
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
317
318
319
320
				>
					<div class="self-center">
						<svg
							xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
321
322
							fill="none"
							viewBox="0 0 24 24"
Timothy J. Baek's avatar
Timothy J. Baek committed
323
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
324
							stroke="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
325
326
327
							class="w-4 h-4"
						>
							<path
Timothy J. Baek's avatar
Timothy J. Baek committed
328
329
330
								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
331
332
333
334
335
							/>
						</svg>
					</div>

					<div class="flex self-center">
336
						<div class=" self-center font-medium text-sm">{$i18n.t('Prompts')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
337
					</div>
338
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
339
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
340

Timothy J. Baek's avatar
Timothy J. Baek committed
341
			<div class="px-2 flex justify-center mb-1">
342
				<a
Timothy J. Baek's avatar
Timothy J. Baek committed
343
					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
344
					href="/documents"
Timothy J. Baek's avatar
Timothy J. Baek committed
345
346
347
348
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
					}}
Timothy J. Baek's avatar
Timothy J. Baek committed
349
350
351
352
353
354
				>
					<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
355
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
356
357
358
359
360
361
362
363
364
365
366
367
							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">
368
						<div class=" self-center font-medium text-sm">{$i18n.t('Documents')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
369
					</div>
370
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
371
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
372
		{/if}
373

374
375
		<div class="relative flex flex-col flex-1 overflow-y-auto">
			{#if !($settings.saveChatHistory ?? true)}
Timothy J. Baek's avatar
Timothy J. Baek committed
376
				<div class="absolute z-40 w-full h-full bg-gray-50/90 dark:bg-black/90 flex justify-center">
377
					<div class=" text-left px-5 py-2">
378
						<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div>
379
						<div class="text-xs mt-2">
Jannik Streidl's avatar
Jannik Streidl committed
380
381
382
383
384
							{$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
385
386
387
388
389
							>
						</div>

						<div class="mt-3">
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
390
								class="flex justify-center items-center space-x-1.5 px-3 py-2.5 rounded-lg text-xs bg-gray-100 hover:bg-gray-200 transition text-gray-800 font-medium w-full"
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
								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
411
								<div>{$i18n.t('Enable Chat History')}</div>
412
413
414
							</button>
						</div>
					</div>
415
				</div>
416
			{/if}
417

Timothy J. Baek's avatar
Timothy J. Baek committed
418
			<div class="px-2 mt-1 mb-2 flex justify-center space-x-2">
419
				<div class="flex w-full" id="chat-search">
420
					<div class="self-center pl-3 py-2 rounded-l-xl bg-white dark:bg-gray-950">
421
422
423
424
425
426
427
428
429
430
431
432
433
						<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>
434

435
					<input
436
						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
437
						placeholder={$i18n.t('Search')}
438
						bind:value={search}
Timothy J. Baek's avatar
Timothy J. Baek committed
439
440
441
						on:focus={() => {
							enrichChatsWithContent($chats);
						}}
442
443
444
					/>
				</div>
			</div>
445

Timothy J. Baek's avatar
Timothy J. Baek committed
446
447
448
			{#if $tags.length > 0}
				<div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap">
					<button
449
						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
450
451
452
453
						on:click={async () => {
							await chats.set(await getChatList(localStorage.token));
						}}
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
454
						{$i18n.t('all')}
Timothy J. Baek's avatar
Timothy J. Baek committed
455
456
457
					</button>
					{#each $tags as tag}
						<button
458
							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
459
							on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
460
461
462
463
464
465
								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
466
467
468
469
470
471
472
473
							}}
						>
							{tag.name}
						</button>
					{/each}
				</div>
			{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
474
			<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-none">
475
				{#each filteredChatList as chat, idx}
Timothy J. Baek's avatar
Timothy J. Baek committed
476
					{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
477
478
479
						<div
							class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
								? ''
Timothy J. Baek's avatar
Timothy J. Baek committed
480
								: 'pt-5'} pb-0.5"
481
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
482
							{$i18n.t(chat.time_range)}
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
							<!-- localisation keys for time_range to be recognized from the i18next parser (so they don't get automatically removed):
							{$i18n.t('Today')}
							{$i18n.t('Yesterday')}
							{$i18n.t('Previous 7 days')}
							{$i18n.t('Previous 30 days')}
							{$i18n.t('January')}
							{$i18n.t('February')}
							{$i18n.t('March')}
							{$i18n.t('April')}
							{$i18n.t('May')}
							{$i18n.t('June')}
							{$i18n.t('July')}
							{$i18n.t('August')}
							{$i18n.t('September')}
							{$i18n.t('October')}
							{$i18n.t('November')}
							{$i18n.t('December')}
							-->
501
502
503
						</div>
					{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
504
					<div class=" w-full pr-2 relative group">
Timothy J. Baek's avatar
Timothy J. Baek committed
505
506
						{#if chatTitleEditId === chat.id}
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
507
508
509
								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
								chat.id === chatTitleEditId ||
								chat.id === chatDeleteId
Timothy J. Baek's avatar
Timothy J. Baek committed
510
									? 'bg-gray-200 dark:bg-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
511
									: chat.id === selectedChatId
512
513
									? '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
514
515
516
517
518
							>
								<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
519
520
521
								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
								chat.id === chatTitleEditId ||
								chat.id === chatDeleteId
Timothy J. Baek's avatar
Timothy J. Baek committed
522
									? 'bg-gray-200 dark:bg-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
523
									: chat.id === selectedChatId
524
525
									? '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
526
								href="/c/{chat.id}"
527
								on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
528
									selectedChatId = chat.id;
529
									if (window.innerWidth < 1024) {
Timothy J. Baek's avatar
Timothy J. Baek committed
530
										showSidebar.set(false);
531
532
									}
								}}
Timothy J. Baek's avatar
Timothy J. Baek committed
533
								draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
534
535
							>
								<div class=" flex self-center flex-1 w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
536
									<div class=" text-left self-center overflow-hidden w-full h-[20px]">
537
										{chat.title}
Timothy J. Baek's avatar
Timothy J. Baek committed
538
									</div>
539
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
540
541
							</a>
						{/if}
542

Timothy J. Baek's avatar
Timothy J. Baek committed
543
						<div
Timothy J. Baek's avatar
Timothy J. Baek committed
544
							class="
545

Timothy J. Baek's avatar
Timothy J. Baek committed
546
							{chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId
Timothy J. Baek's avatar
Timothy J. Baek committed
547
								? 'from-gray-200 dark:from-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
548
								: chat.id === selectedChatId
549
550
								? '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
551
								absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
552

Timothy J. Baek's avatar
Timothy J. Baek committed
553
								  to-transparent"
Timothy J. Baek's avatar
Timothy J. Baek committed
554
555
556
557
						>
							{#if chatTitleEditId === chat.id}
								<div class="flex self-center space-x-1.5 z-10">
									<button
558
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
559
560
561
562
563
564
565
566
567
568
569
										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"
570
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
571
572
573
574
575
576
577
578
											<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
579
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
580
581
582
583
584
585
586
587
588
589
										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"
590
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
591
592
593
594
595
596
597
598
599
											<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
600
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
601
602
603
604
605
606
607
608
609
										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"
610
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
611
612
613
614
615
616
617
618
											<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
619
										class=" self-center dark:hover:text-white transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
620
621
622
623
624
625
626
627
628
										on:click={() => {
											chatDeleteId = null;
										}}
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											viewBox="0 0 20 20"
											fill="currentColor"
											class="w-4 h-4"
629
										>
Timothy J. Baek's avatar
Timothy J. Baek committed
630
631
632
633
634
635
636
											<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
637
								<div class="flex self-center space-x-1 z-10">
Timothy J. Baek's avatar
Timothy J. Baek committed
638
									<ChatMenu
Timothy J. Baek's avatar
Timothy J. Baek committed
639
										chatId={chat.id}
Timothy J. Baek's avatar
Timothy J. Baek committed
640
641
642
643
										shareHandler={() => {
											shareChatId = selectedChatId;
											showShareChatModal = true;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
644
										renameHandler={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
645
646
647
											chatTitle = chat.title;
											chatTitleEditId = chat.id;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
648
										deleteHandler={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
649
650
											chatDeleteId = chat.id;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
651
652
653
										onClose={() => {
											selectedChatId = null;
										}}
Timothy J. Baek's avatar
Timothy J. Baek committed
654
									>
655
										<button
Timothy J. Baek's avatar
Timothy J. Baek committed
656
											aria-label="Chat Menu"
657
											class=" self-center dark:hover:text-white transition"
658
											on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
659
												selectedChatId = chat.id;
660
											}}
661
										>
662
663
											<svg
												xmlns="http://www.w3.org/2000/svg"
Timothy J. Baek's avatar
Timothy J. Baek committed
664
665
												viewBox="0 0 16 16"
												fill="currentColor"
666
667
668
												class="w-4 h-4"
											>
												<path
Timothy J. Baek's avatar
Timothy J. Baek committed
669
													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"
670
671
672
												/>
											</svg>
										</button>
Timothy J. Baek's avatar
Timothy J. Baek committed
673
									</ChatMenu>
Timothy J. Baek's avatar
Timothy J. Baek committed
674

675
									<Tooltip content={$i18n.t('Archive')}>
Timothy J. Baek's avatar
Timothy J. Baek committed
676
677
678
679
										<button
											aria-label="Archive"
											class=" self-center dark:hover:text-white transition"
											on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
680
												archiveChatHandler(chat.id);
Timothy J. Baek's avatar
Timothy J. Baek committed
681
682
683
684
685
											}}
										>
											<ArchiveBox />
										</button>
									</Tooltip>
Timothy J. Baek's avatar
Timothy J. Baek committed
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706

									{#if chat.id === $chatId}
										<button
											id="delete-chat-button"
											class="hidden"
											on:click={() => {
												chatDeleteId = chat.id;
											}}
										>
											<svg
												xmlns="http://www.w3.org/2000/svg"
												viewBox="0 0 16 16"
												fill="currentColor"
												class="w-4 h-4"
											>
												<path
													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"
												/>
											</svg>
										</button>
									{/if}
Timothy J. Baek's avatar
Timothy J. Baek committed
707
708
709
								</div>
							{/if}
						</div>
710
711
712
					</div>
				{/each}
			</div>
713
714
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
715
716
717
718
719
720
721
722
723
724
725
726
		{#if $mobile}
			<div class="px-2.5">
				<!-- <hr class=" border-gray-900 mb-1 w-full" /> -->

				<div class="flex flex-col">
					{#if $user !== undefined}
						<UserMenu
							role={$user.role}
							on:show={(e) => {
								if (e.detail === 'archived-chat') {
									showArchivedChatsModal = true;
								}
Timothy J. Baek's avatar
Timothy J. Baek committed
727
							}}
728
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
							<button
								class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
								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>
						</UserMenu>
					{/if}
				</div>
747
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
748
		{/if}
749
750
751
	</div>

	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
752
		id="sidebar-handle"
Timothy J. Baek's avatar
Timothy J. Baek committed
753
		class=" hidden md:fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
754
	>
Jannik Streidl's avatar
Jannik Streidl committed
755
756
		<Tooltip
			placement="right"
Timothy J. Baek's avatar
Timothy J. Baek committed
757
			content={`${$showSidebar ? $i18n.t('Close') : $i18n.t('Open')} ${$i18n.t('sidebar')}`}
Jannik Streidl's avatar
Jannik Streidl committed
758
759
			touch={false}
		>
760
761
762
763
			<button
				id="sidebar-toggle-button"
				class=" group"
				on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
764
					showSidebar.set(!$showSidebar);
765
766
767
				}}
				><span class="" data-state="closed"
					><div
768
						class="flex h-[72px] w-8 items-center justify-center opacity-50 group-hover:opacity-100 transition"
769
770
771
					>
						<div class="flex h-6 w-6 flex-col items-center">
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
772
								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {$showSidebar
773
774
775
776
									? 'group-hover:rotate-[15deg]'
									: 'group-hover:rotate-[-15deg]'}"
							/>
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
777
								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {$showSidebar
778
779
780
781
									? 'group-hover:rotate-[-15deg]'
									: 'group-hover:rotate-[15deg]'}"
							/>
						</div>
782
					</div>
783
784
785
				</span>
			</button>
		</Tooltip>
786
787
	</div>
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
788
789

<style>
Timothy J. Baek's avatar
Timothy J. Baek committed
790
791
792
793
	.scrollbar-none:active::-webkit-scrollbar-thumb,
	.scrollbar-none:focus::-webkit-scrollbar-thumb,
	.scrollbar-none:hover::-webkit-scrollbar-thumb {
		visibility: visible;
Timothy J. Baek's avatar
Timothy J. Baek committed
794
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
795
796
	.scrollbar-none::-webkit-scrollbar-thumb {
		visibility: hidden;
Timothy J. Baek's avatar
Timothy J. Baek committed
797
798
	}
</style>