fix: thumbnails with svelte 5

src/routes/assistant/[assistantId]/thumbnail.png/+server.ts

@@ -2,7 +2,7 @@ import ChatThumbnail from "./ChatThumbnail.svelte";
 import { collections } from "$lib/server/database";
 import { error, type RequestHandler } from "@sveltejs/kit";
 import { ObjectId } from "mongodb";
-import type { SvelteComponent } from "svelte";
+import { render } from "svelte/server";
 
 import { Resvg } from "@resvg/resvg-js";
 import satori from "satori";
@@ -41,16 +41,16 @@ export const GET: RequestHandler = (async ({ params }) => {
 			.then(async (buf) => "data:image/jpeg;base64," + buf.toString("base64"));
 	}
 
-	const renderedComponent = (ChatThumbnail as unknown as SvelteComponent).render({
-		name: assistant.name,
-		description: assistant.description,
-		createdByName: assistant.createdByName,
-		avatar,
+	const renderedComponent = render(ChatThumbnail, {
+		props: {
+			name: assistant.name,
+			description: assistant.description,
+			createdByName: assistant.createdByName,
+			avatar,
+		},
 	});
 
-	const reactLike = html(
-		"<style>" + renderedComponent.css.code + "</style>" + renderedComponent.html
-	);
+	const reactLike = html("<style>" + renderedComponent.head + "</style>" + renderedComponent.body);
 
 	const svg = await satori(reactLike, {
 		width: 1200,

src/routes/models/[...model]/thumbnail.png/+server.ts

@@ -1,6 +1,5 @@
 import ModelThumbnail from "./ModelThumbnail.svelte";
 import { redirect, type RequestHandler } from "@sveltejs/kit";
-import type { SvelteComponent } from "svelte";
 
 import { Resvg } from "@resvg/resvg-js";
 import satori from "satori";
@@ -10,6 +9,7 @@ import InterRegular from "$lib/server/fonts/Inter-Regular.ttf";
 import InterBold from "$lib/server/fonts/Inter-Bold.ttf";
 import { base } from "$app/paths";
 import { models } from "$lib/server/models";
+import { render } from "svelte/server";
 
 export const GET: RequestHandler = (async ({ params }) => {
 	const model = models.find(({ id }) => id === params.model);
@@ -17,14 +17,14 @@ export const GET: RequestHandler = (async ({ params }) => {
 	if (!model || model.unlisted) {
 		redirect(302, `${base}/`);
 	}
-	const renderedComponent = (ModelThumbnail as unknown as SvelteComponent).render({
-		name: model.name,
-		logoUrl: model.logoUrl,
+	const renderedComponent = render(ModelThumbnail, {
+		props: {
+			name: model.name,
+			logoUrl: model.logoUrl,
+		},
 	});
 
-	const reactLike = html(
-		"<style>" + renderedComponent.css.code + "</style>" + renderedComponent.html
-	);
+	const reactLike = html("<style>" + renderedComponent.head + "</style>" + renderedComponent.body);
 
 	const svg = await satori(reactLike, {
 		width: 1200,