mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-05-20 00:22:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): render generated images as rounded previews

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Xubin Ren 2026-05-08 15:39:37 +00:00 committed by Xubin Ren
parent 151c3d5ad0
commit bbdf1db30d
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
webui/src/components/MessageBubble.tsx
View File

@ -282,7 +282,7 @@ function UserImageCell({
const tileClasses = cn( const tileClasses = cn(
"relative overflow-hidden border border-border/60 bg-muted/40", "relative overflow-hidden border border-border/60 bg-muted/40",
size === "large" size === "large"
? "h-56 w-[min(100%,22rem)] rounded-[18px] sm:h-72 sm:w-[26rem]" ? "w-[min(100%,34rem)] rounded-[20px] bg-transparent"
: "h-24 w-24 rounded-[14px]", : "h-24 w-24 rounded-[14px]",
"shadow-[0_6px_18px_-14px_rgba(0,0,0,0.45)]", "shadow-[0_6px_18px_-14px_rgba(0,0,0,0.45)]",
); );
@ -293,11 +293,10 @@ function UserImageCell({
type="button" type="button"
onClick={onOpen} onClick={onOpen}
aria-label={image.name ? `${openLabel}: ${image.name}` : openLabel} aria-label={image.name ? `${openLabel}: ${image.name}` : openLabel}
title={image.name ?? undefined}
className={cn( className={cn(
tileClasses, tileClasses,
"cursor-zoom-in transition-transform duration-150 motion-reduce:transition-none", "block cursor-zoom-in p-0 transition-transform duration-150 motion-reduce:transition-none",
"hover:scale-[1.02] hover:ring-2 hover:ring-primary/30", "hover:scale-[1.01] hover:ring-2 hover:ring-primary/25",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
)} )}
> >
@ -307,7 +306,12 @@ function UserImageCell({
loading="lazy" loading="lazy"
decoding="async" decoding="async"
draggable={false} draggable={false}
className={cn("h-full w-full", size === "large" ? "object-contain" : "object-cover")} className={cn(
"block",
size === "large"
? "h-auto max-h-[36rem] w-full rounded-[inherit] object-contain"
: "h-full w-full object-cover",
)}
/> />
</button> </button>
); );

5
webui/src/tests/message-bubble.test.tsx
View File

@ -121,7 +121,8 @@ describe("MessageBubble", () => {
const { container } = render(<MessageBubble message={message} />); const { container } = render(<MessageBubble message={message} />);
const imageButton = screen.getByRole("button", { name: /view image/i }); const imageButton = screen.getByRole("button", { name: /view image/i });
expect(imageButton).toHaveClass("h-56", "sm:h-72"); expect(imageButton).toHaveClass("w-[min(100%,34rem)]", "rounded-[20px]");
expect(container.querySelector("img")).toHaveClass("object-contain"); expect(imageButton).not.toHaveAttribute("title");
expect(container.querySelector("img")).toHaveClass("h-auto", "w-full", "object-contain");
}); });
}); });