chat-ui / src /routes /+layout.svelte
coyotte508's picture
coyotte508 HF staff
♻️ Better invalidation mechanism (#72)
831f161 unverified
raw
history blame
4.46 kB
<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 { 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 shareConversation(id: string, title: string) {
try {
const res = await fetch(`${base}/conversation/${id}/share`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
});
if (!res.ok) {
alert("Error while sharing conversation: " + (await res.text()));
return;
}
const { url } = await res.json();
if (navigator.share) {
navigator.share({
title,
text: "Share this chat with others",
url,
});
} else {
prompt("Share this link with your friends:", url);
}
} catch (err) {
console.error(err);
alert("Error while sharing conversation: " + err);
}
}
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>