@natoe/colab 0.1.24 → 0.1.27

package/dist/index.mjs

@@ -1942,6 +1942,20 @@ function MoreIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
+function AlertIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: color,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
+    }
+  );
+}
 var VIEWPORT_MARGIN = 8;
 var TRIGGER_GAP = 4;
 function MessageActionsMenu({
@@ -1950,6 +1964,9 @@ function MessageActionsMenu({
   onPin,
   onUnpin,
   onCopy,
+  onReport,
+  onBlock,
+  canModerate = false,
   pinDisabled = false,
   anchorRight = false,
   className
@@ -2088,6 +2105,36 @@ function MessageActionsMenu({
               /* @__PURE__ */ jsx("span", { children: "Copy text" })
             ]
           }
+        ),
+        canModerate && (onReport || onBlock) && /* @__PURE__ */ jsx("div", { style: styles4.divider }),
+        canModerate && onReport && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            onClick: () => run(() => onReport(message)),
+            style: styles4.item,
+            children: [
+              /* @__PURE__ */ jsx(AlertIcon, { size: 16, color: COLOR.neutral700 }),
+              /* @__PURE__ */ jsx("span", { children: "Report message" })
+            ]
+          }
+        ),
+        canModerate && onBlock && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            onClick: () => run(() => onBlock(message)),
+            style: { ...styles4.item, ...styles4.itemDanger },
+            children: [
+              /* @__PURE__ */ jsx(AlertIcon, { size: 16, color: "#c0392b" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                "Block ",
+                message.senderName
+              ] })
+            ]
+          }
         )
       ]
     }
@@ -2166,6 +2213,14 @@ var styles4 = {
   itemDisabled: {
     color: COLOR.neutral400,
     cursor: "not-allowed"
+  },
+  itemDanger: {
+    color: "#c0392b"
+  },
+  divider: {
+    height: "1px",
+    backgroundColor: COLOR.neutral200,
+    margin: "4px 0"
   }
 };
 function FileIcon({ size = 18, color = "currentColor" }) {
@@ -2182,20 +2237,6 @@ function FileIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
-function AlertIcon({ size = 14, color = "currentColor" }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: color,
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
-    }
-  );
-}
 function RoleAvatarIcon({
   role,
   size = 18,
@@ -2297,6 +2338,8 @@ function MessageBubble({
   onPin,
   onUnpin,
   onCopy,
+  onReport,
+  onBlock,
   onReplyJumpTo,
   onRetry,
   pinDisabled = false,
@@ -2305,7 +2348,8 @@ function MessageBubble({
   if (message.type === "system") {
     return /* @__PURE__ */ jsx(SystemBubble, { message });
   }
-  const hasActions = !!(onReply || onPin || onUnpin || onCopy);
+  const canModerate = !isOwn && !!(onReport || onBlock);
+  const hasActions = !!(onReply || onPin || onUnpin || onCopy) || canModerate;
   const actionsSlot = hasActions ? /* @__PURE__ */ jsx("div", { style: styles5.actionsSlot, children: /* @__PURE__ */ jsx(
     MessageActionsMenu,
     {
@@ -2317,6 +2361,9 @@ function MessageBubble({
       onUnpin: onUnpin ?? (() => {
       }),
       onCopy,
+      onReport,
+      onBlock,
+      canModerate,
       pinDisabled,
       anchorRight: !isOwn
     }
@@ -2853,6 +2900,9 @@ var MessageList = forwardRef(function MessageList2({
   onPin,
   onUnpin,
   onCopy,
+  onReport,
+  onBlock,
+  blockedUserIds,
   onRetry,
   pinDisabled,
   className
@@ -2956,7 +3006,7 @@ var MessageList = forwardRef(function MessageList2({
         messages.length === 0 && isLoading && /* @__PURE__ */ jsx("div", { style: styles6.firstLoad, children: /* @__PURE__ */ jsx(Spinner, { size: 20 }) }),
         (() => {
           let lastValidBucket = null;
-          return messages.map((message) => {
+          return messages.filter((m) => !blockedUserIds?.includes(m.senderId)).map((message) => {
             const currentBucket = dayBucketKey(message.insertedAt);
             const showDivider = !!currentBucket && currentBucket !== lastValidBucket;
             if (currentBucket) lastValidBucket = currentBucket;
@@ -2979,6 +3029,8 @@ var MessageList = forwardRef(function MessageList2({
                   onPin,
                   onUnpin,
                   onCopy,
+                  onReport,
+                  onBlock,
                   onRetry,
                   pinDisabled
                 }
@@ -4598,6 +4650,9 @@ function CollabPanel({
           onPin: handlePin,
           onUnpin: handleUnpin,
           onCopy: handleCopy,
+          onReport: config.onReportMessage ? (m) => config.onReportMessage(m) : void 0,
+          onBlock: config.onBlockUser ? (m) => config.onBlockUser(m.senderId, m.senderName) : void 0,
+          blockedUserIds: config.blockedUserIds,
           onRetry: retryMessage,
           pinDisabled
         }
@@ -5016,6 +5071,8 @@ function useInlineCollab({
   const elementRef = useRef(null);
   const observerRef = useRef(null);
   const subscribedConversationIdRef = useRef(null);
+  const latestMessageIdRef = useRef(null);
+  const lastMarkedReadIdRef = useRef(null);
   const channelSubscriptionRef = useRef(null);
   const trimToLimit = useCallback(
     (msgs) => msgs.length > messageLimit ? msgs.slice(msgs.length - messageLimit) : msgs,
@@ -5025,6 +5082,18 @@ function useInlineCollab({
     () => buildChannelName(patientData),
     [patientData]
   );
+  useEffect(() => {
+    latestMessageIdRef.current = messages[messages.length - 1]?.id ?? null;
+  }, [messages]);
+  const markLatestRead = useCallback(
+    (conversationId) => {
+      const messageId = latestMessageIdRef.current;
+      if (!messageId || lastMarkedReadIdRef.current === messageId) return;
+      lastMarkedReadIdRef.current = messageId;
+      socket.markAsRead(conversationId, messageId);
+    },
+    [socket]
+  );
   useEffect(() => {
     let cancelled = false;
     const load = async () => {
@@ -5158,6 +5227,7 @@ function useInlineCollab({
       try {
         await socket.sendMessage(preview.conversationId, payload);
         setUnreadCount(0);
+        markLatestRead(preview.conversationId);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Failed to send message");
         config.onError?.({
@@ -5176,7 +5246,8 @@ function useInlineCollab({
       invalidatePreview,
       subscribe,
       socket,
-      config
+      config,
+      markLatestRead
     ]
   );
   const sendMessage = useCallback(