From d9a4825bf69ac2694dbecd1907117392b9b8936b Mon Sep 17 00:00:00 2001
From: Reinder Vos de Wael <reinder.vosdewael@childmind.org>
Date: Tue, 24 Sep 2024 14:09:38 -0400
Subject: [PATCH 1/8] First working version

---
 package-lock.json                             | 13 +++
 package.json                                  |  2 +
 src/lib/components/Navigation.svelte          |  1 +
 src/lib/icons/EditIcon.svelte                 |  1 +
 src/lib/icons/EyeIcon.svelte                  |  1 +
 src/lib/icons/PlusIcon.svelte                 |  1 +
 src/lib/icons/SaveIcon.svelte                 |  1 +
 src/lib/icons/TrashIcon.svelte                |  1 +
 src/lib/server/secrets.ts                     |  2 +
 src/routes/+layout.svelte                     |  3 +-
 src/routes/api/claude/single/+server.ts       | 40 +++++++++
 src/routes/api/claude/stream/+server.ts       | 67 +++++++++++++++
 src/routes/api/markdown2docx/+server.ts       | 23 ++++++
 src/routes/document-generation/+page.svelte   | 82 +++++++++++++++++++
 .../document-generation/SectionNode.svelte    | 74 +++++++++++++++++
 src/routes/document-generation/presets.ts     | 44 ++++++++++
 src/routes/document-generation/section.ts     | 66 +++++++++++++++
 src/routes/gpt/Chat/Chat.svelte               |  2 +-
 18 files changed, 422 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/icons/EditIcon.svelte
 create mode 100644 src/lib/icons/EyeIcon.svelte
 create mode 100644 src/lib/icons/PlusIcon.svelte
 create mode 100644 src/lib/icons/SaveIcon.svelte
 create mode 100644 src/lib/icons/TrashIcon.svelte
 create mode 100644 src/routes/api/claude/single/+server.ts
 create mode 100644 src/routes/api/claude/stream/+server.ts
 create mode 100644 src/routes/api/markdown2docx/+server.ts
 create mode 100644 src/routes/document-generation/+page.svelte
 create mode 100644 src/routes/document-generation/SectionNode.svelte
 create mode 100644 src/routes/document-generation/presets.ts
 create mode 100644 src/routes/document-generation/section.ts

diff --git a/package-lock.json b/package-lock.json
index 9e329ff..17a739c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
 				"highlight.js": "^11.10.0",
 				"openai": "^4.52.4",
 				"pdfjs-dist": "^4.4.168",
+				"sortablejs": "^1.15.3",
 				"svelte-markdown": "^0.4.1",
 				"winston": "^3.13.0"
 			},
@@ -35,6 +36,7 @@
 				"@types/jsonwebtoken": "^9.0.6",
 				"@types/node": "20.12.2",
 				"@types/showdown": "^2.0.6",
+				"@types/sortablejs": "^1.15.8",
 				"@typescript-eslint/eslint-plugin": "^7.16.0",
 				"@typescript-eslint/parser": "^7.16.0",
 				"autoprefixer": "10.4.19",
@@ -2681,6 +2683,12 @@
 			"integrity": "sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==",
 			"dev": true
 		},
+		"node_modules/@types/sortablejs": {
+			"version": "1.15.8",
+			"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+			"integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
+			"dev": true
+		},
 		"node_modules/@types/triple-beam": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
@@ -6900,6 +6908,11 @@
 				"sorcery": "bin/sorcery"
 			}
 		},
+		"node_modules/sortablejs": {
+			"version": "1.15.3",
+			"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.3.tgz",
+			"integrity": "sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg=="
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/package.json b/package.json
index 686da5b..7617a9c 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
 		"@types/jsonwebtoken": "^9.0.6",
 		"@types/node": "20.12.2",
 		"@types/showdown": "^2.0.6",
+		"@types/sortablejs": "^1.15.8",
 		"@typescript-eslint/eslint-plugin": "^7.16.0",
 		"@typescript-eslint/parser": "^7.16.0",
 		"autoprefixer": "10.4.19",
@@ -60,6 +61,7 @@
 		"highlight.js": "^11.10.0",
 		"openai": "^4.52.4",
 		"pdfjs-dist": "^4.4.168",
+		"sortablejs": "^1.15.3",
 		"svelte-markdown": "^0.4.1",
 		"winston": "^3.13.0"
 	},
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index cd6fd6b..628ca99 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -5,6 +5,7 @@
 	const drawerStore = getDrawerStore();
 	const pages = [
 		{ name: 'Chatbot', href: '/gpt' },
+		{ name: 'Document Generation', href: '/document-generation' },
 		{ name: 'Document Intelligence', href: '/document-intelligence' },
 		{ name: 'Diarize (Submit)', href: '/diarize-submit' },
 		{ name: 'Diarize (Retrieve)', href: '/diarize-retrieve' },
diff --git a/src/lib/icons/EditIcon.svelte b/src/lib/icons/EditIcon.svelte
new file mode 100644
index 0000000..a758e38
--- /dev/null
+++ b/src/lib/icons/EditIcon.svelte
@@ -0,0 +1 @@
+<i class={`fa-solid fa-edit ${$$props.class}`} />
diff --git a/src/lib/icons/EyeIcon.svelte b/src/lib/icons/EyeIcon.svelte
new file mode 100644
index 0000000..07cf59d
--- /dev/null
+++ b/src/lib/icons/EyeIcon.svelte
@@ -0,0 +1 @@
+<i class={`fa-solid fa-eye ${$$props.class}`} />
diff --git a/src/lib/icons/PlusIcon.svelte b/src/lib/icons/PlusIcon.svelte
new file mode 100644
index 0000000..80becd5
--- /dev/null
+++ b/src/lib/icons/PlusIcon.svelte
@@ -0,0 +1 @@
+<i class={`fa-solid fa-plus ${$$props.class}`} />
diff --git a/src/lib/icons/SaveIcon.svelte b/src/lib/icons/SaveIcon.svelte
new file mode 100644
index 0000000..e62cf3d
--- /dev/null
+++ b/src/lib/icons/SaveIcon.svelte
@@ -0,0 +1 @@
+<i class={`fas fa-save ${$$props.class}`} />
diff --git a/src/lib/icons/TrashIcon.svelte b/src/lib/icons/TrashIcon.svelte
new file mode 100644
index 0000000..265d1ae
--- /dev/null
+++ b/src/lib/icons/TrashIcon.svelte
@@ -0,0 +1 @@
+<i class={`fa-solid fa-trash ${$$props.class}`} />
diff --git a/src/lib/server/secrets.ts b/src/lib/server/secrets.ts
index 5c66c33..41551f8 100644
--- a/src/lib/server/secrets.ts
+++ b/src/lib/server/secrets.ts
@@ -18,3 +18,5 @@ export const AZURE_DOCUMENT_INTELLIGENCE_KEY = env.AZURE_DOCUMENT_INTELLIGENCE_K
 
 export const AWS_ACCESS_KEY = env.AWS_ACCESS_KEY || '';
 export const AWS_SECRET_ACCESS_KEY = env.AWS_SECRET_ACCESS_KEY || '';
+
+export const PANDOC_SERVER_ENDPOINT = env.PANDOC_SERVER_ENDPOINT || '';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d4c7dc2..d94d197 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,7 @@
 	import Navigation from '$lib/components/Navigation.svelte';
 	import '@cmi-dair/skeleton-themes/cmi.postcss';
 	import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-	import { Drawer, Toast, initializeStores, storePopup } from '@skeletonlabs/skeleton';
+	import { Drawer, Toast, initializeStores, storePopup, Modal } from '@skeletonlabs/skeleton';
 
 	import hljs from 'highlight.js/lib/core';
 	import bash from 'highlight.js/lib/languages/bash';
@@ -35,6 +35,7 @@
 	<title>Agate</title>
 </svelte:head>
 
+<Modal />
 <Toast />
 <Drawer width="w-64">
 	<h2 class="p-4 h2">Navigation</h2>
diff --git a/src/routes/api/claude/single/+server.ts b/src/routes/api/claude/single/+server.ts
new file mode 100644
index 0000000..c2913c2
--- /dev/null
+++ b/src/routes/api/claude/single/+server.ts
@@ -0,0 +1,40 @@
+import { AWS_ACCESS_KEY, AWS_SECRET_ACCESS_KEY } from '$lib/server/secrets.js';
+import type { Message } from '$lib/types';
+import { BedrockRuntimeClient, ConverseCommand } from '@aws-sdk/client-bedrock-runtime';
+
+export async function POST({ request }) {
+	const data = await request.json();
+	const messages = data.messages as Message[];
+	const model = data.model;
+	const systemMessage = messages.filter((message) => message.role === 'system')[0];
+	const conversation = messages.filter((message) => message.role !== 'system');
+	const conversationCommand = conversation.map((message) => ({
+		role: message.role,
+		content: [{ text: message.content }]
+	}));
+	let region: string;
+
+	if (model === 'anthropic.claude-3-5-sonnet-20240620-v1:0') {
+		region = 'us-east-1';
+	} else {
+		region = 'us-west-2';
+	}
+
+	const bedrockRuntime = new BedrockRuntimeClient({
+		region,
+		credentials: { accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_ACCESS_KEY }
+	});
+
+	const command = new ConverseCommand({
+		modelId: model,
+		// @ts-expect-error because our message type contains a 'system' role.
+		messages: conversationCommand,
+		system: [{ text: systemMessage.content }]
+	});
+	const response = await bedrockRuntime.send(command);
+	if (!response.output?.message?.content) {
+		return new Response('');
+	}
+	const message = response.output?.message?.content[0].text;
+	return new Response(message);
+}
diff --git a/src/routes/api/claude/stream/+server.ts b/src/routes/api/claude/stream/+server.ts
new file mode 100644
index 0000000..5618fb1
--- /dev/null
+++ b/src/routes/api/claude/stream/+server.ts
@@ -0,0 +1,67 @@
+import { AWS_ACCESS_KEY, AWS_SECRET_ACCESS_KEY } from '$lib/server/secrets.js';
+import { logger } from '$lib/server/utils';
+import type { Message } from '$lib/types';
+import { BedrockRuntimeClient, ConverseStreamCommand } from '@aws-sdk/client-bedrock-runtime';
+
+export async function POST({ request }) {
+	const data = await request.json();
+	const messages = data.messages as Message[];
+	const model = data.model;
+	const systemMessage = messages.filter((message) => message.role === 'system')[0];
+	const conversation = messages.filter((message) => message.role !== 'system');
+	const conversationCommand = conversation.map((message) => ({
+		role: message.role,
+		content: [{ text: message.content }]
+	}));
+	let region: string;
+
+	if (model === 'anthropic.claude-3-5-sonnet-20240620-v1:0') {
+		region = 'us-east-1';
+	} else {
+		region = 'us-west-2';
+	}
+
+	const bedrockRuntime = new BedrockRuntimeClient({
+		region,
+		credentials: { accessKeyId: AWS_ACCESS_KEY, secretAccessKey: AWS_SECRET_ACCESS_KEY }
+	});
+
+	const command = new ConverseStreamCommand({
+		modelId: model,
+		// @ts-expect-error because our message type contains a 'system' role.
+		messages: conversationCommand,
+		system: [{ text: systemMessage.content }]
+	});
+	const response = await bedrockRuntime.send(command);
+	if (!response.stream) {
+		return new Response('No stream in response', { status: 500 });
+	}
+
+	const stream = new ReadableStream({
+		async start(controller) {
+			if (!response.stream) {
+				controller.close();
+				return;
+			}
+
+			for await (const item of response.stream) {
+				controller.enqueue(
+					JSON.stringify({ data: { content: item.contentBlockDelta?.delta?.text } }) + '\n\n'
+				);
+			}
+
+			controller.close();
+		},
+		cancel(controller) {
+			logger.info('Stream cancelled');
+			controller.close();
+		}
+	});
+
+	return new Response(stream, {
+		headers: {
+			'cache-control': 'no-cache',
+			'content-type': 'text/event-stream'
+		}
+	});
+}
diff --git a/src/routes/api/markdown2docx/+server.ts b/src/routes/api/markdown2docx/+server.ts
new file mode 100644
index 0000000..312f52c
--- /dev/null
+++ b/src/routes/api/markdown2docx/+server.ts
@@ -0,0 +1,23 @@
+import { PANDOC_SERVER_ENDPOINT } from '$lib/server/secrets.js';
+import { logger } from '$lib/server/utils';
+
+export const POST = async ({ request, fetch }) => {
+	logger.info('Pandoc API called');
+
+	const markdown = await request.text();
+	const blob = new Blob([markdown], { type: 'text/markdown' });
+	const form = new FormData();
+	form.append('to', 'docx');
+	form.append('from', 'md');
+	form.append('file', blob);
+
+	const response = await fetch(PANDOC_SERVER_ENDPOINT, {
+		method: 'POST',
+		body: form
+	});
+
+	if (!response.ok) {
+		return new Response(await response.text(), { status: 500 });
+	}
+	return new Response(await response.blob());
+};
diff --git a/src/routes/document-generation/+page.svelte b/src/routes/document-generation/+page.svelte
new file mode 100644
index 0000000..4497b4f
--- /dev/null
+++ b/src/routes/document-generation/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import SectionNode from './SectionNode.svelte';
+	import { Section } from './section';
+	import { getToastStore } from '@skeletonlabs/skeleton';
+	import { downloadBlob } from '$lib/fileHandling';
+	import LoadingBar from '$lib/components/LoadingBar.svelte';
+	import { customPreset, grantProposalPreset } from './presets';
+
+	let section: Section;
+	let isLoading = false;
+	let presets: { [key: string]: Section } = {
+		Custom: customPreset,
+		'Grant Proposal': grantProposalPreset
+	};
+	let selected = Object.keys(presets)[0];
+
+	const toastStore = getToastStore();
+
+	async function generateDocument() {
+		console.log('hi!');
+		isLoading = true;
+		try {
+			const claudeBody = JSON.stringify({
+				model: 'anthropic.claude-3-5-sonnet-20240620-v1:0',
+				messages: [
+					{
+						role: 'system',
+						content:
+							'You will receive a JSON formatted instruction for generating a document. The schema contains a title for each section, instructions for each section, file contents that should be used in that section and its children, and the children of a section. Your goal is to write a Markdown document based on this data.'
+					},
+					{ role: 'user', content: section.getPrompt() }
+				]
+			});
+			const llm_response = await fetch('/api/claude/single', {
+				method: 'POST',
+				body: claudeBody
+			});
+			if (!llm_response.ok) {
+				toastStore.trigger({
+					message: 'An error occurred in getting the LLM response.',
+					background: 'variant-soft-error'
+				});
+				return;
+			}
+			const md2docx_response = await fetch('/api/markdown2docx', {
+				body: await llm_response.text(),
+				method: 'POST'
+			});
+			if (!md2docx_response.ok) {
+				toastStore.trigger({
+					message: 'An error occurred in converting to Word.',
+					background: 'variant-soft-error'
+				});
+				return;
+			}
+			downloadBlob(await md2docx_response.blob(), section.title + '.docx');
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	$: section = presets[selected].clone();
+</script>
+
+{#if isLoading}
+	<LoadingBar />
+{:else}
+	<div class="space-y-2">
+		<label>
+			Presets:
+			<select bind:value={selected} class="input max-w-48">
+				{#each Object.keys(presets) as key}
+					<option value={key}>{key}</option>
+				{/each}
+			</select>
+		</label>
+		<SectionNode bind:section onDelete={() => {}} />
+		<button class="btn variant-soft-primary" on:click={async () => await generateDocument()}>
+			Generate
+		</button>
+	</div>
+{/if}
diff --git a/src/routes/document-generation/SectionNode.svelte b/src/routes/document-generation/SectionNode.svelte
new file mode 100644
index 0000000..89ac019
--- /dev/null
+++ b/src/routes/document-generation/SectionNode.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import EditIcon from '$lib/icons/EditIcon.svelte';
+	import PlusIcon from '$lib/icons/PlusIcon.svelte';
+	import SaveIcon from '$lib/icons/SaveIcon.svelte';
+	import TrashIcon from '$lib/icons/TrashIcon.svelte';
+	import { Section } from './section';
+
+	export let section: Section;
+	export let onDelete: () => void;
+	export let isRoot = true;
+
+	let editable = false;
+
+	function addSection() {
+		section.children = [
+			...section.children,
+			new Section({ title: 'Section Title', instructions: 'Section instructions' })
+		];
+	}
+
+	function onChildDelete(child: Section) {
+		section.children = section.children.filter((c) => c !== child);
+	}
+</script>
+
+<div class="card max-w-[48rem]">
+	<header class="card-header text-lg font-semibold flex justify-between items-center">
+		{#if editable}
+			<input type="text" class="input" bind:value={section.title} />
+		{:else}
+			{section.title}
+		{/if}
+		<div class="pl-3 space-x-2">
+			<button on:click={addSection}> <PlusIcon /> </button>
+			<button on:click={() => (editable = !editable)}>
+				{#if editable}
+					<SaveIcon />
+				{:else}
+					<EditIcon />
+				{/if}
+			</button>
+			{#if !isRoot}
+				<button on:click={onDelete}>
+					<TrashIcon />
+				</button>
+			{/if}
+		</div>
+	</header>
+	<section class="p-4 overflow-y-scroll max-h-96">
+		{#if editable}
+			<textarea class="input" bind:value={section.instructions} />
+			<input type="file" class="input" multiple bind:files={section.files} accept=".txt" />
+		{:else}
+			{#if (section.files?.length ?? 0) < section.n_required_files}
+				<aside class="alert variant-soft-error">
+					<div class="alert-message">
+						This section requires at least {section.n_required_files} file upload{section.n_required_files ==
+						1
+							? ''
+							: 's'}. Click the edit button to upload.
+					</div>
+				</aside>
+			{/if}
+			<div class="whitespace-pre-wrap">
+				{section.instructions}
+			</div>
+		{/if}
+	</section>
+	<footer class="card-footer space-y-4">
+		{#each section.children as child}
+			<svelte:self section={child} onDelete={() => onChildDelete(child)} isRoot={false} />
+		{/each}
+	</footer>
+</div>
diff --git a/src/routes/document-generation/presets.ts b/src/routes/document-generation/presets.ts
new file mode 100644
index 0000000..ee8c442
--- /dev/null
+++ b/src/routes/document-generation/presets.ts
@@ -0,0 +1,44 @@
+import { Section } from './section';
+
+export const customPreset = new Section({
+	title: 'Document Title',
+	instructions: 'Document instructions'
+});
+
+export const grantProposalPreset = new Section({
+	title: 'Title (create one if the user does not modify this)',
+	instructions:
+		'The user has provided a list of files containing information on the grant they are writing.',
+	n_required_files: 1,
+	children: [
+		new Section({
+			title: 'Aims',
+			instructions: `The goal is to construct a compelling argument that is very easy to understand and repeat. In practice, this is what will be read most closely, and what will be referred back to when describing the project to other panelists. An important point to remember is that unless a detail (e.g., piece of background, element of the approach) is directly tied to the argument you are making, it should not be included in your aims page. In order to build a compelling argument, you need to:
+(Paragraph 1) Clearly state the domain you are thinking about.
+(Paragraph 1) Make it crystal clear why this domain is important and impactful.
+(Paragraph 1) Point out issues or gaps in the current state-of-the-art in this domain, and expand until you are one argument shy of properly discouraging the reader. Note that every issue or gap you point out should be directly addressed in your aims that come later on.
+(Paragraph 1) In one sentence, summarize all of the problems you will solve in your project.
+(Paragraph 2) Clearly restate the problem you will solve, with slightly more emphasis on the impact it will have, and how you will accomplish it. This is the guiding light of your grant, and what you are striving towards.
+(Paragraph 2) Expand the proposal into components of the solution sequentially. You may include details pertaining to high-level approach (e.g., datasets, communities, or conceptual approaches leveraged), but no in-the-weeds methodological details unless they strengthen the argument for your approach.
+(Paragraph 2) Summarize, in one or two strong sentences, the concrete outcomes of your funded and successfully executed project on the field, linking each example to the aims you are about to enumerate in greater detail.
+(Paragraph 3) After the aims, tie this section up with an impact sentence that paints a picture of what the scientific landscape will look like for your domain once your project completes.
+
+The aims are the scaffolding of your project. They should complement one another, but be able to be tackled independently, and advanced in parallel to one another — if each aim is a resounding success, those downstream will be improved, not enabled; conversely, if an aim were to fail, it would not disable those downstream. You should have between 2–4 of them, but without numbers exceeding 3 (e.g., if you have 4 aims, at least two should be sub-aims of the same number). In general:
+Each must have a title that stands alone as a simple, impactful, and easy to articulate sentence for what the aim will accomplish. The aim title does not need to include methodological details unless the point of innovation for the aim is the methodology.
+The brief summary of each aim then restates the core gap being addressed, and how the proposed method solves this problem.
+You should include precisely enough methodological details in this section that make it clear that you know how to accomplish the stated aim, but not so much that you invite deep scrutiny on how you will go about it — this is the abstract, not the methods section.
+You should conclude each aim statement with a hypothesis and/or clear and measurable outcome. In a perfect world, if the aim is well constructed it should be impossible not to accomplish, i.e., a hypothesis that will surely be tested, or an approach that will be applied, rather than an improvement in baseline performance that may not be reached. This may not be possible for all sorts of projects, but is important to keep in mind when constructing the way that each aim will be evaluated.
+As mentioned above, the aims should be related and interconnected, but without dependence upon one another. If two are inextricably linked and one depends upon another, they should be paired sub-aims.
+`
+		}),
+		new Section({
+			title: 'Significance and Innovation',
+			instructions: `The significance and innovation are where you get the opportunity to make it even more obvious why the problem you’ve chosen to tackle is important, and how your work is different from the rest. These sections should expand elements of your aims that deserve more attention, and should mirror one another closely. The relationships, purpose, and structure of each of these sections are:
+Each aim states the work that will be performed and outcome that will be achieved.
+The significance section allows you to expand on challenges that exist in each aim (approximately 1–2 per, totally ~5 significance points) and restate in concrete terms why these are impactful gaps, and the impact that your work will have by addressing them. In other words, the significance allows you to provide a deeper and more concretely evidence-backed take on various critical elements of your problem statement, and immediately follow them up with your proposed solutions.
+The innovation section then reflects your significance — containing a perfect 1-1 mapping of points in the two, — with an emphasis on how your solution to this problem is novel and moved beyond prior attempts. You restate the solution that your work will produce, and highlight how it exceeds prior art. Importantly, presenting a positive spin on your work, as opposed to a negative spin on the prior work, is important here. You then get to restate the impact of your new solution, and, when possible, highlight other problems that will be unlocked by this innovation.
+Put together, you can effectively consider each significance-innovation pair as a complete story arc for one particular element of your proposal. Similar to the aims themselves, the ~5 points that are decided upon to be called out and elaborated upon here should complement one another but not depend on one another. If all elements succeed, the interactions increase the relative strength of each, but if one fails, the others all remain standing.
+`
+		})
+	]
+});
diff --git a/src/routes/document-generation/section.ts b/src/routes/document-generation/section.ts
new file mode 100644
index 0000000..a0d41c2
--- /dev/null
+++ b/src/routes/document-generation/section.ts
@@ -0,0 +1,66 @@
+type SectionOptions = {
+	title: string;
+	instructions: string;
+	files?: FileList | undefined;
+	n_required_files?: number;
+	children?: Section[];
+};
+
+export class Section {
+	public title: string;
+	public instructions: string;
+	public files: FileList | undefined;
+	public children: Section[];
+	public n_required_files: number;
+
+	constructor({
+		title,
+		instructions,
+		files = undefined,
+		children = [],
+		n_required_files = 0
+	}: SectionOptions) {
+		if (n_required_files < 0 || !Number.isInteger(n_required_files)) {
+			throw 'n_required_files must be a non-negative integer.';
+		}
+		this.title = title;
+		this.instructions = instructions;
+		this.files = files;
+		this.children = children;
+		this.n_required_files = n_required_files;
+	}
+
+	public getPrompt(): string {
+		return JSON.stringify(this.getPromptObj());
+	}
+
+	private getPromptObj(): object {
+		return {
+			title: this.title,
+			instructions: this.instructions,
+			files: this.files
+				? Array.from(this.files).map((file) => {
+						return {
+							fileName: file.name,
+							fileContent: file.text()
+						};
+					})
+				: undefined,
+			children: this.children.map((child) => {
+				return child.getPromptObj();
+			})
+		};
+	}
+
+	public clone() {
+		return new Section({
+			title: this.title,
+			instructions: this.instructions,
+			files: this.files,
+			children: this.children.map((child): Section => {
+				return child.clone();
+			}),
+			n_required_files: this.n_required_files
+		});
+	}
+}
diff --git a/src/routes/gpt/Chat/Chat.svelte b/src/routes/gpt/Chat/Chat.svelte
index f8798a0..18b544b 100644
--- a/src/routes/gpt/Chat/Chat.svelte
+++ b/src/routes/gpt/Chat/Chat.svelte
@@ -46,7 +46,7 @@
 		if (model === 'gpt-4o') {
 			endpoint = '/api/gpt';
 		} else {
-			endpoint = '/api/claude';
+			endpoint = '/api/claude/stream';
 		}
 		await fetch(endpoint, {
 			method: 'POST',

From c17ab7458dce88e93ff0d18b845e6c06695392a4 Mon Sep 17 00:00:00 2001
From: Reinder Vos de Wael <reinder.vosdewael@childmind.org>
Date: Thu, 26 Sep 2024 15:34:02 -0400
Subject: [PATCH 2/8] checkpoint dropzone

---
 src/lib/components/FileDropZone.svelte           | 16 ++++++++++++++++
 src/routes/dev/+page.svelte                      |  7 +++++++
 .../document-generation/SectionNode.svelte       | 10 ++++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/FileDropZone.svelte
 create mode 100644 src/routes/dev/+page.svelte

diff --git a/src/lib/components/FileDropZone.svelte b/src/lib/components/FileDropZone.svelte
new file mode 100644
index 0000000..8102c81
--- /dev/null
+++ b/src/lib/components/FileDropZone.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { FileDropzone } from '@skeletonlabs/skeleton';
+
+	export let name: string;
+	export let onchange: (file: File[]) => void;
+
+	let files: FileList;
+	let fileArray: File[] = [];
+</script>
+
+<FileDropzone {name} bind:files />
+{#each fileArray as file}
+	<button class="chip" on:click={() => (fileArray = fileArray.filter((f) => f !== file))}>
+		X {file.name}
+	</button>
+{/each}
diff --git a/src/routes/dev/+page.svelte b/src/routes/dev/+page.svelte
new file mode 100644
index 0000000..9dcdd21
--- /dev/null
+++ b/src/routes/dev/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import FileDropZone from '$lib/components/FileDropZone.svelte';
+
+	let files: File[];
+</script>
+
+<FileDropZone name="test" onchange={(f) => (files = f)} />
diff --git a/src/routes/document-generation/SectionNode.svelte b/src/routes/document-generation/SectionNode.svelte
index 89ac019..0a6e54d 100644
--- a/src/routes/document-generation/SectionNode.svelte
+++ b/src/routes/document-generation/SectionNode.svelte
@@ -3,6 +3,7 @@
 	import PlusIcon from '$lib/icons/PlusIcon.svelte';
 	import SaveIcon from '$lib/icons/SaveIcon.svelte';
 	import TrashIcon from '$lib/icons/TrashIcon.svelte';
+	import { FileDropzone } from '@skeletonlabs/skeleton';
 	import { Section } from './section';
 
 	export let section: Section;
@@ -49,7 +50,6 @@
 	<section class="p-4 overflow-y-scroll max-h-96">
 		{#if editable}
 			<textarea class="input" bind:value={section.instructions} />
-			<input type="file" class="input" multiple bind:files={section.files} accept=".txt" />
 		{:else}
 			{#if (section.files?.length ?? 0) < section.n_required_files}
 				<aside class="alert variant-soft-error">
@@ -57,10 +57,16 @@
 						This section requires at least {section.n_required_files} file upload{section.n_required_files ==
 						1
 							? ''
-							: 's'}. Click the edit button to upload.
+							: 's'}.
 					</div>
 				</aside>
 			{/if}
+			<FileDropzone name="Section Files" bind:files={section.files} />
+			{#if section.files}
+				{#each section.files as file}
+					<button class="chip variant-filled" on:click={section.files}>{file.name}</button>
+				{/each}
+			{/if}
 			<div class="whitespace-pre-wrap">
 				{section.instructions}
 			</div>

From fd7176f66387a884b8952a8250733f6b149b285d Mon Sep 17 00:00:00 2001
From: Reinder Vos de Wael <reinder.vosdewael@gmail.com>
Date: Fri, 27 Sep 2024 15:21:36 -0400
Subject: [PATCH 3/8] refactor: update to Svelte 5 (#88)

* refactor: update to Svelte 5

* refactor: remove Props type

* fix build

* fix another legacy deps
---
 .github/workflows/tests.yaml                  |   4 +-
 Dockerfile                                    |   2 +-
 package-lock.json                             | 286 +++++++++---------
 package.json                                  |   4 +-
 src/hooks.server.test.ts                      |  10 -
 src/lib/{chat.ts => chat.svelte.ts}           |   4 +-
 src/lib/components/LoadingBar.svelte          |   2 +-
 src/lib/components/Navbar.svelte              |   4 +-
 src/lib/components/Navigation.svelte          |   7 +-
 .../PageTemplates/FormActionPage.svelte       |  43 +--
 .../PageTemplates/FormApiPage.svelte          |  36 ++-
 .../PageTemplates/FormBasePage.svelte         |  27 +-
 src/lib/components/banners/BaseBanner.svelte  |  17 +-
 src/lib/icons/CopyIcon.svelte                 |   2 +-
 src/lib/icons/DownloadIcon.svelte             |   2 +-
 src/lib/icons/EnvelopeIcon.svelte             |   2 +-
 src/lib/icons/GithubIcon.svelte               |   2 +-
 src/lib/icons/UploadIcon.svelte               |   2 +-
 src/lib/types.ts                              |  58 ----
 src/routes/+layout.svelte                     |   5 +-
 src/routes/+page.server.ts                    |   2 +-
 src/routes/dalle/+page.svelte                 |  74 +++--
 src/routes/diarize-submit/+page.svelte        |  30 +-
 src/routes/document-intelligence/+page.svelte |  22 +-
 src/routes/embedding/+page.svelte             |  26 +-
 src/routes/gpt/+page.svelte                   |  16 +-
 src/routes/gpt/Chat/ChatBubble.svelte         |   8 +-
 src/routes/gpt/Chat/ChatInterface.svelte      |  27 +-
 .../gpt/Chat/Renderers/CodeBlock.svelte       |   8 +-
 src/routes/gpt/ChatHistory.svelte             |  10 +-
 src/routes/gpt/SystemPrompt.svelte            |   8 +-
 src/routes/text-to-speech/+page.svelte        |  62 ++--
 src/routes/transcription/+page.server.ts      |   2 +-
 src/routes/transcription/+page.svelte         |  44 ++-
 src/routes/transcription/whisperLanguages.ts  |  59 +++-
 tests/navigation.test.ts                      |   2 +-
 36 files changed, 458 insertions(+), 461 deletions(-)
 rename src/lib/{chat.ts => chat.svelte.ts} (97%)
 delete mode 100644 src/lib/types.ts

diff --git a/.github/workflows/tests.yaml b/.github/workflows/tests.yaml
index 236d264..0f9a93d 100644
--- a/.github/workflows/tests.yaml
+++ b/.github/workflows/tests.yaml
@@ -28,7 +28,7 @@ jobs:
           cache-dependency-path: package-lock.json
       - name: Install dependencies
         run: |
-          npm install
+          npm install --legacy-peer-deps
           npx playwright install --with-deps
       - name: Run tests
         run: |
@@ -51,5 +51,5 @@ jobs:
           cache: npm
           cache-dependency-path: package-lock.json
       - run: |
-          npm install
+          npm install --legacy-peer-deps
           npm run lint
diff --git a/Dockerfile b/Dockerfile
index 0f5eb3e..c96348b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,7 +3,7 @@ FROM node:22-alpine as builder
 WORKDIR /app
 COPY . .
 
-RUN npm ci && npm run build
+RUN npm ci --legacy-peer-deps && npm run build
 
 FROM node:22-alpine
 
diff --git a/package-lock.json b/package-lock.json
index 9e329ff..d06b27a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
 				"@skeletonlabs/skeleton": "2.9.0",
 				"@skeletonlabs/tw-plugin": "0.3.1",
 				"@sveltejs/kit": "^2.5.18",
-				"@sveltejs/vite-plugin-svelte": "^3.1.1",
+				"@sveltejs/vite-plugin-svelte": "^4.0.0-next.7",
 				"@tailwindcss/forms": "0.5.7",
 				"@tailwindcss/typography": "0.5.12",
 				"@types/eslint": "8.56.7",
@@ -45,7 +45,7 @@
 				"postcss": "8.4.38",
 				"prettier": "^3.3.2",
 				"prettier-plugin-svelte": "^3.2.5",
-				"svelte": "^4.2.19",
+				"svelte": "^5.0.0-next.259",
 				"svelte-check": "^3.8.4",
 				"tailwindcss": "3.4.3",
 				"tslib": "^2.6.3",
@@ -74,6 +74,7 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
 				"@jridgewell/trace-mapping": "^0.3.24"
@@ -873,6 +874,7 @@
 			"cpu": [
 				"ppc64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"aix"
@@ -888,6 +890,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -903,6 +906,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -918,6 +922,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -933,6 +938,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -948,6 +954,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -963,6 +970,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -978,6 +986,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -993,6 +1002,7 @@
 			"cpu": [
 				"arm"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1008,6 +1018,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1023,6 +1034,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1038,6 +1050,7 @@
 			"cpu": [
 				"loong64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1053,6 +1066,7 @@
 			"cpu": [
 				"mips64el"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1068,6 +1082,7 @@
 			"cpu": [
 				"ppc64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1083,6 +1098,7 @@
 			"cpu": [
 				"riscv64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1098,6 +1114,7 @@
 			"cpu": [
 				"s390x"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1113,6 +1130,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1128,6 +1146,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"netbsd"
@@ -1143,6 +1162,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"openbsd"
@@ -1158,6 +1178,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"sunos"
@@ -1173,6 +1194,7 @@
 			"cpu": [
 				"arm64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -1188,6 +1210,7 @@
 			"cpu": [
 				"ia32"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -1203,6 +1226,7 @@
 			"cpu": [
 				"x64"
 			],
+			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -1425,6 +1449,7 @@
 			"version": "0.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
 			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -1438,6 +1463,7 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -1446,6 +1472,7 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -1459,6 +1486,7 @@
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1571,7 +1599,8 @@
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.25",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
-			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
+			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
+			"dev": true
 		},
 		"node_modules/@rollup/plugin-commonjs": {
 			"version": "26.0.1",
@@ -2496,6 +2525,7 @@
 			"version": "2.5.26",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.26.tgz",
 			"integrity": "sha512-8l1JTIM2L+bS8ebq1E+nGjv/YSKSnD9Q19bYIUkc41vaEG2JjVUx6ikvPIJv2hkQAuqJLzoPrXlKk4KcyWOv3Q==",
+			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
@@ -2524,39 +2554,40 @@
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz",
-			"integrity": "sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==",
+			"version": "4.0.0-next.7",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.0-next.7.tgz",
+			"integrity": "sha512-yMUnAqquoayvBDztk1rWUgdtvjv7YcHgopCAB7sWl9SQht8U/7lqwTlJU0ZTAY09pFFRe6bbakd7YoiyyIvJiA==",
+			"dev": true,
 			"dependencies": {
-				"@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
-				"debug": "^4.3.4",
+				"@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
+				"debug": "^4.3.6",
 				"deepmerge": "^4.3.1",
 				"kleur": "^4.1.5",
-				"magic-string": "^0.30.10",
-				"svelte-hmr": "^0.16.0",
-				"vitefu": "^0.2.5"
+				"magic-string": "^0.30.11",
+				"vitefu": "^1.0.2"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20"
+				"node": "^18.0.0 || ^20.0.0 || >=22"
 			},
 			"peerDependencies": {
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"svelte": "^5.0.0-next.96 || ^5.0.0",
 				"vite": "^5.0.0"
 			}
 		},
 		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz",
-			"integrity": "sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==",
+			"version": "3.0.0-next.3",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-3.0.0-next.3.tgz",
+			"integrity": "sha512-kuGJ2CZ5lAw3gKF8Kw0AfKtUJWbwdlDHY14K413B0MCyrzvQvsKTorwmwZcky0+QqY6RnVIZ/5FttB9bQmkLXg==",
+			"dev": true,
 			"dependencies": {
-				"debug": "^4.3.4"
+				"debug": "^4.3.5"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20"
+				"node": "^18.0.0 || ^20.0.0 || >=22"
 			},
 			"peerDependencies": {
-				"@sveltejs/vite-plugin-svelte": "^3.0.0",
-				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"@sveltejs/vite-plugin-svelte": "^4.0.0-next.0||^4.0.0",
+				"svelte": "^5.0.0-next.96 || ^5.0.0",
 				"vite": "^5.0.0"
 			}
 		},
@@ -2590,7 +2621,8 @@
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+			"dev": true
 		},
 		"node_modules/@types/eslint": {
 			"version": "8.56.7",
@@ -3003,6 +3035,7 @@
 			"version": "8.12.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
 			"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -3019,6 +3052,15 @@
 				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
 			}
 		},
+		"node_modules/acorn-typescript": {
+			"version": "1.4.13",
+			"resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+			"integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+			"dev": true,
+			"peerDependencies": {
+				"acorn": ">=8.9.0"
+			}
+		},
 		"node_modules/acorn-walk": {
 			"version": "8.3.4",
 			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
@@ -3143,11 +3185,12 @@
 			"dev": true
 		},
 		"node_modules/aria-query": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dependencies": {
-				"dequal": "^2.0.3"
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.4"
 			}
 		},
 		"node_modules/array-union": {
@@ -3219,6 +3262,7 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -3488,26 +3532,6 @@
 				"node": ">=10"
 			}
 		},
-		"node_modules/code-red": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
-			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-			"dependencies": {
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@types/estree": "^1.0.1",
-				"acorn": "^8.10.0",
-				"estree-walker": "^3.0.3",
-				"periscopic": "^3.1.0"
-			}
-		},
-		"node_modules/code-red/node_modules/estree-walker": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dependencies": {
-				"@types/estree": "^1.0.0"
-			}
-		},
 		"node_modules/color": {
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
@@ -3620,6 +3644,7 @@
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"dev": true,
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -3637,18 +3662,6 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/css-tree": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
-			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dependencies": {
-				"mdn-data": "2.0.30",
-				"source-map-js": "^1.0.1"
-			},
-			"engines": {
-				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
-			}
-		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3776,14 +3789,6 @@
 			"integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
 			"optional": true
 		},
-		"node_modules/dequal": {
-			"version": "2.0.3",
-			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"engines": {
-				"node": ">=6"
-			}
-		},
 		"node_modules/detect-indent": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
@@ -3805,7 +3810,8 @@
 		"node_modules/devalue": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
-			"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA=="
+			"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
+			"dev": true
 		},
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
@@ -3914,6 +3920,7 @@
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
 			"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+			"dev": true,
 			"hasInstallScript": true,
 			"bin": {
 				"esbuild": "bin/esbuild"
@@ -4150,7 +4157,8 @@
 		"node_modules/esm-env": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
-			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA=="
+			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
+			"dev": true
 		},
 		"node_modules/espree": {
 			"version": "9.6.1",
@@ -4181,6 +4189,16 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/esrap": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
+			"integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
+			"dev": true,
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15",
+				"@types/estree": "^1.0.1"
+			}
+		},
 		"node_modules/esrecurse": {
 			"version": "4.3.0",
 			"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -4672,7 +4690,8 @@
 		"node_modules/globalyzer": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
-			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
+			"dev": true
 		},
 		"node_modules/globby": {
 			"version": "11.1.0",
@@ -4697,7 +4716,8 @@
 		"node_modules/globrex": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+			"dev": true
 		},
 		"node_modules/gopd": {
 			"version": "1.0.1",
@@ -4883,6 +4903,7 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
 			"integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==",
+			"dev": true,
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/wooorm"
@@ -5152,6 +5173,7 @@
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
 			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -5214,7 +5236,8 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"dev": true
 		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
@@ -5322,11 +5345,6 @@
 				"node": ">= 16"
 			}
 		},
-		"node_modules/mdn-data": {
-			"version": "2.0.30",
-			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-		},
 		"node_modules/merge-stream": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -5500,6 +5518,7 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
 			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+			"dev": true,
 			"engines": {
 				"node": ">=4"
 			}
@@ -5508,6 +5527,7 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
 			"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+			"dev": true,
 			"engines": {
 				"node": ">=10"
 			}
@@ -5538,6 +5558,7 @@
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
 			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -5961,36 +5982,11 @@
 				"path2d": "^0.2.1"
 			}
 		},
-		"node_modules/periscopic": {
-			"version": "3.1.0",
-			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
-			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dependencies": {
-				"@types/estree": "^1.0.0",
-				"estree-walker": "^3.0.0",
-				"is-reference": "^3.0.0"
-			}
-		},
-		"node_modules/periscopic/node_modules/estree-walker": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dependencies": {
-				"@types/estree": "^1.0.0"
-			}
-		},
-		"node_modules/periscopic/node_modules/is-reference": {
-			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
-			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dependencies": {
-				"@types/estree": "*"
-			}
-		},
 		"node_modules/picocolors": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
+			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+			"dev": true
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
@@ -6612,6 +6608,7 @@
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
 			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+			"dev": true,
 			"dependencies": {
 				"mri": "^1.1.0"
 			},
@@ -6753,7 +6750,8 @@
 		"node_modules/set-cookie-parser": {
 			"version": "2.7.0",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
-			"integrity": "sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ=="
+			"integrity": "sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ==",
+			"dev": true
 		},
 		"node_modules/set-function-length": {
 			"version": "1.2.2",
@@ -6867,6 +6865,7 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
 			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+			"dev": true,
 			"dependencies": {
 				"@polka/url": "^1.0.0-next.24",
 				"mrmime": "^2.0.0",
@@ -6904,6 +6903,7 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -7118,27 +7118,27 @@
 			}
 		},
 		"node_modules/svelte": {
-			"version": "4.2.19",
-			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz",
-			"integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==",
-			"dependencies": {
-				"@ampproject/remapping": "^2.2.1",
-				"@jridgewell/sourcemap-codec": "^1.4.15",
-				"@jridgewell/trace-mapping": "^0.3.18",
-				"@types/estree": "^1.0.1",
-				"acorn": "^8.9.0",
-				"aria-query": "^5.3.0",
-				"axobject-query": "^4.0.0",
-				"code-red": "^1.0.3",
-				"css-tree": "^2.3.1",
-				"estree-walker": "^3.0.3",
-				"is-reference": "^3.0.1",
+			"version": "5.0.0-next.259",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.259.tgz",
+			"integrity": "sha512-trRFSjKD+11KbXerGmBT0Uc+ZSNUhxn0aQ02q9tjtig/FV24dpZlXmCrcZTZliOLS0P8JWjw6xaWgNheZZoYOg==",
+			"dev": true,
+			"dependencies": {
+				"@ampproject/remapping": "^2.3.0",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@types/estree": "^1.0.5",
+				"acorn": "^8.12.1",
+				"acorn-typescript": "^1.4.13",
+				"aria-query": "^5.3.1",
+				"axobject-query": "^4.1.0",
+				"esm-env": "^1.0.0",
+				"esrap": "^1.2.2",
+				"is-reference": "^3.0.2",
 				"locate-character": "^3.0.0",
-				"magic-string": "^0.30.4",
-				"periscopic": "^3.1.0"
+				"magic-string": "^0.30.11",
+				"zimmerframe": "^1.1.2"
 			},
 			"engines": {
-				"node": ">=16"
+				"node": ">=18"
 			}
 		},
 		"node_modules/svelte-check": {
@@ -7216,17 +7216,6 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
-		"node_modules/svelte-hmr": {
-			"version": "0.16.0",
-			"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.16.0.tgz",
-			"integrity": "sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==",
-			"engines": {
-				"node": "^12.20 || ^14.13.1 || >= 16"
-			},
-			"peerDependencies": {
-				"svelte": "^3.19.0 || ^4.0.0"
-			}
-		},
 		"node_modules/svelte-markdown": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.4.1.tgz",
@@ -7301,18 +7290,11 @@
 				}
 			}
 		},
-		"node_modules/svelte/node_modules/estree-walker": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
-			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dependencies": {
-				"@types/estree": "^1.0.0"
-			}
-		},
 		"node_modules/svelte/node_modules/is-reference": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -7506,6 +7488,7 @@
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
 			"integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+			"dev": true,
 			"dependencies": {
 				"globalyzer": "0.1.0",
 				"globrex": "^0.1.2"
@@ -7560,6 +7543,7 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
 			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -7758,6 +7742,7 @@
 			"version": "5.4.4",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.4.tgz",
 			"integrity": "sha512-RHFCkULitycHVTtelJ6jQLd+KSAAzOgEYorV32R2q++M6COBjKJR6BxqClwp5sf0XaBDjVMuJ9wnNfyAJwjMkA==",
+			"dev": true,
 			"dependencies": {
 				"esbuild": "^0.21.3",
 				"postcss": "^8.4.43",
@@ -7860,6 +7845,7 @@
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
 			"hasInstallScript": true,
 			"optional": true,
 			"os": [
@@ -7873,6 +7859,7 @@
 			"version": "8.4.45",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
 			"integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
+			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -7897,9 +7884,14 @@
 			}
 		},
 		"node_modules/vitefu": {
-			"version": "0.2.5",
-			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-			"integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.2.tgz",
+			"integrity": "sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==",
+			"dev": true,
+			"workspaces": [
+				"tests/deps/*",
+				"tests/projects/*"
+			],
 			"peerDependencies": {
 				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
 			},
@@ -8299,6 +8291,12 @@
 			"funding": {
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
+		},
+		"node_modules/zimmerframe": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
+			"dev": true
 		}
 	}
 }
diff --git a/package.json b/package.json
index 686da5b..2dc219c 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
 		"@skeletonlabs/skeleton": "2.9.0",
 		"@skeletonlabs/tw-plugin": "0.3.1",
 		"@sveltejs/kit": "^2.5.18",
-		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.7",
 		"@tailwindcss/forms": "0.5.7",
 		"@tailwindcss/typography": "0.5.12",
 		"@types/eslint": "8.56.7",
@@ -40,7 +40,7 @@
 		"postcss": "8.4.38",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.5",
-		"svelte": "^4.2.19",
+		"svelte": "^5.0.0-next.259",
 		"svelte-check": "^3.8.4",
 		"tailwindcss": "3.4.3",
 		"tslib": "^2.6.3",
diff --git a/src/hooks.server.test.ts b/src/hooks.server.test.ts
index 22c8ec3..99fe1a3 100644
--- a/src/hooks.server.test.ts
+++ b/src/hooks.server.test.ts
@@ -1,16 +1,6 @@
 import { handle } from '../src/hooks.server';
 import { describe, it, expect, vi } from 'vitest';
 
-function createEvent() {
-	return {
-		request: {
-			headers: new Map(),
-			method: 'GET',
-			url: 'https://example.com'
-		}
-	};
-}
-
 function createResolve() {
 	return vi.fn().mockResolvedValue({
 		status: 200,
diff --git a/src/lib/chat.ts b/src/lib/chat.svelte.ts
similarity index 97%
rename from src/lib/chat.ts
rename to src/lib/chat.svelte.ts
index 1c57210..e97ed8f 100644
--- a/src/lib/chat.ts
+++ b/src/lib/chat.svelte.ts
@@ -11,8 +11,8 @@ export type chatOptions = {
 
 export class Chat {
 	readonly id: string;
-	public title: string;
-	public messages: Message[];
+	public title: string = $state('');
+	public messages: Message[] = $state([]);
 	private _last_modified: Date;
 
 	get last_modified() {
diff --git a/src/lib/components/LoadingBar.svelte b/src/lib/components/LoadingBar.svelte
index 1933516..0a69dd5 100644
--- a/src/lib/components/LoadingBar.svelte
+++ b/src/lib/components/LoadingBar.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { ProgressRadial } from '@skeletonlabs/skeleton';
 
-	export let show = true;
+	let { show = $bindable(true) } = $props();
 </script>
 
 <div class={`flex items-center justify-center m-3 ${show ? '' : 'hidden'}`}>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 1cbeeb5..31600b9 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -13,7 +13,7 @@
 <AppBar data-testid="app-bar">
 	<svelte:fragment slot="lead">
 		<div class="flex items-center">
-			<button class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
+			<button class="md:hidden btn btn-sm mr-4" onclick={drawerOpen} aria-label="Open Drawer">
 				<span>
 					<svg viewBox="0 0 100 80" class="fill-token w-4 h-4">
 						<rect width="100" height="20" />
@@ -22,7 +22,7 @@
 					</svg>
 				</span>
 			</button>
-			<a href="/" data-testid="a-cmi-logo" class="hidden md:block">
+			<a href="/" data-testid="a-cmi-logo" class="hidden md:block" aria-label="Home button">
 				<img src="/cmi.svg" alt="Agate" class="w-28" />
 			</a>
 		</div>
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index cd6fd6b..a9ec3e5 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -18,15 +18,16 @@
 		drawerStore.close();
 	}
 
-	$: classesActive = (href: string) =>
-		href === $page.url.pathname ? 'bg-primary-100 dark:bg-primary-700' : '';
+	let classesActive = $derived((href: string) =>
+		href === $page.url.pathname ? 'bg-primary-100 dark:bg-primary-700' : ''
+	);
 </script>
 
 <nav class="list-nav p-4 flex flex-col" data-testid="div-navigation">
 	<ul style="flex-grow: 1;">
 		{#each pages as { name, href }}
 			<li>
-				<a {href} class={classesActive(href)} data-testid="a-navigation" on:click={drawerClose}>
+				<a {href} class={classesActive(href)} data-testid="a-navigation" onclick={drawerClose}>
 					{name}
 				</a>
 			</li>
diff --git a/src/lib/components/PageTemplates/FormActionPage.svelte b/src/lib/components/PageTemplates/FormActionPage.svelte
index d46b0bd..cb0583e 100644
--- a/src/lib/components/PageTemplates/FormActionPage.svelte
+++ b/src/lib/components/PageTemplates/FormActionPage.svelte
@@ -2,17 +2,27 @@
 	import { enhance } from '$app/forms';
 	import type { SubmitFunction } from '@sveltejs/kit';
 	import FormBasePage from './FormBasePage.svelte';
+	import type { Snippet } from 'svelte';
 
-	export let title: string;
-	export let description: string;
-	export let enhancer: SubmitFunction = () => {
-		return async ({ update }) => {
-			await update();
-		};
-	};
-	export let isLoading = false;
-
-	export let hasBusinessAssociateAgreemment = false;
+	let {
+		title,
+		description,
+		children,
+		hasBusinessAssociateAgreemment = false,
+		isLoading = $bindable(false),
+		enhancer = () => {
+			return async ({ update }) => {
+				await update();
+			};
+		}
+	}: {
+		title: string;
+		description: string;
+		children: Snippet;
+		hasBusinessAssociateAgreemment?: boolean;
+		isLoading?: boolean;
+		enhancer?: SubmitFunction;
+	} = $props();
 
 	const loadingEnhancer: SubmitFunction = ({
 		formElement,
@@ -43,14 +53,7 @@
 </script>
 
 <FormBasePage {title} {description} {isLoading} {hasBusinessAssociateAgreemment}>
-	<svelte:fragment slot="form">
-		<form
-			method="POST"
-			class="space-y-2"
-			use:enhance={loadingEnhancer}
-			enctype="multipart/form-data"
-		>
-			<slot name="form" />
-		</form>
-	</svelte:fragment>
+	<form method="POST" class="space-y-2" use:enhance={loadingEnhancer} enctype="multipart/form-data">
+		{@render children()}
+	</form>
 </FormBasePage>
diff --git a/src/lib/components/PageTemplates/FormApiPage.svelte b/src/lib/components/PageTemplates/FormApiPage.svelte
index 7ad34b7..df6a315 100644
--- a/src/lib/components/PageTemplates/FormApiPage.svelte
+++ b/src/lib/components/PageTemplates/FormApiPage.svelte
@@ -1,12 +1,22 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import FormBasePage from './FormBasePage.svelte';
 
-	export let title: string;
-	export let description: string;
-	export let onSubmit: () => void;
-	export let isLoading = false;
-
-	export let hasBusinessAssociateAgreemment = false;
+	let {
+		title,
+		description,
+		onSubmit,
+		children,
+		hasBusinessAssociateAgreemment = false,
+		isLoading = $bindable(false)
+	}: {
+		title: string;
+		description: string;
+		onSubmit: () => Promise<void>;
+		children: Snippet;
+		hasBusinessAssociateAgreemment?: boolean;
+		isLoading?: boolean;
+	} = $props();
 
 	async function onSubmitLoading() {
 		isLoading = true;
@@ -16,12 +26,10 @@
 </script>
 
 <FormBasePage {title} {description} {isLoading} {hasBusinessAssociateAgreemment}>
-	<svelte:fragment slot="form">
-		<form class="space-y-2" on:submit={onSubmitLoading}>
-			<slot name="form" />
-			<button type="submit" class="btn variant-filled-primary" data-testid="form-api-page-button">
-				Submit
-			</button>
-		</form>
-	</svelte:fragment>
+	<form class="space-y-2" onsubmit={onSubmitLoading}>
+		{@render children()}
+		<button type="submit" class="btn variant-filled-primary" data-testid="form-api-page-button">
+			Submit
+		</button>
+	</form>
 </FormBasePage>
diff --git a/src/lib/components/PageTemplates/FormBasePage.svelte b/src/lib/components/PageTemplates/FormBasePage.svelte
index eb4ddd5..600e662 100644
--- a/src/lib/components/PageTemplates/FormBasePage.svelte
+++ b/src/lib/components/PageTemplates/FormBasePage.svelte
@@ -4,15 +4,24 @@
 	import LoadingBar from '$lib/components/LoadingBar.svelte';
 	import NoBaaBanner from '$lib/components/banners/NoBaaBanner.svelte';
 	import HasBaaBanner from '$lib/components/banners/HasBaaBanner.svelte';
-
-	export let title: string;
-	export let description: string;
-	export let isLoading = false;
-
-	export let hasBusinessAssociateAgreemment = false;
+	import type { Snippet } from 'svelte';
+
+	let {
+		title,
+		description,
+		hasBusinessAssociateAgreemment,
+		children,
+		isLoading = $bindable(false)
+	}: {
+		title: string;
+		description: string;
+		hasBusinessAssociateAgreemment: boolean;
+		children?: Snippet;
+		isLoading?: boolean;
+	} = $props();
 
 	const toastStore = getToastStore();
-	$: {
+	$effect(() => {
 		if ($page.status >= 400) {
 			const toast: ToastSettings = {
 				message: $page.form.message,
@@ -20,7 +29,7 @@
 			};
 			toastStore.trigger(toast);
 		}
-	}
+	});
 </script>
 
 <svelte:head>
@@ -36,6 +45,6 @@
 <h3 class="h3">{title}</h3>
 <p>{description}</p>
 
-<slot name="form" />
+{@render children?.()}
 
 <LoadingBar show={isLoading} />
diff --git a/src/lib/components/banners/BaseBanner.svelte b/src/lib/components/banners/BaseBanner.svelte
index 922e2a4..13941b0 100644
--- a/src/lib/components/banners/BaseBanner.svelte
+++ b/src/lib/components/banners/BaseBanner.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
 	import { modeCurrent } from '@skeletonlabs/skeleton';
-	export let title: string;
-	export let message: string;
 
-	export let variant: 'success' | 'error' | 'warning';
-	let currentClass: string;
+	let {
+		title,
+		message,
+		variant
+	}: {
+		title: string;
+		message: string;
+		variant: 'success' | 'error' | 'warning';
+	} = $props();
 
 	const colorLightClass = `alert variant-soft-${variant}`;
 	const colorDarkClass = `alert variant-filled-${variant}`;
 
-	$: currentClass = $modeCurrent ? colorLightClass : colorDarkClass;
+	const currentClass = $derived($modeCurrent ? colorLightClass : colorDarkClass);
 </script>
 
 <!--Ensure dynamic classes aren't purged.-->
@@ -22,7 +27,7 @@
 		variant-filled-error 
 		variant-filled-warning
 	`}
-/>
+></span>
 
 <aside class={currentClass}>
 	<div class="alert-message">
diff --git a/src/lib/icons/CopyIcon.svelte b/src/lib/icons/CopyIcon.svelte
index 10f2954..86df3cc 100644
--- a/src/lib/icons/CopyIcon.svelte
+++ b/src/lib/icons/CopyIcon.svelte
@@ -1 +1 @@
-<i class={`fa-solid fa-copy ${$$props.class}`} />
+<i class={`fa-solid fa-copy ${$$props.class}`}></i>
diff --git a/src/lib/icons/DownloadIcon.svelte b/src/lib/icons/DownloadIcon.svelte
index 01b01c4..1552c30 100644
--- a/src/lib/icons/DownloadIcon.svelte
+++ b/src/lib/icons/DownloadIcon.svelte
@@ -1 +1 @@
-<i class={`fas fa-download ${$$props.class}`} />
+<i class={`fas fa-download ${$$props.class}`}></i>
diff --git a/src/lib/icons/EnvelopeIcon.svelte b/src/lib/icons/EnvelopeIcon.svelte
index c2aa2a9..69717d1 100644
--- a/src/lib/icons/EnvelopeIcon.svelte
+++ b/src/lib/icons/EnvelopeIcon.svelte
@@ -1 +1 @@
-<i class={`fa-solid fa-envelope ${$$props.class}`} />
+<i class={`fa-solid fa-envelope ${$$props.class}`}></i>
diff --git a/src/lib/icons/GithubIcon.svelte b/src/lib/icons/GithubIcon.svelte
index 4fea5cc..a22e9f9 100644
--- a/src/lib/icons/GithubIcon.svelte
+++ b/src/lib/icons/GithubIcon.svelte
@@ -1 +1 @@
-<i class={`fa-brands fa-github ${$$props.class}`} />
+<i class={`fa-brands fa-github ${$$props.class}`}></i>
diff --git a/src/lib/icons/UploadIcon.svelte b/src/lib/icons/UploadIcon.svelte
index 1152e15..b644db0 100644
--- a/src/lib/icons/UploadIcon.svelte
+++ b/src/lib/icons/UploadIcon.svelte
@@ -1 +1 @@
-<i class={`fas fa-file-upload ${$$props.class}`} />
+<i class={`fas fa-file-upload ${$$props.class}`}></i>
diff --git a/src/lib/types.ts b/src/lib/types.ts
deleted file mode 100644
index ba0c4bb..0000000
--- a/src/lib/types.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-export type whisperLanguagesTypes =
-	| 'af'
-	| 'ar'
-	| 'hy'
-	| 'az'
-	| 'be'
-	| 'bs'
-	| 'bg'
-	| 'ca'
-	| 'zh'
-	| 'hr'
-	| 'cs'
-	| 'da'
-	| 'nl'
-	| 'en'
-	| 'et'
-	| 'fi'
-	| 'fr'
-	| 'gl'
-	| 'de'
-	| 'el'
-	| 'he'
-	| 'hi'
-	| 'hu'
-	| 'is'
-	| 'id'
-	| 'it'
-	| 'ja'
-	| 'kn'
-	| 'kk'
-	| 'ko'
-	| 'lv'
-	| 'lt'
-	| 'mk'
-	| 'ms'
-	| 'mr'
-	| 'mi'
-	| 'ne'
-	| 'no'
-	| 'fa'
-	| 'pl'
-	| 'pt'
-	| 'ro'
-	| 'ru'
-	| 'sr'
-	| 'sk'
-	| 'sl'
-	| 'es'
-	| 'sw'
-	| 'sv'
-	| 'tl'
-	| 'ta'
-	| 'th'
-	| 'tr'
-	| 'uk'
-	| 'ur'
-	| 'vi'
-	| 'cy';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d4c7dc2..1fb3305 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -16,6 +16,9 @@
 	import typescript from 'highlight.js/lib/languages/typescript';
 	import xml from 'highlight.js/lib/languages/xml';
 	import 'highlight.js/styles/github.css';
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children: Snippet } = $props();
 
 	hljs.registerLanguage('bash', bash);
 	hljs.registerLanguage('css', css);
@@ -49,7 +52,7 @@
 			<Navigation />
 		</div>
 		<div class="px-5 mt-5 w-auto min-w-[332px] min-h-[90%]">
-			<slot />
+			{@render children()}
 		</div>
 	</div>
 </div>
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index 43201a8..8bb27ec 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -1,5 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export function load() {
-	redirect(308, '/gpt');
+	redirect(307, '/gpt');
 }
diff --git a/src/routes/dalle/+page.svelte b/src/routes/dalle/+page.svelte
index b3b0d1b..c833113 100644
--- a/src/routes/dalle/+page.svelte
+++ b/src/routes/dalle/+page.svelte
@@ -15,46 +15,44 @@
 </script>
 
 <FormActionPage {title} {description} {enhancer}>
-	<svelte:fragment slot="form">
-		<label for="file">Prompt</label>
-		<textarea
-			id="text"
-			data-testid="dalle-text-input"
-			name="text"
-			class="textarea"
-			rows="5"
-			placeholder="Describe what you want to see..."
-			required
-		/>
-		<label for="quality">Quality</label>
-		<select
-			data-testid="dalle-quality-select"
-			class="select"
-			id="quality"
-			name="quality"
-			value="standard"
-		>
-			<option value="standard">Standard</option>
-			<option value="hd">HD</option>
-		</select>
+	<label for="file">Prompt</label>
+	<textarea
+		id="text"
+		data-testid="dalle-text-input"
+		name="text"
+		class="textarea"
+		rows="5"
+		placeholder="Describe what you want to see..."
+		required
+	></textarea>
+	<label for="quality">Quality</label>
+	<select
+		data-testid="dalle-quality-select"
+		class="select"
+		id="quality"
+		name="quality"
+		value="standard"
+	>
+		<option value="standard">Standard</option>
+		<option value="hd">HD</option>
+	</select>
 
-		<label for="size">Size</label>
-		<select data-testid="dalle-size-select" class="select" id="size" name="size" value="1024x1024">
-			<option value="1024x1024">1024x1024</option>
-			<option value="1024x1792">1024x1792</option>
-			<option value="1792x1024">1792x1024</option>
-		</select>
-		<label for="number">Number of images</label>
-		<select data-testid="dalle-n-select" class="select" id="number" name="number" value={1}>
-			{#each Array(maxImages) as _, i}
-				<option value={i + 1}>{i + 1}</option>
-			{/each}
-		</select>
+	<label for="size">Size</label>
+	<select data-testid="dalle-size-select" class="select" id="size" name="size" value="1024x1024">
+		<option value="1024x1024">1024x1024</option>
+		<option value="1024x1792">1024x1792</option>
+		<option value="1792x1024">1792x1024</option>
+	</select>
+	<label for="number">Number of images</label>
+	<select data-testid="dalle-n-select" class="select" id="number" name="number" value={1}>
+		{#each Array(maxImages) as _, i}
+			<option value={i + 1}>{i + 1}</option>
+		{/each}
+	</select>
 
-		<button data-testid="dalle-submit-button" type="submit" class="btn variant-filled-primary">
-			Submit
-		</button>
-	</svelte:fragment>
+	<button data-testid="dalle-submit-button" type="submit" class="btn variant-filled-primary">
+		Submit
+	</button>
 </FormActionPage>
 
 {#if form?.urls}
diff --git a/src/routes/diarize-submit/+page.svelte b/src/routes/diarize-submit/+page.svelte
index fb57ee3..4fbd2f5 100644
--- a/src/routes/diarize-submit/+page.svelte
+++ b/src/routes/diarize-submit/+page.svelte
@@ -9,22 +9,16 @@
 
 <BetaBanner />
 <FormActionPage {title} {description} hasBusinessAssociateAgreemment>
-	<svelte:fragment slot="form">
-		<input
-			class="input block max-w-64"
-			id="files"
-			name="files"
-			type="file"
-			accept=".aac, .avi, .flac, .flv, .m4a, .m4v, .mkv, .mov, .mp3, .mp4, .mpga, .mpeg, .ogg, .wav, .wma, .webm, .wmv, .3gp"
-			data-testid="diarization-file-input"
-			multiple
-		/>
-		<button
-			data-testid="diarization-submit-button"
-			type="submit"
-			class="btn variant-filled-primary"
-		>
-			Submit
-		</button>
-	</svelte:fragment>
+	<input
+		class="input block max-w-64"
+		id="files"
+		name="files"
+		type="file"
+		accept=".aac, .avi, .flac, .flv, .m4a, .m4v, .mkv, .mov, .mp3, .mp4, .mpga, .mpeg, .ogg, .wav, .wma, .webm, .wmv, .3gp"
+		data-testid="diarization-file-input"
+		multiple
+	/>
+	<button data-testid="diarization-submit-button" type="submit" class="btn variant-filled-primary">
+		Submit
+	</button>
 </FormActionPage>
diff --git a/src/routes/document-intelligence/+page.svelte b/src/routes/document-intelligence/+page.svelte
index c105d0c..341d18a 100644
--- a/src/routes/document-intelligence/+page.svelte
+++ b/src/routes/document-intelligence/+page.svelte
@@ -44,16 +44,14 @@
 </script>
 
 <FormApiPage {title} {description} {onSubmit} hasBusinessAssociateAgreemment>
-	<svelte:fragment slot="form">
-		<input
-			type="file"
-			id="file"
-			name="file"
-			class="input block max-w-64"
-			accept=".pdf, .jpg, .jpeg, .png, .bmp, .tiff, .heif, .docx, .xlsx, .pptx, .html"
-			required
-			data-testid="document-intelligence-file-input"
-			bind:files
-		/>
-	</svelte:fragment>
+	<input
+		type="file"
+		id="file"
+		name="file"
+		class="input block max-w-64"
+		accept=".pdf, .jpg, .jpeg, .png, .bmp, .tiff, .heif, .docx, .xlsx, .pptx, .html"
+		required
+		data-testid="document-intelligence-file-input"
+		bind:files
+	/>
 </FormApiPage>
diff --git a/src/routes/embedding/+page.svelte b/src/routes/embedding/+page.svelte
index 7841423..3b5a77b 100644
--- a/src/routes/embedding/+page.svelte
+++ b/src/routes/embedding/+page.svelte
@@ -20,18 +20,16 @@ text file like .txt.`;
 </script>
 
 <FormPage {title} {description} {enhancer} hasBusinessAssociateAgreemment>
-	<svelte:fragment slot="form">
-		<input
-			type="file"
-			id="file"
-			name="file"
-			class="input max-w-64 block"
-			accept=".md, .docx, .txt, .rst, .html, .pdf"
-			required
-			data-testid="embedding-file-input"
-		/>
-		<button data-testid="embedding-submit-button" type="submit" class="btn variant-filled-primary">
-			Submit
-		</button>
-	</svelte:fragment>
+	<input
+		type="file"
+		id="file"
+		name="file"
+		class="input max-w-64 block"
+		accept=".md, .docx, .txt, .rst, .html, .pdf"
+		required
+		data-testid="embedding-file-input"
+	/>
+	<button data-testid="embedding-submit-button" type="submit" class="btn variant-filled-primary">
+		Submit
+	</button>
 </FormPage>
diff --git a/src/routes/gpt/+page.svelte b/src/routes/gpt/+page.svelte
index 1c82b04..0c05c49 100644
--- a/src/routes/gpt/+page.svelte
+++ b/src/routes/gpt/+page.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
 	import FormBasePage from '$lib/components/PageTemplates/FormBasePage.svelte';
-	import { Chat } from '$lib/chat';
+	import { Chat } from '$lib/chat.svelte';
 	import ChatInterface from './Chat/ChatInterface.svelte';
 	import SystemPrompt from './SystemPrompt.svelte';
 	import { getToastStore, type ToastSettings } from '@skeletonlabs/skeleton';
 	import { browser } from '$app/environment';
 	import ChatHistory from './ChatHistory.svelte';
 
-	let systemPrompt = '';
-	let model = 'anthropic.claude-3-5-sonnet-20240620-v1:0';
-	let chat: Chat | null = null;
+	let systemPrompt = $state('');
+	let model = $state('anthropic.claude-3-5-sonnet-20240620-v1:0');
+	let chat: Chat | null = $state(null);
 
-	let priorChats = browser
-		? Object.keys({ ...localStorage }).filter((key) => key.startsWith('agate-chat'))
-		: [];
+	let priorChats = $state(
+		browser ? Object.keys({ ...localStorage }).filter((key) => key.startsWith('agate-chat')) : []
+	);
 
 	const LLM_MODELS = [
 		{
@@ -84,7 +84,7 @@
 			{/key}
 		</div>
 	</div>
-	<button class="btn variant-filled-primary" on:click={startChat}> Start Chat </button>
+	<button class="btn variant-filled-primary" onclick={startChat}> Start Chat </button>
 </div>
 
 {#if chat !== null}
diff --git a/src/routes/gpt/Chat/ChatBubble.svelte b/src/routes/gpt/Chat/ChatBubble.svelte
index d58b656..37c6c0e 100644
--- a/src/routes/gpt/Chat/ChatBubble.svelte
+++ b/src/routes/gpt/Chat/ChatBubble.svelte
@@ -6,9 +6,9 @@
 	import './chat.postcss';
 	import OrderedListItem from './Renderers/OrderedListItem.svelte';
 	import UnorderedListItem from './Renderers/UnorderedListItem.svelte';
-	import type { Message } from '$lib/chat';
+	import type { Message } from '$lib/chat.svelte';
 
-	export let message: Message;
+	let { message = $bindable() }: { message: Message } = $props();
 
 	const toastStore = getToastStore();
 
@@ -53,7 +53,7 @@
 		<p class="font-bold">{names[message.role]}</p>
 		<div class="grid grid-flow-col-dense gap-2">
 			<button
-				on:click={toClipboard(message.content)}
+				onclick={toClipboard(message.content)}
 				class="[&>*]:pointer-events-none hover:opacity-70"
 				use:popup={popupHover}
 			>
@@ -66,8 +66,8 @@
 		<SvelteMarkdown
 			source={message.content}
 			renderers={{
+				// @ts-expect-error - something breaks in the typing on Svelte 5, but it runs fine.
 				code: CodeBlock,
-				// @ts-expect-error - For some reason the IDE doesn't think orderedlistitem exists, it does.
 				orderedlistitem: OrderedListItem,
 				unorderedlistitem: UnorderedListItem
 			}}
diff --git a/src/routes/gpt/Chat/ChatInterface.svelte b/src/routes/gpt/Chat/ChatInterface.svelte
index 4219b86..6bfd325 100644
--- a/src/routes/gpt/Chat/ChatInterface.svelte
+++ b/src/routes/gpt/Chat/ChatInterface.svelte
@@ -4,16 +4,15 @@
 	import UploadIcon from '$lib/icons/UploadIcon.svelte';
 	import hljs from 'highlight.js';
 	import { readMessage } from './messageHandling';
-	import { Chat, type Message } from '$lib/chat';
+	import { Chat, type Message } from '$lib/chat.svelte';
 
-	export let chat: Chat;
-	export let model: string;
-	export let onclose: () => void;
+	let { chat, model, onclose }: { chat: Chat; model: string; onclose: () => void } = $props();
+
+	let currentMessage = $state('');
+	let loading = $state(false);
+	let uploading = $state(false);
 
-	let currentMessage = '';
 	let elemChat: HTMLElement;
-	let loading = false;
-	let uploading = false;
 	const toastStore = getToastStore();
 
 	async function addUserMessage(event: KeyboardEvent) {
@@ -157,8 +156,8 @@
 		id="chat-container"
 		class="min-h-[70vh] max-h-[70vh] p-4 overflow-y-auto space-y-4"
 	>
-		{#each chat.messages as message}
-			<ChatBubble bind:message />
+		{#each chat.messages as _, index}
+			<ChatBubble bind:message={chat.messages[index]} />
 		{/each}
 		<p class:hidden={!uploading}>Agate is processing the document...</p>
 	</section>
@@ -166,7 +165,7 @@
 		<div
 			class="input-group input-group-divider grid-cols-[auto_1fr_auto] mx-auto max-w-[70%] rounded-container-token border-surface-700 border-2"
 		>
-			<button class="input-group-shim border-r-2" on:click={uploadFile}>
+			<button class="input-group-shim border-r-2" onclick={uploadFile}>
 				<UploadIcon class="text-lg text-black" />
 			</button>
 			<textarea
@@ -178,10 +177,10 @@
 				rows="1"
 				disabled={loading || uploading}
 				style="resize: none;"
-				on:keydown={addUserMessage}
-				on:input={resizeTextArea}
-			/>
+				onkeydown={addUserMessage}
+				oninput={resizeTextArea}
+			></textarea>
 		</div>
-		<button class="btn h-10 mt-5 variant-filled-error" on:click={onclose}> End Chat </button>
+		<button class="btn h-10 mt-5 variant-filled-error" onclick={onclose}> End Chat </button>
 	</div>
 </div>
diff --git a/src/routes/gpt/Chat/Renderers/CodeBlock.svelte b/src/routes/gpt/Chat/Renderers/CodeBlock.svelte
index 44f4b75..b220262 100644
--- a/src/routes/gpt/Chat/Renderers/CodeBlock.svelte
+++ b/src/routes/gpt/Chat/Renderers/CodeBlock.svelte
@@ -3,9 +3,11 @@
 	import hljs from 'highlight.js';
 	import { onMount } from 'svelte';
 
-	export let text = '';
-	export let lang = '';
-	export let doNotHighlight = true; // We highlight when all code blocks are loaded.
+	let {
+		text,
+		lang,
+		doNotHighlight = true
+	}: { text: string; lang: string; doNotHighlight: boolean } = $props();
 
 	onMount(() => {
 		if (doNotHighlight) return;
diff --git a/src/routes/gpt/ChatHistory.svelte b/src/routes/gpt/ChatHistory.svelte
index 9af5868..c78d82c 100644
--- a/src/routes/gpt/ChatHistory.svelte
+++ b/src/routes/gpt/ChatHistory.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { Chat } from '$lib/chat';
+	import { Chat } from '$lib/chat.svelte';
 
-	export let chatIds: string[];
-	export let onclick: (chat: Chat) => void;
-
-	let searchString: string = '';
+	let { chatIds, onclick }: { chatIds: string[]; onclick: (chat: Chat) => void } = $props();
+	let searchString: string = $state('');
 
 	const chatOptions = chatIds
 		.map((id) => {
@@ -37,7 +35,7 @@
 			<li class="w-full">
 				<button
 					class="btn hover:variant-ghost-primary flex justify-start text-left w-full"
-					on:click={() => onselection(option)}
+					onclick={() => onselection(option)}
 				>
 					{option.label}
 				</button>
diff --git a/src/routes/gpt/SystemPrompt.svelte b/src/routes/gpt/SystemPrompt.svelte
index f1e236a..3f5ac1b 100644
--- a/src/routes/gpt/SystemPrompt.svelte
+++ b/src/routes/gpt/SystemPrompt.svelte
@@ -2,8 +2,7 @@
 	// @ts-expect-error - this import is correct.
 	import prompts from '$lib/assets/prompts.yaml';
 
-	export let systemPrompt: string = '';
-	export let disabled: boolean = false;
+	let { systemPrompt = $bindable('') }: { systemPrompt: string } = $props();
 
 	function capitalizeFirstLetter(string: string) {
 		return string.charAt(0).toUpperCase() + string.slice(1);
@@ -20,7 +19,7 @@
 	}
 </script>
 
-<select value={null} class="select" on:change={onSelectionChange} {disabled}>
+<select value={null} class="select" onchange={onSelectionChange}>
 	<option value={null}>Select a system prompt</option>
 	{#each Object.keys(prompts.system) as name}
 		<option value={name}>{capitalizeFirstLetter(name)}</option>
@@ -34,6 +33,5 @@
 		rows="8"
 		placeholder="Lorem ipsum dolor sit amet consectetur adipisicing elit."
 		bind:value={systemPrompt}
-		{disabled}
-	/>
+	></textarea>
 </label>
diff --git a/src/routes/text-to-speech/+page.svelte b/src/routes/text-to-speech/+page.svelte
index 9021c07..63a97ec 100644
--- a/src/routes/text-to-speech/+page.svelte
+++ b/src/routes/text-to-speech/+page.svelte
@@ -41,39 +41,37 @@
 </script>
 
 <FormApiPage {title} {description} {onSubmit}>
-	<svelte:fragment slot="form">
-		<label for="text">Text</label>
-		<textarea
-			id="text"
-			name="text"
-			bind:value={text}
-			placeholder="Type your text here."
-			class="textarea"
-			required
-		/>
+	<label for="text">Text</label>
+	<textarea
+		id="text"
+		name="text"
+		bind:value={text}
+		placeholder="Type your text here."
+		class="textarea"
+		required
+	></textarea>
 
-		<label for="voice">Voice</label>
-		<select id="voice" name="voice" bind:value={voice} class="select">
-			<option value="alloy">Alloy</option>
-			<option value="echo">Echo</option>
-			<option value="fable">Fable</option>
-			<option value="onyx">Onyx</option>
-			<option value="nova">Nova</option>
-			<option value="shimmer">Shimmer</option>
-		</select>
+	<label for="voice">Voice</label>
+	<select id="voice" name="voice" bind:value={voice} class="select">
+		<option value="alloy">Alloy</option>
+		<option value="echo">Echo</option>
+		<option value="fable">Fable</option>
+		<option value="onyx">Onyx</option>
+		<option value="nova">Nova</option>
+		<option value="shimmer">Shimmer</option>
+	</select>
 
-		<label for="format">File Format</label>
-		<select id="format" name="format" bind:value={format} class="select">
-			<option value="mp3">mp3</option>
-			<option value="opus">opus</option>
-			<option value="aac">aac</option>
-			<option value="flac">flac</option>
-		</select>
+	<label for="format">File Format</label>
+	<select id="format" name="format" bind:value={format} class="select">
+		<option value="mp3">mp3</option>
+		<option value="opus">opus</option>
+		<option value="aac">aac</option>
+		<option value="flac">flac</option>
+	</select>
 
-		<label for="model">Quality</label>
-		<select id="model" name="model" bind:value={model} class="select">
-			<option value="tts-1">Standard Quality</option>
-			<option value="tts-1-hd">High Quality</option>
-		</select>
-	</svelte:fragment>
+	<label for="model">Quality</label>
+	<select id="model" name="model" bind:value={model} class="select">
+		<option value="tts-1">Standard Quality</option>
+		<option value="tts-1-hd">High Quality</option>
+	</select>
 </FormApiPage>
diff --git a/src/routes/transcription/+page.server.ts b/src/routes/transcription/+page.server.ts
index 00a34c6..1044d57 100644
--- a/src/routes/transcription/+page.server.ts
+++ b/src/routes/transcription/+page.server.ts
@@ -3,7 +3,7 @@ import ffmpeg from 'fluent-ffmpeg';
 import fs from 'fs';
 import path from 'node:path';
 import { memoryFileToDiskFile, diskFileToMemoryFile } from '$lib/fileHandling';
-import type { whisperLanguagesTypes } from '$lib/types';
+import type { whisperLanguagesTypes } from './whisperLanguages';
 import { logger } from '$lib/server/utils';
 import { getAzureOpenAiClient } from '$lib/server/azure';
 import { AZURE_OPENAI_WHISPER_DEPLOYMENT_NAME } from '$lib/server/secrets';
diff --git a/src/routes/transcription/+page.svelte b/src/routes/transcription/+page.svelte
index 6fe64f5..8535eba 100644
--- a/src/routes/transcription/+page.svelte
+++ b/src/routes/transcription/+page.svelte
@@ -21,27 +21,25 @@
 </script>
 
 <FormActionPage {title} {description} {enhancer} hasBusinessAssociateAgreemment>
-	<svelte:fragment slot="form">
-		<input
-			class="input"
-			id="file"
-			name="file"
-			type="file"
-			accept=".aac, .avi, .flac, .flv, .m4a, .m4v, .mkv, .mov, .mp3, .mp4, .mpga, .mpeg, .ogg, .wav, .wma, .webm, .wmv, .3gp"
-			data-testid="transcription-file-input"
-		/>
-		<label for="language">Language</label>
-		<select name="language" id="language" value={whisperLanguages['English']} class="select">
-			{#each Object.entries(whisperLanguages) as [name, abbreviation]}
-				<option value={abbreviation}>{name}</option>
-			{/each}
-		</select>
-		<button
-			data-testid="transcription-submit-button"
-			type="submit"
-			class="btn variant-filled-primary"
-		>
-			Submit
-		</button>
-	</svelte:fragment>
+	<input
+		class="input"
+		id="file"
+		name="file"
+		type="file"
+		accept=".aac, .avi, .flac, .flv, .m4a, .m4v, .mkv, .mov, .mp3, .mp4, .mpga, .mpeg, .ogg, .wav, .wma, .webm, .wmv, .3gp"
+		data-testid="transcription-file-input"
+	/>
+	<label for="language">Language</label>
+	<select name="language" id="language" value={whisperLanguages['English']} class="select">
+		{#each Object.entries(whisperLanguages) as [name, abbreviation]}
+			<option value={abbreviation}>{name}</option>
+		{/each}
+	</select>
+	<button
+		data-testid="transcription-submit-button"
+		type="submit"
+		class="btn variant-filled-primary"
+	>
+		Submit
+	</button>
 </FormActionPage>
diff --git a/src/routes/transcription/whisperLanguages.ts b/src/routes/transcription/whisperLanguages.ts
index 5c1be23..af2057d 100644
--- a/src/routes/transcription/whisperLanguages.ts
+++ b/src/routes/transcription/whisperLanguages.ts
@@ -1,4 +1,61 @@
-import type { whisperLanguagesTypes } from '$lib/types';
+export type whisperLanguagesTypes =
+	| 'af'
+	| 'ar'
+	| 'hy'
+	| 'az'
+	| 'be'
+	| 'bs'
+	| 'bg'
+	| 'ca'
+	| 'zh'
+	| 'hr'
+	| 'cs'
+	| 'da'
+	| 'nl'
+	| 'en'
+	| 'et'
+	| 'fi'
+	| 'fr'
+	| 'gl'
+	| 'de'
+	| 'el'
+	| 'he'
+	| 'hi'
+	| 'hu'
+	| 'is'
+	| 'id'
+	| 'it'
+	| 'ja'
+	| 'kn'
+	| 'kk'
+	| 'ko'
+	| 'lv'
+	| 'lt'
+	| 'mk'
+	| 'ms'
+	| 'mr'
+	| 'mi'
+	| 'ne'
+	| 'no'
+	| 'fa'
+	| 'pl'
+	| 'pt'
+	| 'ro'
+	| 'ru'
+	| 'sr'
+	| 'sk'
+	| 'sl'
+	| 'es'
+	| 'sw'
+	| 'sv'
+	| 'tl'
+	| 'ta'
+	| 'th'
+	| 'tr'
+	| 'uk'
+	| 'ur'
+	| 'vi'
+	| 'cy';
 
 export const whisperLanguages: Record<string, whisperLanguagesTypes> = {
 	English: 'en',
diff --git a/tests/navigation.test.ts b/tests/navigation.test.ts
index 434b238..7931049 100644
--- a/tests/navigation.test.ts
+++ b/tests/navigation.test.ts
@@ -27,7 +27,7 @@ test('clicking on a link changes the route', async ({ page }) => {
 	for (const link of links) {
 		const href = await link.getAttribute('href');
 		await link.click();
-		await page.waitForTimeout(500);
+		await page.waitForTimeout(1000);
 
 		expect(page.url()).toBe('http://localhost:4173' + href);
 	}

From bd50a018b8c8ab60bc1fcf45bc64d7a45497bd82 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 27 Sep 2024 15:37:23 -0400
Subject: [PATCH 4/8] Bump vite in the npm_and_yarn group across 1 directory
 (#90)

Bumps the npm_and_yarn group with 1 update in the / directory: [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite).


Updates `vite` from 5.4.4 to 5.4.8
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v5.4.8/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.4.8/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
  dependency-group: npm_and_yarn
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 92 ++++++++---------------------------------------
 package.json      |  2 +-
 2 files changed, 15 insertions(+), 79 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d06b27a..5e90320 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,7 +50,7 @@
 				"tailwindcss": "3.4.3",
 				"tslib": "^2.6.3",
 				"typescript": "^5.5.3",
-				"vite": "^5.3.3",
+				"vite": "^5.4.8",
 				"vite-plugin-tailwind-purgecss": "^0.2.1",
 				"vitest": "^1.6.0"
 			},
@@ -74,7 +74,6 @@
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
 			"integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
 				"@jridgewell/trace-mapping": "^0.3.24"
@@ -874,7 +873,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"aix"
@@ -890,7 +888,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -906,7 +903,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -922,7 +918,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"android"
@@ -938,7 +933,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -954,7 +948,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"darwin"
@@ -970,7 +963,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -986,7 +978,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"freebsd"
@@ -1002,7 +993,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1018,7 +1008,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1034,7 +1023,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1050,7 +1038,6 @@
 			"cpu": [
 				"loong64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1066,7 +1053,6 @@
 			"cpu": [
 				"mips64el"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1082,7 +1068,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1098,7 +1083,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1114,7 +1098,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1130,7 +1113,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"linux"
@@ -1146,7 +1128,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"netbsd"
@@ -1162,7 +1143,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"openbsd"
@@ -1178,7 +1158,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"sunos"
@@ -1194,7 +1173,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -1210,7 +1188,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -1226,7 +1203,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"optional": true,
 			"os": [
 				"win32"
@@ -1449,7 +1425,6 @@
 			"version": "0.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
 			"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -1463,7 +1438,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -1472,7 +1446,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
 			"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -1486,7 +1459,6 @@
 			"version": "0.3.25",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
 			"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -1599,8 +1571,7 @@
 		"node_modules/@polka/url": {
 			"version": "1.0.0-next.25",
 			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.25.tgz",
-			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
-			"dev": true
+			"integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ=="
 		},
 		"node_modules/@rollup/plugin-commonjs": {
 			"version": "26.0.1",
@@ -2525,7 +2496,6 @@
 			"version": "2.5.26",
 			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.5.26.tgz",
 			"integrity": "sha512-8l1JTIM2L+bS8ebq1E+nGjv/YSKSnD9Q19bYIUkc41vaEG2JjVUx6ikvPIJv2hkQAuqJLzoPrXlKk4KcyWOv3Q==",
-			"dev": true,
 			"hasInstallScript": true,
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
@@ -2557,7 +2527,6 @@
 			"version": "4.0.0-next.7",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.0-next.7.tgz",
 			"integrity": "sha512-yMUnAqquoayvBDztk1rWUgdtvjv7YcHgopCAB7sWl9SQht8U/7lqwTlJU0ZTAY09pFFRe6bbakd7YoiyyIvJiA==",
-			"dev": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^3.0.0-next.0||^3.0.0",
 				"debug": "^4.3.6",
@@ -2578,7 +2547,6 @@
 			"version": "3.0.0-next.3",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-3.0.0-next.3.tgz",
 			"integrity": "sha512-kuGJ2CZ5lAw3gKF8Kw0AfKtUJWbwdlDHY14K413B0MCyrzvQvsKTorwmwZcky0+QqY6RnVIZ/5FttB9bQmkLXg==",
-			"dev": true,
 			"dependencies": {
 				"debug": "^4.3.5"
 			},
@@ -2621,8 +2589,7 @@
 		"node_modules/@types/cookie": {
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
-			"dev": true
+			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
 		},
 		"node_modules/@types/eslint": {
 			"version": "8.56.7",
@@ -3035,7 +3002,6 @@
 			"version": "8.12.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
 			"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -3056,7 +3022,6 @@
 			"version": "1.4.13",
 			"resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
 			"integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
-			"dev": true,
 			"peerDependencies": {
 				"acorn": ">=8.9.0"
 			}
@@ -3188,7 +3153,6 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -3262,7 +3226,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.4"
 			}
@@ -3644,7 +3607,6 @@
 			"version": "0.6.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
 			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
-			"dev": true,
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -3810,8 +3772,7 @@
 		"node_modules/devalue": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz",
-			"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==",
-			"dev": true
+			"integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA=="
 		},
 		"node_modules/didyoumean": {
 			"version": "1.2.2",
@@ -3920,7 +3881,6 @@
 			"version": "0.21.5",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
 			"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"bin": {
 				"esbuild": "bin/esbuild"
@@ -4157,8 +4117,7 @@
 		"node_modules/esm-env": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
-			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
-			"dev": true
+			"integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA=="
 		},
 		"node_modules/espree": {
 			"version": "9.6.1",
@@ -4193,7 +4152,6 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz",
 			"integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15",
 				"@types/estree": "^1.0.1"
@@ -4690,8 +4648,7 @@
 		"node_modules/globalyzer": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
-			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
-			"dev": true
+			"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
 		},
 		"node_modules/globby": {
 			"version": "11.1.0",
@@ -4716,8 +4673,7 @@
 		"node_modules/globrex": {
 			"version": "0.1.2",
 			"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
-			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
-			"dev": true
+			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
 		},
 		"node_modules/gopd": {
 			"version": "1.0.1",
@@ -4903,7 +4859,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
 			"integrity": "sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==",
-			"dev": true,
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/wooorm"
@@ -5173,7 +5128,6 @@
 			"version": "4.1.5",
 			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
 			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -5236,8 +5190,7 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
 		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
@@ -5518,7 +5471,6 @@
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
 			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
-			"dev": true,
 			"engines": {
 				"node": ">=4"
 			}
@@ -5527,7 +5479,6 @@
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
 			"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
-			"dev": true,
 			"engines": {
 				"node": ">=10"
 			}
@@ -5558,7 +5509,6 @@
 			"version": "3.3.7",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
 			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -5985,8 +5935,7 @@
 		"node_modules/picocolors": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
-			"dev": true
+			"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
@@ -6608,7 +6557,6 @@
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
 			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
-			"dev": true,
 			"dependencies": {
 				"mri": "^1.1.0"
 			},
@@ -6750,8 +6698,7 @@
 		"node_modules/set-cookie-parser": {
 			"version": "2.7.0",
 			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
-			"integrity": "sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ==",
-			"dev": true
+			"integrity": "sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ=="
 		},
 		"node_modules/set-function-length": {
 			"version": "1.2.2",
@@ -6865,7 +6812,6 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
 			"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
-			"dev": true,
 			"dependencies": {
 				"@polka/url": "^1.0.0-next.24",
 				"mrmime": "^2.0.0",
@@ -6903,7 +6849,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -7121,7 +7066,6 @@
 			"version": "5.0.0-next.259",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.259.tgz",
 			"integrity": "sha512-trRFSjKD+11KbXerGmBT0Uc+ZSNUhxn0aQ02q9tjtig/FV24dpZlXmCrcZTZliOLS0P8JWjw6xaWgNheZZoYOg==",
-			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -7294,7 +7238,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -7488,7 +7431,6 @@
 			"version": "0.2.9",
 			"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
 			"integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
-			"dev": true,
 			"dependencies": {
 				"globalyzer": "0.1.0",
 				"globrex": "^0.1.2"
@@ -7543,7 +7485,6 @@
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
 			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -7739,10 +7680,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "5.4.4",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.4.tgz",
-			"integrity": "sha512-RHFCkULitycHVTtelJ6jQLd+KSAAzOgEYorV32R2q++M6COBjKJR6BxqClwp5sf0XaBDjVMuJ9wnNfyAJwjMkA==",
-			"dev": true,
+			"version": "5.4.8",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",
+			"integrity": "sha512-FqrItQ4DT1NC4zCUqMB4c4AZORMKIa0m8/URVCZ77OZ/QSNeJ54bU1vrFADbDsuwfIPcgknRkmqakQcgnL4GiQ==",
 			"dependencies": {
 				"esbuild": "^0.21.3",
 				"postcss": "^8.4.43",
@@ -7845,7 +7785,6 @@
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"optional": true,
 			"os": [
@@ -7859,7 +7798,6 @@
 			"version": "8.4.45",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
 			"integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -7887,7 +7825,6 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.2.tgz",
 			"integrity": "sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==",
-			"dev": true,
 			"workspaces": [
 				"tests/deps/*",
 				"tests/projects/*"
@@ -8295,8 +8232,7 @@
 		"node_modules/zimmerframe": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
-			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
-			"dev": true
+			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
 		}
 	}
 }
diff --git a/package.json b/package.json
index 2dc219c..1e320db 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
 		"tailwindcss": "3.4.3",
 		"tslib": "^2.6.3",
 		"typescript": "^5.5.3",
-		"vite": "^5.3.3",
+		"vite": "^5.4.8",
 		"vite-plugin-tailwind-purgecss": "^0.2.1",
 		"vitest": "^1.6.0"
 	},

From 4fa514f3acb305491da993483dc831f0dae6c254 Mon Sep 17 00:00:00 2001
From: Reinder Vos de Wael <reinder.vosdewael@childmind.org>
Date: Mon, 30 Sep 2024 09:21:21 -0400
Subject: [PATCH 5/8] fix: remove o1-preview

---
 src/routes/api/gpt/+server.ts | 2 +-
 src/routes/gpt/+page.svelte   | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/routes/api/gpt/+server.ts b/src/routes/api/gpt/+server.ts
index 7b63004..ffca4da 100644
--- a/src/routes/api/gpt/+server.ts
+++ b/src/routes/api/gpt/+server.ts
@@ -1,7 +1,7 @@
 import { getAzureOpenAiClient } from '$lib/server/azure';
-import type { Message } from '$lib/types';
 import { logger } from '$lib/server/utils';
 import { AZURE_OPENAI_GPT_DEPLOYMENT_NAME } from '$lib/server/secrets';
+import type { Message } from '$lib/chat.svelte.js';
 
 export async function POST({ request, locals }) {
 	const data = await request.json();
diff --git a/src/routes/gpt/+page.svelte b/src/routes/gpt/+page.svelte
index 0c05c49..01e2dd5 100644
--- a/src/routes/gpt/+page.svelte
+++ b/src/routes/gpt/+page.svelte
@@ -20,10 +20,6 @@
 			name: 'GPT-4o',
 			tag: 'gpt-4o'
 		},
-		{
-			name: 'GPT-o1',
-			tag: 'o1-preview'
-		},
 		{
 			name: 'Claude 3 Opus',
 			tag: 'anthropic.claude-3-opus-20240229-v1:0'

From 9fd77554bd5cb30e93a22e507fa44f4f861391dd Mon Sep 17 00:00:00 2001
From: Reinder Vos de Wael <reinder.vosdewael@childmind.org>
Date: Tue, 24 Sep 2024 14:09:38 -0400
Subject: [PATCH 6/8] First working version

---
 package-lock.json                             | 13 +++
 package.json                                  |  2 +
 src/lib/components/Navigation.svelte          |  1 +
 src/lib/icons/EditIcon.svelte                 |  1 +
 src/lib/icons/EyeIcon.svelte                  |  1 +
 src/lib/icons/PlusIcon.svelte                 |  1 +
 src/lib/icons/SaveIcon.svelte                 |  1 +
 src/lib/icons/TrashIcon.svelte                |  1 +
 src/lib/server/secrets.ts                     |  2 +
 src/routes/+layout.svelte                     |  3 +-
 src/routes/api/claude/stream/+server.ts       |  2 +-
 src/routes/api/markdown2docx/+server.ts       | 23 ++++++
 src/routes/document-generation/+page.svelte   | 82 +++++++++++++++++++
 .../document-generation/SectionNode.svelte    | 74 +++++++++++++++++
 src/routes/document-generation/presets.ts     | 44 ++++++++++
 src/routes/document-generation/section.ts     | 66 +++++++++++++++
 16 files changed, 315 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/icons/EditIcon.svelte
 create mode 100644 src/lib/icons/EyeIcon.svelte
 create mode 100644 src/lib/icons/PlusIcon.svelte
 create mode 100644 src/lib/icons/SaveIcon.svelte
 create mode 100644 src/lib/icons/TrashIcon.svelte
 create mode 100644 src/routes/api/markdown2docx/+server.ts
 create mode 100644 src/routes/document-generation/+page.svelte
 create mode 100644 src/routes/document-generation/SectionNode.svelte
 create mode 100644 src/routes/document-generation/presets.ts
 create mode 100644 src/routes/document-generation/section.ts

diff --git a/package-lock.json b/package-lock.json
index 5e90320..75d9238 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
 				"highlight.js": "^11.10.0",
 				"openai": "^4.52.4",
 				"pdfjs-dist": "^4.4.168",
+				"sortablejs": "^1.15.3",
 				"svelte-markdown": "^0.4.1",
 				"winston": "^3.13.0"
 			},
@@ -35,6 +36,7 @@
 				"@types/jsonwebtoken": "^9.0.6",
 				"@types/node": "20.12.2",
 				"@types/showdown": "^2.0.6",
+				"@types/sortablejs": "^1.15.8",
 				"@typescript-eslint/eslint-plugin": "^7.16.0",
 				"@typescript-eslint/parser": "^7.16.0",
 				"autoprefixer": "10.4.19",
@@ -2680,6 +2682,12 @@
 			"integrity": "sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==",
 			"dev": true
 		},
+		"node_modules/@types/sortablejs": {
+			"version": "1.15.8",
+			"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.8.tgz",
+			"integrity": "sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==",
+			"dev": true
+		},
 		"node_modules/@types/triple-beam": {
 			"version": "1.3.5",
 			"resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
@@ -6845,6 +6853,11 @@
 				"sorcery": "bin/sorcery"
 			}
 		},
+		"node_modules/sortablejs": {
+			"version": "1.15.3",
+			"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.3.tgz",
+			"integrity": "sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg=="
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/package.json b/package.json
index 1e320db..cda1758 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
 		"@types/jsonwebtoken": "^9.0.6",
 		"@types/node": "20.12.2",
 		"@types/showdown": "^2.0.6",
+		"@types/sortablejs": "^1.15.8",
 		"@typescript-eslint/eslint-plugin": "^7.16.0",
 		"@typescript-eslint/parser": "^7.16.0",
 		"autoprefixer": "10.4.19",
@@ -60,6 +61,7 @@
 		"highlight.js": "^11.10.0",
 		"openai": "^4.52.4",
 		"pdfjs-dist": "^4.4.168",
+		"sortablejs": "^1.15.3",
 		"svelte-markdown": "^0.4.1",
 		"winston": "^3.13.0"
 	},
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
index a9ec3e5..6cfed61 100644
--- a/src/lib/components/Navigation.svelte
+++ b/src/lib/components/Navigation.svelte
@@ -5,6 +5,7 @@
 	const drawerStore = getDrawerStore();
 	const pages = [
 		{ name: 'Chatbot', href: '/gpt' },
+		{ name: 'Document Generation', href: '/document-generation' },
 		{ name: 'Document Intelligence', href: '/document-intelligence' },
 		{ name: 'Diarize (Submit)', href: '/diarize-submit' },
 		{ name: 'Diarize (Retrieve)', href: '/diarize-retrieve' },
diff --git a/src/lib/icons/EditIcon.svelte b/src/lib/icons/EditIcon.svelte
new file mode 100644
index 0000000..a758e38
--- /dev/null
+++ b/src/lib/icons/EditIcon.svelte
@@ -0,0 +1 @@
+<i class={`fa-solid fa-edit ${$$props.class}`} />
diff --git a/src/lib/icons/EyeIcon.svelte b/src/lib/icons/EyeIcon.svelte
new file mode 100644
index 0000000..07cf59d
--- /dev/null
+++ b/src/lib/icons/EyeIcon.svelte
@@ -0,0 +1 @@
+<i class={`fa-solid fa-eye ${$$props.class}`} />
diff --git a/src/lib/icons/PlusIcon.svelte b/src/lib/icons/PlusIcon.svelte
new file mode 100644
index 0000000..80becd5
--- /dev/null
+++ b/src/lib/icons/PlusIcon.svelte
@@ -0,0 +1 @@
+<i class={`fa-solid fa-plus ${$$props.class}`} />
diff --git a/src/lib/icons/SaveIcon.svelte b/src/lib/icons/SaveIcon.svelte
new file mode 100644
index 0000000..e62cf3d
--- /dev/null
+++ b/src/lib/icons/SaveIcon.svelte
@@ -0,0 +1 @@
+<i class={`fas fa-save ${$$props.class}`} />
diff --git a/src/lib/icons/TrashIcon.svelte b/src/lib/icons/TrashIcon.svelte
new file mode 100644
index 0000000..265d1ae
--- /dev/null
+++ b/src/lib/icons/TrashIcon.svelte
@@ -0,0 +1 @@
+<i class={`fa-solid fa-trash ${$$props.class}`} />
diff --git a/src/lib/server/secrets.ts b/src/lib/server/secrets.ts
index 5c66c33..41551f8 100644
--- a/src/lib/server/secrets.ts
+++ b/src/lib/server/secrets.ts
@@ -18,3 +18,5 @@ export const AZURE_DOCUMENT_INTELLIGENCE_KEY = env.AZURE_DOCUMENT_INTELLIGENCE_K
 
 export const AWS_ACCESS_KEY = env.AWS_ACCESS_KEY || '';
 export const AWS_SECRET_ACCESS_KEY = env.AWS_SECRET_ACCESS_KEY || '';
+
+export const PANDOC_SERVER_ENDPOINT = env.PANDOC_SERVER_ENDPOINT || '';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1fb3305..b3d0a59 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,7 +3,7 @@
 	import Navigation from '$lib/components/Navigation.svelte';
 	import '@cmi-dair/skeleton-themes/cmi.postcss';
 	import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
-	import { Drawer, Toast, initializeStores, storePopup } from '@skeletonlabs/skeleton';
+	import { Drawer, Toast, initializeStores, storePopup, Modal } from '@skeletonlabs/skeleton';
 
 	import hljs from 'highlight.js/lib/core';
 	import bash from 'highlight.js/lib/languages/bash';
@@ -38,6 +38,7 @@
 	<title>Agate</title>
 </svelte:head>
 
+<Modal />
 <Toast />
 <Drawer width="w-64">
 	<h2 class="p-4 h2">Navigation</h2>
diff --git a/src/routes/api/claude/stream/+server.ts b/src/routes/api/claude/stream/+server.ts
index 2218640..5618fb1 100644
--- a/src/routes/api/claude/stream/+server.ts
+++ b/src/routes/api/claude/stream/+server.ts
@@ -1,6 +1,6 @@
 import { AWS_ACCESS_KEY, AWS_SECRET_ACCESS_KEY } from '$lib/server/secrets.js';
 import { logger } from '$lib/server/utils';
-import type { Message } from '$lib/chat';
+import type { Message } from '$lib/types';
 import { BedrockRuntimeClient, ConverseStreamCommand } from '@aws-sdk/client-bedrock-runtime';
 
 export async function POST({ request }) {
diff --git a/src/routes/api/markdown2docx/+server.ts b/src/routes/api/markdown2docx/+server.ts
new file mode 100644
index 0000000..312f52c
--- /dev/null
+++ b/src/routes/api/markdown2docx/+server.ts
@@ -0,0 +1,23 @@
+import { PANDOC_SERVER_ENDPOINT } from '$lib/server/secrets.js';
+import { logger } from '$lib/server/utils';
+
+export const POST = async ({ request, fetch }) => {
+	logger.info('Pandoc API called');
+
+	const markdown = await request.text();
+	const blob = new Blob([markdown], { type: 'text/markdown' });
+	const form = new FormData();
+	form.append('to', 'docx');
+	form.append('from', 'md');
+	form.append('file', blob);
+
+	const response = await fetch(PANDOC_SERVER_ENDPOINT, {
+		method: 'POST',
+		body: form
+	});
+
+	if (!response.ok) {
+		return new Response(await response.text(), { status: 500 });
+	}
+	return new Response(await response.blob());
+};
diff --git a/src/routes/document-generation/+page.svelte b/src/routes/document-generation/+page.svelte
new file mode 100644
index 0000000..4497b4f
--- /dev/null
+++ b/src/routes/document-generation/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import SectionNode from './SectionNode.svelte';
+	import { Section } from './section';
+	import { getToastStore } from '@skeletonlabs/skeleton';
+	import { downloadBlob } from '$lib/fileHandling';
+	import LoadingBar from '$lib/components/LoadingBar.svelte';
+	import { customPreset, grantProposalPreset } from './presets';
+
+	let section: Section;
+	let isLoading = false;
+	let presets: { [key: string]: Section } = {
+		Custom: customPreset,
+		'Grant Proposal': grantProposalPreset
+	};
+	let selected = Object.keys(presets)[0];
+
+	const toastStore = getToastStore();
+
+	async function generateDocument() {
+		console.log('hi!');
+		isLoading = true;
+		try {
+			const claudeBody = JSON.stringify({
+				model: 'anthropic.claude-3-5-sonnet-20240620-v1:0',
+				messages: [
+					{
+						role: 'system',
+						content:
+							'You will receive a JSON formatted instruction for generating a document. The schema contains a title for each section, instructions for each section, file contents that should be used in that section and its children, and the children of a section. Your goal is to write a Markdown document based on this data.'
+					},
+					{ role: 'user', content: section.getPrompt() }
+				]
+			});
+			const llm_response = await fetch('/api/claude/single', {
+				method: 'POST',
+				body: claudeBody
+			});
+			if (!llm_response.ok) {
+				toastStore.trigger({
+					message: 'An error occurred in getting the LLM response.',
+					background: 'variant-soft-error'
+				});
+				return;
+			}
+			const md2docx_response = await fetch('/api/markdown2docx', {
+				body: await llm_response.text(),
+				method: 'POST'
+			});
+			if (!md2docx_response.ok) {
+				toastStore.trigger({
+					message: 'An error occurred in converting to Word.',
+					background: 'variant-soft-error'
+				});
+				return;
+			}
+			downloadBlob(await md2docx_response.blob(), section.title + '.docx');
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	$: section = presets[selected].clone();
+</script>
+
+{#if isLoading}
+	<LoadingBar />
+{:else}
+	<div class="space-y-2">
+		<label>
+			Presets:
+			<select bind:value={selected} class="input max-w-48">
+				{#each Object.keys(presets) as key}
+					<option value={key}>{key}</option>
+				{/each}
+			</select>
+		</label>
+		<SectionNode bind:section onDelete={() => {}} />
+		<button class="btn variant-soft-primary" on:click={async () => await generateDocument()}>
+			Generate
+		</button>
+	</div>
+{/if}
diff --git a/src/routes/document-generation/SectionNode.svelte b/src/routes/document-generation/SectionNode.svelte
new file mode 100644
index 0000000..89ac019
--- /dev/null
+++ b/src/routes/document-generation/SectionNode.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import EditIcon from '$lib/icons/EditIcon.svelte';
+	import PlusIcon from '$lib/icons/PlusIcon.svelte';
+	import SaveIcon from '$lib/icons/SaveIcon.svelte';
+	import TrashIcon from '$lib/icons/TrashIcon.svelte';
+	import { Section } from './section';
+
+	export let section: Section;
+	export let onDelete: () => void;
+	export let isRoot = true;
+
+	let editable = false;
+
+	function addSection() {
+		section.children = [
+			...section.children,
+			new Section({ title: 'Section Title', instructions: 'Section instructions' })
+		];
+	}
+
+	function onChildDelete(child: Section) {
+		section.children = section.children.filter((c) => c !== child);
+	}
+</script>
+
+<div class="card max-w-[48rem]">
+	<header class="card-header text-lg font-semibold flex justify-between items-center">
+		{#if editable}
+			<input type="text" class="input" bind:value={section.title} />
+		{:else}
+			{section.title}
+		{/if}
+		<div class="pl-3 space-x-2">
+			<button on:click={addSection}> <PlusIcon /> </button>
+			<button on:click={() => (editable = !editable)}>
+				{#if editable}
+					<SaveIcon />
+				{:else}
+					<EditIcon />
+				{/if}
+			</button>
+			{#if !isRoot}
+				<button on:click={onDelete}>
+					<TrashIcon />
+				</button>
+			{/if}
+		</div>
+	</header>
+	<section class="p-4 overflow-y-scroll max-h-96">
+		{#if editable}
+			<textarea class="input" bind:value={section.instructions} />
+			<input type="file" class="input" multiple bind:files={section.files} accept=".txt" />
+		{:else}
+			{#if (section.files?.length ?? 0) < section.n_required_files}
+				<aside class="alert variant-soft-error">
+					<div class="alert-message">
+						This section requires at least {section.n_required_files} file upload{section.n_required_files ==
+						1
+							? ''
+							: 's'}. Click the edit button to upload.
+					</div>
+				</aside>
+			{/if}
+			<div class="whitespace-pre-wrap">
+				{section.instructions}
+			</div>
+		{/if}
+	</section>
+	<footer class="card-footer space-y-4">
+		{#each section.children as child}
+			<svelte:self section={child} onDelete={() => onChildDelete(child)} isRoot={false} />
+		{/each}
+	</footer>
+</div>
diff --git a/src/routes/document-generation/presets.ts b/src/routes/document-generation/presets.ts
new file mode 100644
index 0000000..ee8c442
--- /dev/null
+++ b/src/routes/document-generation/presets.ts
@@ -0,0 +1,44 @@
+import { Section } from './section';
+
+export const customPreset = new Section({
+	title: 'Document Title',
+	instructions: 'Document instructions'
+});
+
+export const grantProposalPreset = new Section({
+	title: 'Title (create one if the user does not modify this)',
+	instructions:
+		'The user has provided a list of files containing information on the grant they are writing.',
+	n_required_files: 1,
+	children: [
+		new Section({
+			title: 'Aims',
+			instructions: `The goal is to construct a compelling argument that is very easy to understand and repeat. In practice, this is what will be read most closely, and what will be referred back to when describing the project to other panelists. An important point to remember is that unless a detail (e.g., piece of background, element of the approach) is directly tied to the argument you are making, it should not be included in your aims page. In order to build a compelling argument, you need to:
+(Paragraph 1) Clearly state the domain you are thinking about.
+(Paragraph 1) Make it crystal clear why this domain is important and impactful.
+(Paragraph 1) Point out issues or gaps in the current state-of-the-art in this domain, and expand until you are one argument shy of properly discouraging the reader. Note that every issue or gap you point out should be directly addressed in your aims that come later on.
+(Paragraph 1) In one sentence, summarize all of the problems you will solve in your project.
+(Paragraph 2) Clearly restate the problem you will solve, with slightly more emphasis on the impact it will have, and how you will accomplish it. This is the guiding light of your grant, and what you are striving towards.
+(Paragraph 2) Expand the proposal into components of the solution sequentially. You may include details pertaining to high-level approach (e.g., datasets, communities, or conceptual approaches leveraged), but no in-the-weeds methodological details unless they strengthen the argument for your approach.
+(Paragraph 2) Summarize, in one or two strong sentences, the concrete outcomes of your funded and successfully executed project on the field, linking each example to the aims you are about to enumerate in greater detail.
+(Paragraph 3) After the aims, tie this section up with an impact sentence that paints a picture of what the scientific landscape will look like for your domain once your project completes.
+
+The aims are the scaffolding of your project. They should complement one another, but be able to be tackled independently, and advanced in parallel to one another — if each aim is a resounding success, those downstream will be improved, not enabled; conversely, if an aim were to fail, it would not disable those downstream. You should have between 2–4 of them, but without numbers exceeding 3 (e.g., if you have 4 aims, at least two should be sub-aims of the same number). In general:
+Each must have a title that stands alone as a simple, impactful, and easy to articulate sentence for what the aim will accomplish. The aim title does not need to include methodological details unless the point of innovation for the aim is the methodology.
+The brief summary of each aim then restates the core gap being addressed, and how the proposed method solves this problem.
+You should include precisely enough methodological details in this section that make it clear that you know how to accomplish the stated aim, but not so much that you invite deep scrutiny on how you will go about it — this is the abstract, not the methods section.
+You should conclude each aim statement with a hypothesis and/or clear and measurable outcome. In a perfect world, if the aim is well constructed it should be impossible not to accomplish, i.e., a hypothesis that will surely be tested, or an approach that will be applied, rather than an improvement in baseline performance that may not be reached. This may not be possible for all sorts of projects, but is important to keep in mind when constructing the way that each aim will be evaluated.
+As mentioned above, the aims should be related and interconnected, but without dependence upon one another. If two are inextricably linked and one depends upon another, they should be paired sub-aims.
+`
+		}),
+		new Section({
+			title: 'Significance and Innovation',
+			instructions: `The significance and innovation are where you get the opportunity to make it even more obvious why the problem you’ve chosen to tackle is important, and how your work is different from the rest. These sections should expand elements of your aims that deserve more attention, and should mirror one another closely. The relationships, purpose, and structure of each of these sections are:
+Each aim states the work that will be performed and outcome that will be achieved.
+The significance section allows you to expand on challenges that exist in each aim (approximately 1–2 per, totally ~5 significance points) and restate in concrete terms why these are impactful gaps, and the impact that your work will have by addressing them. In other words, the significance allows you to provide a deeper and more concretely evidence-backed take on various critical elements of your problem statement, and immediately follow them up with your proposed solutions.
+The innovation section then reflects your significance — containing a perfect 1-1 mapping of points in the two, — with an emphasis on how your solution to this problem is novel and moved beyond prior attempts. You restate the solution that your work will produce, and highlight how it exceeds prior art. Importantly, presenting a positive spin on your work, as opposed to a negative spin on the prior work, is important here. You then get to restate the impact of your new solution, and, when possible, highlight other problems that will be unlocked by this innovation.
+Put together, you can effectively consider each significance-innovation pair as a complete story arc for one particular element of your proposal. Similar to the aims themselves, the ~5 points that are decided upon to be called out and elaborated upon here should complement one another but not depend on one another. If all elements succeed, the interactions increase the relative strength of each, but if one fails, the others all remain standing.
+`
+		})
+	]
+});
diff --git a/src/routes/document-generation/section.ts b/src/routes/document-generation/section.ts
new file mode 100644
index 0000000..a0d41c2
--- /dev/null
+++ b/src/routes/document-generation/section.ts
@@ -0,0 +1,66 @@
+type SectionOptions = {
+	title: string;
+	instructions: string;
+	files?: FileList | undefined;
+	n_required_files?: number;
+	children?: Section[];
+};
+
+export class Section {
+	public title: string;
+	public instructions: string;
+	public files: FileList | undefined;
+	public children: Section[];
+	public n_required_files: number;
+
+	constructor({
+		title,
+		instructions,
+		files = undefined,
+		children = [],
+		n_required_files = 0
+	}: SectionOptions) {
+		if (n_required_files < 0 || !Number.isInteger(n_required_files)) {
+			throw 'n_required_files must be a non-negative integer.';
+		}
+		this.title = title;
+		this.instructions = instructions;
+		this.files = files;
+		this.children = children;
+		this.n_required_files = n_required_files;
+	}
+
+	public getPrompt(): string {
+		return JSON.stringify(this.getPromptObj());
+	}
+
+	private getPromptObj(): object {
+		return {
+			title: this.title,
+			instructions: this.instructions,
+			files: this.files
+				? Array.from(this.files).map((file) => {
+						return {
+							fileName: file.name,
+							fileContent: file.text()
+						};
+					})
+				: undefined,
+			children: this.children.map((child) => {
+				return child.getPromptObj();
+			})
+		};
+	}
+
+	public clone() {
+		return new Section({
+			title: this.title,
+			instructions: this.instructions,
+			files: this.files,
+			children: this.children.map((child): Section => {
+				return child.clone();
+			}),
+			n_required_files: this.n_required_files
+		});
+	}
+}

From 9e91da6e31a79ab7766a4e2d67f13eb90d2607da Mon Sep 17 00:00:00 2001
From: Reinder Vos de Wael <reinder.vosdewael@childmind.org>
Date: Thu, 26 Sep 2024 15:34:02 -0400
Subject: [PATCH 7/8] checkpoint dropzone

---
 src/lib/components/FileDropZone.svelte           | 16 ++++++++++++++++
 src/routes/dev/+page.svelte                      |  7 +++++++
 .../document-generation/SectionNode.svelte       | 10 ++++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/FileDropZone.svelte
 create mode 100644 src/routes/dev/+page.svelte

diff --git a/src/lib/components/FileDropZone.svelte b/src/lib/components/FileDropZone.svelte
new file mode 100644
index 0000000..8102c81
--- /dev/null
+++ b/src/lib/components/FileDropZone.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { FileDropzone } from '@skeletonlabs/skeleton';
+
+	export let name: string;
+	export let onchange: (file: File[]) => void;
+
+	let files: FileList;
+	let fileArray: File[] = [];
+</script>
+
+<FileDropzone {name} bind:files />
+{#each fileArray as file}
+	<button class="chip" on:click={() => (fileArray = fileArray.filter((f) => f !== file))}>
+		X {file.name}
+	</button>
+{/each}
diff --git a/src/routes/dev/+page.svelte b/src/routes/dev/+page.svelte
new file mode 100644
index 0000000..9dcdd21
--- /dev/null
+++ b/src/routes/dev/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import FileDropZone from '$lib/components/FileDropZone.svelte';
+
+	let files: File[];
+</script>
+
+<FileDropZone name="test" onchange={(f) => (files = f)} />
diff --git a/src/routes/document-generation/SectionNode.svelte b/src/routes/document-generation/SectionNode.svelte
index 89ac019..0a6e54d 100644
--- a/src/routes/document-generation/SectionNode.svelte
+++ b/src/routes/document-generation/SectionNode.svelte
@@ -3,6 +3,7 @@
 	import PlusIcon from '$lib/icons/PlusIcon.svelte';
 	import SaveIcon from '$lib/icons/SaveIcon.svelte';
 	import TrashIcon from '$lib/icons/TrashIcon.svelte';
+	import { FileDropzone } from '@skeletonlabs/skeleton';
 	import { Section } from './section';
 
 	export let section: Section;
@@ -49,7 +50,6 @@
 	<section class="p-4 overflow-y-scroll max-h-96">
 		{#if editable}
 			<textarea class="input" bind:value={section.instructions} />
-			<input type="file" class="input" multiple bind:files={section.files} accept=".txt" />
 		{:else}
 			{#if (section.files?.length ?? 0) < section.n_required_files}
 				<aside class="alert variant-soft-error">
@@ -57,10 +57,16 @@
 						This section requires at least {section.n_required_files} file upload{section.n_required_files ==
 						1
 							? ''
-							: 's'}. Click the edit button to upload.
+							: 's'}.
 					</div>
 				</aside>
 			{/if}
+			<FileDropzone name="Section Files" bind:files={section.files} />
+			{#if section.files}
+				{#each section.files as file}
+					<button class="chip variant-filled" on:click={section.files}>{file.name}</button>
+				{/each}
+			{/if}
 			<div class="whitespace-pre-wrap">
 				{section.instructions}
 			</div>

From b891489c8aee4e471bf28877bab08737ca7a7fa3 Mon Sep 17 00:00:00 2001
From: Reinder Vos de Wael <reinder.vosdewael@childmind.org>
Date: Tue, 8 Oct 2024 08:52:21 -0400
Subject: [PATCH 8/8] stash changes

---
 src/routes/api/claude/single/+server.ts           | 2 +-
 src/routes/document-generation/SectionNode.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/api/claude/single/+server.ts b/src/routes/api/claude/single/+server.ts
index c6c7ae3..ed03020 100644
--- a/src/routes/api/claude/single/+server.ts
+++ b/src/routes/api/claude/single/+server.ts
@@ -1,5 +1,5 @@
 import { AWS_ACCESS_KEY, AWS_SECRET_ACCESS_KEY } from '$lib/server/secrets.js';
-import type { Message } from '$lib/chat';
+import type { Message } from '$lib/chat.svelte.ts';
 import { BedrockRuntimeClient, ConverseCommand } from '@aws-sdk/client-bedrock-runtime';
 
 export async function POST({ request }) {
diff --git a/src/routes/document-generation/SectionNode.svelte b/src/routes/document-generation/SectionNode.svelte
index 0a6e54d..05b63c0 100644
--- a/src/routes/document-generation/SectionNode.svelte
+++ b/src/routes/document-generation/SectionNode.svelte
@@ -49,7 +49,7 @@
 	</header>
 	<section class="p-4 overflow-y-scroll max-h-96">
 		{#if editable}
-			<textarea class="input" bind:value={section.instructions} />
+			<textarea class="input" bind:value={section.instructions}></textarea>
 		{:else}
 			{#if (section.files?.length ?? 0) < section.n_required_files}
 				<aside class="alert variant-soft-error">
@@ -64,7 +64,7 @@
 			<FileDropzone name="Section Files" bind:files={section.files} />
 			{#if section.files}
 				{#each section.files as file}
-					<button class="chip variant-filled" on:click={section.files}>{file.name}</button>
+					<button class="chip variant-filled" onclick={section.files}>{file.name}</button>
 				{/each}
 			{/if}
 			<div class="whitespace-pre-wrap">