fix : status display on frontend

frontend/agentic-seek-front/src/App.js

@@ -10,7 +10,7 @@ function App() {
     const [currentView, setCurrentView] = useState('blocks');
     const [responseData, setResponseData] = useState(null);
     const [isOnline, setIsOnline] = useState(false);
-    const [isMounted, setIsMounted] = useState(true);
+    const [status, setStatus] = useState('No agent working.');
     const messagesEndRef = useRef(null);
 
     useEffect(() => {
@@ -22,14 +22,6 @@ function App() {
         return () => clearInterval(intervalId);
     }, [messages]);
 
-    useEffect(() => {
-        const intervalId = setInterval(() => {
-            scrollToBottom();
-        }, 7000);
-
-        return () => clearInterval(intervalId);
-    }, [messages]);
-
     const checkHealth = async () => {
         try {
             await axios.get('http://0.0.0.0:8000/health');
@@ -41,57 +33,54 @@ function App() {
         }
     };
 
-    const scrollToBottom = () => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    };
-
     const fetchScreenshot = async () => {
         try {
             const timestamp = new Date().getTime();
             const res = await axios.get(`http://0.0.0.0:8000/screenshots/updated_screen.png?timestamp=${timestamp}`, {
                 responseType: 'blob'
             });
-            if (isMounted) {
-                console.log('Screenshot fetched successfully');
-                const imageUrl = URL.createObjectURL(res.data);
-                setResponseData((prev) => {
-                    if (prev?.screenshot && prev.screenshot !== 'placeholder.png') {
-                        URL.revokeObjectURL(prev.screenshot);
-                    }
-                    return {
-                        ...prev,
-                        screenshot: imageUrl,
-                        screenshotTimestamp: new Date().getTime()
-                    };
-                });
-            }
+            console.log('Screenshot fetched successfully');
+            const imageUrl = URL.createObjectURL(res.data);
+            setResponseData((prev) => {
+                if (prev?.screenshot && prev.screenshot !== 'placeholder.png') {
+                    URL.revokeObjectURL(prev.screenshot);
+                }
+                return {
+                    ...prev,
+                    screenshot: imageUrl,
+                    screenshotTimestamp: new Date().getTime()
+                };
+            });
         } catch (err) {
             console.error('Error fetching screenshot:', err);
-            if (isMounted) {
-                setResponseData((prev) => ({
-                    ...prev,
-                    screenshot: 'placeholder.png',
-                    screenshotTimestamp: new Date().getTime()
-                }));
-            }
+            setResponseData((prev) => ({
+                ...prev,
+                screenshot: 'placeholder.png',
+                screenshotTimestamp: new Date().getTime()
+            }));
         }
     };
 
     const normalizeAnswer = (answer) => answer.trim().toLowerCase();
 
+    const scrollToBottom = () => {
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    };
+
     const fetchLatestAnswer = async () => {
         try {
             const res = await axios.get('http://0.0.0.0:8000/latest_answer');
             const data = res.data;
-            const normalizedAnswer = normalizeAnswer(data.answer);
             const answerExists = messages.some(
-                (msg) => normalizeAnswer(msg.content) === normalizedAnswer && data.answer != undefined
+                (msg) => msg.timestamp === data.timestamp && data.answer != undefined
             );
             if (!answerExists) {
                 setMessages((prev) => [
                     ...prev,
-                    { type: 'agent', content: data.answer, agentName: data.agent_name },
+                    { type: 'agent', content: data.answer, agentName: data.agent_name, status: data.status, timestamp: data.timestamp },
                 ]);
+                setStatus(data.status);
+                scrollToBottom();
             }
         } catch (error) {
             console.error("Error fetching latest answer:", error);
@@ -179,7 +168,7 @@ function App() {
                             )}
                             <div ref={messagesEndRef} />
                         </div>
-                        {isOnline && isLoading && <div className="loading-animation">Thinking...</div>}
+                        {isOnline && <div className="loading-animation">{status}</div>}
                         {!isLoading && !isOnline && <p className="loading-animation">System offline. Deploy backend first.</p>}
                         <form onSubmit={handleSubmit} className="input-form">
                             <input