try stuffs

src/lib/components/chat/Assistant.svelte

@@ -29,14 +29,15 @@
 	let loading = $derived((nodeData.current?.data.loading as boolean) ?? false);
 	let usage = $derived((nodeData.current?.data.usage as TokenUsage) ?? null);
 	let message = $derived(
-		nodeData.current?.data.content
+		nodeData.current?.data.content != null
 			? ({
 					role: 'assistant',
-					content: nodeData.current?.data.content,
+					content: String(nodeData.current?.data.content ?? ''),
 					timestamp: (nodeData.current?.data.timestamp as number) ?? 0
-				} as ChatMessage)
+				} as unknown as ChatMessage)
 			: null
 	);
+	let rowHeight = $derived((nodeData.current?.data.rowHeight as number) ?? null);
 	let containerRef: HTMLDivElement | null = $state(null);
 	let selectedText = $state<string | null>(null);
 	let selectedTextPosition = $state<{ y: number } | null>(null);
@@ -109,35 +110,38 @@
 </script>
 
 <article
-	class="relative w-full rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
+	class="relative flex w-full flex-col rounded-3xl border border-border bg-background p-5 shadow-lg/5 lg:w-[600px]"
+	style={rowHeight ? `min-height: ${rowHeight}px` : ''}
 >
-	<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">
-				<div
-					class="group relative inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-md border bg-background px-3 text-sm font-normal! text-gray-600 has-[>svg]:px-2.5 dark:border-input dark:bg-input/30 dark:text-gray-400"
-				>
-					<img
-						src={selectedModel.avatarUrl}
-						alt={selectedModel.modelName}
-						class="size-3.5 rounded-full"
-					/>
-					{selectedModel.modelName}
+	<div class="nodrag pointer-events-auto flex flex-1 cursor-auto flex-col justify-between">
+		<div>
+			<header class="mb-3 flex items-center justify-between">
+				<div class="flex flex-wrap items-center gap-1">
+					<div
+						class="group relative inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-md border bg-background px-3 text-sm font-normal! text-gray-600 has-[>svg]:px-2.5 dark:border-input dark:bg-input/30 dark:text-gray-400"
+					>
+						<img
+							src={selectedModel.avatarUrl}
+							alt={selectedModel.modelName}
+							class="size-3.5 rounded-full"
+						/>
+						{selectedModel.modelName}
+					</div>
 				</div>
-			</div>
-		</header>
+			</header>
 
-		{#if loading}
-			<div class="flex items-center justify-start gap-1">
-				<Spinner className="size-4!" />
-				<p class="text-sm text-muted-foreground/70">Reaching out to the AI...</p>
-			</div>
-		{/if}
-		{#if message}
-			<div bind:this={containerRef}>
-				<Message {message} />
-			</div>
-		{/if}
+			{#if loading}
+				<div class="flex items-center justify-start gap-1">
+					<Spinner className="size-4!" />
+					<p class="text-sm text-muted-foreground/70">Reaching out to the AI...</p>
+				</div>
+			{/if}
+			{#if message}
+				<div bind:this={containerRef}>
+					<Message {message} />
+				</div>
+			{/if}
+		</div>
 		{#if usage && !loading && message}
 			{@const provider = selectedModel.provider}
 			<p class="mt-3 border-t border-border pt-3 text-xs text-muted-foreground">

src/lib/components/chat/User.svelte

@@ -38,7 +38,6 @@
 	);
 	let messages = $derived((nodeData.current?.data.messages as ChatMessage[]) ?? []);
 	let isFirstNode = $derived((nodeData.current?.data.isFirstNode as boolean) ?? false);
-	let canDeleteWelcome = $derived((nodeData.current?.data.canDeleteWelcome as boolean) ?? false);
 
 	let prompt = $state.raw<string>((nodeData.current?.data.prompt as string) ?? '');
 	let loading = $state.raw<boolean>(false);
@@ -58,9 +57,6 @@
 				},
 				{ replace: true }
 			);
-			if (lastMessage) {
-				handleTriggerAction([model]);
-			}
 		}
 	}
 	function removeModel(model: ChatModel) {
@@ -116,121 +112,151 @@
 	}
 
 	async function handleTriggerAiCall(newNodes: Node[]) {
-		newNodes.forEach(async (node) => {
-			const model = node?.data?.selectedModel as ChatModel;
-			if (!model) return;
-			try {
-				const start = Date.now();
-				const response = await fetch('/api', {
-					method: 'POST',
-					body: JSON.stringify({
-						model: model.id,
-						provider: model.provider,
-						messages,
-						billingTo: authState.user?.billingOption ?? 'personal',
-						options: {
-							temperature: model.temperature,
-							max_tokens: model.max_tokens,
-							top_p: model.top_p
+		const results = await Promise.all(
+			newNodes.map(async (node) => {
+				const model = node?.data?.selectedModel as ChatModel;
+				if (!model) return;
+				try {
+					const start = Date.now();
+					const formattedMessages = messages.map((message) => {
+						if (message.role === 'user') {
+							return {
+								role: 'user',
+								content: message.content
+							};
+						} else {
+							const modelData = message[model.id];
+							const content =
+								typeof modelData === 'object' && modelData && 'content' in modelData
+									? modelData.content
+									: (Object.values(message).find(
+											(m) => typeof m === 'object' && m && 'content' in m
+										)?.content ?? '');
+							return {
+								role: 'assistant',
+								content
+							};
+						}
+					});
+					const response = await fetch('/api', {
+						method: 'POST',
+						body: JSON.stringify({
+							model: model.id,
+							provider: model.provider,
+							messages: formattedMessages,
+							billingTo: authState.user?.billingOption ?? 'personal',
+							options: {
+								temperature: model.temperature,
+								max_tokens: model.max_tokens,
+								top_p: model.top_p
+							}
+						}),
+						headers: {
+							Authorization: `Bearer ${authState.token ?? ''}`
 						}
-					}),
-					headers: {
-						Authorization: `Bearer ${authState.token ?? ''}`
+					});
+					if (!response.ok) {
+						const errorBody = await response.text().catch(() => response.statusText);
+						throw new Error(errorBody || response.statusText);
 					}
-				});
-				if (!response.ok) {
-					const errorBody = await response.text().catch(() => response.statusText);
-					throw new Error(errorBody || response.statusText);
-				}
-				if (!response.body) throw new Error('No response body');
+					if (!response.body) throw new Error('No response body');
 
-				let content = '';
-				let usage: TokenUsage | null = null;
+					let content = '';
+					let usage: TokenUsage | null = null;
 
-				const reader = response.body.getReader();
-				const decoder = new TextDecoder();
+					const reader = response.body.getReader();
+					const decoder = new TextDecoder();
 
-				while (true) {
-					const { done, value } = await reader.read();
-					if (done) {
-						if (content.includes('__ERROR__')) {
-							const errorMessage = content.split('__ERROR__').pop() ?? 'Unknown error';
-							throw new Error(errorMessage);
-						}
-						if (content.includes('__USAGE__')) {
-							const usageParts = content.split('__USAGE__');
-							const usageJson = usageParts.pop() ?? '';
-							content = usageParts.join('').trimEnd();
-							try {
-								usage = JSON.parse(usageJson) as TokenUsage;
-							} catch {
-								// ignore malformed usage JSON
+					while (true) {
+						const { done, value } = await reader.read();
+						if (done) {
+							if (content.includes('__ERROR__')) {
+								const errorMessage = content.split('__ERROR__').pop() ?? 'Unknown error';
+								throw new Error(errorMessage);
 							}
-						}
-						const newNodeId = `user-${crypto.randomUUID()}`;
-						const newNode: Node = {
-							id: newNodeId,
-							type: 'user',
-							position: {
-								x: 0,
-								y: 0
-							},
-							data: {
-								role: 'user',
-								messages: [...messages, { role: 'assistant', content }],
-								selectedModels: [model]
+							if (content.includes('__USAGE__')) {
+								const usageParts = content.split('__USAGE__');
+								const usageJson = usageParts.pop() ?? '';
+								content = usageParts.join('').trimEnd();
+								try {
+									usage = JSON.parse(usageJson) as TokenUsage;
+								} catch {
+									// ignore malformed usage JSON
+								}
 							}
-						};
-						const newEdge: Edge = {
-							id: `edge-${crypto.randomUUID()}`,
-							source: node.id,
-							target: newNodeId
-						};
-						updateNodes((currentNodes) => [...currentNodes, newNode]);
-						updateEdges((currentEdges) => [...currentEdges, newEdge]);
-						const end = Date.now();
-						updateNodeData(
-							node.id,
-							{
-								...node.data,
-								content,
-								timestamp: end - start,
-								loading: false,
-								messages,
-								usage
-							},
-							{ replace: true }
-						);
-						break;
-					}
+							const end = Date.now();
+							updateNodeData(
+								node.id,
+								{
+									...node.data,
+									content,
+									timestamp: end - start,
+									loading: false,
+									messages,
+									usage
+								},
+								{ replace: true }
+							);
+							return {
+								[model.id]: { content, timestamp: String(end - start) }
+							};
+						}
 
-					content += decoder.decode(value, { stream: true });
-					updateNodeData(node.id, { ...node.data, content, loading: false }, { replace: true });
-				}
-			} catch (error) {
-				const msg = error instanceof Error ? error.message : 'An unknown error occurred';
-				updateNodes((currentNodes) => currentNodes.filter((n) => n.id !== node.id));
-				updateEdges((currentEdges) => currentEdges.filter((e) => e.target !== node.id));
-				updateNodeData(
-					id,
-					{
-						...nodeData.current?.data,
-						messages
-					},
-					{ replace: true }
-				);
-				if (newNodes.length === 1) {
+						content += decoder.decode(value, { stream: true });
+						updateNodeData(node.id, { ...node.data, content, loading: false }, { replace: true });
+					}
+				} catch (error) {
+					const msg = error instanceof Error ? error.message : 'An unknown error occurred';
+					updateNodes((currentNodes) => currentNodes.filter((n) => n.id !== node.id));
+					updateEdges((currentEdges) => currentEdges.filter((e) => e.target !== node.id));
 					updateNodeData(
 						id,
-						{ ...nodeData.current?.data, messages: messages.slice(0, -1), prompt: 'hello world' },
+						{
+							...nodeData.current?.data,
+							messages
+						},
 						{ replace: true }
 					);
+					if (newNodes.length === 1) {
+						updateNodeData(
+							id,
+							{ ...nodeData.current?.data, messages: messages.slice(0, -1), prompt: 'hello world' },
+							{ replace: true }
+						);
+					}
+					errorMessage += `\n${msg}`;
+				} finally {
+					loading = false;
 				}
-				errorMessage += `\n${msg}`;
-			} finally {
-				loading = false;
+			})
+		);
+
+		const assistantMessage = results.reduce<ChatMessage>(
+			(acc, result) => (result ? { ...acc, ...result } : acc),
+			{ role: 'assistant' }
+		);
+
+		const newNodeId = `user-${crypto.randomUUID()}`;
+		const newNode: Node = {
+			id: newNodeId,
+			type: 'user',
+			position: {
+				x: 0,
+				y: 0
+			},
+			data: {
+				role: 'user',
+				selectedModels,
+				messages: [...messages, assistantMessage]
 			}
-		});
+		};
+		const newEdges: Edge[] = newNodes.map((node) => ({
+			id: `edge-${crypto.randomUUID()}`,
+			source: node.id,
+			target: newNodeId
+		}));
+		updateNodes((currentNodes) => [...currentNodes, newNode]);
+		updateEdges((currentEdges) => [...currentEdges, ...newEdges]);
 	}
 
 	let lastMessage = $derived(
@@ -242,7 +268,6 @@
 	function handlePromptInput(e: Event & { currentTarget: EventTarget & HTMLTextAreaElement }) {
 		const value = (e.target as HTMLTextAreaElement).value;
 		if (isFirstNode) {
-			// updateNodeData(id, { ...nodeData.current?.data, canDeleteWelcome: false }, { replace: true });
 			const welcomeNodeId = currentNodes.find((n) => n.type === 'welcome')?.id;
 			if (!welcomeNodeId) return;
 			if (value.trim() === '') {
@@ -289,7 +314,7 @@
 						>
 							<img src={model.avatarUrl} alt={model.modelName} class="size-3.5 rounded-full" />
 							{model.modelName}
-							{#if !lastMessage || model.isError}
+							{#if !lastMessage || model.isError || selectedModels.length > MAX_MODELS_PER_NODE}
 								<Button
 									variant="default"
 									size="icon-3xs"
@@ -306,7 +331,7 @@
 						</Button>
 					</SettingsModel>
 				{/each}
-				{#if selectedModels.length < MAX_MODELS_PER_NODE && !loading}
+				{#if !lastMessage && !loading}
 					<ComboBoxModels onSelect={addModel} excludeIds={selectedModels.map((m) => m.id)} />
 				{/if}
 			</div>

src/lib/components/chat/Welcome.svelte

@@ -24,10 +24,9 @@
 </script>
 
 {#if showWelcomeState}
-	<!-- should go to the top when fading out -->
 	<article
 		class="nodrag pointer-events-auto relative w-full cursor-auto text-center lg:w-[600px]"
-		transition:fly={{ duration: 300, y: -100 }}
+		transition:fly={{ duration: 300, y: -20 }}
 	>
 		<img src={HFLogo} alt="HF Logo" class="mx-auto size-14 lg:size-16" />
 		<h1 class="font-mono text-4xl font-bold xl:text-5xl">Welcome to the Playground</h1>

src/lib/components/flow/FitViewOnResize.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
+	import { onMount, onDestroy, tick } from 'svelte';
 	import type { Node, Edge } from '@xyflow/svelte';
 	import { useNodes, useEdges } from '@xyflow/svelte';
 	import { useSvelteFlow } from '@xyflow/svelte';
@@ -9,7 +9,7 @@
 	let { initialNodes }: { initialNodes: Node[] } = $props();
 
 	const DEFAULT_WIDTH = breakpointsState.isMobile ? 300 : 600;
-	const DEFAULT_HEIGHT = 200;
+	const DEFAULT_HEIGHT = 100;
 	const H_SPACING = 60;
 	const V_SPACING = 60;
 
@@ -18,7 +18,8 @@
 	const edgesStore = useEdges();
 
 	let lastLayoutKey = $state<string | null>(null);
-	let isFirstLayout = true;
+	let isFirstLayout = $state(true);
+	let lastDraggable = $state(viewState.draggable);
 
 	// ─── Helpers ────────────────────────────────────────────────────────
 
@@ -64,6 +65,23 @@
 		})()
 	);
 
+	// ─── Fit view helper (only when draggable) ──────────────────────────
+
+	function doFitView(opts?: { animate?: boolean; forceAnimate?: boolean }) {
+		if (!viewState.draggable) return;
+		const nonWelcome = nodesStore.current.filter((n) => !isWelcome(n)).map((n) => ({ id: n.id }));
+		if (nonWelcome.length === 0) return;
+		const shouldAnimate =
+			opts?.forceAnimate || (opts?.animate !== false && !isFirstLayout);
+		fitView({
+			maxZoom: breakpointsState.isMobile ? 1 : 1.15,
+			minZoom: breakpointsState.isMobile ? 1 : 0.7,
+			padding: 0.15,
+			...(shouldAnimate ? { interpolate: 'smooth' as const, duration: 250 } : {}),
+			nodes: nonWelcome
+		});
+	}
+
 	$effect(() => {
 		const key = layoutKey;
 		if (key === lastLayoutKey) return;
@@ -77,18 +95,22 @@
 		runLayout(ns, es);
 	});
 
+	// When draggable switches to true: fitView after DOM settles (no blink)
+	$effect(() => {
+		const draggable = viewState.draggable;
+		if (draggable === lastDraggable) return;
+		lastDraggable = draggable;
+		if (!draggable) return;
+		tick().then(() => {
+			requestAnimationFrame(() => doFitView({ forceAnimate: true }));
+		});
+	});
+
 	// ─── Window resize ─────────────────────────────────────────────────
 
 	function handleWindowResize() {
 		if (!viewState.draggable) return;
-		const nonWelcome = nodesStore.current.filter((n) => !isWelcome(n)).map((n) => ({ id: n.id }));
-		fitView({
-			maxZoom: 1,
-			minZoom: breakpointsState.isMobile ? 1 : 0.8,
-			interpolate: 'smooth',
-			duration: 500,
-			nodes: nonWelcome
-		});
+		doFitView({ animate: true });
 	}
 
 	onMount(() => window.addEventListener('resize', handleWindowResize));
@@ -100,17 +122,20 @@
 	//
 	// Each node's subtree is split into two non-overlapping horizontal zones:
 	//
-	//   Block A (left)  — the node itself, with its below-children stacked underneath.
+	//   Block A (left)  — user centered above assistants, shared user centered below.
 	//   Block B (right) — side-children (user-follow-up) and their full subtrees.
 	//
 	//   ┌──────────────Block A──────────────┐  ┌─────Block B─────┐
-	//   │         ┌────────────┐            │  │  ┌────────────┐ │
-	//   │         │   Parent   │            │  │  │  Side node │ │
-	//   │         └────────────┘            │  │  └────────────┘ │
-	//   │  ┌──────────┐  ┌──────────┐      │  │  ┌──────────┐   │
-	//   │  │ Child  A  │  │ Child  B │      │  │  │ Side sub │   │
-	//   │  └──────────┘  └──────────┘      │  │  └──────────┘   │
-	//   └───────────────────────────────────┘  └─────────────────┘
+	//   │            ┌────────┐             │  │  ┌────────────┐ │
+	//   │            │  USER  │             │  │  │  Side node │ │
+	//   │            └────────┘             │  │  └────────────┘ │
+	//   │  ┌──────────┐  ┌──────────┐       │  │  ┌──────────┐   │
+	//   │  │  ASS 1   │  │  ASS 2   │       │  │  │ Side sub │   │
+	//   │  └──────────┘  └──────────┘       │  │  └──────────┘   │
+	//   │            ┌────────┐             │  └─────────────────┘
+	//   │            │  USER  │             │
+	//   │            └────────┘             │
+	//   └───────────────────────────────────┘
 	//
 	// Phase 1 (bottom-up): compute the bounding-box extent of every subtree.
 	// Phase 2 (top-down):  assign positions, centering parents above children.
@@ -132,6 +157,7 @@
 
 		// Build parent → children adjacency from edges
 		const childrenOf = new Map<string, string[]>();
+		const parentsOf = new Map<string, string[]>();
 		const hasParent = new Set<string>();
 
 		for (const e of edges) {
@@ -139,6 +165,34 @@
 			const list = childrenOf.get(e.source) ?? [];
 			list.push(e.target);
 			childrenOf.set(e.source, list);
+			const parents = parentsOf.get(e.target) ?? [];
+			parents.push(e.source);
+			parentsOf.set(e.target, parents);
+		}
+
+		// Move shared children (user node with multiple assistant parents) to grandparent.
+		// They get placed centered below the assistants row.
+		const sharedBelowOf = new Map<string, string[]>();
+		for (const [childId, parents] of parentsOf) {
+			if (parents.length < 2) continue;
+			// All parents must share the same parent (grandparent)
+			const firstParent = parents[0];
+			const grandparentId = (parentsOf.get(firstParent) ?? [])[0];
+			if (!grandparentId || !parents.every((p) => (parentsOf.get(p) ?? []).includes(grandparentId)))
+				continue;
+			const gpChildren = childrenOf.get(grandparentId) ?? [];
+			if (!parents.every((p) => gpChildren.includes(p))) continue;
+			// Remove child from each parent
+			for (const p of parents) {
+				const list = childrenOf.get(p) ?? [];
+				childrenOf.set(
+					p,
+					list.filter((id) => id !== childId)
+				);
+			}
+			const list = sharedBelowOf.get(grandparentId) ?? [];
+			list.push(childId);
+			sharedBelowOf.set(grandparentId, list);
 		}
 
 		// Separate welcome nodes from the rest
@@ -159,6 +213,7 @@
 			const children = childrenOf.get(nodeId) ?? [];
 			const sideIds = children.filter((id) => isSideChild(id, nodeMap));
 			const belowIds = children.filter((id) => !isSideChild(id, nodeMap));
+			const sharedBelowIds = sharedBelowOf.get(nodeId) ?? [];
 
 			// Block A — node width vs. combined below-children width
 			let belowTotalW = 0;
@@ -171,8 +226,19 @@
 				belowMaxH = Math.max(belowMaxH, ext.height);
 			}
 
-			const blockAW = Math.max(nodeW, belowTotalW);
-			const blockAH = belowIds.length > 0 ? nodeH + V_SPACING + belowMaxH : nodeH;
+			// Shared children (e.g. user below assistants) go centered under the row
+			let sharedBelowW = 0;
+			let sharedBelowH = 0;
+			for (let i = 0; i < sharedBelowIds.length; i++) {
+				const ext = computeExtent(sharedBelowIds[i]);
+				if (i > 0) sharedBelowW += H_SPACING;
+				sharedBelowW += ext.width;
+				sharedBelowH = Math.max(sharedBelowH, ext.height);
+			}
+
+			const rowH = belowIds.length > 0 ? nodeH + V_SPACING + belowMaxH : nodeH;
+			const blockAW = Math.max(nodeW, belowTotalW, sharedBelowIds.length > 0 ? sharedBelowW : 0);
+			const blockAH = sharedBelowIds.length > 0 ? rowH + V_SPACING + sharedBelowH : rowH;
 
 			// Block B — side-children and their subtrees
 			let blockBW = 0;
@@ -202,6 +268,7 @@
 		// ── Phase 2: assign positions top-down ──────────────────────────
 
 		const positions = new Map<string, { x: number; y: number }>();
+		const rowHeightMap = new Map<string, number>();
 
 		function placeSubtree(nodeId: string, allocX: number, y: number) {
 			const node = nodeMap.get(nodeId);
@@ -220,7 +287,7 @@
 				y
 			});
 
-			// Place below-children, centered within Block A
+			// Place below-children (assistants), centered within Block A
 			if (belowIds.length > 0) {
 				let belowTotalW = 0;
 				for (let i = 0; i < belowIds.length; i++) {
@@ -228,6 +295,18 @@
 					belowTotalW += extents.get(belowIds[i])!.width;
 				}
 
+				const rowHeight = Math.max(
+					...belowIds.map((id) => {
+						const n = nodeMap.get(id);
+						return n ? getMeasuredHeight(n) : DEFAULT_HEIGHT;
+					})
+				);
+				for (const cid of belowIds) {
+					if (nodeMap.get(cid)?.type === 'assistant') {
+						rowHeightMap.set(cid, rowHeight);
+					}
+				}
+
 				const childY = y + nodeH + V_SPACING;
 				let childX = allocX + (blockAWidth - belowTotalW) / 2;
 
@@ -237,6 +316,31 @@
 				}
 			}
 
+			// Place shared below-children (user node) centered below the assistants row
+			const sharedBelowIds = sharedBelowOf.get(nodeId) ?? [];
+			if (sharedBelowIds.length > 0 && belowIds.length > 0) {
+				let belowTotalW = 0;
+				for (let i = 0; i < belowIds.length; i++) {
+					if (i > 0) belowTotalW += H_SPACING;
+					belowTotalW += extents.get(belowIds[i])!.width;
+				}
+				const rowY = y + nodeH + V_SPACING;
+				const rowHeight = Math.max(...belowIds.map((id) => extents.get(id)!.height));
+				const sharedY = rowY + rowHeight + V_SPACING;
+
+				let sharedTotalW = 0;
+				for (let i = 0; i < sharedBelowIds.length; i++) {
+					if (i > 0) sharedTotalW += H_SPACING;
+					sharedTotalW += extents.get(sharedBelowIds[i])!.width;
+				}
+				const sharedCenterX = allocX + (blockAWidth - sharedTotalW) / 2;
+				let sharedX = sharedCenterX;
+				for (const sid of sharedBelowIds) {
+					placeSubtree(sid, sharedX, sharedY);
+					sharedX += extents.get(sid)!.width + H_SPACING;
+				}
+			}
+
 			// Place side-children to the right of Block A (non-overlapping zone)
 			let sideX = allocX + blockAWidth + H_SPACING;
 			for (const sid of sideIds) {
@@ -280,10 +384,12 @@
 			positions.set(node.id, { x: 0, y: maxY + DEFAULT_HEIGHT + V_SPACING });
 		}
 
-		return nodes.map((n) => ({
-			...n,
-			position: positions.get(n.id) ?? { x: 0, y: 0 }
-		}));
+		return nodes.map((n) => {
+			const pos = positions.get(n.id) ?? { x: 0, y: 0 };
+			const data =
+				n.type === 'assistant' ? { ...n.data, rowHeight: rowHeightMap.get(n.id) } : n.data;
+			return { ...n, position: pos, data };
+		});
 	}
 
 	// ─── Apply layout to the store ─────────────────────────────────────
@@ -299,21 +405,19 @@
 			nodesStore.set(result);
 		} else {
 			const posMap = new Map(result.map((n) => [n.id, n.position]));
+			const dataMap = new Map(result.map((n) => [n.id, n.data]));
 			nodesStore.update((prev) =>
 				prev.map((n) => {
 					const pos = posMap.get(n.id);
-					return pos ? { ...n, position: pos } : n;
+					const data = dataMap.get(n.id);
+					const updated = pos ? { ...n, position: pos } : n;
+					return data ? { ...updated, data } : updated;
 				})
 			);
 		}
 
 		if (viewState.draggable) {
-			fitView({
-				maxZoom: breakpointsState.isMobile ? 1 : 1.15,
-				minZoom: breakpointsState.isMobile ? 1 : 0.7,
-				...(isFirstLayout ? {} : { interpolate: 'smooth' as const, duration: 250 }),
-				nodes: nonWelcomeIds
-			});
+			doFitView();
 			isFirstLayout = false;
 		}
 	}

src/lib/helpers/types.ts

@@ -13,11 +13,17 @@ export interface ChatModel {
 	provider: string;
 	isError?: boolean;
 }
+
 export interface ChatMessage {
 	role: 'user' | 'assistant';
-	content: string;
-	timestamp?: number;
-	isHidden?: boolean;
+	[modelId: string]:
+		| {
+				content: string;
+				timestamp?: string;
+				isHidden?: boolean;
+		  }
+		| 'user'
+		| 'assistant';
 }
 
 export interface TokenUsage {

src/routes/+page.svelte

@@ -46,8 +46,7 @@
 				position: { x: 0, y: 0 },
 				data: {
 					isFirstNode: true,
-					canDeleteWelcome: true,
-					selectedModels: modelsState.models.slice(0, MAX_DEFAULT_MODELS) as ChatModel[]
+					selectedModels: modelsState.models.slice(3, 4 + MAX_DEFAULT_MODELS) as ChatModel[]
 				}
 			}
 		];