mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-08-07 09:58:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): preserve activity text rendering

Browse Source
This commit is contained in:
chengyongru 2026-08-07 12:04:19 +08:00 committed by chengyongru
parent 3836c32874
commit 02a002a0e6
3 changed files with 26 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
webui/src/components/thread/activity/ThinkingReasoningShell.tsx
View File

@ -76,20 +76,34 @@ export function ThinkingReasoningShell({
: "pointer-events-none grid-rows-[0fr] opacity-0",
)}
>
<div className="min-h-0 overflow-hidden">
<div className="relative min-h-0 overflow-hidden">
<div
ref={viewportRef}
data-testid={expanded ? "agent-activity-scroll" : undefined}
data-fade-top={fadeTop}
data-fade-bottom={fadeBottom}
onScroll={onScroll}
className="activity-scroll-fade mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
className="mt-1.5 max-h-[180px] overflow-y-auto pr-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
aria-hidden={!expanded}
>
<div ref={contentRef} className="flex flex-col gap-0.5">
{children}
</div>
</div>
{fadeTop ? (
<span
data-testid="activity-scroll-fade-top"
className="pointer-events-none absolute inset-x-0 top-1.5 z-10 h-3.5 bg-gradient-to-b from-background to-transparent"
aria-hidden
/>
) : null}
{fadeBottom ? (
<span
data-testid="activity-scroll-fade-bottom"
className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3.5 bg-gradient-to-t from-background to-transparent"
aria-hidden
/>
) : null}
</div>
</div>
</div>

28
webui/src/globals.css
View File

@ -681,34 +681,6 @@
container-type: inline-size;
}
/* Soften only the activity edges that have clipped content beyond them. */
.activity-scroll-fade[data-fade-top="true"][data-fade-bottom="false"] {
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px);
mask-image: linear-gradient(to bottom, transparent, #000 14px);
}
.activity-scroll-fade[data-fade-top="false"][data-fade-bottom="true"] {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}
.activity-scroll-fade[data-fade-top="true"][data-fade-bottom="true"] {
-webkit-mask-image: linear-gradient(
to bottom,
transparent,
#000 14px,
#000 calc(100% - 14px),
transparent
);
mask-image: linear-gradient(
to bottom,
transparent,
#000 14px,
#000 calc(100% - 14px),
transparent
);
}
@supports (content-visibility: auto) {
.thread-render-unit {
content-visibility: auto;

10
webui/src/tests/agent-activity-cluster.test.tsx
View File

@ -288,16 +288,24 @@ describe("AgentActivityCluster", () => {
});
expect(scrollport).toHaveAttribute("data-fade-top", "true");
expect(scrollport).toHaveAttribute("data-fade-bottom", "false");
const topFade = screen.getByTestId("activity-scroll-fade-top");
expect(scrollport).not.toContainElement(topFade);
expect(scrollport).not.toHaveClass("activity-scroll-fade");
expect(screen.queryByTestId("activity-scroll-fade-bottom")).not.toBeInTheDocument();
scrollport.scrollTop = 440;
fireEvent.scroll(scrollport);
expect(scrollport).toHaveAttribute("data-fade-top", "true");
expect(scrollport).toHaveAttribute("data-fade-bottom", "true");
expect(screen.getByTestId("activity-scroll-fade-top")).toBeInTheDocument();
expect(screen.getByTestId("activity-scroll-fade-bottom")).toBeInTheDocument();
scrollport.scrollTop = 0;
fireEvent.scroll(scrollport);
expect(scrollport).toHaveAttribute("data-fade-top", "false");
expect(scrollport).toHaveAttribute("data-fade-bottom", "true");
expect(screen.queryByTestId("activity-scroll-fade-top")).not.toBeInTheDocument();
expect(screen.getByTestId("activity-scroll-fade-bottom")).toBeInTheDocument();
setScrollGeometry(scrollport, {
scrollHeight: 100,
@ -307,6 +315,8 @@ describe("AgentActivityCluster", () => {
fireEvent.scroll(scrollport);
expect(scrollport).toHaveAttribute("data-fade-top", "false");
expect(scrollport).toHaveAttribute("data-fade-bottom", "false");
expect(screen.queryByTestId("activity-scroll-fade-top")).not.toBeInTheDocument();
expect(screen.queryByTestId("activity-scroll-fade-bottom")).not.toBeInTheDocument();
} finally {
raf.restore();
}