add basic markdown parsing using Marked (#18)

Co-authored-by: Eliott C <[email protected]>

package-lock.json

@@ -11,6 +11,7 @@
 				"@huggingface/inference": "^2.0.0-rc2",
 				"autoprefixer": "^10.4.14",
 				"date-fns": "^2.29.3",
+				"marked": "^4.3.0",
 				"mongodb": "^5.3.0",
 				"postcss": "^8.4.21",
 				"tailwind-scrollbar": "^3.0.0",
@@ -19,6 +20,7 @@
 			"devDependencies": {
 				"@sveltejs/adapter-node": "^1.2.0",
 				"@sveltejs/kit": "^1.5.0",
+				"@types/marked": "^4.0.8",
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
 				"@typescript-eslint/parser": "^5.45.0",
 				"eslint": "^8.28.0",
@@ -723,25 +725,25 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.15.7",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.7.tgz",
-			"integrity": "sha512-dgdKExsMJ16X3q8tEcuDlv+QIWAlJcf7IqCU2HWV13nmtTzwSA2n4VtEx9Gy5OGhH0SUAGNIupmlf0TdFSMXbw==",
+			"version": "1.7.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.7.1.tgz",
+			"integrity": "sha512-epaQCaZ/D3Qr/SgrRKHv+MpM6rz8JdaXSjOjas8t7PbDJl88KpqYWUvsmyuJQn/yNNGar23kENyy4NueNnjIKQ==",
 			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte": "^2.0.0",
 				"@types/cookie": "^0.5.1",
 				"cookie": "^0.5.0",
-				"devalue": "^4.3.0",
+				"devalue": "^4.2.3",
 				"esm-env": "^1.0.0",
 				"kleur": "^4.1.5",
-				"magic-string": "^0.30.0",
+				"magic-string": "^0.29.0",
 				"mime": "^3.0.0",
 				"sade": "^1.8.1",
 				"set-cookie-parser": "^2.5.1",
 				"sirv": "^2.0.2",
 				"tiny-glob": "^0.2.9",
-				"undici": "5.20.0"
+				"undici": "5.19.1"
 			},
 			"bin": {
 				"svelte-kit": "svelte-kit.js"
@@ -805,6 +807,12 @@
 			"integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
 			"dev": true
 		},
+		"node_modules/@types/marked": {
+			"version": "4.0.8",
+			"resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.0.8.tgz",
+			"integrity": "sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==",
+			"dev": true
+		},
 		"node_modules/@types/node": {
 			"version": "18.13.0",
 			"resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
@@ -2023,18 +2031,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/globals/node_modules/type-fest": {
-			"version": "0.20.2",
-			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-			"dev": true,
-			"engines": {
-				"node": ">=10"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/sindresorhus"
-			}
-		},
 		"node_modules/globalyzer": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
@@ -2357,9 +2353,9 @@
 			}
 		},
 		"node_modules/magic-string": {
-			"version": "0.30.0",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.0.tgz",
-			"integrity": "sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==",
+			"version": "0.29.0",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.29.0.tgz",
+			"integrity": "sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==",
 			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.13"
@@ -2368,6 +2364,17 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/marked": {
+			"version": "4.3.0",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+			"integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/memory-pager": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
@@ -3586,6 +3593,18 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/type-fest": {
+			"version": "0.20.2",
+			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+			"integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/typescript": {
 			"version": "4.9.5",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
@@ -3600,9 +3619,9 @@
 			}
 		},
 		"node_modules/undici": {
-			"version": "5.20.0",
-			"resolved": "https://registry.npmjs.org/undici/-/undici-5.20.0.tgz",
-			"integrity": "sha512-J3j60dYzuo6Eevbawwp1sdg16k5Tf768bxYK4TUJRH7cBM4kFCbf3mOnM/0E3vQYXvpxITbbWmBafaDbxLDz3g==",
+			"version": "5.19.1",
+			"resolved": "https://registry.npmjs.org/undici/-/undici-5.19.1.tgz",
+			"integrity": "sha512-YiZ61LPIgY73E7syxCDxxa3LV2yl3sN8spnIuTct60boiiRaE1J8mNWHO8Im2Zi/sFrPusjLlmRPrsyraSqX6A==",
 			"dev": true,
 			"dependencies": {
 				"busboy": "^1.6.0"

package.json

@@ -14,6 +14,7 @@
 	"devDependencies": {
 		"@sveltejs/adapter-node": "^1.2.0",
 		"@sveltejs/kit": "^1.5.0",
+		"@types/marked": "^4.0.8",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"eslint": "^8.28.0",
@@ -32,6 +33,7 @@
 		"@huggingface/inference": "^2.0.0-rc2",
 		"autoprefixer": "^10.4.14",
 		"date-fns": "^2.29.3",
+		"marked": "^4.3.0",
 		"mongodb": "^5.3.0",
 		"postcss": "^8.4.21",
 		"tailwind-scrollbar": "^3.0.0",

src/lib/components/chat/ChatMessage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { marked } from 'marked';
 	import type { Message } from '$lib/types/Message';
 
 	export let message: Message;
@@ -14,7 +15,7 @@
 		<div
 			class="group relative rounded-2xl px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800"
 		>
-			{message.content}
+			{@html marked(message.content, { gfm: true })}
 		</div>
 	</div>
 {/if}