update

src/routes/canvas/chat-node.svelte

@@ -15,6 +15,7 @@
 	import ModelPicker from "./model-picker.svelte";
 	import ProviderPicker from "./provider-picker.svelte";
 	import { ElementSize } from "runed";
+	import { marked } from "marked";
 
 	type Props = Omit<NodeProps, "data"> & {
 		data: { query: string; response: string; modelId?: Model["id"]; provider?: string };
@@ -135,6 +136,11 @@
 
 	let node = $state<HTMLElement>();
 	const size = new ElementSize(() => node);
+
+	const parsedResponse = $derived.by(() => {
+		if (!data.response) return "";
+		return marked(data.response);
+	});
 </script>
 
 <div
@@ -188,7 +194,7 @@
 	</form>
 
 	{#if data.response || isLoading}
-		<div class="mt-4 rounded-lg border border-gray-100 bg-gray-50/50 p-4">
+		<div class="mt-4">
 			<div class="mb-2 flex items-center gap-2 text-xs font-medium text-gray-600">
 				Response
 				{#if isLoading}
@@ -196,7 +202,9 @@
 				{/if}
 			</div>
 			{#if data.response}
-				<pre class="text-sm leading-relaxed whitespace-pre-wrap text-gray-800">{data.response}</pre>
+				<div class="prose prose-sm max-w-none text-gray-800">
+					{@html parsedResponse}
+				</div>
 			{:else if isLoading}
 				<div class="text-sm text-gray-500">Generating response...</div>
 			{/if}