feat: support markdown in chat and resource (#56)

package.json

@@ -32,6 +32,7 @@
 		"@types/rfc2047": "^2.0.3",
 		"autoprefixer": "^10.4.20",
 		"debug": "^4.3.7",
+		"dompurify": "^3.2.3",
 		"dotenv": "^16.4.5",
 		"eslint": "^9.15.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -45,6 +46,7 @@
 		"husky": "^9.1.7",
 		"lint-staged": "^15.2.10",
 		"lucide-svelte": "^0.454.0",
+		"marked": "^15.0.4",
 		"mdsvex": "^0.11.2",
 		"openai": "^4.73.0",
 		"prettier": "^3.3.3",

src/lib/components/Chatroom.svelte

@@ -2,6 +2,7 @@
 	import { Button, Card, Textarea } from 'flowbite-svelte';
 	import { Mic, Send, Square } from 'lucide-svelte'; // Added Square icon import
 	import AudioPlayer from './AudioPlayer.svelte';
+	import { renderMarkdown } from '$lib/utils/renderMarkdown';
 
 	interface Conversation {
 		name: string;
@@ -96,7 +97,14 @@
 				{/if}
 				<Card class="w-fit max-w-[80%] {conv.self ? 'bg-primary-50' : ''}">
 					<div class="-my-2">
-						<p class="text-gray-600">{conv.content}</p>
+						<p class="prose prose-hina text-gray-600">
+							{#await renderMarkdown(conv.content)}
+								Loading ...
+							{:then content}
+								<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+								{@html content}
+							{/await}
+						</p>
 						{#if conv.audio}
 							<AudioPlayer src={conv.audio} />
 						{/if}

src/lib/components/session/HostView.svelte

@@ -16,6 +16,7 @@
 	import type { Conversation } from '$lib/schema/conversation';
 	import { X } from 'lucide-svelte';
 	import { SvelteMap } from 'svelte/reactivity';
+	import { renderMarkdown } from '$lib/utils/renderMarkdown';
 	import ChatHistory from './ChatHistory.svelte';
 
 	let { session }: { session: Readable<Session> } = $props();
@@ -421,7 +422,14 @@
 					{#each $session?.resources as resource}
 						<div class="rounded-lg border p-4">
 							<h3 class="font-medium">{resource.name}</h3>
-							<p class="mt-2 text-gray-700">{resource.content}</p>
+							<p class="prose prose-hina mt-2 text-gray-700">
+								{#await renderMarkdown(resource.content)}
+									Loading ...
+								{:then content}
+									<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+									{@html content}
+								{/await}
+							</p>
 						</div>
 					{/each}
 				</div>

src/lib/stores/auth.ts

@@ -43,11 +43,11 @@ export async function signInWithGoogle() {
 }
 
 // Sign out function
-export async function signOut() {
+export async function signOut(f: typeof fetch = fetch) {
 	try {
 		await auth.signOut();
 		// Clear the session cookie
-		await fetch('/api/auth/signout', { method: 'POST' });
+		await f('/api/auth/signout', { method: 'POST' });
 		// Redirect to home page
 		await goto('/');
 	} catch (error) {

src/lib/utils/renderMarkdown.ts

@@ -0,0 +1,22 @@
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
+
+/**
+ * Renders the given markdown string to HTML and sanitizes it.
+ * @param markdown - The markdown string to be rendered.
+ * @returns A promise that resolves to the sanitized HTML string.
+ */
+export async function renderMarkdown(markdown: string): Promise<string> {
+	const renderer = new marked.Renderer();
+
+	// prevent rendering of hidden links
+	renderer.link = (token) => {
+		return token.text ? `${token.text} (${token.href})` : token.href;
+	};
+
+	// prevent showing images
+	renderer.image = () => '';
+
+	const dirty = await marked(markdown, { renderer });
+	return DOMPurify.sanitize(dirty);
+}

src/routes/login/+page.server.ts

@@ -2,11 +2,11 @@ import { signOut } from '$lib/stores/auth';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ locals }) => {
+export const load: PageServerLoad = async ({ locals, fetch }) => {
 	if (locals.user) {
 		throw redirect(303, '/dashboard');
 	} else {
-		signOut();
+		signOut(fetch);
 	}
 
 	return {};

src/routes/template/[id]/ResourceList.svelte

@@ -5,6 +5,7 @@
 	import { page } from '$app/stores';
 	import type { Template } from '$lib/schema/template';
 	import { notifications } from '$lib/stores/notifications';
+	import { renderMarkdown } from '$lib/utils/renderMarkdown';
 
 	// Constants
 	const LIMITS = {
@@ -215,10 +216,15 @@
 						</div>
 						<div class="relative">
 							<p
-								class="mt-1 overflow-y-auto whitespace-pre-wrap break-words text-sm text-gray-600 transition-[max-height] duration-300 ease-in-out"
+								class="prose prose-hina mt-1 overflow-y-auto break-words text-sm text-gray-600 transition-[max-height] duration-300 ease-in-out"
 								style="max-height: {expandedResources.has(resource.id) ? '500px' : '100px'}"
 							>
-								{resource.content}
+								{#await renderMarkdown(resource.content)}
+									{resource.content}
+								{:then content}
+									<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+									{@html content}
+								{/await}
 							</p>
 							{#if resource.content.length > 100}
 								<Button

tailwind.config.ts

@@ -23,6 +23,30 @@ export default {
 					800: '#CC4522',
 					900: '#A5371B'
 				}
+			},
+			typography: {
+				hina: {
+					css: {
+						maxWidth: '100%',
+						p: {
+							marginTop: '0.25em',
+							marginBottom: '0.25em'
+						},
+						'blockquote p:first-of-type::before': { content: 'none' },
+						'blockquote p:last-of-type::after': { content: 'none' },
+						h1: { marginTop: '0.75em', marginBottom: '0.125em', fontSize: '1.5em' },
+						h2: { marginTop: '0.5em', marginBottom: '0.125em', fontSize: '1.25em' },
+						h3: { marginTop: '0.5em', marginBottom: '0.125em', fontSize: '1.1em' },
+						h4: { marginTop: '0.375em', marginBottom: '0.125em', fontSize: '1em' },
+						li: { marginTop: '0.1em', marginBottom: '0.1em' },
+						'ul > li': {
+							paddingLeft: '0.75em'
+						},
+						'ol > li': {
+							paddingLeft: '0.75em'
+						}
+					}
+				}
 			}
 		}
 	},