feat: Implement toggling for vertical and horizontal flow layouts

This commit introduces the necessary logic and UI controls to allow users to switch the Flow component layout between vertical and horizontal orientations.

*   **`Flow.svelte` Refactoring:**
    *   Updates logic for calculating level offsets and node positions to consistently respect the current flow orientation.
    *   Adds a control panel using `<Controls>` and `<SwitchButton>` components.
    *   Provides user interface elements to easily switch the flow layout between horizontal and vertical orientations.

src/lib/components/chat/Overview.svelte

@@ -29,12 +29,14 @@
 	const nodes = writable([]);
 	const edges = writable([]);
 
+	let layoutDirection = 'vertical';
+
 	const nodeTypes = {
 		custom: CustomNode
 	};
 
 	$: if (history) {
-		drawFlow();
+		drawFlow(layoutDirection);
 	}
 
 	$: if (history && history.currentId) {
@@ -51,11 +53,11 @@
 		selectedMessageId = null;
 	};
 
-	const drawFlow = async () => {
+	const drawFlow = async (direction) => {
 		const nodeList = [];
 		const edgeList = [];
-		const levelOffset = 150; // Vertical spacing between layers
-		const siblingOffset = 250; // Horizontal spacing between nodes at the same layer
+		const levelOffset = direction === 'vertical' ? 150 : 300;
+		const siblingOffset = direction === 'vertical' ? 250 : 150;
 
 		// Map to keep track of node positions at each level
 		let positionMap = new Map();
@@ -84,9 +86,8 @@
 		// Adjust positions based on siblings count to centralize vertical spacing
 		Object.keys(history.messages).forEach((id) => {
 			const pos = positionMap.get(id);
-			const xOffset = pos.position * siblingOffset;
-			const y = pos.level * levelOffset;
-			const x = xOffset;
+			const x = direction === 'vertical' ? pos.position * siblingOffset : pos.level * levelOffset;
+			const y = direction === 'vertical' ? pos.level * levelOffset : pos.position * siblingOffset;
 
 			nodeList.push({
 				id: pos.id,
@@ -126,8 +127,13 @@
 		);
 	};
 
+	const setLayoutDirection = (direction) => {
+		layoutDirection = direction;
+		drawFlow(layoutDirection);
+	};
+
 	onMount(() => {
-		drawFlow();
+		drawFlow(layoutDirection);
 
 		nodesInitialized.subscribe(async (initialized) => {
 			if (initialized) {
@@ -188,6 +194,7 @@
 			{nodes}
 			{nodeTypes}
 			{edges}
+			{setLayoutDirection}
 			on:nodeclick={(e) => {
 				console.log(e.detail.node.data);
 				dispatch('nodeclick', e.detail);

src/lib/components/chat/Overview/Flow.svelte

@@ -4,11 +4,20 @@
 	const dispatch = createEventDispatcher();
 
 	import { theme } from '$lib/stores';
-	import { Background, Controls, SvelteFlow, BackgroundVariant } from '@xyflow/svelte';
+	import {
+		Background,
+		Controls,
+		SvelteFlow,
+		BackgroundVariant,
+		ControlButton
+	} from '@xyflow/svelte';
+	import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
+	import Bars3BottomLeft from '$lib/components/icons/Bars3BottomLeft.svelte';
 
 	export let nodes;
 	export let nodeTypes;
 	export let edges;
+	export let setLayoutDirection;
 </script>
 
 <SvelteFlow
@@ -31,6 +40,13 @@
 		console.log('Flow initialized');
 	}}
 >
-	<Controls showLock={false} />
+	<Controls showLock={false}>
+		<ControlButton on:click={() => setLayoutDirection('vertical')} title="Vertical Layout">
+			<BarsArrowUp class="size-4" />
+		</ControlButton>
+		<ControlButton on:click={() => setLayoutDirection('horizontal')} title="Horizontal Layout">
+			<Bars3BottomLeft class="size-4" />
+		</ControlButton>
+	</Controls>
 	<Background variant={BackgroundVariant.Dots} />
-</SvelteFlow>
+</SvelteFlow>