@ethora/chat-component-rn 26.4.1

package/src/components/MessageBubble/Message.tsx

@@ -0,0 +1,400 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  findNodeHandle,
+  UIManager,
+  Dimensions,
+  Text,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { Avatar } from './Avatar';
+import MessageInteractions from './MessageInteractions';
+import { BottomReplyContainer } from './BottomReplyContainer';
+import { MessageReply } from './MessageReply';
+import { DeletedMessage } from './DeletedMessage';
+import {
+  setActiveModal,
+  setDeleteModal,
+  setSelectedUser,
+} from '../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { setActiveMessage, setEditAction } from '../../roomStore/roomsSlice';
+import styled from 'styled-components/native';
+import { IUser, MessageProps } from '../../types/types';
+import MediaMessage from '../MainComponents/MediaMessage';
+import MessageTranslations from './MessageTranslations';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { parseMessageBody } from '../../helpers/parseMessageBody';
+import { useMessageHeapState } from '../../hooks/useMessageHeapState';
+import { DoubleTick } from '../../assets/icons';
+import { useXmppClient } from '../../context/xmppProvider';
+import { MessageReaction } from './MessageReaction';
+import { MessageFooter } from '../styled/StyledComponents';
+
+const CustomMessageContainer = styled.View<{ isUser: boolean; reply?: number }>`
+  flex-direction: row;
+  padding: 10px;
+  align-items: flex-end;
+  justify-content: ${({ isUser }) => (isUser ? 'flex-end' : 'flex-start')};
+  margin-bottom: ${(props) => (props.reply ? '20px' : '0px')};
+`;
+
+const CustomMessageBubble = styled.View<{
+  isUser: boolean;
+  deleted?: boolean;
+  backgroundMessageUser?: string;
+  backgroundMessage?: string;
+}>`
+  position: relative;
+  max-width: 85%;
+  min-width: 30%;
+  padding: 10px;
+  margin-right: ${({isUser}) => isUser ? '0' : '10px'};
+  margin-left: ${({isUser}) => isUser ? '10px' : '0'};
+  border-radius: 10px;
+  border-bottom-left-radius: ${({ isUser }) => (isUser ? '10' : '0')}px;
+  border-bottom-right-radius: ${({ isUser }) => (isUser ? '0' : '10')}px;
+  background-color: ${({
+    isUser,
+    deleted,
+    backgroundMessageUser,
+    backgroundMessage,
+  }) =>
+    deleted
+      ? '#f5f5f5'
+      : isUser
+      ? backgroundMessageUser || '#d1e7ff'
+      : backgroundMessage || '#fff'};
+`;
+
+const CustomMessageText = styled.Text<{
+  isUser: boolean;
+  colorUser?: string;
+  color?: string;
+}>`
+  font-size: 16px;
+  color: ${({ color, colorUser, isUser }) =>
+    isUser ? colorUser || '#333' : color || '#333'};
+`;
+
+const CustomMessagePhoto = styled.Image`
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+`;
+
+const CustomMessagePhotoContainer = styled.TouchableOpacity`
+  margin-right: 10px;
+`;
+
+const CustomUserName = styled.Text<{ color?: string }>`
+  font-size: 14px;
+  font-weight: 500;
+  color: ${({ color }) => color || '#333'};
+`;
+
+const CustomMessageTimestamp = styled.Text<{
+  isUser?: boolean;
+  color?: string;
+  colorUser?: string;
+}>`
+  font-size: 12px;
+  color: #999;
+  color: ${({ isUser, color, colorUser }) =>
+    isUser ? colorUser || '#999' : color || '#999'};
+  margin-top: 5px;
+  align-self: flex-end;
+`;
+
+const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
+  const dispatch = useDispatch();
+  const { client } = useXmppClient();
+  const { config, langSource, user} = useChatSettingState();
+  const { idSet } = useMessageHeapState();
+
+  const [isPressed, setIsPressed] = useState(false);
+
+  const [contextMenuPosition, setContextMenuPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const messageRef = useRef<View>(null);
+
+  const handleUserAvatarClick = (user: IUser): void => {
+    dispatch(setActiveModal(MODAL_TYPES.PROFILE));
+    dispatch(setSelectedUser(user));
+  };
+
+  const handleReplyMessage = () => {
+    dispatch(setEditAction({ isEdit: false }));
+
+    if (!isReply && message.mainMessage) {
+      const messageCore = JSON.parse(message.mainMessage);
+      dispatch(
+        setActiveMessage({ id: messageCore.id, chatJID: messageCore.roomJid })
+      );
+
+      return setIsPressed(false);
+    }
+
+    dispatch(setActiveMessage({ id: message.id, chatJID: message.roomJid }));
+
+    return setIsPressed(false);
+  };
+
+  const handleDeleteMessage = () => {
+    dispatch(
+      setDeleteModal({
+        isDeleteModal: true,
+        roomJid: message.roomJid,
+        messageId: message.id,
+      })
+    );
+    setIsPressed(false);
+  };
+
+  const handleEditMessage = () => {
+    dispatch(
+      setEditAction({
+        isEdit: true,
+        roomJid: message.roomJid,
+        messageId: message.id,
+        text: message.body,
+      })
+    );
+
+    return setIsPressed(false);
+  };
+
+  // const handleLongPress = () => {
+  //   setIsPressed(true);
+  //   console.log("setIsPressed", isPressed);
+  // };
+
+  const handleReactionMessage = (emoji: string) => {
+    if (!message.reaction) {
+      return client.sendMessageReactionStanza(
+        message.id,
+        message.roomJid,
+        [emoji],
+        { firstName: user.firstName, lastName: user.lastName }
+      );
+    }
+    if (
+      message.reaction &&
+      message.reaction[user.xmppUsername || ''] &&
+      message.reaction[user.xmppUsername || '']?.emoji.includes(emoji)
+    ) {
+      const filterEmoji = message.reaction[user.xmppUsername || '']?.emoji.filter(
+        (reaction) => reaction !== emoji
+      );
+
+      return client.sendMessageReactionStanza(
+        message.id,
+        message.roomJid,
+        filterEmoji,
+        { firstName: user.firstName, lastName: user.lastName }
+      );
+    }
+
+    client.sendMessageReactionStanza(
+      message.id,
+      message.roomJid,
+      [...(message.reaction[user.xmppUsername || '']?.emoji || []), emoji],
+      { firstName: user.firstName, lastName: user.lastName }
+    );
+  };
+
+  const handleLongPress = () => {
+    if (messageRef.current) {
+      const nodeHandle = findNodeHandle(messageRef.current);
+      if (nodeHandle) {
+        UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
+          const screenHeight = Dimensions.get('window').height;
+
+          const enoughSpaceBelow = screenHeight - pageY - height > 150;
+          setContextMenuPosition({
+            x: pageX,
+            y: enoughSpaceBelow ? pageY + height : pageY - 150,
+          });
+        });
+      }
+    }
+    setIsPressed(true);
+  };
+
+  const messageText = config?.messageTextFilter?.enabled
+    ? parseMessageBody(config?.messageTextFilter.filterFunction(message.body))
+    : parseMessageBody(message.body);
+
+  const isPending = idSet.has(message.id) || message?.pending || false;
+
+  return (
+    <View>
+      {isPressed && <View style={styles.overlay} />}
+      <View
+        ref={messageRef}
+        style={[
+          styles.customMessageContainer,
+          {
+            justifyContent: isUser ? 'flex-end' : 'flex-start',
+            marginBottom: !!message?.reply?.length || message?.reaction && !!Object.keys(message?.reaction)?.length
+             ? 20 : 0,
+          },
+          isPressed
+            ? { transform: [{ scale: 1.05 }], paddingRight: 16 }
+            : undefined,
+          // justify-content: ${({ isUser }) => (isUser ? "flex-end" : "flex-start")},
+          // margin-bottom: ${(props) => !!props.reply && "20px"},
+        ]}
+      >
+        {!isUser && (
+          <CustomMessagePhotoContainer
+            onPress={() => handleUserAvatarClick(message.user)}
+          >
+            {message.user?.profileImage ? (
+              <CustomMessagePhoto source={{ uri: message.user.profileImage }} />
+            ) : (
+              <Avatar username={message.user.name} />
+            )}
+          </CustomMessagePhotoContainer>
+        )}
+        <TouchableWithoutFeedback
+          // disableInteractions hides the long-press → context menu
+          // (delete / edit / reply / react). Mirrors web's config gate.
+          onLongPress={
+            config?.disableInteractions ? undefined : handleLongPress
+          }
+          delayLongPress={500}
+        >
+          <CustomMessageBubble
+            isUser={isUser}
+            deleted={message.isDeleted}
+            backgroundMessageUser={config?.messageColor?.backgroundMessageUser}
+            backgroundMessage={config?.messageColor?.backgroundMessage}
+          >
+            {!isUser && (
+              <CustomUserName color={config?.colors?.primary}>
+                {message.user.name}
+              </CustomUserName>
+            )}
+            {!isReply && message.mainMessage && (
+              <MessageReply
+                handleReplyMessage={handleReplyMessage}
+                isUser={isUser}
+                text={JSON.parse(message.mainMessage).text}
+                color={config?.colors?.primary}
+              />
+            )}
+
+            {message?.isMediafile === 'true' && !message?.isDeleted ? (
+              <MediaMessage
+                mimeType={message.mimetype}
+                messageText={message.locationPreview}
+                location={message?.location}
+                message={message}
+              />
+            ) : (
+              <>
+                {message.isDeleted && message.id !== 'delimiter-new' ? (
+                  <DeletedMessage />
+                ) : (
+                  <CustomMessageText
+                    isUser={isUser}
+                    colorUser={config?.messageColor?.colorUser}
+                    color={config?.messageColor?.color}
+                  >
+                    <Text>{messageText}</Text>
+                  </CustomMessageText>
+                )}
+              </>
+            )}
+            {config?.enableTranslates && (
+              <MessageTranslations
+                message={message}
+                config={config}
+                langSource={langSource}
+              />
+            )}
+            <CustomMessageTimestamp>
+            {!config?.disableSentLogic && isUser && isPending && <Text>sending...</Text>}
+            {new Date(message.date).toLocaleTimeString([], {
+              hour: '2-digit',
+              minute: '2-digit',
+            })}
+            {!config?.disableSentLogic && isUser && !isPending && (
+              <DoubleTick />
+            )}
+          </CustomMessageTimestamp>
+
+          {message?.reply?.length && message?.reply?.length > 0 ? (
+              <BottomReplyContainer
+                isUser={isUser}
+                onClick={handleReplyMessage}
+                reply={message?.reply}
+              />
+            ) : (
+              <View />
+            )}
+
+          <MessageFooter isUser={isUser}>
+
+            {message.reaction && !config?.disableReactions && (
+              <MessageReaction
+                reaction={message.reaction}
+                changeReaction={handleReactionMessage}
+                color={config?.colors?.primary || '#0052CD'}
+                userName={`${user.firstName} ${user.lastName}`}
+              />
+            )}
+          </MessageFooter>
+          </CustomMessageBubble>
+        </TouchableWithoutFeedback>
+      </View>
+      {!config?.disableInteractions && isPressed && (
+        <MessageInteractions
+          position={contextMenuPosition}
+          isReply={isReply}
+          isUser={isUser}
+          message={message}
+          closeMenu={() => setIsPressed(false)}
+          handleReplyMessage={handleReplyMessage}
+          handleDeleteMessage={handleDeleteMessage}
+          handleEditMessage={handleEditMessage}
+          handleReactionMessage={handleReactionMessage}
+        />
+      )}
+    </View>
+  );
+};
+
+export { Message };
+
+const styles = StyleSheet.create({
+  customMessageContainer: {
+    flexDirection: 'row',
+    padding: 10,
+    alignItems: 'flex-end',
+    position: 'relative',
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    // backgroundColor: "rgba(0, 0, 0, 0.3)",
+  },
+  timestamp: {
+    fontSize: 12,
+    color: '#999',
+    marginTop: 5,
+    alignSelf: 'flex-end',
+  },
+});

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -0,0 +1,247 @@
+import React, { useMemo, useState } from 'react';
+import {
+  ContextMenu,
+  Delimeter,
+  MenuItem,
+  Overlay,
+} from '../ContextMenu/ContextMenuComponents';
+import { useDispatch, 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 Clipboard from '@react-native-clipboard/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;
+  isUser?: boolean;
+  message: IMessage;
+  position: { x: number; y: number } | null;
+  closeMenu: () => void;
+  handleReplyMessage: () => void;
+  handleDeleteMessage: () => void;
+  handleEditMessage: () => void;
+  handleReactionMessage: (id: string) => void;
+}
+
+const MessageInteractions: React.FC<MessageInteractionsProps> = ({
+  isReply,
+  isUser,
+  message,
+  closeMenu,
+  position,
+  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 = (text: string) => {
+    Clipboard.setString(text);
+    showToast({
+      id: Date.now().toString(),
+      title: 'Success',
+      message: 'Copied to clipboard!',
+      type: 'success',
+    });
+    closeMenu();
+  };
+
+  const handleReplyMessage = () => {
+    replyMessage();
+  };
+
+  const memoPosition = useMemo(() => {
+    if (position) {
+      if (isUser) {
+        return {
+          top: position.y,
+          right: 10,
+        };
+      }
+
+      return {
+        top: position.y,
+        left: 10,
+      };
+    }
+  }, [position, isUser]);
+
+  if (config?.disableInteractions) {return null;}
+
+  return (
+    <Modal
+      transparent
+      animationType="fade"
+      visible={true}
+      onRequestClose={closeMenu}
+    >
+      {!message.isDeleted && (
+        <Overlay onPress={closeMenu}>
+          <ContextMenu
+            style={[styles.contextMenu, memoPosition]}
+            // style={{ top: contextMenu.y, left: contextMenu.x }}
+          >
+            {/* <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> */}
+            {/* Reaction row — hidden when consumer sets
+               `config.disableReactions: true`. Mirrors the gate web
+               applies inside its MessageInteractions panel. */}
+            {!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>
+            ))}
+
+            {/* ArrowButton */}
+            <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 />
+            </MenuItem>
+            <Delimeter />
+            {isUser && (
+              <>
+                <MenuItem onPress={handleEditMessage}>
+                  <Text>{MESSAGE_INTERACTIONS.EDIT}</Text>
+                  <MESSAGE_INTERACTIONS_ICONS.EDIT />
+                </MenuItem>
+                <Delimeter />
+              </>
+            )}
+            <MenuItem onPress={handleDeleteMessage}>
+              <Text>{MESSAGE_INTERACTIONS.DELETE}</Text>
+              <MESSAGE_INTERACTIONS_ICONS.DELETE />
+            </MenuItem>
+            {/* <Delimeter />
+          <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.REPORT)}>
+            {MESSAGE_INTERACTIONS.REPORT}
+            <MESSAGE_INTERACTIONS_ICONS.REPORT />{' '}
+          </MenuItem> */}
+          </ContextMenu>
+        </Overlay>
+      )}
+
+    </Modal>
+  );
+};
+
+export default MessageInteractions;
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+  },
+  contextMenu: {
+    position: 'absolute',
+    backgroundColor: 'white',
+    padding: 10,
+    borderRadius: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+});