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:16:35 +01:00
parent 9d579d9b9f
commit 592aa5bc6b
4 changed files with 59 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/ChatInput.svelte
View File

@@ -17,19 +17,19 @@
} }
</script> </script>
<form onsubmit={handleSubmit} class="flex gap-2"> <form onsubmit={handleSubmit} class="flex gap-1">
<input <input
type="text" type="text"
bind:value bind:value
{disabled} {disabled}
placeholder="Message..." placeholder="..."
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" class="min-w-0 flex-1 rounded bg-neutral-800 px-2 py-1 text-[10px] text-white placeholder-neutral-500 outline-none"
/> />
<button <button
type="submit" type="submit"
{disabled} {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> </button>
</form> </form>

13
frontend/src/lib/convex-polling.svelte.ts
View File

@@ -12,17 +12,13 @@ type PollingContext = {
export function hasWebSocketSupport(): boolean { export function hasWebSocketSupport(): boolean {
if (typeof window === 'undefined') return true; if (typeof window === 'undefined') return true;
try { try {
const hasWs = 'WebSocket' in window && typeof WebSocket !== 'undefined'; return 'WebSocket' in window && typeof WebSocket !== 'undefined';
console.log('[convex-polling] WebSocket check:', hasWs); } catch {
return hasWs;
} catch (e) {
console.log('[convex-polling] WebSocket check error:', e);
return false; return false;
} }
} }
export function setupPollingConvex(url: string): void { export function setupPollingConvex(url: string): void {
console.log('[convex-polling] Setting up polling client with URL:', url);
const client = new ConvexHttpClient(url); const client = new ConvexHttpClient(url);
setContext<PollingContext>(POLLING_CONTEXT_KEY, { client }); setContext<PollingContext>(POLLING_CONTEXT_KEY, { client });
} }
@@ -67,27 +63,22 @@ export function usePollingQuery<Query extends FunctionReference<'query'>>(
async function poll() { async function poll() {
const args = argsGetter(); const args = argsGetter();
if (args === 'skip') { if (args === 'skip') {
console.log('[convex-polling] Skipping query (args=skip)');
state.isLoading = false; state.isLoading = false;
return; return;
} }
const argsJson = JSON.stringify(args); const argsJson = JSON.stringify(args);
if (argsJson !== lastArgsJson) { if (argsJson !== lastArgsJson) {
console.log('[convex-polling] Args changed, setting loading');
state.isLoading = true; state.isLoading = true;
lastArgsJson = argsJson; lastArgsJson = argsJson;
} }
try { try {
console.log('[convex-polling] Polling query with args:', args);
const result = await client.query(query, args); const result = await client.query(query, args);
console.log('[convex-polling] Query result:', result);
state.data = result; state.data = result;
state.error = null; state.error = null;
state.isLoading = false; state.isLoading = false;
} catch (err) { } catch (err) {
console.error('[convex-polling] Query error:', err);
state.error = err instanceof Error ? err : new Error(String(err)); state.error = err instanceof Error ? err : new Error(String(err));
state.isLoading = false; state.isLoading = false;
} }

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

@@ -10,7 +10,6 @@
const usePolling = getContext<boolean>('convex-use-polling') ?? false; const usePolling = getContext<boolean>('convex-use-polling') ?? false;
let mnemonic = $derived(page.params.mnemonic); let mnemonic = $derived(page.params.mnemonic);
let debugInfo = $state('');
const chatDataWs = usePolling const chatDataWs = usePolling
? null ? null
@@ -40,9 +39,11 @@
: [] : []
); );
let messagesContainer = $state<HTMLDivElement | null>(null);
$effect(() => { $effect(() => {
if (messages.length) { if (messages.length && messagesContainer) {
window.scrollTo(0, document.body.scrollHeight); messagesContainer.scrollTop = messagesContainer.scrollHeight;
} }
}); });
@@ -94,34 +95,27 @@
<svelte:head> <svelte:head>
<title>Chat</title> <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> </svelte:head>
<div class="min-h-dvh bg-black text-white"> <div class="fixed inset-0 flex flex-col 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} {#if chatData.isLoading}
<div class="flex min-h-dvh items-center justify-center text-neutral-500"> <div class="flex flex-1 items-center justify-center text-xs text-neutral-500">Loading...</div>
Loading... ({usePolling ? 'polling' : 'ws'})
</div>
{:else if chatData.error} {:else if chatData.error}
<div class="flex min-h-dvh flex-col items-center justify-center gap-2 p-4 text-red-500"> <div class="flex flex-1 flex-col items-center justify-center gap-1 p-2 text-red-500">
<div>Error:</div> <div class="text-xs">Error</div>
<div class="max-w-full text-xs break-all">{chatData.error.message}</div> <div class="max-w-full text-center text-[8px] break-all">{chatData.error.message}</div>
<div class="text-[10px] text-neutral-500">Mode: {usePolling ? 'polling' : 'websocket'}</div>
</div> </div>
{:else if !chatData.data} {: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} {: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)} {#each messages as message (message._id)}
<ChatMessage <ChatMessage
role={message.role} role={message.role}
@@ -131,23 +125,24 @@
{/each} {/each}
</div> </div>
<div class="shrink-0 border-t border-neutral-800">
{#if followUpOptions.length > 0} {#if followUpOptions.length > 0}
<div class="border-t border-neutral-800 px-2 py-1.5"> <div class="px-1.5 py-1">
<FollowUpButtons options={followUpOptions} onselect={sendMessage} /> <FollowUpButtons options={followUpOptions} onselect={sendMessage} />
</div> </div>
{/if} {/if}
<div class="border-t border-neutral-800 px-2 pt-1.5"> <div class="flex gap-1 px-1.5 pb-1">
<button <button
onclick={summarize} onclick={summarize}
class="rounded bg-neutral-800 px-2 py-1 text-[10px] text-neutral-400" class="shrink-0 rounded bg-neutral-800 px-1.5 py-0.5 text-[8px] text-neutral-400"
> >
/summarize /sum
</button> </button>
</div> <div class="flex-1">
<div class="p-2 pt-1">
<ChatInput onsubmit={sendMessage} /> <ChatInput onsubmit={sendMessage} />
</div> </div>
</div>
</div>
{/if} {/if}
</div> </div>

17
frontend/src/routes/layout.css
View File

@@ -1,5 +1,22 @@
@import 'tailwindcss'; @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 h1,
.prose-mini h2, .prose-mini h2,
.prose-mini h3, .prose-mini h3,