@ethora/chat-component-rn 26.5.4 → 26.5.7

package/src/components/MessageBubble/Message.tsx

@@ -31,6 +31,7 @@ import { parseMessageBody } from '../../helpers/parseMessageBody';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
 import { DoubleTick } from '../../assets/icons';
 import { useXmppClient } from '../../context/xmppProvider';
+import { useSendMessage } from '../../hooks/useSendMessage';
 import { MessageReaction } from './MessageReaction';
 import { MessageFooter } from '../styled/StyledComponents';
 
@@ -47,14 +48,17 @@ const CustomMessageBubble = styled.View<{
   deleted?: boolean;
   backgroundMessageUser?: string;
   backgroundMessage?: string;
+  isMedia?: boolean;
 }>`
   position: relative;
   max-width: 85%;
   min-width: 30%;
-  padding: 10px;
+  padding: ${({isMedia}) => isMedia ? '0' : '10'}px;
+  padding-bottom: ${({isMedia}) => isMedia ? '6' : '10'}px;
   margin-right: ${({isUser}) => isUser ? '0' : '10px'};
   margin-left: ${({isUser}) => isUser ? '10px' : '0'};
   border-radius: 10px;
+  overflow: hidden;
   border-bottom-left-radius: ${({ isUser }) => (isUser ? '10' : '0')}px;
   border-bottom-right-radius: ${({ isUser }) => (isUser ? '0' : '10')}px;
   background-color: ${({
@@ -113,7 +117,8 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
   const { config, langSource, user} = useChatSettingState();
-  const { idSet } = useMessageHeapState();
+  const { idSet, failedIdSet } = useMessageHeapState();
+  const { retryMessage } = useSendMessage();
 
   const [isPressed, setIsPressed] = useState(false);
 
@@ -218,14 +223,41 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     if (messageRef.current) {
       const nodeHandle = findNodeHandle(messageRef.current);
       if (nodeHandle) {
-        UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
+        UIManager.measure(nodeHandle, (_x, _y, _width, height, pageX, pageY) => {
           const screenHeight = Dimensions.get('window').height;
+          // MessageInteractions is ~5 rows (delete/edit/reply/react/copy)
+          // at ~48px each + padding, plus emoji bar on top. 280 covers
+          // both even with a couple of long labels. The legacy 150
+          // figure assumed a much shorter menu and stranded the popup
+          // off-screen on the last message of the room.
+          const MENU_HEIGHT = 280;
+          // Treat the consumer-supplied keyboardVerticalOffset as a
+          // proxy for tab bar + bottom safe-area when present; falls
+          // back to a reasonable default so the menu doesn't bump into
+          // the nav bar on phones without one in config.
+          const bottomReserve =
+            (config?.keyboardVerticalOffset ?? 0) + 24;
+          const topReserve = 16;
+
+          const spaceBelow = screenHeight - (pageY + height) - bottomReserve;
+          const spaceAbove = pageY - topReserve;
+
+          let menuY: number;
+          if (spaceBelow >= MENU_HEIGHT) {
+            menuY = pageY + height;
+          } else if (spaceAbove >= MENU_HEIGHT) {
+            menuY = pageY - MENU_HEIGHT;
+          } else {
+            // Neither side has room (e.g. very small phone, large
+            // menu) — clamp to the visible region so at least the
+            // top of the menu is reachable.
+            menuY = Math.max(
+              topReserve,
+              screenHeight - MENU_HEIGHT - bottomReserve
+            );
+          }
 
-          const enoughSpaceBelow = screenHeight - pageY - height > 150;
-          setContextMenuPosition({
-            x: pageX,
-            y: enoughSpaceBelow ? pageY + height : pageY - 150,
-          });
+          setContextMenuPosition({ x: pageX, y: menuY });
         });
       }
     }
@@ -236,7 +268,13 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     ? parseMessageBody(config?.messageTextFilter.filterFunction(message.body))
     : parseMessageBody(message.body);
 
-  const isPending = idSet.has(message.id) || message?.pending || false;
+  const isFailed = failedIdSet.has(message.id);
+  const isPending =
+    !isFailed && (idSet.has(message.id) || message?.pending || false);
+
+  const onRetryPress = () => {
+    if (isFailed) {retryMessage(message.id);}
+  };
 
   return (
     <View>
@@ -279,6 +317,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           <CustomMessageBubble
             isUser={isUser}
             deleted={message.isDeleted}
+            isMedia={message?.isMediafile === 'true' && !message?.isDeleted}
             backgroundMessageUser={config?.messageColor?.backgroundMessageUser}
             backgroundMessage={config?.messageColor?.backgroundMessage}
           >
@@ -327,11 +366,21 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             )}
             <CustomMessageTimestamp>
             {!config?.disableSentLogic && isUser && isPending && <Text>sending...</Text>}
+            {!config?.disableSentLogic && isUser && isFailed && (
+              <Text
+                onPress={onRetryPress}
+                style={styles.failedText}
+                accessibilityRole="button"
+                accessibilityLabel="Retry sending message"
+              >
+                ! Failed — tap to retry
+              </Text>
+            )}
             {new Date(message.date).toLocaleTimeString([], {
               hour: '2-digit',
               minute: '2-digit',
             })}
-            {!config?.disableSentLogic && isUser && !isPending && (
+            {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
               <DoubleTick />
             )}
           </CustomMessageTimestamp>
@@ -401,4 +450,9 @@ const styles = StyleSheet.create({
     marginTop: 5,
     alignSelf: 'flex-end',
   },
+  failedText: {
+    color: '#E53935',
+    fontWeight: '600',
+    marginRight: 6,
+  },
 });

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,40 +1,21 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import {
   MESSAGE_INTERACTIONS,
   MESSAGE_INTERACTIONS_ICONS,
 } from '../../helpers/constants/MESSAGE_INTERACTIONS';
 import { IMessage } from '../../types/types';
-import { useXmppClient } from '../../context/xmppProvider';
-import { setActiveMessage } from '../../roomStore/roomsSlice';
 import {
-  Alert,
   Modal,
   Text,
-  TouchableWithoutFeedback,
   StyleSheet,
   View,
   Pressable,
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
-import EmojiPicker from 'react-native-emoji-selector';
-
-const fixedEmojiIds = ['joy', 'heart', 'fire', '+1', 'smile', 'scream'];
-
-function convertIdToEmoji(id: string) {
-  const mapping = {
-    joy: '😂',
-    heart: '❤️',
-    fire: '🔥',
-    '+1': '👍',
-    smile: '😄',
-    scream: '😱',
-  };
-  return mapping[id as keyof typeof mapping] || '❓';
-}
 
 interface MessageInteractionsProps {
   isReply?: boolean;
@@ -57,38 +38,13 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   handleReplyMessage: replyMessage,
   handleDeleteMessage,
   handleEditMessage,
-  handleReactionMessage,
 }) => {
-  const { client } = useXmppClient();
-  const dispatch = useDispatch();
   const { showToast } = useToast();
 
-  const [pickerVisible, setPickerVisible] = useState(false);
-
-  const handleReactionClick = (id: string) => {
-    handleReactionMessage(id);
-    closeMenu();
-  };
-
-  const onClose = () => {
-    setPickerVisible(false);
-  };
-
-  // const handleDeleteMessage = (roomJid: string, messageId: string) => {
-  //   // dispatch(deleteRoomMessage({ roomJID: room, messageId: msgId }));
-  //   client.deleteMessageStanza(roomJid, messageId);
-  // };
-
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
   );
 
-  const closeContextMenu = () => {
-    // if (!config?.disableInteractions) {
-    //   setContextMenu({ visible: false, x: 0, y: 0 });
-    // }
-  };
-
   const handleCopyMessage = async (text: string) => {
     try {
       await Clipboard.setStringAsync(text);
@@ -143,60 +99,6 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
         <View style={styles.overlayFill}>
           <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
           <View style={[styles.contextMenu, memoPosition]}>
-            {/* <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.SEND_COINS)}>
-            {MESSAGE_INTERACTIONS.SEND_COINS}
-            <MESSAGE_INTERACTIONS_ICONS.SEND_COINS />{' '}
-          </MenuItem>
-          <Delimeter />
-          <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.SEND_ITEM)}>
-            {MESSAGE_INTERACTIONS.SEND_ITEM}
-            <MESSAGE_INTERACTIONS_ICONS.SEND_ITEM />{' '}
-          </MenuItem> */}
-            {/*
-            {!config?.disableReactions && (
-              <View style={{ flexDirection: 'row', paddingBottom: 10 }}>
-                {fixedEmojiIds.map((id) => (
-                  <Pressable
-                    key={id}
-                    onPress={() => handleReactionClick(id)}
-                    style={{ marginRight: 6 }}
-                  >
-                    <Text style={{ fontSize: 26 }}>{convertIdToEmoji(id)}</Text>
-                  </Pressable>
-                ))}
-                <Pressable
-                  onPress={() => setPickerVisible(!pickerVisible)}
-                  style={{ marginLeft: 10 }}
-                >
-                  <Text style={{ fontSize: 24 }}>⌄</Text>
-                </Pressable>
-              </View>
-            )}
-
-            {!config?.disableReactions && pickerVisible && (
-              <View style={{ height: 250 }}>
-                <EmojiPicker
-                  onEmojiSelected={(emoji) => {
-                    handleReactionClick(emoji);
-                  }}
-                  showSearchBar={false}
-                  showTabs={false}
-                />
-              </View>
-            )}
-            */}
-
-            {/*
-            {!isReply && (
-              <>
-                <MenuItem onPress={handleReplyMessage}>
-                  <Text>{MESSAGE_INTERACTIONS.REPLY}</Text>
-                  <MESSAGE_INTERACTIONS_ICONS.REPLY />
-                </MenuItem>
-                <Delimeter />
-              </>
-            )}
-            */}
             <MenuItem onPress={() => handleCopyMessage(message.body!)}>
               <Text>{MESSAGE_INTERACTIONS.COPY}</Text>
               <MESSAGE_INTERACTIONS_ICONS.COPY />
@@ -215,11 +117,6 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
                 </MenuItem>
               </>
             )}
-            {/* <Delimeter />
-          <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.REPORT)}>
-            {MESSAGE_INTERACTIONS.REPORT}
-            <MESSAGE_INTERACTIONS_ICONS.REPORT />{' '}
-          </MenuItem> */}
           </View>
         </View>
       )}

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -11,7 +11,7 @@ import {
   Viewider,
   Divider,
 } from '../styledModalComponents';
-import { Pressable, View, Text, ScrollView, Alert, Linking, Platform } from 'react-native';
+import { Pressable, View, Text, ScrollView, Alert, Linking } from 'react-native';
 import ModalHeaderComponent from '../ModalHeaderComponent';
 import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
 import { useDispatch, useSelector } from 'react-redux';
@@ -19,14 +19,7 @@ import { RootState, getActiveRoom } from '../../../roomStore';
 import { uploadFile } from '../../../networking/api-requests/auth.api';
 import { useXmppClient } from '../../../context/xmppProvider';
 import { updateRoom } from '../../../roomStore/roomsSlice';
-import ImagePicker from 'react-native-image-crop-picker';
-import {
-  check,
-  request,
-  PERMISSIONS,
-  RESULTS,
-  Permission,
-} from 'react-native-permissions';
+import * as ImagePicker from 'expo-image-picker';
 import Loader from '../../styled/Loader';
 import Button from '../../styled/Button';
 import { DeleteIcon, MoreIcon, QrIcon } from '../../../assets/icons';
@@ -89,40 +82,24 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     }
   }, [client, activeRoom?.jid]);
 
-  const checkPermission = async (permission: Permission) => {
-    const status = await check(permission);
-    if (status === RESULTS.GRANTED) {
-      return status;
-    } else if (status === RESULTS.DENIED) {
-      const requestStatus = await request(permission);
-      return requestStatus;
-    }
-    return status;
-  };
-
   const onUpload = async () => {
     let loadingSet = false;
     try {
       setLoading(true);
       loadingSet = true;
 
-      const permission =
-        Platform.OS === 'ios'
-          ? PERMISSIONS.IOS.PHOTO_LIBRARY
-          : PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE;
-      const permissionStatus = await checkPermission(permission);
-
-      if (permissionStatus !== RESULTS.GRANTED) {
+      // expo-image-picker owns the permission prompt internally and
+      // returns a `granted` flag. No separate react-native-permissions
+      // round-trip needed.
+      const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (!perm.granted) {
         Alert.alert(
           'Permission required',
           'Photo library permission is needed to select images.',
           [
             {
               text: 'Cancel',
-              onPress: () => {
-                setLoading(false);
-                console.log('Photo permission cancelled');
-              },
+              onPress: () => setLoading(false),
               style: 'cancel',
             },
             {
@@ -134,18 +111,20 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         return;
       }
 
-      const image = await ImagePicker.openPicker({
-        width: 300,
-        height: 300,
-        cropping: true,
-        cropperCircleOverlay: true,
-        compressImageQuality: 0.8,
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ['images'],
+        allowsEditing: true,
+        aspect: [1, 1],
+        quality: 0.8,
       });
-
-      const originalName = image.path.split('/').pop();
+      if (result.canceled || !result.assets?.[0]) {
+        return;
+      }
+      const asset = result.assets[0];
+      const originalName = asset.fileName || asset.uri.split('/').pop();
       const fileObject = {
-        uri: image.path,
-        type: image.mime || 'image/jpeg',
+        uri: asset.uri,
+        type: asset.mimeType || 'image/jpeg',
         name: originalName || `profile_${Date.now()}.jpg`,
       };
 

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -17,6 +17,7 @@ import * as FileSystem from 'expo-file-system/legacy';
 import * as MediaLibrary from 'expo-media-library';
 import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
+import { ensureFilenameHasExtension } from '../../../helpers/mimeToExtension';
 
 export const FullScreenVideo = styled.View`
   width: 100%;
@@ -61,10 +62,10 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
 
     try {
-      let fileName = activeFile.fileName || `media_${Date.now()}`;
-      if (!fileName.includes('.')) {
-        fileName += activeFile.mimetype.startsWith('image/') ? '.jpg' : '.mp4';
-      }
+      const fileName = ensureFilenameHasExtension(
+        activeFile.fileName,
+        activeFile.mimetype
+      );
 
       const filePath = FileSystem.cacheDirectory + fileName;
       const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
@@ -87,7 +88,14 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
   const saveFileToDownloads = async () => {
     try {
-      const fileName = activeFile.fileName || `file_${Date.now()}`;
+      // Always include a valid extension on the cache filename. expo-media-
+      // library's createAssetAsync inspects the URI's extension and throws
+      // "Could not get the file's extension" when missing — see bug #9 in
+      // sdk-bug-tracker.md.
+      const fileName = ensureFilenameHasExtension(
+        activeFile.fileName,
+        activeFile.mimetype
+      );
       const filePath = FileSystem.cacheDirectory + fileName;
       const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
 
@@ -162,23 +170,33 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         );
       case activeFile.mimetype === 'application/pdf':
         return <PdfViewer pdfUrl={activeFile.fileURL} />;
-      default:
+      default: {
+        const displayName = ensureFilenameHasExtension(
+          activeFile.fileName,
+          activeFile.mimetype
+        );
         return (
           <View
             style={{
               backgroundColor: '#FFF8ED',
               borderRadius: 16,
-              display: 'flex',
-              padding: 16,
+              padding: 20,
+              gap: 8,
             }}
           >
-            <Text>
-              Unable to open the uploaded document. The file format is not
-              supported by the system. Please upload a file in a compatible
-              format. You still can download this file.
+            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+              {displayName}
+            </Text>
+            <Text style={{ color: '#666' }}>
+              {activeFile.mimetype || 'unknown type'}
+            </Text>
+            <Text style={{ marginTop: 8 }}>
+              This file format can't be previewed inline. Tap the save icon
+              above to download it.
             </Text>
           </View>
         );
+      }
     }
   }, [activeFile]);
 

package/src/components/Modals/ModalWrapper/ModalWrapper.tsx

@@ -22,6 +22,12 @@ interface ModalWrapperProps {
   setTextarea?: (value: string) => void;
   handleCloseModal: () => void;
   handleClick: () => void;
+  /**
+   * When true, render a small centered dialog instead of the default
+   * full-screen container. Used for confirm-style modals (Delete, Leave
+   * room) where edge-to-edge feels too heavy.
+   */
+  compact?: boolean;
 }
 
 export const ModalWrapper: FC<ModalWrapperProps> = ({
@@ -35,6 +41,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   setTextarea,
   handleCloseModal,
   handleClick,
+  compact = false,
 }) => {
   const textareaRef = useRef<TextInput>(null);
 
@@ -54,7 +61,21 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
       onRequestClose={handleCloseModal}
     >
       <ModalBackground>
-        <ModalContainer style={{ maxWidth: 640 }}>
+        <ModalContainer
+          style={
+            compact
+              ? {
+                  flex: 0,
+                  width: '85%',
+                  maxWidth: 360,
+                  height: 'auto',
+                  padding: 24,
+                  borderRadius: 16,
+                  gap: 16,
+                }
+              : { maxWidth: 640 }
+          }
+        >
           <CloseButton onPress={handleCloseModal}>
             <Text style={{ fontSize: 24 }}>&times;</Text>
           </CloseButton>

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -285,7 +285,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
             </LabelData>
           </BorderedContainer>
 
-          {selectedUser && (
+          {selectedUser && !config?.disableProfilesInteractions && (
             <>
               <ActionButton
                 StartIcon={<ChatIcon />}

package/src/components/RoomComponents/styled/LastMessageEmoji.tsx

@@ -5,20 +5,22 @@ import {
   LastRoomMessageText,
 } from './StyledRoomComponents';
 import { LastMessage } from '../../../types/types';
-import emojiData from 'emoji-mart';
 
 interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'emoji'> {}
 
+/**
+ * Renders the per-room last-message preview when the latest message
+ * is a reaction (emoji). The `emoji` field is expected to already be
+ * a unicode glyph (the reaction stanza carries the rendered character,
+ * not an `:id:`) so we just render it as-is — no emoji-id resolution
+ * library needed. If a legacy payload still ships an `:id:`, it
+ * renders verbatim instead of crashing.
+ */
 const LastMessageEmoji: FC<LastMessageEmojiProps> = ({ user, emoji }) => {
-  const memoEmoji = (id: string) => {
-    const emoji = (emojiData as any).emojis[id];
-    return emoji ? emoji.skins[0].native : '';
-  };
-
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
-      <LastRoomMessageText>{emoji ? memoEmoji(emoji) : ''}</LastRoomMessageText>
+      <LastRoomMessageText>{emoji || ''}</LastRoomMessageText>
     </LastRoomMessageContainer>
   );
 };

package/src/components/UsersList/Checkbox.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+interface CheckboxProps {
+  value: boolean;
+  onValueChange: (next: boolean) => void;
+  disabled?: boolean;
+  color?: string;
+}
+
+/**
+ * Minimal RN-native checkbox replacement for the user-list multi-select.
+ * Avoids pulling in `@react-native-community/checkbox` (legacy native
+ * module that needs the Metro shim) — the UI footprint is one tap-target
+ * with a check glyph, so a plain Pressable does the job.
+ */
+const Checkbox: React.FC<CheckboxProps> = ({
+  value,
+  onValueChange,
+  disabled,
+  color = '#0052cd',
+}) => {
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: value, disabled: !!disabled }}
+      disabled={disabled}
+      onPress={() => onValueChange(!value)}
+      style={[
+        styles.box,
+        { borderColor: color, backgroundColor: value ? color : 'transparent' },
+        disabled && styles.disabled,
+      ]}
+    >
+      {value && (
+        <View style={styles.checkInner}>
+          <Text style={styles.checkGlyph}>✓</Text>
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  box: {
+    width: 18,
+    height: 18,
+    borderWidth: 1.5,
+    borderRadius: 3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkInner: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkGlyph: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '700',
+    lineHeight: 14,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});
+
+export default Checkbox;

package/src/components/UsersList/StyledComponents.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components/native';
-import CheckBox from '@react-native-community/checkbox';
 
 export const ScrollableContainer = styled.View`
   max-height: 100px;
@@ -17,13 +16,6 @@ export const UserItem = styled.TouchableHighlight`
   gap: 8px;
 `;
 
-
-export const Checkbox = styled(CheckBox)`
-  width: 16px;
-  height: 16px;
-  tint-color: #0052cd;
-`;
-
 export const Label = styled.Text`
   font-size: 16px;
   color: #333;

package/src/components/UsersList/UsersList.tsx

@@ -9,9 +9,9 @@ import { ModalTitle, LabelData } from '../Modals/styledModalComponents';
 import {
   ScrollableContainer,
   UserItem,
-  Checkbox,
   Label,
 } from './StyledComponents';
+import Checkbox from './Checkbox';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { RoomMember } from '../../types/types';