Iceberg/chat-website
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: centered input + default stream

Browse Source
This commit is contained in:
LucasDLTG
2026-04-29 15:12:44 +02:00
parent 18f293ce67
commit 6e409592b5
2 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/chat/ChatUI.tsx
+45 -39
View File
@@ -39,7 +39,7 @@ export default function ChatUI({
stop: [''],
repeatPenalty: 1.1,
seed: 0,
stream: false,
stream: true,
keepAlive: '5m',
});
@@ -108,7 +108,8 @@ export default function ChatUI({
if (!res.ok) {
let message = 'Request failed';
if (res.status === 500) message = 'Server error (likely model too large or OOM)';
if (res.status === 500)
message = 'Server error (likely model too large or OOM)';
else if (res.status === 401) message = 'Unauthorized';
else message = data?.message ?? data?.error ?? message;
throw new Error(message);
@@ -179,54 +180,59 @@ export default function ChatUI({
/>
</header>
{/* Messages */}
{/* Messages + centered input when empty */}
<main className="flex-1 overflow-y-auto flex flex-col p-6">
<div className="w-full max-w-2xl mx-auto space-y-3">
{messages.map((msg, i) => (
<div key={i} className="text-sm">
<b>{msg.role === 'user' ? 'You' : 'AI'}:</b> {msg.content}
{/* Blinking cursor shown on the last message while streaming */}
{loading &&
settings.stream &&
i === messages.length - 1 &&
msg.role === ASSISTANT_ROLE && (
<span className="inline-block w-[2px] h-[1em] bg-current ml-0.5 align-middle animate-pulse" />
)}
</div>
))}
{loading && !settings.stream && (
<div className="text-xs text-muted">Thinking...</div>
)}
</div>
</main>
{/* Input — floats center when empty, slides to bottom on first message */}
<div
className={`
transition-all duration-500 ease-in-out
${
messages.length === 0
? 'absolute inset-0 flex items-center justify-center pointer-events-none'
: 'p-4'
}
`}
>
<div className="w-full max-w-2xl mx-auto pointer-events-auto transition-all duration-500 ease-in-out">
{messages.length === 0 && (
<p className="text-center text-primary text-sm mb-3 opacity-60">
{messages.length === 0 ? (
/* ── Empty state: input centered within the chat column only ── */
<div className="flex-1 flex flex-col items-center justify-center">
<p className="text-primary text-sm mb-3 opacity-60">
Start a conversation…
</p>
)}
<input
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) =>
e.key === 'Enter' && !loading && sendMessage()
}
disabled={loading}
className="w-full max-w-2xl p-3 rounded-xl bg-black/20 border border-muted outline-none disabled:opacity-50"
placeholder="Message..."
/>
</div>
) : (
/* ── Active chat: messages list ── */
<div className="w-full max-w-2xl mx-auto space-y-3">
{messages.map((msg, i) => (
<div key={i} className="text-sm">
<b>{msg.role === 'user' ? 'You' : 'AI'}:</b> {msg.content}
{loading &&
settings.stream &&
i === messages.length - 1 &&
msg.role === ASSISTANT_ROLE && (
<span className="inline-block w-[2px] h-[1em] bg-current ml-0.5 align-middle animate-pulse" />
)}
</div>
))}
{loading && !settings.stream && (
<div className="text-xs text-muted">Thinking...</div>
)}
</div>
)}
</main>
{/* Input bar — only shown once conversation has started */}
{messages.length > 0 && (
<div className="p-4">
<input
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && !loading && sendMessage()}
disabled={loading}
className="w-full p-3 rounded-xl bg-black/20 border border-muted outline-none disabled:opacity-50"
className="w-full max-w-2xl mx-auto block p-3 rounded-xl bg-black/20 border border-muted outline-none disabled:opacity-50"
placeholder="Message..."
/>
</div>
</div>
)}
</div>
</div>
);