From 10fea96921d31b1f3c340d2d9ad1d611baa0dd39 Mon Sep 17 00:00:00 2001
From: Jakob <haruhunab1320@gmail.com>
Date: Wed, 19 Jun 2024 13:40:53 -0700
Subject: [PATCH] add radonly overlay in variables window

---
 .../VariableWindow/VariableWindow.tsx         | 81 ++++++++++++-------
 1 file changed, 51 insertions(+), 30 deletions(-)

diff --git a/packages/client/editor/src/components/VariableWindow/VariableWindow.tsx b/packages/client/editor/src/components/VariableWindow/VariableWindow.tsx
index 9a0f8d0bf4..e55ba5c194 100644
--- a/packages/client/editor/src/components/VariableWindow/VariableWindow.tsx
+++ b/packages/client/editor/src/components/VariableWindow/VariableWindow.tsx
@@ -6,6 +6,7 @@ import {
 import { Tab, useConfig } from '@magickml/providers'
 import { Window } from 'client/core'
 import {
+  selectEngineRunning,
   selectGraphJson,
   useGetSpellByNameQuery,
   useSaveSpellMutation,
@@ -45,6 +46,9 @@ export const VariableWindow = (props: Props) => {
   const graphJson = useSelector(selectGraphJson(tab.id))
   const { projectId } = useConfig()
   const [saveSpellMutation] = useSaveSpellMutation()
+  const engineRunning = useSelector(selectEngineRunning)
+
+  const readOnly = engineRunning
 
   const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setNewVariableName(e.target.value)
@@ -162,37 +166,54 @@ export const VariableWindow = (props: Props) => {
 
   return (
     <Window borderless>
-      <div className="flex flex-row items-center px-2 mt-2 gap-2 border-b-2 border-b-solid border-b-[var(--background-color)] pb-2 justify-center h-10">
-        <Input
-          className={`focus:ring-2 focus:ring-[var(--accent-color)] focus:border-transparent h-full`}
-          onChange={onInputChange}
-          value={newVariableName}
-          placeholder="New variable"
-        />
-        <Button
-          className="h-full w-8 border border-[var(--dark-3)] bg-ds-neutral rounded-sm"
-          variant="secondary"
-          onClick={createNewVariable}
-        >
-          +
-        </Button>
-      </div>
-      <div className="mb-5">
-        {variables
-          .sort((a, b) => a.name.localeCompare(b.name))
-          .map(variable => {
-            return (
-              <Variable
-                key={variable.id}
-                variable={variable}
-                deleteAllVariableNodes={() => {
-                  deleteAllVariableNodes(variable)
-                }}
-                updateVariable={saveVariable}
-                deleteVariable={deleteVariable}
+      <div className="relative h-full">
+        {readOnly ? (
+          <div className="absolute inset-0 flex flex-col items-center justify-center z-50 bg-[#363d42]">
+            <div className="text-white text-lg">Read-Only Mode</div>
+            <div className="text-white text-md mt-2">
+              Run your spell to modify your Agent
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="flex flex-row items-center px-2 mt-2 gap-2 border-b-2 border-b-solid border-b-[var(--background-color)] pb-2 justify-center h-10">
+              <Input
+                className={`focus:ring-2 focus:ring-[var(--accent-color)] focus:border-transparent h-full ${
+                  readOnly ? 'opacity-50 pointer-events-none' : ''
+                }`}
+                onChange={onInputChange}
+                value={newVariableName}
+                placeholder="New variable"
               />
-            )
-          })}
+              <Button
+                className={`h-full w-8 border border-[var(--dark-3)] bg-ds-neutral rounded-sm ${
+                  readOnly ? 'opacity-50 pointer-events-none' : ''
+                }`}
+                variant="secondary"
+                onClick={createNewVariable}
+              >
+                +
+              </Button>
+            </div>
+            <div className="mb-5">
+              {variables
+                .sort((a, b) => a.name.localeCompare(b.name))
+                .map(variable => {
+                  return (
+                    <Variable
+                      key={variable.id}
+                      variable={variable}
+                      deleteAllVariableNodes={() => {
+                        deleteAllVariableNodes(variable)
+                      }}
+                      updateVariable={saveVariable}
+                      deleteVariable={deleteVariable}
+                    />
+                  )
+                })}
+            </div>
+          </>
+        )}
       </div>
     </Window>
   )