Grayscale/nanobot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui): opaque composer, equal-width message area, cleaner user pill

Browse Source
This commit is contained in:
Xubin Ren
2026-04-23 07:48:32 +00:00
parent 06503cd0fc
commit 185a8fd34d
3 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/MessageBubble.tsx
+1 -2
View File
@@ -42,9 +42,8 @@ export function MessageBubble({ message }: MessageBubbleProps) {
{hasText ? ( {hasText ? (
<p <p
className={cn( className={cn(
"ml-auto w-fit rounded-[18px] border border-border/60 bg-secondary/70 px-4 py-2", "ml-auto w-fit rounded-[18px] bg-secondary/70 px-4 py-2",
"text-left text-[18px]/[1.8] whitespace-pre-wrap break-words", "text-left text-[18px]/[1.8] whitespace-pre-wrap break-words",
"shadow-[0_10px_24px_-18px_rgba(0,0,0,0.55)]",
)} )}
> >
{message.content} {message.content}
webui/src/components/thread/ThreadComposer.tsx
+3 -3
View File
@@ -216,9 +216,9 @@ export function ThreadComposer({
className={cn( className={cn(
"relative mx-auto flex w-full flex-col overflow-hidden transition-all duration-200", "relative mx-auto flex w-full flex-col overflow-hidden transition-all duration-200",
isHero isHero
? "max-w-[40rem] rounded-[24px] border border-border/75 bg-card/72 shadow-[0_10px_30px_rgba(0,0,0,0.10)]" ? "max-w-[40rem] rounded-[24px] border border-border/75 bg-card shadow-[0_10px_30px_rgba(0,0,0,0.10)]"
: "max-w-[49.5rem] rounded-[16px] border border-border/70 bg-card/55", : "max-w-[49.5rem] rounded-[16px] border border-border/70 bg-card",
"focus-within:bg-card/70 focus-within:ring-1 focus-within:ring-foreground/8", "focus-within:ring-1 focus-within:ring-foreground/8",
disabled && "opacity-60", disabled && "opacity-60",
isDragging && "ring-2 ring-primary/40 motion-reduce:ring-0 motion-reduce:border-primary", isDragging && "ring-2 ring-primary/40 motion-reduce:ring-0 motion-reduce:border-primary",
)} )}
webui/src/components/thread/ThreadViewport.tsx
+4 -2
View File
@@ -70,10 +70,12 @@ export function ThreadViewport({
{hasMessages ? ( {hasMessages ? (
<div className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col"> <div className="mx-auto flex min-h-full w-full max-w-[64rem] flex-col">
<div className="flex-1 px-4 pb-20 pt-4"> <div className="flex-1 px-4 pb-20 pt-4">
<ThreadMessages messages={messages} /> <div className="mx-auto w-full max-w-[49.5rem]">
<ThreadMessages messages={messages} />
</div>
</div> </div>
<div className="sticky bottom-0 z-10 mt-auto"> <div className="sticky bottom-0 z-10 mt-auto bg-background">
<div className="px-4 pb-3"> <div className="px-4 pb-3">
{composer} {composer}
</div> </div>