type fixes

src/components/inputs/mission_tasks_editor.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Mission } from "@/types/mission";
 import { Task } from "@/types/task";
 import React, { useState } from "react";
@@ -20,7 +22,7 @@ const MissionTaskEditor: React.FC<MissionTaskEditorProps> = ({
     const newTask: Task = {
       name: newTaskName,
       description: newTaskDescription,
-      agent: "",
+      agent: null,
     };
     const updatedTasks = [...mission.tasks, newTask];
     const updatedMission: Mission = { ...mission, tasks: updatedTasks };
@@ -54,7 +56,7 @@ const MissionTaskEditor: React.FC<MissionTaskEditorProps> = ({
           <div className="ml-3">
             <strong>Agent: </strong>
             <span className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1 sm:w-1/2">
-              {task.agent}
+              {task.agent?.role}
             </span>
           </div>
         </div>
@@ -91,8 +93,8 @@ const MissionTaskEditor: React.FC<MissionTaskEditorProps> = ({
               data={[
                 { text: "None", value: "None" },
                 ...mission.crew.map((agent) => ({
-                  text: agent,
-                  value: agent,
+                  text: agent.role,
+                  value: agent.id,
                 })),
               ]}
               onValueChange={(event: any) => {

src/components/modals/agent_modal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { tools } from "@/data/data";
 import { Agent } from "@/types/agent";
 import { Icon } from "@iconify/react";
@@ -92,7 +94,7 @@ export default function AgentModal(props: {
                     {isEdit ? (
                       <TETextarea
                         rows={4}
-                        value={tempAgent?.backstory}
+                        value={tempAgent?.backstory || ""}
                         onChange={(event) => {
                           setTempAgent((prevState) => ({
                             ...prevState!,
@@ -175,7 +177,7 @@ export default function AgentModal(props: {
                     </>
                   ) : (
                     <img
-                      src={agent?.image}
+                      src={agent?.image ?? "/sailor.png"}
                       alt="Software Engineer"
                       className="w-full rounded-lg"
                     />

src/components/modals/mission_modal.tsx

@@ -38,7 +38,7 @@ export default function MissionModal(props: {
 
   useEffect(() => {
     initTE({ Collapse });
-  });
+  }, []);
 
   return (
     <div>
@@ -86,7 +86,7 @@ export default function MissionModal(props: {
                         value: agent.role,
                       }))}
                       multiple
-                      value={tempMission?.crew ?? []}
+                      value={tempMission?.crew.map((agent) => agent.role) ?? []}
                       onValueChange={(event: any) => {
                         const newValue = event.map((item: any) => item.value);
                         setTempMission((prevState) => ({
@@ -102,7 +102,7 @@ export default function MissionModal(props: {
                           key={i}
                           className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1 sm:w-1/2"
                         >
-                          {agent}
+                          {agent.role}
                         </div>
                       </>
                     ))
@@ -129,14 +129,14 @@ export default function MissionModal(props: {
                   {isEdit ? (
                     <TESelect
                       data={[
-                        { text: "Sequential", value: "sequential" },
-                        { text: "Hierarchical", value: "hierarchical" },
+                        { text: "SEQUENTIAL", value: "SEQUENTIAL" },
+                        { text: "HIERARCHICAL", value: "HIERARCHICAL" },
                       ]}
                       value={tempMission?.process}
                       onValueChange={(event: any) => {
                         setTempMission((prevState) => ({
                           ...prevState!,
-                          process: event.value,
+                          process: event?.value,
                         }));
                       }}
                       className="dark:text-black"
@@ -172,7 +172,7 @@ export default function MissionModal(props: {
                                 <div className="ml-3">
                                   <strong>Agent: </strong>
                                   <span className="bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-semibold m-1 sm:w-1/2">
-                                    {task.agent}
+                                    {task.agent?.role}
                                   </span>
                                 </div>
                               }