duplication

src/routes/canvas/chat-node.svelte

@@ -11,6 +11,7 @@
 	import IconAdd from "~icons/lucide/plus";
 	import IconX from "~icons/lucide/x";
 	import IconStop from "~icons/lucide/square";
+	import IconCopy from "~icons/lucide/copy";
 	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 	import ModelPicker from "./model-picker.svelte";
 	import ProviderPicker from "./provider-picker.svelte";
@@ -209,37 +210,83 @@
 		</div>
 	{/if}
 
-	<!-- Add node button -->
-	<button
-		class="abs-x-center absolute -bottom-4 z-10 flex items-center gap-1.5 rounded-full bg-black
-		px-4 py-2 text-xs font-medium text-white opacity-0
-		shadow-sm transition-all group-hover:opacity-100 hover:scale-[1.02]
-		hover:bg-gray-900 focus:ring-2 focus:ring-gray-900/20 focus:outline-none active:scale-[0.98]"
-		onclick={() => {
-			const curr = getNode(id);
-			const newNode: Node = {
-				id: crypto.randomUUID(),
-				position: { x: curr?.position.x ?? 100, y: (curr?.position.y ?? 0) + size.height + 40 },
-				data: { query: "", response: "", modelId: data.modelId, provider: data.provider },
-				type: "chat",
-				width: undefined,
-				height: undefined,
-			};
-			nodes.current.push(newNode);
-			const edge: Edge = {
-				id: crypto.randomUUID(),
-				source: curr!.id,
-				target: newNode.id,
-				animated: true,
-				label: "",
-				data: {},
-			};
-			edges.current.push(edge);
-		}}
-	>
-		<IconAdd class="h-3 w-3" />
-		Add Node
-	</button>
+	<!-- Action buttons -->
+	<div class="abs-x-center absolute -bottom-4 z-10 flex gap-2 opacity-0 transition-all group-hover:opacity-100">
+		<!-- Duplicate button -->
+		<button
+			class="flex items-center gap-1.5 rounded-full bg-gray-700
+			px-4 py-2 text-xs font-medium text-white
+			shadow-sm transition-all hover:scale-[1.02]
+			hover:bg-gray-600 focus:ring-2 focus:ring-gray-600/20 focus:outline-none active:scale-[0.98]"
+			onclick={() => {
+				const curr = getNode(id);
+				const newNodeId = crypto.randomUUID();
+				const newNode: Node = {
+					id: newNodeId,
+					position: { x: (curr?.position.x ?? 100) + 50, y: (curr?.position.y ?? 0) + 50 },
+					data: {
+						query: data.query,
+						response: data.response,
+						modelId: data.modelId,
+						provider: data.provider,
+					},
+					type: "chat",
+					width: undefined,
+					height: undefined,
+				};
+				nodes.current.push(newNode);
+
+				// Copy only incoming edges (parent connections)
+				const incomingEdges = edges.current.filter(edge => edge.target === id);
+				for (const edge of incomingEdges) {
+					const newEdge: Edge = {
+						id: crypto.randomUUID(),
+						source: edge.source,
+						target: newNodeId,
+						animated: edge.animated,
+						label: edge.label,
+						data: edge.data,
+					};
+					edges.current.push(newEdge);
+				}
+			}}
+		>
+			<IconCopy class="h-3 w-3" />
+			Duplicate
+		</button>
+
+		<!-- Add node button -->
+		<button
+			class="flex items-center gap-1.5 rounded-full bg-black
+			px-4 py-2 text-xs font-medium text-white
+			shadow-sm transition-all hover:scale-[1.02]
+			hover:bg-gray-900 focus:ring-2 focus:ring-gray-900/20 focus:outline-none active:scale-[0.98]"
+			onclick={() => {
+				const curr = getNode(id);
+				const newNode: Node = {
+					id: crypto.randomUUID(),
+					position: { x: curr?.position.x ?? 100, y: (curr?.position.y ?? 0) + size.height + 40 },
+					data: { query: "", response: "", modelId: data.modelId, provider: data.provider },
+					type: "chat",
+					width: undefined,
+					height: undefined,
+				};
+				nodes.current.push(newNode);
+				const edge: Edge = {
+					id: crypto.randomUUID(),
+					source: curr!.id,
+					target: newNode.id,
+					animated: true,
+					label: "",
+					data: {},
+				};
+				edges.current.push(edge);
+			}}
+		>
+			<IconAdd class="h-3 w-3" />
+			Add Node
+		</button>
+	</div>
 
 	<!-- Close button -->
 	<button