add manual controls

package.json

@@ -50,6 +50,7 @@
 		"elkjs": "^0.11.0",
 		"lint": "^0.8.19",
 		"mode-watcher": "^1.1.0",
+		"svelte-highlight": "^7.9.0",
 		"svelte-markdown": "^0.4.1",
 		"tailwind-merge": "^3.4.0"
 	}

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       mode-watcher:
         specifier: ^1.1.0
         version: 1.1.0(svelte@5.50.1)
+      svelte-highlight:
+        specifier: ^7.9.0
+        version: 7.9.0
       svelte-markdown:
         specifier: ^0.4.1
         version: 0.4.1(svelte@5.50.1)
@@ -1322,6 +1325,10 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   http-signature@1.2.0:
     resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
     engines: {node: '>=0.8', npm: '>=1.3.7'}
@@ -1989,6 +1996,9 @@ packages:
       svelte:
         optional: true
 
+  svelte-highlight@7.9.0:
+    resolution: {integrity: sha512-226LBTtvTnM2L2JkQq8mZeKEeMfPLYyta7VxZatFT4UPX5zdHEerKeMTvrfbxm7MVTWc7TPThsNoVdhWC177KQ==}
+
   svelte-markdown@0.4.1:
     resolution: {integrity: sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==}
     peerDependencies:
@@ -3281,6 +3291,8 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  highlight.js@11.11.1: {}
+
   http-signature@1.2.0:
     dependencies:
       assert-plus: 1.0.0
@@ -3880,6 +3892,10 @@ snapshots:
     optionalDependencies:
       svelte: 5.50.1
 
+  svelte-highlight@7.9.0:
+    dependencies:
+      highlight.js: 11.11.1
+
   svelte-markdown@0.4.1(svelte@5.50.1):
     dependencies:
       '@types/marked': 5.0.2

src/lib/components/chat/Assistant.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <article class="w-full rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]">
-	<div class="nodrag cursor-auto">
+	<div class="nodrag pointer-events-auto cursor-auto">
 		<header class="mb-3 flex items-center justify-between">
 			<div class="flex flex-wrap items-center gap-1">
 				<div

src/lib/components/chat/Message.svelte

@@ -28,7 +28,9 @@
 	};
 </script>
 
-<main class="cursor-auto p-1 text-lg leading-relaxed text-accent-foreground select-auto">
+<main
+	class="pointer-events-auto cursor-auto p-1 text-lg leading-relaxed text-accent-foreground select-text"
+>
 	{#if message?.role === 'user'}
 		<p class="">
 			{message.content}

src/lib/components/chat/User.svelte

@@ -23,13 +23,13 @@
 	import { SUGGESTIONS_PROMPT } from '$lib/consts';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
-	let { id }: NodeProps = $props();
+	let { id, selected }: NodeProps = $props();
 
 	// svelte-ignore state_referenced_locally
 	const nodeData = useNodesData(id);
 	const { update: updateNodes } = useNodes();
 	const { update: updateEdges } = useEdges();
-	const { fitView, updateNodeData } = useSvelteFlow();
+	const { updateNodeData } = useSvelteFlow();
 
 	let selectedModels = $derived<ChatModel[]>(
 		(nodeData.current?.data.selectedModels as ChatModel[]) ?? []
@@ -185,7 +185,7 @@
 </script>
 
 <article class="w-full rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]">
-	<div class="nodrag cursor-auto">
+	<div class="nodrag pointer-events-auto cursor-auto">
 		<header class="mb-3 flex items-center justify-between">
 			<div class="flex flex-wrap items-center gap-1">
 				{#each selectedModels as model}

src/lib/components/chat/markdown/Code.svelte

@@ -1,4 +1,9 @@
 <script lang="ts">
+	import Button from '$lib/components/ui/button/button.svelte';
+	import { Copy } from '@lucide/svelte';
+	import { HighlightAuto } from 'svelte-highlight';
+	import 'svelte-highlight/styles/github.css';
+
 	let { lang, text }: { lang?: string; text: string } = $props();
 </script>
 
@@ -8,7 +13,14 @@
 			<span class="font-mono text-[11px] text-muted-foreground">{lang}</span>
 		</div>
 	{/if}
-	<pre class="overflow-x-auto p-3"><code
-			class="font-mono text-[13px] leading-relaxed text-foreground/90">{text}</code
-		></pre>
+	<div class="group relative">
+		<HighlightAuto code={text} class="font-mono text-[13px] leading-relaxed" />
+		<Button
+			variant="outline"
+			size="icon-xs"
+			class="absolute top-2 right-2 opacity-0 group-hover:opacity-100"
+		>
+			<Copy />
+		</Button>
+	</div>
 </div>

src/lib/components/flow/FitViewOnResize.svelte

@@ -4,6 +4,7 @@
 	import { useNodes, useEdges } from '@xyflow/svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+	import { viewState } from '$lib/state/view.svelte';
 
 	let { initialNodes }: { initialNodes: Node[] } = $props();
 
@@ -19,6 +20,45 @@
 
 	let lastLayoutKey = $state<string | null>(null);
 
+	const FIT_VIEW_THROTTLE_MS = 500;
+	let fitViewTimer: ReturnType<typeof setTimeout> | null = null;
+	let lastFitViewTime = 0;
+
+	function throttledFitView() {
+		if (viewState.freeView) return;
+
+		const now = Date.now();
+		const elapsed = now - lastFitViewTime;
+
+		if (fitViewTimer) {
+			clearTimeout(fitViewTimer);
+			fitViewTimer = null;
+		}
+
+		if (elapsed >= FIT_VIEW_THROTTLE_MS) {
+			lastFitViewTime = now;
+			fitView({
+				maxZoom: 1,
+				minZoom: breakpointsState.isMobile ? 1 : 0.7,
+				interpolate: 'smooth',
+				duration: 250
+			});
+		} else {
+			fitViewTimer = setTimeout(() => {
+				lastFitViewTime = Date.now();
+				fitViewTimer = null;
+				if (!viewState.freeView) {
+					fitView({
+						maxZoom: 1,
+						minZoom: breakpointsState.isMobile ? 1 : 0.7,
+						interpolate: 'smooth',
+						duration: 250
+					});
+				}
+			}, FIT_VIEW_THROTTLE_MS - elapsed);
+		}
+	}
+
 	/** Get the actual measured height of a node, or fallback */
 	function getMeasuredHeight(node: Node): number {
 		return node.measured?.height ?? DEFAULT_HEIGHT;
@@ -67,6 +107,7 @@
 	});
 
 	function handleWindowResize() {
+		if (viewState.freeView) return;
 		fitView({
 			maxZoom: 1,
 			minZoom: breakpointsState.isMobile ? 1 : 0.8,
@@ -81,6 +122,7 @@
 
 	onDestroy(() => {
 		window.removeEventListener('resize', handleWindowResize);
+		if (fitViewTimer) clearTimeout(fitViewTimer);
 	});
 
 	/**
@@ -197,11 +239,6 @@
 			);
 		}
 
-		fitView({
-			maxZoom: 1,
-			minZoom: breakpointsState.isMobile ? 1 : 0.8,
-			interpolate: 'smooth',
-			duration: 250
-		});
+		throttledFitView();
 	}
 </script>

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { Maximize, Lock, LockOpen, Minus, Plus } from '@lucide/svelte';
+	import { Panel } from '@xyflow/svelte';
+
+	import { Button } from '$lib/components/ui/button';
+	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+	import { viewState } from '$lib/state/view.svelte';
+	import { useSvelteFlow } from '@xyflow/svelte';
+	import HFLogo from '$lib/assets/hf-logo.svg';
+	import { Separator } from '$lib/components/ui/separator';
+
+	const { fitView, zoomIn, zoomOut, getZoom, getViewport } = useSvelteFlow();
+</script>
+
+<Panel position="bottom-left" class="space-y-2 p-1 lg:p-2">
+	<div
+		class="inline-flex w-fit flex-col gap-0.5 rounded-md border border-border bg-background p-0.5"
+	>
+		<Button
+			variant="ghost"
+			size="icon-xs"
+			onclick={() => zoomIn({ duration: 200 })}
+			disabled={getZoom() >= 1}
+		>
+			<Plus />
+		</Button>
+		<Button
+			variant="ghost"
+			size="icon-xs"
+			onclick={() => zoomOut({ duration: 200 })}
+			disabled={getZoom() <= 0.7}
+		>
+			<Minus />
+		</Button>
+		<Button
+			variant="ghost"
+			size="icon-xs"
+			onclick={() =>
+				fitView({
+					maxZoom: 1,
+					minZoom: breakpointsState.isMobile ? 1 : 0.7,
+					interpolate: 'smooth',
+					duration: 250
+				})}
+		>
+			<Maximize />
+		</Button>
+		<Separator />
+		<Button
+			variant="ghost"
+			size="icon-xs"
+			onclick={() => (viewState.freeView = !viewState.freeView)}
+		>
+			{#if viewState.freeView}
+				<Lock class="fill-transparent!" />
+			{:else}
+				<LockOpen class="fill-transparent!" />
+			{/if}
+		</Button>
+	</div>
+	<div
+		class="flex items-center justify-center gap-1.5 rounded-lg border border-border bg-background py-1.5 pr-3.5 pl-2.5 shadow-xs"
+	>
+		<img src={HFLogo} alt="HF Logo" class="size-5 lg:size-7" />
+		<p class="text-xs text-accent-foreground">Hugging Face Playground</p>
+	</div>
+</Panel>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Cog, Contrast, Monitor, Moon, RefreshCcw, Sun } from '@lucide/svelte';
+	import { Cog, Contrast, Monitor, Moon, Move, RefreshCcw, Sun } from '@lucide/svelte';
 	import { Panel } from '@xyflow/svelte';
 	import { setMode } from 'mode-watcher';
 
@@ -18,7 +18,7 @@
 	}
 </script>
 
-<Panel position="top-right" class="flex items-center justify-end gap-2 p-1 lg:p-3">
+<Panel position="top-right" class="flex items-center justify-end gap-2 p-1 lg:p-2">
 	<Button variant="outline" class="" onclick={handleReset}>
 		<RefreshCcw />
 		Start new chat

src/lib/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+	bind:ref
+	data-slot="checkbox"
+	class={cn(
+		'peer flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
+		className
+	)}
+	bind:checked
+	bind:indeterminate
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
+			{/if}
+		</div>
+	{/snippet}
+</CheckboxPrimitive.Root>

src/lib/components/ui/checkbox/index.ts

@@ -0,0 +1,6 @@
+import Root from "./checkbox.svelte";
+export {
+	Root,
+	//
+	Root as Checkbox,
+};

src/lib/state/view.svelte.ts

@@ -0,0 +1,3 @@
+export const viewState = $state({
+	freeView: false
+});

src/routes/+page.svelte

@@ -3,10 +3,11 @@
 		SvelteFlow,
 		Background,
 		MiniMap,
-		Panel,
 		BackgroundVariant,
+		PanOnScrollMode,
 		type Node,
-		type Edge
+		type Edge,
+		useSvelteFlow
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
 	import { mode } from 'mode-watcher';
@@ -15,12 +16,12 @@
 	import { tokenModalState } from '$lib/state/token-modal.svelte';
 	import User from '$lib/components/chat/User.svelte';
 	import Assistant from '$lib/components/chat/Assistant.svelte';
-	import HFLogo from '$lib/assets/hf-logo.svg';
 	import type { ChatModel } from '$lib/helpers/types';
 	import FitViewOnResize from '$lib/components/flow/FitViewOnResize.svelte';
 	import PanelRightActions from '$lib/components/flow/actions/PanelRightActions.svelte';
 	import { MAX_DEFAULT_MODELS } from '$lib';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+	import PanelCanvasActions from '$lib/components/flow/actions/PanelCanvasActions.svelte';
 
 	const nodeTypes = {
 		user: User,
@@ -60,17 +61,21 @@
 		bind:nodes
 		bind:edges
 		{nodeTypes}
-		minZoom={0.8}
-		maxZoom={1.5}
+		minZoom={breakpointsState.isMobile ? 1 : 0.7}
+		maxZoom={breakpointsState.isMobile ? 1 : 1}
 		fitView
+		zoomOnScroll={false}
+		panOnScroll={true}
+		panOnScrollMode={PanOnScrollMode.Free}
 		colorMode={mode.current}
 		proOptions={{ hideAttribution: true }}
 		fitViewOptions={{
 			maxZoom: 1,
-			minZoom: breakpointsState.isMobile ? 1 : 0.8,
+			minZoom: breakpointsState.isMobile ? 1 : 0.7,
 			interpolate: 'smooth',
 			duration: 500
 		}}
+		onbeforedelete={() => Promise.resolve(false)}
 		defaultEdgeOptions={{ type: 'smoothstep' }}
 		class="bg-background!"
 	>
@@ -86,13 +91,23 @@
 			patternColor={mode.current === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'}
 			class="bg-background!"
 		/>
+		<!-- <Controls class="bottom-16! left-2.5! max-lg:hidden" showLock={false}>
+			<ControlButton onclick={() => (viewState.freeView = !viewState.freeView)}>
+				{#if viewState.freeView}
+					<Lock class="fill-transparent!" />
+				{:else}
+					<LockOpen class="fill-transparent!" />
+				{/if}
+			</ControlButton>
+		</Controls> -->
 		<PanelRightActions canReset={nodes.length > 1} />
-		<Panel
-			position="bottom-left"
-			class="flex items-center justify-center gap-1.5 rounded-lg border border-border bg-background py-1.5 pr-3.5 pl-2.5 shadow-xs"
-		>
-			<img src={HFLogo} alt="HF Logo" class="size-5 lg:size-7" />
-			<p class="text-xs text-accent-foreground">Hugging Face Playground</p>
-		</Panel>
+		<PanelCanvasActions />
+		<!-- <Panel position="bottom-right" class="p-1 max-lg:hidden lg:p-2 lg:pb-40">
+			<Button variant="outline" onclick={() => (viewState.freeView = !viewState.freeView)}>
+				<Checkbox checked={viewState.freeView} />
+				<Move />
+				Free view
+			</Button>
+		</Panel> -->
 	</SvelteFlow>
 </div>