refac: only animate active edges

src/app.css

@@ -161,6 +161,15 @@ input[type='number'] {
 	background-color: transparent !important;
 }
 
+.svelte-flow__edge > path {
+	stroke-width: 0.5;
+}
+
+.svelte-flow__edge.animated > path {
+	stroke-width: 2;
+	@apply stroke-gray-600 dark:stroke-gray-500;
+}
+
 .bg-gray-950-90 {
 	background-color: rgba(var(--color-gray-950, #0d0d0d), 0.9);
 }

src/lib/components/chat/Overview.svelte

@@ -92,9 +92,9 @@
 					source: parentId,
 					target: pos.id,
 					selectable: false,
-
+					class: ' dark:fill-gray-300 fill-gray-300',
 					type: 'smoothstep',
-					animated: true
+					animated: history.currentId === id || recurseCheckChild(id, history.currentId)
 				});
 			}
 		});
@@ -103,6 +103,14 @@
 		await nodes.set([...nodeList]);
 	};
 
+	const recurseCheckChild = (nodeId, currentId) => {
+		const node = history.messages[nodeId];
+		return (
+			node.childrenIds &&
+			node.childrenIds.some((id) => id === currentId || recurseCheckChild(id, currentId))
+		);
+	};
+
 	onMount(() => {
 		nodesInitialized.subscribe(async (initialized) => {
 			if (initialized) {