add new feature

src/lib/components/chat/Assistant.svelte

@@ -1,6 +1,16 @@
 <script lang="ts">
-	import { Handle, useNodesData, Position, type NodeProps } from '@xyflow/svelte';
-	import { Star } from '@lucide/svelte';
+	import {
+		Handle,
+		useNodesData,
+		Position,
+		type NodeProps,
+		useNodes,
+		useEdges,
+		type Edge,
+		type Node
+	} from '@xyflow/svelte';
+	import { MessageCirclePlus, Star } from '@lucide/svelte';
+	import { mode } from 'mode-watcher';
 
 	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
 	import { Button } from '$lib/components/ui/button';
@@ -11,8 +21,11 @@
 
 	// svelte-ignore state_referenced_locally
 	const nodeData = useNodesData(id);
+	const { update: updateNodes } = useNodes();
+	const { update: updateEdges } = useEdges();
 
 	let selectedModel = $derived((nodeData.current?.data.selectedModel as ChatModel) ?? null);
+	let messages = $derived((nodeData.current?.data.messages as ChatMessage[]) ?? []);
 	let loading = $derived((nodeData.current?.data.loading as boolean) ?? false);
 	let message = $derived(
 		nodeData.current?.data.content
@@ -23,9 +36,80 @@
 				} as ChatMessage)
 			: null
 	);
+	let containerRef: HTMLDivElement | null = $state(null);
+	let selectedText = $state<string | null>(null);
+	let selectedTextPosition = $state<{ y: number } | null>(null);
+
+	$effect(() => {
+		document.addEventListener('selectionchange', handleTextSelectionChange);
+		return () => {
+			document.removeEventListener('selectionchange', handleTextSelectionChange);
+		};
+	});
+
+	function handleTextSelectionChange(e: Event) {
+		const selection = document.getSelection();
+		const text = selection?.toString();
+		if (!text || text.trim() === '') {
+			selectedText = null;
+			return;
+		}
+		if (containerRef?.contains(selection?.anchorNode as unknown as HTMLElement)) {
+			selectedText = text;
+			let rect = selection?.getRangeAt(0).getBoundingClientRect();
+			if (rect) {
+				selectedTextPosition = {
+					y: rect.top - containerRef.getBoundingClientRect().top
+				};
+			} else {
+				selectedTextPosition = {
+					y:
+						(selection?.anchorNode?.parentElement?.getBoundingClientRect().top ?? 0) -
+						containerRef.getBoundingClientRect().top
+				};
+			}
+		} else {
+			selectedText = null;
+		}
+	}
+
+	function handleAddFollowUpMessage(prompt: string) {
+		document.getSelection()?.removeAllRanges();
+		const newNodes: Node[] = [];
+		const newEdges: Edge[] = [];
+
+		const newNodeId = `user-follow-up-${crypto.randomUUID()}`;
+		const newNode: Node = {
+			id: newNodeId,
+			type: 'user-follow-up',
+			position: {
+				x: 0,
+				y: 0
+			},
+			data: {
+				role: 'user',
+				prompt,
+				selectedModels: [selectedModel],
+				messages: [...messages, message]
+			}
+		};
+		const newEdge: Edge = {
+			id: `edge-${crypto.randomUUID()}`,
+			source: id,
+			target: newNodeId,
+			sourceHandle: 's-right',
+			targetHandle: 't-left'
+		};
+		newNodes.push(newNode);
+		newEdges.push(newEdge);
+		updateNodes((currentNodes) => [...currentNodes, ...newNodes]);
+		updateEdges((currentEdges) => [...currentEdges, ...newEdges]);
+	}
 </script>
 
-<article class="w-full rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]">
+<article
+	class="relative w-full rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
+>
 	<div class="nodrag pointer-events-auto cursor-auto">
 		<header class="mb-3 flex items-center justify-between">
 			<div class="flex flex-wrap items-center gap-1">
@@ -49,13 +133,26 @@
 			</div>
 		{/if}
 		{#if message}
-			<Message {message} provider={selectedModel.provider} />
+			<div bind:this={containerRef}>
+				<Message {message} provider={selectedModel.provider} />
+			</div>
 		{/if}
 	</div>
+	<Button
+		variant={mode.current === 'dark' ? 'default' : 'outline'}
+		size="icon-lg"
+		class="absolute top-0 right-0 z-50 translate-x-1/2 {selectedText
+			? 'opacity-100'
+			: 'pointer-events-none opacity-0'}"
+		style="top: {(selectedTextPosition?.y ?? 0) + 50}px;"
+		onclick={() => selectedText && handleAddFollowUpMessage(selectedText)}
+	>
+		<MessageCirclePlus class="size-5" />
+	</Button>
 </article>
-<Handle type="target" position={Position.Top} class="opacity-0" />
-<Handle type="target" position={Position.Left} class="opacity-0" />
-<Handle type="target" position={Position.Right} class="opacity-0" />
-<Handle type="source" position={Position.Bottom} class="opacity-0" />
-<Handle type="source" position={Position.Left} class="opacity-0" />
-<Handle type="source" position={Position.Right} class="opacity-0" />
+<Handle type="target" id="t-top" class="opacity-0" position={Position.Top} />
+<Handle type="target" id="t-left" class="opacity-0" position={Position.Left} />
+<Handle type="target" id="t-right" class="opacity-0" position={Position.Right} />
+<Handle type="source" id="s-bottom" class="opacity-0" position={Position.Bottom} />
+<Handle type="source" id="s-left" class="opacity-0" position={Position.Left} />
+<Handle type="source" id="s-right" class="opacity-0" position={Position.Right} />

src/lib/components/chat/Message.svelte

@@ -38,7 +38,7 @@
 	{:else}
 		<SvelteMarkdown source={message.content} renderers={renderers as any} />
 		{#if message.timestamp}
-			<p class="flex items-center gap-1 text-xs text-muted-foreground/70">
+			<p class="flex items-center gap-1 text-xs text-muted-foreground/70 select-none">
 				Generated in
 				{message.timestamp / 1000}s using
 				<span class="flex items-center gap-1 rounded bg-muted py-0.5 pr-1 pl-0.5">

src/lib/components/chat/User.svelte

@@ -11,7 +11,6 @@
 		type Node,
 		useSvelteFlow
 	} from '@xyflow/svelte';
-	import { mode } from 'mode-watcher';
 
 	import type { ChatModel, ChatMessage } from '$lib/helpers/types';
 	import { Button } from '$lib/components/ui/button';
@@ -21,11 +20,11 @@
 	import SettingsModel from '$lib/components/model/SettingsModel.svelte';
 	import { MAX_MODELS_PER_NODE, MAX_SUGGESTIONS } from '$lib';
 	import { SUGGESTIONS_PROMPT } from '$lib/consts';
-	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 	import { authState } from '$lib/state/auth.svelte';
 	import { signinModalState } from '$lib/state/signin-modal.svelte';
+	import { onMount } from 'svelte';
 
-	let { id, selected }: NodeProps = $props();
+	let { id }: NodeProps = $props();
 
 	// svelte-ignore state_referenced_locally
 	const nodeData = useNodesData(id);
@@ -96,7 +95,8 @@
 					role: 'assistant',
 					selectedModel: m,
 					content: '',
-					loading: true
+					loading: true,
+					messages
 				}
 			};
 			const newEdge: Edge = {
@@ -169,7 +169,7 @@
 						const end = Date.now();
 						updateNodeData(
 							node.id,
-							{ ...node.data, content, timestamp: end - start, loading: false },
+							{ ...node.data, content, timestamp: end - start, loading: false, messages },
 							{ replace: true }
 						);
 						break;
@@ -191,9 +191,18 @@
 			? messages[messages.length - 1]
 			: null
 	);
+
+	onMount(() => {
+		if (prompt.trim() !== '' && prompt) {
+			handleTriggerAction();
+			prompt = '';
+		}
+	});
 </script>
 
-<article class="w-full rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]">
+<article
+	class="relative z-10 w-full rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
+>
 	<div class="nodrag pointer-events-auto cursor-auto">
 		<header class="mb-3 flex items-center justify-between">
 			<div class="flex flex-wrap items-center gap-1">
@@ -280,7 +289,7 @@
 						<div></div>
 					{/if}
 					<Button
-						variant={mode.current === 'dark' ? 'default' : 'default'}
+						variant="default"
 						size="icon-sm"
 						class=""
 						disabled={!selectedModels.length || !prompt || loading}
@@ -297,9 +306,9 @@
 		{/if}
 	</div>
 </article>
-<Handle type="target" position={Position.Top} class="opacity-0" />
-<Handle type="target" position={Position.Left} class="opacity-0" />
-<Handle type="target" position={Position.Right} class="opacity-0" />
-<Handle type="source" position={Position.Bottom} class="opacity-0" />
-<Handle type="source" position={Position.Left} class="opacity-0" />
-<Handle type="source" position={Position.Right} class="opacity-0" />
+<Handle type="target" id="t-top" position={Position.Top} class="opacity-0" />
+<Handle type="target" id="t-left" position={Position.Left} class="opacity-0" />
+<Handle type="target" id="t-right" position={Position.Right} class="opacity-0" />
+<Handle type="source" id="s-bottom" position={Position.Bottom} class="opacity-0" />
+<Handle type="source" id="s-left" position={Position.Left} class="opacity-0" />
+<Handle type="source" id="s-right" position={Position.Right} class="opacity-0" />

src/lib/components/flow/FitViewOnResize.svelte

@@ -125,12 +125,19 @@
 		if (fitViewTimer) clearTimeout(fitViewTimer);
 	});
 
+	/** Whether a child should be placed to the right of its parent (same row) */
+	function isSideChild(nodeId: string, nodeMap: Map<string, Node>): boolean {
+		const node = nodeMap.get(nodeId);
+		return node?.type === 'user-follow-up';
+	}
+
 	/**
 	 * Custom tree layout:
 	 * - Root nodes (no incoming edge) on the same horizontal row
 	 * - Siblings (children sharing the same source) on the same horizontal row
-	 * - Parent centered above its children
-	 * - Works recursively for any depth (user -> assistant -> user -> ...)
+	 * - user-follow-up nodes placed to the RIGHT of their source (same row)
+	 * - Parent centered above its below-children
+	 * - Works recursively for any depth
 	 */
 	function computeLayout(nodes: Node[], edges: Edge[]): Node[] {
 		const nodeMap = new Map(nodes.map((n) => [n.id, n]));
@@ -148,7 +155,7 @@
 		// Root nodes: no incoming edge
 		const rootNodes = nodes.filter((n) => !hasParent.has(n.id));
 
-		// 1) Compute the horizontal space each subtree needs
+		// 1) Compute the horizontal space each subtree needs (ignoring side children)
 		const subtreeWidths = new Map<string, number>();
 
 		function computeSubtreeWidth(nodeId: string): number {
@@ -157,16 +164,19 @@
 			const nodeWidth = node ? getMeasuredWidth(node) : DEFAULT_WIDTH;
 			const children = childrenBySource.get(nodeId) ?? [];
 
-			if (children.length === 0) {
+			// Side children are independent — they don't affect the main tree width
+			const belowChildIds = children.filter((id) => !isSideChild(id, nodeMap));
+
+			if (belowChildIds.length === 0) {
 				subtreeWidths.set(nodeId, nodeWidth);
 				return nodeWidth;
 			}
 
-			const childrenTotalWidth =
-				children.reduce((sum, childId) => sum + computeSubtreeWidth(childId), 0) +
-				(children.length - 1) * H_SPACING;
+			const belowChildrenWidth =
+				belowChildIds.reduce((sum, cid) => sum + computeSubtreeWidth(cid), 0) +
+				(belowChildIds.length - 1) * H_SPACING;
 
-			const width = Math.max(nodeWidth, childrenTotalWidth);
+			const width = Math.max(nodeWidth, belowChildrenWidth);
 			subtreeWidths.set(nodeId, width);
 			return width;
 		}
@@ -174,8 +184,14 @@
 		for (const root of rootNodes) {
 			computeSubtreeWidth(root.id);
 		}
+		// Also compute widths for side-child subtrees (they need it for their own below-children)
+		for (const node of nodes) {
+			if (!subtreeWidths.has(node.id)) {
+				computeSubtreeWidth(node.id);
+			}
+		}
 
-		// 2) Place nodes top-down: each node is centered in its allocated subtree width
+		// 2) Place nodes top-down
 		const positions = new Map<string, { x: number; y: number }>();
 
 		function placeNode(nodeId: string, allocatedX: number, y: number) {
@@ -183,28 +199,39 @@
 			const nodeWidth = node ? getMeasuredWidth(node) : DEFAULT_WIDTH;
 			const nodeHeight = node ? getMeasuredHeight(node) : DEFAULT_HEIGHT;
 			const stWidth = subtreeWidths.get(nodeId) ?? nodeWidth;
+			const children = childrenBySource.get(nodeId) ?? [];
+
+			const sideChildIds = children.filter((id) => isSideChild(id, nodeMap));
+			const belowChildIds = children.filter((id) => !isSideChild(id, nodeMap));
 
 			// Center node within its allocated subtree space
 			const x = allocatedX + (stWidth - nodeWidth) / 2;
 			positions.set(nodeId, { x, y });
 
-			const children = childrenBySource.get(nodeId) ?? [];
-			if (children.length === 0) return;
-
-			const childY = y + nodeHeight + V_SPACING;
-			let childX = allocatedX;
+			// Place below-children under this node
+			if (belowChildIds.length > 0) {
+				const childY = y + nodeHeight + V_SPACING;
+				let childX = allocatedX;
+				for (const childId of belowChildIds) {
+					const childStWidth = subtreeWidths.get(childId) ?? DEFAULT_WIDTH;
+					placeNode(childId, childX, childY);
+					childX += childStWidth + H_SPACING;
+				}
+			}
 
-			for (const childId of children) {
-				const childStWidth = subtreeWidths.get(childId) ?? DEFAULT_WIDTH;
-				placeNode(childId, childX, childY);
-				childX += childStWidth + H_SPACING;
+			// Place side-children to the right of this node, same Y (independent of main tree)
+			let sideX = x + nodeWidth + H_SPACING;
+			for (const sideId of sideChildIds) {
+				placeNode(sideId, sideX, y);
+				const sideNode = nodeMap.get(sideId);
+				const sideWidth = sideNode ? getMeasuredWidth(sideNode) : DEFAULT_WIDTH;
+				sideX += sideWidth + H_SPACING;
 			}
 		}
 
 		// Place root nodes side by side
 		let rootX = 0;
 		for (const root of rootNodes) {
-			computeSubtreeWidth(root.id);
 			placeNode(root.id, rootX, 0);
 			rootX += (subtreeWidths.get(root.id) ?? DEFAULT_WIDTH) + H_SPACING;
 		}

src/lib/helpers/resolve-collisions.ts

@@ -0,0 +1,106 @@
+import type { Node } from '@xyflow/svelte';
+
+export type CollisionAlgorithmOptions = {
+	maxIterations: number;
+	overlapThreshold: number;
+	margin: number;
+};
+
+export type CollisionAlgorithm = (nodes: Node[], options: CollisionAlgorithmOptions) => Node[];
+
+type Box = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	moved: boolean;
+	node: Node;
+};
+
+function getBoxesFromNodes(nodes: Node[], margin = 0): Box[] {
+	const boxes: Box[] = new Array(nodes.length);
+
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		boxes[i] = {
+			x: node.position.x - margin,
+			y: node.position.y - margin,
+			width: (node.width ?? node.measured?.width ?? 0) + margin * 2,
+			height: (node.height ?? node.measured?.height ?? 0) + margin * 2,
+			node,
+			moved: false
+		};
+	}
+
+	return boxes;
+}
+
+export const resolveCollisions: CollisionAlgorithm = (
+	nodes,
+	{ maxIterations = 50, overlapThreshold = 0.5, margin = 0 }
+) => {
+	const boxes = getBoxesFromNodes(nodes, margin);
+
+	for (let iter = 0; iter <= maxIterations; iter++) {
+		let moved = false;
+
+		for (let i = 0; i < boxes.length; i++) {
+			for (let j = i + 1; j < boxes.length; j++) {
+				const A = boxes[i];
+				const B = boxes[j];
+
+				// Calculate center positions
+				const centerAX = A.x + A.width * 0.5;
+				const centerAY = A.y + A.height * 0.5;
+				const centerBX = B.x + B.width * 0.5;
+				const centerBY = B.y + B.height * 0.5;
+
+				// Calculate distance between centers
+				const dx = centerAX - centerBX;
+				const dy = centerAY - centerBY;
+
+				// Calculate overlap along each axis
+				const px = (A.width + B.width) * 0.5 - Math.abs(dx);
+				const py = (A.height + B.height) * 0.5 - Math.abs(dy);
+
+				// Check if there's significant overlap
+				if (px > overlapThreshold && py > overlapThreshold) {
+					A.moved = B.moved = moved = true;
+					// Resolve along the smallest overlap axis
+					if (px < py) {
+						// Move along x-axis
+						const sx = dx > 0 ? 1 : -1;
+						const moveAmount = (px / 2) * sx;
+						A.x += moveAmount;
+						B.x -= moveAmount;
+					} else {
+						// Move along y-axis
+						const sy = dy > 0 ? 1 : -1;
+						const moveAmount = (py / 2) * sy;
+						A.y += moveAmount;
+						B.y -= moveAmount;
+					}
+				}
+			}
+		}
+		// Early exit if no overlaps were found
+		if (!moved) {
+			break;
+		}
+	}
+
+	const newNodes = boxes.map((box) => {
+		if (box.moved) {
+			return {
+				...box.node,
+				position: {
+					x: box.x + margin,
+					y: box.y + margin
+				}
+			};
+		}
+		return box.node;
+	});
+
+	return newNodes;
+};

src/routes/+page.svelte

@@ -23,10 +23,12 @@
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 	import PanelCanvasActions from '$lib/components/flow/actions/PanelCanvasActions.svelte';
 	import { viewState } from '$lib/state/view.svelte';
+	import { resolveCollisions } from '$lib/helpers/resolve-collisions';
 
 	const nodeTypes = {
 		user: User,
-		assistant: Assistant
+		assistant: Assistant,
+		'user-follow-up': User
 	};
 
 	function getInitialNodes() {
@@ -37,7 +39,7 @@
 				position: { x: 0, y: 0 },
 				data: {
 					isFirstNode: true,
-					selectedModels: modelsState.models.slice(0, MAX_DEFAULT_MODELS) as ChatModel[]
+					selectedModels: modelsState.models.slice(1, 1 + MAX_DEFAULT_MODELS) as ChatModel[]
 				}
 			}
 		];
@@ -56,7 +58,7 @@
 		// }
 	}}
 />
-
+<!-- todo: resolve collissions when new nodes are added, maybe do it in the fitviewonresize component -->
 <div class="h-screen w-screen overflow-hidden">
 	<SvelteFlow
 		bind:nodes
@@ -81,6 +83,13 @@
 		panOnDrag={viewState.draggable}
 		onbeforedelete={() => Promise.resolve(false)}
 		defaultEdgeOptions={{ type: 'smoothstep' }}
+		onnodedragstop={() => {
+			nodes = resolveCollisions(nodes, {
+				maxIterations: Infinity,
+				overlapThreshold: 0.5,
+				margin: 15
+			});
+		}}
 		class="bg-background!"
 	>
 		<FitViewOnResize {initialNodes} />