Refactor PlanChat input into PlanChatBody component

Moved the chat input UI from PlanChat.tsx into a new PlanChatBody.tsx component for better separation of concerns and maintainability. Also performed minor variable renaming in StreamingUserPlanMessage.tsx and removed an unused import in StreamingUserPlan.tsx.

Author: Fr4nc3

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

@@ -30,6 +30,7 @@ import renderUserPlanMessage from "./streaming/StreamingUserPlanMessage";
 import renderPlanResponse from "./streaming/StreamingPlanResponse";
 import renderThinkingState from "./streaming/StreamingPlanState";
 import ContentNotFound from "../NotFound/ContentNotFound";
+import PlanChatBody from "./PlanChatBody";
 interface SimplifiedPlanChatProps extends PlanChatProps {
   onPlanReceived?: (planData: MPlanData) => void;
   initialTask?: string;
@@ -55,6 +56,7 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
   const [userFeedback, setUserFeedback] = useState('');
   const [showFeedbackInput, setShowFeedbackInput] = useState(false);
 
+
   // Auto-scroll helper
   const scrollToBottom = useCallback(() => {
     setTimeout(() => {
@@ -193,35 +195,16 @@ const PlanChat: React.FC<SimplifiedPlanChatProps> = ({
         {renderPlanResponse(planApprovalRequest, handleApprovePlan, handleRejectPlan, processingApproval)}
       </div>
 
-      <div style={{
-        padding: '20px 24px 32px',
-        borderTop: '1px solid var(--colorNeutralStroke2)',
-        backgroundColor: 'var(--colorNeutralBackground1)',
-        maxWidth: '800px',
-        margin: '0 auto',
-        width: '100%'
-      }}>
-        <ChatInput
-          value={input}
-          onChange={setInput}
-          onEnter={() => OnChatSubmit(input)}
-          disabledChat={submittingChatDisableInput || waitingForPlan}
-          placeholder={
-            waitingForPlan
-              ? "Creating plan..."
-              : "Send a message..."
-          }
-        >
-          <Button
-            appearance="transparent"
-            onClick={() => OnChatSubmit(input)}
-            icon={<SendRegular />}
-            disabled={submittingChatDisableInput || waitingForPlan}
-            style={{ height: '40px', width: '40px' }}
-          />
-        </ChatInput>
-      </div>
-
+      {/* Chat Input - only show if no plan is waiting for approval */}
+      <PlanChatBody
+        planData={planData}
+        input={input}
+        setInput={setInput}
+        submittingChatDisableInput={submittingChatDisableInput}
+        OnChatSubmit={OnChatSubmit}
+        showChatInput={!planApprovalRequest}
+        waitingForPlan={waitingForPlan}
+        loading={false} />
     </div>
   );
 };

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

@@ -0,0 +1,55 @@
+import ChatInput from "@/coral/modules/ChatInput";
+import { PlanChatProps } from "@/models";
+import { Button } from "@fluentui/react-components";
+import { SendRegular } from "@fluentui/react-icons";
+
+interface SimplifiedPlanChatProps extends PlanChatProps {
+    showChatInput: boolean;
+    waitingForPlan: boolean;
+}
+const PlanChatBody: React.FC<SimplifiedPlanChatProps> = ({
+    planData,
+    input,
+    setInput,
+    submittingChatDisableInput,
+    OnChatSubmit,
+    showChatInput,
+    waitingForPlan
+
+}) => {
+    if (!showChatInput) {
+        return null;
+    }
+    return (
+
+        <div style={{
+            padding: '20px 24px 32px',
+            borderTop: '1px solid var(--colorNeutralStroke2)',
+            backgroundColor: 'var(--colorNeutralBackground1)',
+            maxWidth: '800px',
+            margin: '0 auto',
+            width: '100%'
+        }}>
+            <ChatInput
+                value={input}
+                onChange={setInput}
+                onEnter={() => OnChatSubmit(input)}
+                disabledChat={submittingChatDisableInput || waitingForPlan}
+                placeholder={
+                    waitingForPlan
+                        ? "Creating plan..."
+                        : "Send a message..."
+                }
+            >
+                <Button
+                    appearance="transparent"
+                    onClick={() => OnChatSubmit(input)}
+                    icon={<SendRegular />}
+                    disabled={submittingChatDisableInput || waitingForPlan}
+                    style={{ height: '40px', width: '40px' }}
+                />
+            </ChatInput>
+        </div>);
+}
+
+export default PlanChatBody;

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

@@ -1,5 +1,4 @@
 import { MPlanData, ProcessedPlanData } from "@/models";
-import { get } from "http";
 
 const getUserPlan = (
     planApprovalRequest: MPlanData | null,

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

@@ -6,7 +6,7 @@ import { MPlanData, ProcessedPlanData } from "@/models";
 const renderUserPlanMessage = (planApprovalRequest: MPlanData | null,
     initialTask?: string,
     planData?: ProcessedPlanData) => {
-    const userTask = getUserTask(planApprovalRequest, initialTask, planData);
+    const userPlan = getUserTask(planApprovalRequest, initialTask, planData);
 
     return (
         <div style={{
@@ -38,7 +38,7 @@ const renderUserPlanMessage = (planApprovalRequest: MPlanData | null,
                     color: 'var(--colorNeutralForeground1)',
                     wordWrap: 'break-word'
                 }}>
-                    {userTask}
+                    {userPlan}
                 </div>
             </div>
         </div>