updated sse supporting react-openapi

react-openapi/src/components/SseConnectionStatus.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Box } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import { useSseConnected } from "../context/useResource";
+
+interface SseConnectionStatusProps {
+  resourceName: string;
+}
+
+export function SseConnectionStatus({ resourceName }: SseConnectionStatusProps) {
+  const connected = useSseConnected(resourceName);
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 0.5,
+        px: 1,
+        py: 0.25,
+        borderRadius: 1,
+        border: 1,
+        borderColor: connected ? "#4caf50" : "#f44336",
+        color: connected ? "#4caf50" : "#f44336",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+      }}
+    >
+      <FiberManualRecordIcon sx={{ fontSize: 10 }} />
+      {connected ? "Connected" : "Disconnected"}
+    </Box>
+  );
+}