Refactor plan details props and chat input logic

Replaces TaskDetailsProps with PlanDetailsProps for plan panel components and updates prop usage accordingly. Simplifies chat input disabling logic in PlanChat and PlanChatBody, always showing the chat input and only disabling it based on submitting state. Cleans up unused props and improves type consistency across related components.

Author: Fr4nc3

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

@@ -504,11 +504,7 @@ const PlanPage: React.FC = () => {
 
                 <PlanPanelRight
                     planData={planData}
-                    submittingChatDisableInput={submittingChatDisableInput}
-                    processingSubtaskId={processingSubtaskId}
                     loading={loading}
-                    streamingMessages={streamingMessages}
-                    planApproved={planApproved}
                     planApprovalRequest={planApprovalRequest}
                 />
             </CoralShellRow>