fix(frontend): ws replacement

frontend/Dockerfile

@@ -8,9 +8,13 @@ ENV PUBLIC_CONVEX_URL=$PUBLIC_CONVEX_URL
 
 WORKDIR /app
 
+COPY package.json bun.lock* ./
+
+RUN bun install --frozen-lockfile
+
 COPY . .
 
-RUN bun i
-RUN bun run build
+RUN bun --bun svelte-kit sync
+RUN bun --bun run build
 
 ENTRYPOINT ["bun"]

frontend/bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "frontend",

frontend/src/lib/components/ChatInput.svelte

@@ -17,19 +17,19 @@
 	}
 </script>
 
-<form onsubmit={handleSubmit} class="flex gap-2">
+<form onsubmit={handleSubmit} class="flex gap-1">
 	<input
 		type="text"
 		bind:value
 		{disabled}
-		placeholder="Message..."
-		class="flex-1 rounded-lg bg-neutral-800 px-3 py-2 text-[11px] text-white placeholder-neutral-500 outline-none focus:ring-1 focus:ring-neutral-600"
+		placeholder="..."
+		class="min-w-0 flex-1 rounded bg-neutral-800 px-2 py-1 text-[10px] text-white placeholder-neutral-500 outline-none"
 	/>
 	<button
 		type="submit"
 		{disabled}
-		class="rounded-lg bg-blue-600 px-3 py-2 text-[11px] text-white transition-colors hover:bg-blue-500 disabled:opacity-50"
+		class="shrink-0 rounded bg-blue-600 px-2 py-1 text-[10px] text-white disabled:opacity-50"
 	>
-		Send
+		&gt;
 	</button>
 </form>

frontend/src/lib/convex-polling.svelte.ts

@@ -0,0 +1,109 @@
+import { ConvexHttpClient } from 'convex/browser';
+import { getContext, setContext } from 'svelte';
+import type { FunctionReference, FunctionArgs, FunctionReturnType } from 'convex/server';
+
+const POLLING_CONTEXT_KEY = 'convex-polling';
+const POLL_INTERVAL = 1000;
+
+type PollingContext = {
+	client: ConvexHttpClient;
+};
+
+export function hasWebSocketSupport(): boolean {
+	if (typeof window === 'undefined') return true;
+	try {
+		return 'WebSocket' in window && typeof WebSocket !== 'undefined';
+	} catch {
+		return false;
+	}
+}
+
+export function setupPollingConvex(url: string): void {
+	const client = new ConvexHttpClient(url);
+	setContext<PollingContext>(POLLING_CONTEXT_KEY, { client });
+}
+
+export function usePollingClient(): ConvexHttpClient {
+	const ctx = getContext<PollingContext>(POLLING_CONTEXT_KEY);
+	if (!ctx) {
+		throw new Error('Convex polling client not set up. Call setupPollingConvex first.');
+	}
+	return ctx.client;
+}
+
+type QueryState<T> = {
+	data: T | undefined;
+	error: Error | null;
+	isLoading: boolean;
+};
+
+export function usePollingMutation<Mutation extends FunctionReference<'mutation'>>(
+	mutation: Mutation
+): (args: FunctionArgs<Mutation>) => Promise<FunctionReturnType<Mutation>> {
+	const client = usePollingClient();
+	return (args: FunctionArgs<Mutation>) => client.mutation(mutation, args);
+}
+
+export function usePollingQuery<Query extends FunctionReference<'query'>>(
+	query: Query,
+	argsGetter: () => FunctionArgs<Query> | 'skip'
+): { data: FunctionReturnType<Query> | undefined; error: Error | null; isLoading: boolean } {
+	const client = usePollingClient();
+
+	// eslint-disable-next-line prefer-const
+	let state = $state<QueryState<FunctionReturnType<Query>>>({
+		data: undefined,
+		error: null,
+		isLoading: true
+	});
+
+	let intervalId: ReturnType<typeof setInterval> | null = null;
+	let lastArgsJson = '';
+
+	async function poll() {
+		const args = argsGetter();
+		if (args === 'skip') {
+			state.isLoading = false;
+			return;
+		}
+
+		const argsJson = JSON.stringify(args);
+		if (argsJson !== lastArgsJson) {
+			state.isLoading = true;
+			lastArgsJson = argsJson;
+		}
+
+		try {
+			const result = await client.query(query, args);
+			state.data = result;
+			state.error = null;
+			state.isLoading = false;
+		} catch (err) {
+			state.error = err instanceof Error ? err : new Error(String(err));
+			state.isLoading = false;
+		}
+	}
+
+	$effect(() => {
+		poll();
+		intervalId = setInterval(poll, POLL_INTERVAL);
+
+		return () => {
+			if (intervalId) {
+				clearInterval(intervalId);
+			}
+		};
+	});
+
+	return {
+		get data() {
+			return state.data;
+		},
+		get error() {
+			return state.error;
+		},
+		get isLoading() {
+			return state.isLoading;
+		}
+	};
+}

frontend/src/lib/convex/_generated/api.d.ts

@@ -9,6 +9,7 @@
  */
 
 import type * as chats from "../chats.js";
+import type * as http from "../http.js";
 import type * as messages from "../messages.js";
 import type * as pendingGenerations from "../pendingGenerations.js";
 import type * as users from "../users.js";
@@ -21,6 +22,7 @@ import type {
 
 declare const fullApi: ApiFromModules<{
   chats: typeof chats;
+  http: typeof http;
   messages: typeof messages;
   pendingGenerations: typeof pendingGenerations;
   users: typeof users;

frontend/src/lib/convex/http.ts

@@ -0,0 +1,40 @@
+import { httpRouter } from 'convex/server';
+import { httpAction } from './_generated/server';
+import { internal } from './_generated/api';
+import type { Id } from './_generated/dataModel';
+
+const http = httpRouter();
+
+http.route({
+	path: '/upload-image',
+	method: 'POST',
+	handler: httpAction(async (ctx, req) => {
+		const chatId = req.headers.get('X-Chat-Id');
+		const mediaType = req.headers.get('Content-Type') || 'image/jpeg';
+		const caption = req.headers.get('X-Caption') || '';
+
+		if (!chatId) {
+			return new Response(JSON.stringify({ error: 'Missing X-Chat-Id header' }), {
+				status: 400,
+				headers: { 'Content-Type': 'application/json' }
+			});
+		}
+
+		const blob = await req.blob();
+		const storageId = await ctx.storage.store(blob);
+
+		await ctx.runMutation(internal.messages.createWithImage, {
+			chatId: chatId as Id<'chats'>,
+			content: caption,
+			imageStorageId: storageId,
+			imageMediaType: mediaType
+		});
+
+		return new Response(JSON.stringify({ storageId }), {
+			status: 200,
+			headers: { 'Content-Type': 'application/json' }
+		});
+	})
+});
+
+export default http;

frontend/src/routes/+layout.svelte

@@ -3,10 +3,19 @@
 	import favicon from '$lib/assets/favicon.svg';
 	import { PUBLIC_CONVEX_URL } from '$env/static/public';
 	import { setupConvex } from 'convex-svelte';
+	import { hasWebSocketSupport, setupPollingConvex } from '$lib/convex-polling.svelte';
+	import { setContext } from 'svelte';
 
 	let { children } = $props();
 
-	setupConvex(PUBLIC_CONVEX_URL);
+	const usePolling = !hasWebSocketSupport();
+	setContext('convex-use-polling', usePolling);
+
+	if (usePolling) {
+		setupPollingConvex(PUBLIC_CONVEX_URL);
+	} else {
+		setupConvex(PUBLIC_CONVEX_URL);
+	}
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>

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

@@ -1,18 +1,35 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import { getContext } from 'svelte';
 	import { useQuery, useConvexClient } from 'convex-svelte';
+	import { usePollingQuery, usePollingMutation } from '$lib/convex-polling.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';
 
+	const usePolling = getContext<boolean>('convex-use-polling') ?? false;
 	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'
-	);
+	const chatDataWs = usePolling
+		? null
+		: useQuery(api.chats.getWithUser, () => (mnemonic ? { mnemonic } : 'skip'));
+	const chatDataPoll = usePolling
+		? usePollingQuery(api.chats.getWithUser, () => (mnemonic ? { mnemonic } : 'skip'))
+		: null;
+	const chatData = $derived(usePolling ? chatDataPoll! : chatDataWs!);
+
+	const messagesQueryWs = usePolling
+		? null
+		: useQuery(api.messages.listByChat, () =>
+				chatData.data?.chat?._id ? { chatId: chatData.data.chat._id } : 'skip'
+			);
+	const messagesQueryPoll = usePolling
+		? usePollingQuery(api.messages.listByChat, () =>
+				chatData.data?.chat?._id ? { chatId: chatData.data.chat._id } : 'skip'
+			)
+		: null;
+	const messagesQuery = $derived(usePolling ? messagesQueryPoll! : messagesQueryWs!);
 
 	let messages = $derived(messagesQuery.data ?? []);
 	let lastMessage = $derived(messages[messages.length - 1]);
@@ -22,53 +39,83 @@
 			: []
 	);
 
+	let messagesContainer = $state<HTMLDivElement | null>(null);
+
 	$effect(() => {
-		if (messages.length) {
-			window.scrollTo(0, document.body.scrollHeight);
+		if (messages.length && messagesContainer) {
+			messagesContainer.scrollTop = messagesContainer.scrollHeight;
 		}
 	});
 
+	const clientWs = usePolling ? null : useConvexClient();
+	const createMessagePoll = usePolling ? usePollingMutation(api.messages.create) : null;
+
 	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'
-		});
+		if (usePolling && createMessagePoll) {
+			await createMessagePoll({
+				chatId: chat._id,
+				role: 'user',
+				content,
+				source: 'web'
+			});
+		} else if (clientWs) {
+			await clientWs.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'
-		});
+		if (usePolling && createMessagePoll) {
+			await createMessagePoll({
+				chatId: chat._id,
+				role: 'user',
+				content: '/summarize',
+				source: 'web'
+			});
+		} else if (clientWs) {
+			await clientWs.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" />
+	<meta
+		name="viewport"
+		content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
+	/>
 </svelte:head>
 
-<div class="min-h-dvh bg-black text-white">
+<div class="fixed inset-0 flex flex-col bg-black text-white">
 	{#if chatData.isLoading}
-		<div class="flex min-h-dvh items-center justify-center text-neutral-500">Loading...</div>
+		<div class="flex flex-1 items-center justify-center text-xs 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 class="flex flex-1 flex-col items-center justify-center gap-1 p-2 text-red-500">
+			<div class="text-xs">Error</div>
+			<div class="max-w-full text-center text-[8px] break-all">{chatData.error.message}</div>
 		</div>
 	{:else if !chatData.data}
-		<div class="flex min-h-dvh items-center justify-center text-neutral-500">Chat not found</div>
+		<div class="flex flex-1 items-center justify-center text-xs text-neutral-500">Not found</div>
 	{:else}
-		<div class="space-y-1.5 p-2">
+		<div
+			bind:this={messagesContainer}
+			class="flex-1 space-y-1 overflow-y-auto overscroll-contain p-1.5"
+		>
 			{#each messages as message (message._id)}
 				<ChatMessage
 					role={message.role}
@@ -78,23 +125,24 @@
 			{/each}
 		</div>
 
-		{#if followUpOptions.length > 0}
-			<div class="border-t border-neutral-800 px-2 py-1.5">
-				<FollowUpButtons options={followUpOptions} onselect={sendMessage} />
+		<div class="shrink-0 border-t border-neutral-800">
+			{#if followUpOptions.length > 0}
+				<div class="px-1.5 py-1">
+					<FollowUpButtons options={followUpOptions} onselect={sendMessage} />
+				</div>
+			{/if}
+
+			<div class="flex gap-1 px-1.5 pb-1">
+				<button
+					onclick={summarize}
+					class="shrink-0 rounded bg-neutral-800 px-1.5 py-0.5 text-[8px] text-neutral-400"
+				>
+					/sum
+				</button>
+				<div class="flex-1">
+					<ChatInput onsubmit={sendMessage} />
+				</div>
 			</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,5 +1,22 @@
 @import 'tailwindcss';
 
+html,
+body {
+	background: black;
+	overflow: hidden;
+	overscroll-behavior: none;
+	-webkit-overflow-scrolling: touch;
+	touch-action: pan-y;
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+}
+
+* {
+	-webkit-tap-highlight-color: transparent;
+}
+
 .prose-mini h1,
 .prose-mini h2,
 .prose-mini h3,

frontend/svelte.config.js

@@ -1,18 +1,18 @@
 import adapter from 'svelte-adapter-bun';
-import {vitePreprocess} from '@sveltejs/vite-plugin-svelte';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://svelte.dev/docs/kit/integrations
-  // for more information about preprocessors
-  preprocess: vitePreprocess(),
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
 
-  kit: {
-    // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
-    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
-    // See https://svelte.dev/docs/kit/adapters for more information about adapters.
-    adapter: adapter()
-  }
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
 };
 
 export default config;