From 831c22187d9d378d166b41c08a0396dbacb9b091 Mon Sep 17 00:00:00 2001
From: Josh XT <josh@devxt.com>
Date: Tue, 18 Apr 2023 16:48:40 -0400
Subject: [PATCH] Front end QOL

---
 app.py                        | 18 +++++-----
 frontend/src/AgentControls.js | 38 ++++++++++----------
 frontend/src/App.js           | 68 ++++++++++++++++++-----------------
 frontend/src/AppHeader.js     | 26 ++++++++++++--
 4 files changed, 87 insertions(+), 63 deletions(-)

diff --git a/app.py b/app.py
index 78c0cc23d312..c92ff1ea19d8 100644
--- a/app.py
+++ b/app.py
@@ -75,7 +75,7 @@ def get(self, agent_name):
         agent.CFG.AGENT_NAME = agent_name
         with open(os.path.join("memories", f"{agent_name}.yaml"), "r") as f:
             chat_history = f.read()
-        return jsonify({"chat_history": chat_history}), 200
+        return {"chat_history": chat_history}, 200
 
 class Instruct(Resource):
     def post(self):
@@ -87,27 +87,27 @@ def post(self):
         agent.CFG.AI_PROVIDER = data["ai_provider"]
         agent.CFG.OPENAI_API_KEY = data["openai_api_key"]
         response = agent.run(objective, max_context_tokens=500, long_term_access=False)
-        return jsonify({"response": str(response)}), 200
+        return {"response": str(response)}, 200
 
 class SetObjective(Resource):
     def post(self):
         objective = request.json.get("objective")
         babyagi_instance.set_objective(objective)
-        return jsonify({"message": "Objective updated"}), 200
+        return {"message": "Objective updated"}, 200
 
 class AddInitialTask(Resource):
     def post(self):
         babyagi_instance.add_initial_task()
-        return jsonify({"message": "Initial task added"}), 200
+        return {"message": "Initial task added"}, 200
 
 class ExecuteNextTask(Resource):
     def get(self):
         task = babyagi_instance.execute_next_task()
         task_list = list(babyagi_instance.task_list)
         if task:
-            return jsonify({"task": task, "result": babyagi_instance.response, "task_list": task_list}), 200
+            return {"task": task, "result": babyagi_instance.response, "task_list": task_list}, 200
         else:
-            return jsonify({"message": "All tasks complete"}), 200
+            return {"message": "All tasks complete"}, 200
 
 class CreateTask(Resource):
     def post(self):
@@ -116,20 +116,20 @@ def post(self):
         task_description = request.json.get("task_description")
         task_list = request.json.get("task_list")
         new_tasks = babyagi_instance.task_creation_agent(objective, result, task_description, task_list)
-        return jsonify({"new_tasks": new_tasks}), 200
+        return {"new_tasks": new_tasks}, 200
 
 class PrioritizeTasks(Resource):
     def post(self):
         task_id = request.json.get("task_id")
         babyagi_instance.prioritization_agent(task_id)
-        return jsonify({"task_list": babyagi_instance.task_list}), 200
+        return {"task_list": babyagi_instance.task_list}, 200
 
 class ExecuteTask(Resource):
     def post(self):
         objective = request.json.get("objective")
         task = request.json.get("task")
         result = babyagi_instance.execution_agent(objective, task)
-        return jsonify({"result": result}), 200
+        return {"result": result}, 200
 
 class GetCommands(Resource):
     def get(self):
diff --git a/frontend/src/AgentControls.js b/frontend/src/AgentControls.js
index f977db04f42e..1f6edb77f83e 100644
--- a/frontend/src/AgentControls.js
+++ b/frontend/src/AgentControls.js
@@ -5,16 +5,12 @@ import {
   Paper,
   TextField,
   Button,
-  Switch,
-  FormGroup,
-  FormControlLabel,
   Tab,
   Tabs,
 } from "@mui/material";
 
-const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent }) => {
+const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent, setChatHistory, chatHistory }) => {
   const [objective, setObjective] = useState("");
-  const [chatHistory, setChatHistory] = useState([]);
   const [tabValue, setTabValue] = useState(0);
   const [baseURI, setBaseURI] = useState("");
 
@@ -39,7 +35,7 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent }) => {
 
   const run = async () => {
     // Set the objective
-    await fetch(`${baseURI}/api/set_objective`, {
+    const setObjResponse = await fetch(`${baseURI}/api/set_objective`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -47,6 +43,13 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent }) => {
       body: JSON.stringify({ objective }),
     });
   
+    const setObjData = await setObjResponse.json();
+    setChatHistory((prevChatHistory) => [
+      ...prevChatHistory,
+      `Setting Objective: ${objective}`,
+      `Endpoint Response: ${JSON.stringify(setObjData)}`,
+    ]);
+  
     while (true) {
       // Execute the next task
       const response = await fetch(`${baseURI}/api/execute_next_task`);
@@ -65,12 +68,12 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent }) => {
         `*****TASK LIST*****\n${data.task_list.map((task, index) => `${index + 1}. ${task.task_name}`).join('\n')}`,
         `*****NEXT TASK*****\n${data.task.task_id}: ${data.task.task_name}`,
         `*****RESULT*****\n${data.result}`,
-      ]);    
+        `Endpoint Response: ${JSON.stringify(data)}`, // Add this line to log the endpoint response
+      ]);
   
       await new Promise((resolve) => setTimeout(resolve, 1000)); // Sleep for 1 second
     }
   };
-
   const handleTabChange = (event, newValue) => {
     setTabValue(newValue);
   };
@@ -134,14 +137,6 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent }) => {
 
   return (
     <>
-      <FormGroup>
-        <FormControlLabel
-          control={
-            <Switch checked={darkMode} onChange={handleToggleDarkMode} />
-          }
-          label="Toggle Dark Mode"
-        />
-      </FormGroup>
       <Tabs value={tabValue} onChange={handleTabChange}>
         <Tab label="Task Manager" />
         <Tab label="Instruct" />
@@ -155,7 +150,12 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent }) => {
             onChange={(e) => setObjective(e.target.value)}
             sx={{ mb: 2 }}
           />
-          <Button variant="contained" color="primary" onClick={run} fullWidth>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => run(selectedAgent)}
+            fullWidth
+          >
             Start Task
           </Button>
         </>
@@ -188,9 +188,9 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent }) => {
           style={{ padding: "16px", maxHeight: "300px", overflowY: "auto" }}
         >
           {chatHistory.map((message, index) => (
-            <Typography key={index} gutterBottom>
+            <pre key={index} style={{ margin: 0, whiteSpace: "pre-wrap" }}>
               {message}
-            </Typography>
+            </pre>
           ))}
         </Paper>
       </Box>
diff --git a/frontend/src/App.js b/frontend/src/App.js
index d653de4f78d2..5a8c8e64618e 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -30,7 +30,7 @@ function App() {
   const [selectedAgent, setSelectedAgent] = useState(null);
   const [loading, setLoading] = useState(false);
   const [baseURI, setBaseURI] = useState("");
-
+  const [chatHistory, setChatHistory] = useState([]);
   async function getBaseURI() {
     try {
       const response = await fetch("http://127.0.0.1:5000/api/docs");
@@ -126,41 +126,43 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <AppHeader />
+      <AppHeader darkMode={darkMode} handleToggleDarkMode={handleToggleDarkMode} />
       <Container maxWidth="lg">
         <Box sx={{ my: 4, display: "flex" }}>
-          <Grid container spacing={2}>
-            <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}
-                setSelectedAgent={setSelectedAgent}
-                handleAddAgent={handleAddAgent}
-                handleDeleteAgent={handleDeleteAgent}
-                loading={loading}
-              />
-            </Grid>
+        <Grid container spacing={2}>
+          <Grid item xs={3}>
+            <AgentList
+              agents={agents}
+              selectedAgent={selectedAgent}
+              setSelectedAgent={setSelectedAgent}
+              handleAddAgent={handleAddAgent}
+              handleDeleteAgent={handleDeleteAgent}
+              loading={loading}
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <AgentControls
+              darkMode={darkMode}
+              handleToggleDarkMode={handleToggleDarkMode}
+              selectedAgent={selectedAgent}
+              setChatHistory={setChatHistory}
+              chatHistory={chatHistory}
+            />
+          </Grid>
+          <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>
         </Box>
       </Container>
     </ThemeProvider>
diff --git a/frontend/src/AppHeader.js b/frontend/src/AppHeader.js
index 70d0e14c4971..35e9c9e68260 100644
--- a/frontend/src/AppHeader.js
+++ b/frontend/src/AppHeader.js
@@ -1,13 +1,35 @@
 import React from "react";
-import { AppBar, Toolbar, Typography } from "@mui/material";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  FormGroup,
+  FormControlLabel,
+  Switch,
+} from "@mui/material";
+
+const AppHeader = ({ darkMode, handleToggleDarkMode }) => {
+  const handleClick = (e) => {
+    e.stopPropagation();
+  };
 
-const AppHeader = () => {
   return (
     <AppBar position="static">
       <Toolbar>
         <Typography variant="h6" component="div">
           Agent-LLM
         </Typography>
+        <div style={{ marginLeft: "auto" }}>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch checked={darkMode} onChange={handleToggleDarkMode} />
+              }
+              label="Toggle Dark Mode"
+              onClick={handleClick}
+            />
+          </FormGroup>
+        </div>
       </Toolbar>
     </AppBar>
   );