src/routes/+page.svelte

<script lang="ts">
	import { goto, invalidate } from "$app/navigation";
	import { base } from "$app/paths";
	import { PUBLIC_APP_NAME } from "$env/static/public";
	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
	import { pendingMessage } from "$lib/stores/pendingMessage";
	import { findCurrentModel } from "$lib/utils/models";
	import { createChat } from "../routes/LocalDB";
	import { params_writable } from "../routes/conversation/[id]/ParamsWritable";

	export let data;
	let loading = false;

	// dec2hex :: Integer -> String
	// i.e. 0-255 -> '00'-'ff'
	function dec2hex (dec) {
		return dec.toString(16).padStart(2, "0")
	}

	// generateId :: Integer -> String
	function generateId (len) {
		var arr = new Uint8Array((len || 40) / 2)
		window.crypto.getRandomValues(arr)
		return Array.from(arr, dec2hex).join('')
	}

	async function createConversation(message: string) {
		try {
			loading = true;

			const conversationId = generateId(16);

			// Ugly hack to use a store as temp storage, feel free to improve ^^
			pendingMessage.set(message);

			console.log(conversationId)
			params_writable.set(conversationId)
			// invalidateAll to update list of conversations
			await goto(`${base}/conversation/${conversationId}`, { invalidateAll: true });
		} catch (err) {
			error.set(ERROR_MESSAGES.default);
			console.error(err);
		} finally {
			loading = false;
		}
	}
</script>

<svelte:head>
    <title>{PUBLIC_APP_NAME}</title> 
</svelte:head>

<ChatWindow
	on:message={(ev) => createConversation(ev.detail)}
	{loading}
	currentModel={findCurrentModel([...data.models, ...data.oldModels], data.settings.activeModel)}
	models={data.models}
	settings={data.settings}
/>