@100mslive/react-native-room-kit 0.0.1

package/lib/commonjs/components/Chat/ChatBanner.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatBanner = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _Feather = _interopRequireDefault(require("react-native-vector-icons/Feather"));
+var _MaterialCommunityIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
+var _theme = require("../../utils/theme");
+var _CustomButton = require("../CustomButton");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const ChatBanner = () => {
+  const [showBanner, setShowBanner] = React.useState(true);
+  if (!showBanner) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.banner
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.bannerIconContainer
+  }, /*#__PURE__*/React.createElement(_Feather.default, {
+    style: styles.bannerIcon,
+    size: 16,
+    name: "info"
+  })), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.bannerTextContainer
+  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.bannerText
+  }, "Messages can only be seen by people in the call and are deleted when the call ends.")), /*#__PURE__*/React.createElement(_CustomButton.CustomButton, {
+    onPress: () => setShowBanner(false),
+    viewStyle: styles.bannerIconContainer,
+    LeftIcon: /*#__PURE__*/React.createElement(_MaterialCommunityIcons.default, {
+      style: styles.bannerIcon,
+      size: 24,
+      name: "close"
+    })
+  }));
+};
+exports.ChatBanner = ChatBanner;
+const styles = _reactNative.StyleSheet.create({
+  banner: {
+    height: 80,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: _theme.COLORS.SURFACE.LIGHT,
+    borderRadius: 8,
+    transform: [_reactNative.Platform.OS === 'android' ? {
+      scale: -1
+    } : {
+      scaleY: -1
+    }]
+  },
+  bannerIcon: {
+    color: _theme.COLORS.TEXT.DISABLED
+  },
+  bannerIconContainer: {
+    width: 52,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  bannerTextContainer: {
+    flex: 1
+  },
+  bannerText: {
+    fontFamily: 'Inter-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    color: _theme.COLORS.TEXT.MEDIUM_EMPHASIS
+  }
+});
+//# sourceMappingURL=ChatBanner.js.map

package/lib/commonjs/components/Chat/ChatBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_Feather","_interopRequireDefault","_MaterialCommunityIcons","_theme","_CustomButton","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ChatBanner","showBanner","setShowBanner","useState","createElement","View","style","styles","banner","bannerIconContainer","bannerIcon","size","name","bannerTextContainer","Text","bannerText","CustomButton","onPress","viewStyle","LeftIcon","exports","StyleSheet","create","height","flexDirection","alignItems","backgroundColor","COLORS","SURFACE","LIGHT","borderRadius","transform","Platform","OS","scale","scaleY","color","TEXT","DISABLED","width","justifyContent","flex","fontFamily","fontSize","lineHeight","letterSpacing","MEDIUM_EMPHASIS"],"sourceRoot":"../../../../src","sources":["components/Chat/ChatBanner.tsx"],"mappings":"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"}

package/lib/commonjs/components/Chat/ChatList.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatList = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _flashList = require("@shopify/flash-list");
+var _reactNative = require("react-native");
+var _reactRedux = require("react-redux");
+var _ChatMessage = require("./ChatMessage");
+var _ChatBanner = require("./ChatBanner");
+var _PinnedMessage = require("./PinnedMessage");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const _ChatList = () => {
+  const messages = (0, _reactRedux.useSelector)(state => state.messages.messages);
+  const _keyExtractor = React.useCallback(item => item.messageId, []);
+  const _renderItem = React.useCallback(data => {
+    return /*#__PURE__*/React.createElement(_ChatMessage.ChatMessage, {
+      message: data.item
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: chatListStyle.list
+  }, /*#__PURE__*/React.createElement(_PinnedMessage.PinnedMessage, null), /*#__PURE__*/React.createElement(_flashList.FlashList, {
+    data: messages,
+    inverted: true,
+    estimatedItemSize: 104,
+    contentContainerStyle: chatListStyle.listContentContainer // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
+    ,
+    keyboardShouldPersistTaps: "always",
+    ListEmptyComponent: _ChatBanner.ChatBanner
+    // ItemSeparatorComponent={() => <View style={{ height: 16 }} />} // TODO: There is a bug related to this: https://github.com/Shopify/flash-list/issues/638
+    ,
+    renderItem: _renderItem,
+    keyExtractor: _keyExtractor
+  }));
+};
+const chatListStyle = _reactNative.StyleSheet.create({
+  list: {
+    flex: 1,
+    marginVertical: 8
+  },
+  listContentContainer: {
+    paddingRight: 12
+  }
+});
+const ChatList = /*#__PURE__*/React.memo(_ChatList);
+exports.ChatList = ChatList;
+//# sourceMappingURL=ChatList.js.map

package/lib/commonjs/components/Chat/ChatList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_flashList","_reactNative","_reactRedux","_ChatMessage","_ChatBanner","_PinnedMessage","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_ChatList","messages","useSelector","state","_keyExtractor","useCallback","item","messageId","_renderItem","data","createElement","ChatMessage","message","View","style","chatListStyle","list","PinnedMessage","FlashList","inverted","estimatedItemSize","contentContainerStyle","listContentContainer","keyboardShouldPersistTaps","ListEmptyComponent","ChatBanner","renderItem","keyExtractor","StyleSheet","create","flex","marginVertical","paddingRight","ChatList","memo","exports"],"sourceRoot":"../../../../src","sources":["components/Chat/ChatList.tsx"],"mappings":"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"}

package/lib/commonjs/components/Chat/ChatMessage.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatMessage = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeHms = require("@100mslive/react-native-hms");
+var _MaterialCommunityIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
+var _reactRedux = require("react-redux");
+var _CustomButton = require("../CustomButton");
+var _AvatarView = require("../AvatarView");
+var _theme = require("../../utils/theme");
+var _functions = require("../../utils/functions");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const _ChatMessage = _ref => {
+  var _messageRecipient$rec;
+  let {
+    message
+  } = _ref;
+  const hmsSessionStore = (0, _reactRedux.useSelector)(state => state.user.hmsSessionStore);
+  const pinMessage = async () => {
+    // If instance of HMSSessionStore is available
+    if (hmsSessionStore) {
+      try {
+        var _message$sender;
+        const formattedMessage = `${((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.name) || 'Anonymous'}: ${message.message}`;
+
+        // set `formattedMessage` on `session` with key 'pinnedMessage'
+        const response = await hmsSessionStore.set(formattedMessage, 'pinnedMessage');
+        console.log('setSessionMetaData Response -> ', response);
+      } catch (error) {
+        console.log('setSessionMetaData Error -> ', error);
+      }
+    }
+  };
+  const messageSender = message.sender;
+  const isMessageSenderLocal = messageSender === null || messageSender === void 0 ? void 0 : messageSender.isLocal;
+  const messageRecipient = message.recipient;
+  const isBroadcastMessage = messageRecipient.recipientType === _reactNativeHms.HMSMessageRecipientType.BROADCAST;
+  const isPrivatePeerMessage = messageRecipient.recipientType === _reactNativeHms.HMSMessageRecipientType.PEER;
+  const isPrivateRoleMessage = messageRecipient.recipientType === _reactNativeHms.HMSMessageRecipientType.ROLES;
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [styles.message, isBroadcastMessage ? null : styles.privateMessage]
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: [styles.messageHeader, isMessageSenderLocal ? styles.localMessageHeader : null]
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.headingLeftContainer
+  }, /*#__PURE__*/React.createElement(_AvatarView.AvatarView, {
+    userName: (messageSender === null || messageSender === void 0 ? void 0 : messageSender.name) || '',
+    style: styles.messageAvatar,
+    initialsStyle: styles.messageAvatarText
+  }), /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.senderName,
+    numberOfLines: 1,
+    ellipsizeMode: "middle"
+  }, messageSender ? messageSender.isLocal ? 'You' : messageSender.name : 'Anonymous'), /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.messageTime
+  }, (0, _functions.getTimeStringin12HourFormat)(message.time))), isBroadcastMessage ? /*#__PURE__*/React.createElement(_CustomButton.CustomButton, {
+    onPress: pinMessage,
+    viewStyle: [styles.pinIconContainer, isMessageSenderLocal ? styles.localMsgPinIconContainer : null],
+    LeftIcon: /*#__PURE__*/React.createElement(_MaterialCommunityIcons.default, {
+      style: styles.pinIcon,
+      size: 24,
+      name: "pin-outline"
+    })
+  }) : /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.privateRecipientTypeContainer
+  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.private,
+    numberOfLines: 1,
+    ellipsizeMode: "middle"
+  }, isPrivatePeerMessage ? `${isMessageSenderLocal ? 'TO ' + ((_messageRecipient$rec = messageRecipient.recipientPeer) === null || _messageRecipient$rec === void 0 ? void 0 : _messageRecipient$rec.name) : 'TO YOU'} | PRIVATE` : null, isPrivateRoleMessage && messageRecipient.recipientRoles.length > 0 ? messageRecipient.recipientRoles[0].name : null))), /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: [styles.messageText, isMessageSenderLocal ? styles.messageTextRightAlign : null],
+    numberOfLines: 3
+  }, message.message));
+};
+const ChatMessage = /*#__PURE__*/React.memo(_ChatMessage);
+exports.ChatMessage = ChatMessage;
+const styles = _reactNative.StyleSheet.create({
+  message: {
+    padding: 8,
+    borderRadius: 8,
+    marginTop: 16,
+    width: '100%'
+  },
+  privateMessage: {
+    backgroundColor: _theme.COLORS.SURFACE.LIGHT
+  },
+  messageHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+    justifyContent: 'space-between'
+  },
+  localMessageHeader: {
+    flexDirection: 'row-reverse'
+  },
+  headingLeftContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  messageAvatar: {
+    width: 24,
+    height: 24,
+    borderRadius: 12
+  },
+  messageAvatarText: {
+    fontSize: 10,
+    lineHeight: undefined
+  },
+  privateRecipientTypeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 4,
+    borderColor: _theme.COLORS.BORDER.LIGHT,
+    justifyContent: 'center',
+    padding: 4,
+    flexShrink: 1,
+    marginLeft: 8
+  },
+  private: {
+    fontFamily: 'Inter-Medium',
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+    color: _theme.COLORS.TEXT.HIGH_EMPHASIS,
+    textTransform: 'uppercase'
+  },
+  senderName: {
+    fontFamily: 'Inter',
+    fontWeight: '600',
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    color: _theme.COLORS.SURFACE.ON_SURFACE.HIGH,
+    textTransform: 'capitalize',
+    marginHorizontal: 8
+  },
+  messageTime: {
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    color: _theme.COLORS.SURFACE.ON_SURFACE.LOW
+  },
+  messageText: {
+    color: _theme.COLORS.SURFACE.ON_SURFACE.HIGH,
+    fontSize: 14,
+    fontFamily: 'Inter',
+    fontWeight: '400',
+    lineHeight: 20,
+    letterSpacing: 0.25
+  },
+  messageTextRightAlign: {
+    textAlign: 'right'
+  },
+  pinIcon: {
+    color: _theme.COLORS.WHITE
+  },
+  pinIconContainer: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'flex-end'
+  },
+  localMsgPinIconContainer: {
+    justifyContent: 'flex-start'
+  }
+});
+//# sourceMappingURL=ChatMessage.js.map

package/lib/commonjs/components/Chat/ChatMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactNativeHms","_MaterialCommunityIcons","_interopRequireDefault","_reactRedux","_CustomButton","_AvatarView","_theme","_functions","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_ChatMessage","_ref","_messageRecipient$rec","message","hmsSessionStore","useSelector","state","user","pinMessage","_message$sender","formattedMessage","sender","name","response","console","log","error","messageSender","isMessageSenderLocal","isLocal","messageRecipient","recipient","isBroadcastMessage","recipientType","HMSMessageRecipientType","BROADCAST","isPrivatePeerMessage","PEER","isPrivateRoleMessage","ROLES","createElement","View","style","styles","privateMessage","messageHeader","localMessageHeader","headingLeftContainer","AvatarView","userName","messageAvatar","initialsStyle","messageAvatarText","Text","senderName","numberOfLines","ellipsizeMode","messageTime","getTimeStringin12HourFormat","time","CustomButton","onPress","viewStyle","pinIconContainer","localMsgPinIconContainer","LeftIcon","pinIcon","size","privateRecipientTypeContainer","private","recipientPeer","recipientRoles","length","messageText","messageTextRightAlign","ChatMessage","memo","exports","StyleSheet","create","padding","borderRadius","marginTop","width","backgroundColor","COLORS","SURFACE","LIGHT","flexDirection","alignItems","marginBottom","justifyContent","height","fontSize","lineHeight","undefined","borderWidth","borderColor","BORDER","flexShrink","marginLeft","fontFamily","letterSpacing","color","TEXT","HIGH_EMPHASIS","textTransform","fontWeight","ON_SURFACE","HIGH","marginHorizontal","LOW","textAlign","WHITE","flex"],"sourceRoot":"../../../../src","sources":["components/Chat/ChatMessage.tsx"],"mappings":"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"}

package/lib/commonjs/components/Chat/PinnedMessage.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PinnedMessage = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactRedux = require("react-redux");
+var _MaterialCommunityIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialCommunityIcons"));
+var _theme = require("../../utils/theme");
+var _CustomButton = require("../CustomButton");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const PinnedMessage = () => {
+  const pinnedMessage = (0, _reactRedux.useSelector)(state => state.messages.pinnedMessage);
+  const hmsSessionStore = (0, _reactRedux.useSelector)(state => state.user.hmsSessionStore);
+  const removePinnedMessage = React.useCallback(async () => {
+    // If instance of HMSSessionStore is available
+    if (hmsSessionStore) {
+      try {
+        // set `value` on `session` with key 'pinnedMessage'
+        const response = await hmsSessionStore.set(null, 'pinnedMessage');
+        console.log('setSessionMetaData Response -> ', response);
+      } catch (error) {
+        console.log('setSessionMetaData Error -> ', error);
+      }
+    }
+  }, [hmsSessionStore]);
+  if (!pinnedMessage || pinnedMessage.length <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.pinnedMessage
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.bannerIconContainer
+  }, /*#__PURE__*/React.createElement(_MaterialCommunityIcons.default, {
+    style: styles.bannerIcon,
+    size: 16,
+    name: "pin-outline"
+  })), /*#__PURE__*/React.createElement(_reactNative.View, {
+    style: styles.bannerTextContainer
+  }, /*#__PURE__*/React.createElement(_reactNative.Text, {
+    style: styles.bannerText
+  }, pinnedMessage)), /*#__PURE__*/React.createElement(_CustomButton.CustomButton, {
+    onPress: removePinnedMessage,
+    viewStyle: styles.bannerIconContainer,
+    LeftIcon: /*#__PURE__*/React.createElement(_MaterialCommunityIcons.default, {
+      style: styles.bannerIcon,
+      size: 24,
+      name: "close"
+    })
+  }));
+};
+exports.PinnedMessage = PinnedMessage;
+const styles = _reactNative.StyleSheet.create({
+  pinnedMessage: {
+    height: 80,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: _theme.COLORS.SURFACE.LIGHT,
+    borderRadius: 8
+  },
+  bannerIcon: {
+    color: _theme.COLORS.TEXT.DISABLED
+  },
+  bannerIconContainer: {
+    width: 52,
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  bannerTextContainer: {
+    flex: 1
+  },
+  bannerText: {
+    fontFamily: 'Inter-Regular',
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+    color: _theme.COLORS.TEXT.MEDIUM_EMPHASIS
+  }
+});
+//# sourceMappingURL=PinnedMessage.js.map

package/lib/commonjs/components/Chat/PinnedMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactRedux","_MaterialCommunityIcons","_interopRequireDefault","_theme","_CustomButton","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","PinnedMessage","pinnedMessage","useSelector","state","messages","hmsSessionStore","user","removePinnedMessage","useCallback","response","console","log","error","length","createElement","View","style","styles","bannerIconContainer","bannerIcon","size","name","bannerTextContainer","Text","bannerText","CustomButton","onPress","viewStyle","LeftIcon","exports","StyleSheet","create","height","flexDirection","alignItems","backgroundColor","COLORS","SURFACE","LIGHT","borderRadius","color","TEXT","DISABLED","width","justifyContent","flex","fontFamily","fontSize","lineHeight","letterSpacing","MEDIUM_EMPHASIS"],"sourceRoot":"../../../../src","sources":["components/Chat/PinnedMessage.tsx"],"mappings":"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"}

package/lib/commonjs/components/Chat/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChatBanner = require("./ChatBanner");
+Object.keys(_ChatBanner).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChatBanner[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChatBanner[key];
+    }
+  });
+});
+var _ChatList = require("./ChatList");
+Object.keys(_ChatList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChatList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChatList[key];
+    }
+  });
+});
+var _ChatMessage = require("./ChatMessage");
+Object.keys(_ChatMessage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChatMessage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChatMessage[key];
+    }
+  });
+});
+var _PinnedMessage = require("./PinnedMessage");
+Object.keys(_PinnedMessage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PinnedMessage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PinnedMessage[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Chat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ChatBanner","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_ChatList","_ChatMessage","_PinnedMessage"],"sourceRoot":"../../../../src","sources":["components/Chat/index.ts"],"mappings":";;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,SAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,SAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,SAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,SAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,YAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,YAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,YAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,YAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,cAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,cAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,cAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,cAAA,CAAAP,GAAA;IAAA;EAAA;AAAA"}