File size: 3,875 Bytes
cbb996c 1a14c61 8811ee0 1b66f8d b7167b0 1b66f8d fc15a4c 1a14c61 cbb996c 1b66f8d ac94c73 b7167b0 1b66f8d ac94c73 1b66f8d b7167b0 7482c01 1b66f8d b7167b0 fc15a4c 1a14c61 b7167b0 1a14c61 b7167b0 1a14c61 b7167b0 fc15a4c 1a14c61 b7167b0 fc15a4c b7167b0 fc15a4c 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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<script lang="ts">
import { goto, invalidateAll } 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';
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(`/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(`/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 invalidateAll();
} else {
await goto(`/`, { 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="/"
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-2">
{#each data.conversations as conv}
<a
href="/conversation/{conv.id}"
class="pl-3 pr-2 h-12 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 {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-6 h-6 items-center justify-center hidden group-hover:flex hover:bg-gray-100"
title="Share conversation"
on:click|preventDefault={() => shareConversation(conv.id, conv.title)}
>
<CarbonExport class="text-gray-400 hover:text-gray-600" />
</button>
<button
type="button"
class="w-6 h-6 items-center justify-center hidden group-hover:flex hover:bg-gray-100"
title="Delete conversation"
on:click|preventDefault={() => deleteConversation(conv.id)}
>
<CarbonTrashCan class="text-gray-400 hover:text-gray-600" />
</button>
</a>
{/each}
</div>
<div class="flex flex-col p-3 gap-2">
<button
on:click={switchTheme}
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="/"
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>
|