From 7451899af8c0b841a993314177af0abb58d0be56 Mon Sep 17 00:00:00 2001
From: Josh XT <josh@devxt.com>
Date: Tue, 18 Apr 2023 17:56:57 -0400
Subject: [PATCH] Front end commands list added

---
 frontend/src/AgentCommandsList.js | 30 +++++++++++
 frontend/src/AgentControls.js     | 71 +++++++++++++++-----------
 frontend/src/App.js               | 82 ++++++++++++++++++-------------
 3 files changed, 118 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/AgentCommandsList.js

diff --git a/frontend/src/AgentCommandsList.js b/frontend/src/AgentCommandsList.js
new file mode 100644
index 000000000000..3aedafca64ea
--- /dev/null
+++ b/frontend/src/AgentCommandsList.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { List, ListItem, ListItemButton, Typography } from '@mui/material';
+
+const AgentCommandsList = ({ commands, tabValue, setObjective, setInstruction }) => {
+  const handleCommandClick = (command, setText) => {
+    setText((prevText) => prevText + command + " for ");
+  };
+
+  return (
+    <List dense>
+      {commands &&
+        commands.map((command, index) => (
+          <ListItem key={index} disablePadding>
+            <ListItemButton
+              onClick={() =>
+                handleCommandClick(
+                  command,
+                  tabValue === 0 ? setObjective : setInstruction
+                )
+              }
+            >
+              <Typography variant="body2">{command}</Typography>
+            </ListItemButton>
+          </ListItem>
+        ))}
+    </List>
+  );
+};
+
+export default AgentCommandsList;
\ No newline at end of file
diff --git a/frontend/src/AgentControls.js b/frontend/src/AgentControls.js
index 1f6edb77f83e..8c759330593f 100644
--- a/frontend/src/AgentControls.js
+++ b/frontend/src/AgentControls.js
@@ -8,10 +8,22 @@ import {
   Tab,
   Tabs,
 } from "@mui/material";
+import AgentCommandsList from "./AgentCommandsList";
 
-const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent, setChatHistory, chatHistory }) => {
-  const [objective, setObjective] = useState("");
-  const [tabValue, setTabValue] = useState(0);
+const AgentControls = ({
+  darkMode,
+  handleToggleDarkMode,
+  selectedAgent,
+  setChatHistory,
+  chatHistory,
+  commands,
+  tabValue,
+  setTabValue,
+  objective,
+  setObjective,
+  instruction,
+  setInstruction,
+}) => {
   const [baseURI, setBaseURI] = useState("");
 
   async function getBaseURI() {
@@ -104,35 +116,17 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent, setChatH
     ]);
   };
 
-  const InstructionInput = (props) => {
-    const [instruction, setInstruction] = useState("");
-
-    const handleInstructionChange = (event) => {
-      setInstruction(event.target.value);
-    };
-
-    const handleKeyPress = async (event) => {
-      if (event.key === "Enter") {
-        event.preventDefault();
-        await InstructAgent(instruction);
-        setInstruction("");
-      }
-    };
-
-    return (
-      <TextField
-        {...props}
-        value={instruction}
-        onChange={handleInstructionChange}
-        onKeyPress={handleKeyPress}
-      />
-    );
+  const handleKeyPress = async (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      await InstructAgent(instruction);
+      setInstruction("");
+    }
   };
 
   const handleSendInstruction = async () => {
-    const instructionInput = document.getElementById("instructionInput");
-    await InstructAgent(instructionInput.value);
-    instructionInput.value = "";
+    await InstructAgent(instruction);
+    setInstruction("");
   };
 
   return (
@@ -162,11 +156,14 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent, setChatH
       )}
       {tabValue === 1 && (
         <>
-          <InstructionInput
+          <TextField
             fullWidth
             label="Enter Instruction"
             placeholder="Type instruction"
             id="instructionInput"
+            value={instruction}
+            onChange={(e) => setInstruction(e.target.value)}
+            onKeyPress={handleKeyPress}
             sx={{ mb: 2 }}
           />
           <Button
@@ -194,6 +191,20 @@ const AgentControls = ({ darkMode, handleToggleDarkMode, selectedAgent, setChatH
           ))}
         </Paper>
       </Box>
+      <AgentCommandsList
+        commands={commands}
+        tabValue={tabValue}
+        setObjective={setObjective}
+        setInstruction={setInstruction}
+        objective={objective}
+        instruction={instruction}
+      />
+      <AgentCommandsList
+        commands={commands}
+        tabValue={tabValue}
+        setObjective={setObjective}
+        setInstruction={setInstruction}
+      />
     </>
   );
 };
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 5a8c8e64618e..e87a3ecefdb2 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -3,8 +3,6 @@ import {
   Container,
   Box,
   Grid,
-  List,
-  ListItem,
   Typography,
 } from "@mui/material";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
@@ -12,6 +10,7 @@ import CssBaseline from "@mui/material/CssBaseline";
 import AgentList from "./AgentList";
 import AgentControls from "./AgentControls";
 import AppHeader from "./AppHeader";
+import AgentCommandsList from "./AgentCommandsList";
 
 const themeGenerator = (darkMode) =>
   createTheme({
@@ -31,6 +30,10 @@ function App() {
   const [loading, setLoading] = useState(false);
   const [baseURI, setBaseURI] = useState("");
   const [chatHistory, setChatHistory] = useState([]);
+  const [tabValue, setTabValue] = useState(0);
+  const [objective, setObjective] = useState("");
+  const [instruction, setInstruction] = useState("");
+
   async function getBaseURI() {
     try {
       const response = await fetch("http://127.0.0.1:5000/api/docs");
@@ -129,40 +132,49 @@ function App() {
       <AppHeader darkMode={darkMode} handleToggleDarkMode={handleToggleDarkMode} />
       <Container maxWidth="lg">
         <Box sx={{ my: 4, display: "flex" }}>
-        <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 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}
+                tabValue={tabValue}
+                setTabValue={setTabValue}
+                objective={objective}
+                setObjective={setObjective}
+                instruction={instruction}
+                setInstruction={setInstruction}
+              />
+            </Grid>
+            <Grid item xs={3}>
+              <Typography variant="h6" gutterBottom>
+                Available Commands:
+              </Typography>
+              <Typography variant="body2" gutterBottom>
+                Click on a command to insert it in the textbox.
+              </Typography>
+              <AgentCommandsList
+                commands={commands}
+                tabValue={tabValue}
+                setObjective={setObjective}
+                setInstruction={setInstruction}
+                objective={objective}
+                instruction={instruction}
+              />
+            </Grid>
           </Grid>
-        </Grid>
         </Box>
       </Container>
     </ThemeProvider>