diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx index cbcbd3b35f1aa..ada70da5e0372 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx @@ -1860,6 +1860,53 @@ export const WithPRStateIcons: Story = { routing: agentsRouting, }), }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await waitFor(() => { + expect(canvas.getByLabelText("Pull request open")).toBeInTheDocument(); + expect(canvas.getByLabelText("Draft pull request")).toBeInTheDocument(); + expect(canvas.getByLabelText("Pull request merged")).toBeInTheDocument(); + expect(canvas.getByLabelText("Pull request closed")).toBeInTheDocument(); + }); + }, +}; + +export const ActiveChatKebabPersistent: Story = { + args: { + chats: [ + buildChat({ + id: "active-chat", + title: "Active chat", + updated_at: recentTimestamp, + }), + buildChat({ + id: "other-chat", + title: "Other chat", + updated_at: recentTimestamp, + }), + ], + }, + parameters: { + reactRouter: reactRouterParameters({ + location: { + path: "/agents/active-chat", + pathParams: { agentId: "active-chat" }, + }, + routing: agentsRouting, + }), + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const activeTrigger = await canvas.findByLabelText( + "Open actions for Active chat", + ); + // The active chat keeps its actions trigger visible without hover. + await waitFor(() => { + expect(window.getComputedStyle(activeTrigger).opacity).toBe("1"); + }); + const otherTrigger = canvas.getByLabelText("Open actions for Other chat"); + expect(window.getComputedStyle(otherTrigger).opacity).toBe("0"); + }, }; export const WithUnreadChats: Story = { diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx index 6e6edc2e4771b..0fbdf3fdab192 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx @@ -255,8 +255,11 @@ const ChatSearchResultRow: FC = ({ const { icon: StatusIcon, className: statusClassName, + label: statusLabel, + prIcon, diffStatus, } = getChatDisplayConfig(chat); + const PRIcon = prIcon?.icon; const additions = diffStatus?.additions ?? 0; const deletions = diffStatus?.deletions ?? 0; const changedFiles = diffStatus?.changed_files ?? 0; @@ -285,12 +288,23 @@ const ChatSearchResultRow: FC = ({ isSelected && "bg-surface-tertiary/40 text-content-primary", )} > - +
{chat.title}
+ {PRIcon && prIcon && ( + + )} {hasLineStats && ( +{additions} diff --git a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx index 04ed47cc7a039..ce2bacc0f9bd9 100644 --- a/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx +++ b/site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx @@ -1,5 +1,4 @@ import { - BotIcon, ChevronDownIcon, ChevronRightIcon, EllipsisVerticalIcon, @@ -127,8 +126,11 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { const { icon: StatusIcon, className: statusClassName, + label: statusLabel, + prIcon, diffStatus, } = getChatDisplayConfig(chat); + const PRIcon = prIcon?.icon; const hasLinkedDiffStatus = Boolean(diffStatus?.url); const changedFiles = diffStatus?.changed_files ?? 0; const additions = diffStatus?.additions ?? 0; @@ -199,6 +201,8 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { ? `agents-tree-executing-${chat.id}` : undefined } + role="img" + aria-label={statusLabel} className={cn("size-3.5 shrink-0", statusClassName)} />
@@ -242,16 +246,12 @@ export const ChatTreeNode: FC = ({ chat, isChildNode }) => { )}
- {hasChildren && ( - - {childIDs.length} - + {PRIcon && prIcon && ( + )} {hasLinkedDiffStatus && hasLineStats && ( = ({ chat, isChildNode }) => { // keep the timestamp visible. hasMenuActions && "[@media(hover:hover)]:group-hover:hidden group-has-[[data-state=open]]:hidden", + hasMenuActions && isActiveChat && "hidden", )} > {chat.has_unread && !isActiveChat ? ( -