fix behavior when click approve or reject

Author: Fr4nc3

src/frontend_react/src/api/apiClient.tsx

@@ -44,8 +44,11 @@ const fetchWithAuth = async (url: string, method: string = "GET", body: BodyInit
 
     try {
         const apiUrl = getApiUrl();
-
-        const response = await fetch(`${apiUrl}${url}`, options);
+        const finalUrl = `${apiUrl}${url}`;
+        console.log('Final URL:', finalUrl);
+        console.log('Request Options:', options);
+        // Log the request details
+        const response = await fetch(finalUrl, options);
         console.log('response', response);
 
         if (!response.ok) {
@@ -54,7 +57,10 @@ const fetchWithAuth = async (url: string, method: string = "GET", body: BodyInit
         }
 
         const isJson = response.headers.get('content-type')?.includes('application/json');
-        return isJson ? await response.json() : null;
+        const responseData = isJson ? await response.json() : null;
+
+        console.log('Response JSON:', responseData);
+        return responseData;
     } catch (error) {
         console.error('API Error:', (error as Error).message);
         throw error;

src/frontend_react/src/api/apiService.tsx

@@ -318,7 +318,7 @@ export class APIService {
      * @param updatedAction Optional updated action
      * @returns Promise with response object
      */
-    async approveSteps(
+    async stepStatus(
         planId: string,
         sessionId: string,
         approved: boolean,

src/frontend_react/src/components/content/PlanChat.tsx

@@ -26,6 +26,7 @@ const PlanChat: React.FC<PlanChatProps> = ({
     planData,
     input,
     loading,
+    submittingChatDisableInput,
     OnChatSubmit
 
 }) => {
@@ -34,7 +35,6 @@ const PlanChat: React.FC<PlanChatProps> = ({
     const [isTyping, setIsTyping] = useState(false);
     const [showScrollButton, setShowScrollButton] = useState(false);
     const [inputHeight, setInputHeight] = useState(0);
-    const [currentConversationId, setCurrentConversationId] = useState<string | undefined>(undefined);
 
     const messagesContainerRef = useRef<HTMLDivElement>(null);
     const inputContainerRef = useRef<HTMLDivElement>(null);
@@ -88,11 +88,7 @@ const PlanChat: React.FC<PlanChatProps> = ({
                     })}
                 </div>
 
-                {isTyping && (
-                    <div className="typing-indicator">
-                        <span>Thinking...</span>
-                    </div>
-                )}
+
             </div>
 
             {showScrollButton && (
@@ -112,14 +108,14 @@ const PlanChat: React.FC<PlanChatProps> = ({
                         value={inputValue}
                         onChange={setInput}
                         onEnter={() => OnChatSubmit(inputValue)}
-                        disabledChat={!planData.enableChat}
+                        disabledChat={planData.enableChat ? submittingChatDisableInput : true}
                         placeholder="Add more info to this task..."
                     >
                         <Button
                             appearance="transparent"
                             onClick={() => OnChatSubmit(inputValue)}
                             icon={<Send />}
-                            disabled={!planData?.enableChat && !inputValue.trim()}
+                            disabled={planData.enableChat ? submittingChatDisableInput : true}
                         />
                     </ChatInput>
                 </div>

src/frontend_react/src/components/content/PlanPanelRight.tsx

@@ -11,6 +11,7 @@ import { TaskDetailsProps } from "@/models";
 const PlanPanelRight: React.FC<TaskDetailsProps> = ({
     planData,
     loading,
+    submittingChatDisableInput,
     OnApproveStep,
     OnRejectStep,
     processingSubtaskId
@@ -30,6 +31,7 @@ const PlanPanelRight: React.FC<TaskDetailsProps> = ({
                     planData={planData}
                     OnApproveStep={OnApproveStep}
                     OnRejectStep={OnRejectStep}
+                    submittingChatDisableInput={submittingChatDisableInput}
                     processingSubtaskId={processingSubtaskId}
                     loading={loading}
                 />

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

@@ -1,6 +1,6 @@
 // TaskDetails.tsx - Merged TSX + Styles
 
-import { TaskDetailsProps } from "@/models";
+import { HumanFeedbackStatus, Step, TaskDetailsProps } from "@/models";
 import {
     Subtitle1,
     Text,
@@ -19,7 +19,7 @@ import {
     CheckboxChecked20Regular,
     DismissSquare20Regular,
 } from "@fluentui/react-icons";
-import React from "react";
+import React, { useState } from "react";
 import { TaskService } from "@/services";
 import PanelRightToolbar from "@/coral/components/Panels/PanelRightToolbar";
 import "../../styles/TaskDetails.css";
@@ -30,10 +30,14 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
     OnApproveStep,
     OnRejectStep,
 }) => {
-    const completedCount = planData?.plan.completed || 0;
-    const total = planData?.plan.total_steps || 1;
-    const subTasks = planData.steps || [];
-    const progress = completedCount / total;
+    const [steps, setSteps] = useState(planData.steps || []);
+    const [completedCCount, setCompletedCount] = useState(
+        planData?.plan.completed || 0
+    );
+    const [total, setTotal] = useState(planData?.plan.total_steps || 1);
+    const [progress, setProgress] = useState(
+        (planData?.plan.completed || 0) / (planData?.plan.total_steps || 1)
+    );
     const agents = planData?.agents || [];
 
     const renderStatusIcon = (status: string) => {
@@ -42,16 +46,76 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
             case 'accepted':
                 return (<CheckmarkCircle20Regular className="status-icon-completed" />
                 );
-            case "planned":
-                return (<CircleHalfFill20Regular className="status-icon-planned" />
-                );
+
             case "rejected":
                 return (<Dismiss20Regular className="status-icon-rejected" />
                 );
+            case "planned":
             default:
-                return null;
+                return (<CircleHalfFill20Regular className="status-icon-planned" />
+                );
+        }
+
+    };
+    // Pre-step function for approval
+    const preOnApproved = async (step: Step) => {
+        try {
+            // Update the specific step's human_approval_status
+            const updatedStep = {
+                ...step,
+                human_approval_status: 'accepted' as HumanFeedbackStatus
+            };
+
+            // Create a new array with the updated step
+            const updatedSteps = steps.map(s =>
+                s.id === step.id ? updatedStep : s
+            );
+
+            // Update local state to reflect changes immediately
+
+            setSteps(updatedSteps);
+            setCompletedCount(completedCCount + 1); // Increment completed count
+            setProgress((completedCCount + 1) / total); // Update progress
+            // Then call the main approval function
+            // This could be your existing OnApproveStep function that handles API calls, etc.
+            await OnApproveStep(updatedStep);
+
+
+        } catch (error) {
+            console.error('Error in pre-approval step:', error);
+            throw error; // Re-throw to allow caller to handle
         }
-    }; return (
+    };
+
+    // Pre-step function for rejection
+    const preOnRejected = async (step: Step) => {
+        try {
+            // Update the specific step's human_approval_status
+            const updatedStep = {
+                ...step,
+                human_approval_status: 'rejected' as HumanFeedbackStatus
+            };
+
+            // Create a new array with the updated step
+            const updatedSteps = steps.map(s =>
+                s.id === step.id ? updatedStep : s
+            );
+
+            // Update local state to reflect changes immediately
+            setSteps(updatedSteps);
+            setCompletedCount(completedCCount + 1); // Increment completed count
+            setProgress((completedCCount + 1) / total); // Update progress
+            // Then call the main rejection function
+            // This could be your existing OnRejectStep function that handles API calls, etc.
+            await OnRejectStep(updatedStep);
+
+        } catch (error) {
+            console.error('Error in pre-rejection step:', error);
+            throw error; // Re-throw to allow caller to handle
+        }
+    };
+
+    return (
         <div className="task-details-container">
             <PanelRightToolbar panelTitle="Progress"></PanelRightToolbar>
             <div className="task-details-section">
@@ -85,39 +149,39 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                             <Body1Strong>{planData.plan.initial_goal}</Body1Strong>
                             <br />
                             <Text size={200}>
-                                {planData.plan.completed} of {total} completed
+                                {completedCCount} of {total} completed
                             </Text>
                         </div>
                     </div>
                 </div>
 
                 <div className="task-details-subtask-list">
-                    {subTasks.map((subtask) => {
+                    {steps.map((step) => {
                         const { description, functionOrDetails } = TaskService.splitSubtaskAction(
-                            subtask.action
+                            step.action
                         );
                         const canInteract = planData.enableStepButtons;
 
-                        return (<div key={subtask.id} className="task-details-subtask-item">
+                        return (<div key={step.id} className="task-details-subtask-item">
                             <div className="task-details-status-icon">
-                                {renderStatusIcon(subtask.human_approval_status || subtask.status)}
+                                {renderStatusIcon(step.human_approval_status || step.status)}
                             </div>
                             <div className="task-details-subtask-content">
-                                <span className={`task-details-subtask-description ${subtask.human_approval_status === "rejected" ? "strikethrough" : ""}`}>
+                                <span className={`task-details-subtask-description ${step.human_approval_status === "rejected" ? "strikethrough" : ""}`}>
                                     {description} {functionOrDetails && <Caption1>{functionOrDetails}</Caption1>}
                                 </span>
                                 <div className="task-details-action-buttons">
-                                    {(subtask.human_approval_status !== "accepted" && subtask.human_approval_status !== "rejected") && (
+                                    {(step.human_approval_status !== "accepted" && step.human_approval_status !== "rejected") && (
                                         <>
                                             <CheckboxChecked20Regular
                                                 onClick={
-                                                    canInteract ? () => OnApproveStep(subtask) : undefined
+                                                    canInteract ? () => preOnApproved(step) : undefined
                                                 }
                                                 className={canInteract ? "task-details-action-button" : "task-details-action-button-disabled"}
                                             />
                                             <DismissSquare20Regular
                                                 onClick={
-                                                    canInteract ? () => OnRejectStep(subtask) : undefined
+                                                    canInteract ? () => preOnRejected(step) : undefined
                                                 }
                                                 className={canInteract ? "task-details-action-button" : "task-details-action-button-disabled"}
                                             />

src/frontend_react/src/models/plan.tsx

@@ -120,5 +120,6 @@ export interface PlanChatProps {
     planData: ProcessedPlanData;
     input: string;
     loading: boolean;
+    submittingChatDisableInput: boolean;
     OnChatSubmit: (message: string) => void;
 }

src/frontend_react/src/models/taskDetails.tsx

@@ -23,6 +23,7 @@ export interface Human {
 export interface TaskDetailsProps {
     planData: ProcessedPlanData;
     loading: boolean;
+    submittingChatDisableInput: boolean;
     processingSubtaskId: string | null;
     OnApproveStep: (step: Step) => void;
     OnRejectStep: (step: Step) => void;