Spaces:
Sleeping
Sleeping
<script lang="ts"> | |
import { onDestroy } from "svelte"; | |
import { goto, invalidate } from "$app/navigation"; | |
import { page } from "$app/stores"; | |
import "../styles/main.css"; | |
import { base } from "$app/paths"; | |
import { PUBLIC_ORIGIN } from "$env/static/public"; | |
import { shareConversation } from "$lib/shareConversation"; | |
import { UrlDependency } from "$lib/types/UrlDependency"; | |
import { error } from "$lib/stores/errors"; | |
import MobileNav from "$lib/components/MobileNav.svelte"; | |
import NavMenu from "$lib/components/NavMenu.svelte"; | |
import Logo from "$lib/components/icons/Logo.svelte"; | |
import Modal from "$lib/components/Modal.svelte"; | |
import Toast from "$lib/components/Toast.svelte"; | |
import EthicsModal from "$lib/components/EthicsModal.svelte"; | |
export let data; | |
let isNavOpen = false; | |
let errorToastTimeout: NodeJS.Timeout; | |
let currentError: string | null; | |
async function onError() { | |
// If a new different error comes, wait for the current error to hide first | |
if ($error && currentError && $error !== currentError) { | |
clearTimeout(errorToastTimeout); | |
currentError = null; | |
await new Promise((resolve) => setTimeout(resolve, 300)); | |
} | |
currentError = $error; | |
errorToastTimeout = setTimeout(() => { | |
$error = null; | |
currentError = null; | |
}, 3000); | |
} | |
async function deleteConversation(id: string) { | |
try { | |
const res = await fetch(`${base}/conversation/${id}`, { | |
method: "DELETE", | |
headers: { | |
"Content-Type": "application/json", | |
}, | |
}); | |
if (!res.ok) { | |
$error = "Error while deleting conversation, try again."; | |
return; | |
} | |
if ($page.params.id !== id) { | |
await invalidate(UrlDependency.ConversationList); | |
} else { | |
await goto(base || "/", { invalidateAll: true }); | |
} | |
} catch (err) { | |
console.error(err); | |
$error = String(err); | |
} | |
} | |
onDestroy(() => { | |
clearTimeout(errorToastTimeout); | |
}); | |
$: if ($error) onError(); | |
</script> | |
<svelte:head> | |
<meta name="description" content="The first open source alternative to ChatGPT. 💪" /> | |
<meta name="twitter:card" content="summary_large_image" /> | |
<meta name="twitter:site" content="@huggingface" /> | |
<meta property="og:title" content="HuggingChat" /> | |
<meta property="og:type" content="website" /> | |
<meta property="og:url" content="{PUBLIC_ORIGIN || $page.url.origin}{base}" /> | |
<meta property="og:image" content="{PUBLIC_ORIGIN || $page.url.origin}{base}/thumbnail.png" /> | |
</svelte:head> | |
<div | |
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd dark:text-gray-300 md:grid-cols-[280px,1fr] md:grid-rows-[1fr]" | |
> | |
<MobileNav | |
isOpen={isNavOpen} | |
on:toggle={(ev) => (isNavOpen = ev.detail)} | |
title={data.conversations.find((conv) => conv.id === $page.params.id)?.title} | |
> | |
<NavMenu | |
conversations={data.conversations} | |
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)} | |
on:deleteConversation={(ev) => deleteConversation(ev.detail)} | |
/> | |
</MobileNav> | |
<nav class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] max-md:hidden"> | |
<NavMenu | |
conversations={data.conversations} | |
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)} | |
on:deleteConversation={(ev) => deleteConversation(ev.detail)} | |
/> | |
</nav> | |
{#if currentError} | |
<Toast message={currentError} /> | |
{/if} | |
<EthicsModal /> | |
<slot /> | |
</div> | |