@100mslive/react-native-room-kit 0.1.0 → 1.0.0

package/src/utils/types.ts

@@ -44,10 +44,9 @@ export enum ModalTypes {
   LEAVE_ROOM = 'leaveRoom',
   END_ROOM = 'endRoom',
   SETTINGS = 'settings',
-  CHAT = 'chat',
   ZOOM = 'zoom',
   PREVIEW = 'preview',
-  PARTICIPANTS = 'participants',
+  CHAT_AND_PARTICIPANTS = 'chat_and_participants',
   AUDIO_MIXING_MODE = 'audioMixingMode',
   SET_AUDIO_SHARE_VOLUME = 'setAudioShareVolume',
   WELCOME_SETTINGS = 'welcomeSettings',
@@ -95,6 +94,11 @@ export const SUPPORTED_ASPECT_RATIOS = [
 ];
 
 export enum MaxTilesInOnePage {
+  IN_PORTRAIT_WITH_SCREENSHARES = 2,
   IN_PORTRAIT = 6,
   IN_LANDSCAPE = 2,
 }
+
+export const ChatBottomSheetTabs = ['Chat', 'Participants'] as const;
+
+export const ChatBroadcastFilter = { name: 'everyone' } as const;

package/src/utils.ts

@@ -22,3 +22,9 @@ export const getJoinConfig = (): typeof DEFAULT_JOINING_CONFIG => {
 
   return config;
 };
+
+export enum NotificationTypes {
+  ROLE_CHANGE_DECLINED = 'role_change_declined',
+  HAND_RAISE = 'hand_raise',
+  LOCAL_SCREENSHARE = 'local_screenshare',
+}

package/lib/commonjs/components/ChatWindow.js

@@ -1,608 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChatWindow = exports.ChatView = exports.ChatTextInput = exports.ChatHeader = exports.ChatAndParticipantsHeader = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeHms = require("@100mslive/react-native-hms");
-var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
-var _Ionicons = _interopRequireDefault(require("react-native-vector-icons/Ionicons"));
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _reactRedux = require("react-redux");
-var _MenuModal = require("./MenuModal");
-var _theme = require("../utils/theme");
-var _actions = require("../redux/actions");
-var _PressableIcon = require("./PressableIcon");
-var _Icons = require("../Icons");
-var _hooksUtil = require("../hooks-util");
-var _Chat = require("./Chat");
-var _Participants = require("./Participants");
-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 ChatHeader = _ref => {
-  let {
-    filters,
-    onClosePress
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: chatHeaderStyles.header
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: chatHeaderStyles.headerTitleWrapper
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: chatHeaderStyles.headerTitle
-  }, "Chat"), filters ? /*#__PURE__*/_react.default.createElement(ChatFilter, null) : null), /*#__PURE__*/_react.default.createElement(_PressableIcon.PressableIcon, {
-    border: false,
-    onPress: onClosePress
-  }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, null)));
-};
-exports.ChatHeader = ChatHeader;
-const chatHeaderStyles = _reactNative.StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  headerTitleWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  headerTitle: {
-    color: _theme.COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '600',
-    lineHeight: 20,
-    letterSpacing: 0.25
-  },
-  closeIcon: {
-    width: 20,
-    height: 20
-  }
-});
-const tabs = ['Chat', 'Participants'];
-const ChatAndParticipantsHeader = _ref2 => {
-  let {
-    activeTab,
-    setActiveTab,
-    onClosePress
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: chatAndParticipantsHeaderStyles.container
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: chatAndParticipantsHeaderStyles.grayBar
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: chatAndParticipantsHeaderStyles.header
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: chatAndParticipantsHeaderStyles.headerTitleWrapper
-  }, tabs.map(tab => {
-    const isActive = activeTab === tab;
-    const TabIcon = tab === 'Chat' ? _Icons.ChatIcon : _Icons.ParticipantsIcon;
-    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-      key: tab,
-      style: [chatAndParticipantsHeaderStyles.tab, isActive ? {
-        borderColor: _theme.COLORS.PRIMARY.DEFAULT
-      } : null],
-      onPress: () => setActiveTab(tab)
-    }, /*#__PURE__*/_react.default.createElement(TabIcon, {
-      style: [chatAndParticipantsHeaderStyles.tabIcon, isActive ? {
-        tintColor: _theme.COLORS.PRIMARY.DEFAULT
-      } : null]
-    }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: [chatHeaderStyles.headerTitle, isActive ? null : {
-        color: _theme.COLORS.SURFACE.ON_SURFACE.LOW
-      }]
-    }, tab));
-  })), /*#__PURE__*/_react.default.createElement(_PressableIcon.PressableIcon, {
-    border: false,
-    onPress: onClosePress
-  }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, {
-    style: chatHeaderStyles.closeIcon
-  }))));
-};
-exports.ChatAndParticipantsHeader = ChatAndParticipantsHeader;
-const chatAndParticipantsHeaderStyles = _reactNative.StyleSheet.create({
-  container: {
-    position: 'relative'
-  },
-  grayBar: {
-    position: 'absolute',
-    bottom: 0,
-    width: '100%',
-    height: 2,
-    backgroundColor: _theme.COLORS.BORDER.LIGHT
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    justifyContent: 'space-between'
-  },
-  headerTitleWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  tab: {
-    flexDirection: 'row',
-    paddingVertical: 8,
-    borderBottomWidth: 2,
-    marginRight: 16,
-    borderColor: _theme.COLORS.BORDER.LIGHT
-  },
-  tabIcon: {
-    width: 20,
-    height: 20,
-    marginRight: 8,
-    tintColor: _theme.COLORS.SURFACE.ON_SURFACE.LOW
-  }
-});
-const ChatTextInput = _ref3 => {
-  let {
-    containerStyle,
-    clearButton = false
-  } = _ref3;
-  const hmsInstance = (0, _hooksUtil.useHMSInstance)();
-  const dispatch = (0, _reactRedux.useDispatch)();
-  const localPeer = (0, _reactRedux.useSelector)(state => state.hmsStates.localPeer);
-  const [inputFocused, setInputFocused] = _react.default.useState(false);
-  const typedMessage = (0, _reactRedux.useSelector)(state => state.chatWindow.typedMessage);
-  const sendingTo = (0, _reactRedux.useSelector)(state => state.chatWindow.sendTo);
-  const sendingToType = (0, _reactRedux.useSelector)(state => state.chatWindow.sendToType);
-  const handleInputFocus = () => setInputFocused(true);
-  const handleInputBlur = () => setInputFocused(false);
-  const handleMessageTyping = text => {
-    dispatch({
-      type: 'SET_TYPED_MESSAGE',
-      typedMessage: text
-    });
-  };
-  const clearTypedMessage = () => {
-    dispatch({
-      type: 'SET_TYPED_MESSAGE',
-      typedMessage: ''
-    });
-  };
-  const sendMessage = () => {
-    if (typedMessage.length > 0 && hmsInstance) {
-      let hmsMessageRecipient;
-      if (sendingToType === 'role') {
-        hmsMessageRecipient = new _reactNativeHms.HMSMessageRecipient({
-          recipientType: _reactNativeHms.HMSMessageRecipientType.ROLES,
-          recipientRoles: [sendingTo]
-        });
-      } else if (sendingToType === 'direct') {
-        hmsMessageRecipient = new _reactNativeHms.HMSMessageRecipient({
-          recipientType: _reactNativeHms.HMSMessageRecipientType.PEER,
-          recipientPeer: sendingTo
-        });
-      } else {
-        hmsMessageRecipient = new _reactNativeHms.HMSMessageRecipient({
-          recipientType: _reactNativeHms.HMSMessageRecipientType.BROADCAST
-        });
-      }
-
-      // Saving reference of `typedMessage` state to local variable
-      // to use the typed message after clearing state
-      const messageText = typedMessage;
-      clearTypedMessage();
-      const handleMessageID = _ref4 => {
-        let {
-          messageId
-        } = _ref4;
-        if (messageId) {
-          const localMessage = new _reactNativeHms.HMSMessage({
-            messageId: messageId,
-            message: messageText,
-            type: _reactNativeHms.HMSMessageType.CHAT,
-            time: new Date(),
-            sender: localPeer || undefined,
-            recipient: hmsMessageRecipient
-          });
-          dispatch((0, _actions.addMessage)(localMessage));
-        }
-      };
-      if (sendingToType === 'role') {
-        hmsInstance.sendGroupMessage(messageText, [sendingTo]).then(handleMessageID);
-      } else if (sendingToType === 'direct') {
-        hmsInstance.sendDirectMessage(messageText, sendingTo).then(handleMessageID);
-      } else {
-        hmsInstance.sendBroadcastMessage(messageText).then(handleMessageID);
-      }
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [chatTextInputStyles.inputContainer, {
-      borderColor: inputFocused ? _theme.COLORS.PRIMARY.DEFAULT : _theme.COLORS.SURFACE.DEFAULT
-    }, containerStyle]
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
-    style: chatTextInputStyles.input,
-    value: typedMessage,
-    onChangeText: handleMessageTyping,
-    placeholder: `Send a message to ${sendingTo.name}`,
-    autoCapitalize: "sentences",
-    autoCompleteType: "off",
-    placeholderTextColor: _theme.COLORS.SURFACE.ON_SURFACE.LOW,
-    selectionColor: _theme.COLORS.SURFACE.ON_SURFACE.HIGH,
-    onFocus: handleInputFocus,
-    onBlur: handleInputBlur,
-    blurOnSubmit: true,
-    onSubmitEditing: sendMessage,
-    returnKeyType: "send"
-  }), clearButton && typedMessage.length > 0 ? /*#__PURE__*/_react.default.createElement(_PressableIcon.PressableIcon, {
-    onPress: clearTypedMessage,
-    border: false,
-    rounded: false,
-    style: chatTextInputStyles.sendIconWrapper
-  }, /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, {
-    style: chatTextInputStyles.sendIcon
-  })) : null, /*#__PURE__*/_react.default.createElement(_PressableIcon.PressableIcon, {
-    onPress: sendMessage,
-    border: false,
-    rounded: false,
-    style: chatTextInputStyles.sendIconWrapper
-  }, /*#__PURE__*/_react.default.createElement(_Icons.SendIcon, {
-    style: chatTextInputStyles.sendIcon
-  })));
-};
-exports.ChatTextInput = ChatTextInput;
-const chatTextInputStyles = _reactNative.StyleSheet.create({
-  inputContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    backgroundColor: _theme.COLORS.SURFACE.DEFAULT,
-    overflow: 'hidden',
-    borderWidth: 2,
-    borderColor: _theme.COLORS.SURFACE.DEFAULT,
-    borderRadius: 8
-  },
-  input: {
-    flex: 1,
-    textAlignVertical: 'center',
-    paddingHorizontal: 16,
-    paddingRight: 0,
-    paddingVertical: 12,
-    color: _theme.COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    letterSpacing: 0.5
-  },
-  sendIconWrapper: {
-    alignSelf: 'stretch',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  sendIcon: {
-    tintColor: _theme.COLORS.SURFACE.ON_SURFACE.LOW
-  }
-});
-const ChatFilter = /*#__PURE__*/(0, _react.memo)(() => {
-  const instance = (0, _hooksUtil.useHMSInstance)();
-  const dispatch = (0, _reactRedux.useDispatch)();
-  const roles = (0, _reactRedux.useSelector)(state => state.hmsStates.roles);
-  const filter = (0, _reactRedux.useSelector)(state => state.chatWindow.sendTo.name);
-  const [visible, setVisible] = (0, _react.useState)(false);
-  const [remotePeers, setRemotePeers] = (0, _react.useState)();
-  const hideMenu = () => setVisible(false);
-  const showMenu = () => setVisible(true);
-  (0, _react.useEffect)(() => {
-    instance === null || instance === void 0 ? void 0 : instance.getRemotePeers().then(currentRemotePeers => {
-      setRemotePeers(currentRemotePeers);
-    });
-  }, [instance]);
-  return /*#__PURE__*/_react.default.createElement(_MenuModal.Menu, {
-    visible: visible,
-    anchor: /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-      style: styles.chatFilterContainer,
-      onPress: showMenu
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: styles.chatFilterText,
-      numberOfLines: 1
-    }, filter), /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, {
-      name: visible ? 'arrow-drop-up' : 'arrow-drop-down',
-      style: styles.chatFilterIcon,
-      size: 24
-    })),
-    onRequestClose: hideMenu,
-    style: styles.chatMenuContainer
-  }, /*#__PURE__*/_react.default.createElement(_MenuModal.MenuItem, {
-    onPress: () => {
-      hideMenu();
-      dispatch({
-        type: 'SET_SENDTO',
-        sendTo: {
-          name: 'everyone'
-        },
-        sendToType: 'everyone'
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.chatMenuItem
-  }, /*#__PURE__*/_react.default.createElement(_Ionicons.default, {
-    name: "people-outline",
-    style: styles.chatMenuItemIcon,
-    size: 20
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.chatMenuItemName
-  }, "Everyone"))), /*#__PURE__*/_react.default.createElement(_MenuModal.MenuDivider, {
-    color: _theme.COLORS.BORDER.LIGHT
-  }), roles === null || roles === void 0 ? void 0 : roles.map(knownRole => {
-    return /*#__PURE__*/_react.default.createElement(_MenuModal.MenuItem, {
-      onPress: () => {
-        hideMenu();
-        dispatch({
-          type: 'SET_SENDTO',
-          sendTo: knownRole,
-          sendToType: 'role'
-        });
-      },
-      key: knownRole.name
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: styles.chatMenuItem
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: styles.chatMenuItemName
-    }, knownRole === null || knownRole === void 0 ? void 0 : knownRole.name)));
-  }), /*#__PURE__*/_react.default.createElement(_MenuModal.MenuDivider, {
-    color: _theme.COLORS.BORDER.LIGHT
-  }), remotePeers === null || remotePeers === void 0 ? void 0 : remotePeers.map(remotePeer => {
-    return /*#__PURE__*/_react.default.createElement(_MenuModal.MenuItem, {
-      onPress: () => {
-        hideMenu();
-        dispatch({
-          type: 'SET_SENDTO',
-          sendTo: remotePeer,
-          sendToType: 'direct'
-        });
-      },
-      key: remotePeer.name
-    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: styles.chatMenuItem
-    }, /*#__PURE__*/_react.default.createElement(_Ionicons.default, {
-      name: "person-outline",
-      style: styles.chatMenuItemIcon,
-      size: 20
-    }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-      style: styles.chatMenuItemName
-    }, remotePeer.name)));
-  }));
-});
-ChatFilter.displayName = 'ChatFilter';
-const ChatView = () => {
-  const [activeTab, setActiveTab] = (0, _react.useState)(tabs[0]);
-  const [_, setChatVisible] = (0, _hooksUtil.useShowChat)();
-  const hideInsetChatView = () => setChatVisible(false);
-
-  // const estimatedListSize = useMemo(() => ({
-  //   height: Dimensions.get('window').height * 0.45,
-  //   width: Dimensions.get('window').width - 32,
-  // }), []);
-
-  return (
-    /*#__PURE__*/
-    // <Animated.View
-    //   style={chatViewStyles.container}
-    //   entering={SlideInDown}
-    //   exiting={SlideOutDown}
-    // >
-    _react.default.createElement(_reactNative.View, {
-      style: chatViewStyles.container
-    }, /*#__PURE__*/_react.default.createElement(ChatAndParticipantsHeader, {
-      activeTab: activeTab,
-      setActiveTab: setActiveTab,
-      onClosePress: hideInsetChatView
-    }), activeTab === 'Chat' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Chat.ChatList, null), /*#__PURE__*/_react.default.createElement(ChatTextInput, {
-      clearButton: true
-    })) : activeTab === 'Participants' ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-      style: chatViewStyles.participantsWrapper
-    }, /*#__PURE__*/_react.default.createElement(_Participants.SearchableParticipantsView, null)) : null)
-    // </Animated.View>
-  );
-};
-exports.ChatView = ChatView;
-const chatViewStyles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: _theme.COLORS.SURFACE.DIM,
-    padding: 16,
-    borderTopRightRadius: 16,
-    borderTopLeftRadius: 16
-  },
-  participantsWrapper: {
-    marginTop: 16
-  }
-});
-const ChatWindow = () => {
-  const {
-    bottom
-  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.container
-  }, /*#__PURE__*/_react.default.createElement(ChatHeader, {
-    filters: true
-  }), /*#__PURE__*/_react.default.createElement(_Chat.ChatList, null), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: bottom === 0 ? styles.inputContainer : {
-      marginBottom: bottom
-    }
-  }, /*#__PURE__*/_react.default.createElement(ChatTextInput, {
-    clearButton: true,
-    containerStyle: styles.input
-  })));
-};
-exports.ChatWindow = ChatWindow;
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    height: '100%',
-    width: '100%',
-    backgroundColor: _theme.COLORS.SURFACE.DEFAULT
-  },
-  chatHeaderContainer: {
-    height: 48,
-    width: '80%',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  chatHeading: {
-    fontFamily: 'Inter-Medium',
-    fontSize: 20,
-    lineHeight: 24,
-    letterSpacing: 0.15,
-    color: _theme.COLORS.TEXT.HIGH_EMPHASIS,
-    paddingRight: 12
-  },
-  chatFilterContainer: {
-    marginLeft: 16,
-    padding: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: 120,
-    borderWidth: 1,
-    borderColor: _theme.COLORS.BORDER.LIGHT,
-    borderRadius: 8
-  },
-  chatFilterText: {
-    color: _theme.COLORS.TEXT.HIGH_EMPHASIS,
-    fontFamily: 'Inter-Regular',
-    fontSize: 12,
-    lineHeight: 16,
-    letterSpacing: 0.4,
-    marginRight: 12,
-    textTransform: 'capitalize'
-  },
-  chatFilterIcon: {
-    color: _theme.COLORS.TEXT.HIGH_EMPHASIS,
-    position: 'absolute',
-    right: 0
-  },
-  chatMenuContainer: {
-    backgroundColor: _theme.COLORS.SURFACE.LIGHT
-  },
-  chatMenuItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: _reactNative.Platform.OS === 'ios' ? 16 : 0
-  },
-  chatMenuItemIcon: {
-    color: _theme.COLORS.WHITE,
-    paddingRight: 16,
-    height: 24
-  },
-  chatMenuItemName: {
-    color: _theme.COLORS.TEXT.HIGH_EMPHASIS,
-    fontSize: 14,
-    lineHeight: 20,
-    letterSpacing: 0.1,
-    fontFamily: 'Inter-Medium',
-    textTransform: 'capitalize'
-  },
-  chatInput: {
-    backgroundColor: _theme.COLORS.SURFACE.LIGHT,
-    color: _theme.COLORS.TEXT.HIGH_EMPHASIS,
-    fontFamily: 'Inter-Medium',
-    borderColor: _theme.COLORS.BORDER.LIGHT,
-    borderWidth: 1,
-    borderRadius: 8,
-    width: '100%',
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-    paddingLeft: 16,
-    paddingRight: 88
-  },
-  sendMessageButton: {
-    position: 'absolute',
-    alignItems: 'center',
-    right: 0,
-    paddingHorizontal: 12,
-    width: 48
-  },
-  sendMessageIcon: {
-    color: _theme.COLORS.TEXT.HIGH_EMPHASIS
-  },
-  clearButtonStyle: {
-    right: 48,
-    width: 40
-  },
-  contentContainer: {
-    flex: 1,
-    marginVertical: 4
-  },
-  messageBubble: {
-    padding: 8,
-    borderRadius: 8,
-    marginTop: 16,
-    width: '100%'
-  },
-  privateMessageBubble: {
-    backgroundColor: _theme.COLORS.SURFACE.LIGHT
-  },
-  headingContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-    justifyContent: 'space-between'
-  },
-  headingLeftContainer: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  headingRightContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderRadius: 4,
-    borderColor: _theme.COLORS.BORDER.LIGHT,
-    justifyContent: 'center',
-    padding: 4
-  },
-  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
-  },
-  inputContainer: {
-    marginBottom: 16
-  },
-  input: {
-    backgroundColor: _theme.COLORS.SURFACE.LIGHT,
-    borderWidth: 1,
-    borderColor: _theme.COLORS.BORDER.LIGHT
-  },
-  pinIcon: {
-    color: _theme.COLORS.WHITE
-  },
-  pinIconContainer: {
-    flex: 1,
-    height: '100%',
-    justifyContent: 'flex-end'
-  }
-});
-//# sourceMappingURL=ChatWindow.js.map