planchanges

Author: Fr4nc3

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

@@ -83,12 +83,13 @@ const PlanChat: React.FC<PlanChatProps> = ({
                         value={input}
                         onChange={setInput}
                         onEnter={() => OnChatSubmit(input)}
+                        disabledChat={!planData.hasHumanClarificationRequest}
                     >
                         <Button
                             appearance="transparent"
                             onClick={() => OnChatSubmit(input)}
                             icon={<Send />}
-                            disabled={planData.hasHumanClarificationRequest && (isTyping || !input.trim())}
+                            disabled={!planData.hasHumanClarificationRequest && (!input.trim())}
                         />
 
                     </ChatInput>

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

@@ -10,8 +10,10 @@ import { TaskDetailsProps } from "@/models";
 
 const PlanPanelRight: React.FC<TaskDetailsProps> = ({
     planData,
+
     OnApproveStep,
     OnRejectStep,
+    processingSubtaskId
 }) => {
     if (!planData) return null;
 
@@ -28,6 +30,7 @@ const PlanPanelRight: React.FC<TaskDetailsProps> = ({
                     planData={planData}
                     OnApproveStep={OnApproveStep}
                     OnRejectStep={OnRejectStep}
+                    processingSubtaskId={processingSubtaskId}
                 />
             </div>
         </PanelRight>

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

@@ -18,13 +18,15 @@ import { TaskService } from "@/services";
 const TaskDetails: React.FC<TaskDetailsProps> = ({
     planData,
     OnApproveStep,
-    OnRejectStep
+    OnRejectStep,
+    processingSubtaskId
 }) => {
     const completedCount = planData.plan.completed || 0;
     const total = planData.plan.total_steps || 1; // Avoid division by zero
     const subTasks = planData.steps || [];
     const progress = completedCount / total;
     const agents = planData.agents || [];
+
     // Helper function to render the appropriate status icon
     const renderStatusIcon = (status: string) => {
 
@@ -90,11 +92,12 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                             <>
                                                 <CheckboxChecked20Regular
                                                     onClick={planData.hasHumanClarificationRequest ? () => OnApproveStep(subtask) : undefined}
-                                                    className={`${!planData.hasHumanClarificationRequest ? 'task-details-checkbox-icon-disabled' : 'task-details-checkbox-icon'}`}
+                                                    className={`${!planData.hasHumanClarificationRequest && processingSubtaskId === subtask.id ? 'task-details-checkbox-icon-disabled' : 'task-details-checkbox-icon'}`}
+
                                                 />
                                                 <DismissSquare20Regular
                                                     onClick={planData.hasHumanClarificationRequest ? () => OnRejectStep(subtask) : undefined}
-                                                    className={`${!planData.hasHumanClarificationRequest ? 'task-details-dismiss-icon-disabled' : 'task-details-dismiss-icon'}`}
+                                                    className={`${!planData.hasHumanClarificationRequest && processingSubtaskId === subtask.id ? 'task-details-dismiss-icon-disabled' : 'task-details-dismiss-icon'}`}
                                                 />
                                             </>
                                         )}

src/frontend_react/src/models/taskDetails.tsx

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

src/frontend_react/src/pages/PlanPage.tsx

@@ -42,7 +42,7 @@ const PlanPage: React.FC = () => {
     const [planData, setPlanData] = useState<ProcessedPlanData | any>(null);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<Error | null>(null);
-
+    const [processingSubtaskId, setProcessingSubtaskId] = useState<string | null>(null);
     /**
      * Fetch plan data when component mounts or planId changes
      */
@@ -84,11 +84,14 @@ const PlanPage: React.FC = () => {
 
     // Move handlers here to fix dependency order
     const handleApproveStep = useCallback(async (step: Step) => {
+        setProcessingSubtaskId(step.id);
         try {
             await PlanDataService.approveStep(step);
             await loadPlanData();
         } catch (error) {
-            console.error('Failed to approve step:', error);
+            console.error('Failed to reject step:', error);
+        } finally {
+            setProcessingSubtaskId(null);
         }
     }, [loadPlanData]);
 
@@ -142,6 +145,7 @@ const PlanPage: React.FC = () => {
                     planData={planData}
                     OnApproveStep={handleApproveStep}
                     OnRejectStep={handleRejectStep}
+                    processingSubtaskId={processingSubtaskId}
                 />
             </CoralShellRow>
         </CoralShellColumn>