mirror of
https://github.com/HKUDS/nanobot.git
synced 2026-08-07 21:08:34 +03:00
style(webui): highlight selected conversations
This commit is contained in:
@@ -255,13 +255,14 @@ export const ChatList = memo(function ChatList({
|
|||||||
"group flex min-w-0 max-w-full items-center gap-2 rounded-xl px-2 text-[13px] transition-colors",
|
"group flex min-w-0 max-w-full items-center gap-2 rounded-xl px-2 text-[13px] transition-colors",
|
||||||
compact ? "min-h-7" : "min-h-8",
|
compact ? "min-h-7" : "min-h-8",
|
||||||
active
|
active
|
||||||
? "bg-sidebar-accent/70 text-sidebar-accent-foreground shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.16)]"
|
? "bg-sidebar-accent text-sidebar-accent-foreground shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.55)]"
|
||||||
: "text-sidebar-foreground/82 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
|
: "text-sidebar-foreground/82 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => onSelect(s.key)}
|
onClick={() => onSelect(s.key)}
|
||||||
|
aria-current={active ? "page" : undefined}
|
||||||
title={tooltipTitle}
|
title={tooltipTitle}
|
||||||
className={cn(
|
className={cn(
|
||||||
"min-w-0 flex-1 overflow-hidden text-left",
|
"min-w-0 flex-1 overflow-hidden text-left",
|
||||||
|
|||||||
@@ -192,6 +192,31 @@ describe("ChatList", () => {
|
|||||||
expect(within(chatsSection).queryByText("Project chat")).not.toBeInTheDocument();
|
expect(within(chatsSection).queryByText("Project chat")).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it("visually distinguishes the selected topic", () => {
|
||||||
|
render(
|
||||||
|
<ChatList
|
||||||
|
sessions={[
|
||||||
|
session({ chatId: "active", title: "Active topic" }),
|
||||||
|
session({ chatId: "inactive", title: "Inactive topic" }),
|
||||||
|
]}
|
||||||
|
activeKey="websocket:active"
|
||||||
|
onSelect={vi.fn()}
|
||||||
|
onRequestDelete={vi.fn()}
|
||||||
|
onTogglePin={vi.fn()}
|
||||||
|
onRequestRename={vi.fn()}
|
||||||
|
onToggleArchive={vi.fn()}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
const activeButton = screen.getByTitle("Active topic");
|
||||||
|
expect(activeButton).toHaveAttribute("aria-current", "page");
|
||||||
|
expect(activeButton.parentElement).toHaveClass(
|
||||||
|
"bg-sidebar-accent",
|
||||||
|
"shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border)/0.55)]",
|
||||||
|
);
|
||||||
|
expect(screen.getByTitle("Inactive topic")).not.toHaveAttribute("aria-current");
|
||||||
|
});
|
||||||
|
|
||||||
it("can collapse a project group and keeps project rename separate from chat titles", async () => {
|
it("can collapse a project group and keeps project rename separate from chat titles", async () => {
|
||||||
const onToggleGroup = vi.fn();
|
const onToggleGroup = vi.fn();
|
||||||
const onRequestRenameProject = vi.fn();
|
const onRequestRenameProject = vi.fn();
|
||||||
|
|||||||
Reference in New Issue
Block a user