@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-1

package/OpenChannel/components/OpenChannelInput.js

@@ -1,60 +1,73 @@
 import React__default, { useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-4df0cc32.js';
+import { a as LocalizationContext } from '../../LocalizationContext-57b46f6c.js';
 import MessageInput from '../../ui/MessageInput.js';
-import { u as useOpenChannelContext } from '../../OpenChannelProvider-2fa01820.js';
-import '../../stringSet-d555d877.js';
-import '../../index-07e060cd.js';
-import '../../_rollupPluginBabelHelpers-498add61.js';
-import 'react-dom/server';
+import { u as useOpenChannelContext } from '../../OpenChannelProvider-b634e564.js';
+import '../../stringSet-7a8ce1ce.js';
+import '../../index-865112db.js';
+import '../../_rollupPluginBabelHelpers-0bc76382.js';
 import 'prop-types';
-import '../../const-83764204.js';
-import '../../const-9d11f204.js';
+import '../../const-8daee9fc.js';
+import '../../const-e51dda0c.js';
 import '../../ui/IconButton.js';
-import '../../tslib.es6-bcead7e6.js';
 import '../../ui/Button.js';
-import '../../index-44470dab.js';
-import '../../ui/MentionUserLabel.js';
+import '../../index-4023d1b2.js';
+import 'dompurify';
+import '../../consts-d0b365df.js';
 import '../../ui/Icon.js';
-import '../../index-5f08f486.js';
+import '../../index-e2601165.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../index-3f26a31c.js';
-import '../../UserProfileContext-c58a7b86.js';
-import '../../compareIds-9430f9d8.js';
-import '../../topics-351ea731.js';
+import '../../consts-d0cfee49.js';
+import '../../consts-7aab5aff.js';
+import '../../tokenize-003bf3f7.js';
+import '../../index-f1701c11.js';
+import '../../UserProfileContext-29074346.js';
+import '../../compareIds-bc881fe7.js';
+import '../../topics-5ff88d6f.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import '../../uuid-286ed926.js';
+import '../../uuid-1f1bbd9c.js';
 import '../../useSendbirdStateContext.js';
 import '../../withSendbird.js';
 
-var MessageInputWrapper = function (props, ref) {
-  var _a = useOpenChannelContext(),
-      currentOpenChannel = _a.currentOpenChannel,
-      disabled = _a.disabled,
-      handleSendMessage = _a.handleSendMessage,
-      handleFileUpload = _a.handleFileUpload;
-
-  var channel = currentOpenChannel;
-
+const MessageInputWrapper = (props, ref) => {
+  const {
+    currentOpenChannel,
+    disabled,
+    handleSendMessage,
+    handleFileUpload,
+    amIMuted
+  } = useOpenChannelContext();
+  const channel = currentOpenChannel;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const {
+    value
+  } = props;
+  function getPlaceHolderString() {
+    if (amIMuted) {
+      return stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED;
+    }
+    if (disabled) {
+      return stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED;
+    }
+    return '';
+  }
   if (!channel) {
-    return;
+    return null;
   }
-
-  var stringSet = useContext(LocalizationContext).stringSet;
-  var value = props.value;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-openchannel-footer"
   }, /*#__PURE__*/React__default.createElement(MessageInput, {
     ref: ref,
     value: value,
     disabled: disabled,
+    isVoiceMessageEnabled: false,
     onSendMessage: handleSendMessage,
     onFileUpload: handleFileUpload,
-    placeholder: disabled && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED // add disabled because of muted state
-
+    placeholder: getPlaceHolderString()
   }));
 };
-
 var OpenChannelInput = /*#__PURE__*/React__default.forwardRef(MessageInputWrapper);
 
 export { OpenChannelInput as default };

package/OpenChannel/components/OpenChannelInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenChannelInput.js","sources":["../../../src/smart-components/OpenChannel/components/OpenChannelInput/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport MessageInput from '../../../../ui/MessageInput';\nimport { useOpenChannelContext } from '../../context/OpenChannelProvider';\n\nexport type MessageInputWrapperProps = {\n  value?: string;\n};\n\nconst MessageInputWrapper = (props: MessageInputWrapperProps, ref: React.RefObject<HTMLInputElement>): JSX.Element => {\n  const {\n    currentOpenChannel,\n    disabled,\n    handleSendMessage,\n    handleFileUpload,\n  } = useOpenChannelContext();\n\n  const channel = currentOpenChannel;\n  if (!channel) {\n    return;\n  }\n\n  const { stringSet } = useContext(LocalizationContext);\n  const { value } = props;\n\n  return (\n    <div className=\"sendbird-openchannel-footer\">\n      <MessageInput\n        ref={ref}\n        value={value}\n        disabled={disabled}\n        onSendMessage={handleSendMessage}\n        onFileUpload={handleFileUpload}\n        placeholder={(\n          disabled\n          && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED\n          // add disabled because of muted state\n        )}\n      />\n    </div>\n  );\n};\n\nexport default React.forwardRef(MessageInputWrapper);\n"],"names":["MessageInputWrapper","props","ref","_a","useOpenChannelContext","currentOpenChannel","disabled","handleSendMessage","handleFileUpload","channel","stringSet","useContext","LocalizationContext","value","React","MESSAGE_INPUT__PLACE_HOLDER__DISABLED","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,mBAAmB,GAAG,UAACC,KAAD,EAAkCC,GAAlC,EAAwE;EAC5F,IAAAC,EAKF,GAAAC,qBAAqB,EALnB;AAAA,MACJC,kBAAkB,GAAAF,EAAA,CAAAE,kBADd;AAAA,MAEJC,QAAQ,GAAAH,EAAA,CAAAG,QAFJ;AAAA,MAGJC,iBAAiB,GAAAJ,EAAA,CAAAI,iBAHb;AAAA,MAIJC,gBAAgB,sBAJZ,CAAA;;EAON,IAAMC,OAAO,GAAGJ,kBAAhB,CAAA;;EACA,IAAI,CAACI,OAAL,EAAc;AACZ,IAAA,OAAA;AACD,GAAA;;AAEO,EAAA,IAAAC,SAAS,GAAKC,UAAU,CAACC,mBAAD,CAAV,UAAd,CAAA;AACA,EAAA,IAAAC,KAAK,GAAKZ,KAAK,CAAAY,KAAf,CAAA;EAER,oBACEC,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,6BAAA;AAAf,GAAA,eACEA,6BAAC,YAAD,EAAA;AACE,IAAA,GAAG,EAAEZ,GADP;AAEE,IAAA,KAAK,EAAEW,KAFT;AAGE,IAAA,QAAQ,EAAEP,QAHZ;AAIE,IAAA,aAAa,EAAEC,iBAJjB;AAKE,IAAA,YAAY,EAAEC,gBALhB;AAME,IAAA,WAAW,EACTF,QAAQ,IACLI,SAAS,CAACK,qCAFJ;;AANb,GAAA,CADF,CADF,CAAA;AAgBD,CAhCD,CAAA;;AAkCA,uBAAA,aAAeD,cAAK,CAACE,UAAN,CAAiBhB,mBAAjB,CAAf;;;;"}
+{"version":3,"file":"OpenChannelInput.js","sources":["../../../src/modules/OpenChannel/components/OpenChannelInput/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport MessageInput from '../../../../ui/MessageInput';\nimport { useOpenChannelContext } from '../../context/OpenChannelProvider';\n\nexport type MessageInputWrapperProps = {\n  value?: string;\n};\n\nconst MessageInputWrapper = (props: MessageInputWrapperProps, ref: React.RefObject<HTMLInputElement>): React.ReactNode => {\n  const {\n    currentOpenChannel,\n    disabled,\n    handleSendMessage,\n    handleFileUpload,\n    amIMuted,\n  } = useOpenChannelContext();\n\n  const channel = currentOpenChannel;\n\n  const { stringSet } = useContext(LocalizationContext);\n  const { value } = props;\n\n  function getPlaceHolderString() {\n    if (amIMuted) {\n      return stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED;\n    }\n    if (disabled) {\n      return stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED;\n    }\n    return '';\n  }\n\n  if (!channel) {\n    return null;\n  }\n  return (\n    <div className=\"sendbird-openchannel-footer\">\n      <MessageInput\n        ref={ref}\n        value={value}\n        disabled={disabled}\n        isVoiceMessageEnabled={false}\n        onSendMessage={handleSendMessage}\n        onFileUpload={handleFileUpload}\n        placeholder={getPlaceHolderString()}\n      />\n    </div>\n  );\n};\n\nexport default React.forwardRef(MessageInputWrapper);\n"],"names":["MessageInputWrapper","props","ref","currentOpenChannel","disabled","handleSendMessage","handleFileUpload","amIMuted","useOpenChannelContext","channel","stringSet","useContext","LocalizationContext","value","getPlaceHolderString","MESSAGE_INPUT__PLACE_HOLDER__MUTED","MESSAGE_INPUT__PLACE_HOLDER__DISABLED","React","createElement","className","MessageInput","isVoiceMessageEnabled","onSendMessage","onFileUpload","placeholder","forwardRef"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,mBAAmB,GAAGA,CAACC,KAA+B,EAAEC,GAAsC,KAAsB;EACxH,MAAM;IACJC,kBAAkB;IAClBC,QAAQ;IACRC,iBAAiB;IACjBC,gBAAgB;AAChBC,IAAAA,QAAAA;GACD,GAAGC,qBAAqB,EAAE,CAAA;EAE3B,MAAMC,OAAO,GAAGN,kBAAkB,CAAA;EAElC,MAAM;AAAEO,IAAAA,SAAAA;AAAU,GAAC,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;EACrD,MAAM;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAGZ,KAAK,CAAA;EAEvB,SAASa,oBAAoBA,GAAG;AAC9B,IAAA,IAAIP,QAAQ,EAAE;MACZ,OAAOG,SAAS,CAACK,kCAAkC,CAAA;AACrD,KAAA;AACA,IAAA,IAAIX,QAAQ,EAAE;MACZ,OAAOM,SAAS,CAACM,qCAAqC,CAAA;AACxD,KAAA;AACA,IAAA,OAAO,EAAE,CAAA;AACX,GAAA;EAEA,IAAI,CAACP,OAAO,EAAE;AACZ,IAAA,OAAO,IAAI,CAAA;AACb,GAAA;EACA,oBACEQ,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,6BAAA;AAA6B,GAAA,eAC1CF,cAAA,CAAAC,aAAA,CAACE,YAAY,EAAA;AACXlB,IAAAA,GAAG,EAAEA,GAAI;AACTW,IAAAA,KAAK,EAAEA,KAAM;AACbT,IAAAA,QAAQ,EAAEA,QAAS;AACnBiB,IAAAA,qBAAqB,EAAE,KAAM;AAC7BC,IAAAA,aAAa,EAAEjB,iBAAkB;AACjCkB,IAAAA,YAAY,EAAEjB,gBAAiB;AAC/BkB,IAAAA,WAAW,EAAEV,oBAAoB,EAAA;AAAG,GAAA,CACpC,CACE,CAAA;AAEV,CAAC,CAAA;AAED,uBAAA,aAAeG,cAAK,CAACQ,UAAU,CAACzB,mBAAmB,CAAC;;;;"}

package/OpenChannel/components/OpenChannelMessage.js

@@ -1,63 +1,71 @@
 import React__default, { useContext, useMemo, useState, useRef } from 'react';
-import { f as format } from '../../index-3f26a31c.js';
+import { f as format } from '../../index-f1701c11.js';
 import OpenchannelUserMessage from '../../ui/OpenchannelUserMessage.js';
 import OpenChannelAdminMessage from '../../ui/OpenChannelAdminMessage.js';
 import OpenchannelOGMessage from '../../ui/OpenchannelOGMessage.js';
 import OpenchannelThumbnailMessage from '../../ui/OpenchannelThumbnailMessage.js';
 import OpenchannelFileMessage from '../../ui/OpenchannelFileMessage.js';
 import DateSeparator from '../../ui/DateSeparator.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-44470dab.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4023d1b2.js';
 import MessageInput from '../../ui/MessageInput.js';
 import FileViewer from '../../ui/FileViewer.js';
 import Modal from '../../ui/Modal.js';
-import { a as LocalizationContext, u as useLocalization } from '../../LocalizationContext-4df0cc32.js';
-import { _ as __assign } from '../../tslib.es6-bcead7e6.js';
-import { u as useOpenChannelContext } from '../../OpenChannelProvider-2fa01820.js';
+import { a as LocalizationContext, u as useLocalization } from '../../LocalizationContext-57b46f6c.js';
+import { _ as _objectSpread2 } from '../../_rollupPluginBabelHelpers-0bc76382.js';
+import { u as useOpenChannelContext } from '../../OpenChannelProvider-b634e564.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import '../../index-07e060cd.js';
-import '../../_rollupPluginBabelHelpers-498add61.js';
+import '../../index-865112db.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/Icon.js';
 import 'prop-types';
-import '../../uuid-286ed926.js';
+import '../../uuid-1f1bbd9c.js';
 import '../../ui/ContextMenu.js';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../index-5f08f486.js';
+import '../../index-e2601165.js';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../stringSet-d555d877.js';
+import '../../stringSet-7a8ce1ce.js';
 import '../../ui/IconButton.js';
 import '../../ui/Loader.js';
 import '../../ui/UserProfile.js';
-import '../../UserProfileContext-c58a7b86.js';
+import '../../UserProfileContext-29074346.js';
 import '../../sendbirdSelectors.js';
-import '../../topics-351ea731.js';
-import '../../utils-e720e03a.js';
+import '../../topics-5ff88d6f.js';
+import '../../utils-388a790e.js';
 import '../../ui/Button.js';
-import '../../utils-8b11ff42.js';
-import '../../index-d8e3ccee.js';
-import '../../MediaQueryContext-74183e34.js';
-import '../../useLongPress-794838b8.js';
+import '../../utils-0d88f863.js';
+import '../../index-fa37119a.js';
+import '../../MediaQueryContext-fbe7af77.js';
+import '../../useLongPress-fbab35a9.js';
 import '../../ui/LinkLabel.js';
-import '../../ui/Word.js';
+import '../../index-5141f766.js';
+import '../../index.module-9202ebbd.js';
+import '../../tokenize-003bf3f7.js';
+import '../../Message/context.js';
 import '../../ui/MentionLabel.js';
 import '../../ui/TextButton.js';
-import '../../color-ff5f9069.js';
-import 'react-dom/server';
-import '../../const-83764204.js';
-import '../../const-9d11f204.js';
-import '../../ui/MentionUserLabel.js';
-import '../../index-e5b78039.js';
-import '../../compareIds-9430f9d8.js';
+import '../../color-2ed716e6.js';
+import '../../const-8daee9fc.js';
+import '../../const-e51dda0c.js';
+import 'dompurify';
+import '../../consts-d0b365df.js';
+import '../../consts-d0cfee49.js';
+import '../../consts-7aab5aff.js';
+import '../../index-7bff4ce0.js';
+import '../../compareIds-bc881fe7.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import '../../withSendbird.js';
 
-function RemoveMessageModal(_a) {
-  var onCloseModal = _a.onCloseModal,
-      onDeleteMessage = _a.onDeleteMessage;
-  var stringSet = useContext(LocalizationContext).stringSet;
+function RemoveMessageModal(_ref) {
+  let {
+    onCloseModal,
+    onDeleteMessage
+  } = _ref;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
   return /*#__PURE__*/React__default.createElement(Modal, {
     onCancel: onCloseModal,
     onSubmit: onDeleteMessage,
@@ -67,19 +75,16 @@ function RemoveMessageModal(_a) {
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
-var SUPPORTED_MIMES = {
+
+const SUPPORTED_MIMES = {
   IMAGE: ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'],
   VIDEO: ['video/mpeg', 'video/ogg', 'video/webm', 'video/mp4']
 };
-var isImage = function (type) {
-  return SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0;
-};
-var isVideo = function (type) {
-  return SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0;
-};
-__assign({}, SUPPORTED_MIMES);
+const isImage = type => SUPPORTED_MIMES.IMAGE.indexOf(type) >= 0;
+const isVideo = type => SUPPORTED_MIMES.VIDEO.indexOf(type) >= 0;
+_objectSpread2({}, SUPPORTED_MIMES);
 
-var MessageTypes = {
+const MessageTypes = {
   ADMIN: 'ADMIN',
   USER: 'USER',
   FILE: 'FILE',
@@ -87,83 +92,63 @@ var MessageTypes = {
   OG: 'OG',
   UNKNOWN: 'UNKNOWN'
 };
-var SendingMessageStatus = {
+const SendingMessageStatus = {
   NONE: 'none',
   SUCCEEDED: 'succeeded',
   FAILED: 'failed',
   PENDING: 'pending'
 };
-var getMessageType = function (message) {
-  var _a, _b;
-
-  if (((_a = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _a === void 0 ? void 0 : _a.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
-    return (message === null || message === void 0 ? void 0 : message.ogMetaData) ? MessageTypes.OG : MessageTypes.USER;
+const getMessageType = message => {
+  var _message$isUserMessag, _message$isAdminMessa;
+  if (message !== null && message !== void 0 && (_message$isUserMessag = message.isUserMessage) !== null && _message$isUserMessag !== void 0 && _message$isUserMessag.call(message) || (message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
+    return message !== null && message !== void 0 && message.ogMetaData ? MessageTypes.OG : MessageTypes.USER;
   }
-
-  if ((_b = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _b === void 0 ? void 0 : _b.call(message)) {
+  if (message !== null && message !== void 0 && (_message$isAdminMessa = message.isAdminMessage) !== null && _message$isAdminMessa !== void 0 && _message$isAdminMessa.call(message)) {
     return MessageTypes.ADMIN;
   }
-
   if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
     return isImage(message.type) || isVideo(message.type) ? MessageTypes.THUMBNAIL : MessageTypes.FILE;
   }
-
   return MessageTypes.UNKNOWN;
 };
 
 function MessagOpenChannelMessageeHoc(props) {
-  var _a;
-
-  var _b;
-
-  var message = props.message,
-      chainTop = props.chainTop,
-      chainBottom = props.chainBottom,
-      hasSeparator = props.hasSeparator,
-      renderMessage = props.renderMessage;
-
-  var _c = useOpenChannelContext(),
-      currentOpenChannel = _c.currentOpenChannel,
-      deleteMessage = _c.deleteMessage,
-      updateMessage = _c.updateMessage,
-      resendMessage = _c.resendMessage;
-
-  var dateLocale = useLocalization().dateLocale;
-  var editDisabled = currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isFrozen;
-  var globalState = useSendbirdStateContext();
-  var userId = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.userId;
-  var sender = null;
-
+  var _globalState$config;
+  const {
+    message,
+    chainTop,
+    chainBottom,
+    hasSeparator,
+    renderMessage
+  } = props;
+  const {
+    currentOpenChannel,
+    deleteMessage,
+    updateMessage,
+    resendMessage
+  } = useOpenChannelContext();
+  const {
+    dateLocale
+  } = useLocalization();
+  const editDisabled = currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isFrozen;
+  const globalState = useSendbirdStateContext();
+  const userId = globalState === null || globalState === void 0 ? void 0 : (_globalState$config = globalState.config) === null || _globalState$config === void 0 ? void 0 : _globalState$config.userId;
+  let sender = null;
   if ((message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
     sender = message === null || message === void 0 ? void 0 : message.sender;
   }
-
-  var RenderedMessage = useMemo(function () {
-    return function (props) {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderMessage ? renderMessage(props) : null);
-    };
+  const RenderedMessage = useMemo(() => props => {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderMessage ? renderMessage(props) : null);
   }, [message, renderMessage]);
-
-  var _d = useState(false),
-      showEdit = _d[0],
-      setShowEdit = _d[1];
-
-  var _e = useState(false),
-      showRemove = _e[0],
-      setShowRemove = _e[1];
-
-  var _f = useState(false),
-      showFileViewer = _f[0],
-      setShowFileViewer = _f[1];
-
-  var editMessageInputRef = useRef(null);
-  var isByMe = false;
-
+  const [showEdit, setShowEdit] = useState(false);
+  const [showRemove, setShowRemove] = useState(false);
+  const [showFileViewer, setShowFileViewer] = useState(false);
+  const editMessageInputRef = useRef(null);
+  let isByMe = false;
   if (sender && (message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
     // pending and failed messages are by me
     isByMe = userId === sender.userId || (message === null || message === void 0 ? void 0 : message.sendingStatus) === SendingMessageStatus.PENDING || (message === null || message === void 0 ? void 0 : message.sendingStatus) === SendingMessageStatus.FAILED;
   }
-
   if (renderMessage && RenderedMessage) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "sendbird-msg-hoc sendbird-msg--scroll-ref"
@@ -173,7 +158,6 @@ function MessagOpenChannelMessageeHoc(props) {
       chainBottom: chainBottom
     }));
   }
-
   if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user' && showEdit) {
     return /*#__PURE__*/React__default.createElement(MessageInput, {
       isEdit: true,
@@ -181,18 +165,19 @@ function MessagOpenChannelMessageeHoc(props) {
       ref: editMessageInputRef,
       message: message,
       name: message === null || message === void 0 ? void 0 : message.messageId,
-      onUpdateMessage: function (_a) {
-        var messageId = _a.messageId,
-            message = _a.message;
+      onUpdateMessage: _ref => {
+        let {
+          messageId,
+          message
+        } = _ref;
         updateMessage(messageId, message);
         setShowEdit(false);
       },
-      onCancelEdit: function () {
+      onCancelEdit: () => {
         setShowEdit(false);
       }
     });
   }
-
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-msg-hoc sendbird-msg--scroll-ref"
   }, hasSeparator && (message === null || message === void 0 ? void 0 : message.createdAt) && /*#__PURE__*/React__default.createElement(DateSeparator, null, /*#__PURE__*/React__default.createElement(Label, {
@@ -200,104 +185,97 @@ function MessagOpenChannelMessageeHoc(props) {
     color: LabelColors.ONBACKGROUND_2
   }, format(message === null || message === void 0 ? void 0 : message.createdAt, 'MMMM dd, yyyy', {
     locale: dateLocale
-  }))), (_a = {}, _a[MessageTypes.ADMIN] = function () {
-    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
-      return /*#__PURE__*/React__default.createElement(OpenChannelAdminMessage, {
-        message: message
-      });
-    }
-  }(), _a[MessageTypes.FILE] = function () {
-    var _a;
-
-    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
-      return /*#__PURE__*/React__default.createElement(OpenchannelFileMessage, {
-        message: message,
-        isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId),
-        disabled: editDisabled,
-        userId: userId,
-        showRemove: setShowRemove,
-        resendMessage: resendMessage,
-        chainTop: chainTop,
-        chainBottom: chainBottom
-      });
-    }
-
-    return;
-  }(), _a[MessageTypes.OG] = function () {
-    var _a;
-
-    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
-      return /*#__PURE__*/React__default.createElement(OpenchannelOGMessage, {
-        message: message,
-        isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId),
-        userId: userId,
-        showEdit: setShowEdit,
-        disabled: editDisabled,
-        showRemove: setShowRemove,
-        resendMessage: resendMessage,
-        chainTop: chainTop,
-        chainBottom: chainBottom
-      });
-    }
-
-    return;
-  }(), _a[MessageTypes.THUMBNAIL] = function () {
-    var _a;
-
-    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
-      return /*#__PURE__*/React__default.createElement(OpenchannelThumbnailMessage, {
-        message: message,
-        isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId),
-        disabled: editDisabled,
-        userId: userId,
-        showRemove: setShowRemove,
-        resendMessage: resendMessage,
-        onClick: setShowFileViewer,
-        chainTop: chainTop,
-        chainBottom: chainBottom
-      });
-    }
-
-    return;
-  }(), _a[MessageTypes.USER] = function () {
-    var _a;
-
-    if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
-      return /*#__PURE__*/React__default.createElement(OpenchannelUserMessage, {
-        message: message,
-        isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId),
-        userId: userId,
-        disabled: editDisabled,
-        showEdit: setShowEdit,
-        showRemove: setShowRemove,
-        resendMessage: resendMessage,
-        chainTop: chainTop,
-        chainBottom: chainBottom
-      });
-    }
-
-    return;
-  }(), _a[MessageTypes.UNKNOWN] = function () {
-    return; // return (
-    //   <OpenChannelUnknownMessage message={message} />
-    // );
-  }(), _a)[getMessageType(message)], showRemove && /*#__PURE__*/React__default.createElement(RemoveMessageModal, {
-    onCloseModal: function () {
-      return setShowRemove(false);
-    },
-    onDeleteMessage: function () {
+  }))), {
+    [MessageTypes.ADMIN]: (() => {
+      if ((message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
+        return /*#__PURE__*/React__default.createElement(OpenChannelAdminMessage, {
+          message: message
+        });
+      }
+    })(),
+    [MessageTypes.FILE]: (() => {
+      if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
+        var _sender;
+        return /*#__PURE__*/React__default.createElement(OpenchannelFileMessage, {
+          message: message,
+          isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator(message === null || message === void 0 ? void 0 : (_sender = message.sender) === null || _sender === void 0 ? void 0 : _sender.userId),
+          isEphemeral: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isEphemeral,
+          disabled: editDisabled,
+          userId: userId,
+          showRemove: setShowRemove,
+          resendMessage: resendMessage,
+          chainTop: chainTop,
+          chainBottom: chainBottom
+        });
+      }
+    })(),
+    [MessageTypes.OG]: (() => {
+      if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
+        var _sender2;
+        return /*#__PURE__*/React__default.createElement(OpenchannelOGMessage, {
+          message: message,
+          isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator(message === null || message === void 0 ? void 0 : (_sender2 = message.sender) === null || _sender2 === void 0 ? void 0 : _sender2.userId),
+          isEphemeral: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isEphemeral,
+          userId: userId,
+          showEdit: setShowEdit,
+          disabled: editDisabled,
+          showRemove: setShowRemove,
+          resendMessage: resendMessage,
+          chainTop: chainTop,
+          chainBottom: chainBottom
+        });
+      }
+    })(),
+    [MessageTypes.THUMBNAIL]: (() => {
+      if ((message === null || message === void 0 ? void 0 : message.messageType) === 'file') {
+        var _sender3;
+        return /*#__PURE__*/React__default.createElement(OpenchannelThumbnailMessage, {
+          message: message,
+          isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator(message === null || message === void 0 ? void 0 : (_sender3 = message.sender) === null || _sender3 === void 0 ? void 0 : _sender3.userId),
+          isEphemeral: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isEphemeral,
+          disabled: editDisabled,
+          userId: userId,
+          showRemove: setShowRemove,
+          resendMessage: resendMessage,
+          onClick: setShowFileViewer,
+          chainTop: chainTop,
+          chainBottom: chainBottom
+        });
+      }
+    })(),
+    [MessageTypes.USER]: (() => {
+      if ((message === null || message === void 0 ? void 0 : message.messageType) === 'user') {
+        var _sender4;
+        return /*#__PURE__*/React__default.createElement(OpenchannelUserMessage, {
+          message: message,
+          isOperator: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isOperator(message === null || message === void 0 ? void 0 : (_sender4 = message.sender) === null || _sender4 === void 0 ? void 0 : _sender4.userId),
+          isEphemeral: currentOpenChannel === null || currentOpenChannel === void 0 ? void 0 : currentOpenChannel.isEphemeral,
+          userId: userId,
+          disabled: editDisabled,
+          showEdit: setShowEdit,
+          showRemove: setShowRemove,
+          resendMessage: resendMessage,
+          chainTop: chainTop,
+          chainBottom: chainBottom
+        });
+      }
+    })(),
+    [MessageTypes.UNKNOWN]: (() => {
+      // return (
+      //   <OpenChannelUnknownMessage message={message} />
+      // );
+    })()
+  }[getMessageType(message)], showRemove && /*#__PURE__*/React__default.createElement(RemoveMessageModal, {
+    onCloseModal: () => setShowRemove(false),
+    onDeleteMessage: () => {
       if ((message === null || message === void 0 ? void 0 : message.messageType) !== 'admin') {
         deleteMessage(message);
       }
     }
   }), showFileViewer && (message === null || message === void 0 ? void 0 : message.messageType) === 'file' && /*#__PURE__*/React__default.createElement(FileViewer, {
-    onClose: function () {
-      return setShowFileViewer(false);
-    },
+    onClose: () => setShowFileViewer(false),
     message: message,
-    onDelete: function () {
-      return deleteMessage(message);
-    },
+    onDelete: () => deleteMessage(message),
     isByMe: isByMe
   }));
 }