chore(site): hide chat behind ExperimentAgenticChat

johnstcn · johnstcn · commit 6cea32da170e · 2025-05-02T11:20:22.000+01:00
diff --git a/site/src/contexts/useAgenticChat.ts b/site/src/contexts/useAgenticChat.ts
@@ -0,0 +1,23 @@
+import { experiments } from "api/queries/experiments";
+
+import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
+import { useEffect, useState } from "react";
+import { useQuery } from "react-query";
+
+interface AgenticChat {
+	readonly enabled: boolean;
+}
+
+export const useAgenticChat = (): AgenticChat => {
+	const { metadata } = useEmbeddedMetadata();
+	const enabledExperimentsQuery = useQuery(experiments(metadata.experiments));
+
+	const [enabled, setEnabled] = useState<boolean>(false);
+	useEffect(() => {
+		if (enabledExperimentsQuery.data?.includes("agentic-chat")) {
+			setEnabled(true);
+		}
+	});
+
+	return { enabled };
+};
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -4,6 +4,7 @@ import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import type { ProxyContextValue } from "contexts/ProxyContext";
+import { useAgenticChat } from "contexts/useAgenticChat";
 import { useWebpushNotifications } from "contexts/useWebpushNotifications";
 import { NotificationsInbox } from "modules/notifications/NotificationsInbox/NotificationsInbox";
 import type { FC } from "react";
@@ -45,8 +46,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	canViewAuditLog,
 	proxyContextValue,
 }) => {
-	const { subscribed, enabled, loading, subscribe, unsubscribe } =
-		useWebpushNotifications();
+	const webPush = useWebpushNotifications();
 
 	return (
 		<div className="border-0 border-b border-solid h-[72px] flex items-center leading-none px-6">
@@ -76,13 +76,21 @@ export const NavbarView: FC<NavbarViewProps> = ({
 					/>
 				</div>
 
-				{enabled ? (
-					subscribed ? (
-						<Button variant="outline" disabled={loading} onClick={unsubscribe}>
+				{webPush.enabled ? (
+					webPush.subscribed ? (
+						<Button
+							variant="outline"
+							disabled={webPush.loading}
+							onClick={webPush.unsubscribe}
+						>
 							Disable WebPush
 						</Button>
 					) : (
-						<Button variant="outline" disabled={loading} onClick={subscribe}>
+						<Button
+							variant="outline"
+							disabled={webPush.loading}
+							onClick={webPush.subscribe}
+						>
 							Enable WebPush
 						</Button>
 					)
@@ -132,6 +140,7 @@ interface NavItemsProps {
 
 const NavItems: FC<NavItemsProps> = ({ className }) => {
 	const location = useLocation();
+	const agenticChat = useAgenticChat();
 
 	return (
 		<nav className={cn("flex items-center gap-4 h-full", className)}>
@@ -154,14 +163,16 @@ const NavItems: FC<NavItemsProps> = ({ className }) => {
 			>
 				Templates
 			</NavLink>
-			<NavLink
-				className={({ isActive }) => {
-					return cn(linkStyles.default, isActive ? linkStyles.active : "");
-				}}
-				to="/chat"
-			>
-				Chat
-			</NavLink>
+			{agenticChat.enabled ? (
+				<NavLink
+					className={({ isActive }) => {
+						return cn(linkStyles.default, isActive ? linkStyles.active : "");
+					}}
+					to="/chat"
+				>
+					Chat
+				</NavLink>
+			) : null}
 		</nav>
 	);
 };
