@ethora/chat-component-rn 26.4.1

package/src/components/MainComponents/SystemMessage.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { CustomSystemMessage } from '../styled/StyledComponents';
+import styled from 'styled-components/native';
+
+interface SystemMessageProps {
+  messageText?: string;
+  colors?: { primary?: string; secondary?: string };
+}
+
+export const CustomSystemMessageText = styled.Text<{
+  primary?: string;
+  secondary?: string;
+}>`
+  margin: 0;
+  color: ${(props) => props.primary || '#0052cd'};
+  border-radius: 118px;
+  padding: 5px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 600;
+  background-color: ${(props) => props.secondary || '#e7edf9'};
+  height: 24px;
+  white-space: nowrap;
+`;
+
+const SystemMessage: React.FC<SystemMessageProps> = ({
+  messageText,
+  colors,
+}) => {
+  return (
+    <CustomSystemMessage>
+      <CustomSystemMessageText {...colors}>
+        {messageText}
+      </CustomSystemMessageText>
+    </CustomSystemMessage>
+  );
+};
+
+export default SystemMessage;

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -0,0 +1,169 @@
+import React, { FC, useMemo } from 'react';
+import {
+  Animated,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  Dimensions,
+  View,
+} from 'react-native';
+import { AddNewIcon, ProfileIcon, SettingIcon } from '../../assets/icons';
+import { useDispatch } from 'react-redux';
+import { setActiveModal } from '../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+
+const { width } = Dimensions.get('window');
+
+interface HeaderRoomListMenuProps {
+  isDrawerOpen: boolean;
+  drawerAnimation: Animated.Value;
+  overlayAnimation: Animated.Value;
+  closeDrawer: () => void;
+}
+
+export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
+  isDrawerOpen,
+  drawerAnimation,
+  overlayAnimation,
+  closeDrawer,
+}) => {
+  const dispatch = useDispatch();
+
+  const drawerTranslateX = drawerAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [width, 0],
+  });
+
+  const menuOptions = useMemo(
+    () => [
+      {
+        label: 'New Chat',
+        icon: <AddNewIcon color="#8C8C8C" />,
+        onClick: () => {
+          dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
+          console.log('New chat clicked');
+        },
+        styles: { color: '#141414' },
+      },
+      {
+        label: 'Profile',
+        icon: <ProfileIcon color="#8C8C8C" />,
+        onClick: () => {
+          dispatch(setActiveModal(MODAL_TYPES.PROFILE));
+          console.log('Profile clicked');
+        },
+      },
+      {
+        label: 'Settings',
+        icon: <SettingIcon color="#8C8C8C" />,
+        onClick: () => {
+          dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
+          console.log('Settings clicked');
+        },
+      },
+      // {
+      //   label: "Logout",
+      //   onClick: handleLogout,
+      // },
+    ],
+    []
+  );
+
+  return (
+    <>
+      <Animated.View
+        style={[
+          styles.drawer,
+          { transform: [{ translateX: drawerTranslateX }] },
+        ]}
+      >
+        {menuOptions.map((option, index) => (
+          <View key={index} style={styles.menuItemWrapper}>
+            <TouchableOpacity
+              style={styles.menuItem}
+              onPress={() => {
+                option.onClick();
+                closeDrawer();
+              }}
+            >
+              <View
+                style={{
+                  width: 22,
+                  alignItems: 'center',
+                }}
+              >
+                {option.icon}
+              </View>
+              <Text style={[styles.label, option?.styles]}>{option.label}</Text>
+            </TouchableOpacity>
+            {index < menuOptions.length - 1 && <View style={styles.divider} />}
+          </View>
+        ))}
+      </Animated.View>
+      {isDrawerOpen && (
+        <TouchableWithoutFeedback onPress={closeDrawer}>
+          <Animated.View
+            style={[styles.overlay, { opacity: overlayAnimation }]}
+          />
+        </TouchableWithoutFeedback>
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  menuItemWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  menuItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  label: {
+    fontSize: 16,
+    marginLeft: 10,
+  },
+  divider: {
+    height: 1,
+    width: '100%',
+    backgroundColor: '#0052cd0d',
+  },
+  drawer: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    right: 0,
+    width: width * 0.7,
+    backgroundColor: '#fff',
+    padding: 20,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowOffset: { width: -2, height: 0 },
+    shadowRadius: 5,
+    elevation: 5,
+    zIndex: 999,
+  },
+  drawerTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  drawerItem: {
+    fontSize: 18,
+    marginBottom: 10,
+  },
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});

package/src/components/MenuRoom/MenuRoom.tsx

@@ -0,0 +1,46 @@
+import { FC, useMemo } from 'react';
+import DropdownMenu from '../DropdownMenu/DropdownMenu';
+import Button from '../styled/Button';
+import { LeaveIcon, MoreIcon, ReportIcon } from '../../assets/icons';
+
+interface RoomMenuProps {
+  handleLeaveClick: () => void;
+}
+
+export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
+  const menuOptions = useMemo(
+    () => [
+      {
+        label: 'Report',
+        icon: <ReportIcon />,
+        onClick: () => {
+          console.log('Report clicked');
+        },
+        styles: { color: 'red' },
+      },
+      {
+        label: 'Leave',
+        icon: <LeaveIcon />,
+        onClick: () => {
+          handleLeaveClick();
+        },
+        styles: { color: 'red' },
+      },
+    ],
+    [handleLeaveClick]
+  );
+
+  return (
+    <DropdownMenu
+      position="right"
+      options={menuOptions}
+      openButton={
+        <Button
+          style={{ padding: 8, maxHeight: 40 }}
+          EndIcon={<MoreIcon />}
+          unstyled
+        />
+      }
+    />
+  );
+};

package/src/components/MessageBubble/Avatar.tsx

@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components/native';
+import { nameToColor } from '../../helpers/hashcolor';
+
+interface AvatarProps {
+  username?: string | null;
+  firstName?: string;
+  lastName?: string;
+  style?: object;
+}
+
+const AvatarCircle = styled.View<{ bgColor?: string }>`
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: ${({ bgColor }) => bgColor};
+  align-items: center;
+  justify-content: center;
+  shadow-color: rgba(0, 0, 0, 0.2);
+  shadow-offset: 0px 4px;
+  shadow-opacity: 0.2;
+  shadow-radius: 4px;
+  elevation: 4;
+`;
+
+const AvatarText = styled.Text`
+  font-size: 16px;
+  font-weight: bold;
+  // Pastel backgrounds from nameToColor() are all light (#E2F4FB,
+  // #EEE6F9, #F5F2BC, ...). White text on light = invisible — web
+  // uses default-black text on the same palette. Match it.
+  color: #141414;
+`;
+
+export const Avatar: React.FC<AvatarProps> = ({
+  username,
+  firstName,
+  lastName,
+  style,
+}) => {
+  const backgroundColor = useMemo(() => {
+      if (!username && !firstName) {
+        return { backgroundColor: 'transparent' };
+      }
+      return nameToColor(username ? username : firstName || '');
+    }, [username, firstName]);
+
+  const getInitials = () => {
+    const isAlphabetic = (char: string) => /^[a-zA-Zа-яА-ЯёЁ]$/.test(char);
+
+    if (firstName && lastName) {
+      const firstInitial = isAlphabetic(firstName[0])
+        ? firstName[0].toUpperCase()
+        : '';
+      const lastInitial = isAlphabetic(lastName[0])
+        ? lastName[0].toUpperCase()
+        : '';
+      return `${firstInitial}${lastInitial}`;
+    } else if (username) {
+      const names = username.split(' ');
+      if (names.length > 1) {
+        const firstInitial = isAlphabetic(names[0][0])
+          ? names[0][0].toUpperCase()
+          : '';
+        const secondInitial = isAlphabetic(names[1][0])
+          ? names[1][0].toUpperCase()
+          : '';
+        return `${firstInitial}${secondInitial}`;
+      } else {
+        const singleInitial = isAlphabetic(names[0][0])
+          ? names[0][0].toUpperCase()
+          : '';
+        return `${singleInitial}`;
+      }
+    }
+    return '??';
+  };
+
+  return (
+    <AvatarCircle style={style} bgColor={backgroundColor?.backgroundColor}>
+      <AvatarText>{getInitials()}</AvatarText>
+    </AvatarCircle>
+  );
+};

package/src/components/MessageBubble/BottomReplyContainer.tsx

@@ -0,0 +1,117 @@
+import { FC, useMemo } from 'react';
+import { IReply, IUser } from '../../types/types';
+import { Avatar } from './Avatar';
+import { styled } from 'styled-components/native';
+import { Platform, Text, View } from 'react-native';
+
+interface BottomReplyContainerProps {
+  isUser: boolean;
+  reply: IReply[];
+  onClick: () => void;
+}
+
+const ReplyContainer = styled.TouchableOpacity<{ isUser: boolean }>`
+  background-color: #ffffff;
+  left: ${(props) => (!props.isUser ? '10px' : 'auto')};
+  right: ${(props) => (props.isUser ? '10px' : 'auto')};
+  padding: 4px 8px 4px 16px;
+  border-radius: 20px;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  margin: 8px 8px 0;
+
+  ${Platform.select({
+    ios: `
+      shadow-color: rgba(185, 198, 199, 1);
+      shadow-offset: 0px 0px;
+      shadow-opacity: 1;
+      shadow-radius: 8px;
+    `,
+    android: `
+      elevation: 8;
+    `,
+  })}
+`;
+
+const AvatarCircle = styled.View`
+  height: 24px;
+  width: 24px;
+  margin-left: -10px;
+`;
+
+const CircleCurrent = styled.View`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #f0f0f0;
+  border-radius: 50%;
+  background-color: #ffffff;
+`;
+
+const CircleCurrentText = styled.Text`
+  color: #8c8c8c;
+  font-size: 10px;
+  font-weight: 100;
+`;
+
+const CounterRepliesText = styled.Text`
+  font-size: 12px;
+  color: #0052cd;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const BottomReplyContainer: FC<BottomReplyContainerProps> = ({
+  isUser,
+  reply,
+  onClick,
+}) => {
+  const uniqueUsers: IUser[] = useMemo(() => {
+    return Object.values(
+      reply.reduce<Record<string, IUser>>((acc, item) => {
+        if (!acc[item.user.id]) {
+          acc[item.user.id] = {
+            ...item.user,
+          };
+        }
+        return acc;
+      }, {})
+    );
+  }, [reply]);
+
+  return (
+    <ReplyContainer onPress={onClick} isUser={isUser}>
+      <View style={{ flexDirection: 'row' }}>
+        {uniqueUsers.slice(0, 3).map((item) => (
+          <AvatarCircle key={item.id}>
+            <Avatar
+              username={item.name}
+              style={{
+                height: '100%',
+                width: '100%',
+                borderWidth: 1,
+                borderColor: '#F0F0F0',
+                borderStyle: 'solid',
+                fontSize: 10,
+              }}
+            />
+          </AvatarCircle>
+        ))}
+        {uniqueUsers.length > 3 && (
+          <AvatarCircle>
+            <CircleCurrent>
+              <CircleCurrentText>+{uniqueUsers.length - 3}</CircleCurrentText>
+            </CircleCurrent>
+          </AvatarCircle>
+        )}
+      </View>
+      <CounterRepliesText>
+        {reply.length} {reply.length > 1 ? 'replies' : 'reply'}
+      </CounterRepliesText>
+    </ReplyContainer>
+  );
+};

package/src/components/MessageBubble/CustomDivider.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components/native';
+export const CustomDivider = styled.View<{
+  configColor?: string;
+}>`
+  padding: 1px;
+  height: 1px;
+  width: 100%;
+  background-color: ${(props) =>
+    props.configColor ? props.configColor : '#0052CD'};
+`;

package/src/components/MessageBubble/DeletedMessage.tsx

@@ -0,0 +1,36 @@
+import { Text } from 'react-native';
+import { DeleteIcon } from '../../assets/icons';
+import { styled } from 'styled-components/native';
+
+const ReplyContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  padding-top: 5px;
+
+  @media (max-width: 399px) {
+    font-size: 14px;
+  }
+`;
+
+const IconContainer = styled.View`
+  padding: 5px;
+  background-color: #cccccc;
+  border-radius: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const DeletedMessage = () => {
+  return (
+    <ReplyContainer>
+      <IconContainer>
+        <DeleteIcon width={18} height={18} fill="#8C8C8C" />
+      </IconContainer>
+      <Text style={{ margin: 0, color: '#8C8C8C' }}>
+        This message was deleted.
+      </Text>
+    </ReplyContainer>
+  );
+};