stealth-ai-relay/frontend/src/routes/[mnemonic]/+page.svelte

<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);
	let debugInfo = $state('');

	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]);
	let followUpOptions = $derived(
		lastMessage?.role === 'assistant' && lastMessage.followUpOptions
			? lastMessage.followUpOptions
			: []
	);

	$effect(() => {
		if (messages.length) {
			window.scrollTo(0, document.body.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;

		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;

		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" />
</svelte:head>

<div class="min-h-dvh bg-black text-white">
	<div
		class="fixed top-1 right-1 z-50 max-w-[200px] rounded bg-neutral-900 p-1 text-[8px] break-all text-neutral-500"
	>
		mode: {usePolling ? 'polling' : 'websocket'}<br />
		mnemonic: {mnemonic}<br />
		loading: {chatData.isLoading}<br />
		error: {chatData.error?.message ?? 'none'}<br />
		data: {chatData.data ? 'yes' : 'no'}
	</div>

	{#if chatData.isLoading}
		<div class="flex min-h-dvh items-center justify-center text-neutral-500">
			Loading... ({usePolling ? 'polling' : 'ws'})
		</div>
	{:else if chatData.error}
		<div class="flex min-h-dvh flex-col items-center justify-center gap-2 p-4 text-red-500">
			<div>Error:</div>
			<div class="max-w-full text-xs break-all">{chatData.error.message}</div>
			<div class="text-[10px] text-neutral-500">Mode: {usePolling ? 'polling' : 'websocket'}</div>
		</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>