diff --git a/site/src/pages/AgentsPage/AgentDetail/TopBar.stories.tsx b/site/src/pages/AgentsPage/AgentDetail/TopBar.stories.tsx index da03f2bbe7..9a1c14fe88 100644 --- a/site/src/pages/AgentsPage/AgentDetail/TopBar.stories.tsx +++ b/site/src/pages/AgentsPage/AgentDetail/TopBar.stories.tsx @@ -1,5 +1,3 @@ -import { MockUserOwner } from "testHelpers/entities"; -import { withAuthProvider, withDashboardProvider } from "testHelpers/storybook"; import type { Meta, StoryObj } from "@storybook/react-vite"; import type { ChatDiffStatusResponse } from "api/api"; import { expect, userEvent, waitFor, within } from "storybook/test"; @@ -40,10 +38,8 @@ const defaultProps = { const meta: Meta = { title: "pages/AgentsPage/AgentDetail/TopBar", component: AgentDetailTopBar, - decorators: [withAuthProvider, withDashboardProvider], parameters: { layout: "fullscreen", - user: MockUserOwner, }, args: defaultProps, }; diff --git a/site/src/pages/AgentsPage/AgentDetail/TopBar.tsx b/site/src/pages/AgentsPage/AgentDetail/TopBar.tsx index 6538a04af1..d311a98fdd 100644 --- a/site/src/pages/AgentsPage/AgentDetail/TopBar.tsx +++ b/site/src/pages/AgentsPage/AgentDetail/TopBar.tsx @@ -8,7 +8,6 @@ import { DropdownMenuSeparator, DropdownMenuTrigger, } from "components/DropdownMenu/DropdownMenu"; -import { useAuthenticated } from "hooks"; import { ArchiveIcon, ArchiveRestoreIcon, @@ -24,46 +23,30 @@ import { TerminalIcon, Trash2Icon, } from "lucide-react"; -import { UserDropdown } from "modules/dashboard/Navbar/UserDropdown/UserDropdown"; -import { useDashboard } from "modules/dashboard/useDashboard"; import type { FC } from "react"; import { useNavigate } from "react-router"; import { toast } from "sonner"; -import { ChimeButton } from "../ChimeButton"; -import { WebPushButton } from "../WebPushButton"; -interface DiffStatsBadgeProps { +const DiffStatsInline: FC<{ status: ChatDiffStatusResponse; - isOpen: boolean; - onToggle: () => void; -} - -const DiffStatsBadge: FC = ({ - status, - isOpen, - onToggle, -}) => { + onClick: () => void; +}> = ({ status, onClick }) => { const additions = status.additions ?? 0; const deletions = status.deletions ?? 0; return ( - + ); }; @@ -113,8 +96,6 @@ export const AgentDetailTopBar: FC = ({ onToggleSidebarCollapsed, }) => { const navigate = useNavigate(); - const { user, signOut } = useAuthenticated(); - const { appearance, buildInfo } = useDashboard(); return (
@@ -160,6 +141,14 @@ export const AgentDetailTopBar: FC = ({ {chatTitle} + {diff.hasDiffStatus && diff.diffStatus && ( + + + + )} {isArchived && ( Archived @@ -170,13 +159,6 @@ export const AgentDetailTopBar: FC = ({
{/* Actions area */}
- {diff.hasDiffStatus && diff.diffStatus && ( - - )}
-
- link.location !== "navbar", - ) ?? [] - } - onSignOut={signOut} - /> + {diff.hasDiffStatus && diff.diffStatus && ( + + )}{" "}
); diff --git a/site/src/pages/AgentsPage/AgentsPage.tsx b/site/src/pages/AgentsPage/AgentsPage.tsx index 409bc561d4..86f56cff02 100644 --- a/site/src/pages/AgentsPage/AgentsPage.tsx +++ b/site/src/pages/AgentsPage/AgentsPage.tsx @@ -28,7 +28,6 @@ import { } from "components/Select/Select"; import { useAuthenticated } from "hooks"; import { MonitorIcon, PanelLeftIcon } from "lucide-react"; -import { UserDropdown } from "modules/dashboard/Navbar/UserDropdown/UserDropdown"; import { useDashboard } from "modules/dashboard/useDashboard"; import { type FC, @@ -47,6 +46,7 @@ import { pageTitle } from "utils/page"; import { AgentChatInput } from "./AgentChatInput"; import { maybePlayChime } from "./AgentDetail/useAgentChime"; import { AgentsSidebar } from "./AgentsSidebar"; +import { ChimeButton } from "./ChimeButton"; import { ConfigureAgentsDialog } from "./ConfigureAgentsDialog"; import { getModelCatalogStatusMessage, @@ -104,8 +104,8 @@ const AgentsPage: FC = () => { const queryClient = useQueryClient(); const navigate = useNavigate(); const { agentId } = useParams(); - const { permissions, user, signOut } = useAuthenticated(); - const { appearance, buildInfo } = useDashboard(); + const { permissions, user } = useAuthenticated(); + const { appearance } = useDashboard(); const isAgentsAdmin = permissions.editDeploymentConfig || user.roles.some((role) => role.name === "owner" || role.name === "admin"); @@ -551,7 +551,8 @@ const AgentsPage: FC = () => { )}
- + + {" "} {isAgentsAdmin && ( )}
-
- link.location !== "navbar", - ) ?? [] - } - onSignOut={signOut} - /> -
= { title: "pages/AgentsPage/AgentsSidebar", component: AgentsSidebar, + decorators: [withAuthProvider, withDashboardProvider], args: { chatErrorReasons: {}, modelOptions: defaultModelOptions, @@ -68,6 +71,7 @@ const meta: Meta = { }, parameters: { layout: "fullscreen", + user: MockUserOwner, reactRouter: reactRouterParameters({ location: { path: "/agents" }, routing: agentsRouting, diff --git a/site/src/pages/AgentsPage/AgentsSidebar.tsx b/site/src/pages/AgentsPage/AgentsSidebar.tsx index 354e99c3ac..4889bfa9de 100644 --- a/site/src/pages/AgentsPage/AgentsSidebar.tsx +++ b/site/src/pages/AgentsPage/AgentsSidebar.tsx @@ -5,6 +5,7 @@ import type { ChatStatus, } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Avatar } from "components/Avatar/Avatar"; import type { ModelSelectorOption } from "components/ai-elements"; import { Button } from "components/Button/Button"; import { @@ -22,6 +23,7 @@ import { ExternalImage } from "components/ExternalImage/ExternalImage"; import { CoderIcon } from "components/Icons/CoderIcon"; import { ScrollArea } from "components/ScrollArea/ScrollArea"; import { Skeleton } from "components/Skeleton/Skeleton"; +import { useAuthenticated } from "hooks"; import { AlertTriangleIcon, ArchiveIcon, @@ -36,6 +38,8 @@ import { SquarePenIcon, Trash2Icon, } from "lucide-react"; +import { UserDropdownContent } from "modules/dashboard/Navbar/UserDropdown/UserDropdownContent"; +import { useDashboard } from "modules/dashboard/useDashboard"; import { createContext, type FC, @@ -554,6 +558,8 @@ export const AgentsSidebar: FC = (props) => { chatId?: string; }>(); const activeChatId = agentId ?? chatId; + const { user, signOut } = useAuthenticated(); + const { appearance, buildInfo } = useDashboard(); const normalizedSearch = ""; const [expandedById, setExpandedById] = useState>({}); const [isArchivedExpanded, setIsArchivedExpanded] = useState(false); @@ -690,7 +696,6 @@ export const AgentsSidebar: FC = (props) => { New Agent - = (props) => { )} +
+ + + + + + link.location !== "navbar", + ) ?? [] + } + onSignOut={signOut} + /> + + +
{" "} ); };