Merge pull request #296 from microsoft/Bugs-fixing

fix: Bug fixes of #19515,#19330,#19278

Author: Roopan-Microsoft

src/frontend/src/components/content/TaskDetails.tsx

@@ -38,6 +38,16 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
   );
   const agents = planData?.agents || [];
 
+  React.useEffect(() => {
+    // Initialize steps and counts from planData
+    setSteps(planData.steps || []);
+    setCompletedCount(planData?.plan.completed || 0);
+    setTotal(planData?.plan.total_steps || 1);
+    setProgress(
+      (planData?.plan.completed || 0) / (planData?.plan.total_steps || 1)
+    );
+  }, [planData]);
+
   const renderStatusIcon = (status: string) => {
     switch (status) {
       case "completed":
@@ -59,17 +69,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         ...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(completedCount + 1); // Increment completed count
-      setProgress((completedCount + 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, total, completedCount + 1, true);
@@ -88,15 +87,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
         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(completedCount + 1); // Increment completed count
-      setProgress((completedCount + 1) / total); // Update progress
       // Then call the main rejection function
       // This could be your existing OnRejectStep function that handles API calls, etc.
       await OnApproveStep(updatedStep, total, completedCount + 1, false);

src/frontend/src/coral/components/Progress/ProgressCircle.tsx

@@ -6,6 +6,7 @@ interface ProgressCircleProps {
   strokeWidth?: number;
   backgroundColor?: string;
   fillColor?: string;
+  borderColor?: string;
 }
 
 const ProgressCircle: React.FC<ProgressCircleProps> = ({
@@ -14,6 +15,7 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
   strokeWidth = 8,
   backgroundColor = "var(--colorNeutralBackground6)",
   fillColor = "var(--colorPaletteSeafoamBorderActive)",
+  borderColor = "var(--colorNeutralStroke1)",
 }) => {
   const circleRef = useRef<SVGCircleElement>(null);
   const [hasMounted, setHasMounted] = useState(false);
@@ -53,6 +55,16 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
           fill="none"
           stroke={backgroundColor}
           strokeWidth={strokeWidth}
+          style={{ stroke: backgroundColor, strokeWidth, strokeDasharray: "none", strokeDashoffset: 0, strokeLinecap: "round", filter: "none" }}
+        />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius+4}
+          fill="none"
+          stroke={borderColor}
+          strokeWidth={1}
+          style={{ pointerEvents: "none" }}
         />
         <circle
           ref={circleRef}
@@ -67,6 +79,15 @@ const ProgressCircle: React.FC<ProgressCircleProps> = ({
           strokeLinecap="round"
           transform={`rotate(-90 ${size / 2} ${size / 2})`}
         />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius-4}
+          fill="none"
+          stroke={borderColor}
+          strokeWidth={1}
+          style={{ pointerEvents: "none" }}
+        />
       </svg>
 
       {progress >= 1 && (

src/frontend/src/pages/PlanPage.tsx

@@ -34,6 +34,7 @@ const PlanPage: React.FC = () => {
 
     const [input, setInput] = useState("");
     const [planData, setPlanData] = useState<ProcessedPlanData | any>(null);
+    const [allPlans, setAllPlans] = useState<ProcessedPlanData[]>([]);
     const [loading, setLoading] = useState<boolean>(true);
     const [submittingChatDisableInput, setSubmitting] = useState<boolean>(false);
     const [error, setError] = useState<Error | null>(null);
@@ -55,6 +56,14 @@ const PlanPage: React.FC = () => {
         return () => clearInterval(interval);
     }, [loading]);
 
+
+    useEffect(() => {
+        const currentPlan = allPlans.find(
+            (plan) => plan.plan.id === planId
+        );
+        setPlanData(currentPlan || null);
+    }, [allPlans,planId]);
+
     const loadPlanData = useCallback(
         async (navigate: boolean = true) => {
             if (!planId) return;
@@ -70,8 +79,15 @@ const PlanPage: React.FC = () => {
 
                 setError(null);
                 const data = await PlanDataService.fetchPlanData(planId,navigate);
-                console.log("Fetched plan data:", data);
-                setPlanData(data);
+                let plans = [...allPlans];
+                const existingIndex = plans.findIndex(p => p.plan.id === data.plan.id);
+                if (existingIndex !== -1) {
+                    plans[existingIndex] = data;
+                } else {
+                    plans.push(data);
+                }
+                setAllPlans(plans);
+                //setPlanData(data);
             } catch (err) {
                 console.log("Failed to load plan data:", err);
                 setError(
@@ -87,7 +103,6 @@ const PlanPage: React.FC = () => {
     const handleOnchatSubmit = useCallback(
         async (chatInput: string) => {
 
-            console.log("handleOnchatSubmit called with input:", chatInput);
             if (!chatInput.trim()) {
                 showToast("Please enter a clarification", "error");
                 return;