plan page loading fixing process

Author: Fr4nc3

src/frontend_react/src/components/content/PlanChat.tsx

@@ -14,6 +14,7 @@ import "../../styles/prism-material-oceanic.css"
 import InlineToaster from "../toast/InlineToaster";
 const PlanChat: React.FC<PlanChatProps> = ({
     planData,
+    loading,
     OnChatSubmit
 }) => {
     // const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
@@ -25,7 +26,7 @@ const PlanChat: React.FC<PlanChatProps> = ({
 
     const messagesContainerRef = useRef<HTMLDivElement>(null);
     const inputContainerRef = useRef<HTMLDivElement>(null);
-    const messages = planData.messages || [];
+    const messages = planData?.messages || [];
     const scrollToBottom = () => {
     };
     const clearChat = async () => {
@@ -34,15 +35,18 @@ const PlanChat: React.FC<PlanChatProps> = ({
     };
     return (
         <div className="chat-container">
-            <div className="messages" ref={messagesContainerRef}>
-                <div className="message-wrapper">
-                    {messages.map((msg, index) => (<div key={index} className={`message ${msg.source !== "human" ? "assistant" : "user"}`}>
-                        <Body1>
-                            <div className="plan-chat-message-content">
-                                <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypePrism]}>
-                                    {msg.content}
-                                </ReactMarkdown>
-                                {/* {msg.role === "assistant" && (
+            {planData && (
+                <>
+                    <div className="messages" ref={messagesContainerRef}>
+                        <div className="message-wrapper">
+
+                            {messages.map((msg, index) => (<div key={index} className={`message ${msg.source !== "human" ? "assistant" : "user"}`}>
+                                <Body1>
+                                    <div className="plan-chat-message-content">
+                                        <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypePrism]}>
+                                            {msg.content}
+                                        </ReactMarkdown>
+                                        {/* {msg.role === "assistant" && (
                                     <div className="assistant-footer">
                                         <div className="assistant-actions">
                                             <Button
@@ -62,44 +66,43 @@ const PlanChat: React.FC<PlanChatProps> = ({
                                         </div>
                                     </div>
                                 )} */}
+                                    </div>
+                                </Body1>
                             </div>
-                        </Body1>
+                            ))}</div>
                     </div>
-                    ))}</div>
-            </div>
-            {showScrollButton && (
-                <Tag
-                    onClick={scrollToBottom}
-                    className="scroll-to-bottom plan-chat-scroll-button"
-                    shape="circular"
-                    style={{ bottom: inputHeight }}
-                >
-                    Back to bottom
-                </Tag>
-            )}
-
-            <InlineToaster />
-            <div ref={inputContainerRef} className="plan-chat-input-container">
-                <div className="plan-chat-input-wrapper">
-                    <ChatInput
-                        value={input}
-                        onChange={setInput}
-                        onEnter={() => OnChatSubmit(input)}
-                        disabledChat={!planData.hasHumanClarificationRequest}
-                    >
-                        <Button
-                            appearance="transparent"
-                            onClick={() => OnChatSubmit(input)}
-                            icon={<Send />}
-                            disabled={!planData.hasHumanClarificationRequest && (!input.trim())}
-                        />
+                    {showScrollButton && (
+                        <Tag
+                            onClick={scrollToBottom}
+                            className="scroll-to-bottom plan-chat-scroll-button"
+                            shape="circular"
+                            style={{ bottom: inputHeight }}
+                        >
+                            Back to bottom
+                        </Tag>
+                    )}
 
-                    </ChatInput>
-                </div>
-
-            </div>
+                    <InlineToaster />
+                    <div ref={inputContainerRef} className="plan-chat-input-container">
+                        <div className="plan-chat-input-wrapper">
+                            <ChatInput
+                                value={input}
+                                onChange={setInput}
+                                onEnter={() => OnChatSubmit(input)}
+                                disabledChat={!planData.hasHumanClarificationRequest}
+                            >
+                                <Button
+                                    appearance="transparent"
+                                    onClick={() => OnChatSubmit(input)}
+                                    icon={<Send />}
+                                    disabled={!planData?.hasHumanClarificationRequest && (!input.trim())}
+                                />
 
+                            </ChatInput>
+                        </div>
 
+                    </div>
+                </>)}
         </div>
     );
 };

src/frontend_react/src/components/content/PlanPanelRight.tsx

@@ -10,7 +10,7 @@ import { TaskDetailsProps } from "@/models";
 
 const PlanPanelRight: React.FC<TaskDetailsProps> = ({
     planData,
-
+    loading,
     OnApproveStep,
     OnRejectStep,
     processingSubtaskId
@@ -31,6 +31,7 @@ const PlanPanelRight: React.FC<TaskDetailsProps> = ({
                     OnApproveStep={OnApproveStep}
                     OnRejectStep={OnRejectStep}
                     processingSubtaskId={processingSubtaskId}
+                    loading={loading}
                 />
             </div>
         </PanelRight>

src/frontend_react/src/models/plan.tsx

@@ -115,5 +115,6 @@ export interface ProcessedPlanData {
 
 export interface PlanChatProps {
     planData: ProcessedPlanData;
+    loading: boolean;
     OnChatSubmit: (message: string) => void;
 }

src/frontend_react/src/models/taskDetails.tsx

@@ -22,6 +22,7 @@ export interface Human {
 
 export interface TaskDetailsProps {
     planData: ProcessedPlanData;
+    loading: boolean;
     processingSubtaskId: string | null;
     OnApproveStep: (step: Step) => void;
     OnRejectStep: (step: Step) => void;

src/frontend_react/src/pages/PlanPage.tsx

@@ -151,29 +151,30 @@ const PlanPage: React.FC = () => {
             <CoralShellRow>
                 <PlanPanelLeft onNewTaskButton={handleNewTaskButton} />
                 <Content>
-                    {loading && <Spinner />}
-                    {!loading && (
-                        <>
-                            <ContentToolbar
-                                panelTitle={planData?.plan?.initial_goal || 'Plan Details'}
-                                panelIcon={<Sparkle20Filled />}
-                            ></ContentToolbar>
-                            <PlanChat
-                                planData={planData}
-                                OnChatSubmit={handleOnchatSubmit}
-                            />
-                        </>
-                    )}
+
+
+                    <ContentToolbar
+                        panelTitle={planData?.plan?.initial_goal || 'Plan Details'}
+                        panelIcon={<Sparkle20Filled />}
+                    ></ContentToolbar>
+                    <PlanChat
+                        planData={planData}
+                        OnChatSubmit={handleOnchatSubmit}
+                        loading={loading}
+                    />
+
+
                 </Content>
 
                 <PlanPanelRight
                     planData={planData}
                     OnApproveStep={handleApproveStep}
                     OnRejectStep={handleRejectStep}
                     processingSubtaskId={processingSubtaskId}
+                    loading={loading}
                 />
             </CoralShellRow>
-        </CoralShellColumn>
+        </CoralShellColumn >
     );