File size: 3,636 Bytes
4dae10f
 
 
 
 
f91689a
4dae10f
3a63ab8
c67d260
4dae10f
9bebf7e
4dae10f
 
 
 
82fcab7
3a63ab8
4dae10f
 
 
 
 
 
 
 
b2387f6
 
f91689a
 
9bebf7e
4dae10f
 
b2387f6
4dae10f
 
 
 
f91689a
b2387f6
f91689a
3a63ab8
4dae10f
 
 
b2387f6
4dae10f
 
 
 
 
 
 
 
b2387f6
3a63ab8
 
 
 
 
 
4dae10f
3a63ab8
4dae10f
 
 
 
b2387f6
4dae10f
 
 
 
b2387f6
4dae10f
 
 
 
 
f91689a
82fcab7
f91689a
4dae10f
 
 
b2387f6
4dae10f
 
 
82fcab7
 
 
 
 
 
 
4dae10f
 
c67d260
 
b2387f6
4dae10f
c67d260
4dae10f
 
97b65ef
b2387f6
4dae10f
b8d13ba
4dae10f
 
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
<script lang="ts">
	import { base } from "$app/paths";
	import { page } from "$app/stores";
	import { createEventDispatcher } from "svelte";

	import Logo from "$lib/components/icons/Logo.svelte";
	import CarbonTrashCan from "~icons/carbon/trash-can";
	import CarbonEdit from "~icons/carbon/edit";

	import { switchTheme } from "$lib/switchTheme";
	import { PUBLIC_ORIGIN } from "$env/static/public";

	const dispatch = createEventDispatcher<{
		shareConversation: { id: string; title: string };
		deleteConversation: string;
		clickSettings: void;
		editConversationTitle: { id: string; title: string };
	}>();

	export let conversations: Array<{
		id: string;
		title: string;
	}> = [];
</script>

<div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
	<a class="flex items-center rounded-xl text-lg font-semibold" href="{PUBLIC_ORIGIN}{base}/">
		<Logo classNames="mr-1 text-3xl" />
		HuggingChat
	</a>
	<a
		href={base || "/"}
		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700"
	>
		New Chat
	</a>
</div>
<div
	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50  px-3 pb-3 pt-2 dark:from-gray-800/30"
>
	{#each conversations as conv (conv.id)}
		<a
			data-sveltekit-noscroll
			href="{base}/conversation/{conv.id}"
			class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 {conv.id ===
			$page.params.id
				? 'bg-gray-100 dark:bg-gray-700'
				: ''}"
		>
			<div class="flex-1 truncate">{conv.title}</div>

			<button
				type="button"
				class="flex h-5 w-5 items-center justify-center rounded md:hidden  md:group-hover:flex"
				title="Edit conversation title"
				on:click|preventDefault={() => {
					const newTitle = prompt("Edit this conversation title:", conv.title);
					if (!newTitle) return;
					dispatch("editConversationTitle", { id: conv.id, title: newTitle });
				}}
			>
				<CarbonEdit class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
			</button>

			<button
				type="button"
				class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
				title="Delete conversation"
				on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
			>
				<CarbonTrashCan
					class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300"
				/>
			</button>
		</a>
	{/each}
</div>
<div
	class="mt-0.5 flex flex-col gap-1 rounded-r-xl bg-gradient-to-l from-gray-50 p-3 text-sm dark:from-gray-800/30"
>
	<button
		on:click={switchTheme}
		type="button"
		class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
	>
		Theme
	</button>
	<button
		on:click={() => dispatch("clickSettings")}
		type="button"
		class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
	>
		Settings
	</button>
	<a
		href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
		target="_blank"
		rel="noreferrer"
		class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
	>
		Feedback
	</a>
	<a
		href="{base}/privacy"
		class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
	>
		About & Privacy
	</a>
</div>