apps/stealth-ai-relay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): ws replacement

Browse Source
This commit is contained in:
h
2026-01-21 02:03:36 +01:00
parent 11811819f1
commit 69ddb3173f
10 changed files with 290 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
frontend/src/routes/[mnemonic]/+page.svelte
View File

@@ -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>