refac

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

@@ -13,6 +13,8 @@
 	} from '@xyflow/svelte';
 	import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
 	import Bars3BottomLeft from '$lib/components/icons/Bars3BottomLeft.svelte';
+	import AlignVertical from '$lib/components/icons/AlignVertical.svelte';
+	import AlignHorizontal from '$lib/components/icons/AlignHorizontal.svelte';
 
 	export let nodes;
 	export let nodeTypes;
@@ -42,11 +44,11 @@
 >
 	<Controls showLock={false}>
 		<ControlButton on:click={() => setLayoutDirection('vertical')} title="Vertical Layout">
-			<BarsArrowUp class="size-4" />
+			<AlignVertical className="size-4" />
 		</ControlButton>
 		<ControlButton on:click={() => setLayoutDirection('horizontal')} title="Horizontal Layout">
-			<Bars3BottomLeft class="size-4" />
+			<AlignHorizontal className="size-4" />
 		</ControlButton>
 	</Controls>
 	<Background variant={BackgroundVariant.Dots} />
-</SvelteFlow>
+</SvelteFlow>

src/lib/components/icons/AlignHorizontal.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke-width={strokeWidth}
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	><path d="M3 22L3 2" stroke-linecap="round" stroke-linejoin="round"></path><path
+		d="M21 22V2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path
+		d="M15 16H9C7.89543 16 7 15.1046 7 14V10C7 8.89543 7.89543 8 9 8H15C16.1046 8 17 8.89543 17 10V14C17 15.1046 16.1046 16 15 16Z"
+	></path></svg
+>

src/lib/components/icons/AlignVertical.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	class={className}
+	aria-hidden="true"
+	xmlns="http://www.w3.org/2000/svg"
+	stroke-width={strokeWidth}
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	><path d="M22 3L2 3" stroke-linecap="round" stroke-linejoin="round"></path><path
+		d="M22 21L2 21"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></path><path
+		d="M8 15V9C8 7.89543 8.89543 7 10 7H14C15.1046 7 16 7.89543 16 9V15C16 16.1046 15.1046 17 14 17H10C8.89543 17 8 16.1046 8 15Z"
+	></path></svg
+>