fix: online status check

Author: swarna1101

chat-ui/src/components/ChatInterface.css

@@ -739,4 +739,49 @@
     .input-area {
         padding: 0.8rem;
     }
+}
+
+.status-online {
+    background-color: #4caf50; /* Green for online */
+    animation: none; /* No animation for stable connection */
+}
+
+.status-offline {
+    background-color: #f44336; /* Red for offline */
+    animation: none; /* No animation for stable disconnection */
+}
+
+.status-checking {
+    background-color: #ffc107; /* Yellow/amber for checking */
+    animation: pulse 1.5s infinite; /* Pulsing animation while checking */
+}
+
+/* Add to your existing keyframes or add if missing */
+@keyframes pulse {
+    0% { opacity: 0.3; }
+    50% { opacity: 1; }
+    100% { opacity: 0.3; }
+}
+
+/* Disabled input area styling */
+.input-field:disabled {
+    background-color: var(--gray-100);
+    cursor: not-allowed;
+    opacity: 0.8;
+}
+
+/* Connection status message */
+.status-message {
+    font-size: 0.75rem;
+    font-style: italic;
+    padding: 0.5rem;
+    text-align: center;
+    background-color: var(--gray-100);
+    border-radius: 4px;
+    margin: 0.5rem 1.5rem;
+}
+
+.status-message.offline {
+    background-color: rgba(244, 67, 54, 0.1);
+    color: #f44336;
 }

chat-ui/src/components/ChatInterface.js

@@ -23,6 +23,7 @@ const ChatInterface = () => {
     const [awaitingConfirmation, setAwaitingConfirmation] = useState(false);
     const [pendingTransaction, setPendingTransaction] = useState(null);
     const [showInfo, setShowInfo] = useState(false);
+    const [backendStatus, setBackendStatus] = useState('checking'); // 'online', 'offline', or 'checking'
     const messagesEndRef = useRef(null);
     const inputRef = useRef(null);
 
@@ -39,6 +40,44 @@ const ChatInterface = () => {
         inputRef.current?.focus();
     }, []);
 
+    // Check backend connection status periodically
+    useEffect(() => {
+        const checkBackendStatus = async () => {
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
+
+                // Use the ping endpoint to check if the backend is available
+                const response = await fetch(`${BACKEND_ROUTE}ping`, {
+                    method: 'GET',
+                    signal: controller.signal
+                });
+
+                clearTimeout(timeoutId);
+
+                if (response.ok) {
+                    setBackendStatus('online');
+                    console.log('Backend connection: Online');
+                } else {
+                    setBackendStatus('offline');
+                    console.log('Backend connection: Offline (Response not OK)');
+                }
+            } catch (error) {
+                console.error('Backend connection error:', error);
+                setBackendStatus('offline');
+            }
+        };
+
+        // Initial check
+        checkBackendStatus();
+
+        // Set up periodic checking (every 30 seconds)
+        const intervalId = setInterval(checkBackendStatus, 30000);
+
+        // Cleanup
+        return () => clearInterval(intervalId);
+    }, []);
+
     const handleSendMessage = async (text) => {
         try {
             const response = await fetch(BACKEND_ROUTE, {
@@ -55,6 +94,9 @@ const ChatInterface = () => {
 
             const data = await response.json();
 
+            // If message sent successfully, update backend status to online
+            setBackendStatus('online');
+
             // Check if response contains a transaction preview
             if (data.response.includes('Transaction Preview:')) {
                 setAwaitingConfirmation(true);
@@ -66,7 +108,9 @@ const ChatInterface = () => {
             return data.response;
         } catch (error) {
             console.error('Error:', error);
-            return 'Sorry, there was an error processing your request. Please try again.';
+            // If error occurred, update backend status to offline
+            setBackendStatus('offline');
+            return 'Sorry, I\'m having trouble connecting to my backend. Please check your connection and try again.';
         }
     };
 
@@ -311,8 +355,14 @@ const ChatInterface = () => {
                     <div>
                         <h2>Agent Pugo Hilion</h2>
                         <div className="status-indicator">
-                            <span className="status-dot"></span>
-                            <span>Online</span>
+                            <span className={`status-dot ${
+                                backendStatus === 'online' ? 'status-online' :
+                                    backendStatus === 'offline' ? 'status-offline' : 'status-checking'
+                            }`}></span>
+                            <span>{
+                                backendStatus === 'online' ? 'Online' :
+                                    backendStatus === 'offline' ? 'Offline' : 'Connecting...'
+                            }</span>
                         </div>
                     </div>
                 </div>
@@ -528,12 +578,12 @@ const ChatInterface = () => {
                             : "Type your message... (Markdown supported)"}
                         className="input-field"
                         rows="1"
-                        disabled={isLoading}
+                        disabled={isLoading || backendStatus === 'offline'}
                     />
                     <button
                         type="submit"
-                        disabled={isLoading || !inputText.trim()}
-                        className={`send-button ${isLoading || !inputText.trim() ? 'disabled' : ''}`}
+                        disabled={isLoading || !inputText.trim() || backendStatus === 'offline'}
+                        className={`send-button ${isLoading || !inputText.trim() || backendStatus === 'offline' ? 'disabled' : ''}`}
                         aria-label="Send message"
                     >
                         <Send size={18} />

src/flare_ai_social/api/routes/chat.py

@@ -90,6 +90,16 @@ async def chat(message: ChatMessage) -> dict[str, str]:  # pyright: ignore [repo
                 self.logger.exception("message_handling_failed", error=str(e))
                 raise HTTPException(status_code=500, detail=str(e)) from e
 
+        @self._router.get("/ping")
+        async def ping() -> dict[str, str]:  # pyright: ignore [reportUnusedFunction]
+            """
+            Simple ping endpoint to check if the service is up.
+
+            Returns:
+                dict[str, str]: Status message
+            """
+            return {"status": "ok"}
+
     @property
     def router(self) -> APIRouter:
         """Get the FastAPI router with registered routes."""