update task list

Author: Fr4nc3

src/frontend_react/src/components/content/TaskDetails.tsx

@@ -25,14 +25,15 @@ import "../../styles/TaskDetails.css";
 
 const TaskDetails: React.FC<TaskDetailsProps> = ({
     planData,
+    loading,
     OnApproveStep,
     OnRejectStep,
 }) => {
-    const completedCount = planData.plan.completed || 0;
-    const total = planData.plan.total_steps || 1;
+    const completedCount = planData?.plan.completed || 0;
+    const total = planData?.plan.total_steps || 1;
     const subTasks = planData.steps || [];
     const progress = completedCount / total;
-    const agents = planData.agents || [];
+    const agents = planData?.agents || [];
 
     const renderStatusIcon = (status: string) => {
         switch (status) {
@@ -96,7 +97,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                         const { description } = TaskService.splitSubtaskAction(
                             subtask.action
                         );
-                        const canInteract = !planData.hasHumanClarificationRequest;
+                        const canInteract = planData.plan.human_clarification_response !== null
 
                         return (<div key={subtask.id} className="task-details-subtask-item">
                             <div className="task-details-status-icon">

src/frontend_react/src/components/content/TaskList.tsx

@@ -15,6 +15,10 @@ import { MoreHorizontal20Regular } from "@fluentui/react-icons";
 import React from "react";
 import "../../styles/TaskList.css";
 import { Task, TaskListProps } from "@/models";
+import CoralAccordion from "@/coral/components/CoralAccordion/CoralAccordion";
+import CoralAccordionItem from "@/coral/components/CoralAccordion/CoralAccordionItem";
+import CoralAccordionHeader from "@/coral/components/CoralAccordion/CoralAccordionHeader";
+import CoralAccordionPanel from "@/coral/components/CoralAccordion/CoralAccordionPanel";
 
 
 
@@ -56,58 +60,45 @@ const TaskList: React.FC<TaskListProps> = ({
       </div>
     );
   };
+
   const renderSkeleton = (key: string) => (
-    <div
-      key={key}
-      className="task-skeleton-container"
-    >
+    <div key={key} className="task-skeleton-container">
       <Skeleton aria-label="Loading task">
-        <div
-          className="task-skeleton-content"
-        >
+        <div className="task-skeleton-wrapper">
           <SkeletonItem
             shape="rectangle"
             animation="wave"
-            className="task-skeleton-item"
+            size={24}
           />
         </div>
       </Skeleton>
     </div>
   );
 
   return (
-    <Accordion defaultOpenItems={["inprogress"]} collapsible>      <AccordionItem value="inprogress">
-      <AccordionHeader
-        expandIconPosition="end"
-        className="task-accordion-header-in-progress"
-      >
-        <Body1>In progress</Body1>
-      </AccordionHeader>
+    <CoralAccordion>
+      <CoralAccordionItem defaultOpen>
+        <CoralAccordionHeader chevron>In progress</CoralAccordionHeader>
 
-      <AccordionPanel className="task-accordion-panel">
-        {loading && inProgressTasks.length === 0
-          ? [...Array(3)].map((_, i) =>
-            renderSkeleton(`inprogress-skel-${i}`)
-          )
-          : inProgressTasks.map(renderTaskItem)}
-      </AccordionPanel>
-    </AccordionItem>      <AccordionItem value="completed">
-        <AccordionHeader
-          expandIconPosition="end"
-          className="task-accordion-header-completed"
-        >
-          <Body1>Completed</Body1>
-        </AccordionHeader>
+        <CoralAccordionPanel>
+          {loading && inProgressTasks.length === 0
+            ? [...Array(3)].map((_, i) =>
+              renderSkeleton(`inprogress-skel-${i}`)
+            )
+            : inProgressTasks.map(renderTaskItem)}
+        </CoralAccordionPanel>
+      </CoralAccordionItem>
 
-        <AccordionPanel className="task-accordion-panel">
+      <CoralAccordionItem>
+        <CoralAccordionHeader chevron>Completed</CoralAccordionHeader>
+
+        <CoralAccordionPanel>
           {loading && completedTasks.length === 0
-            ? [...Array(2)].map((_, i) =>
-              renderSkeleton(`completed-skel-${i}`)
-            )
+            ? [...Array(2)].map((_, i) => renderSkeleton(`completed-skel-${i}`))
             : completedTasks.map(renderTaskItem)}
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
+        </CoralAccordionPanel>
+      </CoralAccordionItem>
+    </CoralAccordion>
   );
 };