src/lib/components/flow/actions/PanelLeftMenu.svelte

<script lang="ts">
	import { Menu, MessageCircle } from '@lucide/svelte';
	import { Panel } from '@xyflow/svelte';

	import { Button, buttonVariants } from '$lib/components/ui/button';
	import * as Sheet from '$lib/components/ui/sheet/index.js';
	import HFLogo from '$lib/assets/hf-logo.svg';
</script>

<Sheet.Root>
	<Sheet.Trigger>
		<Panel position="top-left" class="flex items-center justify-end gap-2 p-1 lg:p-2">
			<Button variant="outline" size="icon">
				<Menu />
			</Button>
		</Panel>
	</Sheet.Trigger>
	<Sheet.Content side="left">
		<Sheet.Header>
			<Sheet.Title>
				<p class="flex items-center justify-start gap-2.5">
					<img src={HFLogo} alt="Hugging Face" class="size-5" />
					Playground - Hugging Face
				</p>
			</Sheet.Title>
		</Sheet.Header>
		<div class="p-5">
			<div class="space-y-1.5 text-center text-muted-foreground">
				<div
					class="mx-auto flex size-8 items-center justify-center rounded-full bg-linear-to-b from-blue-500/20 to-blue-500/5 text-blue-600"
				>
					<MessageCircle class="size-4" />
				</div>
				<p class="text-sm text-muted-foreground">No conversations yet.</p>
			</div>
		</div>
	</Sheet.Content>
</Sheet.Root>