type fixes

src/app/agents/page.tsx

@@ -22,7 +22,7 @@ const AgentsPage = () => {
           >
             <img
               className="block h-auto w-full lg:w-48 flex-none bg-cover"
-              src={agent.image}
+              src={agent.image ?? "/sailor.png"}
               alt="Agent"
             />
             <div className="rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col leading-normal w-100">

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,
+                  text: agent.role,
-                  value: agent,
+                  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: "SEQUENTIAL", value: "SEQUENTIAL" },
-                        { text: "Hierarchical", value: "hierarchical" },
+                        { 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>
                               }

src/data/data.ts

@@ -1,4 +1,5 @@
 import { Agent } from "@/types/agent";
+import { Mission } from "@/types/mission";
 
 export const agents: Array<Agent> = [
   {
@@ -53,76 +54,59 @@ export const tools = [
   { text: "tool5", value: "tool5" },
 ];
 
-export const missions = [
+export const missions: Array<Mission> = [
   {
     name: "Mission1",
-    crew: [
+    crew: agents,
-      "Senior Software Engineer",
-      "Software Quality Control Engineer",
-      "Chief Software Quality Control Engineer",
-    ],
     tasks: [
       {
         name: "Task1",
         description: "description description description description",
-        agent: "Senior Software Engineer",
+        agent: agents[0],
       },
       {
         name: "Task2",
         description: "description description description description",
-        agent: "Chief Software Quality Control Engineer",
       },
     ],
     verbose: true,
-    process: "sequential",
+    process: "SEQUENTIAL",
     result: "",
   },
   {
-    name: "Mission2",
+    name: "Mission1",
-    crew: [
+    crew: agents,
-      "Senior Software Engineer",
-      "Software Quality Control Engineer",
-      "Chief Software Quality Control Engineer",
-    ],
     tasks: [
       {
         name: "Task1",
         description: "description description description description",
-        agent: "Senior Software Engineer",
+        agent: agents[0],
       },
       {
         name: "Task2",
         description: "description description description description",
-        agent: "Chief Software Quality Control Engineer",
       },
     ],
     verbose: true,
-    process: "sequential",
+    process: "SEQUENTIAL",
-    result:
+    result: "result",
-      "result result result result result result result result result result result ",
   },
   {
-    name: "Mission3",
+    name: "Mission1",
-    crew: [
+    crew: agents,
-      "Senior Software Engineer",
-      "Software Quality Control Engineer",
-      "Chief Software Quality Control Engineer",
-    ],
     tasks: [
       {
         name: "Task1",
         description: "description description description description",
-        agent: "Senior Software Engineer",
+        agent: agents[0],
       },
       {
         name: "Task2",
         description: "description description description description",
-        agent: "Chief Software Quality Control Engineer",
       },
     ],
     verbose: true,
-    process: "sequential",
+    process: "SEQUENTIAL",
-    result:
+    result: "result",
-      "result result result result result result result result result result result ",
   },
 ];