Add command list to front end

Commands.py

@@ -3,6 +3,7 @@
 import glob
 from inspect import signature, Parameter
 from Config import Config
+
 class Commands:
     def __init__(self):
         self.CFG = Config()
@@ -49,4 +50,9 @@ def find_command(self, command_name: str):
             if name == command_name:
                 command_function = getattr(self, function_name)
                 return command_function, params
-        return None, None
+        return None, None
+
+    def get_commands_list(self):
+        self.commands = self.load_commands()
+        commands_list = [command_name for command_name, _, _ in self.commands]
+        return commands_list

app.py

@@ -7,6 +7,7 @@
 from Config import Config
 from flask_restful import Api, Resource
 from flask_swagger_ui import get_swaggerui_blueprint
+from Commands import Commands
 
 CFG = Config()
 app = Flask(__name__)
@@ -57,7 +58,7 @@ def delete(self, agent_name):
         if os.path.exists(agent_folder):
             shutil.rmtree(agent_folder)
 
-        return jsonify({"message": f"Agent {agent_name} deleted."}), 200
+        return {"message": f"Agent {agent_name} deleted."}, 200
 
 class GetAgents(Resource):
     def get(self):
@@ -130,6 +131,12 @@ def post(self):
         result = babyagi_instance.execution_agent(objective, task)
         return jsonify({"result": result}), 200
 
+class GetCommands(Resource):
+    def get(self):
+        commands = Commands()
+        commands_list = commands.get_commands_list()
+        return jsonify({"commands": commands_list}, 200)
+
 api.add_resource(AddAgent, '/api/add_agent/<string:agent_name>')
 api.add_resource(DeleteAgent, '/api/delete_agent/<string:agent_name>')
 api.add_resource(GetAgents, '/api/get_agents')
@@ -141,6 +148,7 @@ def post(self):
 api.add_resource(CreateTask, '/api/create_task')
 api.add_resource(PrioritizeTasks, '/api/prioritize_tasks')
 api.add_resource(ExecuteTask, '/api/execute_task')
+api.add_resource(GetCommands, '/api/get_commands')
 
 if __name__ == '__main__':
     app.run(debug=True)

frontend/src/AgentControls.js

@@ -20,7 +20,7 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent }) => {
 
   async function getBaseURI() {
     try {
-      const response = await fetch("http://127.0.0.1:5000");
+      const response = await fetch("http://127.0.0.1:5000/api/docs");
       if (response.ok) {
         return "http://127.0.0.1:5000";
       }

frontend/src/App.js

@@ -1,5 +1,12 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { Container, Box, Grid } from "@mui/material";
+import {
+  Container,
+  Box,
+  Grid,
+  List,
+  ListItem,
+  Typography,
+} from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import AgentList from "./AgentList";
@@ -16,48 +23,65 @@ const themeGenerator = (darkMode) =>
     },
   });
 
-  function App() {
-    const [darkMode, setDarkMode] = useState(false);
-    const [agents, setAgents] = useState([]);
-    const [selectedAgent, setSelectedAgent] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [baseURI, setBaseURI] = useState("");
-
-    async function getBaseURI() {
-      try {
-        const response = await fetch("http://127.0.0.1:5000/api/docs");
-        if (response.ok) {
-          return "http://127.0.0.1:5000";
-        }
-      } catch (error) {
-        console.warn("Local endpoint not accessible:", error);
+function App() {
+  const [darkMode, setDarkMode] = useState(false);
+  const [agents, setAgents] = useState([]);
+  const [commands, setCommands] = useState([]);
+  const [selectedAgent, setSelectedAgent] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [baseURI, setBaseURI] = useState("");
+
+  async function getBaseURI() {
+    try {
+      const response = await fetch("http://127.0.0.1:5000/api/docs");
+      if (response.ok) {
+        return "http://127.0.0.1:5000";
       }
-      return "";
+    } catch (error) {
+      console.warn("Local endpoint not accessible:", error);
     }
-
-    useEffect(() => {
-      async function setURI() {
-        setBaseURI(await getBaseURI());
-      }
-      setURI();
-    }, []);
-
-    const fetchAgents = useCallback(async () => {
-      setLoading(true);
-      try {
-        const response = await fetch(`${baseURI}/api/get_agents`);
-        const data = await response.json();
-        setAgents(data.agents);
-        setSelectedAgent(data.agents[0]);
-      } catch (error) {
-        console.error("Error fetching agents:", error);
-      }
-      setLoading(false);
-    }, [baseURI]);
-
-    useEffect(() => {
-      fetchAgents();
-    }, [fetchAgents]);  
+    return "";
+  }
+
+  useEffect(() => {
+    async function setURI() {
+      setBaseURI(await getBaseURI());
+    }
+    setURI();
+  }, []);
+
+  const fetchAgents = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await fetch(`${baseURI}/api/get_agents`);
+      const data = await response.json();
+      setAgents(data.agents);
+      setSelectedAgent(data.agents[0]);
+    } catch (error) {
+      console.error("Error fetching agents:", error);
+    }
+    setLoading(false);
+  }, [baseURI]);
+
+  useEffect(() => {
+    fetchAgents();
+  }, [fetchAgents]);
+
+  const fetchCommands = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await fetch(`${baseURI}/api/get_commands`);
+      const data = await response.json();
+      setCommands(data[0].commands);
+    } catch (error) {
+      console.error("Error fetching commands:", error);
+    }
+    setLoading(false);
+  }, [baseURI]);
+
+  useEffect(() => {
+    fetchCommands();
+  }, [fetchCommands]);
 
   const handleToggleDarkMode = useCallback(() => {
     setDarkMode((prevDarkMode) => !prevDarkMode);
@@ -106,7 +130,27 @@ const themeGenerator = (darkMode) =>
       <Container maxWidth="lg">
         <Box sx={{ my: 4, display: "flex" }}>
           <Grid container spacing={2}>
-            <Grid item xs={12} sm={4}>
+            <Grid item xs={3}>
+              <Typography variant="h6" gutterBottom>
+                Available Commands:
+              </Typography>
+              <List dense>
+                {commands &&
+                  commands.map((command, index) => (
+                    <ListItem key={index}>
+                      <Typography>{command}</Typography>
+                    </ListItem>
+                  ))}
+              </List>
+            </Grid>
+            <Grid item xs={6}>
+              <AgentControls
+                darkMode={darkMode}
+                handleToggleDarkMode={handleToggleDarkMode}
+                selectedAgent={selectedAgent}
+              />
+            </Grid>
+            <Grid item xs={3}>
               <AgentList
                 agents={agents}
                 selectedAgent={selectedAgent}
@@ -116,18 +160,11 @@ const themeGenerator = (darkMode) =>
                 loading={loading}
               />
             </Grid>
-            <Grid item xs={12} sm={8}>
-              <AgentControls
-                darkMode={darkMode}
-                handleToggleDarkMode={handleToggleDarkMode}
-                selectedAgent={selectedAgent}
-              />
-            </Grid>
           </Grid>
         </Box>
       </Container>
     </ThemeProvider>
   );
 }
 
-export default App;
+export default App;

static/swagger.json

@@ -256,7 +256,27 @@
           }
         }
       }
+    },
+    "/api/get_commands": {
+      "get": {
+        "summary": "Get commands",
+        "responses": {
+          "200": {
+            "description": "List of commands.",
+            "schema": {
+              "type": "object",
+              "properties": {
+                "commands": {
+                  "type": "array",
+                  "items": {
+                    "type": "string"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
   }
-}
-
+}