feat(*): first mvp

frontend/src/routes/[mnemonic]/+page.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { api } from '$lib/convex/_generated/api';
+	import ChatMessage from '$lib/components/ChatMessage.svelte';
+	import ChatInput from '$lib/components/ChatInput.svelte';
+	import FollowUpButtons from '$lib/components/FollowUpButtons.svelte';
+
+	let mnemonic = $derived(page.params.mnemonic);
+	const client = useConvexClient();
+
+	const chatData = useQuery(api.chats.getWithUser, () => (mnemonic ? { mnemonic } : 'skip'));
+	const messagesQuery = useQuery(api.messages.listByChat, () =>
+		chatData.data?.chat?._id ? { chatId: chatData.data.chat._id } : 'skip'
+	);
+
+	let messages = $derived(messagesQuery.data ?? []);
+	let lastMessage = $derived(messages[messages.length - 1]);
+	let followUpOptions = $derived(
+		lastMessage?.role === 'assistant' && lastMessage.followUpOptions
+			? lastMessage.followUpOptions
+			: []
+	);
+
+	$effect(() => {
+		if (messages.length) {
+			window.scrollTo(0, document.body.scrollHeight);
+		}
+	});
+
+	async function sendMessage(content: string) {
+		const chat = chatData.data?.chat;
+		if (!chat) return;
+
+		await client.mutation(api.messages.create, {
+			chatId: chat._id,
+			role: 'user',
+			content,
+			source: 'web'
+		});
+	}
+
+	async function summarize() {
+		const chat = chatData.data?.chat;
+		if (!chat) return;
+
+		await client.mutation(api.messages.create, {
+			chatId: chat._id,
+			role: 'user',
+			content: '/summarize',
+			source: 'web'
+		});
+	}
+</script>
+
+<svelte:head>
+	<title>Chat</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+</svelte:head>
+
+<div class="min-h-dvh bg-black text-white">
+	{#if chatData.isLoading}
+		<div class="flex min-h-dvh items-center justify-center text-neutral-500">Loading...</div>
+	{:else if chatData.error}
+		<div class="flex min-h-dvh items-center justify-center text-red-500">
+			Error: {chatData.error.toString()}
+		</div>
+	{:else if !chatData.data}
+		<div class="flex min-h-dvh items-center justify-center text-neutral-500">Chat not found</div>
+	{:else}
+		<div class="space-y-1.5 p-2">
+			{#each messages as message (message._id)}
+				<ChatMessage
+					role={message.role}
+					content={message.content}
+					isStreaming={message.isStreaming}
+				/>
+			{/each}
+		</div>
+
+		{#if followUpOptions.length > 0}
+			<div class="border-t border-neutral-800 px-2 py-1.5">
+				<FollowUpButtons options={followUpOptions} onselect={sendMessage} />
+			</div>
+		{/if}
+
+		<div class="border-t border-neutral-800 px-2 pt-1.5">
+			<button
+				onclick={summarize}
+				class="rounded bg-neutral-800 px-2 py-1 text-[10px] text-neutral-400"
+			>
+				/summarize
+			</button>
+		</div>
+
+		<div class="p-2 pt-1">
+			<ChatInput onsubmit={sendMessage} />
+		</div>
+	{/if}
+</div>