feat(*): first mvp

frontend/src/routes/+layout.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import { PUBLIC_CONVEX_URL } from '$env/static/public';
+	import { setupConvex } from 'convex-svelte';
 
 	let { children } = $props();
+
+	setupConvex(PUBLIC_CONVEX_URL);
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>

frontend/src/routes/+page.svelte

@@ -1,2 +1 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<h1>iykyk</h1>

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>

frontend/src/routes/layout.css

@@ -1 +1,79 @@
 @import 'tailwindcss';
+
+.prose-mini h1,
+.prose-mini h2,
+.prose-mini h3,
+.prose-mini h4 {
+	font-size: 12px;
+	font-weight: 600;
+	margin: 0.5em 0 0.25em;
+}
+
+.prose-mini h1 {
+	font-size: 13px;
+}
+
+.prose-mini p {
+	margin: 0.4em 0;
+}
+
+.prose-mini p:first-child {
+	margin-top: 0;
+}
+
+.prose-mini p:last-child {
+	margin-bottom: 0;
+}
+
+.prose-mini ul,
+.prose-mini ol {
+	margin: 0.4em 0;
+	padding-left: 1.2em;
+}
+
+.prose-mini li {
+	margin: 0.15em 0;
+}
+
+.prose-mini code {
+	font-size: 10px;
+	background: rgba(0, 0, 0, 0.3);
+	padding: 0.1em 0.3em;
+	border-radius: 3px;
+}
+
+.prose-mini pre {
+	font-size: 10px;
+	background: rgba(0, 0, 0, 0.3);
+	padding: 0.5em;
+	border-radius: 4px;
+	overflow-x: auto;
+	margin: 0.4em 0;
+}
+
+.prose-mini pre code {
+	background: none;
+	padding: 0;
+}
+
+.prose-mini blockquote {
+	border-left: 2px solid rgba(255, 255, 255, 0.3);
+	padding-left: 0.5em;
+	margin: 0.4em 0;
+	opacity: 0.9;
+}
+
+.prose-mini a {
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.prose-mini strong {
+	font-weight: 600;
+}
+
+.prose-mini hr {
+	border: none;
+	border-top: 1px solid rgba(255, 255, 255, 0.2);
+	margin: 0.5em 0;
+}

frontend/src/routes/service/latex/+server.ts

@@ -0,0 +1,54 @@
+import type { RequestHandler } from './$types';
+import { mathjax } from 'mathjax-full/js/mathjax.js';
+import { TeX } from 'mathjax-full/js/input/tex.js';
+import { SVG } from 'mathjax-full/js/output/svg.js';
+import { liteAdaptor } from 'mathjax-full/js/adaptors/liteAdaptor.js';
+import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html.js';
+import { AllPackages } from 'mathjax-full/js/input/tex/AllPackages.js';
+
+const adaptor = liteAdaptor();
+RegisterHTMLHandler(adaptor);
+
+const tex = new TeX({ packages: AllPackages });
+const svg = new SVG({ fontCache: 'none' });
+const html = mathjax.document('', { InputJax: tex, OutputJax: svg });
+
+const cache = new Map<string, string>();
+
+export const GET: RequestHandler = async ({ url }) => {
+	const texInput = url.searchParams.get('tex');
+
+	if (!texInput) {
+		return new Response('Missing tex parameter', { status: 400 });
+	}
+
+	const cached = cache.get(texInput);
+	if (cached) {
+		return new Response(cached, {
+			headers: {
+				'Content-Type': 'image/svg+xml',
+				'Cache-Control': 'public, max-age=31536000, immutable'
+			}
+		});
+	}
+
+	try {
+		const node = html.convert(texInput, { display: false });
+		const svgString = adaptor.innerHTML(node).replace('style="', 'style="color: white; ');
+
+		if (cache.size > 1000) {
+			const firstKey = cache.keys().next().value;
+			if (firstKey) cache.delete(firstKey);
+		}
+		cache.set(texInput, svgString);
+
+		return new Response(svgString, {
+			headers: {
+				'Content-Type': 'image/svg+xml',
+				'Cache-Control': 'public, max-age=31536000, immutable'
+			}
+		});
+	} catch (e) {
+		return new Response(`Error rendering LaTeX: ${e}`, { status: 500 });
+	}
+};