From 4e60148f14d54284672347b5ea846224f349c5fa Mon Sep 17 00:00:00 2001 From: NishantBorthakur Date: Tue, 20 Jun 2023 10:59:14 +0530 Subject: [PATCH 1/5] action console null checks --- gui/pages/Content/Agents/ActionConsole.js | 62 +++++++++------------ gui/pages/Content/Agents/AgentWorkspace.js | 12 +++- gui/pages/Content/Agents/ResourceManager.js | 12 +++- 3 files changed, 44 insertions(+), 42 deletions(-) diff --git a/gui/pages/Content/Agents/ActionConsole.js b/gui/pages/Content/Agents/ActionConsole.js index 4dc621bcf..772e2d056 100644 --- a/gui/pages/Content/Agents/ActionConsole.js +++ b/gui/pages/Content/Agents/ActionConsole.js @@ -2,20 +2,21 @@ import React, { useState, useEffect } from 'react'; import styles from './Agents.module.css'; import Image from "next/image"; import { updatePermissions } from '@/pages/api/DashboardService'; +import {formatTime} from "@/utils/utils"; export default function ActionConsole({ actions }) { const [hiddenActions, setHiddenActions] = useState([]); - const [reasons, setReasons] = useState(actions.map(() => '')); + const [reasons, setReasons] = useState([]); const [localActions, setLocalActions] = useState(actions); const [denied, setDenied] = useState([]); const [localActionIds, setLocalActionIds] = useState([]); useEffect(() => { - const updatedActions = actions.filter( + const updatedActions = actions?.filter( (action) => !localActionIds.includes(action.id) ); - if (updatedActions.length > 0) { + if (updatedActions && updatedActions.length > 0) { setLocalActions( localActions.map((localAction) => updatedActions.find(({ id }) => id === localAction.id) || localAction @@ -38,27 +39,6 @@ export default function ActionConsole({ actions }) { setDenied(newDeniedState); }; - const formatDate = (dateString) => { - const now = new Date(); - const date = new Date(dateString); - const seconds = Math.floor((now - date) / 1000); - const minutes = Math.floor(seconds / 60); - const hours = Math.floor(minutes / 60); - const days = Math.floor(hours / 24); - const weeks = Math.floor(days / 7); - const months = Math.floor(days / 30); - const years = Math.floor(days / 365); - - if (years > 0) return `${years} yr${years === 1 ? '' : 's'}`; - if (months > 0) return `${months} mon${months === 1 ? '' : 's'}`; - if (weeks > 0) return `${weeks} wk${weeks === 1 ? '' : 's'}`; - if (days > 0) return `${days} day${days === 1 ? '' : 's'}`; - if (hours > 0) return `${hours} hr${hours === 1 ? '' : 's'}`; - if (minutes > 0) return `${minutes} min${minutes === 1 ? '' : 's'}`; - - return `${seconds} sec${seconds === 1 ? '' : 's'}`; - }; - const handleSelection = (index, status, permissionId) => { setHiddenActions([...hiddenActions, index]); @@ -68,13 +48,12 @@ export default function ActionConsole({ actions }) { }; updatePermissions(permissionId, data).then((response) => { - console.log("voila") }); }; return ( <> - {actions.some(action => action.status === "PENDING") ? (
+ {actions?.some(action => action.status === "PENDING") ? (
{actions.map((action, index) => action.status === "PENDING" && !hiddenActions.includes(index) && (
@@ -87,13 +66,24 @@ export default function ActionConsole({ actions }) { )} {denied[index] ? (
- - + +
) : (
- - + +
)}
@@ -101,16 +91,14 @@ export default function ActionConsole({ actions }) {
schedule-icon
-
{formatDate(action.created_at)}
+
{formatTime(action.created_at)}
))} -
): - ( -
- no permissions - No Actions to Display! -
)} + ):
+ no-permissions + No Actions to Display! +
} ); } \ No newline at end of file diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js index a9ae07dd5..5d4249faa 100644 --- a/gui/pages/Content/Agents/AgentWorkspace.js +++ b/gui/pages/Content/Agents/AgentWorkspace.js @@ -14,7 +14,7 @@ import {EventBus} from "@/utils/eventBus"; export default function AgentWorkspace({agentId, selectedView}) { const [leftPanel, setLeftPanel] = useState('activity_feed') - const [rightPanel, setRightPanel] = useState('details') + const [rightPanel, setRightPanel] = useState('') const [history, setHistory] = useState(true) const [selectedRun, setSelectedRun] = useState(null) const [runModal, setRunModal] = useState(false) @@ -30,16 +30,19 @@ export default function AgentWorkspace({agentId, selectedView}) { const addInstruction = () => { setInstructions((prevArray) => [...prevArray, 'new instructions']); }; + const handleInstructionDelete = (index) => { const updatedInstructions = [...instructions]; updatedInstructions.splice(index, 1); setInstructions(updatedInstructions); }; + const handleInstructionChange = (index, newValue) => { const updatedInstructions = [...instructions]; updatedInstructions[index] = newValue; setInstructions(updatedInstructions); }; + const addGoal = () => { setGoals((prevArray) => [...prevArray, 'new goal']); }; @@ -138,6 +141,12 @@ export default function AgentWorkspace({agentId, selectedView}) { fetchExecutions(agentId); }, [agentId]) + useEffect(() => { + if(agentDetails) { + setRightPanel(agentDetails.permission_type.includes('RESTRICTED') ? 'action_console' : 'details'); + } + }, [agentDetails]) + function fetchAgentDetails(agentId) { getAgentDetails(agentId) .then((response) => { @@ -145,7 +154,6 @@ export default function AgentWorkspace({agentId, selectedView}) { setTools(response.data.tools); setGoals(response.data.goal); setInstructions(response.data.instruction); - console.log(response.data) }) .catch((error) => { console.error('Error fetching agent details:', error); diff --git a/gui/pages/Content/Agents/ResourceManager.js b/gui/pages/Content/Agents/ResourceManager.js index b773297ac..84db73130 100644 --- a/gui/pages/Content/Agents/ResourceManager.js +++ b/gui/pages/Content/Agents/ResourceManager.js @@ -120,9 +120,15 @@ export default function ResourceManager({agentId}) { const ResourceList = ({ files }) => (
- {files.map((file, index) => ( - - ))} + {files.length <= 0 && channel === 'output' ?
+ no-permissions + No Output files! +
:
+ {files.map((file, index) => ( + + ))} +
+ }
); From 36050220060ceaecba9e6ad19c45c5f2e4911bd1 Mon Sep 17 00:00:00 2001 From: NishantBorthakur Date: Tue, 20 Jun 2023 11:22:15 +0530 Subject: [PATCH 2/5] optimizing action console --- gui/pages/Content/Agents/ActionConsole.js | 159 ++++++++++++---------- 1 file changed, 85 insertions(+), 74 deletions(-) diff --git a/gui/pages/Content/Agents/ActionConsole.js b/gui/pages/Content/Agents/ActionConsole.js index 772e2d056..273df405f 100644 --- a/gui/pages/Content/Agents/ActionConsole.js +++ b/gui/pages/Content/Agents/ActionConsole.js @@ -1,104 +1,115 @@ import React, { useState, useEffect } from 'react'; import styles from './Agents.module.css'; -import Image from "next/image"; +import Image from 'next/image'; + import { updatePermissions } from '@/pages/api/DashboardService'; -import {formatTime} from "@/utils/utils"; +import { formatTime } from '@/utils/utils'; + +function ActionBox({ action, index, denied, reasons, handleDeny, handleSelection }) { + const isDenied = denied[index]; + + return ( +
+
+
Tool {action.tool_name} is seeking for Permissions
+ {isDenied && ( +
+
Provide Feedback (Optional)
+ { + const newReasons = [...reasons]; + newReasons[index] = e.target.value; + setReasons(newReasons); + }}/> +
+ )} + {isDenied ? ( +
+ + +
+ ) : ( +
+ + +
+ )} +
+
+
+ schedule-icon +
+
{formatTime(action.created_at)}
+
+
+ ); +} export default function ActionConsole({ actions }) { const [hiddenActions, setHiddenActions] = useState([]); - const [reasons, setReasons] = useState([]); - const [localActions, setLocalActions] = useState(actions); const [denied, setDenied] = useState([]); + const [reasons, setReasons] = useState([]); const [localActionIds, setLocalActionIds] = useState([]); useEffect(() => { - const updatedActions = actions?.filter( - (action) => !localActionIds.includes(action.id) - ); + const updatedActions = actions?.filter((action) => !localActionIds.includes(action.id)); if (updatedActions && updatedActions.length > 0) { - setLocalActions( - localActions.map((localAction) => - updatedActions.find(({ id }) => id === localAction.id) || localAction - ) - ); - - const updatedDenied = updatedActions.map(() => false); - const updatedReasons = updatedActions.map(() => ''); - - setDenied((prev) => prev.map((value, index) => updatedDenied[index] || value)); - setReasons((prev) => prev.map((value, index) => updatedReasons[index] || value)); + setLocalActionIds((prevIds) => [...prevIds, ...updatedActions.map(({ id }) => id)]); - setLocalActionIds([...localActionIds, ...updatedActions.map(({ id }) => id)]); + setDenied((prevDenied) => prevDenied.map((value, index) => updatedActions[index] ? false : value)); + setReasons((prevReasons) => prevReasons.map((value, index) => updatedActions[index] ? '' : value)); } }, [actions]); - const handleDeny = index => { - const newDeniedState = [...denied]; - newDeniedState[index] = !newDeniedState[index]; - setDenied(newDeniedState); + const handleDeny = (index) => { + setDenied((prevDenied) => { + const newDeniedState = [...prevDenied]; + newDeniedState[index] = !newDeniedState[index]; + return newDeniedState; + }); }; const handleSelection = (index, status, permissionId) => { - setHiddenActions([...hiddenActions, index]); + setHiddenActions((prevHiddenActions) => [...prevHiddenActions, index]); const data = { status: status, user_feedback: reasons[index], }; - updatePermissions(permissionId, data).then((response) => { - }); + updatePermissions(permissionId, data).then((response) => {}); }; return ( - <> - {actions?.some(action => action.status === "PENDING") ? (
- {actions.map((action, index) => action.status === "PENDING" && !hiddenActions.includes(index) && ( -
-
-
Tool {action.tool_name} is seeking for Permissions
- {denied[index] && ( -
-
Provide Feedback (Optional)
- {const newReasons = [...reasons];newReasons[index] = e.target.value;setReasons(newReasons);}} placeholder="Enter your input here" className="input_medium" /> -
- )} - {denied[index] ? ( -
- - -
- ) : ( -
- - -
- )} -
-
-
- schedule-icon -
-
{formatTime(action.created_at)}
-
-
- ))} -
):
+ <> + {actions?.some((action) => action.status === 'PENDING') ? ( +
+ {actions.map((action, index) => { + if (action.status === 'PENDING' && !hiddenActions.includes(index)) { + return (); + } + return null; + })} +
+ ) : ( +
no-permissions - No Actions to Display! -
} - + No Actions to Display! +
+ )} + ); -} \ No newline at end of file +} From 5805f2c7d514691c96cba37e5efe69232b1b98a2 Mon Sep 17 00:00:00 2001 From: NishantBorthakur Date: Tue, 20 Jun 2023 11:53:21 +0530 Subject: [PATCH 3/5] dropdown css fix --- gui/pages/Content/Agents/ActionConsole.js | 5 ++--- gui/pages/Content/Agents/ResourceManager.js | 4 ++-- gui/pages/_app.css | 6 +++--- 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/gui/pages/Content/Agents/ActionConsole.js b/gui/pages/Content/Agents/ActionConsole.js index 273df405f..984018dbe 100644 --- a/gui/pages/Content/Agents/ActionConsole.js +++ b/gui/pages/Content/Agents/ActionConsole.js @@ -1,11 +1,10 @@ import React, { useState, useEffect } from 'react'; import styles from './Agents.module.css'; import Image from 'next/image'; - import { updatePermissions } from '@/pages/api/DashboardService'; import { formatTime } from '@/utils/utils'; -function ActionBox({ action, index, denied, reasons, handleDeny, handleSelection }) { +function ActionBox({ action, index, denied, reasons, handleDeny, handleSelection, setReasons }) { const isDenied = denied[index]; return ( @@ -98,7 +97,7 @@ export default function ActionConsole({ actions }) {
{actions.map((action, index) => { if (action.status === 'PENDING' && !hiddenActions.includes(index)) { - return (); } return null; diff --git a/gui/pages/Content/Agents/ResourceManager.js b/gui/pages/Content/Agents/ResourceManager.js index 84db73130..4eedfa1cb 100644 --- a/gui/pages/Content/Agents/ResourceManager.js +++ b/gui/pages/Content/Agents/ResourceManager.js @@ -119,11 +119,11 @@ export default function ResourceManager({agentId}) { }; const ResourceList = ({ files }) => ( -
+
{files.length <= 0 && channel === 'output' ?
no-permissions No Output files! -
:
+
:
{files.map((file, index) => ( ))} diff --git a/gui/pages/_app.css b/gui/pages/_app.css index dce203026..ae6a2970e 100644 --- a/gui/pages/_app.css +++ b/gui/pages/_app.css @@ -210,14 +210,14 @@ input[type="range"]::-moz-range-track { .dropdown_container { width: 150px; height: fit-content; - background: #1B192C; + background: #2E293F; display: flex; flex-direction: column; justify-content: center; position: absolute; border-radius: 8px; - box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.3); - padding: 4px 5px; + box-shadow: -2px 2px 24px rgba(0, 0, 0, 0.4); + padding: 5px; } .dropdown_item { From 31adf5f39cec8329bda36daf75ebeeefd2913eb3 Mon Sep 17 00:00:00 2001 From: NishantBorthakur Date: Tue, 20 Jun 2023 12:59:25 +0530 Subject: [PATCH 4/5] code cleanup --- gui/pages/Content/Agents/AgentTemplatesList.js | 2 +- gui/pages/Content/Agents/AgentWorkspace.js | 6 +----- gui/pages/Content/Marketplace/Market.js | 9 ++++++--- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/gui/pages/Content/Agents/AgentTemplatesList.js b/gui/pages/Content/Agents/AgentTemplatesList.js index 82783a2ec..a2ecb7525 100644 --- a/gui/pages/Content/Agents/AgentTemplatesList.js +++ b/gui/pages/Content/Agents/AgentTemplatesList.js @@ -49,7 +49,7 @@ export default function AgentTemplatesList({sendAgentData, selectedProjectId, fe
{agentTemplates.length > 0 ?
- {agentTemplates.map((item, index) => ( + {agentTemplates.map((item) => (
handleTemplateClick(item)}>
diff --git a/gui/pages/Content/Agents/AgentWorkspace.js b/gui/pages/Content/Agents/AgentWorkspace.js index 5d4249faa..7e8942160 100644 --- a/gui/pages/Content/Agents/AgentWorkspace.js +++ b/gui/pages/Content/Agents/AgentWorkspace.js @@ -225,11 +225,7 @@ export default function AgentWorkspace({agentId, selectedView}) {
{leftPanel === 'activity_feed' &&
- +
} {leftPanel === 'agent_type' &&
}
diff --git a/gui/pages/Content/Marketplace/Market.js b/gui/pages/Content/Marketplace/Market.js index 105712b30..55666edf1 100644 --- a/gui/pages/Content/Marketplace/Market.js +++ b/gui/pages/Content/Marketplace/Market.js @@ -27,14 +27,17 @@ export default function Market() { useEffect(() => { const handleOpenTemplateDetails = (item) => { - setAgentTemplateData(item) - setItemClicked(true) + setAgentTemplateData(item); + setItemClicked(true); }; + const handleBackClick = ()=>{ - setItemClicked(false) + setItemClicked(false); } + EventBus.on('openTemplateDetails', handleOpenTemplateDetails); EventBus.on('goToMarketplace', handleBackClick); + return () => { EventBus.off('openTemplateDetails', handleOpenTemplateDetails); EventBus.off('goToMarketplace', handleBackClick); From 4f10be5148a862b9e78ed15883fe429038ba2ba4 Mon Sep 17 00:00:00 2001 From: NishantBorthakur Date: Tue, 20 Jun 2023 13:16:33 +0530 Subject: [PATCH 5/5] loading text as utils function --- gui/pages/Content/Agents/ActivityFeed.js | 12 ++----- gui/pages/Content/Marketplace/MarketAgent.js | 38 ++++++++------------ gui/pages/_app.js | 16 ++------- gui/utils/utils.js | 14 +++++++- 4 files changed, 33 insertions(+), 47 deletions(-) diff --git a/gui/pages/Content/Agents/ActivityFeed.js b/gui/pages/Content/Agents/ActivityFeed.js index f0ce5f5b0..f1a4d698d 100644 --- a/gui/pages/Content/Agents/ActivityFeed.js +++ b/gui/pages/Content/Agents/ActivityFeed.js @@ -2,7 +2,7 @@ import React, {useEffect, useRef, useState} from 'react'; import styles from './Agents.module.css'; import {getExecutionFeeds} from "@/pages/api/DashboardService"; import Image from "next/image"; -import {formatTime} from "@/utils/utils"; +import {formatTime, loadingTextEffect} from "@/utils/utils"; import {EventBus} from "@/utils/eventBus"; export default function ActivityFeed({selectedRunId, selectedView, setFetchedData }) { @@ -13,15 +13,7 @@ export default function ActivityFeed({selectedRunId, selectedView, setFetchedDat const [prevFeedsLength, setPrevFeedsLength] = useState(0); useEffect(() => { - const text = 'Thinking'; - let dots = ''; - - const interval = setInterval(() => { - dots = dots.length < 3 ? dots + '.' : ''; - setLoadingText(`${text}${dots}`); - }, 250); - - return () => clearInterval(interval); + loadingTextEffect('Thinking', setLoadingText, 250); }, []); useEffect(() => { diff --git a/gui/pages/Content/Marketplace/MarketAgent.js b/gui/pages/Content/Marketplace/MarketAgent.js index 8c6189442..4bf04c693 100644 --- a/gui/pages/Content/Marketplace/MarketAgent.js +++ b/gui/pages/Content/Marketplace/MarketAgent.js @@ -3,6 +3,7 @@ import Image from "next/image"; import styles from './Market.module.css'; import {fetchAgentTemplateList} from "@/pages/api/DashboardService"; import {EventBus} from "@/utils/eventBus"; +import {loadingTextEffect} from "@/utils/utils"; export default function MarketAgent(){ const [agentTemplates, setAgentTemplates] = useState([]) @@ -10,31 +11,22 @@ export default function MarketAgent(){ const [isLoading, setIsLoading] = useState(true) const [loadingText, setLoadingText] = useState("Loading Templates"); - useEffect(() => { - const text = 'Loading Templates'; - let dots = ''; - - const interval = setInterval(() => { - dots = dots.length < 3 ? dots + '.' : ''; - setLoadingText(`${text}${dots}`); - }, 500); + useEffect(() => { + loadingTextEffect('Loading Templates', setLoadingText, 500); - return () => clearInterval(interval); - }, []); + if(window.location.href.toLowerCase().includes('marketplace')) { + setShowMarketplace(true) + } - useEffect(() => { - if(window.location.href.toLowerCase().includes('marketplace')) { - setShowMarketplace(true) - } - fetchAgentTemplateList() - .then((response) => { - const data = response.data || []; - setAgentTemplates(data); - setIsLoading(false); - }) - .catch((error) => { - console.error('Error fetching agent templates:', error); - }); + fetchAgentTemplateList() + .then((response) => { + const data = response.data || []; + setAgentTemplates(data); + setIsLoading(false); + }) + .catch((error) => { + console.error('Error fetching agent templates:', error); + }); }, []); function handleTemplateClick(item) { diff --git a/gui/pages/_app.js b/gui/pages/_app.js index 4ef6f27b4..8651e0215 100644 --- a/gui/pages/_app.js +++ b/gui/pages/_app.js @@ -10,7 +10,7 @@ import { getOrganisation, getProject, validateAccessToken, checkEnvironment, add import { githubClientId } from "@/pages/api/apiConfig"; import { useRouter } from 'next/router'; import querystring from 'querystring'; -import {refreshUrl} from "@/utils/utils"; +import {refreshUrl, loadingTextEffect} from "@/utils/utils"; import MarketplacePublic from "./Content/Marketplace/MarketplacePublic" export default function App() { @@ -24,18 +24,6 @@ export default function App() { const router = useRouter(); const [showMarketplace, setShowMarketplace] = useState(false); - useEffect(() => { - const text = 'Initializing SuperAGI'; - let dots = ''; - - const interval = setInterval(() => { - dots = dots.length < 3 ? dots + '.' : ''; - setLoadingText(`${text}${dots}`); - }, 500); - - return () => clearInterval(interval); - }, []); - function fetchOrganisation(userId) { getOrganisation(userId) .then((response) => { @@ -47,6 +35,8 @@ export default function App() { } useEffect(() => { + loadingTextEffect('Initializing SuperAGI', setLoadingText, 500); + checkEnvironment() .then((response) => { const env = response.data.env; diff --git a/gui/utils/utils.js b/gui/utils/utils.js index 9cabc3936..86dccb2d5 100644 --- a/gui/utils/utils.js +++ b/gui/utils/utils.js @@ -79,4 +79,16 @@ export const refreshUrl = () => { const urlWithoutToken = window.location.origin + window.location.pathname; window.history.replaceState({}, document.title, urlWithoutToken); -}; \ No newline at end of file +}; + +export const loadingTextEffect = (loadingText, setLoadingText, timer) => { + const text = loadingText; + let dots = ''; + + const interval = setInterval(() => { + dots = dots.length < 3 ? dots + '.' : ''; + setLoadingText(`${text}${dots}`); + }, timer); + + return () => clearInterval(interval) +} \ No newline at end of file