Merge pull request microsoft#475 from microsoft/macae-v3-fr-dev-92

Add plan execution spinner to PlanChat flow

Author: Fr4nc3

src/frontend/src/components/content/PlanChat.tsx

@@ -28,7 +28,7 @@ import { AgentMessageData, WebsocketMessageType } from "@/models";
 import getUserPlan from "./streaming/StreamingUserPlan";
 import renderUserPlanMessage from "./streaming/StreamingUserPlanMessage";
 import renderPlanResponse from "./streaming/StreamingPlanResponse";
-import renderThinkingState from "./streaming/StreamingPlanState";
+import { renderPlanExecutionMessage, renderThinkingState } from "./streaming/StreamingPlanState";
 import ContentNotFound from "../NotFound/ContentNotFound";
 import PlanChatBody from "./PlanChatBody";
 import renderBufferMessage from "./streaming/StreamingBufferMessage";
@@ -42,6 +42,8 @@ interface SimplifiedPlanChatProps extends PlanChatProps {
   messagesContainerRef: React.RefObject<HTMLDivElement>;
   streamingMessageBuffer: string;
   agentMessages: AgentMessageData[];
+  showProcessingPlanSpinner: boolean;
+  setShowProcessingPlanSpinner: (show: boolean) => void;
 }
 
 const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
@@ -57,7 +59,9 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
   waitingForPlan,
   messagesContainerRef,
   streamingMessageBuffer,
-  agentMessages
+  agentMessages,
+  showProcessingPlanSpinner,
+  setShowProcessingPlanSpinner
 
 }) => {
   const navigate = useNavigate();
@@ -91,6 +95,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
 
       dismissToast(id);
       onPlanApproval?.(true);
+      setShowProcessingPlanSpinner?.(true);
       setShowApprovalButtons(false);
 
     } catch (error) {
@@ -100,7 +105,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
     } finally {
       setProcessingApproval(false);
     }
-  }, [planApprovalRequest, planData, onPlanApproval]);
+  }, [planApprovalRequest, planData, onPlanApproval, setShowProcessingPlanSpinner]);
 
   // Handle plan rejection  
   const handleRejectPlan = useCallback(async () => {
@@ -164,9 +169,10 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         {renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval, showApprovalButtons)}
         {renderAgentMessages(agentMessages)}
 
-
+        {showProcessingPlanSpinner && renderPlanExecutionMessage()}
         {/* Streaming plan updates */}
         {renderBufferMessage(streamingMessageBuffer)}
+
       </div>
 
       {/* Chat Input - only show if no plan is waiting for approval */}

src/frontend/src/components/content/streaming/StreamingPlanState.tsx

@@ -1,4 +1,4 @@
-import { Spinner } from "@fluentui/react-components";
+import { Spinner, tokens } from "@fluentui/react-components";
 import { BotRegular } from "@fluentui/react-icons";
 
 // Render AI thinking/planning state
@@ -44,4 +44,35 @@ const renderThinkingState = (waitingForPlan: boolean) => {
         </div>
     );
 };
-export default renderThinkingState;
+
+
+// Simple message to show while executing the plan
+
+const renderPlanExecutionMessage = () => {
+    return (
+        <div style={{
+            maxWidth: '800px',
+            margin: '0 auto',
+            padding: `${tokens.spacingVerticalXL} ${tokens.spacingHorizontalXL}`,
+            display: 'flex',
+            alignItems: 'center',
+            gap: tokens.spacingHorizontalM,
+            backgroundColor: tokens.colorNeutralBackground2,
+            borderRadius: tokens.borderRadiusMedium,
+            border: `1px solid ${tokens.colorNeutralStroke1}`,
+            marginBottom: tokens.spacingVerticalXL
+        }}>
+            <Spinner size="small" />
+            <span style={{
+                fontSize: '14px',
+                color: tokens.colorNeutralForeground1,
+                fontWeight: tokens.fontWeightSemibold
+            }}>
+                Processing your plan and coordinating with AI agents...
+            </span>
+        </div>
+    );
+};
+
+
+export { renderPlanExecutionMessage, renderThinkingState };

src/frontend/src/pages/PlanPage.tsx

@@ -49,6 +49,7 @@ const PlanPage: React.FC = () => {
     const [planApprovalRequest, setPlanApprovalRequest] = useState<MPlanData | null>(null);
     const [reloadLeftList, setReloadLeftList] = useState(true);
     const [waitingForPlan, setWaitingForPlan] = useState(true);
+    const [showProcessingPlanSpinner, setShowProcessingPlanSpinner] = useState<boolean>(false);
     // WebSocket connection state
     const [wsConnected, setWsConnected] = useState(false);
     const [streamingMessages, setStreamingMessages] = useState<StreamingPlanUpdate[]>([]);
@@ -111,6 +112,7 @@ const PlanPage: React.FC = () => {
                 console.log('✅ Parsed plan data:', mPlanData);
                 setPlanApprovalRequest(mPlanData);
                 setWaitingForPlan(false);
+                setShowProcessingPlanSpinner(false);
                 // onPlanReceived?.(mPlanData);
                 scrollToBottom();
             } else {
@@ -151,6 +153,7 @@ const PlanPage: React.FC = () => {
             setClarificationMessage(clarificationMessage.data as ParsedUserClarification | null);
             setAgentMessages(prev => [...prev, agentMessageData]);
             setStreamingMessageBuffer("");
+            setShowProcessingPlanSpinner(false);
             setSubmittingChatDisableInput(false);
             scrollToBottom();
 
@@ -185,6 +188,7 @@ const PlanPage: React.FC = () => {
             } as AgentMessageData;
             console.log('✅ Parsed final result message:', agentMessageData);
             setStreamingMessageBuffer("");
+            setShowProcessingPlanSpinner(false);
             setAgentMessages(prev => [...prev, agentMessageData]);
             scrollToBottom();
 
@@ -200,6 +204,7 @@ const PlanPage: React.FC = () => {
             console.log('📋 Agent Message', agentMessage);
             const agentMessageData = agentMessage.data as AgentMessageData;
             setAgentMessages(prev => [...prev, agentMessageData]);
+            setShowProcessingPlanSpinner(true);
             scrollToBottom();
         });
 
@@ -396,9 +401,11 @@ const PlanPage: React.FC = () => {
 
                 setAgentMessages(prev => [...prev, agentMessageData]);
                 setSubmittingChatDisableInput(true);
+                setShowProcessingPlanSpinner(true);
                 scrollToBottom();
 
             } catch (error: any) {
+                setShowProcessingPlanSpinner(false);
                 dismissToast(id);
                 setSubmittingChatDisableInput(false);
                 showToast(
@@ -511,11 +518,13 @@ const PlanPage: React.FC = () => {
                                 streamingMessages={streamingMessages}
                                 wsConnected={wsConnected}
                                 onPlanApproval={(approved) => setPlanApproved(approved)}
+                                onPlanProcessing={(showProcessingPlanSpinner) => setShowProcessingPlanSpinner(showProcessingPlanSpinner)}
                                 planApprovalRequest={planApprovalRequest}
                                 waitingForPlan={waitingForPlan}
                                 messagesContainerRef={messagesContainerRef}
                                 streamingMessageBuffer={streamingMessageBuffer}
                                 agentMessages={agentMessages}
+                                showProcessingPlanSpinner={showProcessingPlanSpinner}
 
                             />
                         </>