src/lib/components/NavMenu.svelte

<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}/">
        <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="SVGRepo_bgCarrier" stroke-width="0"/>
          <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
          <g id="SVGRepo_iconCarrier">
            <path fill="#004cff" fill-rule="evenodd" clip-rule="evenodd" d="M20.5433 6.7039C21 7.80653 21 9.20435 21 12C21 14.7956 21 16.1935 20.5433 17.2961C19.9343 18.7663 18.7663 19.9343 17.2961 20.5433C16.1935 21 14.7956 21 12 21H9C6.17157 21 4.75736 21 3.87868 20.1213C3 19.2426 3 17.8284 3 15V12C3 9.20435 3 7.80653 3.45672 6.7039C4.06569 5.23373 5.23373 4.06569 6.7039 3.45672C7.80653 3 9.20435 3 12 3C14.7956 3 16.1935 3 17.2961 3.45672C18.7663 4.06569 19.9343 5.23373 20.5433 6.7039ZM8 9.99966C8 9.44738 8.44772 8.99966 9 8.99966H15C15.5523 8.99966 16 9.44738 16 9.99966C16 10.5519 15.5523 10.9997 15 10.9997H9C8.44772 10.9997 8 10.5519 8 9.99966ZM8 13.9997C8 13.4474 8.44772 12.9997 9 12.9997H12C12.5523 12.9997 13 13.4474 13 13.9997C13 14.5519 12.5523 14.9997 12 14.9997H9C8.44772 14.9997 8 14.5519 8 13.9997Z" />
          </g>
        </svg>
		BetterChat
	</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>