waiting block frontend

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, getDateTime} from "@/pages/api/DashboardService";
 import Image from "next/image";
-import {loadingTextEffect, formatTimeDifference} from "@/utils/utils";
+import {loadingTextEffect, formatTimeDifference, convertWaitingPeriod, updateDateBasedOnValue} from "@/utils/utils";
 import {EventBus} from "@/utils/eventBus";
 import {ClipLoader} from 'react-spinners';
 
@@ -15,6 +15,8 @@ export default function ActivityFeed({selectedRunId, selectedView, setFetchedDat
   const [scheduleDate, setScheduleDate] = useState(null);
   const [scheduleTime, setScheduleTime] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [waitingPeriod, setWaitingPeriod] = useState(null);
+  const [waitingPeriodOver, setWaitingPeriodOver] = useState(null);
 
   useEffect(() => {
     const interval = window.setInterval(function () {
@@ -73,6 +75,10 @@ export default function ActivityFeed({selectedRunId, selectedView, setFetchedDat
     EventBus.emit('reFetchAgents', {});
   }, [runStatus])
 
+  useEffect(() => {
+    setWaitingPeriodOver(updateDateBasedOnValue(convertWaitingPeriod(waitingPeriod)))
+  }, [waitingPeriod]);
+
   function fetchFeeds() {
     if (selectedRunId !== null) {
       setIsLoading(true);
@@ -82,6 +88,7 @@ export default function ActivityFeed({selectedRunId, selectedView, setFetchedDat
           setFeeds(data.feeds);
           setRunStatus(data.status);
           setFetchedData(data.permissions);
+          setWaitingPeriod(data.waiting_period ? data.waiting_period : null)
           EventBus.emit('resetRunStatus', {executionId: selectedRunId, status: data.status});
           setIsLoading(false); //add this line
         })
@@ -142,24 +149,31 @@ export default function ActivityFeed({selectedRunId, selectedView, setFetchedDat
                 </div>}
               </div>
             </div>))}
+            {runStatus === 'WAIT_STEP' &&
+                <div className="history_box padding_20 cursor_default bg_secondary">
+                  <div style={{display: 'flex'}}>
+                    <div className="fs_20 lh_18">⏳</div>
+                    <div className={styles.feed_title}>Waiting Block Initiated. The Agent will wait for {convertWaitingPeriod(waitingPeriod) || null} and continue on {waitingPeriodOver || 'soon'}</div>
+                  </div>
+                </div>}
             {runStatus === 'RUNNING' &&
-              <div className={styles.history_box} style={{background: '#272335', padding: '20px', cursor: 'default'}}>
+              <div className="history_box padding_20 cursor_default bg_secondary">
                 <div style={{display: 'flex'}}>
-                  <div style={{fontSize: '20px'}}>🧠</div>
+                  <div className="fs_20">🧠</div>
                   <div className={styles.feed_title}><i>{loadingText}</i></div>
                 </div>
               </div>}
             {runStatus === 'COMPLETED' &&
-              <div className={styles.history_box} style={{background: '#272335', padding: '20px', cursor: 'default'}}>
+              <div className="history_box padding_20 cursor_default bg_secondary">
                 <div style={{display: 'flex'}}>
-                  <div style={{fontSize: '20px'}}>🏁</div>
+                  <div className="fs_20">🏁</div>
                   <div className={styles.feed_title}><i>All goals completed successfully!</i></div>
                 </div>
               </div>}
             {runStatus === 'ITERATION_LIMIT_EXCEEDED' &&
-              <div className={styles.history_box} style={{background: '#272335', padding: '20px', cursor: 'default'}}>
+              <div className="history_box padding_20 cursor_default bg_secondary">
                 <div style={{display: 'flex'}}>
-                  <div style={{fontSize: '20px'}}>⚠️</div>
+                  <div className="fs_20">⚠️</div>
                   <div className={styles.feed_title}><i>Stopped: Maximum iterations exceeded!</i></div>
                 </div>
               </div>}

gui/pages/Content/Agents/RunHistory.js

@@ -35,7 +35,7 @@ export default function RunHistory({runs, setHistory, selectedRunId, setSelected
       </div>
 
       <div className="detail_body mb_20">
-        {runs && runs.map((run) => (<div key={run.id} onClick={() => setSelectedRun(run)} className={selectedRunId === run.id ? 'history_box_selected' : 'history_box'}>
+        {runs && runs.map((run) => (<div key={run.id} onClick={() => setSelectedRun(run)} className={selectedRunId === run.id ? 'history_box_selected padding_10' : 'history_box padding_10'}>
           <div className="horizontal_container mb_14">
             {run.status === 'RUNNING' && <Image className="mix_blend_mode mr_7" width={14} height={14} src="/images/loading.gif" alt="loading-icon"/>}
             <div className="text_ellipsis">{run.name}</div>

gui/pages/Dashboard/Settings/Model.js

@@ -40,7 +40,6 @@ export default function Model({organisationId}) {
       }
       validateLLMApiKey(model.source, model.api_key)
           .then((response) => {
-            console.log(response)
             if (response.data.status === "success") {
               storeKey(model.source, model.api_key)
             }

gui/pages/_app.css

@@ -912,6 +912,9 @@ p {
 .br_6{border-radius: 6px}
 .br_8{border-radius: 8px}
 
+.fs_10{font-size: 10px}
+.fs_20{font-size: 20px}
+
 .text_9{
     color: #FFF;
     font-family: Inter;
@@ -1156,6 +1159,7 @@ p {
 .padding_10{padding: 10px;}
 .padding_12{padding: 12px;}
 .padding_16{padding: 16px;}
+.padding_20{padding: 20px;}
 
 .padding_8_6{padding: 8px 6px;}
 .padding_2_8{padding: 2px 8px;}
@@ -1464,6 +1468,7 @@ tr{
 .bg_white{background: white;}
 .bg_none{background: none;}
 .bg_primary{background: #2E293F;}
+.bg_secondary{background: #272335;}
 
 .container {
     height: 100%;
@@ -1779,7 +1784,6 @@ tr{
 
 .history_box, .history_box_selected {
     width: 100%;
-    padding: 10px;
     color: white;
     font-style: normal;
     font-weight: 400;
@@ -1882,3 +1886,5 @@ tr{
     background-color: green;
     border-radius: 6px;
 }
+
+

gui/utils/utils.js

@@ -500,4 +500,46 @@ export const formatDateTime = (dateTimeString) => {
   const formattedDate = format(adjustedDate, 'd MMM yyyy HH:mm');
 
   return formattedDate;
-};
+};
+
+export const convertWaitingPeriod = (waitingPeriod) => {
+  let convertedValue = waitingPeriod;
+  let unit = 'seconds';
+
+  if (convertedValue >= 60 && convertedValue < 3600) {
+    convertedValue = Math.floor(convertedValue / 60);
+    unit = 'minutes';
+  } else if (convertedValue >= 3600 && convertedValue < 86400) {
+    convertedValue = Math.floor(convertedValue / 3600);
+    unit = 'hours';
+  } else if (convertedValue >= 86400 && convertedValue < 604800) {
+    convertedValue = Math.floor(convertedValue / 86400);
+    unit = 'days';
+  } else if (convertedValue >= 604800) {
+    convertedValue = Math.floor(convertedValue / 604800);
+    unit = 'weeks';
+  }
+
+  return convertedValue + ' ' + unit;
+}
+
+export const updateDateBasedOnValue = (convertedValue, inputDate = new Date()) => {
+  const [value, unit] = convertedValue.split(' ');
+  const unitConversion = {
+    'seconds': 1000,
+    'minutes': 1000 * 60,
+    'hours': 1000 * 60 * 60,
+    'days': 1000 * 60 * 60 * 24,
+    'weeks': 1000 * 60 * 60 * 24 * 7
+  };
+
+  const updatedDate = new Date(inputDate.getTime() + parseInt(value, 10) * unitConversion[unit]);
+
+  return updatedDate.toLocaleString('en-US', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric'
+  });
+}

superagi/controllers/agent_execution_feed.py

@@ -16,6 +16,9 @@
 from superagi.helper.feed_parser import parse_feed
 from superagi.models.agent_execution import AgentExecution
 from superagi.models.agent_execution_feed import AgentExecutionFeed
+from superagi.agent.types.agent_workflow_step_action_types import AgentWorkflowStepAction
+from superagi.models.workflows.agent_workflow_step import AgentWorkflowStep
+from superagi.models.workflows.agent_workflow_step_wait import AgentWorkflowStepWait
 
 import re
 # from superagi.types.db import AgentExecutionFeedOut, AgentExecutionFeedIn
@@ -183,13 +186,21 @@ def get_agent_execution_feed(agent_execution_id: int,
                 "tool_name": permission.tool_name,
                 "question": permission.question,
                 "user_feedback": permission.user_feedback,
-                "time_difference":get_time_difference(permission.created_at,str(datetime.now()))
+                "time_difference": get_time_difference(permission.created_at, str(datetime.now()))
         } for permission in execution_permissions
     ]
+
+    waiting_period = None
+
+    if agent_execution.status == AgentWorkflowStepAction.WAIT_STEP.value:
+        workflow_step = AgentWorkflowStep.find_by_id(db.session, agent_execution.current_agent_step_id)
+        waiting_period = (AgentWorkflowStepWait.find_by_id(db.session, workflow_step.action_reference_id)).delay
+
     return {
         "status": agent_execution.status,
         "feeds": final_feeds,
-        "permissions": permissions
+        "permissions": permissions,
+        "waiting_period": waiting_period
     }