base canvas

package.json

@@ -27,6 +27,7 @@
 		"@iconify-json/carbon": "^1.2.8",
 		"@iconify-json/lucide": "^1.2.45",
 		"@iconify-json/material-symbols": "^1.2.15",
+		"@iconify-json/mingcute": "^1.2.5",
 		"@playwright/test": "^1.49.1",
 		"@ryoppippi/unplugin-typia": "^1.0.0",
 		"@samchon/openapi": "^3.0.0",
@@ -75,6 +76,7 @@
 	"type": "module",
 	"dependencies": {
 		"@tailwindcss/typography": "^0.5.16",
+		"@xyflow/svelte": "^1.2.4",
 		"dequal": "^2.0.3",
 		"eslint-plugin-svelte": "^3.11.0",
 		"marked": "^16.1.2",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.16
         version: 0.5.16([email protected])
+      '@xyflow/svelte':
+        specifier: ^1.2.4
+        version: 1.2.4([email protected])
       dequal:
         specifier: ^2.0.3
         version: 2.0.3
@@ -57,6 +60,9 @@ importers:
       '@iconify-json/material-symbols':
         specifier: ^1.2.15
         version: 1.2.15
+      '@iconify-json/mingcute':
+        specifier: ^1.2.5
+        version: 1.2.5
       '@playwright/test':
         specifier: ^1.49.1
         version: 1.52.0
@@ -644,6 +650,9 @@ packages:
   '@iconify-json/[email protected]':
     resolution: {integrity: sha512-KkHRnMh1s08N1Olf3xk+z3ZIrke/7Ys3uUIMfKuSkZPbNssG4IApKkJOV5po6mg6oxMooXdNpab4PS0S5LMSOA==}
 
+  '@iconify-json/[email protected]':
+    resolution: {integrity: sha512-LKlW4wahStprbfJcpzUnuayObOVAuztgYSy3v5oTke6cBJNfqEeE/mtMhHgpoSgGJvo5hhde2Q0+DoxKEldY2A==}
+
   '@iconify/[email protected]':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
@@ -1014,6 +1023,11 @@ packages:
   '@sinclair/[email protected]':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
+  '@svelte-put/[email protected]':
+    resolution: {integrity: sha512-wImNEIkbxAIWFqlfuhcbC+jRPDeRa/uJGIXHMEVVD+jqL9xCwWNnkGQJ6Qb2XVszuRLHlb8SGZDL3Io/h3vs8w==}
+    peerDependencies:
+      svelte: ^5.1.0
+
   '@sveltejs/[email protected]':
     resolution: {integrity: sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==}
     peerDependencies:
@@ -1172,6 +1186,24 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/[email protected]':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
+  '@types/[email protected]':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/[email protected]':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
+  '@types/[email protected]':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/[email protected]':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
   '@types/[email protected]':
     resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
@@ -1293,6 +1325,14 @@ packages:
   '@vitest/[email protected]':
     resolution: {integrity: sha512-yriMuO1cfFhmiGc8ataN51+9ooHRuURdfAZfwFd3usWynjzpLslZdYnRegTv32qdgtJTsj15FoeZe2g15fY1gg==}
 
+  '@xyflow/[email protected]':
+    resolution: {integrity: sha512-CygKmc3t+KevPdx9VEWa6Q0O7DegJ6qzYrOH5dQo5zp9Inm2cYAZpkUuk64ry9Djw/gwy7EvrJTjyXetuvBGOg==}
+    peerDependencies:
+      svelte: ^5.25.0
+
+  '@xyflow/[email protected]':
+    resolution: {integrity: sha512-QDG2wxIG4qX+uF8yzm1ULVZrcXX3MxPBoxv7O52FWsX87qIImOqifUhfa/TwsvLdzn7ic2DDBH1uI8TKbdNTYA==}
+
   [email protected]:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -1527,6 +1567,44 @@ packages:
     resolution: {integrity: sha512-ZgW+Jgdd7i52AaLYCriF8Mxqft0gD/R9i9wi6RWBhs1pqdPEzPjym7rvRKi397WmQFf3SlyUsszhw+VVCbx79Q==}
     engines: {node: '>=18'}
 
+  [email protected]:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  [email protected]:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  [email protected]:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
   [email protected]:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -3619,6 +3697,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/[email protected]':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/[email protected]': {}
 
   '@iconify/[email protected]':
@@ -3949,6 +4031,10 @@ snapshots:
 
   '@sinclair/[email protected]': {}
 
+  '@svelte-put/[email protected]([email protected])':
+    dependencies:
+      svelte: 5.36.16
+
   '@sveltejs/[email protected]([email protected])':
     dependencies:
       acorn: 8.14.0
@@ -4116,6 +4202,27 @@ snapshots:
 
   '@types/[email protected]': {}
 
+  '@types/[email protected]': {}
+
+  '@types/[email protected]':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/[email protected]':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/[email protected]': {}
+
+  '@types/[email protected]':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/[email protected]':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
   '@types/[email protected]': {}
 
   '@types/[email protected]':
@@ -4283,6 +4390,24 @@ snapshots:
       loupe: 3.1.3
       tinyrainbow: 2.0.0
 
+  '@xyflow/[email protected]([email protected])':
+    dependencies:
+      '@svelte-put/shortcut': 4.1.0([email protected])
+      '@xyflow/system': 0.0.68
+      svelte: 5.36.16
+
+  '@xyflow/[email protected]':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   [email protected]:
     dependencies:
       event-target-shim: 5.0.1
@@ -4484,6 +4609,42 @@ snapshots:
       '@asamuzakjp/css-color': 3.2.0
       rrweb-cssom: 0.8.0
 
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      d3-color: 3.1.0
+
+  [email protected]: {}
+
+  [email protected]: {}
+
+  [email protected]([email protected]):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  [email protected]:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1([email protected])
+
   [email protected]:
     dependencies:
       whatwg-mimetype: 4.0.0

src/routes/+layout.svelte

@@ -1,11 +1,4 @@
 <script lang="ts">
-	import DebugMenu from "$lib/components/debug-menu.svelte";
-	import CustomModelConfig from "$lib/components/inference-playground/custom-model-config.svelte";
-	import ImgPreview from "$lib/components/inference-playground/img-preview.svelte";
-	import Prompts from "$lib/components/prompts.svelte";
-	import QuotaModal from "$lib/components/quota-modal.svelte";
-	import ShareModal from "$lib/components/share-modal.svelte";
-	import { conversations } from "$lib/state/conversations.svelte";
 	import "../app.css";
 
 	interface Props {
@@ -13,7 +6,6 @@
 	}
 
 	let { children }: Props = $props();
-	conversations.init();
 </script>
 
 <svelte:boundary>
@@ -22,10 +14,3 @@
 		<!-- pending -->
 	{/snippet}
 </svelte:boundary>
-
-<DebugMenu />
-<Prompts />
-<QuotaModal />
-<ShareModal />
-<CustomModelConfig />
-<ImgPreview />

src/routes/+page.svelte

@@ -1,5 +1,21 @@
 <script lang="ts">
+	import DebugMenu from "$lib/components/debug-menu.svelte";
+	import CustomModelConfig from "$lib/components/inference-playground/custom-model-config.svelte";
+	import ImgPreview from "$lib/components/inference-playground/img-preview.svelte";
+	import Prompts from "$lib/components/prompts.svelte";
+	import QuotaModal from "$lib/components/quota-modal.svelte";
+	import ShareModal from "$lib/components/share-modal.svelte";
+	import { conversations } from "$lib/state/conversations.svelte";
 	import Playground from "$lib/components/inference-playground/playground.svelte";
+
+	conversations.init();
 </script>
 
 <Playground />
+
+<DebugMenu />
+<Prompts />
+<QuotaModal />
+<ShareModal />
+<CustomModelConfig />
+<ImgPreview />

src/routes/canvas/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Background, Controls, MiniMap, SvelteFlow, type Edge, type Node } from "@xyflow/svelte";
+
+	import "@xyflow/svelte/dist/style.css";
+	import ChatNode from "./chat-node.svelte";
+
+	const nodeTypes = { chat: ChatNode } as const;
+
+	let nodes = $state.raw<Node[]>([
+		{ id: "1", position: { x: 0, y: 0 }, data: { label: "1" } },
+		{ id: "2", position: { x: 0, y: 100 }, data: { label: "2" } },
+		{ id: "3", position: { x: 0, y: 200 }, data: { label: "3" }, type: "chat" },
+	]);
+
+	let edges = $state.raw<Edge[]>([{ id: "e1-2", source: "1", target: "2", animated: true }]);
+</script>
+
+<div style:width="100vw" style:height="100vh">
+	<SvelteFlow bind:nodes bind:edges fitView {nodeTypes}>
+		<MiniMap />
+		<Controls />
+		<Background />
+	</SvelteFlow>
+</div>

src/routes/canvas/chat-node.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { NodeResizeControl, Position, useSvelteFlow, type NodeProps } from "@xyflow/svelte";
+	import { Handle } from "@xyflow/svelte";
+	import IconResize from "~icons/mingcute/fullscreen-2-fill";
+
+	let { id, data }: NodeProps = $props();
+
+	let { updateNodeData } = useSvelteFlow();
+</script>
+
+<div
+	class="chat-node flex h-full min-h-[100px] w-full min-w-[200px]
+	items-start rounded border bg-white p-4"
+>
+	<label for="text">Text:</label>
+	<input
+		class="nodrag min-w-0 shrink grow border"
+		name="text"
+		value={data.text}
+		oninput={evt => {
+			updateNodeData(id, { text: evt.currentTarget.value });
+		}}
+	/>
+</div>
+
+<Handle type="target" position={Position.Top} />
+<Handle type="source" position={Position.Bottom} />
+
+<NodeResizeControl minWidth={200} minHeight={100} style="background: transparent; border: none;">
+	<IconResize class="absolute right-2 bottom-2 -scale-x-100 text-blue-500" />
+</NodeResizeControl>