@sendbird/uikit-react 3.0.0-alpha.1 → 3.0.0-alpha.2

package/ui/MessageContent.js

@@ -0,0 +1,322 @@
+import React__default, { useMemo, useContext, useRef, useState } from 'react';
+import { f as format } from '../index-770d7112.js';
+import Avatar from './Avatar.js';
+import ConnectedUserProfile from './UserProfile.js';
+import { a as __spreadArray } from '../tslib.es6-e3c44017.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-7a51bd16.js';
+import Loader from './Loader.js';
+import { a as getOutgoingMessageStates, o as getOutgoingMessageState, p as isSentStatus, q as getUIKitMessageTypes, d as getClassName, r as getSenderName, s as isTextMessage, u as isOGMessage, v as getUIKitMessageType, j as isThumbnailMessage } from '../index-8c72a94a.js';
+import { u as useLocalization } from '../LocalizationContext-e4391013.js';
+import MessageItemMenu from './MessageItemMenu.js';
+import MessageItemReactionMenu from './MessageItemReactionMenu.js';
+import ContextMenu, { MenuItems } from './ContextMenu.js';
+import EmojiReactions2 from './EmojiReactions.js';
+import AdminMessage from './AdminMessage.js';
+import TextMessageItemBody from './TextMessageItemBody.js';
+import FileMessageItemBody from './FileMessageItemBody.js';
+import ThumbnailMessageItemBody from './ThumbnailMessageItemBody.js';
+import OGMessageItemBody from './OGMessageItemBody.js';
+import UnknownMessageItemBody from './UnknownMessageItemBody.js';
+import QuoteMessage from './QuoteMessage.js';
+import { a as UserProfileContext } from '../UserProfileContext-865db5e6.js';
+import '../index-6ebf7894.js';
+import './ImageRenderer.js';
+import '../_rollupPluginBabelHelpers-20904f21.js';
+import 'prop-types';
+import '../uuid-b0c93400.js';
+import '../withSendBird.js';
+import '../sendBirdSelectors.js';
+import '../topics-9442035c.js';
+import '../index-acebc2ff.js';
+import '../stringSet-4f6eaa60.js';
+import './IconButton.js';
+import './ReactionButton.js';
+import 'react-dom';
+import './SortByRow.js';
+import './Tooltip.js';
+import './TooltipWrapper.js';
+import './ReactionBadge.js';
+import './TextButton.js';
+import '../color-ee3fc5ee.js';
+import './LinkLabel.js';
+
+var MessageStatusTypes = getOutgoingMessageStates();
+function MessageStatus(_a) {
+  var _b, _c;
+
+  var _d, _e;
+
+  var className = _a.className,
+      message = _a.message,
+      channel = _a.channel;
+  var dateLocale = useLocalization().dateLocale;
+  var status = useMemo(function () {
+    return getOutgoingMessageState(channel, message);
+  }, [(_d = channel === null || channel === void 0 ? void 0 : channel.getUnreadMemberCount) === null || _d === void 0 ? void 0 : _d.call(channel, message), (_e = channel === null || channel === void 0 ? void 0 : channel.getUndeliveredMemberCount) === null || _e === void 0 ? void 0 : _e.call(channel, message)]);
+  var showMessageStatusIcon = (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isSuper) && !(channel === null || channel === void 0 ? void 0 : channel.isPublic) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast);
+  var iconType = (_b = {}, _b[MessageStatusTypes.SENT] = IconTypes.DONE, _b[MessageStatusTypes.DELIVERED] = IconTypes.DONE_ALL, _b[MessageStatusTypes.READ] = IconTypes.DONE_ALL, _b[MessageStatusTypes.FAILED] = IconTypes.ERROR, _b);
+  var iconColor = (_c = {}, _c[MessageStatusTypes.SENT] = IconColors.SENT, _c[MessageStatusTypes.DELIVERED] = IconColors.SENT, _c[MessageStatusTypes.READ] = IconColors.READ, _c[MessageStatusTypes.FAILED] = IconColors.ERROR, _c);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: __spreadArray(__spreadArray([], Array.isArray(className) ? className : [className], true), ['sendbird-message-status'], false).join(' ')
+  }, status === MessageStatusTypes.PENDING ? /*#__PURE__*/React__default.createElement(Loader, {
+    className: "sendbird-message-status__icon " + (showMessageStatusIcon ? '' : 'hide-icon'),
+    width: "16px",
+    height: "16px"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.SPINNER,
+    fillColor: IconColors.PRIMARY,
+    width: "16px",
+    height: "16px"
+  })) : /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-message-status__icon " + (showMessageStatusIcon ? '' : 'hide-icon'),
+    type: iconType[status] || IconTypes.ERROR,
+    fillColor: iconColor[status],
+    width: "16px",
+    height: "16px"
+  }), isSentStatus(status) && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-status__text",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
+    locale: dateLocale
+  })));
+}
+
+function MessageContent(_a) {
+  var _b, _c, _d, _e, _f, _g;
+
+  var className = _a.className,
+      userId = _a.userId,
+      channel = _a.channel,
+      message = _a.message,
+      _h = _a.disabled,
+      disabled = _h === void 0 ? false : _h,
+      _j = _a.chainTop,
+      chainTop = _j === void 0 ? false : _j,
+      _k = _a.chainBottom,
+      chainBottom = _k === void 0 ? false : _k,
+      _l = _a.useReaction,
+      useReaction = _l === void 0 ? false : _l,
+      replyType = _a.replyType,
+      nicknamesMap = _a.nicknamesMap,
+      emojiContainer = _a.emojiContainer,
+      scrollToMessage = _a.scrollToMessage,
+      showEdit = _a.showEdit,
+      showRemove = _a.showRemove,
+      showFileViewer = _a.showFileViewer,
+      resendMessage = _a.resendMessage,
+      toggleReaction = _a.toggleReaction,
+      setQuoteMessage = _a.setQuoteMessage;
+  var messageTypes = getUIKitMessageTypes();
+  var dateLocale = useLocalization().dateLocale;
+
+  var _m = useContext(UserProfileContext),
+      disableUserProfile = _m.disableUserProfile,
+      renderUserProfile = _m.renderUserProfile;
+
+  var avatarRef = useRef(null);
+
+  var _o = useState(false),
+      mouseHover = _o[0],
+      setMouseHover = _o[1];
+
+  var _p = useState(false),
+      supposedHover = _p[0],
+      setSupposedHover = _p[1];
+
+  var isByMe = userId === ((_c = (_b = message) === null || _b === void 0 ? void 0 : _b.sender) === null || _c === void 0 ? void 0 : _c.userId) || message.sendingStatus === 'pending' || message.sendingStatus === 'failed';
+  var isByMeClassName = isByMe ? 'outgoing' : 'incoming';
+  var chainTopClassName = chainTop ? 'chain-top' : '';
+  var useReactionClassName = useReaction ? 'use-reactions' : '';
+  var supposedHoverClassName = supposedHover ? 'supposed-hover' : '';
+  var useReplying = !!(replyType === 'QUOTE_REPLY' && (message === null || message === void 0 ? void 0 : message.parentMessageId) && (message === null || message === void 0 ? void 0 : message.parentMessage));
+  var useReplyingClassName = useReplying ? 'use-quote' : '';
+
+  if (((_d = message === null || message === void 0 ? void 0 : message.isAdminMessage) === null || _d === void 0 ? void 0 : _d.call(message)) || (message === null || message === void 0 ? void 0 : message.messageType) === 'admin') {
+    return /*#__PURE__*/React__default.createElement(AdminMessage, {
+      message: message
+    });
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName([className, 'sendbird-message-content', isByMeClassName]),
+    onMouseOver: function onMouseOver() {
+      return setMouseHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setMouseHover(false);
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-content__left', useReactionClassName, isByMeClassName, useReplyingClassName])
+  }, !isByMe && !chainBottom &&
+  /*#__PURE__*/
+
+  /** user profile */
+  React__default.createElement(ContextMenu, {
+    menuTrigger: function menuTrigger(toggleDropdown) {
+      var _a, _b, _c;
+
+      return /*#__PURE__*/React__default.createElement(Avatar, {
+        className: "sendbird-message-content__left__avatar",
+        src: ((_b = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.find(function (member) {
+          var _a;
+
+          return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
+        })) === null || _b === void 0 ? void 0 : _b.profileUrl) || ((_c = message === null || message === void 0 ? void 0 : message.sender) === null || _c === void 0 ? void 0 : _c.profileUrl) || '' // TODO: Divide getting profileUrl logic to utils
+        ,
+        ref: avatarRef,
+        width: "28px",
+        height: "28px",
+        onClick: function onClick() {
+          if (!disableUserProfile) toggleDropdown();
+        }
+      });
+    },
+    menuItems: function menuItems(closeDropdown) {
+      return /*#__PURE__*/React__default.createElement(MenuItems
+      /**
+      * parentRef: For catching location(x, y) of MenuItems
+      * parentContainRef: For toggling more options(menus & reactions)
+      */
+      , {
+        parentRef: avatarRef,
+        parentContainRef: avatarRef,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: 0,
+          paddingBottom: 0
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: message === null || message === void 0 ? void 0 : message.sender,
+        close: closeDropdown
+      }) : /*#__PURE__*/React__default.createElement(ConnectedUserProfile, {
+        user: message.sender,
+        onSuccess: closeDropdown
+      }));
+    }
+  }), isByMe && /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-content-menu', useReactionClassName, supposedHoverClassName, isByMeClassName])
+  }, /*#__PURE__*/React__default.createElement(MessageItemMenu, {
+    className: "sendbird-message-content-menu__normal-menu",
+    channel: channel,
+    message: message,
+    isByMe: isByMe,
+    replyType: replyType,
+    disabled: disabled,
+    showEdit: showEdit,
+    showRemove: showRemove,
+    resendMessage: resendMessage,
+    setQuoteMessage: setQuoteMessage,
+    setSupposedHover: setSupposedHover
+  }), useReaction && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
+    className: "sendbird-message-content-menu__reaction-menu",
+    message: message,
+    userId: userId,
+    spaceFromTrigger: {},
+    emojiContainer: emojiContainer,
+    toggleReaction: toggleReaction,
+    setSupposedHover: setSupposedHover
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-content__middle"
+  }, !isByMe && !chainTop && !useReplying && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-content__middle__sender-name",
+    type: LabelTypography.CAPTION_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, ((_f = (_e = channel === null || channel === void 0 ? void 0 : channel.members) === null || _e === void 0 ? void 0 : _e.find(function (member) {
+    var _a;
+
+    return (member === null || member === void 0 ? void 0 : member.userId) === ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId);
+  })) === null || _f === void 0 ? void 0 : _f.nickname) || getSenderName(message) // TODO: Divide getting profileUrl logic to utils
+  ), useReplying ? /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])
+  }, /*#__PURE__*/React__default.createElement(QuoteMessage, {
+    message: message,
+    userId: userId,
+    isByMe: isByMe,
+    onClick: function onClick() {
+      var _a;
+
+      if (((_a = message === null || message === void 0 ? void 0 : message.parentMessage) === null || _a === void 0 ? void 0 : _a.createdAt) && (message === null || message === void 0 ? void 0 : message.parentMessageId)) {
+        scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);
+      }
+    }
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-content__middle__body-container'])
+  }, isByMe && !chainBottom && /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName])
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-content__middle__body-container__created-at__component-container"
+  }, /*#__PURE__*/React__default.createElement(MessageStatus, {
+    message: message,
+    channel: channel
+  }))), isTextMessage(message) && /*#__PURE__*/React__default.createElement(TextMessageItemBody, {
+    className: "sendbird-message-content__middle__message-item-body",
+    message: message,
+    isByMe: isByMe,
+    mouseHover: mouseHover
+  }), isOGMessage(message) && /*#__PURE__*/React__default.createElement(OGMessageItemBody, {
+    className: "sendbird-message-content__middle__message-item-body",
+    message: message,
+    isByMe: isByMe,
+    mouseHover: mouseHover
+  }), getUIKitMessageType(message) === messageTypes.FILE && /*#__PURE__*/React__default.createElement(FileMessageItemBody, {
+    className: "sendbird-message-content__middle__message-item-body",
+    message: message,
+    isByMe: isByMe,
+    mouseHover: mouseHover
+  }), isThumbnailMessage(message) && /*#__PURE__*/React__default.createElement(ThumbnailMessageItemBody, {
+    className: "sendbird-message-content__middle__message-item-body",
+    message: message,
+    isByMe: isByMe,
+    mouseHover: mouseHover,
+    showFileViewer: showFileViewer
+  }), getUIKitMessageType(message) === messageTypes.UNKNOWN && /*#__PURE__*/React__default.createElement(UnknownMessageItemBody, {
+    className: "sendbird-message-content__middle__message-item-body",
+    message: message,
+    isByMe: isByMe,
+    mouseHover: mouseHover
+  }), useReaction && ((_g = message === null || message === void 0 ? void 0 : message.reactions) === null || _g === void 0 ? void 0 : _g.length) > 0 && /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-content-reactions', !isByMe || isThumbnailMessage(message) || isOGMessage(message) ? '' : 'primary', mouseHover ? 'mouse-hover' : ''])
+  }, /*#__PURE__*/React__default.createElement(EmojiReactions2, {
+    userId: userId,
+    message: message,
+    isByMe: isByMe,
+    emojiContainer: emojiContainer,
+    memberNicknamesMap: nicknamesMap,
+    toggleReaction: toggleReaction
+  })), !isByMe && !chainBottom && /*#__PURE__*/React__default.createElement(Label, {
+    className: getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName]),
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', {
+    locale: dateLocale
+  })))), /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-content__right', chainTopClassName, useReactionClassName, useReplyingClassName])
+  }, !isByMe && /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])
+  }, useReaction && /*#__PURE__*/React__default.createElement(MessageItemReactionMenu, {
+    className: "sendbird-message-content-menu__reaction-menu",
+    message: message,
+    userId: userId,
+    spaceFromTrigger: {},
+    emojiContainer: emojiContainer,
+    toggleReaction: toggleReaction,
+    setSupposedHover: setSupposedHover
+  }), /*#__PURE__*/React__default.createElement(MessageItemMenu, {
+    className: "sendbird-message-content-menu__normal-menu",
+    channel: channel,
+    message: message,
+    isByMe: isByMe,
+    replyType: replyType,
+    disabled: disabled,
+    showEdit: showEdit,
+    showRemove: showRemove,
+    resendMessage: resendMessage,
+    setQuoteMessage: setQuoteMessage,
+    setSupposedHover: setSupposedHover
+  }))));
+}
+
+export { MessageContent as default };
+//# sourceMappingURL=MessageContent.js.map

package/ui/MessageContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageContent.js","sources":["../../src/ui/MessageStatus/index.tsx","../../src/ui/MessageContent/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport format from 'date-fns/format';\nimport './index.scss';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport Loader from '../Loader';\n\nimport {\n  getOutgoingMessageState,\n  getOutgoingMessageStates,\n  isSentStatus,\n} from '../../utils';\nimport { FileMessage, GroupChannel, UserMessage } from 'sendbird';\nimport { useLocalization } from '../../lib/LocalizationContext';\n\nexport const MessageStatusTypes = getOutgoingMessageStates();\n\ninterface MessageStatusProps {\n  className?: string;\n  message: UserMessage | FileMessage;\n  channel: GroupChannel;\n}\n\nexport default function MessageStatus({\n  className,\n  message,\n  channel,\n}: MessageStatusProps): React.ReactElement {\n  const { dateLocale } = useLocalization();\n  const status = useMemo(() => (\n    getOutgoingMessageState(channel, message)\n  ), [channel?.getUnreadMemberCount?.(message), channel?.getUndeliveredMemberCount?.(message)]);\n  const showMessageStatusIcon = channel?.isGroupChannel()\n    && !channel?.isSuper\n    && !channel?.isPublic\n    && !channel?.isBroadcast;\n  const iconType = {\n    [MessageStatusTypes.SENT]: IconTypes.DONE,\n    [MessageStatusTypes.DELIVERED]: IconTypes.DONE_ALL,\n    [MessageStatusTypes.READ]: IconTypes.DONE_ALL,\n    [MessageStatusTypes.FAILED]: IconTypes.ERROR,\n  };\n  const iconColor = {\n    [MessageStatusTypes.SENT]: IconColors.SENT,\n    [MessageStatusTypes.DELIVERED]: IconColors.SENT,\n    [MessageStatusTypes.READ]: IconColors.READ,\n    [MessageStatusTypes.FAILED]: IconColors.ERROR,\n  };\n\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-message-status',\n      ].join(' ')}\n    >\n      {(status === MessageStatusTypes.PENDING) ? (\n        <Loader\n          className={`sendbird-message-status__icon ${showMessageStatusIcon ? '' : 'hide-icon'}`}\n          width=\"16px\"\n          height=\"16px\"\n        >\n          <Icon\n            type={IconTypes.SPINNER}\n            fillColor={IconColors.PRIMARY}\n            width=\"16px\"\n            height=\"16px\"\n          />\n        </Loader>\n      ) : (\n        <Icon\n          className={`sendbird-message-status__icon ${showMessageStatusIcon ? '' : 'hide-icon'}`}\n          type={iconType[status] || IconTypes.ERROR}\n          fillColor={iconColor[status]}\n          width=\"16px\"\n          height=\"16px\"\n        />\n      )}\n      {isSentStatus(status) && (\n        <Label\n          className=\"sendbird-message-status__text\"\n          type={LabelTypography.CAPTION_3}\n          color={LabelColors.ONBACKGROUND_2}\n        >\n          {format(message?.createdAt || 0, 'p', {\n            locale: dateLocale,\n          })}\n        </Label>\n      )}\n    </div>\n  );\n}\n","import React, { ReactElement, useContext, useRef, useState } from 'react';\nimport { GroupChannel, UserMessage, FileMessage, EmojiContainer } from 'sendbird';\nimport format from 'date-fns/format';\nimport './index.scss';\n\nimport Avatar from '../Avatar';\nimport UserProfile from '../UserProfile';\nimport MessageStatus from '../MessageStatus';\nimport MessageItemMenu from '../MessageItemMenu';\nimport MessageItemReactionMenu from '../MessageItemReactionMenu';\nimport ContextMenu, { MenuItems } from '../ContextMenu';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport EmojiReactions from '../EmojiReactions';\n\nimport ClientAdminMessage from '../AdminMessage';\nimport TextMessageItemBody from '../TextMessageItemBody';\nimport FileMessageItemBody from '../FileMessageItemBody';\nimport ThumbnailMessageItemBody from '../ThumbnailMessageItemBody';\nimport OGMessageItemBody from '../OGMessageItemBody';\nimport UnknownMessageItemBody from '../UnknownMessageItemBody';\nimport QuoteMessage from '../QuoteMessage';\n\nimport {\n  getClassName,\n  getUIKitMessageTypes,\n  getUIKitMessageType,\n  isTextMessage,\n  isOGMessage,\n  isThumbnailMessage,\n  getSenderName,\n  CoreMessageType,\n} from '../../utils';\nimport { UserProfileContext } from '../../lib/UserProfileContext';\nimport { ReplyType } from '../../index.js';\nimport { useLocalization } from '../../lib/LocalizationContext';\n\ninterface Props {\n  className?: string | Array<string>;\n  userId: string;\n  channel: GroupChannel;\n  message: CoreMessageType;\n  disabled?: boolean;\n  chainTop?: boolean;\n  chainBottom?: boolean;\n  useReaction?: boolean;\n  replyType?: ReplyType;\n  nicknamesMap?: Map<string, string>;\n  emojiContainer?: EmojiContainer;\n  scrollToMessage?: (createdAt: number, messageId: number) => void;\n  showEdit?: (bool: boolean) => void;\n  showRemove?: (bool: boolean) => void;\n  showFileViewer?: (bool: boolean) => void;\n  resendMessage?: (message: UserMessage | FileMessage) => void;\n  toggleReaction?: (message: UserMessage | FileMessage, reactionKey: string, isReacted: boolean) => void;\n  setQuoteMessage?: (message: UserMessage | FileMessage) => void;\n}\nexport default function MessageContent({\n  className,\n  userId,\n  channel,\n  message,\n  disabled = false,\n  chainTop = false,\n  chainBottom = false,\n  useReaction = false,\n  replyType,\n  nicknamesMap,\n  emojiContainer,\n  scrollToMessage,\n  showEdit,\n  showRemove,\n  showFileViewer,\n  resendMessage,\n  toggleReaction,\n  setQuoteMessage,\n}: Props): ReactElement {\n  const messageTypes = getUIKitMessageTypes();\n  const { dateLocale } = useLocalization();\n  const { disableUserProfile, renderUserProfile } = useContext(UserProfileContext);\n  const avatarRef = useRef(null);\n  const [mouseHover, setMouseHover] = useState(false);\n  const [supposedHover, setSupposedHover] = useState(false);\n\n  const isByMe = (userId === (message as UserMessage | FileMessage)?.sender?.userId)\n    || ((message as UserMessage | FileMessage).sendingStatus === 'pending')\n    || ((message as UserMessage | FileMessage).sendingStatus === 'failed');\n  const isByMeClassName = isByMe ? 'outgoing' : 'incoming';\n  const chainTopClassName = chainTop ? 'chain-top' : '';\n  const useReactionClassName = useReaction ? 'use-reactions' : '';\n  const supposedHoverClassName = supposedHover ? 'supposed-hover' : '';\n  const useReplying = !!((replyType === 'QUOTE_REPLY') && message?.parentMessageId && message?.parentMessage);\n  const useReplyingClassName = useReplying ? 'use-quote' : '';\n\n  if (message?.isAdminMessage?.() || message?.messageType === 'admin') {\n    return (<ClientAdminMessage message={message} />);\n  }\n  return (\n    <div\n      className={getClassName([className, 'sendbird-message-content', isByMeClassName])}\n      onMouseOver={() => setMouseHover(true)}\n      onMouseLeave={() => setMouseHover(false)}\n    >\n      {/* left */}\n      <div className={getClassName(['sendbird-message-content__left', useReactionClassName, isByMeClassName, useReplyingClassName])}>\n        {(!isByMe && !chainBottom) && (\n          /** user profile */\n          <ContextMenu\n            menuTrigger={(toggleDropdown: () => void): ReactElement => (\n              <Avatar\n                className=\"sendbird-message-content__left__avatar\"\n                src={channel?.members?.find((member) => member?.userId === message?.sender?.userId)?.profileUrl || message?.sender?.profileUrl || ''}\n                // TODO: Divide getting profileUrl logic to utils\n                ref={avatarRef}\n                width=\"28px\"\n                height=\"28px\"\n                onClick={(): void => { if (!disableUserProfile) toggleDropdown() }}\n              />\n            )}\n            menuItems={(closeDropdown: () => void): ReactElement => (\n              <MenuItems\n                /**\n                * parentRef: For catching location(x, y) of MenuItems\n                * parentContainRef: For toggling more options(menus & reactions)\n                */\n                parentRef={avatarRef}\n                parentContainRef={avatarRef}\n                closeDropdown={closeDropdown}\n                style={{ paddingTop: 0, paddingBottom: 0 }}\n              >\n                {renderUserProfile\n                  ? renderUserProfile({ user: message?.sender, close: closeDropdown })\n                  : (<UserProfile user={message.sender} onSuccess={closeDropdown} />)\n                }\n              </MenuItems>\n            )}\n          />\n        )}\n        {/* outgoing menu */}\n        {isByMe && (\n          <div className={getClassName(['sendbird-message-content-menu', useReactionClassName, supposedHoverClassName, isByMeClassName])}>\n            <MessageItemMenu\n              className=\"sendbird-message-content-menu__normal-menu\"\n              channel={channel}\n              message={message as UserMessage | FileMessage}\n              isByMe={isByMe}\n              replyType={replyType}\n              disabled={disabled}\n              showEdit={showEdit}\n              showRemove={showRemove}\n              resendMessage={resendMessage}\n              setQuoteMessage={setQuoteMessage}\n              setSupposedHover={setSupposedHover}\n            />\n            {useReaction && (\n              <MessageItemReactionMenu\n                className=\"sendbird-message-content-menu__reaction-menu\"\n                message={message as UserMessage | FileMessage}\n                userId={userId}\n                spaceFromTrigger={{}}\n                emojiContainer={emojiContainer}\n                toggleReaction={toggleReaction}\n                setSupposedHover={setSupposedHover}\n              />\n            )}\n          </div>\n        )}\n      </div>\n      {/* middle */}\n      <div className=\"sendbird-message-content__middle\">\n        {(!isByMe && !chainTop && !useReplying) && (\n          <Label\n            className=\"sendbird-message-content__middle__sender-name\"\n            type={LabelTypography.CAPTION_2}\n            color={LabelColors.ONBACKGROUND_2}\n          >\n            {\n              channel?.members?.find((member) => member?.userId === message?.sender?.userId)?.nickname\n              || getSenderName(message)\n              // TODO: Divide getting profileUrl logic to utils\n            }\n          </Label>\n        )}\n        {/* quote message */}\n        {(useReplying) ? (\n          <div className={getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming', useReplyingClassName])}>\n            <QuoteMessage\n              message={message}\n              userId={userId}\n              isByMe={isByMe}\n              onClick={() => {\n                if (message?.parentMessage?.createdAt && message?.parentMessageId) {\n                  scrollToMessage(message.parentMessage.createdAt, message.parentMessageId);\n                }\n              }}\n            />\n          </div>\n        ) : null}\n        {/* container: message item body + emoji reactions */}\n        <div className={getClassName(['sendbird-message-content__middle__body-container'])} >\n          {/* message status component */}\n          {(isByMe && !chainBottom) && (\n            <div className={getClassName(['sendbird-message-content__middle__body-container__created-at', 'left', supposedHoverClassName])}>\n              <div className=\"sendbird-message-content__middle__body-container__created-at__component-container\">\n                <MessageStatus\n                  message={message}\n                  channel={channel}\n                />\n              </div>\n            </div>\n          )}\n          {/* message item body components */}\n          {isTextMessage(message as UserMessage) && (\n            <TextMessageItemBody\n              className=\"sendbird-message-content__middle__message-item-body\"\n              message={message as UserMessage}\n              isByMe={isByMe}\n              mouseHover={mouseHover}\n            />\n          )}\n          {(isOGMessage(message as UserMessage)) && (\n            <OGMessageItemBody\n              className=\"sendbird-message-content__middle__message-item-body\"\n              message={message as UserMessage}\n              isByMe={isByMe}\n              mouseHover={mouseHover}\n            />\n          )}\n          {(getUIKitMessageType((message as FileMessage)) === messageTypes.FILE) && (\n            <FileMessageItemBody\n              className=\"sendbird-message-content__middle__message-item-body\"\n              message={message as FileMessage}\n              isByMe={isByMe}\n              mouseHover={mouseHover}\n            />\n          )}\n          {(isThumbnailMessage(message as FileMessage)) && (\n            <ThumbnailMessageItemBody\n              className=\"sendbird-message-content__middle__message-item-body\"\n              message={message as FileMessage}\n              isByMe={isByMe}\n              mouseHover={mouseHover}\n              showFileViewer={showFileViewer}\n            />\n          )}\n          {(getUIKitMessageType((message as FileMessage)) === messageTypes.UNKNOWN) && (\n            <UnknownMessageItemBody\n              className=\"sendbird-message-content__middle__message-item-body\"\n              message={message}\n              isByMe={isByMe}\n              mouseHover={mouseHover}\n            />\n          )}\n          {/* reactions */}\n          {(useReaction && message?.reactions?.length > 0) && (\n            <div className={getClassName([\n              'sendbird-message-content-reactions',\n              (!isByMe || isThumbnailMessage(message as FileMessage) || isOGMessage(message as UserMessage)) ? '' : 'primary',\n              mouseHover ? 'mouse-hover' : '',\n            ])}>\n              <EmojiReactions\n                userId={userId}\n                message={message}\n                isByMe={isByMe}\n                emojiContainer={emojiContainer}\n                memberNicknamesMap={nicknamesMap}\n                toggleReaction={toggleReaction}\n              />\n            </div>\n          )}\n          {(!isByMe && !chainBottom) && (\n            <Label\n              className={getClassName(['sendbird-message-content__middle__body-container__created-at', 'right', supposedHoverClassName])}\n              type={LabelTypography.CAPTION_3}\n              color={LabelColors.ONBACKGROUND_2}\n            >\n              {format(message?.createdAt || 0, 'p', {\n                locale: dateLocale,\n              })}\n            </Label>\n          )}\n        </div>\n      </div>\n      {/* right */}\n      <div className={getClassName(['sendbird-message-content__right', chainTopClassName, useReactionClassName, useReplyingClassName])}>\n        {/* incoming menu */}\n        {!isByMe && (\n          <div className={getClassName(['sendbird-message-content-menu', chainTopClassName, supposedHoverClassName, isByMeClassName])}>\n            {useReaction && (\n              <MessageItemReactionMenu\n                className=\"sendbird-message-content-menu__reaction-menu\"\n                message={message as UserMessage | FileMessage}\n                userId={userId}\n                spaceFromTrigger={{}}\n                emojiContainer={emojiContainer}\n                toggleReaction={toggleReaction}\n                setSupposedHover={setSupposedHover}\n              />\n            )}\n            <MessageItemMenu\n              className=\"sendbird-message-content-menu__normal-menu\"\n              channel={channel}\n              message={message as UserMessage | FileMessage}\n              isByMe={isByMe}\n              replyType={replyType}\n              disabled={disabled}\n              showEdit={showEdit}\n              showRemove={showRemove}\n              resendMessage={resendMessage}\n              setQuoteMessage={setQuoteMessage}\n              setSupposedHover={setSupposedHover}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["MessageStatusTypes","getOutgoingMessageStates","MessageStatus","_a","className","message","channel","dateLocale","useLocalization","status","useMemo","getOutgoingMessageState","getUnreadMemberCount","getUndeliveredMemberCount","showMessageStatusIcon","isGroupChannel","isSuper","isPublic","isBroadcast","iconType","_b","SENT","IconTypes","DONE","DELIVERED","DONE_ALL","READ","FAILED","ERROR","iconColor","_c","IconColors","React","__spreadArray","Array","isArray","join","PENDING","SPINNER","PRIMARY","isSentStatus","LabelTypography","CAPTION_3","LabelColors","ONBACKGROUND_2","format","createdAt","locale","MessageContent","userId","_h","disabled","_j","chainTop","_k","chainBottom","_l","useReaction","replyType","nicknamesMap","emojiContainer","scrollToMessage","showEdit","showRemove","showFileViewer","resendMessage","toggleReaction","setQuoteMessage","messageTypes","getUIKitMessageTypes","_m","useContext","UserProfileContext","disableUserProfile","renderUserProfile","avatarRef","useRef","_o","useState","mouseHover","setMouseHover","_p","supposedHover","setSupposedHover","isByMe","sender","sendingStatus","isByMeClassName","chainTopClassName","useReactionClassName","supposedHoverClassName","useReplying","parentMessageId","parentMessage","useReplyingClassName","isAdminMessage","messageType","ClientAdminMessage","getClassName","toggleDropdown","members","find","member","profileUrl","closeDropdown","paddingTop","paddingBottom","user","close","UserProfile","CAPTION_2","nickname","getSenderName","isTextMessage","isOGMessage","getUIKitMessageType","FILE","isThumbnailMessage","UNKNOWN","reactions","length","EmojiReactions"],"mappings":"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"}

package/ui/MessageInput.js

@@ -0,0 +1,225 @@
+import { a as _slicedToArray } from '../_rollupPluginBabelHelpers-20904f21.js';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import IconButton from './IconButton.js';
+import { B as Button, a as ButtonTypes, b as ButtonSizes } from '../index-acebc2ff.js';
+import Icon, { IconTypes, IconColors } from './Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../index-7a51bd16.js';
+import { a as LocalizationContext } from '../LocalizationContext-e4391013.js';
+import { d as getClassName } from '../index-8c72a94a.js';
+import '../stringSet-4f6eaa60.js';
+import '../index-6ebf7894.js';
+import '../tslib.es6-e3c44017.js';
+
+var LINE_HEIGHT = 76;
+
+var noop = function noop() {};
+
+var KeyCode = {
+  SHIFT: 16,
+  ENTER: 13
+};
+
+var handleUploadFile = function handleUploadFile(callback) {
+  return function (event) {
+    if (event.target.files && event.target.files[0]) {
+      callback(event.target.files[0]);
+    } // eslint-disable-next-line no-param-reassign
+
+
+    event.target.value = '';
+  };
+};
+
+var MessageInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var className = props.className,
+      isEdit = props.isEdit,
+      disabled = props.disabled,
+      value = props.value,
+      name = props.name,
+      placeholder = props.placeholder,
+      maxLength = props.maxLength,
+      onFileUpload = props.onFileUpload,
+      onSendMessage = props.onSendMessage,
+      onCancelEdit = props.onCancelEdit,
+      onStartTyping = props.onStartTyping,
+      channelUrl = props.channelUrl;
+
+  var _useContext = useContext(LocalizationContext),
+      stringSet = _useContext.stringSet;
+
+  var fileInputRef = useRef(null);
+
+  var _useState = useState(value),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isShiftPressed = _useState4[0],
+      setIsShiftPressed = _useState4[1];
+
+  var setHeight = function setHeight() {
+    try {
+      var elem = ref.current;
+      var MAX_HEIGHT = window.document.body.offsetHeight * 0.6;
+
+      if (elem && elem.scrollHeight >= LINE_HEIGHT) {
+        if (MAX_HEIGHT < elem.scrollHeight) {
+          elem.style.height = 'auto';
+          elem.style.height = "".concat(MAX_HEIGHT, "px");
+        } else {
+          elem.style.height = 'auto';
+          elem.style.height = "".concat(elem.scrollHeight, "px");
+        }
+      } else {
+        elem.style.height = '';
+      }
+    } catch (error) {// error
+    }
+  }; // after setHeight called twice, the textarea goes to the initialized
+
+
+  useEffect(function () {
+    setHeight();
+    return setHeight;
+  }, [inputValue]); // clear input value when channel changes
+
+  useEffect(function () {
+    if (!isEdit) {
+      setInputValue('');
+    }
+  }, [channelUrl]);
+
+  var sendMessage = function sendMessage() {
+    if (inputValue && inputValue.trim().length > 0) {
+      var trimmedInputValue = inputValue.trim();
+
+      if (isEdit) {
+        // useUpdateMessageCallback
+        onSendMessage(name, trimmedInputValue, function () {
+          onCancelEdit();
+        });
+      } else {
+        // useSendMessageCallback
+        onSendMessage();
+        setInputValue('');
+      }
+    }
+  };
+
+  return /*#__PURE__*/React__default.createElement("form", {
+    className: getClassName([className, isEdit ? 'sendbird-message-input__edit' : '', disabled ? 'sendbird-message-input-form__disabled' : ''])
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: getClassName(['sendbird-message-input', disabled ? 'sendbird-message-input__disabled' : ''])
+  }, /*#__PURE__*/React__default.createElement("textarea", {
+    className: "sendbird-message-input--textarea",
+    disabled: disabled,
+    ref: ref,
+    name: name,
+    value: inputValue,
+    maxLength: maxLength,
+    onChange: function onChange(e) {
+      setInputValue(e.target.value);
+      onStartTyping();
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === KeyCode.SHIFT) {
+        setIsShiftPressed(true);
+      }
+
+      if (!isShiftPressed && e.keyCode === KeyCode.ENTER) {
+        e.preventDefault();
+        sendMessage();
+      }
+    },
+    onKeyUp: function onKeyUp(e) {
+      if (e.keyCode === KeyCode.SHIFT) {
+        setIsShiftPressed(false);
+      }
+    }
+  }), !inputValue && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-message-input--placeholder",
+    type: LabelTypography.BODY_1,
+    color: LabelColors.ONBACKGROUND_3
+  }, placeholder || stringSet.MESSAGE_INPUT__PLACE_HOLDER), !isEdit && inputValue && inputValue.trim().length > 0 && /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-message-input--send",
+    height: "32px",
+    width: "32px",
+    onClick: sendMessage
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.SEND,
+    fillColor: IconColors.PRIMARY,
+    width: "20px",
+    height: "20px"
+  })), !isEdit && (!inputValue || !(inputValue.trim().length > 0)) && /*#__PURE__*/React__default.createElement(IconButton, {
+    className: "sendbird-message-input--attach",
+    height: "32px",
+    width: "32px",
+    onClick: function onClick() {
+      // todo: clear previous input
+      fileInputRef.current.click();
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.ATTACH,
+    fillColor: IconColors.CONTENT_INVERSE,
+    width: "20px",
+    height: "20px"
+  }), /*#__PURE__*/React__default.createElement("input", {
+    className: "sendbird-message-input--attach-input",
+    type: "file",
+    ref: fileInputRef,
+    onChange: handleUploadFile(onFileUpload)
+  }))), isEdit && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message-input--edit-action"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    className: "sendbird-message-input--edit-action__cancel",
+    type: ButtonTypes.SECONDARY,
+    size: ButtonSizes.SMALL,
+    onClick: onCancelEdit
+  }, stringSet.BUTTON__CANCEL), /*#__PURE__*/React__default.createElement(Button, {
+    className: "sendbird-message-input--edit-action__save",
+    type: ButtonTypes.PRIMARY,
+    size: ButtonSizes.SMALL,
+    onClick: function onClick() {
+      if (inputValue) {
+        var trimmedInputValue = inputValue.trim();
+        onSendMessage(name, trimmedInputValue, function () {
+          onCancelEdit();
+        });
+      }
+    }
+  }, stringSet.BUTTON__SAVE)));
+});
+MessageInput.propTypes = {
+  className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  isEdit: PropTypes.bool,
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: PropTypes.string,
+  disabled: PropTypes.bool,
+  maxLength: PropTypes.number,
+  onFileUpload: PropTypes.func,
+  onSendMessage: PropTypes.func,
+  onStartTyping: PropTypes.func,
+  onCancelEdit: PropTypes.func,
+  channelUrl: PropTypes.string
+};
+MessageInput.defaultProps = {
+  className: '',
+  value: '',
+  channelUrl: '',
+  onSendMessage: noop,
+  name: 'sendbird-message-input',
+  isEdit: false,
+  disabled: false,
+  placeholder: '',
+  maxLength: 5000,
+  onFileUpload: noop,
+  onCancelEdit: noop,
+  onStartTyping: noop
+};
+
+export { MessageInput as default };
+//# sourceMappingURL=MessageInput.js.map

package/ui/MessageInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageInput.js","sources":["../../src/ui/MessageInput/index.jsx"],"sourcesContent":["import React, {\n  useState,\n  useRef,\n  useEffect,\n  useContext,\n} from 'react';\nimport PropTypes from 'prop-types';\n\nimport './index.scss';\n\nimport IconButton from '../IconButton';\nimport Button, { ButtonTypes, ButtonSizes } from '../Button';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelTypography, LabelColors } from '../Label';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\nimport { getClassName } from '../../utils';\n\nconst LINE_HEIGHT = 76;\nconst noop = () => { };\nconst KeyCode = {\n  SHIFT: 16,\n  ENTER: 13,\n};\n\nconst handleUploadFile = (callback) => (event) => {\n  if (event.target.files && event.target.files[0]) {\n    callback(event.target.files[0]);\n  }\n  // eslint-disable-next-line no-param-reassign\n  event.target.value = '';\n};\n\nconst MessageInput = React.forwardRef((props, ref) => {\n  const {\n    className,\n    isEdit,\n    disabled,\n    value,\n    name,\n    placeholder,\n    maxLength,\n    onFileUpload,\n    onSendMessage,\n    onCancelEdit,\n    onStartTyping,\n    channelUrl,\n  } = props;\n\n  const { stringSet } = useContext(LocalizationContext);\n  const fileInputRef = useRef(null);\n  const [inputValue, setInputValue] = useState(value);\n  const [isShiftPressed, setIsShiftPressed] = useState(false);\n\n  const setHeight = () => {\n    try {\n      const elem = ref.current;\n      const MAX_HEIGHT = window.document.body.offsetHeight * 0.6;\n      if (elem && elem.scrollHeight >= LINE_HEIGHT) {\n        if (MAX_HEIGHT < elem.scrollHeight) {\n          elem.style.height = 'auto';\n          elem.style.height = `${MAX_HEIGHT}px`;\n        } else {\n          elem.style.height = 'auto';\n          elem.style.height = `${elem.scrollHeight}px`;\n        }\n      } else {\n        elem.style.height = '';\n      }\n    } catch (error) {\n      // error\n    }\n  };\n\n  // after setHeight called twice, the textarea goes to the initialized\n  useEffect(() => {\n    setHeight();\n    return setHeight;\n  }, [inputValue]);\n  // clear input value when channel changes\n  useEffect(() => {\n    if (!isEdit) {\n      setInputValue('');\n    }\n  }, [channelUrl]);\n\n  const sendMessage = () => {\n    if (inputValue && inputValue.trim().length > 0) {\n      const trimmedInputValue = inputValue.trim();\n      if (isEdit) {\n        // useUpdateMessageCallback\n        onSendMessage(name, trimmedInputValue, () => {\n          onCancelEdit();\n        });\n      } else {\n        // useSendMessageCallback\n        onSendMessage();\n        setInputValue('');\n      }\n    }\n  };\n\n  return (\n    <form\n      className={getClassName([\n        className,\n        isEdit ? 'sendbird-message-input__edit' : '',\n        disabled ? 'sendbird-message-input-form__disabled' : '',\n      ])}\n    >\n      <div\n        className={getClassName([\n          'sendbird-message-input',\n          disabled ? 'sendbird-message-input__disabled' : '',\n        ])}\n      >\n        <textarea\n          className=\"sendbird-message-input--textarea\"\n          disabled={disabled}\n          ref={ref}\n          name={name}\n          value={inputValue}\n          maxLength={maxLength}\n          onChange={(e) => {\n            setInputValue(e.target.value);\n            onStartTyping();\n          }}\n          onKeyDown={(e) => {\n            if (e.keyCode === KeyCode.SHIFT) {\n              setIsShiftPressed(true);\n            }\n            if (!isShiftPressed && e.keyCode === KeyCode.ENTER) {\n              e.preventDefault();\n              sendMessage();\n            }\n          }}\n          onKeyUp={(e) => {\n            if (e.keyCode === KeyCode.SHIFT) {\n              setIsShiftPressed(false);\n            }\n          }}\n        />\n        {/* placeholder */}\n        {!inputValue && (\n          <Label\n            className=\"sendbird-message-input--placeholder\"\n            type={LabelTypography.BODY_1}\n            color={LabelColors.ONBACKGROUND_3}\n          >\n            {placeholder || stringSet.MESSAGE_INPUT__PLACE_HOLDER}\n          </Label>\n        )}\n        {/* send icon */}\n        {\n          (!isEdit && inputValue && inputValue.trim().length > 0) && (\n            <IconButton\n              className=\"sendbird-message-input--send\"\n              height=\"32px\"\n              width=\"32px\"\n              onClick={sendMessage}\n            >\n              <Icon type={IconTypes.SEND} fillColor={IconColors.PRIMARY} width=\"20px\" height=\"20px\" />\n            </IconButton>\n          )\n        }\n        {/* upload icon */}\n        {\n          (!isEdit && (!inputValue || !(inputValue.trim().length > 0))) && (\n            <IconButton\n              className=\"sendbird-message-input--attach\"\n              height=\"32px\"\n              width=\"32px\"\n              onClick={() => {\n                // todo: clear previous input\n                fileInputRef.current.click();\n              }}\n            >\n              <Icon\n                type={IconTypes.ATTACH}\n                fillColor={IconColors.CONTENT_INVERSE}\n                width=\"20px\"\n                height=\"20px\"\n              />\n              <input\n                className=\"sendbird-message-input--attach-input\"\n                type=\"file\"\n                ref={fileInputRef}\n                onChange={handleUploadFile(onFileUpload)}\n              />\n            </IconButton>\n          )\n        }\n      </div>\n      {/* Edit */}\n      {\n        isEdit && (\n          <div className=\"sendbird-message-input--edit-action\">\n            <Button\n              className=\"sendbird-message-input--edit-action__cancel\"\n              type={ButtonTypes.SECONDARY}\n              size={ButtonSizes.SMALL}\n              onClick={onCancelEdit}\n            >\n              {stringSet.BUTTON__CANCEL}\n            </Button>\n            <Button\n              className=\"sendbird-message-input--edit-action__save\"\n              type={ButtonTypes.PRIMARY}\n              size={ButtonSizes.SMALL}\n              onClick={() => {\n                if (inputValue) {\n                  const trimmedInputValue = inputValue.trim();\n                  onSendMessage(name, trimmedInputValue, () => {\n                    onCancelEdit();\n                  });\n                }\n              }}\n            >\n              {stringSet.BUTTON__SAVE}\n            </Button>\n          </div>\n        )\n      }\n    </form>\n  );\n});\n\nMessageInput.propTypes = {\n  className: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.arrayOf(PropTypes.string),\n  ]),\n  placeholder: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  isEdit: PropTypes.bool,\n  name: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.number,\n  ]),\n  value: PropTypes.string,\n  disabled: PropTypes.bool,\n  maxLength: PropTypes.number,\n  onFileUpload: PropTypes.func,\n  onSendMessage: PropTypes.func,\n  onStartTyping: PropTypes.func,\n  onCancelEdit: PropTypes.func,\n  channelUrl: PropTypes.string,\n};\n\nMessageInput.defaultProps = {\n  className: '',\n  value: '',\n  channelUrl: '',\n  onSendMessage: noop,\n  name: 'sendbird-message-input',\n  isEdit: false,\n  disabled: false,\n  placeholder: '',\n  maxLength: 5000,\n  onFileUpload: noop,\n  onCancelEdit: noop,\n  onStartTyping: noop,\n};\n\nexport default MessageInput;\n"],"names":["LINE_HEIGHT","noop","KeyCode","SHIFT","ENTER","handleUploadFile","callback","event","target","files","value","MessageInput","React","forwardRef","props","ref","className","isEdit","disabled","name","placeholder","maxLength","onFileUpload","onSendMessage","onCancelEdit","onStartTyping","channelUrl","useContext","LocalizationContext","stringSet","fileInputRef","useRef","useState","inputValue","setInputValue","isShiftPressed","setIsShiftPressed","setHeight","elem","current","MAX_HEIGHT","window","document","body","offsetHeight","scrollHeight","style","height","error","useEffect","sendMessage","trim","length","trimmedInputValue","getClassName","e","keyCode","preventDefault","LabelTypography","BODY_1","LabelColors","ONBACKGROUND_3","MESSAGE_INPUT__PLACE_HOLDER","IconTypes","SEND","IconColors","PRIMARY","click","ATTACH","CONTENT_INVERSE","ButtonTypes","SECONDARY","ButtonSizes","SMALL","BUTTON__CANCEL","BUTTON__SAVE","propTypes","PropTypes","oneOfType","string","arrayOf","bool","number","func","defaultProps"],"mappings":"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"}