@natoe/colab 0.1.24 → 0.1.27

package/dist/index.d.mts

@@ -88,6 +88,19 @@ interface CollabConfig {
     onUploadFile?: (file: File | Blob, fileName?: string) => Promise<string>;
     onDeepLink?: (path: string) => void;
     onError?: (error: CollabError) => void;
+    /**
+     * Report a message. The host captures any reason UI and calls its backend.
+     * The "Report" message action renders only when this callback is provided.
+     */
+    onReportMessage?: (message: Message) => void | Promise<void>;
+    /**
+     * Block a user. The "Block" action renders only when this callback is set.
+     */
+    onBlockUser?: (userId: string, userName: string) => void | Promise<void>;
+    /** Unblock a previously blocked user. */
+    onUnblockUser?: (userId: string) => void | Promise<void>;
+    /** IDs of users the current user has blocked — their messages are hidden. */
+    blockedUserIds?: string[];
 }
 type UserRole = 'lab' | 'radiologist' | 'physician' | 'admin';
 interface PatientData {
@@ -932,6 +945,12 @@ interface MessageListProps {
     onPin?: (messageId: string) => void;
     onUnpin?: (messageId: string) => void;
     onCopy?: (text: string) => void;
+    /** Report a message (moderation). Shown only for others' messages. */
+    onReport?: (message: Message) => void;
+    /** Block a message's sender (moderation). Shown only for others' messages. */
+    onBlock?: (message: Message) => void;
+    /** Sender IDs to hide locally (blocked users). */
+    blockedUserIds?: string[];
     /** Retry a failed message (own bubbles only) */
     onRetry?: (messageId: string) => void;
     pinDisabled?: boolean;
@@ -953,6 +972,10 @@ interface MessageBubbleProps {
     onPin?: (messageId: string) => void;
     onUnpin?: (messageId: string) => void;
     onCopy?: (text: string) => void;
+    /** Report this message (moderation). Only shown for others' messages. */
+    onReport?: (message: Message) => void;
+    /** Block this message's sender (moderation). Only shown for others' messages. */
+    onBlock?: (message: Message) => void;
     onReplyJumpTo?: (messageId: string) => void;
     /** Re-send a previously-failed message (own bubbles only) */
     onRetry?: (messageId: string) => void;
@@ -960,7 +983,7 @@ interface MessageBubbleProps {
     pinDisabled?: boolean;
     className?: string;
 }
-declare function MessageBubble({ message, isOwn, participants, currentUserId, showSeenBy, onDeepLinkClick, onReply, onPin, onUnpin, onCopy, onReplyJumpTo, onRetry, pinDisabled, className, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+declare function MessageBubble({ message, isOwn, participants, currentUserId, showSeenBy, onDeepLinkClick, onReply, onPin, onUnpin, onCopy, onReport, onBlock, onReplyJumpTo, onRetry, pinDisabled, className, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
 
 interface MessageInputProps {
     onSendText: (body: string) => Promise<void>;
@@ -984,6 +1007,12 @@ interface MessageActionsMenuProps {
     onPin: (messageId: string) => void;
     onUnpin: (messageId: string) => void;
     onCopy?: (text: string) => void;
+    /** Report this message (moderation). Rendered only when `canModerate`. */
+    onReport?: (message: Message) => void;
+    /** Block this message's sender (moderation). Rendered only when `canModerate`. */
+    onBlock?: (message: Message) => void;
+    /** Enable moderation actions (Report / Block) — true for others' messages. */
+    canModerate?: boolean;
     /** Whether we've hit the pin limit — if true, pin is disabled */
     pinDisabled?: boolean;
     /** Anchor the popover to the right edge of the trigger (use for messages on the left side of the panel) */
@@ -998,7 +1027,7 @@ interface MessageActionsMenuProps {
  *
  * Closes on outside-click, Escape, window resize, or scroll outside the menu.
  */
-declare function MessageActionsMenu({ message, onReply, onPin, onUnpin, onCopy, pinDisabled, anchorRight, className, }: MessageActionsMenuProps): react_jsx_runtime.JSX.Element;
+declare function MessageActionsMenu({ message, onReply, onPin, onUnpin, onCopy, onReport, onBlock, canModerate, pinDisabled, anchorRight, className, }: MessageActionsMenuProps): react_jsx_runtime.JSX.Element;
 
 interface ReplyPreviewProps {
     /** The message being replied to */

package/dist/index.d.ts

@@ -88,6 +88,19 @@ interface CollabConfig {
     onUploadFile?: (file: File | Blob, fileName?: string) => Promise<string>;
     onDeepLink?: (path: string) => void;
     onError?: (error: CollabError) => void;
+    /**
+     * Report a message. The host captures any reason UI and calls its backend.
+     * The "Report" message action renders only when this callback is provided.
+     */
+    onReportMessage?: (message: Message) => void | Promise<void>;
+    /**
+     * Block a user. The "Block" action renders only when this callback is set.
+     */
+    onBlockUser?: (userId: string, userName: string) => void | Promise<void>;
+    /** Unblock a previously blocked user. */
+    onUnblockUser?: (userId: string) => void | Promise<void>;
+    /** IDs of users the current user has blocked — their messages are hidden. */
+    blockedUserIds?: string[];
 }
 type UserRole = 'lab' | 'radiologist' | 'physician' | 'admin';
 interface PatientData {
@@ -932,6 +945,12 @@ interface MessageListProps {
     onPin?: (messageId: string) => void;
     onUnpin?: (messageId: string) => void;
     onCopy?: (text: string) => void;
+    /** Report a message (moderation). Shown only for others' messages. */
+    onReport?: (message: Message) => void;
+    /** Block a message's sender (moderation). Shown only for others' messages. */
+    onBlock?: (message: Message) => void;
+    /** Sender IDs to hide locally (blocked users). */
+    blockedUserIds?: string[];
     /** Retry a failed message (own bubbles only) */
     onRetry?: (messageId: string) => void;
     pinDisabled?: boolean;
@@ -953,6 +972,10 @@ interface MessageBubbleProps {
     onPin?: (messageId: string) => void;
     onUnpin?: (messageId: string) => void;
     onCopy?: (text: string) => void;
+    /** Report this message (moderation). Only shown for others' messages. */
+    onReport?: (message: Message) => void;
+    /** Block this message's sender (moderation). Only shown for others' messages. */
+    onBlock?: (message: Message) => void;
     onReplyJumpTo?: (messageId: string) => void;
     /** Re-send a previously-failed message (own bubbles only) */
     onRetry?: (messageId: string) => void;
@@ -960,7 +983,7 @@ interface MessageBubbleProps {
     pinDisabled?: boolean;
     className?: string;
 }
-declare function MessageBubble({ message, isOwn, participants, currentUserId, showSeenBy, onDeepLinkClick, onReply, onPin, onUnpin, onCopy, onReplyJumpTo, onRetry, pinDisabled, className, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
+declare function MessageBubble({ message, isOwn, participants, currentUserId, showSeenBy, onDeepLinkClick, onReply, onPin, onUnpin, onCopy, onReport, onBlock, onReplyJumpTo, onRetry, pinDisabled, className, }: MessageBubbleProps): react_jsx_runtime.JSX.Element;
 
 interface MessageInputProps {
     onSendText: (body: string) => Promise<void>;
@@ -984,6 +1007,12 @@ interface MessageActionsMenuProps {
     onPin: (messageId: string) => void;
     onUnpin: (messageId: string) => void;
     onCopy?: (text: string) => void;
+    /** Report this message (moderation). Rendered only when `canModerate`. */
+    onReport?: (message: Message) => void;
+    /** Block this message's sender (moderation). Rendered only when `canModerate`. */
+    onBlock?: (message: Message) => void;
+    /** Enable moderation actions (Report / Block) — true for others' messages. */
+    canModerate?: boolean;
     /** Whether we've hit the pin limit — if true, pin is disabled */
     pinDisabled?: boolean;
     /** Anchor the popover to the right edge of the trigger (use for messages on the left side of the panel) */
@@ -998,7 +1027,7 @@ interface MessageActionsMenuProps {
  *
  * Closes on outside-click, Escape, window resize, or scroll outside the menu.
  */
-declare function MessageActionsMenu({ message, onReply, onPin, onUnpin, onCopy, pinDisabled, anchorRight, className, }: MessageActionsMenuProps): react_jsx_runtime.JSX.Element;
+declare function MessageActionsMenu({ message, onReply, onPin, onUnpin, onCopy, onReport, onBlock, canModerate, pinDisabled, anchorRight, className, }: MessageActionsMenuProps): react_jsx_runtime.JSX.Element;
 
 interface ReplyPreviewProps {
     /** The message being replied to */

package/dist/index.js

@@ -1948,6 +1948,20 @@ function MoreIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
+function AlertIcon({ size = 14, color = "currentColor" }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
+    }
+  );
+}
 var VIEWPORT_MARGIN = 8;
 var TRIGGER_GAP = 4;
 function MessageActionsMenu({
@@ -1956,6 +1970,9 @@ function MessageActionsMenu({
   onPin,
   onUnpin,
   onCopy,
+  onReport,
+  onBlock,
+  canModerate = false,
   pinDisabled = false,
   anchorRight = false,
   className
@@ -2094,6 +2111,36 @@ function MessageActionsMenu({
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copy text" })
             ]
           }
+        ),
+        canModerate && (onReport || onBlock) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles4.divider }),
+        canModerate && onReport && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            onClick: () => run(() => onReport(message)),
+            style: styles4.item,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { size: 16, color: COLOR.neutral700 }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Report message" })
+            ]
+          }
+        ),
+        canModerate && onBlock && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            onClick: () => run(() => onBlock(message)),
+            style: { ...styles4.item, ...styles4.itemDanger },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { size: 16, color: "#c0392b" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                "Block ",
+                message.senderName
+              ] })
+            ]
+          }
         )
       ]
     }
@@ -2172,6 +2219,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" }) {
@@ -2188,20 +2243,6 @@ function FileIcon({ size = 18, color = "currentColor" }) {
     }
   );
 }
-function AlertIcon({ size = 14, color = "currentColor" }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
-    }
-  );
-}
 function RoleAvatarIcon({
   role,
   size = 18,
@@ -2303,6 +2344,8 @@ function MessageBubble({
   onPin,
   onUnpin,
   onCopy,
+  onReport,
+  onBlock,
   onReplyJumpTo,
   onRetry,
   pinDisabled = false,
@@ -2311,7 +2354,8 @@ function MessageBubble({
   if (message.type === "system") {
     return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: styles5.actionsSlot, children: /* @__PURE__ */ jsxRuntime.jsx(
     MessageActionsMenu,
     {
@@ -2323,6 +2367,9 @@ function MessageBubble({
       onUnpin: onUnpin ?? (() => {
       }),
       onCopy,
+      onReport,
+      onBlock,
+      canModerate,
       pinDisabled,
       anchorRight: !isOwn
     }
@@ -2859,6 +2906,9 @@ var MessageList = React4.forwardRef(function MessageList2({
   onPin,
   onUnpin,
   onCopy,
+  onReport,
+  onBlock,
+  blockedUserIds,
   onRetry,
   pinDisabled,
   className
@@ -2962,7 +3012,7 @@ var MessageList = React4.forwardRef(function MessageList2({
         messages.length === 0 && isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles6.firstLoad, children: /* @__PURE__ */ jsxRuntime.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;
@@ -2985,6 +3035,8 @@ var MessageList = React4.forwardRef(function MessageList2({
                   onPin,
                   onUnpin,
                   onCopy,
+                  onReport,
+                  onBlock,
                   onRetry,
                   pinDisabled
                 }
@@ -4604,6 +4656,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
         }
@@ -5022,6 +5077,8 @@ function useInlineCollab({
   const elementRef = React4.useRef(null);
   const observerRef = React4.useRef(null);
   const subscribedConversationIdRef = React4.useRef(null);
+  const latestMessageIdRef = React4.useRef(null);
+  const lastMarkedReadIdRef = React4.useRef(null);
   const channelSubscriptionRef = React4.useRef(null);
   const trimToLimit = React4.useCallback(
     (msgs) => msgs.length > messageLimit ? msgs.slice(msgs.length - messageLimit) : msgs,
@@ -5031,6 +5088,18 @@ function useInlineCollab({
     () => buildChannelName(patientData),
     [patientData]
   );
+  React4.useEffect(() => {
+    latestMessageIdRef.current = messages[messages.length - 1]?.id ?? null;
+  }, [messages]);
+  const markLatestRead = React4.useCallback(
+    (conversationId) => {
+      const messageId = latestMessageIdRef.current;
+      if (!messageId || lastMarkedReadIdRef.current === messageId) return;
+      lastMarkedReadIdRef.current = messageId;
+      socket.markAsRead(conversationId, messageId);
+    },
+    [socket]
+  );
   React4.useEffect(() => {
     let cancelled = false;
     const load = async () => {
@@ -5164,6 +5233,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?.({
@@ -5182,7 +5252,8 @@ function useInlineCollab({
       invalidatePreview,
       subscribe,
       socket,
-      config
+      config,
+      markLatestRead
     ]
   );
   const sendMessage = React4.useCallback(