src/lib/components/ApiKeyModal.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { HF_ACCESS_TOKEN, OPENAI_API_KEY } from '../store';

	let dialogElement: HTMLDialogElement;

	onMount(() => {
		if ($HF_ACCESS_TOKEN === '') {
			dialogElement.showModal();
		}
	});
</script>

<dialog
	id="api_modal"
	class="modal"
	bind:this={dialogElement}
	on:close={() => {
		if ($HF_ACCESS_TOKEN === '' || $OPENAI_API_KEY === '') {
			dialogElement.showModal();
		} else {
			localStorage.setItem('HF_ACCESS_TOKEN', $HF_ACCESS_TOKEN);
			localStorage.setItem('OPENAI_API_KEY', $OPENAI_API_KEY);
		}
	}}
>
	<form method="dialog" class="modal-box">
		<h3 class="font-bold text-lg">API keys needed</h3>
		<p class="py-4">In order for this demo to work you need API keys for HF and OpenAI.</p>
		<div class="w-full flex flex-col gap-5">
			<form aria-label="HF API" class="form-control">
				<label for="hf_key" class="label-text pb-2">HF API key</label>
				<input
					class="input"
					name="hf_key"
					type="text"
					placeholder="hf_***"
					bind:value={$HF_ACCESS_TOKEN}
				/>
			</form>
			<form aria-label="OPENAI API" class="form-control">
				<label for="oai_key" class="label-text pb-2">OpenAI API key</label>
				<input
					class="input"
					name="oai_key"
					type="text"
					placeholder="sk-***"
					bind:value={$OPENAI_API_KEY}
				/>
			</form>
		</div>
		<div class="modal-action">
			<button class="btn">Close</button>
		</div>
	</form>
</dialog>