@strapi-community/plugin-io 5.0.4 → 5.1.0

package/README.md

@@ -39,6 +39,12 @@ Add real-time capabilities to your Strapi application with WebSocket support. Au
 - **Role-Based Access Control** - Built-in permission checks for JWT and API tokens
 - **Multi-Client Support** - Handle 2500+ concurrent connections efficiently
 
+### Live Presence (NEW)
+- **Real-Time Presence Awareness** - See who else is editing the same content
+- **Typing Indicator** - See when someone is typing and in which field
+- **Admin Panel Sidebar** - Live presence panel integrated into Content Manager
+- **Session-Based Auth** - Secure admin authentication for Socket.IO connections
+
 ### Developer Experience
 - **Visual Admin Panel** - Configure everything through the Strapi admin interface
 - **TypeScript Support** - Full type definitions for IntelliSense
@@ -833,6 +839,39 @@ Navigate to **Settings > Socket.IO > Monitoring** for live statistics:
 - Send test events
 - Reset statistics
 
+### Live Presence Panel
+
+When editing content in the Content Manager, a **Live Presence** panel appears in the sidebar showing:
+
+- **Connection Status** - Live indicator showing real-time sync is active
+- **Active Editors** - List of other users editing the same content
+- **Typing Indicator** - Shows when someone is typing and in which field
+
+**How It Works:**
+
+1. When you open a content entry, the panel connects via Socket.IO
+2. Other editors on the same entry appear in the panel
+3. Typing in any field broadcasts a typing indicator to others
+4. When you leave, others are notified
+
+**Example Display:**
+
+```
++-----------------------------+
+| Live Presence               |
++-----------------------------+
+| [*] Live                    |
+|     Real-time sync active   |
++-----------------------------+
+| ALSO EDITING (1)            |
+| +-------------------------+ |
+| | SA  Sarah Admin         | |
+| |     Typing in: title    | |
+| |            [Typing...]  | |
+| +-------------------------+ |
++-----------------------------+
+```
+
 ---
 
 ## Monitoring Service
@@ -1282,7 +1321,14 @@ Copyright (c) 2024 Strapi Community
 
 ## Changelog
 
-### v5.0.0 (Latest)
+### v5.1.0 (Latest)
+- **Live Presence System** - Real-time presence awareness in Content Manager
+- **Typing Indicator** - See when others are typing and in which field
+- **Admin Panel Sidebar** - Live presence panel integrated into edit view
+- **Admin Session Authentication** - Secure session tokens for Socket.IO
+- **Admin JWT Strategy** - New authentication strategy for admin users
+
+### v5.0.0
 - Strapi v5 support
 - Package renamed to `@strapi-community/plugin-io`
 - Enhanced TypeScript support

package/dist/_chunks/LivePresencePanel-BeNq_EnQ.mjs

@@ -0,0 +1,387 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { u as useIntl } from "./index-CEh8vkxY.mjs";
+import { Flex } from "@strapi/design-system";
+import { useFetchClient } from "@strapi/strapi/admin";
+import styled, { css, keyframes } from "styled-components";
+import { io } from "socket.io-client";
+import { P as PLUGIN_ID } from "./index-CzvX8YTe.mjs";
+const pulse = keyframes`
+  0%, 100% { 
+    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
+    transform: scale(1);
+  }
+  50% { 
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1);
+    transform: scale(1.1);
+  }
+`;
+const StatusCard = styled.div`
+  background: ${(props) => props.theme.colors.neutral0};
+  border: 1px solid ${({ $status, theme }) => $status === "connected" ? "rgba(34, 197, 94, 0.3)" : $status === "error" ? "rgba(239, 68, 68, 0.3)" : theme.colors.neutral200};
+  border-radius: 10px;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const StatusDot = styled.div`
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: ${({ $status }) => $status === "connected" ? "#22c55e" : $status === "connecting" ? "#f59e0b" : $status === "error" ? "#ef4444" : "#94a3b8"};
+  
+  ${({ $status }) => $status === "connected" && css`
+    animation: ${pulse} 2s ease-in-out infinite;
+  `}
+`;
+const StatusText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const StatusLabel = styled.span`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ $status, theme }) => $status === "connected" ? theme.colors.success600 : $status === "connecting" ? theme.colors.warning600 : $status === "error" ? theme.colors.danger600 : theme.colors.neutral600};
+`;
+const StatusSubtext = styled.span`
+  font-size: 12px;
+  color: ${(props) => props.theme.colors.neutral500};
+`;
+const SectionTitle = styled.div`
+  font-size: 11px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral600};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+`;
+const EditorItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  background: ${(props) => props.theme.colors.neutral0};
+  border-radius: 10px;
+  border: 1px solid ${(props) => props.theme.colors.neutral150};
+  transition: all 0.2s ease;
+  
+  &:hover {
+    border-color: ${(props) => props.theme.colors.primary200};
+    box-shadow: 0 2px 8px rgba(73, 69, 255, 0.08);
+    transform: translateY(-1px);
+  }
+`;
+const EDITOR_COLORS = [
+  "linear-gradient(135deg, #4945ff 0%, #7b79ff 100%)",
+  "linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)",
+  "linear-gradient(135deg, #10b981 0%, #34d399 100%)",
+  "linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%)",
+  "linear-gradient(135deg, #ef4444 0%, #f87171 100%)",
+  "linear-gradient(135deg, #ec4899 0%, #f472b6 100%)"
+];
+const EditorAvatar = styled.div`
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color || EDITOR_COLORS[0]};
+  color: white;
+  font-size: 12px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+const EditorInfo = styled.div`
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const EditorName = styled.span`
+  font-size: 13px;
+  font-weight: 600;
+  color: ${(props) => props.theme.colors.neutral800};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const EditorEmail = styled.span`
+  font-size: 11px;
+  color: ${(props) => props.theme.colors.neutral500};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const EditingBadge = styled.span`
+  font-size: 10px;
+  font-weight: 600;
+  color: #166534;
+  background: #dcfce7;
+  padding: 4px 8px;
+  border-radius: 12px;
+  flex-shrink: 0;
+`;
+const TypingBadge = styled.span`
+  font-size: 10px;
+  font-weight: 600;
+  color: #92400e;
+  background: #fef3c7;
+  padding: 4px 8px;
+  border-radius: 12px;
+  flex-shrink: 0;
+`;
+const EmptyState = styled.div`
+  text-align: center;
+  padding: 16px;
+  background: ${(props) => props.theme.colors.neutral100};
+  border-radius: 10px;
+  border: 1px dashed ${(props) => props.theme.colors.neutral300};
+`;
+const EmptyText = styled.span`
+  font-size: 13px;
+  color: ${(props) => props.theme.colors.neutral500};
+`;
+const getEditorInitials = (user = {}) => {
+  const first = (user.firstname?.[0] || user.username?.[0] || user.email?.[0] || "?").toUpperCase();
+  const last = (user.lastname?.[0] || "").toUpperCase();
+  return `${first}${last}`.trim();
+};
+const getEditorName = (user = {}) => {
+  if (user.firstname) {
+    return `${user.firstname} ${user.lastname || ""}`.trim();
+  }
+  return user.username || user.email || "Unknown";
+};
+const LivePresencePanel = ({ documentId, model, document }) => {
+  const { formatMessage } = useIntl();
+  const { post } = useFetchClient();
+  const t = (id, defaultMessage, values) => formatMessage({ id: `${PLUGIN_ID}.${id}`, defaultMessage }, values);
+  const socketRef = useRef(null);
+  const [sessionData, setSessionData] = useState(null);
+  const [presenceState, setPresenceState] = useState({
+    status: "initializing",
+    editors: [],
+    typingUsers: [],
+    error: null
+  });
+  const uid = model?.uid || model;
+  useEffect(() => {
+    if (!uid || !documentId) {
+      setPresenceState((prev) => ({ ...prev, status: "disconnected", error: "No content" }));
+      return;
+    }
+    let cancelled = false;
+    const getSession = async () => {
+      try {
+        setPresenceState((prev) => ({ ...prev, status: "requesting" }));
+        const { data } = await post(`/${PLUGIN_ID}/presence/session`, {});
+        if (cancelled) return;
+        if (!data || !data.token) {
+          throw new Error("Invalid session response");
+        }
+        console.log(`[${PLUGIN_ID}] Presence session obtained for:`, data.user?.email);
+        setSessionData(data);
+        setPresenceState((prev) => ({ ...prev, status: "connecting" }));
+      } catch (error2) {
+        if (cancelled) return;
+        console.error(`[${PLUGIN_ID}] Failed to get presence session:`, error2);
+        setPresenceState((prev) => ({
+          ...prev,
+          status: "error",
+          error: error2.message || "Failed to get session"
+        }));
+      }
+    };
+    getSession();
+    return () => {
+      cancelled = true;
+    };
+  }, [uid, documentId, post]);
+  useEffect(() => {
+    if (!sessionData?.token || !uid || !documentId) {
+      return;
+    }
+    const socketUrl = sessionData.wsUrl || `${window.location.protocol}//${window.location.host}`;
+    const socket = io(socketUrl, {
+      path: sessionData.wsPath || "/socket.io",
+      transports: ["websocket", "polling"],
+      auth: {
+        token: sessionData.token,
+        strategy: "admin-jwt",
+        isAdmin: true
+      },
+      reconnection: true,
+      reconnectionAttempts: 3
+    });
+    socketRef.current = socket;
+    let lastTypingEmit = 0;
+    const TYPING_THROTTLE = 2e3;
+    const getFieldName = (element) => {
+      const name = element.name || element.id || "";
+      const label = element.closest("label") || document.querySelector(`label[for="${element.id}"]`);
+      if (label) {
+        return label.textContent?.trim() || name;
+      }
+      const fieldWrapper = element.closest('[class*="Field"]');
+      if (fieldWrapper) {
+        const labelEl = fieldWrapper.querySelector('label, [class*="Label"]');
+        if (labelEl) {
+          return labelEl.textContent?.trim() || name;
+        }
+      }
+      return name || "unknown field";
+    };
+    const handleInput = (event) => {
+      const target = event.target;
+      if (!["INPUT", "TEXTAREA"].includes(target.tagName)) return;
+      const isInContentManager = target.closest('[class*="ContentLayout"]') || target.closest("main");
+      if (!isInContentManager) return;
+      const now = Date.now();
+      if (now - lastTypingEmit < TYPING_THROTTLE) return;
+      lastTypingEmit = now;
+      const fieldName = getFieldName(target);
+      if (socket.connected) {
+        socket.emit("presence:typing", { uid, documentId, fieldName });
+        console.log(`[${PLUGIN_ID}] Typing in field: ${fieldName}`);
+      }
+    };
+    if (typeof document !== "undefined" && typeof document.addEventListener === "function") {
+      document.addEventListener("input", handleInput, true);
+    }
+    socket.on("connect", () => {
+      console.log(`[${PLUGIN_ID}] Presence socket connected`);
+      setPresenceState((prev) => ({ ...prev, status: "connected", error: null }));
+      socket.emit("presence:join", { uid, documentId }, (response) => {
+        if (response?.success) {
+          setPresenceState((prev) => ({
+            ...prev,
+            editors: (response.editors || []).map((e) => ({
+              ...e,
+              isCurrentUser: e.socketId === socket.id
+            }))
+          }));
+        }
+      });
+    });
+    socket.on("disconnect", () => {
+      setPresenceState((prev) => ({ ...prev, status: "disconnected" }));
+    });
+    socket.on("connect_error", (err) => {
+      console.warn(`[${PLUGIN_ID}] Presence socket error:`, err.message);
+      setPresenceState((prev) => ({ ...prev, status: "error", error: err.message }));
+    });
+    socket.on("presence:update", (data) => {
+      if (data.uid === uid && data.documentId === documentId) {
+        setPresenceState((prev) => ({
+          ...prev,
+          editors: (data.editors || []).map((e) => ({
+            ...e,
+            isCurrentUser: e.socketId === socket.id
+          }))
+        }));
+      }
+    });
+    socket.on("presence:typing", (data) => {
+      if (data.uid === uid && data.documentId === documentId) {
+        setPresenceState((prev) => {
+          const newTyping = [...prev.typingUsers.filter((t2) => t2.user?.id !== data.user?.id)];
+          newTyping.push({ user: data.user, fieldName: data.fieldName, timestamp: Date.now() });
+          return { ...prev, typingUsers: newTyping };
+        });
+        setTimeout(() => {
+          setPresenceState((prev) => ({
+            ...prev,
+            typingUsers: prev.typingUsers.filter((t2) => t2.user?.id !== data.user?.id)
+          }));
+        }, 3e3);
+      }
+    });
+    const heartbeat = setInterval(() => {
+      if (socket.connected) {
+        socket.emit("presence:heartbeat");
+      }
+    }, 3e4);
+    return () => {
+      clearInterval(heartbeat);
+      if (typeof document !== "undefined" && typeof document.removeEventListener === "function") {
+        document.removeEventListener("input", handleInput, true);
+      }
+      if (socket.connected) {
+        socket.emit("presence:leave", { uid, documentId });
+      }
+      socket.disconnect();
+      socketRef.current = null;
+    };
+  }, [sessionData, uid, documentId]);
+  const { status, editors, typingUsers, error } = presenceState;
+  const otherEditors = useMemo(() => {
+    return editors.filter((e) => !e.isCurrentUser);
+  }, [editors]);
+  const getUserTypingInfo = useCallback((userId) => {
+    const typing = typingUsers.find((t2) => t2.user?.id === userId);
+    return typing || null;
+  }, [typingUsers]);
+  useCallback((userId) => {
+    return typingUsers.some((t2) => t2.user?.id === userId);
+  }, [typingUsers]);
+  const statusLabel = useMemo(() => {
+    switch (status) {
+      case "connected":
+        return t("presence.live", "Live");
+      case "connecting":
+        return t("presence.connecting", "Connecting...");
+      case "requesting":
+        return t("presence.requesting", "Authenticating...");
+      case "initializing":
+        return t("presence.initializing", "Initializing...");
+      case "error":
+        return t("presence.error", "Connection Error");
+      case "disconnected":
+        return t("presence.disconnected", "Disconnected");
+      default:
+        return t("presence.offline", "Offline");
+    }
+  }, [status, t]);
+  const isConnected = status === "connected";
+  console.log(`[${PLUGIN_ID}] LivePresencePanel render:`, { uid, documentId, status, editors: otherEditors.length });
+  return {
+    title: t("presence.title", "Live Presence"),
+    content: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, alignItems: "stretch", style: { width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(StatusCard, { $status: status, children: [
+        /* @__PURE__ */ jsx(StatusDot, { $status: status }),
+        /* @__PURE__ */ jsxs(StatusText, { children: [
+          /* @__PURE__ */ jsx(StatusLabel, { $status: status, children: statusLabel }),
+          /* @__PURE__ */ jsx(StatusSubtext, { children: isConnected ? t("presence.realtimeActive", "Real-time sync active") : error || t("presence.establishing", "Establishing connection...") })
+        ] })
+      ] }),
+      isConnected && otherEditors.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SectionTitle, { children: t("presence.activeEditors", "Also Editing ({count})", { count: otherEditors.length }) }),
+        /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, alignItems: "stretch", children: otherEditors.map((editor, idx) => {
+          const user = editor.user || {};
+          const typingInfo = getUserTypingInfo(user.id);
+          return /* @__PURE__ */ jsxs(EditorItem, { children: [
+            /* @__PURE__ */ jsx(EditorAvatar, { $color: EDITOR_COLORS[idx % EDITOR_COLORS.length], children: getEditorInitials(user) }),
+            /* @__PURE__ */ jsxs(EditorInfo, { children: [
+              /* @__PURE__ */ jsx(EditorName, { children: getEditorName(user) }),
+              typingInfo?.fieldName ? /* @__PURE__ */ jsxs(EditorEmail, { children: [
+                "Typing in: ",
+                typingInfo.fieldName
+              ] }) : user.email && user.firstname ? /* @__PURE__ */ jsx(EditorEmail, { children: user.email }) : null
+            ] }),
+            typingInfo ? /* @__PURE__ */ jsx(TypingBadge, { children: t("presence.typing", "Typing...") }) : /* @__PURE__ */ jsx(EditingBadge, { children: t("presence.editing", "Editing") })
+          ] }, editor.socketId || idx);
+        }) })
+      ] }),
+      isConnected && otherEditors.length === 0 && /* @__PURE__ */ jsx(EmptyState, { children: /* @__PURE__ */ jsx(EmptyText, { children: t("presence.workingAlone", "You are the only editor") }) })
+    ] })
+  };
+};
+export {
+  LivePresencePanel as default
+};