basic chatting

src/routes/canvas/+page.svelte

@@ -3,20 +3,33 @@
 
 	import "@xyflow/svelte/dist/style.css";
 	import ChatNode from "./chat-node.svelte";
+	import { PersistedState } from "runed";
 
 	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 nodes = new PersistedState<Node[]>("inf-pg-nodes", [
+		{
+			id: "1",
+			position: { x: 100, y: 100 },
+			data: { query: "", response: "", modelId: undefined },
+			type: "chat",
+			width: undefined,
+			height: undefined,
+		},
 	]);
+	$inspect(nodes);
 
-	let edges = $state.raw<Edge[]>([{ id: "e1-2", source: "1", target: "2", animated: true }]);
+	let edges = $state.raw<Edge[]>([]);
+
+	// Make edges non-editable
+	const edgeOptions = {
+		deletable: false,
+		selectable: false,
+	};
 </script>
 
 <div style:width="100vw" style:height="100vh">
-	<SvelteFlow bind:nodes bind:edges fitView {nodeTypes}>
+	<SvelteFlow bind:nodes={nodes.current} bind:edges fitView {nodeTypes} defaultEdgeOptions={edgeOptions}>
 		<MiniMap />
 		<Controls />
 		<Background />

src/routes/canvas/+page.ts

@@ -0,0 +1,17 @@
+import type { PageLoad } from "./$types.js";
+import type { ApiModelsResponse } from "../api/models/+server.js";
+
+export const load: PageLoad = async ({ fetch }) => {
+	const [modelsRes, routerRes] = await Promise.all([
+		fetch("/api/models"),
+		fetch("https://router.huggingface.co/v1/models"),
+	]);
+
+	const models: ApiModelsResponse = await modelsRes.json();
+	const routerData = await routerRes.json();
+
+	return {
+		...models,
+		routerData,
+	};
+};

src/routes/canvas/chat-node.svelte

@@ -1,31 +1,88 @@
 <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";
+	import { TextareaAutosize } from "$lib/spells/textarea-autosize.svelte";
+	import { models } from "$lib/state/models.svelte";
+	import { token } from "$lib/state/token.svelte";
+	import type { Model } from "$lib/types.js";
+	import { InferenceClient } from "@huggingface/inference";
+	import { Handle, Position, useSvelteFlow, type NodeProps } from "@xyflow/svelte";
+	import { onMount } from "svelte";
 
-	let { id, data }: NodeProps = $props();
+	type Props = NodeProps & { data: { query: string; response: string; modelId?: Model["id"] } };
+	let { id, data }: Props = $props();
 
-	let { updateNodeData } = useSvelteFlow();
+	let { updateNodeData, updateNode } = useSvelteFlow();
+	onMount(() => {
+		if (!data.modelId) data.modelId = models.trending[0]?.id;
+		updateNode(id, { height: undefined });
+	});
+
+	let modelId = $state<Model["id"] | undefined>(models.trending[0]?.id);
+
+	const autosized = new TextareaAutosize();
+
+	async function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		updateNodeData(id, { response: "" });
+		const client = new InferenceClient(token.value);
+
+		const stream = client.chatCompletionStream({
+			provider: "auto",
+			model: data.modelId,
+			messages: [
+				{
+					role: "user",
+					content: data.query,
+				},
+			],
+			temperature: 0.5,
+			top_p: 0.7,
+		});
+
+		for await (const chunk of stream) {
+			if (chunk.choices && chunk.choices.length > 0) {
+				const newContent = chunk.choices[0]?.delta.content ?? "";
+				updateNodeData(id, { response: data.response + newContent });
+			}
+		}
+	}
+	$inspect(data);
 </script>
 
 <div
-	class="chat-node flex h-full min-h-[100px] w-full min-w-[200px]
-	items-start rounded border bg-white p-4"
+	class="chat-node flex h-full min-h-[150px] w-full min-w-[200px] flex-col
+	items-stretch rounded border bg-white p-8 shadow-xs"
 >
-	<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 });
-		}}
-	/>
+	<select class="block border" bind:value={modelId}>
+		{#each models.all as model}
+			<option value={model.id}>{model.id}</option>
+		{/each}
+	</select>
+
+	<form class="mt-2 flex flex-col gap-2" onsubmit={handleSubmit}>
+		<textarea
+			class="nodrag block min-w-0 shrink grow resize-none border"
+			placeholder="Type your message here..."
+			value={data.query}
+			oninput={evt => {
+				updateNodeData(id, { query: evt.currentTarget.value });
+			}}
+			{@attach autosized.attachment}
+		></textarea>
+		<button class="self-center bg-blue-500 px-4 py-1 text-white hover:bg-blue-400"> Send </button>
+	</form>
+
+	{#if data.response}
+		<div class="mt-2 border-t border-gray-200 p-2">
+			<pre class="whitespace-pre-wrap">{data.response}</pre>
+		</div>
+	{/if}
 </div>
 
 <Handle type="target" position={Position.Top} />
 <Handle type="source" position={Position.Bottom} />
+<Handle type="source" position={Position.Left} />
+<Handle type="source" position={Position.Right} />
 
-<NodeResizeControl minWidth={200} minHeight={100} style="background: transparent; border: none;">
-	<IconResize class="absolute right-2 bottom-2 -scale-x-100 text-blue-500" />
-</NodeResizeControl>
+<!-- <NodeResizeControl minWidth={200} minHeight={150}> -->
+<!-- 	<IconResize class="absolute right-2 bottom-2" /> -->
+<!-- </NodeResizeControl> -->