@ethora/chat-component-rn 26.4.1

package/src/components/MessageBubble/MessageReaction.tsx

@@ -0,0 +1,149 @@
+/* eslint-disable react-hooks/rules-of-hooks -- pre-existing port artifacts; hooks called conditionally / inside helpers. TODO: refactor */
+import React, { FC, useMemo, useState } from 'react';
+import { View, Text, TouchableOpacity, Animated } from 'react-native';
+import styled from 'styled-components/native';
+import { ReactionMessage } from '../../types/types';
+
+const ReactionContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+
+const ReactionBox = styled(TouchableOpacity)<{ active: boolean; color: string }>`
+  padding: 4px 8px;
+  border-radius: 20px;
+  background-color: ${({ active, color }) => (active ? color : '#ffffff')};
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  elevation: 3;
+`;
+
+interface MessageReactionProps {
+  color: string;
+  reaction: Record<string, ReactionMessage>;
+  changeReaction: (reaction: string) => void;
+  userName?: string;
+}
+
+const emojiMap: Record<string, string> = {
+  joy: '😂',
+  heart: '❤️',
+  fire: '🔥',
+  '+1': '👍',
+  smile: '😄',
+  scream: '😱',
+};
+
+export const MessageReaction: FC<MessageReactionProps> = ({
+  reaction,
+  color,
+  changeReaction,
+  userName,
+}) => {
+  const [tooltipEmoji, setTooltipEmoji] = useState<string | null>(null);
+  const fadeAnim = new Animated.Value(0);
+
+  const showTooltip = (emoji: string) => {
+    setTooltipEmoji(emoji);
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const hideTooltip = () => {
+    Animated.timing(fadeAnim, {
+      toValue: 0,
+      duration: 100,
+      useNativeDriver: true,
+    }).start(() => setTooltipEmoji(null));
+  };
+
+  if (!reaction) {return null;}
+
+  const reactionDetails = useMemo(() => {
+    const result: Record<string, { count: number; users: string[] }> = {};
+
+    Object.values(reaction).forEach(({ emoji, data }) => {
+      if (emoji && emoji.length > 0)
+        {emoji.forEach((em) => {
+          if (!result[em]) {
+            result[em] = { count: 0, users: [] };
+          }
+          result[em].count += 1;
+          result[em].users.push(`${data.senderFirstName} ${data.senderLastName}`);
+        });}
+    });
+
+    return result;
+  }, [reaction]);
+
+  return (
+    <ReactionContainer>
+      {Object.entries(reactionDetails).map(([emoji, details]) => {
+        const isUserReacted = userName
+          ? details.users.includes(userName)
+          : false;
+
+        return (
+          <View key={emoji} style={{ position: 'relative' }}>
+            <ReactionBox
+              active={isUserReacted}
+              color={color}
+              onPress={() => changeReaction(emoji)}
+              onLongPress={() => showTooltip(emoji)}
+              onPressOut={hideTooltip}
+            >
+              <Text style={{ fontSize: 18, marginRight: 4 }}>
+                {emojiMap[emoji] || emoji}
+              </Text>
+              <Text
+                style={{
+                  fontSize: 14,
+                  fontWeight: '600',
+                  color: isUserReacted ? '#fff' : color,
+                }}
+              >
+                {details.count}
+              </Text>
+            </ReactionBox>
+
+            {/* Tooltip */}
+            {tooltipEmoji === emoji && (
+              <Animated.View
+                style={{
+                  position: 'absolute',
+                  bottom: 36,
+                  left: '50%',
+                  transform: [
+                    { translateX: -50 },
+                    {
+                      translateY: fadeAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [4, 0],
+                      }),
+                    },
+                  ],
+                  opacity: fadeAnim,
+                  backgroundColor: '#333',
+                  borderRadius: 6,
+                  paddingHorizontal: 10,
+                  paddingVertical: 6,
+                  maxWidth: 220,
+                  zIndex: 999,
+                }}
+              >
+                <Text style={{ color: '#fff', fontSize: 12 }}>
+                  {details.users.join(', ')}
+                </Text>
+              </Animated.View>
+            )}
+          </View>
+        );
+      })}
+    </ReactionContainer>
+  );
+};

package/src/components/MessageBubble/MessageReply.tsx

@@ -0,0 +1,50 @@
+import { FC } from 'react';
+import { IMessage } from '../../types/types';
+import { styled } from 'styled-components/native';
+import { Text } from 'react-native';
+
+export const StyledMessageReply = styled.TouchableOpacity<{
+  isUser: boolean;
+  configColor: string;
+}>`
+  background-color: ${(props) => (props.isUser ? '#ffffff' : '#E7EDF9')};
+  padding: 8px 16px;
+  margin-bottom: 8px;
+  border-radius: 4px;
+  border-style: solid;
+  border-start-width: ${(props) => (props.isUser ? 4 : 0)}px;
+  border-start-color: ${(props) =>
+    props.isUser ? props.configColor : 'transparent'};
+  border-end-width: ${(props) => (!props.isUser ? 4 : 0)}px;
+  border-end-color: ${(props) =>
+    !props.isUser ? props.configColor : 'transparent'};
+`;
+
+const StyledText = styled.Text`
+  font-size: 14px;
+  overflow: hidden;
+`;
+
+interface MessageReplyProps {
+  isUser: boolean;
+  text: string;
+  color?: string;
+  handleReplyMessage: () => void;
+}
+
+export const MessageReply: FC<MessageReplyProps> = ({
+  isUser,
+  text,
+  color = '#0052CD',
+  handleReplyMessage,
+}) => {
+  return (
+    <StyledMessageReply
+      onPress={handleReplyMessage}
+      isUser={isUser}
+      configColor={color}
+    >
+      <StyledText>{text}</StyledText>
+    </StyledMessageReply>
+  );
+};

package/src/components/MessageBubble/MessageTranslations.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import { CustomDivider } from './CustomDivider';
+import { IConfig, IMessage } from '../../types/types';
+import { CustomMessageText } from '../styled/StyledComponents';
+
+interface MessageTranslationsProps {
+  message: IMessage;
+  langSource?: string;
+  config?: IConfig;
+}
+
+const MessageTranslations: FC<MessageTranslationsProps> = ({
+  message,
+  langSource,
+  config,
+}) => {
+  return (
+    langSource &&
+    message.langSource && (
+      <>
+        <CustomDivider configColor={config?.colors?.primary} />
+        <CustomMessageText>
+          {message.translations?.[langSource]?.translatedText}
+        </CustomMessageText>
+      </>
+    )
+  );
+};
+
+export default MessageTranslations;

package/src/components/Modals/AddMembersModal/AddMembersModal.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import Button from '../../styled/Button';
+import { useSelector } from 'react-redux';
+import { getActiveRoom, RootState } from '../../../roomStore';
+import { useXmppClient } from '../../../context/xmppProvider';
+import {
+  ActionButton,
+  CloseButton,
+  GroupContainer,
+  ModalBackground,
+  ModalContainer,
+  ModalTitle,
+} from '../styledModalComponents';
+import InputWithLabel from '../../styled/StyledInput';
+import {
+  getRoomByName,
+  postAddRoomMember,
+} from '../../../networking/api-requests/rooms.api';
+import { addRoomViaApi } from '../../../roomStore/roomsSlice';
+import { createRoomFromApi } from '../../../helpers/createRoomFromApi';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useAppDispatch } from '../../../hooks/hooks';
+import { Text } from 'react-native';
+import { useToast } from '../../../context/ToastContext';
+
+const AddMembersModal: React.FC = () => {
+  const { config } = useChatSettingState();
+  const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
+
+  const dispatch = useAppDispatch();
+  const { client } = useXmppClient();
+  const { showToast } = useToast();
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [userName, setUserName] = useState('');
+
+  const handleOpenModal = () => setIsModalOpen(true);
+  const handleCloseModal = () => setIsModalOpen(false);
+
+  const validateRoomName = (name: string) => {
+    if (name.trim().length < 3) {
+      return 'Room name must be at least 3 characters.';
+    }
+    return '';
+  };
+
+  const handleAddUser = async () => {
+    try {
+      if(!activeRoom) {return;}
+
+      await postAddRoomMember({
+        chatName: activeRoom.jid.split('@')[0],
+        members: [userName],
+      });
+      handleCloseModal();
+      await client.inviteRoomRequestStanza(userName, activeRoom.jid);
+
+      const room = await getRoomByName(activeRoom.jid);
+      const createdRoom = createRoomFromApi(room, config?.xmppSettings?.conference);
+      if (createdRoom) {
+        dispatch(
+          addRoomViaApi({
+            room: createdRoom,
+            xmpp: client,
+          })
+        );
+      }
+
+      showToast({
+        id: Date.now().toString(),
+        title: 'Success',
+        message: `${userName} has been added to the room.`,
+        type: 'success',
+      });
+    } catch (error) {
+      console.error('Failed to add user:', error);
+      showToast({
+        id: Date.now().toString(),
+        title: 'Error',
+        message: 'Failed to add user.',
+        type: 'error',
+      });
+    }
+  };
+
+  const handleUserNameChange = (text: string) => {
+    setUserName(text);
+  };
+
+  return (
+    <>
+      <ActionButton variant="filled" unstyled onPress={handleOpenModal}>
+        Add members
+      </ActionButton>
+
+      {isModalOpen && (
+        <ModalBackground>
+          <ModalContainer>
+            <CloseButton onPress={handleCloseModal}>
+              <Text style={{ fontSize: 24 }}>&times;</Text>
+            </CloseButton>
+            <ModalTitle>Add New Member</ModalTitle>
+            <GroupContainer
+              style={{
+                flexDirection: 'column',
+                position: 'relative',
+                width: '100%',
+              }}
+            >
+              <InputWithLabel
+                style={{ flex: 1 }}
+                id="userName"
+                value={userName}
+                onChange={handleUserNameChange}
+                placeholder="Enter User Id"
+              />
+            </GroupContainer>
+
+            <GroupContainer>
+              <Button
+                onPress={handleCloseModal}
+                text={'Cancel'}
+                style={{ width: '100%' }}
+                unstyled
+                variant="outlined"
+              />
+              <Button
+                onPress={handleAddUser}
+                text={'Add'}
+                style={{ width: '100%' }}
+                unstyled
+                variant="filled"
+              />
+            </GroupContainer>
+          </ModalContainer>
+        </ModalBackground>
+      )}
+    </>
+  );
+};
+
+export default AddMembersModal;