sceyt-chat-react-uikit 1.9.0-beta.16 → 1.9.0-beta.17

package/components/Messages/MessageList/index.d.ts

@@ -106,6 +106,13 @@ interface MessagesProps {
     endVoteIcon?: JSX.Element;
     /** Replaces the default pin icon in the pinned-messages banner. */
     pinnedMessageIcon?: JSX.Element;
+    /**
+     * Replaces the compact pinned-message preview for app-specific message
+     * types. Return null or undefined to use the UIKit preview.
+     */
+    renderPinnedMessagePreview?: (message: IMessage, context: {
+        placement: 'banner' | 'system';
+    }) => React.ReactNode | null | undefined;
     messageStatusSize?: string;
     messageStatusColor?: string;
     messageReadStatusColor?: string;

package/components/Messages/PinnedMessagesBanner.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
-declare const PinnedMessagesBanner: ({ channelId, pinIcon, onOpenList }: {
+import { IMessage } from '../../types';
+declare const PinnedMessagesBanner: ({ channelId, pinIcon, onOpenList, renderPinnedMessagePreview }: {
     channelId: string;
     pinIcon?: JSX.Element | undefined;
     onOpenList?: (() => void) | undefined;
+    /**
+     * Lets an integrator replace the compact preview for app-specific message
+     * types. Return null or undefined to keep the UIKit preview.
+     */
+    renderPinnedMessagePreview?: ((message: IMessage, context: {
+        placement: 'banner' | 'system';
+    }) => React.ReactNode | null | undefined) | undefined;
 }) => React.JSX.Element | null;
 export default PinnedMessagesBanner;

package/components/Messages/SystemMessage/index.d.ts

@@ -14,8 +14,12 @@ interface ISystemMessageProps {
     backgroundColor?: string;
     borderRadius?: string;
     setLastVisibleMessageId?: (message: IMessage) => void;
+    /** Replaces a PM source-message preview for app-specific message types. */
+    renderPinnedMessagePreview?: (message: IMessage, context: {
+        placement: 'banner' | 'system';
+    }) => React.ReactNode | null | undefined;
 }
-declare const _default: React.MemoExoticComponent<({ message, nextMessage, channel, differentUserMessageSpacing, fontSize, textColor, border, backgroundColor, borderRadius, contactsMap, setLastVisibleMessageId }: ISystemMessageProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ message, nextMessage, channel, differentUserMessageSpacing, fontSize, textColor, border, backgroundColor, borderRadius, contactsMap, setLastVisibleMessageId, renderPinnedMessagePreview }: ISystemMessageProps) => React.JSX.Element>;
 export default _default;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     topOffset?: number | undefined;

package/components/Messages/index.d.ts

@@ -99,6 +99,13 @@ interface MessagesProps {
     endVoteIcon?: JSX.Element;
     /** Replaces the default pin icon in the pinned-messages banner. */
     pinnedMessageIcon?: JSX.Element;
+    /**
+     * Replaces the compact pinned-message preview for app-specific message
+     * types. Return null or undefined to use the UIKit preview.
+     */
+    renderPinnedMessagePreview?: (message: IMessage, context: {
+        placement: 'banner' | 'system';
+    }) => React.ReactNode | null | undefined;
     openFrequentlyUsedReactions?: boolean;
     fixEmojiCategoriesTitleOnTop?: boolean;
     emojisCategoryIconsPosition?: 'top' | 'bottom';

package/index.js

@@ -14322,6 +14322,7 @@ var messageSlice = createSlice({
     },
     requestPinnedMessagesListClose: function requestPinnedMessagesListClose(state) {
       if (state.pinnedMessagesListOpen) {
+        state.pinnedMessagesListOpen = false;
         state.pinnedMessagesListCloseRequested = true;
       }
     },
@@ -43195,7 +43196,8 @@ var Message = function Message(_ref) {
     backgroundColor = _ref.backgroundColor,
     borderRadius = _ref.borderRadius,
     contactsMap = _ref.contactsMap,
-    setLastVisibleMessageId = _ref.setLastVisibleMessageId;
+    setLastVisibleMessageId = _ref.setLastVisibleMessageId,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview;
   var _useColor = useColors(),
     textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
     overlayBackground = _useColor[THEME_COLORS.OVERLAY_BACKGROUND];
@@ -43216,6 +43218,10 @@ var Message = function Message(_ref) {
     return getPinnedMessagePreview(message.parentMessage, contactsMap, getFromContacts);
   }, [contactsMap, getFromContacts, message.parentMessage]);
   var pinnedMessageDeleted = isPinnedMessageDeleted(message.parentMessage);
+  var customPinnedMessagePreview = pinnedMessageDeleted || !message.parentMessage ? null : renderPinnedMessagePreview === null || renderPinnedMessagePreview === void 0 ? void 0 : renderPinnedMessagePreview(message.parentMessage, {
+    placement: 'system'
+  });
+  var pinnedPreview = customPinnedMessagePreview != null ? customPinnedMessagePreview : pinnedMessagePreview;
   var navigateToPinnedMessage = function navigateToPinnedMessage() {
     if (parentMessageId) navigateToMessage(parentMessageId);
   };
@@ -43252,7 +43258,7 @@ var Message = function Message(_ref) {
     onClick: navigateToPinnedMessage,
     disabled: !parentMessageId,
     "aria-label": parentMessageId ? 'Go to pinned message' : undefined
-  }, pinnedMessagePreview ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName + " pinned ", /*#__PURE__*/React__default.createElement(PinnedMessagePreview, null, pinnedMessageDeleted ? pinnedMessagePreview : "\"" + pinnedMessagePreview + "\""), !pinnedMessageDeleted && '.')) : actorName + " pinned a message.")) : (/*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName, message.body === 'CC' ? ' created this channel ' : message.body === 'CG' ? ' created this group' : message.body === 'AM' ? " added " + (!!(messageMetas && messageMetas.m) && messageMetas.m.slice(0, 5).map(function (mem) {
+  }, pinnedPreview ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName + " pinned ", /*#__PURE__*/React__default.createElement(PinnedMessagePreview, null, pinnedMessageDeleted || customPinnedMessagePreview ? pinnedPreview : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\"", pinnedPreview, "\""))), !pinnedMessageDeleted && '.')) : actorName + " pinned a message.")) : (/*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName, message.body === 'CC' ? ' created this channel ' : message.body === 'CG' ? ' created this group' : message.body === 'AM' ? " added " + (!!(messageMetas && messageMetas.m) && messageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? 'You' : " " + systemMessageUserName(mem, contactsMap[mem], message.mentionedUsers);
   })) + " " + (messageMetas && messageMetas.m && messageMetas.m.length > 5 ? "and " + (messageMetas.m.length - 5) + " more" : '') : message.body === 'RM' ? " removed " + (messageMetas && messageMetas.m && messageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? 'You' : " " + systemMessageUserName(mem, contactsMap[mem], message.mentionedUsers);
@@ -43346,7 +43352,8 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   var _active$message, _active$message2, _active$message3, _active$message3$atta, _active$message4;
   var channelId = _ref.channelId,
     pinIcon = _ref.pinIcon,
-    onOpenList = _ref.onOpenList;
+    onOpenList = _ref.onOpenList,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview;
   var dispatch = useDispatch();
   var pins = useSelector(pinnedMessagesSelector(channelId));
   var nextToken = useSelector(pinnedMessagesCursorSelector(channelId));
@@ -43424,6 +43431,9 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   });
   var linkPreviewImage = getLinkPreviewImage(attachment);
   var sourceMessageDeleted = isPinnedMessageDeleted(active.message);
+  var customPinnedMessagePreview = sourceMessageDeleted ? null : renderPinnedMessagePreview === null || renderPinnedMessagePreview === void 0 ? void 0 : renderPinnedMessagePreview(active.message, {
+    placement: 'banner'
+  });
   var hasLeadingPreview = !sourceMessageDeleted && (hasAttachmentTile(attachmentForPreview) || (attachment === null || attachment === void 0 ? void 0 : attachment.type) === attachmentTypes.link);
   var markerFade = count <= 3 ? 'none' : index <= 1 ? 'top' : index >= count - 2 ? 'bottom' : 'both';
   var loadNextPage = function loadNextPage() {
@@ -43507,7 +43517,7 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   }, /*#__PURE__*/React__default.createElement("strong", null, "Pinned messages"), /*#__PURE__*/React__default.createElement(PinnedCopyPreview, {
     key: active.id,
     textPrimary: textPrimary
-  }, preview(active.message, contactsMap, getFromContacts))), /*#__PURE__*/React__default.createElement(Controls$1, {
+  }, customPinnedMessagePreview != null ? customPinnedMessagePreview : preview(active.message, contactsMap, getFromContacts))), /*#__PURE__*/React__default.createElement(Controls$1, {
     onClick: function onClick(event) {
       return event.stopPropagation();
     },
@@ -45773,15 +45783,12 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
   };
   var positionNavigationControl = function positionNavigationControl(message, event) {
     var messageId = message.id || message.tid;
-    var messageContent = event.currentTarget.querySelector('.messageContent');
+    var messageContent = event.querySelector('.messageContent');
     if (!messageId || !messageContent) return;
-    var rowBounds = event.currentTarget.getBoundingClientRect();
+    var rowBounds = event.getBoundingClientRect();
     var contentBounds = messageContent.getBoundingClientRect();
-    var messageItem = event.currentTarget.querySelector('.message_item');
-    var reactionContainerId = message.id + "_reactions_container";
-    var reactionContainer = Array.from(event.currentTarget.querySelectorAll('[id]')).find(function (element) {
-      return element.id === reactionContainerId;
-    });
+    var messageItem = event.querySelector('.message_item');
+    var reactionContainer = event.querySelector('[data-reactions-container]');
     var itemMarginBottom = messageItem ? Number.parseFloat(window.getComputedStyle(messageItem).marginBottom) || 0 : 0;
     var bottom = itemMarginBottom + ((reactionContainer === null || reactionContainer === void 0 ? void 0 : reactionContainer.getBoundingClientRect().height) || 0);
     var left = message.incoming ? contentBounds.right - rowBounds.left + 8 : contentBounds.left - rowBounds.left - 36 - 8;
@@ -45795,6 +45802,17 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
       }, _extends2));
     });
   };
+  React.useEffect(function () {
+    if (pins) {
+      for (var i = 0; i < pins.length; i++) {
+        var pin = pins[i];
+        var pinnedElement = document.querySelector("[data-pinned-message-id=\"" + pin.id + "\"]");
+        if (pinnedElement) {
+          positionNavigationControl(pin.message, pinnedElement);
+        }
+      }
+    }
+  }, [pins]);
   React.useLayoutEffect(function () {
     var element = itemsRef.current;
     if (!element) return;
@@ -45831,7 +45849,7 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
       key: pin.id,
       "data-pinned-message-id": pin.id,
       onMouseEnter: function onMouseEnter(event) {
-        return positionNavigationControl(pin.message, event);
+        return positionNavigationControl(pin.message, event.currentTarget);
       }
     }, renderMessage({
       message: pin.message,
@@ -47300,7 +47318,9 @@ function EmojisPopup(_ref2) {
     backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
     border = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2];
+    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2],
+    background = _useColor[THEME_COLORS.BACKGROUND];
+  var theme = useSelector(themeSelector);
   var _useState = React.useState(false),
     rendered = _useState[0],
     setRendered = _useState[1];
@@ -47391,7 +47411,7 @@ function EmojisPopup(_ref2) {
   }, getEmojisCategoryTitle(activeCollection))), /*#__PURE__*/React__default.createElement(EmojiSection, {
     ref: emojiContainerRef,
     onScroll: handleEmojiListScroll,
-    scrollbarThumbColor: scrollbarThumbColor
+    scrollbarThumbColor: theme === 'dark' ? background : scrollbarThumbColor
   }, /*#__PURE__*/React__default.createElement(AllEmojis, null, EMOJIS.map(function (emojiBigCollection, bigColIndex) {
     var mainCollectionKey = emojiBigCollection.key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -49671,6 +49691,7 @@ var MessageReactions = function MessageReactions(_ref) {
     onToggleReactionsPopup = _ref.onToggleReactionsPopup,
     onReactionAddDelete = _ref.onReactionAddDelete,
     onOpenUserProfile = _ref.onOpenUserProfile;
+  var messageId = message.id || message.tid;
   var enableTransitionRef = React__default.useCallback(function (el) {
     if (!el) return;
     window.requestAnimationFrame(function () {
@@ -49684,7 +49705,7 @@ var MessageReactions = function MessageReactions(_ref) {
     anchorTop: reactionsAnchorTop,
     anchorBottom: reactionsAnchorBottom,
     reactionTotals: message.reactionTotals || [],
-    messageId: message.id,
+    messageId: messageId,
     handleReactionsPopupClose: onToggleReactionsPopup,
     rtlDirection: rtlDirection,
     handleAddDeleteEmoji: onReactionAddDelete,
@@ -49693,7 +49714,8 @@ var MessageReactions = function MessageReactions(_ref) {
     popupZIndex: popupZIndex
   })), /*#__PURE__*/React__default.createElement(ReactionsContainer, {
     ref: enableTransitionRef,
-    id: message.id + "_reactions_container",
+    id: messageId + "_reactions_container",
+    "data-reactions-container": true,
     border: reactionsContainerBorder,
     boxShadow: reactionsContainerBoxShadow,
     borderRadius: reactionsContainerBorderRadius,
@@ -51233,10 +51255,10 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow(false);
   }, [message, contactsMap]);
   var handleToggleReactionsPopup = React.useCallback(function () {
-    var _messageItemRef$curre;
-    var reactionsContainer = document.getElementById(message.id + "_reactions_container");
+    var _messageItemRef$curre, _messageItemRef$curre2;
+    var reactionsContainer = (_messageItemRef$curre = messageItemRef.current) === null || _messageItemRef$curre === void 0 ? void 0 : _messageItemRef$curre.querySelector('[data-reactions-container]');
     var reactionsContPos = reactionsContainer === null || reactionsContainer === void 0 ? void 0 : reactionsContainer.getBoundingClientRect();
-    var bottomPos = (_messageItemRef$curre = messageItemRef.current) === null || _messageItemRef$curre === void 0 ? void 0 : _messageItemRef$curre.getBoundingClientRect().bottom;
+    var bottomPos = (_messageItemRef$curre2 = messageItemRef.current) === null || _messageItemRef$curre2 === void 0 ? void 0 : _messageItemRef$curre2.getBoundingClientRect().bottom;
     var offsetBottom = bottomPos ? window.innerHeight - bottomPos : 0;
     setReactionsPopupPosition(offsetBottom);
     setReactionsPopupHorizontalPosition({
@@ -51249,15 +51271,15 @@ var Message$1 = function Message(_ref) {
     setReactionsPopupOpen(function (prev) {
       return !prev;
     });
-  }, [dispatch, message.id]);
+  }, [dispatch, message.id, message.tid]);
   var handleMouseEnter = React.useCallback(function () {
     if (message.state !== MESSAGE_STATUS.DELETE && !selectionIsActive && !infoPopupOpen) {
       messageActionsTimeout.current = setTimeout(function () {
-        var _messageItemRef$curre2, _messageItemRef$curre3;
+        var _messageItemRef$curre3, _messageItemRef$curre4;
         if (Date.now() - lastMediaItemClickTime < MESSAGE_ACTIONS_HOVER_DELAY * 2) {
           return;
         }
-        var msgTop = (_messageItemRef$curre2 = (_messageItemRef$curre3 = messageItemRef.current) === null || _messageItemRef$curre3 === void 0 ? void 0 : _messageItemRef$curre3.getBoundingClientRect().top) != null ? _messageItemRef$curre2 : 0;
+        var msgTop = (_messageItemRef$curre3 = (_messageItemRef$curre4 = messageItemRef.current) === null || _messageItemRef$curre4 === void 0 ? void 0 : _messageItemRef$curre4.getBoundingClientRect().top) != null ? _messageItemRef$curre3 : 0;
         setMessageActionsBelow(msgTop < MESSAGE_ACTIONS_FLIP_THRESHOLD);
         setMessageActionsShow(true);
         dispatch(setMessageMenuOpenedAC(message.id || message.tid));
@@ -52129,7 +52151,7 @@ var getMediaAttachmentValidationError = function getMediaAttachmentValidationErr
   });
   var extension = (_file$name$split$pop = file.name.split('.').pop()) === null || _file$name$split$pop === void 0 ? void 0 : _file$name$split$pop.toLowerCase();
   if (!extension || !supportedExtensions.includes(extension)) {
-    return invalidTypeMessage != null ? invalidTypeMessage : "Invalid file type. Allowed extensions are: " + supportedExtensions.join(', ') + ".";
+    return invalidTypeMessage != null ? invalidTypeMessage : "Invalid file type.";
   }
   return null;
 };
@@ -52185,6 +52207,7 @@ var MessageList = function MessageList(_ref) {
     retractVoteIcon = _ref.retractVoteIcon,
     endVoteIcon = _ref.endVoteIcon,
     pinnedMessageIcon = _ref.pinnedMessageIcon,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview,
     _ref$allowEditDeleteI = _ref.allowEditDeleteIncomingMessage,
     allowEditDeleteIncomingMessage = _ref$allowEditDeleteI === void 0 ? true : _ref$allowEditDeleteI,
     starIcon = _ref.starIcon,
@@ -52660,7 +52683,8 @@ var MessageList = function MessageList(_ref) {
         border: dateDividerBorder,
         backgroundColor: dateDividerBackgroundColor,
         borderRadius: dateDividerBorderRadius,
-        setLastVisibleMessageId: setLastVisibleMessageId
+        setLastVisibleMessageId: setLastVisibleMessageId,
+        renderPinnedMessagePreview: renderPinnedMessagePreview
       });
     }
     return /*#__PURE__*/React__default.createElement(MessageWrapper, {
@@ -52847,7 +52871,8 @@ var MessageList = function MessageList(_ref) {
   }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null)), "Drag & drop to send as media")))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (channel === null || channel === void 0 ? void 0 : channel.id) && (/*#__PURE__*/React__default.createElement(PinnedMessagesBanner, {
     channelId: channel.id,
     pinIcon: pinnedMessageIcon,
-    onOpenList: openPinnedMessagesList
+    onOpenList: openPinnedMessagesList,
+    renderPinnedMessagePreview: renderPinnedMessagePreview
   })), /*#__PURE__*/React__default.createElement(ScrollViewport, null, isJumpingToItem && (/*#__PURE__*/React__default.createElement(JumpOverlay, null, /*#__PURE__*/React__default.createElement(JumpSpinner, {
     "$color": iconInactive
   }))), /*#__PURE__*/React__default.createElement(Container$j, {
@@ -53102,6 +53127,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     retractVoteIcon = _ref.retractVoteIcon,
     endVoteIcon = _ref.endVoteIcon,
     pinnedMessageIcon = _ref.pinnedMessageIcon,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview,
     reactionIconOrder = _ref.reactionIconOrder,
     openFrequentlyUsedReactions = _ref.openFrequentlyUsedReactions,
     fixEmojiCategoriesTitleOnTop = _ref.fixEmojiCategoriesTitleOnTop,
@@ -53269,6 +53295,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     retractVoteIcon: retractVoteIcon,
     endVoteIcon: endVoteIcon,
     pinnedMessageIcon: pinnedMessageIcon,
+    renderPinnedMessagePreview: renderPinnedMessagePreview,
     reactionIconOrder: reactionIconOrder,
     openFrequentlyUsedReactions: openFrequentlyUsedReactions,
     fixEmojiCategoriesTitleOnTop: fixEmojiCategoriesTitleOnTop,
@@ -54891,7 +54918,9 @@ function EmojisPopup$1(_ref2) {
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
     border = _useColor[THEME_COLORS.BORDER],
-    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2];
+    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2],
+    background = _useColor[THEME_COLORS.BACKGROUND];
+  var theme = useSelector(themeSelector);
   var richTextEditor;
   try {
     var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -54970,6 +54999,7 @@ function EmojisPopup$1(_ref2) {
       }
     }, 300);
   }, []);
+  console.log(theme, theme === 'dark' ? background : scrollbarThumbColor);
   return /*#__PURE__*/React__default.createElement(Container$k, {
     backgroundColor: backgroundSections,
     borderColor: border,
@@ -55002,7 +55032,7 @@ function EmojisPopup$1(_ref2) {
   }, getEmojisCategoryTitle(activeCollection))), /*#__PURE__*/React__default.createElement(EmojiSection$1, {
     ref: emojiContainerRef,
     onScroll: handleEmojiListScroll,
-    scrollbarThumbColor: scrollbarThumbColor
+    scrollbarThumbColor: theme === 'dark' ? background : scrollbarThumbColor
   }, /*#__PURE__*/React__default.createElement(AllEmojis$1, null, EMOJIS.map(function (emojiBigCollection, bigColIndex) {
     var mainCollectionKey = emojiBigCollection.key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -58326,7 +58356,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   return /*#__PURE__*/React__default.createElement(SendMessageWrapper, {
     ref: sendMessageWrapperRef,
     backgroundColor: backgroundColor || background,
-    "$hidden": pinnedMessagesListOpen
+    "$hidden": pinnedMessagesListOpen && !(selectedMessagesMap && selectedMessagesMap.size > 0)
   }, /*#__PURE__*/React__default.createElement(Container$m, {
     margin: margin,
     padding: padding,

package/index.modern.js

@@ -14302,6 +14302,7 @@ var messageSlice = createSlice({
     },
     requestPinnedMessagesListClose: function requestPinnedMessagesListClose(state) {
       if (state.pinnedMessagesListOpen) {
+        state.pinnedMessagesListOpen = false;
         state.pinnedMessagesListCloseRequested = true;
       }
     },
@@ -43175,7 +43176,8 @@ var Message = function Message(_ref) {
     backgroundColor = _ref.backgroundColor,
     borderRadius = _ref.borderRadius,
     contactsMap = _ref.contactsMap,
-    setLastVisibleMessageId = _ref.setLastVisibleMessageId;
+    setLastVisibleMessageId = _ref.setLastVisibleMessageId,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview;
   var _useColor = useColors(),
     textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
     overlayBackground = _useColor[THEME_COLORS.OVERLAY_BACKGROUND];
@@ -43196,6 +43198,10 @@ var Message = function Message(_ref) {
     return getPinnedMessagePreview(message.parentMessage, contactsMap, getFromContacts);
   }, [contactsMap, getFromContacts, message.parentMessage]);
   var pinnedMessageDeleted = isPinnedMessageDeleted(message.parentMessage);
+  var customPinnedMessagePreview = pinnedMessageDeleted || !message.parentMessage ? null : renderPinnedMessagePreview === null || renderPinnedMessagePreview === void 0 ? void 0 : renderPinnedMessagePreview(message.parentMessage, {
+    placement: 'system'
+  });
+  var pinnedPreview = customPinnedMessagePreview != null ? customPinnedMessagePreview : pinnedMessagePreview;
   var navigateToPinnedMessage = function navigateToPinnedMessage() {
     if (parentMessageId) navigateToMessage(parentMessageId);
   };
@@ -43232,7 +43238,7 @@ var Message = function Message(_ref) {
     onClick: navigateToPinnedMessage,
     disabled: !parentMessageId,
     "aria-label": parentMessageId ? 'Go to pinned message' : undefined
-  }, pinnedMessagePreview ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName + " pinned ", /*#__PURE__*/React__default.createElement(PinnedMessagePreview, null, pinnedMessageDeleted ? pinnedMessagePreview : "\"" + pinnedMessagePreview + "\""), !pinnedMessageDeleted && '.')) : actorName + " pinned a message.")) : (/*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName, message.body === 'CC' ? ' created this channel ' : message.body === 'CG' ? ' created this group' : message.body === 'AM' ? " added " + (!!(messageMetas && messageMetas.m) && messageMetas.m.slice(0, 5).map(function (mem) {
+  }, pinnedPreview ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName + " pinned ", /*#__PURE__*/React__default.createElement(PinnedMessagePreview, null, pinnedMessageDeleted || customPinnedMessagePreview ? pinnedPreview : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\"", pinnedPreview, "\""))), !pinnedMessageDeleted && '.')) : actorName + " pinned a message.")) : (/*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, actorName, message.body === 'CC' ? ' created this channel ' : message.body === 'CG' ? ' created this group' : message.body === 'AM' ? " added " + (!!(messageMetas && messageMetas.m) && messageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? 'You' : " " + systemMessageUserName(mem, contactsMap[mem], message.mentionedUsers);
   })) + " " + (messageMetas && messageMetas.m && messageMetas.m.length > 5 ? "and " + (messageMetas.m.length - 5) + " more" : '') : message.body === 'RM' ? " removed " + (messageMetas && messageMetas.m && messageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? 'You' : " " + systemMessageUserName(mem, contactsMap[mem], message.mentionedUsers);
@@ -43326,7 +43332,8 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   var _active$message, _active$message2, _active$message3, _active$message3$atta, _active$message4;
   var channelId = _ref.channelId,
     pinIcon = _ref.pinIcon,
-    onOpenList = _ref.onOpenList;
+    onOpenList = _ref.onOpenList,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview;
   var dispatch = useDispatch();
   var pins = useSelector(pinnedMessagesSelector(channelId));
   var nextToken = useSelector(pinnedMessagesCursorSelector(channelId));
@@ -43404,6 +43411,9 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   });
   var linkPreviewImage = getLinkPreviewImage(attachment);
   var sourceMessageDeleted = isPinnedMessageDeleted(active.message);
+  var customPinnedMessagePreview = sourceMessageDeleted ? null : renderPinnedMessagePreview === null || renderPinnedMessagePreview === void 0 ? void 0 : renderPinnedMessagePreview(active.message, {
+    placement: 'banner'
+  });
   var hasLeadingPreview = !sourceMessageDeleted && (hasAttachmentTile(attachmentForPreview) || (attachment === null || attachment === void 0 ? void 0 : attachment.type) === attachmentTypes.link);
   var markerFade = count <= 3 ? 'none' : index <= 1 ? 'top' : index >= count - 2 ? 'bottom' : 'both';
   var loadNextPage = function loadNextPage() {
@@ -43487,7 +43497,7 @@ var PinnedMessagesBanner = function PinnedMessagesBanner(_ref) {
   }, /*#__PURE__*/React__default.createElement("strong", null, "Pinned messages"), /*#__PURE__*/React__default.createElement(PinnedCopyPreview, {
     key: active.id,
     textPrimary: textPrimary
-  }, preview(active.message, contactsMap, getFromContacts))), /*#__PURE__*/React__default.createElement(Controls$1, {
+  }, customPinnedMessagePreview != null ? customPinnedMessagePreview : preview(active.message, contactsMap, getFromContacts))), /*#__PURE__*/React__default.createElement(Controls$1, {
     onClick: function onClick(event) {
       return event.stopPropagation();
     },
@@ -45753,15 +45763,12 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
   };
   var positionNavigationControl = function positionNavigationControl(message, event) {
     var messageId = message.id || message.tid;
-    var messageContent = event.currentTarget.querySelector('.messageContent');
+    var messageContent = event.querySelector('.messageContent');
     if (!messageId || !messageContent) return;
-    var rowBounds = event.currentTarget.getBoundingClientRect();
+    var rowBounds = event.getBoundingClientRect();
     var contentBounds = messageContent.getBoundingClientRect();
-    var messageItem = event.currentTarget.querySelector('.message_item');
-    var reactionContainerId = message.id + "_reactions_container";
-    var reactionContainer = Array.from(event.currentTarget.querySelectorAll('[id]')).find(function (element) {
-      return element.id === reactionContainerId;
-    });
+    var messageItem = event.querySelector('.message_item');
+    var reactionContainer = event.querySelector('[data-reactions-container]');
     var itemMarginBottom = messageItem ? Number.parseFloat(window.getComputedStyle(messageItem).marginBottom) || 0 : 0;
     var bottom = itemMarginBottom + ((reactionContainer === null || reactionContainer === void 0 ? void 0 : reactionContainer.getBoundingClientRect().height) || 0);
     var left = message.incoming ? contentBounds.right - rowBounds.left + 8 : contentBounds.left - rowBounds.left - 36 - 8;
@@ -45775,6 +45782,17 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
       }, _extends2));
     });
   };
+  useEffect(function () {
+    if (pins) {
+      for (var i = 0; i < pins.length; i++) {
+        var pin = pins[i];
+        var pinnedElement = document.querySelector("[data-pinned-message-id=\"" + pin.id + "\"]");
+        if (pinnedElement) {
+          positionNavigationControl(pin.message, pinnedElement);
+        }
+      }
+    }
+  }, [pins]);
   useLayoutEffect(function () {
     var element = itemsRef.current;
     if (!element) return;
@@ -45811,7 +45829,7 @@ var PinnedMessagesList = function PinnedMessagesList(_ref) {
       key: pin.id,
       "data-pinned-message-id": pin.id,
       onMouseEnter: function onMouseEnter(event) {
-        return positionNavigationControl(pin.message, event);
+        return positionNavigationControl(pin.message, event.currentTarget);
       }
     }, renderMessage({
       message: pin.message,
@@ -47280,7 +47298,9 @@ function EmojisPopup(_ref2) {
     backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
     border = _useColor[THEME_COLORS.BORDER],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2];
+    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2],
+    background = _useColor[THEME_COLORS.BACKGROUND];
+  var theme = useSelector(themeSelector);
   var _useState = useState(false),
     rendered = _useState[0],
     setRendered = _useState[1];
@@ -47371,7 +47391,7 @@ function EmojisPopup(_ref2) {
   }, getEmojisCategoryTitle(activeCollection))), /*#__PURE__*/React__default.createElement(EmojiSection, {
     ref: emojiContainerRef,
     onScroll: handleEmojiListScroll,
-    scrollbarThumbColor: scrollbarThumbColor
+    scrollbarThumbColor: theme === 'dark' ? background : scrollbarThumbColor
   }, /*#__PURE__*/React__default.createElement(AllEmojis, null, EMOJIS.map(function (emojiBigCollection, bigColIndex) {
     var mainCollectionKey = emojiBigCollection.key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -49651,6 +49671,7 @@ var MessageReactions = function MessageReactions(_ref) {
     onToggleReactionsPopup = _ref.onToggleReactionsPopup,
     onReactionAddDelete = _ref.onReactionAddDelete,
     onOpenUserProfile = _ref.onOpenUserProfile;
+  var messageId = message.id || message.tid;
   var enableTransitionRef = React__default.useCallback(function (el) {
     if (!el) return;
     window.requestAnimationFrame(function () {
@@ -49664,7 +49685,7 @@ var MessageReactions = function MessageReactions(_ref) {
     anchorTop: reactionsAnchorTop,
     anchorBottom: reactionsAnchorBottom,
     reactionTotals: message.reactionTotals || [],
-    messageId: message.id,
+    messageId: messageId,
     handleReactionsPopupClose: onToggleReactionsPopup,
     rtlDirection: rtlDirection,
     handleAddDeleteEmoji: onReactionAddDelete,
@@ -49673,7 +49694,8 @@ var MessageReactions = function MessageReactions(_ref) {
     popupZIndex: popupZIndex
   })), /*#__PURE__*/React__default.createElement(ReactionsContainer, {
     ref: enableTransitionRef,
-    id: message.id + "_reactions_container",
+    id: messageId + "_reactions_container",
+    "data-reactions-container": true,
     border: reactionsContainerBorder,
     boxShadow: reactionsContainerBoxShadow,
     borderRadius: reactionsContainerBorderRadius,
@@ -51213,10 +51235,10 @@ var Message$1 = function Message(_ref) {
     setMessageActionsShow(false);
   }, [message, contactsMap]);
   var handleToggleReactionsPopup = useCallback(function () {
-    var _messageItemRef$curre;
-    var reactionsContainer = document.getElementById(message.id + "_reactions_container");
+    var _messageItemRef$curre, _messageItemRef$curre2;
+    var reactionsContainer = (_messageItemRef$curre = messageItemRef.current) === null || _messageItemRef$curre === void 0 ? void 0 : _messageItemRef$curre.querySelector('[data-reactions-container]');
     var reactionsContPos = reactionsContainer === null || reactionsContainer === void 0 ? void 0 : reactionsContainer.getBoundingClientRect();
-    var bottomPos = (_messageItemRef$curre = messageItemRef.current) === null || _messageItemRef$curre === void 0 ? void 0 : _messageItemRef$curre.getBoundingClientRect().bottom;
+    var bottomPos = (_messageItemRef$curre2 = messageItemRef.current) === null || _messageItemRef$curre2 === void 0 ? void 0 : _messageItemRef$curre2.getBoundingClientRect().bottom;
     var offsetBottom = bottomPos ? window.innerHeight - bottomPos : 0;
     setReactionsPopupPosition(offsetBottom);
     setReactionsPopupHorizontalPosition({
@@ -51229,15 +51251,15 @@ var Message$1 = function Message(_ref) {
     setReactionsPopupOpen(function (prev) {
       return !prev;
     });
-  }, [dispatch, message.id]);
+  }, [dispatch, message.id, message.tid]);
   var handleMouseEnter = useCallback(function () {
     if (message.state !== MESSAGE_STATUS.DELETE && !selectionIsActive && !infoPopupOpen) {
       messageActionsTimeout.current = setTimeout(function () {
-        var _messageItemRef$curre2, _messageItemRef$curre3;
+        var _messageItemRef$curre3, _messageItemRef$curre4;
         if (Date.now() - lastMediaItemClickTime < MESSAGE_ACTIONS_HOVER_DELAY * 2) {
           return;
         }
-        var msgTop = (_messageItemRef$curre2 = (_messageItemRef$curre3 = messageItemRef.current) === null || _messageItemRef$curre3 === void 0 ? void 0 : _messageItemRef$curre3.getBoundingClientRect().top) != null ? _messageItemRef$curre2 : 0;
+        var msgTop = (_messageItemRef$curre3 = (_messageItemRef$curre4 = messageItemRef.current) === null || _messageItemRef$curre4 === void 0 ? void 0 : _messageItemRef$curre4.getBoundingClientRect().top) != null ? _messageItemRef$curre3 : 0;
         setMessageActionsBelow(msgTop < MESSAGE_ACTIONS_FLIP_THRESHOLD);
         setMessageActionsShow(true);
         dispatch(setMessageMenuOpenedAC(message.id || message.tid));
@@ -52109,7 +52131,7 @@ var getMediaAttachmentValidationError = function getMediaAttachmentValidationErr
   });
   var extension = (_file$name$split$pop = file.name.split('.').pop()) === null || _file$name$split$pop === void 0 ? void 0 : _file$name$split$pop.toLowerCase();
   if (!extension || !supportedExtensions.includes(extension)) {
-    return invalidTypeMessage != null ? invalidTypeMessage : "Invalid file type. Allowed extensions are: " + supportedExtensions.join(', ') + ".";
+    return invalidTypeMessage != null ? invalidTypeMessage : "Invalid file type.";
   }
   return null;
 };
@@ -52165,6 +52187,7 @@ var MessageList = function MessageList(_ref) {
     retractVoteIcon = _ref.retractVoteIcon,
     endVoteIcon = _ref.endVoteIcon,
     pinnedMessageIcon = _ref.pinnedMessageIcon,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview,
     _ref$allowEditDeleteI = _ref.allowEditDeleteIncomingMessage,
     allowEditDeleteIncomingMessage = _ref$allowEditDeleteI === void 0 ? true : _ref$allowEditDeleteI,
     starIcon = _ref.starIcon,
@@ -52640,7 +52663,8 @@ var MessageList = function MessageList(_ref) {
         border: dateDividerBorder,
         backgroundColor: dateDividerBackgroundColor,
         borderRadius: dateDividerBorderRadius,
-        setLastVisibleMessageId: setLastVisibleMessageId
+        setLastVisibleMessageId: setLastVisibleMessageId,
+        renderPinnedMessagePreview: renderPinnedMessagePreview
       });
     }
     return /*#__PURE__*/React__default.createElement(MessageWrapper, {
@@ -52827,7 +52851,8 @@ var MessageList = function MessageList(_ref) {
   }, /*#__PURE__*/React__default.createElement(SvgChoseMedia, null)), "Drag & drop to send as media")))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (channel === null || channel === void 0 ? void 0 : channel.id) && (/*#__PURE__*/React__default.createElement(PinnedMessagesBanner, {
     channelId: channel.id,
     pinIcon: pinnedMessageIcon,
-    onOpenList: openPinnedMessagesList
+    onOpenList: openPinnedMessagesList,
+    renderPinnedMessagePreview: renderPinnedMessagePreview
   })), /*#__PURE__*/React__default.createElement(ScrollViewport, null, isJumpingToItem && (/*#__PURE__*/React__default.createElement(JumpOverlay, null, /*#__PURE__*/React__default.createElement(JumpSpinner, {
     "$color": iconInactive
   }))), /*#__PURE__*/React__default.createElement(Container$j, {
@@ -53082,6 +53107,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     retractVoteIcon = _ref.retractVoteIcon,
     endVoteIcon = _ref.endVoteIcon,
     pinnedMessageIcon = _ref.pinnedMessageIcon,
+    renderPinnedMessagePreview = _ref.renderPinnedMessagePreview,
     reactionIconOrder = _ref.reactionIconOrder,
     openFrequentlyUsedReactions = _ref.openFrequentlyUsedReactions,
     fixEmojiCategoriesTitleOnTop = _ref.fixEmojiCategoriesTitleOnTop,
@@ -53249,6 +53275,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     retractVoteIcon: retractVoteIcon,
     endVoteIcon: endVoteIcon,
     pinnedMessageIcon: pinnedMessageIcon,
+    renderPinnedMessagePreview: renderPinnedMessagePreview,
     reactionIconOrder: reactionIconOrder,
     openFrequentlyUsedReactions: openFrequentlyUsedReactions,
     fixEmojiCategoriesTitleOnTop: fixEmojiCategoriesTitleOnTop,
@@ -54871,7 +54898,9 @@ function EmojisPopup$1(_ref2) {
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
     border = _useColor[THEME_COLORS.BORDER],
-    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2];
+    scrollbarThumbColor = _useColor[THEME_COLORS.SURFACE_2],
+    background = _useColor[THEME_COLORS.BACKGROUND];
+  var theme = useSelector(themeSelector);
   var richTextEditor;
   try {
     var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -54950,6 +54979,7 @@ function EmojisPopup$1(_ref2) {
       }
     }, 300);
   }, []);
+  console.log(theme, theme === 'dark' ? background : scrollbarThumbColor);
   return /*#__PURE__*/React__default.createElement(Container$k, {
     backgroundColor: backgroundSections,
     borderColor: border,
@@ -54982,7 +55012,7 @@ function EmojisPopup$1(_ref2) {
   }, getEmojisCategoryTitle(activeCollection))), /*#__PURE__*/React__default.createElement(EmojiSection$1, {
     ref: emojiContainerRef,
     onScroll: handleEmojiListScroll,
-    scrollbarThumbColor: scrollbarThumbColor
+    scrollbarThumbColor: theme === 'dark' ? background : scrollbarThumbColor
   }, /*#__PURE__*/React__default.createElement(AllEmojis$1, null, EMOJIS.map(function (emojiBigCollection, bigColIndex) {
     var mainCollectionKey = emojiBigCollection.key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -58306,7 +58336,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   return /*#__PURE__*/React__default.createElement(SendMessageWrapper, {
     ref: sendMessageWrapperRef,
     backgroundColor: backgroundColor || background,
-    "$hidden": pinnedMessagesListOpen
+    "$hidden": pinnedMessagesListOpen && !(selectedMessagesMap && selectedMessagesMap.size > 0)
   }, /*#__PURE__*/React__default.createElement(Container$m, {
     margin: margin,
     padding: padding,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.9.0-beta.16",
+  "version": "1.9.0-beta.17",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",