Merge pull request #165 from kreneskyp/agent_editor_errors_mvp

Agent editor errors mvp
kreneskyp · Aug 16, 2023 · dfdd6c9 · dfdd6c9
2 parents 6d29eea + 58547df
commit dfdd6c9
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 5 deletions.
diff --git a/frontend/agents/AgentEditor.js b/frontend/agents/AgentEditor.js
@@ -14,6 +14,7 @@ import { AgentGeneralEditor } from "agents/AgentGeneralEditor";
 import { AgentMetricsPanel } from "agents/AgentMetricsPanel";
 import { useNavigate, useParams } from "react-router-dom";
 import { useCreateUpdateAPI } from "utils/hooks/useCreateUpdateAPI";
+import { APIErrorList } from "components/APIErrorList";
 
 export const AgentEditor = ({ agent, chains }) => {
   const { id } = useParams();
@@ -43,7 +44,7 @@ export const AgentEditor = ({ agent, chains }) => {
     } catch (error) {
       toast({
         title: "Error",
-        description: `Failed to save the agent: ${error}`,
+        description: <APIErrorList error={error} />,
         status: "error",
         duration: 5000,
         isClosable: true,

diff --git a/frontend/agents/AgentGeneralEditor.js b/frontend/agents/AgentGeneralEditor.js
@@ -9,6 +9,7 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 import { AGENT_MODELS } from "chains/constants";
+import { RequiredAsterisk } from "components/RequiredAsterisk";
 
 export const AgentGeneralEditor = ({ agentData, setAgentData, chains }) => {
   const ModelConfigForm = AGENT_MODELS[agentData?.model]?.configComponent;
@@ -23,14 +24,18 @@ export const AgentGeneralEditor = ({ agentData, setAgentData, chains }) => {
   return (
     <VStack spacing={4}>
       <FormControl>
-        <FormLabel>Agent Name</FormLabel>
+        <FormLabel>
+          Agent Name <RequiredAsterisk />
+        </FormLabel>
         <Input
           placeholder="Model"
           value={agentData?.name || ""}
           p={5}
           onChange={(e) => setAgentData({ ...agentData, name: e.target.value })}
         />
-        <FormLabel>Alias (chat tag)</FormLabel>
+        <FormLabel>
+          Alias (chat tag) <RequiredAsterisk />
+        </FormLabel>
         <Input
           placeholder="alias"
           value={agentData?.alias || ""}
@@ -39,7 +44,9 @@ export const AgentGeneralEditor = ({ agentData, setAgentData, chains }) => {
             setAgentData({ ...agentData, alias: e.target.value })
           }
         />
-        <FormLabel>Purpose</FormLabel>
+        <FormLabel>
+          Purpose <RequiredAsterisk />
+        </FormLabel>
         <Input
           placeholder="Purpose"
           value={agentData?.purpose || ""}
@@ -48,7 +55,9 @@ export const AgentGeneralEditor = ({ agentData, setAgentData, chains }) => {
           }
         />
         <Divider my={10} />
-        <FormLabel>Chain</FormLabel>
+        <FormLabel>
+          Chain <RequiredAsterisk />
+        </FormLabel>
         <Box p={5} my={5} bg="blackAlpha.300">
           The agent's chain is called in response to inputs. The chain defines
           the behavior and capabilities of the agent.

diff --git a/frontend/components/APIErrorList.js b/frontend/components/APIErrorList.js
@@ -0,0 +1,29 @@
+import { Box, List, ListItem, Text } from "@chakra-ui/react";
+import React from "react";
+
+export const APIErrorList = ({ error }) => {
+  const extractErrors = (axiosError) => {
+    return axiosError.response.data.detail
+      .map((error) => {
+        if (error.loc && error.msg) {
+          let field = error.loc[1];
+          return `'${field}' field is ${error.msg}.`;
+        }
+        return null;
+      })
+      .filter((message) => message); // Filter out any null values
+  };
+
+  const errorMessages = extractErrors(error);
+
+  return (
+    <Box>
+      <Text mb={2}>Failed to save the agent due to the following errors:</Text>
+      <List spacing={1}>
+        {errorMessages.map((msg, index) => (
+          <ListItem key={index}>- {msg}</ListItem>
+        ))}
+      </List>
+    </Box>
+  );
+};
diff --git a/frontend/components/RequiredAsterisk.js b/frontend/components/RequiredAsterisk.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { Text } from "@chakra-ui/react";
+import { useColorMode } from "@chakra-ui/color-mode";
+
+export const RequiredAsterisk = () => {
+  const { colorMode } = useColorMode();
+  const color = colorMode === "light" ? "red.500" : "red.200";
+  return (
+    <Text as="span" color={color}>
+      *
+    </Text>
+  );
+};