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

fix(frontend): better layout

Browse Source
This commit is contained in:
h
2026-01-21 02:35:18 +01:00
parent 6ccc06f90f
commit 10dff8f45e
2 changed files with 23 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,11 +39,9 @@
: [] : []
); );
let messagesContainer = $state<HTMLDivElement | null>(null);
$effect(() => { $effect(() => {
if (messages.length && messagesContainer) { if (messages.length) {
messagesContainer.scrollTop = messagesContainer.scrollHeight; window.scrollTo(0, document.body.scrollHeight);
} }
}); });
@@ -101,21 +99,18 @@
/> />
</svelte:head> </svelte:head>
<div class="fixed inset-0 flex flex-col bg-black text-white"> <div class="min-h-dvh bg-black p-1.5 text-white">
{#if chatData.isLoading} {#if chatData.isLoading}
<div class="flex flex-1 items-center justify-center text-xs text-neutral-500">Loading...</div> <div class="py-4 text-center text-xs text-neutral-500">Loading...</div>
{:else if chatData.error} {:else if chatData.error}
<div class="flex flex-1 flex-col items-center justify-center gap-1 p-2 text-red-500"> <div class="py-4 text-center text-red-500">
<div class="text-xs">Error</div> <div class="text-xs">Error</div>
<div class="max-w-full text-center text-[8px] break-all">{chatData.error.message}</div> <div class="text-[8px] break-all">{chatData.error.message}</div>
</div> </div>
{:else if !chatData.data} {:else if !chatData.data}
<div class="flex flex-1 items-center justify-center text-xs text-neutral-500">Not found</div> <div class="py-4 text-center text-xs text-neutral-500">Not found</div>
{:else} {:else}
<div <div class="space-y-1">
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}
@@ -125,23 +120,21 @@
{/each} {/each}
</div> </div>
<div class="shrink-0 border-t border-neutral-800"> {#if followUpOptions.length > 0}
{#if followUpOptions.length > 0} <div class="mt-2">
<div class="px-1.5 py-1"> <FollowUpButtons options={followUpOptions} onselect={sendMessage} />
<FollowUpButtons options={followUpOptions} onselect={sendMessage} /> </div>
</div> {/if}
{/if}
<div class="flex gap-1 px-1.5 pb-1"> <div class="mt-2 flex gap-1">
<button <button
onclick={summarize} onclick={summarize}
class="shrink-0 rounded bg-neutral-800 px-1.5 py-0.5 text-[8px] text-neutral-400" class="shrink-0 rounded bg-neutral-800 px-1.5 py-0.5 text-[8px] text-neutral-400"
> >
/sum /sum
</button> </button>
<div class="flex-1"> <div class="flex-1">
<ChatInput onsubmit={sendMessage} /> <ChatInput onsubmit={sendMessage} />
</div>
</div> </div>
</div> </div>
{/if} {/if}

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

@@ -3,14 +3,9 @@
html, html,
body { body {
background: black; background: black;
overflow: hidden; min-height: 100%;
overscroll-behavior: none; overscroll-behavior: none;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
touch-action: pan-y;
position: fixed;
inset: 0;
width: 100%;
height: 100%;
} }
* { * {