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

Macae v3 fr dev 92

Author: marktayl1

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

@@ -159,7 +159,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         {renderThinkingState(waitingForPlan)}
 
         {/* Plan response with all information */}
-        {showApprovalButtons && renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval, showApprovalButtons)}
+        {renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval, showApprovalButtons)}
         {renderAgentMessages(agentMessages)}
 
 
@@ -174,7 +174,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         setInput={setInput}
         submittingChatDisableInput={submittingChatDisableInput}
         OnChatSubmit={OnChatSubmit}
-        showChatInput={!planApprovalRequest}
+        showChatInput={true}
         waitingForPlan={waitingForPlan}
         loading={false} />
     </div>

src/frontend/src/components/content/PlanChatBody.tsx

@@ -28,12 +28,14 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
             maxWidth: '800px',
             margin: '0 auto',
             width: '100%'
-        }}>
+        }}
+
+        >
             <ChatInput
                 value={input}
                 onChange={setInput}
                 onEnter={() => OnChatSubmit(input)}
-                disabledChat={submittingChatDisableInput || waitingForPlan}
+                disabledChat={submittingChatDisableInput}
                 placeholder={
                     waitingForPlan
                         ? "Creating plan..."
@@ -44,7 +46,7 @@ const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
                     appearance="transparent"
                     onClick={() => OnChatSubmit(input)}
                     icon={<SendRegular />}
-                    disabled={submittingChatDisableInput || waitingForPlan}
+                    disabled={submittingChatDisableInput}
                     style={{ height: '40px', width: '40px' }}
                 />
             </ChatInput>

src/frontend/src/components/content/PlanPanelRight.tsx

@@ -6,18 +6,13 @@ import {
   PersonRegular,
   ArrowTurnDownRightRegular,
 } from "@fluentui/react-icons";
-import { MPlanData } from "../../models";
+import { MPlanData, PlanDetailsProps } from "../../models";
 import { TaskService } from "../../services/TaskService";
 import { AgentTypeUtils, AgentType } from "../../models/enums";
 import ContentNotFound from "../NotFound/ContentNotFound";
 
-interface PlanPanelRightProps {
-  planData: any;
-  loading: boolean;
-  planApprovalRequest: MPlanData | null;
-}
 
-const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
+const PlanPanelRight: React.FC<PlanDetailsProps> = ({
   planData,
   loading,
   planApprovalRequest
@@ -62,9 +57,9 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
 
     // Get the icon name from the utility
     const iconName = AgentTypeUtils.getAgentIcon(agentType);
-    
+
     // Return the appropriate icon component or fallback to PersonRegular
-    return <PersonRegular style={{ 
+    return <PersonRegular style={{
       color: 'var(--colorPaletteBlueForeground2)',
       fontSize: '16px'
     }} />;
@@ -83,11 +78,11 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
     if (!planApprovalRequest.steps || planApprovalRequest.steps.length === 0) return [];
 
     const result: Array<{ type: 'heading' | 'substep'; text: string }> = [];
-    
+
     planApprovalRequest.steps.forEach(step => {
       const action = step.cleanAction || step.action || '';
       const trimmedAction = action.trim();
-      
+
       if (trimmedAction) {
         // Check if the step ends with a colon
         if (trimmedAction.endsWith(':')) {
@@ -117,8 +112,8 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
         display: 'flex',
         flexDirection: 'column'
       }}>
-        <Body1 style={{ 
-          marginBottom: '16px', 
+        <Body1 style={{
+          marginBottom: '16px',
           flexShrink: 0,
           fontSize: '14px',
           fontWeight: 600,
@@ -186,7 +181,7 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
         flex: 1,
         overflow: 'auto'
       }}>
-        <Body1 style={{ 
+        <Body1 style={{
           marginBottom: '16px',
           fontSize: '14px',
           fontWeight: 600,
@@ -227,11 +222,11 @@ const PlanPanelRight: React.FC<PlanPanelRightProps> = ({
                 }}>
                   {getAgentIcon(agentName)}
                 </div>
-                
+
                 {/* Agent Info - just name */}
                 <div style={{ flex: 1 }}>
-                  <Body1 style={{ 
-                    fontWeight: 600, 
+                  <Body1 style={{
+                    fontWeight: 600,
                     fontSize: '14px',
                     color: 'var(--colorNeutralForeground1)'
                   }}>

src/frontend/src/models/index.tsx

@@ -16,7 +16,7 @@ export * from './homeInput';
 export * from './auth';
 
 // Export taskDetails with explicit naming to avoid Agent conflict
-export type { SubTask, Human, TaskDetailsProps } from './taskDetails';
+export type { SubTask, Human, PlanDetailsProps } from './taskDetails';
 export type { Agent as TaskAgent } from './taskDetails';
 
 // Export Team models (Agent interface takes precedence)

src/frontend/src/models/taskDetails.tsx

@@ -1,4 +1,4 @@
-import { ProcessedPlanData, Step } from "./plan";
+import { MPlanData, ProcessedPlanData, Step } from "./plan";
 
 export interface SubTask {
     id: string;
@@ -20,10 +20,8 @@ export interface Human {
     avatarUrl?: string;
 }
 
-export interface TaskDetailsProps {
+export interface PlanDetailsProps {
     planData: ProcessedPlanData;
     loading: boolean;
-    submittingChatDisableInput: boolean;
-    processingSubtaskId: string | null;
-    OnApproveStep: (step: Step, total: number, completed: number, approve: boolean) => void;
+    planApprovalRequest: MPlanData | null;
 }

src/frontend/src/pages/PlanPage.tsx

@@ -44,9 +44,7 @@ const PlanPage: React.FC = () => {
     const [loading, setLoading] = useState<boolean>(true);
     const [submittingChatDisableInput, setSubmitting] = useState<boolean>(false);
     const [error, setError] = useState<Error | null>(null);
-    const [processingSubtaskId, setProcessingSubtaskId] = useState<string | null>(
-        null
-    );
+
     const [planApprovalRequest, setPlanApprovalRequest] = useState<MPlanData | null>(null);
     const [reloadLeftList, setReloadLeftList] = useState(true);
     const [waitingForPlan, setWaitingForPlan] = useState(true);
@@ -504,11 +502,7 @@ const PlanPage: React.FC = () => {
 
                 <PlanPanelRight
                     planData={planData}
-                    submittingChatDisableInput={submittingChatDisableInput}
-                    processingSubtaskId={processingSubtaskId}
                     loading={loading}
-                    streamingMessages={streamingMessages}
-                    planApproved={planApproved}
                     planApprovalRequest={planApprovalRequest}
                 />
             </CoralShellRow>

src/frontend/src/services/WebSocketService.tsx

@@ -1,4 +1,4 @@
-import { headerBuilder } from '../api/config';
+import { getApiUrl, headerBuilder } from '../api/config';
 import { PlanDataService } from './PlanDataService';
 import { MPlanData, ParsedPlanApprovalRequest, StreamingPlanUpdate, StreamMessage, WebsocketMessageType } from '../models';
 
@@ -12,8 +12,24 @@ class WebSocketService {
     private planSubscriptions: Set<string> = new Set();
     private reconnectTimer: NodeJS.Timeout | null = null;
     private isConnecting = false;
-    private baseWsUrl = process.env.REACT_APP_BACKEND_URL?.replace('http', 'ws') || 'ws://localhost:8000';
+    private baseWsUrl = getApiUrl() || 'ws://localhost:8000';
 
+    private buildSocketUrl(processId?: string, sessionId?: string): string {
+        // Trim and remove trailing slashes
+        let base = (this.baseWsUrl || '').trim().replace(/\/+$/, '');
+        // Normalize protocol: http -> ws, https -> wss
+        base = base.replace(/^http:\/\//i, 'ws://')
+            .replace(/^https:\/\//i, 'wss://');
+
+        // Leave ws/wss as-is; anything else is assumed already correct
+
+        // Decide path addition
+        const hasApiSegment = /\/api(\/|$)/i.test(base);
+        const socketPath = hasApiSegment ? '/v3/socket' : '/api/v3/socket';
+        const url = `${base}${socketPath}${processId ? `/${processId}` : `/${sessionId}`}`;
+        console.log("Constructed WebSocket URL:", url);
+        return url;
+    }
     connect(sessionId: string, processId?: string): Promise<void> {
         return new Promise((resolve, reject) => {
             if (this.isConnecting) {
@@ -26,9 +42,7 @@ class WebSocketService {
             }
             try {
                 this.isConnecting = true;
-                const wsUrl = processId
-                    ? `${this.baseWsUrl}/api/v3/socket/${processId}`
-                    : `${this.baseWsUrl}/api/v3/socket/${sessionId}`;
+                const wsUrl = this.buildSocketUrl(processId, sessionId);
                 this.ws = new WebSocket(wsUrl);
 
                 this.ws.onopen = () => {
@@ -210,7 +224,9 @@ class WebSocketService {
 
             case WebsocketMessageType.USER_CLARIFICATION_REQUEST: {
                 if (message.data) {
-                    //const transformed = PlanDataService.parseUserClarificationRequest(message);
+                    //\const transformed = PlanDataService.parseUserClarificationRequest(message);
+                    console.log('WebSocket USER_CLARIFICATION_REQUEST message received:', message);
+
                     this.emit(WebsocketMessageType.USER_CLARIFICATION_REQUEST, message);
                 }
                 break;