@natoe/colab 0.1.23 → 0.1.26

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
         }
@@ -5553,7 +5608,7 @@ var styles14 = {
   },
   messageRow: {
     display: "flex",
-    alignItems: "center",
+    alignItems: "flex-start",
     gap: SPACE.S2,
     fontSize: FONT_SIZE.xs,
     lineHeight: LINE_HEIGHT.normal,
@@ -5563,7 +5618,8 @@ var styles14 = {
     flexShrink: 0,
     width: "6px",
     height: "6px",
-    borderRadius: RADIUS.full
+    borderRadius: RADIUS.full,
+    marginTop: "7px"
   },
   senderName: {
     flexShrink: 0,
@@ -5572,9 +5628,11 @@ var styles14 = {
   },
   messageText: {
     color: COLOR.neutral600,
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
     overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
+    wordBreak: "break-word",
     minWidth: 0,
     flex: 1
   },