mirror/nanobot
1
0
Fork 0
mirror of https://github.com/HKUDS/nanobot.git synced 2026-08-04 08:28:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): animate reasoning drawer transitions (#5143)

Browse Source
This commit is contained in:
chengyongru 2026-07-28 19:13:16 +08:00 committed by GitHub
parent 24a392b671
commit 019d7816a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,20 +45,27 @@ export function ThinkingReasoningShell({
>
{label}
</span>
<ChevronDown
<span
className={cn(
"h-3 w-3 shrink-0 text-muted-foreground/60 transition-[transform,color] duration-200",
"group-hover:text-muted-foreground motion-reduce:transition-none",
"inline-flex shrink-0 transition-transform [transition-duration:600ms] ease-out",
"motion-reduce:[transition-duration:220ms]",
expanded && "rotate-180",
)}
strokeWidth={1.8}
aria-hidden
/>
>
<ChevronDown
className={cn(
"h-3 w-3 text-muted-foreground/60 transition-colors duration-200",
"group-hover:text-muted-foreground motion-reduce:transition-none",
)}
strokeWidth={1.8}
aria-hidden
/>
</span>
</button>
<div
className={cn(
"grid transition-[grid-template-rows,opacity] duration-300 motion-reduce:transition-none",
"grid transition-[grid-template-rows,opacity] [transition-duration:600ms] ease-out motion-reduce:[transition-duration:220ms]",
expanded
? "grid-rows-[1fr] opacity-100"
: "pointer-events-none grid-rows-[0fr] opacity-0",

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

@ -350,6 +350,31 @@ describe("AgentActivityCluster", () => {
}
});
it("keeps chevron color feedback faster than the drawer rotation", () => {
render(
<AgentActivityCluster
messages={[{
id: "r-motion",
role: "assistant",
content: "",
reasoning: "checking motion",
createdAt: 1,
}]}
isTurnStreaming={false}
hasBodyBelow
/>,
);
const button = screen.getByRole("button", { name: "Thought" });
const chevron = button.querySelector("svg");
expect(chevron).toBeInTheDocument();
expect(chevron).toHaveClass("transition-colors", "duration-200");
expect(chevron?.parentElement).toHaveClass(
"transition-transform",
"[transition-duration:600ms]",
);
});
it("uses persisted turn latency for completed history instead of replay timestamps", () => {
render(
<AgentActivityCluster