add markdown parsing

package.json

@@ -74,8 +74,10 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@tailwindcss/typography": "^0.5.16",
 		"dequal": "^2.0.3",
 		"eslint-plugin-svelte": "^3.11.0",
+		"marked": "^16.1.2",
 		"remult": "^3.0.2",
 		"typia": "^8.0.0"
 	},

pnpm-lock.yaml

@@ -8,12 +8,18 @@ importers:
 
   .:
     dependencies:
+      '@tailwindcss/typography':
+        specifier: ^0.5.16
+        version: 0.5.16(tailwindcss@4.0.9)
       dequal:
         specifier: ^2.0.3
         version: 2.0.3
       eslint-plugin-svelte:
         specifier: ^3.11.0
         version: 3.11.0(eslint@9.22.0(jiti@2.4.2))(svelte@5.36.16)
+      marked:
+        specifier: ^16.1.2
+        version: 16.1.2
       remult:
         specifier: ^3.0.2
         version: 3.0.2
@@ -1128,6 +1134,11 @@ packages:
   '@tailwindcss/postcss@4.0.9':
     resolution: {integrity: sha512-BT/E+pdMqulavEAVM5NCpxmGEwHiLDPpkmg/c/X25ZBW+izTe+aZ+v1gf/HXTrihRoCxrUp5U4YyHsBTzspQKQ==}
 
+  '@tailwindcss/typography@0.5.16':
+    resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -2207,6 +2218,12 @@ packages:
     resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
@@ -2233,6 +2250,11 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  marked@16.1.2:
+    resolution: {integrity: sha512-rNQt5EvRinalby7zJZu/mB+BvaAY2oz3wCuCjt1RDrWNpS1Pdf9xqMOeC9Hm5adBdcV/3XZPJpG58eT+WBc0XQ==}
+    engines: {node: '>= 20'}
+    hasBin: true
+
   matcher@3.0.0:
     resolution: {integrity: sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==}
     engines: {node: '>=10'}
@@ -2518,6 +2540,10 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
+  postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+
   postcss-selector-parser@7.1.0:
     resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
@@ -4045,6 +4071,14 @@ snapshots:
       postcss: 8.5.3
       tailwindcss: 4.0.9
 
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.9)':
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 4.0.9
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -5168,6 +5202,10 @@ snapshots:
     dependencies:
       p-locate: 6.0.0
 
+  lodash.castarray@4.4.0: {}
+
+  lodash.isplainobject@4.0.6: {}
+
   lodash.merge@4.6.2: {}
 
   lodash@4.17.21: {}
@@ -5189,6 +5227,8 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  marked@16.1.2: {}
+
   matcher@3.0.0:
     dependencies:
       escape-string-regexp: 4.0.0
@@ -5456,6 +5496,11 @@ snapshots:
     dependencies:
       postcss: 8.5.3
 
+  postcss-selector-parser@6.0.10:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0

src/app.css

@@ -2,6 +2,7 @@
 @import "tailwindcss";
 
 @plugin '@tailwindcss/container-queries';
+@plugin '@tailwindcss/typography';
 
 @custom-variant dark (&:where(.dark, .dark *));
 

src/lib/components/inference-playground/generation-config.svelte

@@ -137,6 +137,18 @@
 		</span>
 		<button class="btn-mini ml-auto" type="button" onclick={openExtraParamsModal}>edit</button>
 	</div>
+
+	<label class="mt-2 flex cursor-pointer items-center justify-between">
+		<input
+			type="checkbox"
+			bind:checked={() => conversation.data.parseMarkdown, v => conversation.update({ parseMarkdown: v })}
+			class="peer sr-only"
+		/>
+		<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Parse Markdown</span>
+		<div
+			class="peer relative h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-black peer-focus:outline-hidden after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
+		></div>
+	</label>
 </div>
 
 <StructuredOutputModal {conversation} />

src/lib/components/inference-playground/message-textarea.svelte

@@ -5,14 +5,14 @@
 	import { images } from "$lib/state/images.svelte";
 	import type { ConversationMessage } from "$lib/types.js";
 	import { fileToDataURL } from "$lib/utils/file.js";
+	import { omit } from "$lib/utils/object.svelte";
 	import { cmdOrCtrl } from "$lib/utils/platform.js";
 	import { FileUpload } from "melt/builders";
+	import { fade } from "svelte/transition";
 	import IconImage from "~icons/carbon/image-reference";
 	import IconMaximize from "~icons/carbon/maximize";
 	import Tooltip from "../tooltip.svelte";
 	import { previewImage } from "./img-preview.svelte";
-	import { omit } from "$lib/utils/object.svelte";
-	import { fade } from "svelte/transition";
 
 	const multiple = $derived(conversations.active.length > 1);
 	const loading = $derived(conversations.generating);

src/lib/components/inference-playground/message.svelte

@@ -16,6 +16,7 @@
 	import IconCustom from "../icon-custom.svelte";
 	import LocalToasts from "../local-toasts.svelte";
 	import { previewImage } from "./img-preview.svelte";
+	import { marked } from "marked";
 
 	type Props = {
 		conversation: ConversationClass;
@@ -59,6 +60,13 @@
 		if (message?.role === "assistant") return "Regenerate";
 		return isLast ? "Generate from here" : "Regenerate from here";
 	});
+
+	const parsedContent = $derived.by(() => {
+		if (!conversation.data.parseMarkdown || !message?.content) {
+			return message?.content ?? "";
+		}
+		return marked(message.content);
+	});
 </script>
 
 <div
@@ -88,28 +96,38 @@
 			{message?.role}
 		</div>
 		<div class="flex w-full gap-4">
-			<textarea
-				value={message?.content}
-				onchange={e => {
-					const el = e.target as HTMLTextAreaElement;
-					const content = el?.value;
-					if (!message || !content) return;
-					conversation.updateMessage({ index, message: { ...message, content } });
-				}}
-				onkeydown={e => {
-					if ((e.ctrlKey || e.metaKey) && e.key === "g") {
-						e.preventDefault();
-						e.stopPropagation();
-						onRegen?.();
-					}
-				}}
-				placeholder="Enter {message?.role} message"
-				class="grow resize-none overflow-hidden rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
-				rows="1"
-				data-message
-				data-test-id={TEST_IDS.message}
-				{@attach autosized.attachment}
-			></textarea>
+			{#if conversation.data.parseMarkdown && message?.role === "assistant"}
+				<div
+					class="prose prose-sm dark:prose-invert max-w-none grow rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900"
+					data-message
+					data-test-id={TEST_IDS.message}
+				>
+					{@html parsedContent}
+				</div>
+			{:else}
+				<textarea
+					value={message?.content}
+					onchange={e => {
+						const el = e.target as HTMLTextAreaElement;
+						const content = el?.value;
+						if (!message || !content) return;
+						conversation.updateMessage({ index, message: { ...message, content } });
+					}}
+					onkeydown={e => {
+						if ((e.ctrlKey || e.metaKey) && e.key === "g") {
+							e.preventDefault();
+							e.stopPropagation();
+							onRegen?.();
+						}
+					}}
+					placeholder="Enter {message?.role} message"
+					class="grow resize-none overflow-hidden rounded-lg bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:bg-white focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+					rows="1"
+					data-message
+					data-test-id={TEST_IDS.message}
+					{@attach autosized.attachment}
+				></textarea>
+			{/if}
 
 			<!-- Sticky wrapper for action buttons -->
 			<div class={["top-8 z-10 self-start", shouldStick && "sticky"]}>

src/lib/spells/textarea-autosize.svelte.ts

@@ -150,7 +150,7 @@ export class TextareaAutosize {
 		}
 
 		// Only update if height actually changed
-		if (this.textareaHeight !== newHeight) {
+		if (this.textareaHeight !== newHeight || !this.element.style[this.styleProp]) {
 			this.textareaHeight = newHeight;
 			this.element.style[this.styleProp] = `${newHeight}px`;
 		}

src/lib/state/conversations.svelte.ts

@@ -38,6 +38,9 @@ export class ConversationEntity {
 		schema?: string;
 	};
 
+	@Fields.boolean()
+	parseMarkdown = false;
+
 	@Fields.json()
 	messages?: ConversationMessage[];
 
@@ -82,6 +85,7 @@ function getDefaultConversation(projectId: string) {
 		config: { ...defaultGenerationConfig },
 		messages: [],
 		streaming: true,
+		parseMarkdown: false,
 		createdAt: new Date(),
 	} satisfies Partial<ConversationEntityMembers>;
 }