button functionality

Author: Fr4nc3

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

@@ -98,7 +98,7 @@ const PlanChat: React.FC<PlanChatProps> = ({
                             appearance="transparent"
                             onClick={sendMessage}
                             icon={<Send />}
-                            disabled={isTyping || !input.trim()}
+                            disabled={planData.hasHumanClarificationRequest && (isTyping || !input.trim())}
                         />
 
                         {messages.length > 0 && (

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

@@ -86,12 +86,12 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                     <span className="task-details-subtask-name">{description}</span>
                                     <div className="task-details-subtask-actions">
                                         <CheckboxChecked20Regular
-                                            onClick={() => OnApproveStep(subtask)}
-                                            className="task-details-checkbox-icon"
+                                            onClick={planData.hasHumanClarificationRequest ? () => OnApproveStep(subtask) : undefined}
+                                            className={`${!planData.hasHumanClarificationRequest ? 'task-details-checkbox-icon-disabled' : 'task-details-checkbox-icon'}`}
                                         />
                                         <DismissSquare20Regular
-                                            onClick={() => OnRejectStep(subtask)}
-                                            className="task-details-dismiss-icon"
+                                            onClick={planData.hasHumanClarificationRequest ? () => OnRejectStep(subtask) : undefined}
+                                            className={`${!planData.hasHumanClarificationRequest ? 'task-details-dismiss-icon-disabled' : 'task-details-dismiss-icon'}`}
                                         />
                                     </div>
                                 </div>

src/frontend_react/src/pages/PlanPage.tsx

@@ -26,8 +26,8 @@ import PanelLeft from '../coral/components/Panels/PanelLeft';
 import PanelLeftToolbar from '../coral/components/Panels/PanelLeftToolbar';
 import TaskList from '../components/content/TaskList';
 import { NewTaskService } from '../services/NewTaskService';
-import { PlanDataService, ProcessedPlanData } from '../services/PlanDataService';
-import { PlanWithSteps, Task, AgentType, Step } from '@/models';
+import { PlanDataService } from '../services/PlanDataService';
+import { PlanWithSteps, Task, AgentType, Step, ProcessedPlanData } from '@/models';
 import { apiService } from '@/api';
 import PlanPanelLeft from '@/components/content/PlanPanelLeft';
 import ContentToolbar from '@/coral/components/Content/ContentToolbar';
@@ -45,7 +45,7 @@ const PlanPage: React.FC = () => {
     const navigate = useNavigate();
 
     // State for plan data
-    const [planData, setPlanData] = useState<ProcessedPlanData | null>(null);
+    const [planData, setPlanData] = useState<ProcessedPlanData | any>(null);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<Error | null>(null);
     const handleOnchatSubmit = useCallback(() => {

src/frontend_react/src/styles/TaskDetails.css

@@ -175,4 +175,12 @@
 .task-details-dismiss-icon:hover {
     background-color: var(--colorNeutralBackground2);
     color: var(--colorPaletteRedForeground1);
+}
+
+.task-details-checkbox-icon-disabled,
+.task-details-dismiss-icon-disabled {
+    cursor: not-allowed;
+    padding: 4px;
+    border-radius: var(--borderRadiusSmall);
+    transition: background-color 0.2s ease, color 0.2s ease;
 }