From 0f35e69234690a2b36e578ee93e72516cbf3da49 Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Mon, 31 Jul 2023 18:33:56 +0530
Subject: [PATCH 01/10] edit agent frontend complete

---
 gui/pages/Content/Agents/AgentCreate.js    | 183 +++++++++++++++------
 gui/pages/Content/Agents/AgentWorkspace.js |  31 ++--
 gui/pages/Content/Agents/Details.js        |  20 ++-
 gui/pages/Dashboard/Content.js             |  12 +-
 gui/pages/api/DashboardService.js          |   8 +-
 5 files changed, 179 insertions(+), 75 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
index a55d69144..8f9613649 100644
--- a/gui/pages/Content/Agents/AgentCreate.js
+++ b/gui/pages/Content/Agents/AgentCreate.js
@@ -9,7 +9,8 @@ import {
   getOrganisationConfig,
   getLlmModels,
   updateExecution,
-  uploadFile
+  uploadFile,
+  getAgentDetails, editAgent
 } from "@/pages/api/DashboardService";
 import {
   formatBytes,
@@ -34,7 +35,10 @@ export default function AgentCreate({
                                       template,
                                       internalId,
                                       sendKnowledgeData,
-                                      env
+                                      env,
+                                      edit,
+                                      editAgentId,
+                                      agents
                                     }) {
   const [advancedOptions, setAdvancedOptions] = useState(false);
   const [agentName, setAgentName] = useState("");
@@ -109,6 +113,7 @@ export default function AgentCreate({
   const [createModal, setCreateModal] = useState(false);
 
   const [scheduleData, setScheduleData] = useState(null);
+  const [editModal, setEditModal] = useState(false)
 
   useEffect(() => {
     getOrganisationConfig(organisationId, "model_api_key")
@@ -155,25 +160,18 @@ export default function AgentCreate({
       .catch((error) => {
         console.error('Error fetching models:', error);
       });
+    if (edit) {
+      editingAgent();
+    }
 
     if (template !== null) {
-      setLocalStorageValue("agent_name_" + String(internalId), template.name, setAgentName);
-      setLocalStorageValue("agent_description_" + String(internalId), template.description, setAgentDescription);
-      setLocalStorageValue("advanced_options_" + String(internalId), true, setAdvancedOptions);
+      fillDetails(template)
       setLocalStorageValue("agent_template_id_" + String(internalId), template.id, setAgentTemplateId);
 
       fetchAgentTemplateConfigLocal(template.id)
         .then((response) => {
           const data = response.data || [];
-          setLocalStorageArray("agent_goals_" + String(internalId), data.goal, setGoals);
-          setLocalStorageValue("agent_type_" + String(internalId), data.agent_type, setAgentType);
-          setLocalStorageArray("agent_constraints_" + String(internalId), data.constraints, setConstraints);
-          setLocalStorageValue("agent_iterations_" + String(internalId), data.max_iterations, setIterations);
-          setLocalStorageValue("agent_step_time_" + String(internalId), data.iteration_interval, setStepTime);
-          setLocalStorageValue("agent_permission_" + String(internalId), data.permission_type, setPermission);
-          setLocalStorageArray("agent_instructions_" + String(internalId), data.instruction, setInstructions);
-          setLocalStorageValue("agent_database_" + String(internalId), data.LTM_DB, setDatabase);
-          setLocalStorageValue("agent_model_" + String(internalId), data.model, setModel);
+          fillAdvancedDetails(data)
           setLocalStorageArray("tool_names_" + String(internalId), data.tools, setToolNames);
           setLocalStorageValue("is_agent_template_" + String(internalId), true, setShowButton);
           setShowButton(true);
@@ -236,6 +234,38 @@ export default function AgentCreate({
     setSearchValue('');
   };
 
+  const editingAgent = () => {
+    const agent = agents.find(agent => agent.id === editAgentId);
+    fillDetails(agent)
+    getAgentDetails(editAgentId, -1)
+        .then((response) => {
+          const data = response.data || []
+          fillAdvancedDetails(data)
+          setLocalStorageArray("tool_names_" + String(internalId), data.tools.map(tool => tool.name), setToolNames);
+        })
+        .catch((error) => {
+          console.error('Error fetching agent details:', error);
+        });
+  };
+
+  const fillDetails = (agent) => {
+    setLocalStorageValue("agent_name_" + String(internalId), agent.name, setAgentName);
+    setLocalStorageValue("agent_description_" + String(internalId), agent.description, setAgentDescription);
+    setLocalStorageValue("advanced_options_" + String(internalId), true, setAdvancedOptions);
+  }
+  const fillAdvancedDetails = (data) => {
+    setLocalStorageArray("agent_goals_" + String(internalId), data.goal, setGoals);
+    setLocalStorageValue("agent_type_" + String(internalId), data.agent_type, setAgentType);
+    setLocalStorageArray("agent_constraints_" + String(internalId), data.constraints, setConstraints);
+    setLocalStorageValue("agent_iterations_" + String(internalId), data.max_iterations, setIterations);
+    setLocalStorageValue("agent_step_time_" + String(internalId), data.iteration_interval, setStepTime);
+    setLocalStorageValue("agent_permission_" + String(internalId), data.permission_type, setPermission);
+    setLocalStorageArray("agent_instructions_" + String(internalId), data.instruction, setInstructions);
+    setLocalStorageValue("agent_database_" + String(internalId), data.LTM_DB, setDatabase);
+    setLocalStorageValue("agent_model_" + String(internalId), data.model, setModel);
+  }
+
+
   const addToolkit = (toolkit) => {
     const updatedToolIds = [...selectedTools];
     const updatedToolNames = [...toolNames];
@@ -458,9 +488,9 @@ export default function AgentCreate({
       "agent_type": agentType,
       "constraints": constraints,
       "toolkits": [],
-      "tools": selectedTools,
+      "tools": [12,14,14],
       "exit": exitCriterion,
-      "iteration_interval": stepTime,
+      "iteration_interval": 500,
       "model": model,
       "max_iterations": maxIterations,
       "permission_type": permission_type,
@@ -474,40 +504,72 @@ export default function AgentCreate({
       "schedule": scheduleData,
     }
 
-    createAgent(createModal ? scheduleAgentData : agentData, createModal)
-      .then((response) => {
-        const agentId = response.data.id;
-        const name = response.data.name;
-        const executionId = response.data.execution_id;
-        fetchAgents();
-
-        if (addResources && input.length > 0) {
-          const uploadPromises = input.map(fileData => {
-            return uploadResource(agentId, fileData)
-              .catch(error => {
-                console.error('Error uploading resource:', error);
-                return Promise.reject(error);
-              });
-          });
-
-          Promise.all(uploadPromises)
-            .then(() => {
-              runExecution(agentId, name, executionId, createModal);
+    if(edit){
+      agentData.agent_id = editAgentId;
+      console.log(agentData)
+      editAgent(agentData).then((response) => {
+        if(response){
+          fetchAgents();
+          console.log(response)
+          const name = "New Run" + response.data.updated_at
+          uploadResources(editAgentId, name)
+        }
+      })
+    }
+    else
+      {
+        createAgent(createModal ? scheduleAgentData : agentData, createModal)
+            .then((response) => {
+              const agentId = response.data.id;
+              const name = response.data.name;
+              const executionId = response.data.execution_id;
+              fetchAgents();
+              uploadResources(agentId, name, executionId)
             })
-            .catch(error => {
-              console.error('Error uploading files:', error);
+            .catch((error) => {
+              console.error('Error creating agent:', error);
               setCreateClickable(true);
             });
-        } else {
-          runExecution(agentId, name, executionId, createModal);
-        }
-      })
-      .catch((error) => {
-        console.error('Error creating agent:', error);
-        setCreateClickable(true);
-      });
+      }
   };
 
+  const uploadResources = (agentId, name, executionId) => {
+    if (addResources && input.length > 0) {
+      const uploadPromises = input.map(fileData => {
+        return uploadResource(agentId, fileData)
+            .catch(error => {
+              console.error('Error uploading resource:', error);
+              return Promise.reject(error);
+            });
+      });
+
+      Promise.all(uploadPromises)
+          .then(() => {
+            runDecision(agentId, name, executionId)
+          })
+          .catch(error => {
+            console.error('Error uploading files:', error);
+            setCreateClickable(true);
+          });
+    } else {
+      runDecision(agentId, name, executionId)
+    }
+  }
+
+  const runDecision = (agentId, name, executionId) => {
+    if(edit){
+      setEditModal(false)
+      sendAgentData({
+        id: editAgentId,
+        name: name,
+        contentType: "Agents",
+      });
+    }
+    else {
+      runExecution(agentId, name, executionId, createModal);
+    }
+  }
+
   const finaliseAgentCreation = (agentId, name, executionId) => {
     toast.success('Agent created successfully', {autoClose: 1800});
     let timeoutValue = executionId ? 0 : 1500;
@@ -775,20 +837,20 @@ export default function AgentCreate({
       <div className="col-3"></div>
       <div className="col-6" style={{padding: '25px 20px'}}>
         <div>
-          <div className={styles.page_title}>Create new agent</div>
+          {!edit ? <div className={styles.page_title}>Create new agent</div> : <div className={styles.page_title}>Edit agent</div>}
         </div>
         <div style={{marginTop: '10px'}}>
           <div>
             <label className={styles.form_label}>Name</label>
-            <input className="input_medium" type="text" value={agentName} onChange={handleNameChange}/>
+            <input className="input_medium" type="text" value={agentName} disabled={edit}  onChange={handleNameChange}/>
           </div>
           <div style={{marginTop: '15px'}}>
             <label className={styles.form_label}>Description</label>
-            <textarea className="textarea_medium" rows={3} value={agentDescription} onChange={handleDescriptionChange}/>
+            <textarea className="textarea_medium" rows={3} value={agentDescription} disabled={edit} onChange={handleDescriptionChange}/>
           </div>
           <div style={{marginTop: '15px'}}>
             <div><label className={styles.form_label}>Goals</label></div>
-            {goals.map((goal, index) => (<div key={index} style={{
+            {goals?.map((goal, index) => (<div key={index} style={{
               marginBottom: '10px',
               display: 'flex',
               alignItems: 'center',
@@ -1101,7 +1163,7 @@ export default function AgentCreate({
               </div>
               <div style={{marginTop: '15px'}}>
                 <div><label className={styles.form_label}>Constraints</label></div>
-                {constraints.map((constraint, index) => (<div key={index} style={{
+                {constraints?.map((constraint, index) => (<div key={index} style={{
                   marginBottom: '10px',
                   display: 'flex',
                   alignItems: 'center',
@@ -1208,7 +1270,7 @@ export default function AgentCreate({
                 Update Template
               </button>
             )}
-            <div style={{display: 'flex', position: 'relative'}}>
+            {!edit ? <div style={{display: 'flex', position: 'relative'}}>
               {createDropdown && (<div className="create_agent_dropdown_options" onClick={() => {
                 setCreateModal(true);
                 setCreateDropdown(false);
@@ -1225,13 +1287,30 @@ export default function AgentCreate({
                          alt="expand-icon"/>
                 </button>
               </div>
-            </div>
+            </div>: <div className="primary_button" style={{backgroundColor: 'white', marginBottom: '4px', paddingLeft: '0', paddingRight: '5px'}}>
+              <button className="primary_button" style={{paddingRight: '5px'}}
+                      onClick={() => setEditModal(true)}>Update changes</button> </div>}
           </div>
 
           {createModal && (
             <AgentSchedule env={env} internalId={internalId} closeCreateModal={closeCreateModal} type="create_agent"/>
           )}
 
+          {editModal && (<div className="modal" onClick={() => setEditModal(!editModal)}>
+            <div className="modal-content" style={{width: '35%'}} onClick={preventDefault}>
+              <div className={styles.detail_name}>Update agent</div>
+              <div><label className={styles.form_label}>All the new runs of this agent will be updated with the latest changes. Are you sure you want to update changes?</label></div>
+              <div style={{display: 'flex', justifyContent: 'flex-end', marginTop: '20px'}}>
+                <button className="secondary_button" style={{marginRight: '10px'}} onClick={() => setEditModal(false)}>
+                  Cancel
+                </button>
+                <button className={styles.run_button} style={{paddingLeft: '15px', paddingRight: '15px', height: '32px'}} onClick={handleAddAgent}>
+                  Update changes
+                </button>
+              </div>
+            </div>
+          </div>)}
+
         </div>
       </div>
       <div className="col-3"></div>
diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
index c59d8fa76..0afae175d 100644
--- a/gui/pages/Content/Agents/AgentWorkspace.js
+++ b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -9,7 +9,7 @@ import RunHistory from "./RunHistory";
 import ActionConsole from "./ActionConsole";
 import Details from "./Details";
 import ResourceManager from "./ResourceManager";
-import {preventDefault} from "@/utils/utils";
+import {createInternalId, preventDefault} from "@/utils/utils";
 import {
   getAgentDetails,
   getAgentExecutions,
@@ -25,7 +25,7 @@ import {EventBus} from "@/utils/eventBus";
 import 'moment-timezone';
 import AgentSchedule from "@/pages/Content/Agents/AgentSchedule";
 
-export default function AgentWorkspace({env, agentId, agentName, selectedView, agents, internalId}) {
+export default function AgentWorkspace({env, agentId, agentName, selectedView, agents, internalId, sendAgentData}) {
   const [leftPanel, setLeftPanel] = useState('activity_feed')
   const [rightPanel, setRightPanel] = useState('details')
   const [history, setHistory] = useState(true)
@@ -144,7 +144,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
       .then((response) => {
         setRunModal(false);
         fetchExecutions(agentId, response.data);
-        fetchAgentDetails(agentId);
+        fetchAgentDetails(agentId, selectedRun?.id);
         EventBus.emit('reFetchAgents', {});
         toast.success("New run created", {autoClose: 1800});
       })
@@ -209,25 +209,28 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
   };
 
   useEffect(() => {
-    fetchAgentDetails(agentId);
+    fetchAgentDetails(agentId, selectedRun?.id);
     fetchExecutions(agentId);
     fetchAgentScheduleComponent()
   }, [agentId])
 
   useEffect(() => {
     fetchExecutionDetails(selectedRun?.id);
+    fetchAgentDetails(agentId, selectedRun?.id);
   }, [selectedRun?.id])
 
   useEffect(() => {
     if (agentDetails) {
-      setRightPanel(agentDetails.permission_type.includes('RESTRICTED') ? 'action_console' : 'details');
+      setRightPanel(agentDetails.permission_type === 'RESTRICTED' ? 'action_console' : 'details');
     }
+    console.log(agentDetails)
   }, [agentDetails])
 
-  function fetchAgentDetails(agentId) {
-    getAgentDetails(agentId)
+  function fetchAgentDetails(agentId, runId) {
+    getAgentDetails(agentId, runId ? runId : -1)
       .then((response) => {
-        setAgentDetails(response.data);
+        const data = response.data
+        setAgentDetails(data);
       })
       .catch((error) => {
         console.error('Error fetching agent details:', error);
@@ -379,6 +382,12 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
                       setCreateModal(true)
                     }}>Schedule Run</li>}
                 </div>)}
+                <li className="dropdown_item" onClick={() => sendAgentData({
+                  id: agentId,
+                  name: "Edit Agent",
+                  contentType: "Edit_Agent",
+                  internalId: createInternalId()
+                })}>Edit Agent</li>
                 <li className="dropdown_item" onClick={() => {
                   setDropdown(false);
                   setDeleteModal(true)
@@ -426,7 +435,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
       <div style={{width: '40%'}}>
         <div className={styles.detail_top}>
           <div style={{display: 'flex', overflowX: 'scroll'}}>
-            {agentDetails && agentDetails.permission_type.includes('RESTRICTED') && <div>
+            {agentDetails && agentDetails.permission_type === 'RESTRICTED' && <div>
               <button onClick={() => setRightPanel('action_console')} className={styles.tab_button}
                       style={rightPanel === 'action_console' ? {background: '#454254'} : {background: 'transparent'}}>
                 <Image style={{marginTop: '-1px'}} width={14} height={14} src="/images/action_console.svg"
@@ -471,8 +480,8 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
                              pendingPermission={pendingPermission} setPendingPermissions={setPendingPermissions}/>
             </div>
           )}
-          {rightPanel === 'details' &&
-            <div className={styles.detail_content}><Details agentDetails={agentDetails} goals={currentGoals}
+          {rightPanel === 'details' && agentDetails && agentDetails !== null &&
+            <div className={styles.detail_content}><Details agentDetails1={agentDetails} goals={currentGoals}
                                                             instructions={currentInstructions}
                                                             runCount={agentExecutions?.length || 0}
                                                             agentScheduleDetails={agentScheduleDetails} agent={agent}/>
diff --git a/gui/pages/Content/Agents/Details.js b/gui/pages/Content/Agents/Details.js
index 884dc27c1..1ac51933e 100644
--- a/gui/pages/Content/Agents/Details.js
+++ b/gui/pages/Content/Agents/Details.js
@@ -4,13 +4,13 @@ import Image from "next/image";
 import {formatNumber} from "@/utils/utils";
 import {EventBus} from "@/utils/eventBus";
 
-export default function Details({agentDetails, runCount, goals, instructions, agentScheduleDetails, agent}) {
+export default function Details({agentDetails1, runCount, goals, instructions, agentScheduleDetails, agent}) {
   const [showGoals, setShowGoals] = useState(false);
   const [showConstraints, setShowConstraints] = useState(false);
   const [showInstructions, setShowInstructions] = useState(false);
   const [filteredInstructions, setFilteredInstructions] = useState(false);
   const [scheduleText, setScheduleText] = useState('Agent is not Scheduled');
-
+  const [agentDetails, setAgentDetails] = useState(null)
   const info_text = {
     marginLeft: '7px',
   };
@@ -30,6 +30,12 @@ export default function Details({agentDetails, runCount, goals, instructions, ag
   useEffect(() => {
     setFilteredInstructions(instructions?.filter(instruction => instruction.trim() !== ''));
   }, [instructions]);
+  useEffect(() => {
+    // console.log(agentDetails1)
+    // console.log(JSON.parse(agentDetails1))
+    setAgentDetails(agentDetails1)
+    // console.log(JSON.parse(agentDetails.calls))
+  }, [agentDetails1]);
 
   useEffect(() => {
     if (agent?.is_scheduled) {
@@ -96,7 +102,7 @@ export default function Details({agentDetails, runCount, goals, instructions, ag
       <div className={styles.separator}></div>
       <div className={styles.agent_info_box}>
         <div><Image width={15} height={15} src="/images/flag.svg" alt="goals-icon"/></div>
-        <div style={info_text}>{agentDetails?.goal.length || 0} Goals</div>
+        <div style={info_text}>{goals?.length || 0} Goals</div>
       </div>
       {goals && goals.length > 0 && <div>
         <div className={styles.large_text_box} style={!showGoals ? {overflow: 'hidden', display: '-webkit-box'} : {}}>
@@ -134,14 +140,14 @@ export default function Details({agentDetails, runCount, goals, instructions, ag
           <div style={info_text}>Tools assigned</div>
         </div>
         <div className={styles.agent_info_tools}>
-          {agentDetails.tools.map((tool, index) =>
+          {agentDetails?.tools?.map((tool, index) =>
             (<div onClick={() => openToolkitTab(tool.id)} key={index} className="tool_container"
                   style={{marginTop: '0', marginBottom: '5px', cursor: 'pointer'}}>
               <div className={styles.tool_text}>{tool.name || ''}</div>
             </div>))}
         </div>
       </div>}</div>}
-      {agentDetails && <div>{agentDetails.constraints && agentDetails.constraints.length > 0 && <div>
+      {agentDetails && <div>{agentDetails.constraints && agentDetails.constraints?.length > 0 && <div>
         <div className={styles.separator}></div>
         <div className={styles.agent_info_box}>
           <div><Image width={15} height={15} src="/images/close_fullscreen.svg" alt="constraint-icon"/></div>
@@ -149,7 +155,7 @@ export default function Details({agentDetails, runCount, goals, instructions, ag
         </div>
         <div className={styles.large_text_box}
              style={!showConstraints ? {overflow: 'hidden', display: '-webkit-box'} : {}}>
-          {agentDetails.constraints.map((constraint, index) => (<div key={index} style={{marginTop: '0'}}>
+          {agentDetails?.constraints?.map((constraint, index) => (<div key={index} style={{marginTop: '0'}}>
             <div>{index + 1}. {constraint || ''}</div>
             {index !== agentDetails.constraints.length - 1 && <br/>}
           </div>))}
@@ -180,7 +186,7 @@ export default function Details({agentDetails, runCount, goals, instructions, ag
       </div> */}
       <div className={styles.agent_info_box}>
         <div><Image width={15} height={15} src="/images/key.svg" alt="permission-type-icon"/></div>
-        <div style={info_text}>{agentDetails?.permission_type.replace(/\s*\([^)]*\)/g, '') || ''}</div>
+        <div style={info_text}>{agentDetails?.permission_type?.replace(/\s*\([^)]*\)/g, '') || ''}</div>
       </div>
       {agentDetails?.max_iterations && <div className={styles.agent_info_box}>
         <div><Image width={15} height={15} src="/images/info.svg" alt="info-icon"/></div>
diff --git a/gui/pages/Dashboard/Content.js b/gui/pages/Dashboard/Content.js
index 60fa560c6..835d7ffe7 100644
--- a/gui/pages/Dashboard/Content.js
+++ b/gui/pages/Dashboard/Content.js
@@ -4,6 +4,7 @@ import Knowledge from '../Content/Knowledge/Knowledge';
 import AddKnowledge from '../Content/Knowledge/AddKnowledge';
 import KnowledgeDetails from '../Content/Knowledge/KnowledgeDetails';
 import AgentWorkspace from '../Content/Agents/AgentWorkspace';
+import AgentCreate from '../Content/Agents/AgentCreate';
 import ToolkitWorkspace from '../Content/./Toolkits/ToolkitWorkspace';
 import Toolkits from '../Content/./Toolkits/Toolkits';
 import Settings from "./Settings/Settings";
@@ -39,7 +40,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
   const [toolkitDetails, setToolkitDetails] = useState({});
   const [starModal, setStarModal] = useState(false);
   const router = useRouter();
-  const multipleTabContentTypes = ['Create_Agent', 'Add_Toolkit', 'Add_Knowledge', 'Add_Database'];
+  const multipleTabContentTypes = ['Create_Agent', 'Add_Toolkit', 'Add_Knowledge', 'Add_Database','Edit_Agent'];
   const [isApmOpened, setIsApmOpened] = useState(false);
   const [prevView, setPrevView] = useState(null);
 
@@ -374,7 +375,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
                        selectTab(tab, index)
                      }}>
                   <div style={{display: 'flex', order: '0', overflowX: 'hidden'}}>
-                    {(tab.contentType === 'Agents' || tab.contentType === 'Create_Agent') &&
+                    {(tab.contentType === 'Agents' || tab.contentType === 'Create_Agent' || tab.contentType === 'Edit_Agent') &&
                       <div className={styles.tab_active}><Image width={13} height={13} src="/images/agents_light.svg"
                                                                 alt="agent-icon"/></div>}
                     {(tab.contentType === 'Toolkits' || tab.contentType === 'Add_Toolkit') &&
@@ -416,7 +417,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
                     {tab.contentType === 'Agents' &&
                       <AgentWorkspace env={env} internalId={tab.internalId || index} agentId={tab.id} agentName={tab.name}
                                       selectedView={selectedView}
-                                      agents={agents} fetchAgents={getAgentList}/>}
+                                      agents={agents} fetchAgents={getAgentList} sendAgentData={addTab} />}
                     {tab.contentType === 'Toolkits' &&
                       <ToolkitWorkspace env={env} internalId={tab.internalId || index}
                                         toolkitDetails={toolkitDetails}/>}
@@ -442,6 +443,11 @@ export default function Content({env, selectedView, selectedProjectId, organisat
                                           sendAgentData={addTab} selectedProjectId={selectedProjectId}
                                           fetchAgents={getAgentList} toolkits={toolkits} env={env} />}
                     {isApmOpened && tab.contentType === 'APM' && <ApmDashboard key={prevView}/>}
+                    {tab.contentType === 'Edit_Agent' &&
+                        <AgentCreate knowledge={knowledge} internalId={tab.internalId || index}
+                                     organisationId={organisationId} sendKnowledgeData={addTab}
+                                     sendAgentData={addTab} selectedProjectId={selectedProjectId} editAgentId={tab.id}
+                                     fetchAgents={getAgentList} toolkits={toolkits} template={null} edit={true} agents={agents}/>}
                   </div>}
                 </div>
               ))}
diff --git a/gui/pages/api/DashboardService.js b/gui/pages/api/DashboardService.js
index 32f994ff3..d0547ec1c 100644
--- a/gui/pages/api/DashboardService.js
+++ b/gui/pages/api/DashboardService.js
@@ -24,8 +24,8 @@ export const getTools = () => {
   return api.get(`/tools/list`);
 };
 
-export const getAgentDetails = (agentId) => {
-  return api.get(`/agents/get/details/${agentId}`);
+export const getAgentDetails = (agentId, agentExecutionId) => {
+  return api.get(`agents/get/details/agent_id/${agentId}/agent_execution_id/${agentExecutionId}`);
 };
 
 export const getAgentExecutions = (agentId) => {
@@ -44,6 +44,10 @@ export const createAgent = (agentData, scheduledCreate) => {
   return api.post(scheduledCreate ? `/agents/schedule` : `/agents/create`, agentData);
 };
 
+export const editAgent = (agentData) => {
+  return api.post( `/agentexecutions/add_run`, agentData);
+};
+
 export const addTool = (toolData) => {
   return api.post(`/toolkits/get/local/install`, toolData);
 };

From cc720776ec37632d3fd46250bbca571bcb2bc742 Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Tue, 1 Aug 2023 17:22:06 +0530
Subject: [PATCH 02/10] edit agent frontend complete

---
 gui/pages/Content/Agents/AgentCreate.js    | 21 +++++-----
 gui/pages/Content/Agents/AgentWorkspace.js | 47 ++++++++++++++--------
 gui/pages/Content/Agents/Details.js        | 18 +++++----
 gui/pages/api/DashboardService.js          |  2 +-
 4 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
index 8f9613649..20e454e1f 100644
--- a/gui/pages/Content/Agents/AgentCreate.js
+++ b/gui/pages/Content/Agents/AgentCreate.js
@@ -488,9 +488,9 @@ export default function AgentCreate({
       "agent_type": agentType,
       "constraints": constraints,
       "toolkits": [],
-      "tools": [12,14,14],
+      "tools": selectedTools,
       "exit": exitCriterion,
-      "iteration_interval": 500,
+      "iteration_interval": stepTime,
       "model": model,
       "max_iterations": maxIterations,
       "permission_type": permission_type,
@@ -506,12 +506,12 @@ export default function AgentCreate({
 
     if(edit){
       agentData.agent_id = editAgentId;
-      console.log(agentData)
-      editAgent(agentData).then((response) => {
+      const name = agentData.name
+      agentData.name = `New Run ${new Date()}`
+      editAgent(agentData)
+        .then((response) => {
         if(response){
           fetchAgents();
-          console.log(response)
-          const name = "New Run" + response.data.updated_at
           uploadResources(editAgentId, name)
         }
       })
@@ -564,6 +564,7 @@ export default function AgentCreate({
         name: name,
         contentType: "Agents",
       });
+      removeTab(editAgentId, name, "Agents", internalId)
     }
     else {
       runExecution(agentId, name, executionId, createModal);
@@ -1207,10 +1208,10 @@ export default function AgentCreate({
               {/*    </div>*/}
               {/*  </div>*/}
               {/*</div>*/}
-              <div style={{marginTop: '15px'}}>
-                <label className={styles.form_label}>Time between steps (in milliseconds)</label>
-                <input className="input_medium" type="number" value={stepTime} onChange={handleStepChange}/>
-              </div>
+              {/*<div style={{marginTop: '15px'}}>*/}
+              {/*  <label className={styles.form_label}>Time between steps (in milliseconds)</label>*/}
+              {/*  <input className="input_medium" type="number" value={stepTime} onChange={handleStepChange}/>*/}
+              {/*</div>*/}
               {/*<div style={{marginTop: '15px'}}>*/}
               {/*  <div style={{display:'flex'}}>*/}
               {/*    <input className="checkbox" type="checkbox" checked={longTermMemory} onChange={() => setLocalStorageValue("has_LTM_" + String(internalId), !longTermMemory, setLongTermMemory)} />*/}
diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
index 0afae175d..2cfce0089 100644
--- a/gui/pages/Content/Agents/AgentWorkspace.js
+++ b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -39,7 +39,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
   const [agentExecutions, setAgentExecutions] = useState(null)
   const [dropdown, setDropdown] = useState(false);
   const [fetchedData, setFetchedData] = useState(null);
-  const [instructions, setInstructions] = useState(['']);
+  const [instructions, setInstructions] = useState([null]);
   const [currentInstructions, setCurrentInstructions] = useState(['']);
   const [pendingPermission, setPendingPermissions] = useState(0);
 
@@ -127,6 +127,8 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
       toast.error("Run name can't be blank", {autoClose: 1800});
       return
     }
+    setGoals(goals.length< 0 ? agentDetails.goal : goals)
+    setInstructions(instructions.length < 0 ? agentDetails.instruction : instructions)
 
     if (goals.length <= 0) {
       toast.error("Agent needs to have goals", {autoClose: 1800});
@@ -215,7 +217,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
   }, [agentId])
 
   useEffect(() => {
-    fetchExecutionDetails(selectedRun?.id);
+    // fetchExecutionDetails(selectedRun?.id);
     fetchAgentDetails(agentId, selectedRun?.id);
   }, [selectedRun?.id])
 
@@ -226,6 +228,18 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
     console.log(agentDetails)
   }, [agentDetails])
 
+  function setNewRunDetails() {
+    getAgentDetails(agentId,  -1)
+      .then((response) => {
+        setGoals(response.data.goal)
+        setInstructions(response.data.instruction)
+        setRunModal(true);
+      })
+      .catch((error) => {
+        console.error('Error fetching agent details:', error);
+      });
+  }
+
   function fetchAgentDetails(agentId, runId) {
     getAgentDetails(agentId, runId ? runId : -1)
       .then((response) => {
@@ -262,18 +276,18 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
       });
   }
 
-  function fetchExecutionDetails(executionId) {
-    getExecutionDetails(executionId || -1, agentId)
-      .then((response) => {
-        setGoals(response.data.goal);
-        setCurrentGoals(response.data.goal);
-        setInstructions(response.data.instruction);
-        setCurrentInstructions(response.data.instruction);
-      })
-      .catch((error) => {
-        console.error('Error fetching agent execution details:', error);
-      });
-  }
+  // function fetchExecutionDetails(executionId) {
+  //   getExecutionDetails(executionId || -1, agentId)
+  //     .then((response) => {
+  //       setGoals(response.data.goal);
+  //       setCurrentGoals(response.data.goal);
+  //       setInstructions(response.data.instruction);
+  //       setCurrentInstructions(response.data.instruction);
+  //     })
+  //     .catch((error) => {
+  //       console.error('Error fetching agent execution details:', error);
+  //     });
+  // }
 
   function saveAgentTemplate() {
     saveAgentAsTemplate(agentId)
@@ -350,7 +364,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
           </div>
           <div style={{display: 'flex'}}>
             <div>
-              <button className={styles.run_button} onClick={() => setRunModal(true)}>
+              <button className={styles.run_button} onClick={setNewRunDetails}>
                 <Image width={14} height={14} src="/images/run_icon.svg" alt="run-icon"/>&nbsp;New Run
               </button>
             </div>
@@ -481,8 +495,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
             </div>
           )}
           {rightPanel === 'details' && agentDetails && agentDetails !== null &&
-            <div className={styles.detail_content}><Details agentDetails1={agentDetails} goals={currentGoals}
-                                                            instructions={currentInstructions}
+            <div className={styles.detail_content}><Details agentDetails1={agentDetails}
                                                             runCount={agentExecutions?.length || 0}
                                                             agentScheduleDetails={agentScheduleDetails} agent={agent}/>
             </div>}
diff --git a/gui/pages/Content/Agents/Details.js b/gui/pages/Content/Agents/Details.js
index 1ac51933e..a910e37d3 100644
--- a/gui/pages/Content/Agents/Details.js
+++ b/gui/pages/Content/Agents/Details.js
@@ -4,11 +4,11 @@ import Image from "next/image";
 import {formatNumber} from "@/utils/utils";
 import {EventBus} from "@/utils/eventBus";
 
-export default function Details({agentDetails1, runCount, goals, instructions, agentScheduleDetails, agent}) {
+export default function Details({agentDetails1, runCount, agentScheduleDetails, agent}) {
   const [showGoals, setShowGoals] = useState(false);
   const [showConstraints, setShowConstraints] = useState(false);
   const [showInstructions, setShowInstructions] = useState(false);
-  const [filteredInstructions, setFilteredInstructions] = useState(false);
+  const [filteredInstructions, setFilteredInstructions] = useState([]);
   const [scheduleText, setScheduleText] = useState('Agent is not Scheduled');
   const [agentDetails, setAgentDetails] = useState(null)
   const info_text = {
@@ -28,8 +28,10 @@ export default function Details({agentDetails1, runCount, goals, instructions, a
   }
 
   useEffect(() => {
-    setFilteredInstructions(instructions?.filter(instruction => instruction.trim() !== ''));
-  }, [instructions]);
+    if (Array.isArray(agentDetails?.instruction)) {
+      setFilteredInstructions(agentDetails.instruction.filter(instruction => instruction.trim() !== ''));
+    }
+  }, [agentDetails]);
   useEffect(() => {
     // console.log(agentDetails1)
     // console.log(JSON.parse(agentDetails1))
@@ -102,13 +104,13 @@ export default function Details({agentDetails1, runCount, goals, instructions, a
       <div className={styles.separator}></div>
       <div className={styles.agent_info_box}>
         <div><Image width={15} height={15} src="/images/flag.svg" alt="goals-icon"/></div>
-        <div style={info_text}>{goals?.length || 0} Goals</div>
+        <div style={info_text}>{agentDetails?.goal?.length || 0} Goals</div>
       </div>
-      {goals && goals.length > 0 && <div>
+      {agentDetails?.goal && agentDetails?.goal?.length > 0 && <div>
         <div className={styles.large_text_box} style={!showGoals ? {overflow: 'hidden', display: '-webkit-box'} : {}}>
-          {goals.map((goal, index) => (<div key={index} style={{marginTop: '0'}}>
+          {agentDetails?.goal?.map((goal, index) => (<div key={index} style={{marginTop: '0'}}>
             <div>{index + 1}. {goal || ''}</div>
-            {index !== goals.length - 1 && <br/>}
+            {index !== agentDetails?.goal?.length - 1 && <br/>}
           </div>))}
         </div>
         <div className={styles.show_more_button} onClick={() => setShowGoals(!showGoals)}>
diff --git a/gui/pages/api/DashboardService.js b/gui/pages/api/DashboardService.js
index d0547ec1c..308b1fa6c 100644
--- a/gui/pages/api/DashboardService.js
+++ b/gui/pages/api/DashboardService.js
@@ -25,7 +25,7 @@ export const getTools = () => {
 };
 
 export const getAgentDetails = (agentId, agentExecutionId) => {
-  return api.get(`agents/get/details/agent_id/${agentId}/agent_execution_id/${agentExecutionId}`);
+  return api.get(`/agent_executions_configs/details/agent_id/${agentId}/agent_execution_id/${agentExecutionId}`);
 };
 
 export const getAgentExecutions = (agentId) => {

From 1fa1e441a2e6f36de1bcc134d9ae14923c372b5c Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Tue, 1 Aug 2023 17:43:19 +0530
Subject: [PATCH 03/10] minor changes

---
 gui/pages/Content/Agents/AgentWorkspace.js | 1 -
 gui/pages/Content/Agents/Details.js        | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
index 2cfce0089..7df62fcc2 100644
--- a/gui/pages/Content/Agents/AgentWorkspace.js
+++ b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -225,7 +225,6 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
     if (agentDetails) {
       setRightPanel(agentDetails.permission_type === 'RESTRICTED' ? 'action_console' : 'details');
     }
-    console.log(agentDetails)
   }, [agentDetails])
 
   function setNewRunDetails() {
diff --git a/gui/pages/Content/Agents/Details.js b/gui/pages/Content/Agents/Details.js
index a910e37d3..5f9c682df 100644
--- a/gui/pages/Content/Agents/Details.js
+++ b/gui/pages/Content/Agents/Details.js
@@ -33,10 +33,7 @@ export default function Details({agentDetails1, runCount, agentScheduleDetails,
     }
   }, [agentDetails]);
   useEffect(() => {
-    // console.log(agentDetails1)
-    // console.log(JSON.parse(agentDetails1))
     setAgentDetails(agentDetails1)
-    // console.log(JSON.parse(agentDetails.calls))
   }, [agentDetails1]);
 
   useEffect(() => {

From 58867f56725cc93ef0c2543eb5d989115d212268 Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Thu, 3 Aug 2023 17:40:17 +0530
Subject: [PATCH 04/10] minor changes and bug fixes

---
 gui/pages/Content/Agents/AgentCreate.js    | 22 +++++++++++++++++++---
 gui/pages/Content/Agents/AgentWorkspace.js |  2 +-
 gui/pages/Dashboard/Content.js             |  1 +
 gui/pages/api/DashboardService.js          |  4 ++--
 gui/utils/utils.js                         |  1 +
 5 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
index 20e454e1f..0ddd815a8 100644
--- a/gui/pages/Content/Agents/AgentCreate.js
+++ b/gui/pages/Content/Agents/AgentCreate.js
@@ -114,6 +114,8 @@ export default function AgentCreate({
 
   const [scheduleData, setScheduleData] = useState(null);
   const [editModal, setEditModal] = useState(false)
+  const [editAgentClicked, setEditAgentClicked] = useState(false)
+
 
   useEffect(() => {
     getOrganisationConfig(organisationId, "model_api_key")
@@ -146,6 +148,7 @@ export default function AgentCreate({
   }, [toolNames]);
 
   useEffect(() => {
+    console.log(internalId)
     getLlmModels()
       .then((response) => {
         const models = response.data || [];
@@ -161,6 +164,10 @@ export default function AgentCreate({
         console.error('Error fetching models:', error);
       });
     if (edit) {
+      if(internalId !== null) {
+        const agent_edit_click = localStorage.getItem("agent_edit_click" + String(internalId)) || false;
+        setEditAgentClicked(JSON.parse(agent_edit_click));
+      }
       editingAgent();
     }
 
@@ -236,12 +243,17 @@ export default function AgentCreate({
 
   const editingAgent = () => {
     const agent = agents.find(agent => agent.id === editAgentId);
-    fillDetails(agent)
+    console.log(editAgentClicked)
+    if(!editAgentClicked) {
+      fillDetails(agent)
+    }
     getAgentDetails(editAgentId, -1)
         .then((response) => {
           const data = response.data || []
-          fillAdvancedDetails(data)
-          setLocalStorageArray("tool_names_" + String(internalId), data.tools.map(tool => tool.name), setToolNames);
+          if(!editAgentClicked) {
+            fillAdvancedDetails(data)
+            setLocalStorageArray("tool_names_" + String(internalId), data.tools.map(tool => tool.name), setToolNames);
+          }
         })
         .catch((error) => {
           console.error('Error fetching agent details:', error);
@@ -249,6 +261,8 @@ export default function AgentCreate({
   };
 
   const fillDetails = (agent) => {
+    console.log(internalId)
+    setLocalStorageValue("agent_edit_click" + String(internalId), true, setEditAgentClicked);
     setLocalStorageValue("agent_name_" + String(internalId), agent.name, setAgentName);
     setLocalStorageValue("agent_description_" + String(internalId), agent.description, setAgentDescription);
     setLocalStorageValue("advanced_options_" + String(internalId), true, setAdvancedOptions);
@@ -368,6 +382,7 @@ export default function AgentCreate({
   };
 
   const addGoal = () => {
+    console.log(internalId)
     setLocalStorageArray("agent_goals_" + String(internalId), [...goals, 'new goal'], setGoals);
   };
 
@@ -720,6 +735,7 @@ export default function AgentCreate({
   };
 
   useEffect(() => {
+    console.log(internalId)
     if (internalId !== null) {
       const has_resource = localStorage.getItem("has_resource_" + String(internalId)) || 'true';
       if (has_resource) {
diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
index 7df62fcc2..1287bbbcc 100644
--- a/gui/pages/Content/Agents/AgentWorkspace.js
+++ b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -289,7 +289,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
   // }
 
   function saveAgentTemplate() {
-    saveAgentAsTemplate(agentId)
+    saveAgentAsTemplate(agentId, selectedRun?.id)
       .then((response) => {
         toast.success("Agent saved as template successfully", {autoClose: 1800});
       })
diff --git a/gui/pages/Dashboard/Content.js b/gui/pages/Dashboard/Content.js
index 835d7ffe7..0fc3ff255 100644
--- a/gui/pages/Dashboard/Content.js
+++ b/gui/pages/Dashboard/Content.js
@@ -156,6 +156,7 @@ export default function Content({env, selectedView, selectedProjectId, organisat
 
   const addTab = (element) => {
     let addedTabIndex = null;
+    console.log(element.internalId)
     if (element.contentType === "Toolkits") {
       setToolkitDetails(element);
     }
diff --git a/gui/pages/api/DashboardService.js b/gui/pages/api/DashboardService.js
index 308b1fa6c..f34aec1db 100644
--- a/gui/pages/api/DashboardService.js
+++ b/gui/pages/api/DashboardService.js
@@ -120,8 +120,8 @@ export const fetchAgentTemplateListLocal = () => {
   return api.get('/agent_templates/list?template_source=local');
 };
 
-export const saveAgentAsTemplate = (agentId) => {
-  return api.post(`/agent_templates/save_agent_as_template/${agentId}`);
+export const saveAgentAsTemplate = (agentId, executionId) => {
+  return api.post(`/agent_templates/save_agent_as_template/agent_id/${agentId}/agent_execution_id/${executionId}`);
 };
 
 export const fetchAgentTemplateConfig = (templateId) => {
diff --git a/gui/utils/utils.js b/gui/utils/utils.js
index 702b417a4..2963a8403 100644
--- a/gui/utils/utils.js
+++ b/gui/utils/utils.js
@@ -285,6 +285,7 @@ const removeAgentInternalId = (internalId) => {
     localStorage.removeItem("agent_template_id_" + String(internalId));
     localStorage.removeItem("agent_knowledge_" + String(internalId));
     localStorage.removeItem("agent_knowledge_id_" + String(internalId));
+    localStorage.removeItem("agent_edit_click" + String(internalId));
   }
 };
 

From 79717fc609a0078d1a88aad2076c9dd95ac51c3e Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Fri, 4 Aug 2023 13:03:40 +0530
Subject: [PATCH 05/10] edit agent persistence solved

---
 gui/pages/Content/Agents/AgentCreate.js | 14 ++++----------
 gui/utils/utils.js                      |  2 +-
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
index 0ddd815a8..6008bebee 100644
--- a/gui/pages/Content/Agents/AgentCreate.js
+++ b/gui/pages/Content/Agents/AgentCreate.js
@@ -114,7 +114,6 @@ export default function AgentCreate({
 
   const [scheduleData, setScheduleData] = useState(null);
   const [editModal, setEditModal] = useState(false)
-  const [editAgentClicked, setEditAgentClicked] = useState(false)
 
 
   useEffect(() => {
@@ -164,10 +163,6 @@ export default function AgentCreate({
         console.error('Error fetching models:', error);
       });
     if (edit) {
-      if(internalId !== null) {
-        const agent_edit_click = localStorage.getItem("agent_edit_click" + String(internalId)) || false;
-        setEditAgentClicked(JSON.parse(agent_edit_click));
-      }
       editingAgent();
     }
 
@@ -242,15 +237,15 @@ export default function AgentCreate({
   };
 
   const editingAgent = () => {
+    const isLoaded = localStorage.getItem('is_editing_agent_' + String(internalId));
     const agent = agents.find(agent => agent.id === editAgentId);
-    console.log(editAgentClicked)
-    if(!editAgentClicked) {
+    if (!isLoaded) {
       fillDetails(agent)
     }
     getAgentDetails(editAgentId, -1)
         .then((response) => {
           const data = response.data || []
-          if(!editAgentClicked) {
+          if (!isLoaded) {
             fillAdvancedDetails(data)
             setLocalStorageArray("tool_names_" + String(internalId), data.tools.map(tool => tool.name), setToolNames);
           }
@@ -258,11 +253,10 @@ export default function AgentCreate({
         .catch((error) => {
           console.error('Error fetching agent details:', error);
         });
+    localStorage.setItem('is_editing_agent_' + String(internalId), true);
   };
 
   const fillDetails = (agent) => {
-    console.log(internalId)
-    setLocalStorageValue("agent_edit_click" + String(internalId), true, setEditAgentClicked);
     setLocalStorageValue("agent_name_" + String(internalId), agent.name, setAgentName);
     setLocalStorageValue("agent_description_" + String(internalId), agent.description, setAgentDescription);
     setLocalStorageValue("advanced_options_" + String(internalId), true, setAdvancedOptions);
diff --git a/gui/utils/utils.js b/gui/utils/utils.js
index d9165df70..899520965 100644
--- a/gui/utils/utils.js
+++ b/gui/utils/utils.js
@@ -285,7 +285,7 @@ const removeAgentInternalId = (internalId) => {
     localStorage.removeItem("agent_template_id_" + String(internalId));
     localStorage.removeItem("agent_knowledge_" + String(internalId));
     localStorage.removeItem("agent_knowledge_id_" + String(internalId));
-    localStorage.removeItem("agent_edit_click" + String(internalId));
+    localStorage.removeItem("is_editing_agent_" + String(internalId));
   }
 };
 

From 1f5582e80787d4af77e466ba1632523f09d806f1 Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Fri, 4 Aug 2023 13:50:02 +0530
Subject: [PATCH 06/10] removing console loggers

---
 gui/pages/Content/Agents/AgentCreate.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
index 6008bebee..b45cc9f79 100644
--- a/gui/pages/Content/Agents/AgentCreate.js
+++ b/gui/pages/Content/Agents/AgentCreate.js
@@ -147,7 +147,6 @@ export default function AgentCreate({
   }, [toolNames]);
 
   useEffect(() => {
-    console.log(internalId)
     getLlmModels()
       .then((response) => {
         const models = response.data || [];
@@ -376,7 +375,6 @@ export default function AgentCreate({
   };
 
   const addGoal = () => {
-    console.log(internalId)
     setLocalStorageArray("agent_goals_" + String(internalId), [...goals, 'new goal'], setGoals);
   };
 
@@ -729,7 +727,6 @@ export default function AgentCreate({
   };
 
   useEffect(() => {
-    console.log(internalId)
     if (internalId !== null) {
       const has_resource = localStorage.getItem("has_resource_" + String(internalId)) || 'true';
       if (has_resource) {

From 56ec32e273764a947eb0a0dff6cf00f458560d60 Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Fri, 4 Aug 2023 14:00:35 +0530
Subject: [PATCH 07/10] minor changes

---
 gui/pages/Content/Agents/AgentCreate.js | 8 ++++----
 gui/pages/_app.css                      | 3 +++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
index b45cc9f79..969ce268c 100644
--- a/gui/pages/Content/Agents/AgentCreate.js
+++ b/gui/pages/Content/Agents/AgentCreate.js
@@ -1305,14 +1305,14 @@ export default function AgentCreate({
           )}
 
           {editModal && (<div className="modal" onClick={() => setEditModal(!editModal)}>
-            <div className="modal-content" style={{width: '35%'}} onClick={preventDefault}>
+            <div className="modal-content w_35" onClick={preventDefault}>
               <div className={styles.detail_name}>Update agent</div>
               <div><label className={styles.form_label}>All the new runs of this agent will be updated with the latest changes. Are you sure you want to update changes?</label></div>
-              <div style={{display: 'flex', justifyContent: 'flex-end', marginTop: '20px'}}>
-                <button className="secondary_button" style={{marginRight: '10px'}} onClick={() => setEditModal(false)}>
+              <div className="mt_20 justify_end display_flex">
+                <button className="secondary_button mr_10" onClick={() => setEditModal(false)}>
                   Cancel
                 </button>
-                <button className={styles.run_button} style={{paddingLeft: '15px', paddingRight: '15px', height: '32px'}} onClick={handleAddAgent}>
+                <button className={`${styles.run_button} h_32p padding_0_15 `} onClick={handleAddAgent}>
                   Update changes
                 </button>
               </div>
diff --git a/gui/pages/_app.css b/gui/pages/_app.css
index b197dd1c4..8e39ea591 100644
--- a/gui/pages/_app.css
+++ b/gui/pages/_app.css
@@ -1002,6 +1002,7 @@ p {
 .w_20{width: 20%}
 .w_22{width: 22%}
 .w_56{width: 56%}
+.w_35{width: 35%}
 .w_100{width: 100%}
 .w_inherit{width: inherit}
 .w_fit_content{width:fit-content}
@@ -1012,6 +1013,7 @@ p {
 .h_100{height: 100%}
 .h_auto{height: auto}
 .h_75vh{height: 75vh}
+.h_32p{height: 32px}
 
 .mxh_78vh{max-height: 78vh}
 
@@ -1065,6 +1067,7 @@ p {
 .padding_8_6{padding: 8px 6px;}
 .padding_2_8{padding: 2px 8px;}
 .padding_0_8{padding: 0px 8px;}
+.padding_0_15{padding: 0px 15px;}
 
 .flex_wrap{flex-wrap: wrap;}
 

From dbe10d98686a1ab0c0a919d6606b7edbdf15488b Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Mon, 7 Aug 2023 12:35:03 +0530
Subject: [PATCH 08/10] minor changes

---
 gui/pages/Content/Agents/AgentCreate.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentCreate.js b/gui/pages/Content/Agents/AgentCreate.js
index 4a978e886..f17368ca9 100644
--- a/gui/pages/Content/Agents/AgentCreate.js
+++ b/gui/pages/Content/Agents/AgentCreate.js
@@ -166,9 +166,6 @@ export default function AgentCreate({
       .catch((error) => {
         console.error('Error fetching models:', error);
       });
-    if (edit) {
-      editingAgent();
-    }
 
     getAgentWorkflows()
       .then((response) => {
@@ -184,6 +181,9 @@ export default function AgentCreate({
       .catch((error) => {
         console.error('Error fetching agent workflows:', error);
       });
+    if (edit) {
+      editingAgent();
+    }
 
     if (template !== null) {
       fillDetails(template)

From a106f33272ee317a4a68a5cff9e64a4ad43e1c19 Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Mon, 7 Aug 2023 17:34:43 +0530
Subject: [PATCH 09/10] removing save agent as template from pr

---
 gui/pages/Content/Agents/AgentWorkspace.js | 2 +-
 gui/pages/api/DashboardService.js          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js
index b2b8ccf75..987874dea 100644
--- a/gui/pages/Content/Agents/AgentWorkspace.js
+++ b/gui/pages/Content/Agents/AgentWorkspace.js
@@ -289,7 +289,7 @@ export default function AgentWorkspace({env, agentId, agentName, selectedView, a
   // }
 
   function saveAgentTemplate() {
-    saveAgentAsTemplate(agentId, selectedRun?.id)
+    saveAgentAsTemplate(agentId)
       .then((response) => {
         toast.success("Agent saved as template successfully", {autoClose: 1800});
       })
diff --git a/gui/pages/api/DashboardService.js b/gui/pages/api/DashboardService.js
index c0d1178f4..95decead6 100644
--- a/gui/pages/api/DashboardService.js
+++ b/gui/pages/api/DashboardService.js
@@ -124,8 +124,8 @@ export const fetchAgentTemplateListLocal = () => {
   return api.get('/agent_templates/list?template_source=local');
 };
 
-export const saveAgentAsTemplate = (agentId, executionId) => {
-  return api.post(`/agent_templates/save_agent_as_template/agent_id/${agentId}/agent_execution_id/${executionId}`);
+export const saveAgentAsTemplate = (agentId) => {
+  return api.post(`/agent_templates/save_agent_as_template/${agentId}`);
 };
 
 export const fetchAgentTemplateConfig = (templateId) => {

From 24b976c007611ec12934e08d43c4207000891fb1 Mon Sep 17 00:00:00 2001
From: namansleeps <mandhani12@gmail.com>
Date: Mon, 7 Aug 2023 18:37:41 +0530
Subject: [PATCH 10/10] minor changes

---
 gui/pages/_app.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gui/pages/_app.css b/gui/pages/_app.css
index 8e39ea591..15e4c6c03 100644
--- a/gui/pages/_app.css
+++ b/gui/pages/_app.css
@@ -1001,8 +1001,8 @@ p {
 .w_12{width: 12%}
 .w_20{width: 20%}
 .w_22{width: 22%}
-.w_56{width: 56%}
 .w_35{width: 35%}
+.w_56{width: 56%}
 .w_100{width: 100%}
 .w_inherit{width: inherit}
 .w_fit_content{width:fit-content}