File size: 3,851 Bytes
cbb996c
831f161
5da61b4
 
 
1b66f8d
5da61b4
 
 
9405a81
831f161
b7167b0
1b66f8d
 
 
5da61b4
 
 
 
1b66f8d
5da61b4
 
1b66f8d
 
fc15a4c
1a14c61
 
67867a9
5da61b4
1a14c61
5da61b4
 
1a14c61
 
 
5da61b4
1a14c61
 
 
 
831f161
1a14c61
1bba900
1a14c61
 
 
5da61b4
1a14c61
 
cbb996c
 
1b66f8d
 
 
 
 
 
 
ac94c73
690db3e
b7167b0
1b66f8d
ac94c73
 
1b66f8d
17dba7d
1b66f8d
 
741a217
67867a9
dea9425
7482c01
 
 
1b66f8d
3e9f86e
fc15a4c
1a14c61
 
17dba7d
b7167b0
 
1a14c61
17dba7d
 
 
1a14c61
b7167b0
fc15a4c
1a14c61
17dba7d
b7167b0
 
fc15a4c
17dba7d
 
 
fc15a4c
1b66f8d
 
 
 
 
 
67867a9
1b66f8d
 
 
 
e6085e5
 
 
 
 
 
1b66f8d
67867a9
1b66f8d
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<script lang="ts">
	import { goto, invalidate } from "$app/navigation";
	import { page } from "$app/stores";
	import "../styles/main.css";
	import type { LayoutData } from "./$types";

	import CarbonTrashCan from "~icons/carbon/trash-can";
	import CarbonExport from "~icons/carbon/export";
	import { base } from "$app/paths";
	import { shareConversation } from "$lib/shareConversation";
	import { UrlDependency } from "$lib/types/UrlDependency";

	export let data: LayoutData;

	function switchTheme() {
		const { classList } = document.querySelector("html") as HTMLElement;
		if (classList.contains("dark")) {
			classList.remove("dark");
			localStorage.theme = "light";
		} else {
			classList.add("dark");
			localStorage.theme = "dark";
		}
	}

	async function deleteConversation(id: string) {
		try {
			const res = await fetch(`${base}/conversation/${id}`, {
				method: "DELETE",
				headers: {
					"Content-Type": "application/json",
				},
			});

			if (!res.ok) {
				alert("Error while deleting conversation: " + (await res.text()));
				return;
			}

			if ($page.params.id !== id) {
				await invalidate(UrlDependency.ConversationList);
			} else {
				await goto(base || "/", { invalidateAll: true });
			}
		} catch (err) {
			console.error(err);
			alert("Error while deleting conversation: " + err);
		}
	}
</script>

<div
	class="grid h-screen w-screen md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
>
	<nav
		class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
	>
		<div class="flex-none sticky top-0 p-3 flex flex-col">
			<a
				href={base || "/"}
				class="border px-12 py-2.5 rounded-lg shadow bg-white dark:bg-gray-700 dark:border-gray-600 text-center"
			>
				New Chat
			</a>
		</div>
		<div class="flex flex-col overflow-y-auto p-3 -mt-3 gap-1">
			{#each data.conversations as conv}
				<a
					data-sveltekit-noscroll
					href="{base}/conversation/{conv.id}"
					class="pl-3 pr-2 h-11 group rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1.5 {conv.id ===
					$page.params.id
						? 'bg-gray-100 dark:bg-gray-700'
						: ''}"
				>
					<div class="flex-1 truncate">{conv.title}</div>

					<button
						type="button"
						class="w-5 h-5 items-center justify-center hidden group-hover:flex rounded"
						title="Share conversation"
						on:click|preventDefault={() => shareConversation(conv.id, conv.title)}
					>
						<CarbonExport
							class="text-gray-400 hover:text-gray-500  dark:hover:text-gray-300 text-xs"
						/>
					</button>

					<button
						type="button"
						class="w-5 h-5 items-center justify-center hidden group-hover:flex rounded"
						title="Delete conversation"
						on:click|preventDefault={() => deleteConversation(conv.id)}
					>
						<CarbonTrashCan
							class="text-gray-400 hover:text-gray-500  dark:hover:text-gray-300 text-xs"
						/>
					</button>
				</a>
			{/each}
		</div>
		<div class="flex flex-col p-3 gap-2">
			<button
				on:click={switchTheme}
				type="button"
				class="text-left flex items-center first-letter:capitalize truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
			>
				Theme
			</button>
			<a
				href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
				class="text-left flex items-center first-letter:capitalize truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
			>
				Community feedback
			</a>
			<a
				href={base}
				class="truncate py-3 px-3 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
			>
				Settings
			</a>
		</div>
	</nav>
	<slot />
</div>