some fixes

src/lib/components/chat/Assistant.svelte

@@ -184,10 +184,10 @@
 						<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={inferenceProvider}
+								alt={provider}
 								class="size-4 rounded-full"
 							/>
-							{inferenceProvider}
+							{provider}
 						</span>
 						provider
 					</span>

src/lib/components/flow/actions/{ResetPanel.svelte → PanelFlowActions.svelte}

@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { RefreshCcw } from '@lucide/svelte';
+	import { Download, RefreshCcw } from '@lucide/svelte';
 	import { Panel, useSvelteFlow } from '@xyflow/svelte';
 
 	import { Button } from '$lib/components/ui/button';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 
 	const { getNodes } = useSvelteFlow();
-	let showResetButton = $derived(getNodes().length > 1);
+	let showPanelFlowActions = $derived(getNodes().length > 1);
 
 	function handleReset() {
 		const ok = confirm('Are you sure you want to reset the flow?');
@@ -14,13 +14,24 @@
 			location.reload();
 		}
 	}
+
+	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');
+		}
+	}
 </script>
 
-<Panel
-	position={breakpointsState.isMobile ? 'bottom-left' : 'top-left'}
-	class="flex items-center justify-end gap-2 p-1 lg:p-2"
->
-	{#if showResetButton}
+{#if showPanelFlowActions}
+	<Panel
+		position={breakpointsState.isMobile ? 'bottom-left' : 'top-left'}
+		class="flex items-center justify-end gap-2 p-1 lg:p-2"
+	>
 		<Button
 			variant="outline"
 			size={breakpointsState.isMobile ? 'icon-sm' : 'default'}
@@ -32,5 +43,16 @@
 				Clear flow
 			{/if}
 		</Button>
-	{/if}
-</Panel>
+		<!-- <Button
+			variant="outline"
+			size={breakpointsState.isMobile ? 'icon-sm' : 'default'}
+			class=""
+			onclick={handleExport}
+		>
+			<Download />
+			{#if !breakpointsState.isMobile}
+				Export flow
+			{/if}
+		</Button> -->
+	</Panel>
+{/if}

src/lib/components/model/SettingsModel.svelte

@@ -211,8 +211,9 @@
 												{/if}
 											</p>
 										{:else}
+											{@const providerName = getProviderName(provider)}
 											<img
-												src={`https://huggingface.co/api/avatars/${provider}`}
+												src={`https://huggingface.co/api/avatars/${providerName}`}
 												alt={provider}
 												class="size-4 rounded"
 											/>

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

@@ -0,0 +1,13 @@
+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
+		};
+	});
+}

src/routes/+page.svelte

@@ -22,9 +22,9 @@
 	import PanelCanvasActions from '$lib/components/flow/actions/PanelCanvasActions.svelte';
 	import { viewState } from '$lib/state/view.svelte';
 	import ContextMenuComponent from '$lib/components/flow/actions/ContextMenu.svelte';
-	import { getNodesAssociatedWith } from '$lib/helpers/getNodesAssociatedWith';
+	import { getNodesAssociatedWith } from '$lib/helpers/get-nodes-associated-with';
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
-	import ResetPanel from '$lib/components/flow/actions/ResetPanel.svelte';
+	import PanelFlowActions from '$lib/components/flow/actions/PanelFlowActions.svelte';
 
 	const nodeTypes = {
 		user: User,
@@ -136,7 +136,7 @@
 			patternColor={mode.current === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'}
 			class="bg-background!"
 		/>
-		<ResetPanel />
+		<PanelFlowActions />
 		<PanelRightActions />
 		<PanelCanvasActions />
 	</SvelteFlow>