Spaces:
Running
Running
File size: 3,188 Bytes
7086abd ee691dc 7086abd 8a39c72 7086abd 1a774d9 7086abd ee691dc 1a774d9 ee691dc 1a774d9 7086abd ee691dc 7086abd ee691dc 45dbaaf ee691dc 7086abd ee691dc 8a39c72 ee691dc 7086abd 8a39c72 7086abd 8a39c72 7086abd 8a39c72 7086abd 148b446 8a39c72 7086abd 1d2972a 7086abd |
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 |
<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 CarbonExport from "~icons/carbon/export";
import { switchTheme } from "$lib/switchTheme";
import { PUBLIC_ORIGIN } from "$env/static/public";
const dispatch = createEventDispatcher<{
shareConversation: { id: string; title: string };
deleteConversation: string;
}>();
export let conversations: Array<{
id: string;
title: string;
}> = [];
</script>
<div class="flex-none max-sm:pt-0 sticky top-0 px-3 py-3.5 flex items-center justify-between">
<a class="rounded-xl font-semibold text-lg flex items-center" href="{PUBLIC_ORIGIN}{base}/">
<Logo classNames="mr-1 text-3xl" />
HuggingChat
</a>
<a
href={base || "/"}
class="flex border py-0.5 px-2 rounded-lg shadow-sm hover:shadow-none bg-white dark:bg-gray-700 dark:border-gray-600 text-center"
>
New Chat
</a>
</div>
<div
class="flex flex-col overflow-y-auto scrollbar-custom px-3 pb-3 pt-2 gap-1 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
>
{#each conversations as conv}
<a
data-sveltekit-noscroll
href="{base}/conversation/{conv.id}"
class="group pl-3 pr-2 h-11 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="flex md:hidden md:group-hover:flex w-5 h-5 items-center justify-center rounded"
title="Share conversation"
on:click|preventDefault={() =>
dispatch("shareConversation", { id: conv.id, title: conv.title })}
>
<CarbonExport class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 text-xs" />
</button>
<button
type="button"
class="flex md:hidden md:group-hover:flex w-5 h-5 items-center justify-center rounded"
title="Delete conversation"
on:click|preventDefault={() => dispatch("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 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl mt-0.5 text-sm"
>
<button
on:click={switchTheme}
type="button"
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
>
Theme
</button>
<a
href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
target="_blank"
rel="noreferrer"
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
>
Feedback
</a>
<a
href="{base}/privacy"
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
>
About & Privacy
</a>
</div>
|