@sendbird/uikit-react 3.6.4-rc-0 → 3.6.4

package/Thread/components/ParentMessageInfoItem.js

@@ -0,0 +1,220 @@
+import React__default, { useMemo, useState } from 'react';
+import { u as useLocalization } from '../../LocalizationContext-53fdaf30.js';
+import { q as isUserMessage, B as isEditedMessage, r as getUIKitMessageType, s as getUIKitMessageTypes, L as getUIKitFileType, t as truncateString, d as isVoiceMessage, m as isThumbnailMessage, C as isSentMessage, p as isVideoMessage, o as isGifMessage } from '../../index-42dda0be.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-20f528de.js';
+import ImageRenderer from '../../ui/ImageRenderer.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import TextButton from '../../ui/TextButton.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import EmojiReactions from '../../ui/EmojiReactions.js';
+import { u as useThreadContext } from '../../ThreadProvider-da7e379f.js';
+import { VoiceMessageItemBody } from '../../ui/VoiceMessageItemBody.js';
+import { T as TextFragment } from '../../index-9dd15aad.js';
+import { t as tokenizeMessage } from '../../tokenize-ca9f78c1.js';
+import '../../stringSet-63246007.js';
+import '../../index-b596c800.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import 'prop-types';
+import '../../color-4e19bb80.js';
+import '../../withSendbird.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/ReactionButton.js';
+import '../../useLongPress-2fd9d19f.js';
+import '../../MediaQueryContext-6fca0d36.js';
+import '../../utils-b0301443.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../uuid-d94880c0.js';
+import '../../ui/BottomSheet.js';
+import '../../index-869e67e8.js';
+import '../../ui/UserListItem.js';
+import '../../UserProfileContext-0041c5c2.js';
+import '../../ui/Avatar.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../topics-86131d90.js';
+import '../../ui/Button.js';
+import '../../ui/Tooltip.js';
+import '../../ui/TooltipWrapper.js';
+import '../../Message/context.js';
+import '../../index-ecf0b823.js';
+import '../context/types.js';
+import '@sendbird/chat';
+import '@sendbird/chat/groupChannel';
+import '@sendbird/chat/message';
+import '../../consts-2ec945b5.js';
+import '../../ui/ProgressBar.js';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-80b2a1ad.js';
+import '../../VoiceRecorder/context.js';
+import '../../ui/Modal.js';
+import '../../ui/IconButton.js';
+import '../../ui/PlaybackTime.js';
+import '../../ui/Loader.js';
+import '../../index.module-dea47541.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/LinkLabel.js';
+
+function ParentMessageInfoItem(_ref) {
+  var _stores$userStore, _stores$userStore$use, _message$mentionedMes, _message$mentionedUse, _message$reactions, _thumbnails, _thumbnails$, _getUIKitMessageTypes;
+  let {
+    className,
+    message,
+    showFileViewer
+  } = _ref;
+  const {
+    stores,
+    config
+  } = useSendbirdStateContext();
+  const {
+    replyType,
+    isMentionEnabled,
+    isReactionEnabled
+  } = config;
+  const currentUserId = stores === null || stores === void 0 ? void 0 : (_stores$userStore = stores.userStore) === null || _stores$userStore === void 0 ? void 0 : (_stores$userStore$use = _stores$userStore.user) === null || _stores$userStore$use === void 0 ? void 0 : _stores$userStore$use.userId;
+  const {
+    stringSet
+  } = useLocalization();
+  const {
+    currentChannel,
+    emojiContainer,
+    nicknamesMap,
+    toggleReaction
+  } = useThreadContext();
+  const isMentionedMessage = isMentionEnabled && (message === null || message === void 0 ? void 0 : (_message$mentionedMes = message.mentionedMessageTemplate) === null || _message$mentionedMes === void 0 ? void 0 : _message$mentionedMes.length) > 0 && (message === null || message === void 0 ? void 0 : (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.length) > 0;
+
+  // Emoji reactions
+  const isReactionActivated = isReactionEnabled && replyType === 'THREAD' && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isSuper) && !(currentChannel !== null && currentChannel !== void 0 && currentChannel.isBroadcast) && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0;
+  const tokens = useMemo(() => {
+    if (isMentionedMessage) {
+      return tokenizeMessage({
+        mentionedUsers: message === null || message === void 0 ? void 0 : message.mentionedUsers,
+        messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate
+      });
+    }
+    return tokenizeMessage({
+      messageText: message === null || message === void 0 ? void 0 : message.message
+    });
+  }, [message === null || message === void 0 ? void 0 : message.updatedAt]);
+
+  // Thumbnail mesage
+  const [isImageRendered, setImageRendered] = useState(false);
+  const thumbnailUrl = (message === null || message === void 0 ? void 0 : (_thumbnails = message.thumbnails) === null || _thumbnails === void 0 ? void 0 : _thumbnails.length) > 0 ? message === null || message === void 0 ? void 0 : (_thumbnails$ = message.thumbnails[0]) === null || _thumbnails$ === void 0 ? void 0 : _thumbnails$.url : '';
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `sendbird-parent-message-info-item ${className}`
+  }, isUserMessage(message) && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-parent-message-info-item__text-message",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, /*#__PURE__*/React__default.createElement(TextFragment, {
+    tokens: tokens
+  }), isEditedMessage(message) && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-parent-message-info-item__text-message edited",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_2
+  }, ` ${stringSet.MESSAGE_EDITED} `)), getUIKitMessageType(message) === getUIKitMessageTypes().FILE && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info-item__file-message"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info-item__file-message__file-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-parent-message-info-item__file-message__file-icon__icon",
+    type: {
+      IMAGE: IconTypes.PHOTO,
+      VIDEO: IconTypes.PLAY,
+      AUDIO: IconTypes.FILE_AUDIO,
+      GIF: IconTypes.GIF,
+      OTHERS: IconTypes.FILE_DOCUMENT
+    }[getUIKitFileType(message === null || message === void 0 ? void 0 : message.type)],
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  })), /*#__PURE__*/React__default.createElement(TextButton, {
+    className: "sendbird-parent-message-info-item__file-message__file-name",
+    onClick: () => {
+      window.open(message === null || message === void 0 ? void 0 : message.url);
+    },
+    color: LabelColors.ONBACKGROUND_1
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-parent-message-info-item__file-message__file-name__text",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), 30)))), isVoiceMessage(message) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info-item__voice-message"
+  }, /*#__PURE__*/React__default.createElement(VoiceMessageItemBody, {
+    className: "sendbird-parent-message-info-item__voice-message__item",
+    message: message,
+    channelUrl: currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url,
+    isByMe: false,
+    isReactionEnabled: isReactionEnabled
+  })), isThumbnailMessage(message) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info-item__thumbnail-message",
+    onClick: () => {
+      if (isSentMessage(message)) {
+        showFileViewer(true);
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+    className: "sendbird-parent-message-info-item__thumbnail-message__thumbnail",
+    url: thumbnailUrl || (message === null || message === void 0 ? void 0 : message.url) || (message === null || message === void 0 ? void 0 : message.plainUrl),
+    alt: message === null || message === void 0 ? void 0 : message.type,
+    width: "200px",
+    height: "148px",
+    onLoad: () => {
+      setImageRendered(true);
+    },
+    placeHolder: style_ => /*#__PURE__*/React__default.createElement("div", {
+      className: "sendbird-parent-message-info-item__thumbnail-message__placeholder",
+      style: style_
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "sendbird-parent-message-info-item__thumbnail-message__placeholder__icon"
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      type: isVideoMessage(message) ? IconTypes.PLAY : IconTypes.PHOTO,
+      fillColor: IconColors.ON_BACKGROUND_2,
+      width: "34px",
+      height: "34px"
+    })))
+  }), isVideoMessage(message) && !thumbnailUrl && !isImageRendered && /*#__PURE__*/React__default.createElement("video", {
+    className: "sendbird-parent-message-info-item__thumbnail-message__video"
+  }, /*#__PURE__*/React__default.createElement("source", {
+    src: (message === null || message === void 0 ? void 0 : message.url) || (message === null || message === void 0 ? void 0 : message.plainUrl),
+    type: message === null || message === void 0 ? void 0 : message.type
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info-item__thumbnail-message__image-cover"
+  }), (isVideoMessage(message) || isGifMessage(message)) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info-item__thumbnail-message__icon-wrapper"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info-item__thumbnail-message__icon-wrapper__icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: isVideoMessage(message) ? IconTypes.PLAY : IconTypes.GIF,
+    fillColor: IconColors.GRAY,
+    width: "34px",
+    height: "34px"
+  })))), getUIKitMessageType(message) === (getUIKitMessageTypes === null || getUIKitMessageTypes === void 0 ? void 0 : (_getUIKitMessageTypes = getUIKitMessageTypes()) === null || _getUIKitMessageTypes === void 0 ? void 0 : _getUIKitMessageTypes.UNKNOWN) && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info-item__unknown-message"
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-parent-message-info-item__unknown-message__header",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet.UNKNOWN__UNKNOWN_MESSAGE_TYPE), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-parent-message-info-item__unknown-message__description",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_2
+  }, stringSet.UNKNOWN__CANNOT_READ_MESSAGE)), isReactionActivated && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-parent-message-info__reactions"
+  }, /*#__PURE__*/React__default.createElement(EmojiReactions, {
+    userId: currentUserId,
+    message: message,
+    channel: currentChannel,
+    isByMe: false,
+    emojiContainer: emojiContainer,
+    memberNicknamesMap: nicknamesMap,
+    toggleReaction: toggleReaction
+  })));
+}
+
+export { ParentMessageInfoItem as default };
+//# sourceMappingURL=ParentMessageInfoItem.js.map

package/Thread/components/ThreadHeader.js

@@ -0,0 +1,60 @@
+import React__default, { useMemo } from 'react';
+import IconButton from '../../ui/IconButton.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-20f528de.js';
+import TextButton from '../../ui/TextButton.js';
+import { u as useLocalization } from '../../LocalizationContext-53fdaf30.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import 'prop-types';
+import '../../stringSet-63246007.js';
+import '../../color-4e19bb80.js';
+import '../../index-b596c800.js';
+
+function ThreadHeader(_ref) {
+  let {
+    className,
+    channelName,
+    renderActionIcon,
+    onActionIconClick,
+    onChannelNameClick
+  } = _ref;
+  const {
+    stringSet
+  } = useLocalization();
+  const MemoizedActionIcon = useMemo(() => {
+    if (typeof renderActionIcon === 'function') {
+      return renderActionIcon({
+        onActionIconClick
+      });
+    }
+    return null;
+  }, [renderActionIcon]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `sendbird-thread-header ${className}`
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-thread-header__title",
+    type: LabelTypography.H_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet.THREAD__HEADER_TITLE), /*#__PURE__*/React__default.createElement(TextButton, {
+    onClick: e => onChannelNameClick === null || onChannelNameClick === void 0 ? void 0 : onChannelNameClick(e),
+    disableUnderline: true
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-thread-header__channel-name",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, channelName)), MemoizedActionIcon || /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-thread-header__action"
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    width: "32px",
+    height: "32px",
+    onClick: e => onActionIconClick(e)
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.CLOSE,
+    fillColor: IconColors.ON_BACKGROUND_1,
+    width: "22px",
+    height: "22px"
+  }))));
+}
+
+export { ThreadHeader as default };
+//# sourceMappingURL=ThreadHeader.js.map

package/Thread/components/ThreadList.js

@@ -0,0 +1,167 @@
+import React__default, { useMemo } from 'react';
+import ThreadListItem from './ThreadListItem.js';
+import { u as useThreadContext, c as compareMessagesForGrouping } from '../../ThreadProvider-da7e379f.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import { isSameDay } from 'date-fns';
+import { MessageProvider } from '../../Message/context.js';
+import '../../index-ecf0b823.js';
+import '../../index-b596c800.js';
+import '../../LocalizationContext-53fdaf30.js';
+import '../../stringSet-63246007.js';
+import '../../ui/DateSeparator.js';
+import '../../color-4e19bb80.js';
+import '../../index-20f528de.js';
+import 'prop-types';
+import '../../RemoveMessageModal-4e1cbe38.js';
+import '../../ui/Modal.js';
+import 'react-dom';
+import '../../index-869e67e8.js';
+import '../../ui/Button.js';
+import '../../ui/Icon.js';
+import '../../ui/IconButton.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import '../../MediaQueryContext-6fca0d36.js';
+import '../../ui/FileViewer.js';
+import '../../index-42dda0be.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-d94880c0.js';
+import '../../Channel/components/SuggestedMentionList.js';
+import '../../ChannelProvider-c7f50a33.js';
+import '../../UserProfileContext-0041c5c2.js';
+import '../../const-3f1a5fb8.js';
+import '../../topics-86131d90.js';
+import '../../compareIds-d6cffb6b.js';
+import '@sendbird/chat/groupChannel';
+import '@sendbird/chat/message';
+import '../../consts-2ec945b5.js';
+import '../../resolvedReplyType-11088903.js';
+import '../../const-c6786399.js';
+import '../../withSendbird.js';
+import '../context/types.js';
+import '@sendbird/chat';
+import '../../ui/MessageInput.js';
+import 'dompurify';
+import '../../consts-876e7a4b.js';
+import '../../consts-72f79e08.js';
+import '../../consts-45aa8134.js';
+import '../../tokenize-ca9f78c1.js';
+import '../../index.module-dea47541.js';
+import '../../ui/ContextMenu.js';
+import '../../ui/SortByRow.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../utils-b0301443.js';
+import '../../ui/MessageItemMenu.js';
+import '../../types-577ceca6.js';
+import '../../ui/MessageItemReactionMenu.js';
+import '../../ui/ReactionButton.js';
+import '../../useLongPress-2fd9d19f.js';
+import '../../index-7313384f.js';
+import '../../ui/Loader.js';
+import '../../index-06f76dfb.js';
+import '../../index-3d2ee6a8.js';
+import '../../ui/EmojiReactions.js';
+import '../../ui/ReactionBadge.js';
+import '../../ui/BottomSheet.js';
+import '../../ui/UserListItem.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
+import '../../ui/Tooltip.js';
+import '../../ui/TooltipWrapper.js';
+import '../../ui/TextMessageItemBody.js';
+import '../../index-9dd15aad.js';
+import '../../ui/MentionLabel.js';
+import '../../ui/LinkLabel.js';
+import '../../ui/OGMessageItemBody.js';
+import '../../ui/FileMessageItemBody.js';
+import '../../ui/TextButton.js';
+import '../../ui/ThumbnailMessageItemBody.js';
+import '../../ui/UnknownMessageItemBody.js';
+import '../../ui/VoiceMessageItemBody.js';
+import '../../ui/ProgressBar.js';
+import '../../VoicePlayer/useVoicePlayer.js';
+import '../../index-80b2a1ad.js';
+import '../../VoiceRecorder/context.js';
+import '../../ui/PlaybackTime.js';
+import '../../index-81ed90b4.js';
+import '../../useDirtyGetMentions-8b0a8d75.js';
+
+function ThreadList(_ref) {
+  let {
+    className,
+    allThreadMessages,
+    renderMessage,
+    renderCustomSeparator,
+    scrollRef,
+    scrollBottom
+  } = _ref;
+  const {
+    config
+  } = useSendbirdStateContext();
+  const {
+    replyType,
+    userId
+  } = config;
+  const {
+    currentChannel
+  } = useThreadContext();
+  const MemorizedMessage = useMemo(() => _ref2 => {
+    let {
+      message,
+      chainTop,
+      chainBottom,
+      hasSeparator
+    } = _ref2;
+    if (typeof renderMessage === 'function') {
+      return renderMessage({
+        message: message,
+        chainTop,
+        chainBottom,
+        hasSeparator
+      });
+    }
+    return null;
+  }, [renderMessage]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: `sendbird-thread-list ${className}`
+  }, allThreadMessages.map((message, idx) => {
+    var _sender;
+    const isByMe = (message === null || message === void 0 ? void 0 : (_sender = message.sender) === null || _sender === void 0 ? void 0 : _sender.userId) === userId;
+    const prevMessage = allThreadMessages[idx - 1];
+    const nextMessage = allThreadMessages[idx + 1];
+    // eslint-disable-next-line no-constant-condition
+    const [chainTop, chainBottom] = compareMessagesForGrouping(prevMessage, message, nextMessage, currentChannel, replyType) ;
+    const hasSeparator = !((prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt) > 0 && isSameDay(message === null || message === void 0 ? void 0 : message.createdAt, prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt));
+    const handleScroll = () => {
+      const current = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+      if (current) {
+        const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight;
+        if (scrollBottom < bottom) {
+          current.scrollTop += bottom - scrollBottom;
+        }
+      }
+    };
+    return /*#__PURE__*/React__default.createElement(MessageProvider, {
+      message: message,
+      isByMe: isByMe,
+      key: message === null || message === void 0 ? void 0 : message.messageId
+    }, MemorizedMessage({
+      message,
+      chainTop,
+      chainBottom,
+      hasSeparator
+    }) || /*#__PURE__*/React__default.createElement(ThreadListItem, {
+      message: message,
+      chainTop: chainTop,
+      chainBottom: chainBottom,
+      hasSeparator: hasSeparator,
+      renderCustomSeparator: renderCustomSeparator,
+      handleScroll: handleScroll
+    }));
+  }));
+}
+
+export { ThreadList as default };
+//# sourceMappingURL=ThreadList.js.map