Sidebar.svelte 22.4 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
	import {
		user,
		chats,
		settings,
		showSettings,
		chatId,
		tags,
		showSidebar,
Timothy J. Baek's avatar
Timothy J. Baek committed
11
12
		mobile,
		showArchivedChats
Timothy J. Baek's avatar
Timothy J. Baek committed
13
	} from '$lib/stores';
14
	import { onMount, getContext } from 'svelte';
15
16
17

	const i18n = getContext('i18n');

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

Timothy J. Baek's avatar
Timothy J. Baek committed
39
	const BREAKPOINT = 768;
Timothy J. Baek's avatar
Timothy J. Baek committed
40

41
42
43
	let show = false;
	let navElement;

Timothy J. Baek's avatar
Timothy J. Baek committed
44
	let title: string = 'UI';
45
	let search = '';
46

Timothy J. Baek's avatar
Timothy J. Baek committed
47
48
	let shareChatId = null;

Timothy J. Baek's avatar
Timothy J. Baek committed
49
50
	let selectedChatId = null;

51
52
	let chatDeleteId = null;
	let chatTitleEditId = null;
53
54
	let chatTitle = '';

Timothy J. Baek's avatar
Timothy J. Baek committed
55
	let showShareChatModal = false;
56
	let showDropdown = false;
57
	let isEditing = false;
58

59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
	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;
		}
	});

Timothy J. Baek's avatar
Timothy J. Baek committed
81
82
83
84
85
86
87
	mobile;
	const onResize = () => {
		if ($showSidebar && window.innerWidth < BREAKPOINT) {
			showSidebar.set(false);
		}
	};

88
	onMount(async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
89
90
91
92
93
94
95
96
97
98
		mobile.subscribe((e) => {
			if ($showSidebar && e) {
				showSidebar.set(false);
			}

			if (!$showSidebar && !e) {
				showSidebar.set(true);
			}
		});

Timothy J. Baek's avatar
Timothy J. Baek committed
99
		showSidebar.set(window.innerWidth > BREAKPOINT);
Timothy J. Baek's avatar
Timothy J. Baek committed
100
		await chats.set(await getChatList(localStorage.token));
Timothy J. Baek's avatar
Timothy J. Baek committed
101

102
103
		let touchstart;
		let touchend;
Timothy J. Baek's avatar
Timothy J. Baek committed
104
105
106

		function checkDirection() {
			const screenWidth = window.innerWidth;
107
			const swipeDistance = Math.abs(touchend.screenX - touchstart.screenX);
Timothy J. Baek's avatar
Timothy J. Baek committed
108
			if (touchstart.clientX < 40 && swipeDistance >= screenWidth / 8) {
109
				if (touchend.screenX < touchstart.screenX) {
Timothy J. Baek's avatar
Timothy J. Baek committed
110
					showSidebar.set(false);
Timothy J. Baek's avatar
Timothy J. Baek committed
111
				}
112
				if (touchend.screenX > touchstart.screenX) {
Timothy J. Baek's avatar
Timothy J. Baek committed
113
					showSidebar.set(true);
Timothy J. Baek's avatar
Timothy J. Baek committed
114
115
116
117
				}
			}
		}

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
118
		const onTouchStart = (e) => {
119
120
			touchstart = e.changedTouches[0];
			console.log(touchstart.clientX);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
121
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
122

Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
123
		const onTouchEnd = (e) => {
124
			touchend = e.changedTouches[0];
Timothy J. Baek's avatar
Timothy J. Baek committed
125
			checkDirection();
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
126
127
		};

128
129
		window.addEventListener('touchstart', onTouchStart);
		window.addEventListener('touchend', onTouchEnd);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
130
131

		return () => {
132
133
			window.removeEventListener('touchstart', onTouchStart);
			window.removeEventListener('touchend', onTouchEnd);
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
134
		};
Timothy J. Baek's avatar
Timothy J. Baek committed
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
	});

	// 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);
	};
151
152
153
154
155
156

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

	const editChatTitle = async (id, _title) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
157
		if (_title === '') {
Jannik Streidl's avatar
Jannik Streidl committed
158
			toast.error($i18n.t('Title cannot be an empty string.'));
Timothy J. Baek's avatar
Timothy J. Baek committed
159
160
161
162
163
164
165
166
		} else {
			title = _title;

			await updateChatById(localStorage.token, id, {
				title: _title
			});
			await chats.set(await getChatList(localStorage.token));
		}
167
168
169
	};

	const deleteChat = async (id) => {
Timothy J. Baek's avatar
Timothy J. Baek committed
170
171
172
		const res = await deleteChatById(localStorage.token, id).catch((error) => {
			toast.error(error);
			chatDeleteId = null;
173

Timothy J. Baek's avatar
Timothy J. Baek committed
174
175
176
177
			return null;
		});

		if (res) {
Timothy J. Baek's avatar
Timothy J. Baek committed
178
179
180
181
			if ($chatId === id) {
				goto('/');
			}

Timothy J. Baek's avatar
Timothy J. Baek committed
182
183
			await chats.set(await getChatList(localStorage.token));
		}
184
	};
185

Timothy J. Baek's avatar
Timothy J. Baek committed
186
187
188
189
190
191
192
193
194
195
196
197
	const cloneChatHandler = async (id) => {
		const res = await cloneChatById(localStorage.token, id).catch((error) => {
			toast.error(error);
			return null;
		});

		if (res) {
			goto(`/c/${res.id}`);
			await chats.set(await getChatList(localStorage.token));
		}
	};

198
199
	const saveSettings = async (updated) => {
		await settings.set({ ...$settings, ...updated });
200
		await updateUserSettings(localStorage.token, { ui: $settings });
201
202
		location.href = '/';
	};
Timothy J. Baek's avatar
Timothy J. Baek committed
203
204
205
206
207

	const archiveChatHandler = async (id) => {
		await archiveChatById(localStorage.token, id);
		await chats.set(await getChatList(localStorage.token));
	};
208
209
210
211

	const focusEdit = async (node: HTMLInputElement) => {
		node.focus();
	};
212
213
</script>

Timothy J. Baek's avatar
Timothy J. Baek committed
214
<ShareChatModal bind:show={showShareChatModal} chatId={shareChatId} />
Timothy J. Baek's avatar
Timothy J. Baek committed
215
<ArchivedChatsModal
Timothy J. Baek's avatar
Timothy J. Baek committed
216
	bind:show={$showArchivedChats}
Timothy J. Baek's avatar
Timothy J. Baek committed
217
218
219
220
	on:change={async () => {
		await chats.set(await getChatList(localStorage.token));
	}}
/>
Timothy J. Baek's avatar
Timothy J. Baek committed
221

Timothy J. Baek's avatar
Timothy J. Baek committed
222
223
224
225
<!-- svelte-ignore a11y-no-static-element-interactions -->

{#if $showSidebar}
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
226
		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
227
228
229
230
231
232
		on:mousedown={() => {
			showSidebar.set(!$showSidebar);
		}}
	/>
{/if}

233
234
<div
	bind:this={navElement}
Timothy J. Baek's avatar
Timothy J. Baek committed
235
	id="sidebar"
Timothy J. Baek's avatar
Timothy J. Baek committed
236
	class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
Timothy J. Baek's avatar
Timothy J. Baek committed
237
		? 'md:relative w-[260px]'
Timothy J. Baek's avatar
Timothy J. Baek committed
238
		: '-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
239
        "
Timothy J. Baek's avatar
Timothy J. Baek committed
240
	data-state={$showSidebar}
241
>
Timothy J. Baek's avatar
refac  
Timothy J. Baek committed
242
	<div
Timothy J. Baek's avatar
Timothy J. Baek committed
243
		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
244
245
246
			? ''
			: 'invisible'}"
	>
Timothy J. Baek's avatar
Timothy J. Baek committed
247
		<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
248
			<a
Timothy J. Baek's avatar
Timothy J. Baek committed
249
				id="sidebar-new-chat-button"
Timothy J. Baek's avatar
Timothy J. Baek committed
250
				class="flex flex-1 justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
251
				href="/"
252
				draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
253
				on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
254
255
					selectedChatId = null;

256
					await goto('/');
257
					const newChatButton = document.getElementById('new-chat-button');
258
259
					setTimeout(() => {
						newChatButton?.click();
Timothy J. Baek's avatar
Timothy J. Baek committed
260
261
262
263

						if ($mobile) {
							showSidebar.set(false);
						}
264
					}, 0);
265
266
				}}
			>
Timothy J. Baek's avatar
Timothy J. Baek committed
267
268
				<div class="self-center mx-1.5">
					<img
Timothy J. Baek's avatar
Timothy J. Baek committed
269
						crossorigin="anonymous"
Timothy J. Baek's avatar
Timothy J. Baek committed
270
271
272
273
274
						src="{WEBUI_BASE_URL}/static/favicon.png"
						class=" size-6 -translate-x-1.5 rounded-full"
						alt="logo"
					/>
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
275
276
277
				<div class=" self-center font-medium text-sm text-gray-850 dark:text-white">
					{$i18n.t('New Chat')}
				</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
278
				<div class="self-center ml-auto">
279
280
281
282
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 0 20 20"
						fill="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
283
						class="size-5"
284
285
286
287
288
289
290
291
292
					>
						<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>
293
			</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317

			<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>
318
319
		</div>

Timothy J. Baek's avatar
Timothy J. Baek committed
320
		{#if $user?.role === 'admin'}
Timothy J. Baek's avatar
Timothy J. Baek committed
321
			<div class="px-2.5 flex justify-center text-gray-800 dark:text-gray-200">
322
				<a
Timothy J. Baek's avatar
Timothy J. Baek committed
323
					class="flex-grow flex space-x-3 rounded-xl px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
Timothy J. Baek's avatar
Timothy J. Baek committed
324
					href="/workspace"
Timothy J. Baek's avatar
Timothy J. Baek committed
325
326
327
328
					on:click={() => {
						selectedChatId = null;
						chatId.set('');
					}}
329
					draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
330
331
332
333
334
335
				>
					<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
336
							stroke-width="2"
Timothy J. Baek's avatar
Timothy J. Baek committed
337
							stroke="currentColor"
Timothy J. Baek's avatar
Timothy J. Baek committed
338
							class="size-[1.1rem]"
Timothy J. Baek's avatar
Timothy J. Baek committed
339
340
341
342
						>
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
Timothy J. Baek's avatar
Timothy J. Baek committed
343
								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
344
345
346
							/>
						</svg>
					</div>
347

Timothy J. Baek's avatar
Timothy J. Baek committed
348
					<div class="flex self-center">
Timothy J. Baek's avatar
Timothy J. Baek committed
349
						<div class=" self-center font-medium text-sm">{$i18n.t('Workspace')}</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
350
					</div>
351
				</a>
Timothy J. Baek's avatar
Timothy J. Baek committed
352
			</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
353
		{/if}
354

355
356
		<div class="relative flex flex-col flex-1 overflow-y-auto">
			{#if !($settings.saveChatHistory ?? true)}
Timothy J. Baek's avatar
Timothy J. Baek committed
357
				<div class="absolute z-40 w-full h-full bg-gray-50/90 dark:bg-black/90 flex justify-center">
358
					<div class=" text-left px-5 py-2">
359
						<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div>
360
						<div class="text-xs mt-2">
Jannik Streidl's avatar
Jannik Streidl committed
361
362
363
364
365
							{$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
366
367
368
369
370
							>
						</div>

						<div class="mt-3">
							<button
Timothy J. Baek's avatar
Timothy J. Baek committed
371
								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"
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
								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
392
								<div>{$i18n.t('Enable Chat History')}</div>
393
394
395
							</button>
						</div>
					</div>
396
				</div>
397
			{/if}
398

Timothy J. Baek's avatar
Timothy J. Baek committed
399
400
401
			<div class="px-2 mt-0.5 mb-2 flex justify-center space-x-2">
				<div class="flex w-full rounded-xl" id="chat-search">
					<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
402
403
404
405
406
407
408
409
410
411
412
413
414
						<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>
415

416
					<input
Timothy J. Baek's avatar
Timothy J. Baek committed
417
						class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
Jannik Streidl's avatar
Jannik Streidl committed
418
						placeholder={$i18n.t('Search')}
419
						bind:value={search}
Timothy J. Baek's avatar
Timothy J. Baek committed
420
421
422
						on:focus={() => {
							enrichChatsWithContent($chats);
						}}
423
424
425
					/>
				</div>
			</div>
426

Timothy J. Baek's avatar
Timothy J. Baek committed
427
			{#if $tags.length > 0}
Timothy J. Baek's avatar
Timothy J. Baek committed
428
				<div class="px-2.5 mb-2 flex gap-1 flex-wrap">
Timothy J. Baek's avatar
Timothy J. Baek committed
429
					<button
Timothy J. Baek's avatar
Timothy J. Baek committed
430
						class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
Timothy J. Baek's avatar
Timothy J. Baek committed
431
432
433
434
						on:click={async () => {
							await chats.set(await getChatList(localStorage.token));
						}}
					>
Timothy J. Baek's avatar
Timothy J. Baek committed
435
						{$i18n.t('all')}
Timothy J. Baek's avatar
Timothy J. Baek committed
436
437
438
					</button>
					{#each $tags as tag}
						<button
Timothy J. Baek's avatar
Timothy J. Baek committed
439
							class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
Timothy J. Baek's avatar
Timothy J. Baek committed
440
							on:click={async () => {
Timothy J. Baek's avatar
Timothy J. Baek committed
441
442
443
444
445
446
								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
447
448
449
450
451
452
453
454
							}}
						>
							{tag.name}
						</button>
					{/each}
				</div>
			{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
455
			<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
456
				{#each filteredChatList as chat, idx}
Timothy J. Baek's avatar
Timothy J. Baek committed
457
					{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
458
459
460
						<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
461
								: 'pt-5'} pb-0.5"
462
						>
Timothy J. Baek's avatar
Timothy J. Baek committed
463
							{$i18n.t(chat.time_range)}
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
							<!-- 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')}
							-->
482
483
484
						</div>
					{/if}

Timothy J. Baek's avatar
Timothy J. Baek committed
485
					<div class=" w-full pr-2 relative group">
Timothy J. Baek's avatar
Timothy J. Baek committed
486
487
						{#if chatTitleEditId === chat.id}
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
488
489
490
								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
491
									? 'bg-gray-200 dark:bg-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
492
									: chat.id === selectedChatId
493
494
									? '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
495
							>
496
497
498
499
500
								<input
									use:focusEdit
									bind:value={chatTitle}
									class=" bg-transparent w-full outline-none mr-10"
								/>
Timothy J. Baek's avatar
Timothy J. Baek committed
501
502
503
							</div>
						{:else}
							<a
Timothy J. Baek's avatar
Timothy J. Baek committed
504
505
506
								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
507
									? 'bg-gray-200 dark:bg-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
508
									: chat.id === selectedChatId
509
510
									? '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
511
								href="/c/{chat.id}"
512
								on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
513
									selectedChatId = chat.id;
Timothy J. Baek's avatar
Timothy J. Baek committed
514
									if ($mobile) {
Timothy J. Baek's avatar
Timothy J. Baek committed
515
										showSidebar.set(false);
516
517
									}
								}}
518
519
520
521
								on:dblclick={() => {
									chatTitle = chat.title;
									chatTitleEditId = chat.id;
								}}
Timothy J. Baek's avatar
Timothy J. Baek committed
522
								draggable="false"
Timothy J. Baek's avatar
Timothy J. Baek committed
523
524
							>
								<div class=" flex self-center flex-1 w-full">
Timothy J. Baek's avatar
Timothy J. Baek committed
525
									<div class=" text-left self-center overflow-hidden w-full h-[20px]">
526
										{chat.title}
Timothy J. Baek's avatar
Timothy J. Baek committed
527
									</div>
528
								</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
529
530
							</a>
						{/if}
531

Timothy J. Baek's avatar
Timothy J. Baek committed
532
						<div
Timothy J. Baek's avatar
Timothy J. Baek committed
533
							class="
534

Timothy J. Baek's avatar
Timothy J. Baek committed
535
							{chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId
Timothy J. Baek's avatar
Timothy J. Baek committed
536
								? 'from-gray-200 dark:from-gray-900'
Timothy J. Baek's avatar
Timothy J. Baek committed
537
								: chat.id === selectedChatId
538
539
								? '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
540
								absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
541

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

Timothy J. Baek's avatar
Timothy J. Baek committed
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
									{#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
690
691
692
								</div>
							{/if}
						</div>
693
694
695
					</div>
				{/each}
			</div>
696
697
		</div>

698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
		<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') {
								showArchivedChats.set(true);
							}
						}}
					>
						<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;
Timothy J. Baek's avatar
Timothy J. Baek committed
715
							}}
716
						>
717
718
719
720
721
722
723
724
725
726
727
							<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}
728
			</div>
729
		</div>
730
731
	</div>

732
	<!-- <div
Timothy J. Baek's avatar
Timothy J. Baek committed
733
		id="sidebar-handle"
Timothy J. Baek's avatar
Timothy J. Baek committed
734
		class=" hidden md:fixed left-0 top-[50dvh] -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
735
	>
Jannik Streidl's avatar
Jannik Streidl committed
736
737
		<Tooltip
			placement="right"
Timothy J. Baek's avatar
Timothy J. Baek committed
738
			content={`${$showSidebar ? $i18n.t('Close') : $i18n.t('Open')} ${$i18n.t('sidebar')}`}
Jannik Streidl's avatar
Jannik Streidl committed
739
740
			touch={false}
		>
741
742
743
744
			<button
				id="sidebar-toggle-button"
				class=" group"
				on:click={() => {
Timothy J. Baek's avatar
Timothy J. Baek committed
745
					showSidebar.set(!$showSidebar);
746
747
748
				}}
				><span class="" data-state="closed"
					><div
749
						class="flex h-[72px] w-8 items-center justify-center opacity-50 group-hover:opacity-100 transition"
750
751
752
					>
						<div class="flex h-6 w-6 flex-col items-center">
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
753
								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {$showSidebar
754
755
756
757
									? 'group-hover:rotate-[15deg]'
									: 'group-hover:rotate-[-15deg]'}"
							/>
							<div
Timothy J. Baek's avatar
Timothy J. Baek committed
758
								class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {$showSidebar
759
760
761
762
									? 'group-hover:rotate-[-15deg]'
									: 'group-hover:rotate-[15deg]'}"
							/>
						</div>
763
					</div>
764
765
766
				</span>
			</button>
		</Tooltip>
767
	</div> -->
768
</div>
Timothy J. Baek's avatar
Timothy J. Baek committed
769
770

<style>
Timothy J. Baek's avatar
Timothy J. Baek committed
771
772
773
	.scrollbar-hidden:active::-webkit-scrollbar-thumb,
	.scrollbar-hidden:focus::-webkit-scrollbar-thumb,
	.scrollbar-hidden:hover::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
774
		visibility: visible;
Timothy J. Baek's avatar
Timothy J. Baek committed
775
	}
Timothy J. Baek's avatar
Timothy J. Baek committed
776
	.scrollbar-hidden::-webkit-scrollbar-thumb {
Timothy J. Baek's avatar
Timothy J. Baek committed
777
		visibility: hidden;
Timothy J. Baek's avatar
Timothy J. Baek committed
778
779
	}
</style>