diff --git a/packages/ui/src/features/canvas/components/ChannelNav.tsx b/packages/ui/src/features/canvas/components/ChannelNav.tsx index c95247fa7a..5089bd5fbd 100644 --- a/packages/ui/src/features/canvas/components/ChannelNav.tsx +++ b/packages/ui/src/features/canvas/components/ChannelNav.tsx @@ -1,5 +1,12 @@ -import { BellIcon, EnvelopeSimple, Lightning } from "@phosphor-icons/react"; +import { + BellIcon, + EnvelopeSimple, + Lightning, + RepeatIcon, + SlidersHorizontal, +} from "@phosphor-icons/react"; import { cn } from "@posthog/quill"; +import { LOOPS_FLAG } from "@posthog/shared"; import { ANALYTICS_EVENTS, type SidebarNavItem, @@ -10,12 +17,15 @@ import { SHORTCUTS, } from "@posthog/ui/features/command/keyboard-shortcuts"; import { useCommandCenterActiveCount } from "@posthog/ui/features/command-center/useCommandCenterActiveCount"; +import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFlag"; import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports"; +import { openSettings } from "@posthog/ui/features/settings/hooks/useOpenSettings"; import { CountBadge } from "@posthog/ui/primitives/CountBadge"; import { Tooltip } from "@posthog/ui/primitives/Tooltip"; import { navigateToActivity, navigateToInbox, + navigateToLoops, navigateToWebsiteCommandCenter, } from "@posthog/ui/router/navigationBridge"; import { useAppView } from "@posthog/ui/router/useAppView"; @@ -64,6 +74,7 @@ function NavIcon({ export function ChannelNav() { const view = useAppView(); + const loopsEnabled = useFeatureFlag(LOOPS_FLAG, import.meta.env.DEV); const { counts } = useInboxAllReports({ ignoreFilters: true, @@ -118,6 +129,25 @@ export function ChannelNav() { /> } /> + {loopsEnabled ? ( + + } + label="Loops" + isActive={view.type === "loops"} + onClick={withTrack("loops", navigateToLoops)} + /> + ) : null} + } + label="Configure" + isActive={false} + onClick={withTrack("configure", () => openSettings("agents"))} + /> ); }