From 80cbdbb535293bba4ad6dba122a289952901bd9e Mon Sep 17 00:00:00 2001
From: silentoplayz <jacwoo21@outlook.com>
Date: Tue, 30 Sep 2025 16:09:55 -0400
Subject: [PATCH] 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      | 23 +++++++++++++-------
 src/lib/components/chat/Overview/Flow.svelte | 22 ++++++++++++++++---
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/chat/Overview.svelte b/src/lib/components/chat/Overview.svelte
index 7dbebee1d9..5e0dd46be1 100644
--- a/src/lib/components/chat/Overview.svelte
+++ b/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);
diff --git a/src/lib/components/chat/Overview/Flow.svelte b/src/lib/components/chat/Overview/Flow.svelte
index f7ff307567..4eeb497f63 100644
--- a/src/lib/components/chat/Overview/Flow.svelte
+++ b/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>
\ No newline at end of file