src/lib/components/ConfirmModal.svelte

<script lang="ts">
	import Modal from "$lib/components/Modal.svelte";
	import { createEventDispatcher } from "svelte";
	import CarbonClose from "~icons/carbon/close";

	const dispatch = createEventDispatcher<{ close: void }>();
</script>

<Modal>
	<div class="flex w-full flex-col gap-0 p-2">
		<div class="flex items-start text-xl font-bold text-gray-800 m-2">
			<h1>You are about to download an AI model on your device</h1>
			<br />
			<button type="button" class="group" on:click={() => dispatch("close")}>
				<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
			</button>
		</div>
		<div class="flex items-start text-m text-gray-800 m-2">
			<br>To ensure your conversations with our AI remain private, our web application sends a model to your device to perform inference locally. No data leaves your device.<br />
			<br>This might be demanding in terms of bandwidth, storage and computing power on your side.<br />
			<br />
		</div>
		<div class="flex items-start text-m text-gray-800 m-2">
			<br><b>Mobile usage is not advised.</b><br />
		</div>
		<br />
	</div>
</Modal>