From aec2bb020006d09590ba8c8279515b5eeb134933 Mon Sep 17 00:00:00 2001
From: satoshi toyama <satoshi.toyama@route06.co.jp>
Date: Wed, 23 Oct 2024 21:22:12 +0900
Subject: [PATCH] supress

---
 .../beta-proto/feature-flags/types.ts         |  1 +
 .../p/[agentId]/beta-proto/header.tsx         | 38 +++++++++++--------
 app/(playground)/p/[agentId]/page.tsx         |  3 ++
 flags.ts                                      | 13 +++++++
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/app/(playground)/p/[agentId]/beta-proto/feature-flags/types.ts b/app/(playground)/p/[agentId]/beta-proto/feature-flags/types.ts
index aeea5b94..fae48c15 100644
--- a/app/(playground)/p/[agentId]/beta-proto/feature-flags/types.ts
+++ b/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;
 }
diff --git a/app/(playground)/p/[agentId]/beta-proto/header.tsx b/app/(playground)/p/[agentId]/beta-proto/header.tsx
index 59bf2dfb..713a2a14 100644
--- a/app/(playground)/p/[agentId]/beta-proto/header.tsx
+++ b/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>
 	);
 }
diff --git a/app/(playground)/p/[agentId]/page.tsx b/app/(playground)/p/[agentId]/page.tsx
index 707fbffd..e6db0adf 100644
--- a/app/(playground)/p/[agentId]/page.tsx
+++ b/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,
 			}}
 		/>
 	);
diff --git a/flags.ts b/flags.ts
index cbaf374a..6a0769e4 100644
--- a/flags.ts
+++ b/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" },
+	],
+});