export flow button

README.md

@@ -5,6 +5,7 @@ colorFrom: yellow
 colorTo: yellow
 sdk: docker
 short_description: Compare the best text-to-generation models on Hugging Face
+failure_strategy: rollback
 pinned: true
 app_port: 3000
 license: mit

src/lib/components/chat/Assistant.svelte

@@ -184,10 +184,14 @@
 						<span class="inline-flex items-center gap-1 rounded-full bg-muted py-0.5 pr-2 pl-1">
 							<img
 								src={`https://huggingface.co/api/avatars/${inferenceProvider}`}
-								alt={provider}
+								alt={(nodeData.current?.data.inferenceProvider as string) ??
+									inferenceProvider ??
+									provider}
 								class="size-4 rounded-full"
 							/>
-							{provider}
+							{(nodeData.current?.data.inferenceProvider as string) ??
+								inferenceProvider ??
+								provider}
 						</span>
 						provider
 					</span>

src/lib/components/flow/actions/PanelFlowActions.svelte

@@ -4,8 +4,9 @@
 
 	import { Button } from '$lib/components/ui/button';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
+	import { mapNodesExport } from '$lib/helpers/map-nodes-export';
 
-	const { getNodes } = useSvelteFlow();
+	const { getNodes, getEdges } = useSvelteFlow();
 	let showPanelFlowActions = $derived(getNodes().length > 1);
 
 	function handleReset() {
@@ -18,11 +19,10 @@
 	function handleExport() {
 		const ok = confirm('Are you sure you want to export the flow?');
 		if (ok) {
-			const flow = getNodes();
-			const flowJson = JSON.stringify(flow, null, 2);
-			const flowBlob = new Blob([flowJson], { type: 'application/json' });
-			const flowUrl = URL.createObjectURL(flowBlob);
-			window.open(flowUrl, '_blank');
+			const exported = mapNodesExport(getNodes(), getEdges());
+			const blob = new Blob([JSON.stringify(exported, null, 2)], { type: 'application/json' });
+			const url = URL.createObjectURL(blob);
+			window.open(url, '_blank');
 		}
 	}
 </script>
@@ -43,7 +43,7 @@
 				Clear flow
 			{/if}
 		</Button>
-		<!-- <Button
+		<Button
 			variant="outline"
 			size={breakpointsState.isMobile ? 'icon-sm' : 'default'}
 			class=""
@@ -53,6 +53,6 @@
 			{#if !breakpointsState.isMobile}
 				Export flow
 			{/if}
-		</Button> -->
+		</Button>
 	</Panel>
 {/if}

src/lib/components/model/SettingsModel.svelte

@@ -252,7 +252,7 @@
 														alt={providerName}
 														class="size-4 rounded"
 													/>
-													{providerName}
+													{provider.provider}
 												</div>
 												{#if formatPricingPerToken(provider.pricing)}
 													<span class="text-xs text-muted-foreground">

src/lib/helpers/map-nodes-export.ts

@@ -1,13 +1,31 @@
-import type { Node } from '@xyflow/svelte';
-
-export function mapNodesExport(nodes: Node[]): Record<string, unknown>[] {
-	return nodes.map((node) => {
-		// const
-		return {
-			id: node.id,
-			type: node.type,
-			position: node.position,
-			data: node.data
-		};
+import type { Node, Edge } from '@xyflow/svelte';
+import type { ChatMessage } from './types';
+
+export function mapNodesExport(
+	nodes: Node[],
+	edges: Edge[]
+): Record<string, ChatMessage[]> {
+	const outgoing = new Map<string, number>();
+
+	for (const node of nodes) {
+		outgoing.set(node.id, 0);
+	}
+	for (const edge of edges) {
+		outgoing.set(edge.source, (outgoing.get(edge.source) ?? 0) + 1);
+	}
+
+	// Each leaf user node (no outgoing edges) = one exported flow.
+	// This covers both fully disconnected flows and edit branches within the same tree.
+	const leafUserNodes = nodes.filter(
+		(n) =>
+			(n.type === 'user' || n.type === 'user-follow-up') && (outgoing.get(n.id) ?? 0) === 0
+	);
+
+	const result: Record<string, ChatMessage[]> = {};
+
+	leafUserNodes.forEach((node, index) => {
+		result[String(index + 1)] = (node.data.messages as ChatMessage[]) ?? [];
 	});
+
+	return result;
 }