Dev -> Main

.github/workflows/ci.yml

@@ -0,0 +1,97 @@
+# This workflow will install Python dependencies, run tests and lint with a single version of Python
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-python
+
+name: Python CI
+
+on:
+  push:
+    branches: [ "main", "dev" ]
+  pull_request:
+    branches: [ "main", "dev" ]
+
+permissions:
+  contents: read
+
+jobs:
+  lint:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+        ref: ${{ github.event.pull_request.head.ref }}
+        repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+    - name: Set up Python 3.9
+      uses: actions/setup-python@v3
+      with:
+        python-version: "3.9"
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install flake8 pytest
+        if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
+    - name: Lint with flake8
+      run: |
+        # stop the build if there are Python syntax errors or undefined names
+        flake8 . --count --select=E9,F63,F7,F82 --show-source --statistics
+        # exit-zero treats all errors as warnings. The GitHub editor is 127 chars wide
+        flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics
+
+  test:
+    # eliminate duplicate runs
+    if: github.event_name == 'push' || (github.event.pull_request.head.repo.fork == (github.event_name == 'pull_request_target'))
+
+    permissions:
+      # Gives the action the necessary permissions for publishing new
+      # comments in pull requests.
+      pull-requests: write
+      # Gives the action the necessary permissions for pushing data to the
+      # python-coverage-comment-action branch, and for editing existing
+      # comments (to avoid publishing multiple comments in the same PR)
+      contents: write
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    strategy:
+      matrix:
+        python-version: ["3.9"]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          submodules: true
+
+      - name: Configure git user SuperAGI-Bot
+        run: |
+          git config --global user.name "SuperAGI-Bot"
+          git config --global user.email "github-bot@superagi.com"
+
+      - name: Set up Python 3.9
+        uses: actions/setup-python@v3
+        with:
+          python-version: "3.9"
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install flake8 pytest
+          if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
+
+      - name: Test with pytest
+        run: |
+          pytest --cov=superagi --cov-branch --cov-report term-missing --cov-report xml \
+            tests/unit_tests -s
+        env:
+          CI: true
+          ENV: DEV
+          PLAIN_OUTPUT: True
+          REDIS_URL: "localhost:6379"
+
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3

.pre-commit-config.yaml

@@ -0,0 +1,8 @@
+repos:
+  -   repo: local
+      hooks:
+        -   id: pylint
+            name: pylint
+            entry: pylint
+            language: system
+            types: [python]

gui/pages/Content/Agents/ActionConsole.js

@@ -1,116 +1,114 @@
 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';
+
+function ActionBox({ action, index, denied, reasons, handleDeny, handleSelection, setReasons }) {
+    const isDenied = denied[index];
+
+    return (
+      <div key={action.id} className={styles.history_box} style={{ background: '#272335', padding: '16px', cursor: 'default' }}>
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div>Tool <b>{action.tool_name}</b> is seeking for Permissions</div>
+              {isDenied && (
+                <div style={{ marginTop: '26px' }}>
+                    <div>Provide Feedback <span style={{ color: '#888888' }}>(Optional)</span></div>
+                    <input style={{ marginTop: '6px' }} type="text" value={reasons[index]} placeholder="Enter your input here" className="input_medium"
+                      onChange={(e) => {
+                          const newReasons = [...reasons];
+                          newReasons[index] = e.target.value;
+                          setReasons(newReasons);
+                      }}/>
+                </div>
+              )}
+              {isDenied ? (
+                <div style={{ display: 'inline-flex', marginTop: '16px', gap: '8px' }}>
+                    <button onClick={() => handleDeny(index)} className="secondary_button" style={{ paddingLeft: '10px', paddingTop: '2px' }}>
+                        <Image style={{ marginTop: '2px' }} width={12} height={12} src="/images/undo.svg" alt="check-icon" />
+                        <span className={styles.text_12_n}>Go Back</span>
+                    </button>
+                    <button onClick={() => handleSelection(index, false, action.id)} className="secondary_button" style={{ paddingLeft: '10px', paddingTop: '2px', background: 'transparent', border: 'none' }}>
+                        <span className={styles.text_12_n}>Proceed to Deny</span>
+                    </button>
+                </div>
+              ) : (
+                <div style={{ display: 'inline-flex', marginTop: '16px', gap: '8px' }}>
+                    <button onClick={() => handleSelection(index, true, action.id)} className="secondary_button" style={{ paddingLeft: '10px', paddingTop: '2px' }}>
+                        <Image style={{ marginTop: '4px' }} width={12} height={12} src="/images/check.svg" alt="check-icon" />
+                        <span className={styles.text_12_n}>Approve</span>
+                    </button>
+                    <button onClick={() => handleDeny(index)} className="secondary_button" style={{ paddingLeft: '10px', paddingTop: '2px', background: 'transparent', border: 'none' }}>
+                        <Image style={{ marginTop: '4px' }} width={16} height={16} src="/images/close.svg" alt="close-icon" />
+                        <span className={styles.text_12_n}>Deny</span>
+                    </button>
+                </div>
+              )}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', paddingLeft: '0', paddingBottom: '0' }} className={styles.tab_text}>
+              <div>
+                  <Image width={12} height={12} src="/images/schedule.svg" alt="schedule-icon" />
+              </div>
+              <div className={styles.history_info}>{formatTime(action.created_at)}</div>
+          </div>
+      </div>
+    );
+}
 
 export default function ActionConsole({ actions }) {
     const [hiddenActions, setHiddenActions] = useState([]);
-    const [reasons, setReasons] = useState(actions.map(() => ''));
-    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)
-        );
-
-        if (updatedActions.length > 0) {
-            setLocalActions(
-                localActions.map((localAction) =>
-                    updatedActions.find(({ id }) => id === localAction.id) || localAction
-                )
-            );
-
-            const updatedDenied = updatedActions.map(() => false);
-            const updatedReasons = updatedActions.map(() => '');
+        const updatedActions = actions?.filter((action) => !localActionIds.includes(action.id));
 
-            setDenied((prev) => prev.map((value, index) => updatedDenied[index] || value));
-            setReasons((prev) => prev.map((value, index) => updatedReasons[index] || value));
+        if (updatedActions && updatedActions.length > 0) {
+            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 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 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) => {
-            console.log("voila")
-        });
+        updatePermissions(permissionId, data).then((response) => {});
     };
 
     return (
-        <>
-            {actions.some(action => action.status === "PENDING") ? (<div className={styles.detail_body} style={{ height: "auto" }}>
-                {actions.map((action, index) => action.status === "PENDING" && !hiddenActions.includes(index) && (
-                    <div key={index} className={styles.history_box} style={{ background: "#272335", padding: "16px", cursor: "default" }}>
-                        <div style={{ display: "flex", flexDirection: 'column' }}>
-                            <div>Tool <b>{action.tool_name}</b> is seeking for Permissions</div>
-                            {denied[index] && (
-                                <div style={{marginTop: '26px' }}>
-                                    <div>Provide Feedback <span style={{color: '#888888'}}>(Optional)</span></div>
-                                    <input style={{marginTop: '6px'}} type="text" value={reasons[index]} onChange={(e) => {const newReasons = [...reasons];newReasons[index] = e.target.value;setReasons(newReasons);}} placeholder="Enter your input here" className="input_medium" />
-                                </div>
-                            )}
-                            {denied[index] ? (
-                                <div style={{ display: "inline-flex", marginTop: '16px',gap: '8px' }}>
-                                    <button onClick={() => handleDeny(index)} className="secondary_button"><Image width={12} height={12} src="/images/undo.svg" alt="check-icon" /><span className={styles.text_12_n}>Go Back</span></button>
-                                    <button onClick={() => handleSelection(index, false, action.id)} className="secondary_button" style={{ marginLeft: "4px", padding: "5px", background: "transparent", border: "none" }}><span className={styles.text_12_n}>Proceed to Deny</span></button>
-                                </div>
-                            ) : (
-                                <div style={{ display: "inline-flex", marginTop: '16px',gap: '8px'  }}>
-                                    <button onClick={() => handleSelection(index, true, action.id)} className="secondary_button"><Image width={12} height={12} src="/images/check.svg" alt="check-icon" /><span className={styles.text_12_n}>Approve</span></button>
-                                    <button onClick={() => handleDeny(index)} className="secondary_button" style={{ marginLeft: "4px", padding: "5px", background: "transparent", border: "none" }}><Image width={16} height={16} src="/images/close.svg" alt="close-icon" /><div className={styles.text_12_n}>Deny</div></button>
-                                </div>
-                            )}
-                        </div>
-                        <div style={{ display: "flex", alignItems: "center", paddingLeft: "0", paddingBottom: "0" }} className={styles.tab_text}>
-                            <div>
-                                <Image width={12} height={12} src="/images/schedule.svg" alt="schedule-icon" />
-                            </div>
-                            <div className={styles.history_info}>{formatDate(action.created_at)}</div>
-                        </div>
-                    </div>
-                ))}
-            </div>):
-                (
-                    <div style={{display:'flex',flexDirection:'column',alignItems:'center',marginTop:'40px'}}>
-                        <Image width={150} height={60} src="/images/no_permissions.svg" alt="no permissions" />
-                        <span className={styles.feed_title} style={{marginTop: '8px'}}>No Actions to Display!</span>
-                    </div>)}
-        </>
+      <>
+          {actions?.some((action) => action.status === 'PENDING') ? (
+            <div className={styles.detail_body} style={{ height: 'auto' }}>
+                {actions.map((action, index) => {
+                    if (action.status === 'PENDING' && !hiddenActions.includes(index)) {
+                        return (<ActionBox key={action.id} action={action} index={index} denied={denied} setReasons={setReasons}
+                            reasons={reasons} handleDeny={handleDeny} handleSelection={handleSelection}/>);
+                    }
+                    return null;
+                })}
+            </div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: '40px' }}>
+                <Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions" />
+                <span className={styles.feed_title} style={{ marginTop: '8px' }}>No Actions to Display!</span>
+            </div>
+          )}
+      </>
     );
-}
+}

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(() => {

gui/pages/Content/Agents/AgentCreate.js

@@ -685,7 +685,7 @@ export default function AgentCreate({sendAgentData, selectedProjectId, fetchAgen
                   <div className="custom_select_container" onClick={() => setPermissionDropdown(!permissionDropdown)} style={{width:'100%'}}>
                     {permission}<Image width={20} height={21} src={!permissionDropdown ? '/images/dropdown_down.svg' : '/images/dropdown_up.svg'} alt="expand-icon"/>
                   </div>
-                  <div>
+                  <div style={{marginBottom: '20px'}}>
                     {permissionDropdown && <div className="custom_select_options" ref={permissionRef} style={{width:'100%'}}>
                       {permissions.map((permit, index) => (<div key={index} className="custom_select_option" onClick={() => handlePermissionSelect(index)} style={{padding:'12px 14px',maxWidth:'100%'}}>
                         {permit}

gui/pages/Content/Agents/AgentTemplatesList.js

@@ -48,8 +48,8 @@ export default function AgentTemplatesList({sendAgentData, selectedProjectId, fe
                     </div>
                 </div>
                 <div className={styles.rowContainer} style={{maxHeight: '78vh',overflowY: 'auto',marginTop:'10px',marginLeft:'3px'}}>
-                    {agentTemplates.length > 0 ? <div className={styles.resources} style={agentTemplates.length === 1 ? {justifyContent:'flex-start',gap:'7px'} : {}}>
-                        {agentTemplates.map((item, index) => (
+                    {agentTemplates.length > 0 ? <div className={styles.resources}>
+                        {agentTemplates.map((item) => (
                             <div className={styles.market_tool} key={item.id} style={{cursor: 'pointer',height:'90px'}}
                                  onClick={() => handleTemplateClick(item)}>
                                 <div style={{display: 'inline',overflow:'auto'}}>
@@ -61,7 +61,7 @@ export default function AgentTemplatesList({sendAgentData, selectedProjectId, fe
                         <div className={styles.market_tool} style={{cursor: 'pointer',height:'90px',background:'#413C4F'}}
                              onClick={openMarketplace}>
                             <div style={{display: 'inline',overflow:'auto'}}>
-                                <div style={{display:'flex',justifyContent:'space-between'}}>
+                                <div style={{display:'flex',justifyContent:'flex-start',gap:'0.3vw'}}>
                                     <div style={{order:'0'}}><Image style={{marginTop:'-3px'}} width={16} height={16} src="/images/marketplace.svg" alt="arrow-outward"/>&nbsp;&nbsp;Browse templates from marketplace</div>
                                     <div style={{order:'1'}}><Image style={{marginTop:'-3px'}} width={16} height={16} src="/images/arrow_outward.svg" alt="arrow-outward"/></div>
                                 </div>