improve UI responsive

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

@@ -5,7 +5,6 @@
 	import { Button } from '$lib/components/ui/button';
 	import { viewState } from '$lib/state/view.svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
-	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
 
 	const { fitView, zoomIn, zoomOut, getZoom } = useSvelteFlow();
 
@@ -18,7 +17,10 @@
 	}
 </script>
 
-<Panel position="bottom-center" class="flex items-center justify-start gap-2 p-1 lg:p-2">
+<Panel
+	position="bottom-center"
+	class="flex items-center justify-start gap-2 p-1 max-lg:hidden lg:p-2"
+>
 	<div
 		class="inline-flex w-fit flex-row gap-0.5 rounded-lg border border-border bg-background/30 p-1 backdrop-blur-sm dark:bg-gray-900/30"
 	>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Contrast, CreditCard, Monitor, Moon, RefreshCcw, Sun } from '@lucide/svelte';
-	import { Panel, useSvelteFlow } from '@xyflow/svelte';
+	import { Contrast, CreditCard, Monitor, Moon, Sun } from '@lucide/svelte';
+	import { Panel } from '@xyflow/svelte';
 	import { setMode } from 'mode-watcher';
 
 	import { Button } from '$lib/components/ui/button';
@@ -11,35 +11,12 @@
 	import BillingManagementModal from '$lib/components/billing/BillingManagementModal.svelte';
 	import InstructionsModal from './InstructionsModal.svelte';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
-
-	let { canReset }: { canReset: boolean } = $props();
-
-	const { getNodes } = useSvelteFlow();
-	let showResetButton = $derived(getNodes().length > 1);
-
-	function handleReset() {
-		if (!canReset) return;
-		const ok = confirm('Are you sure you want to reset the flow?');
-		if (ok) {
-			location.reload();
-		}
-	}
 </script>
 
-<Panel position="top-right" class="flex items-center justify-end gap-2 p-1 lg:p-2">
-	{#if showResetButton}
-		<Button
-			variant="outline"
-			size={breakpointsState.isMobile ? 'icon-sm' : 'default'}
-			class=""
-			onclick={handleReset}
-		>
-			<RefreshCcw />
-			{#if !breakpointsState.isMobile}
-				Start new chat
-			{/if}
-		</Button>
-	{/if}
+<Panel
+	position={breakpointsState.isMobile ? 'bottom-right' : 'top-right'}
+	class="flex items-center justify-end gap-2 p-1 lg:p-2"
+>
 	<InstructionsModal />
 	<DropdownMenu.Root>
 		<DropdownMenu.Trigger>

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { RefreshCcw } from '@lucide/svelte';
+	import { Panel, useSvelteFlow } from '@xyflow/svelte';
+
+	import { Button } from '$lib/components/ui/button';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+
+	const { getNodes } = useSvelteFlow();
+	let showResetButton = $derived(getNodes().length > 1);
+
+	function handleReset() {
+		const ok = confirm('Are you sure you want to reset the flow?');
+		if (ok) {
+			location.reload();
+		}
+	}
+</script>
+
+<Panel
+	position={breakpointsState.isMobile ? 'bottom-left' : 'top-left'}
+	class="flex items-center justify-end gap-2 p-1 lg:p-2"
+>
+	{#if showResetButton}
+		<Button
+			variant="outline"
+			size={breakpointsState.isMobile ? 'icon-sm' : 'default'}
+			class=""
+			onclick={handleReset}
+		>
+			<RefreshCcw />
+			{#if !breakpointsState.isMobile}
+				Clear flow
+			{/if}
+		</Button>
+	{/if}
+</Panel>

src/routes/+page.svelte

@@ -7,7 +7,8 @@
 		BackgroundVariant,
 		PanOnScrollMode,
 		type Node,
-		type Edge
+		type Edge,
+		Panel
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
 	import { mode } from 'mode-watcher';
@@ -23,6 +24,7 @@
 	import ContextMenuComponent from '$lib/components/flow/actions/ContextMenu.svelte';
 	import { getNodesAssociatedWith } from '$lib/helpers/getNodesAssociatedWith';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+	import ResetPanel from '$lib/components/flow/actions/ResetPanel.svelte';
 
 	const nodeTypes = {
 		user: User,
@@ -134,8 +136,8 @@
 			patternColor={mode.current === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'}
 			class="bg-background!"
 		/>
-		<!-- <PanelLeftMenu /> -->
-		<PanelRightActions canReset={nodes.length > 1} />
+		<ResetPanel />
+		<PanelRightActions />
 		<PanelCanvasActions />
 	</SvelteFlow>
 </div>