supress

Author: toyamarinyon

app/(playground)/p/[agentId]/beta-proto/feature-flags/types.ts

@@ -2,4 +2,5 @@ export interface FeatureFlags {
 	uploadFileToPromptNodeFlag: boolean;
 	webSearchNodeFlag: boolean;
 	debugFlag: boolean;
+	viewFlag: boolean;
 }

app/(playground)/p/[agentId]/beta-proto/header.tsx

@@ -2,10 +2,12 @@ import { GiselleLogo } from "@/components/giselle-logo";
 import Link from "next/link";
 import { SparklesIcon } from "./components/icons/sparkles";
 import { ModeButton } from "./components/mode-button";
+import { useFeatureFlags } from "./feature-flags/context";
 import { useGraph } from "./graph/context";
 import { playgroundModes } from "./graph/types";
 
 export function Header() {
+	const { viewFlag } = useFeatureFlags();
 	return (
 		<div className="h-[60px] flex items-center justify-between mx-[20px]">
 			<div className="flex gap-[8px] items-center">
@@ -30,22 +32,26 @@ export function Header() {
 									</div>
 								 */}
 			</div>
-			<div className="flex items-center gap-[10px]">
-				<ModeButton mode={playgroundModes.edit}>edit</ModeButton>
-				<ModeButton mode={playgroundModes.view}>view</ModeButton>
-			</div>
-			<div>
-				<button
-					type="button"
-					className="px-[16px] py-[8px] rounded-[8px] flex items-center gap-[2px] bg-[hsla(207,19%,77%,0.3)] font-rosart"
-					style={{
-						boxShadow: "0px 0px 3px 0px hsla(0, 0%, 100%, 0.25) inset",
-					}}
-				>
-					<SparklesIcon className="w-[18px] h-[18px] fill-white drop-shadow-[0.66px_1.32px_2.64px_hsla(0,0%,100%,0.25)]" />
-					<span>Run</span>
-				</button>
-			</div>
+			{viewFlag && (
+				<div className="flex items-center gap-[10px]">
+					<ModeButton mode={playgroundModes.edit}>edit</ModeButton>
+					<ModeButton mode={playgroundModes.view}>view</ModeButton>
+				</div>
+			)}
+			{viewFlag && (
+				<div>
+					<button
+						type="button"
+						className="px-[16px] py-[8px] rounded-[8px] flex items-center gap-[2px] bg-[hsla(207,19%,77%,0.3)] font-rosart"
+						style={{
+							boxShadow: "0px 0px 3px 0px hsla(0, 0%, 100%, 0.25) inset",
+						}}
+					>
+						<SparklesIcon className="w-[18px] h-[18px] fill-white drop-shadow-[0.66px_1.32px_2.64px_hsla(0,0%,100%,0.25)]" />
+						<span>Run</span>
+					</button>
+				</div>
+			)}
 		</div>
 	);
 }

app/(playground)/p/[agentId]/page.tsx

@@ -4,6 +4,7 @@ import { agents, db } from "@/drizzle";
 import {
 	debugFlag as getDebugFlag,
 	uploadFileToPromptNodeFlag as getUploadFileToPromptNodeFlag,
+	viewFlag as getViewFlag,
 	webSearchNodeFlag as getWebSearchNodeFlag,
 } from "@/flags";
 import { getUser } from "@/lib/supabase";
@@ -34,6 +35,7 @@ export default async function AgentPlaygroundPage({
 	const uploadFileToPromptNodeFlag = await getUploadFileToPromptNodeFlag();
 	const webSearchNodeFlag = await getWebSearchNodeFlag();
 	const debugFlag = await getDebugFlag();
+	const viewFlag = await getViewFlag();
 
 	const agent = await getAgent(agentId);
 
@@ -45,6 +47,7 @@ export default async function AgentPlaygroundPage({
 				uploadFileToPromptNodeFlag,
 				webSearchNodeFlag,
 				debugFlag,
+				viewFlag,
 			}}
 		/>
 	);

flags.ts

@@ -54,3 +54,16 @@ export const debugFlag = flag<boolean>({
 		{ value: true, label: "Enable" },
 	],
 });
+
+export const viewFlag = flag<boolean>({
+	key: "view",
+	async decide() {
+		return false;
+	},
+	description: "Enable view mode",
+	defaultValue: false,
+	options: [
+		{ value: false, label: "disable" },
+		{ value: true, label: "Enable" },
+	],
+});