diff --git a/ui/src/components/layout/AppSidebar.tsx b/ui/src/components/layout/AppSidebar.tsx index 147274dc..e34fa772 100644 --- a/ui/src/components/layout/AppSidebar.tsx +++ b/ui/src/components/layout/AppSidebar.tsx @@ -19,6 +19,7 @@ import { Phone, Settings, TrendingUp, + UserRound, Workflow, Wrench, } from "lucide-react"; @@ -52,6 +53,7 @@ import { } from "@/components/ui/sidebar"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { useAppConfig } from "@/context/AppConfigContext"; +import { useLeadForms } from "@/context/LeadFormsContext"; import { useTelephonyConfigWarnings } from "@/context/TelephonyConfigWarningsContext"; import { useLatestReleaseVersion } from "@/hooks/useLatestReleaseVersion"; import type { LocalUser } from "@/lib/auth"; @@ -129,7 +131,7 @@ const NAV_SECTIONS: SidebarNavSection[] = [ ], }, { - label: "OBSERVE", + label: "MANAGE", items: [ { title: "Agent Runs", @@ -141,6 +143,11 @@ const NAV_SECTIONS: SidebarNavSection[] = [ url: "/reports", icon: FileText, }, + { + title: "Credits & Billing", + url: "/billing", + icon: CircleDollarSign, + }, ], }, ]; @@ -158,6 +165,7 @@ export function AppSidebar() { const { state, isMobile, setOpenMobile } = useSidebar(); const { provider, getSelectedTeam, logout, user } = useAuth(); const { config } = useAppConfig(); + const { openHireExpert } = useLeadForms(); const { telnyxMissingWebhookPublicKeyCount } = useTelephonyConfigWarnings(); const hasTelephonyWarning = telnyxMissingWebhookPublicKeyCount > 0; const isCollapsed = !isMobile && state === "collapsed"; @@ -254,6 +262,31 @@ export function AppSidebar() { ); }; + // "Hire an Expert" CTA shown in the footer next to the user avatar. + // Expanded: icon + label. Collapsed: icon-only with a tooltip. + const hireExpertButton = isCollapsed ? ( + + + openHireExpert("sidebar")} + aria-label="Hire an Expert" + > + + + + + Hire an Expert + + + ) : ( + openHireExpert("sidebar")}> + + Hire an Expert + + ); + return ( @@ -367,7 +400,7 @@ export function AppSidebar() { > {provider !== "stack" && ( - + @@ -401,11 +434,12 @@ export function AppSidebar() { + {hireExpertButton} )} {provider === "stack" && ( - + @@ -450,6 +484,7 @@ export function AppSidebar() { + {hireExpertButton} )}
Hire an Expert