@ethora/chat-component-rn 26.4.1

package/src/components/UsersList/UsersList.tsx

@@ -0,0 +1,112 @@
+import React, {
+  Dispatch,
+  SetStateAction,
+  useState,
+  useMemo,
+  useEffect,
+} from 'react';
+import { ModalTitle, LabelData } from '../Modals/styledModalComponents';
+import {
+  ScrollableContainer,
+  UserItem,
+  Checkbox,
+  Label,
+} from './StyledComponents';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { RoomMember } from '../../types/types';
+import { debounce } from '../../helpers/debounce';
+import { StyledInput } from '../styled/StyledInputComponents/StyledInputComponents';
+import { useRoomState } from '../../hooks/useRoomState';
+import { Text, View } from 'react-native';
+
+interface UsersListProps {
+  selectedUsers: RoomMember[];
+  setSelectedUsers: Dispatch<SetStateAction<RoomMember[]>>;
+  headerElement?: boolean;
+  style?: any;
+  filter?: RoomMember[];
+}
+
+const UsersList: React.FC<UsersListProps> = ({
+  style,
+  selectedUsers,
+  setSelectedUsers,
+  headerElement,
+  filter,
+}) => {
+  const { usersSet } = useRoomState();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filteredUsers, setFilteredUsers] = useState<RoomMember[]>([]);
+
+  const handleUserSelect = (user: RoomMember) => {
+    setSelectedUsers((prev) => {
+      const isSelected = prev.some((u) => u._id === user._id);
+      return isSelected
+        ? prev.filter((u) => u._id !== user._id)
+        : [...prev, user];
+    });
+  };
+
+  const debouncedFilter = useMemo(
+    () =>
+      debounce((term: string) => {
+        const lower = term.toLowerCase();
+        const users = (Object.values(usersSet) as RoomMember[]).filter(
+          (user: RoomMember) =>
+            `${user.firstName} ${user.lastName}`.toLowerCase().includes(lower)
+        );
+        setFilteredUsers(users);
+      }, 100),
+    [usersSet]
+  );
+
+  useEffect(() => {
+    debouncedFilter(searchTerm);
+  }, [searchTerm, debouncedFilter]);
+
+  useEffect(() => {
+    setFilteredUsers(Object.values(usersSet) as RoomMember[]);
+  }, [usersSet]);
+
+  return (
+    <View style={{ maxHeight: '100px', ...style }}>
+      {headerElement ? (
+        <ModalTitle>Select Users (max 20)</ModalTitle>
+      ) : (
+        <Text style={{ fontSize: 14, fontWeight: '600' }}>
+          Select Users (max 20)
+        </Text>
+      )}
+
+      <StyledInput
+        placeholder="Search users..."
+        value={searchTerm}
+        onChangeText={setSearchTerm}
+        style={{ width: '100%' }}
+      />
+
+      <ScrollableContainer style={{ ...style }}>
+        {filteredUsers.map((user) => (
+          <UserItem
+            key={user._id}
+            onPress={() => handleUserSelect(user)}
+            style={{ cursor: 'pointer' }}
+          >
+            <Checkbox
+              value={selectedUsers.some((u) => u._id === user._id)}
+              onValueChange={() => handleUserSelect(user)}
+              disabled={selectedUsers.length === 20}
+            />
+            <View>
+              <Label>{`${user.firstName} ${user.lastName}`}</Label>
+              {/* <LabelData>{user.xmppUsername}</LabelData> */}
+            </View>
+          </UserItem>
+        ))}
+      </ScrollableContainer>
+    </View>
+  );
+};
+
+export default UsersList;

package/src/components/styled/ActionButton.tsx

@@ -0,0 +1,40 @@
+import React, { FC } from 'react';
+import { IconButton } from './StyledComponents';
+import { DownloadIcon } from '../../assets/icons';
+import { RootState } from '../../roomStore';
+import { useSelector } from 'react-redux';
+
+interface ActionButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode;
+}
+
+const ActionButton: FC<ActionButtonProps> = ({ icon, ...props }) => {
+  const config = useSelector(
+    (state: RootState) => state.chatSettingStore.config
+  );
+
+  return (
+    <IconButton
+      style={{
+        height: 40,
+        width: 40,
+        borderRadius: 8,
+        backgroundColor: '#fff',
+        border: `1px solid ${config?.colors?.primary || '#0052CD'}`,
+        ...props.style,
+      }}
+      {...props}
+    >
+      {icon ? (
+        React.cloneElement(icon as React.ReactElement, {
+          style: { width: 40, height: 40 },
+        })
+      ) : (
+        <DownloadIcon style={{ width: 40, height: 40 }} />
+      )}
+    </IconButton>
+  );
+};
+
+export { ActionButton };

package/src/components/styled/AudioMessage.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import RNFetchBlob from 'rn-fetch-blob';
+
+const AudioMessage = ({ src }: { src: string }) => {
+  const [amplitudes, setAmplitudes] = useState<number[]>([]);
+
+  const fetchAndConvertAudio = async (url: string) => {
+    // try {
+    //   const res = await RNFetchBlob.config({ fileCache: true }).fetch(
+    //     "GET",
+    //     url
+    //   );
+
+    //   console.log("res---!!!", res);
+    //   const audioPath = res.path();
+    //   console.log("Audio file downloaded to:", audioPath);
+
+    //   const pcmPath = `${RNFetchBlob.fs.dirs.CacheDir}/audio.pcm`;
+
+    //   await FFmpegKit.executeAsync(
+    //     `-i ${audioPath} -f s16le -ar 44100 -ac 1 ${pcmPath}`,
+    //     async (session) => {
+    //       const returnCode = await session.getReturnCode();
+    //       if (ReturnCode.isSuccess(returnCode)) {
+    //         const pcmData = await RNFetchBlob.fs.readFile(pcmPath, "ascii");
+    //         const amplitudes = pcmData
+    //           .split("")
+    //           .map((char) => char.charCodeAt(0));
+    //         setAmplitudes(amplitudes.slice(0, 100)); // Ограничиваем количество баров
+    //       } else {
+    //         console.error("FFmpeg execution failed.");
+    //       }
+    //     }
+    //   );
+    // } catch (error) {
+    //   console.error("Error processing audio file:", error);
+    // }
+  };
+
+  useEffect(() => {
+    fetchAndConvertAudio(src);
+  }, [src]);
+
+  return (
+    <ScrollView horizontal contentContainerStyle={styles.waveformContainer}>
+      {amplitudes.map((amplitude, index) => (
+        <View
+          key={index}
+          style={[
+            styles.waveBar,
+            {
+              height: Math.max(amplitude, 1) * 2,
+            },
+          ]}
+        />
+      ))}
+    </ScrollView>
+  );
+};
+
+export default AudioMessage;
+
+const styles = StyleSheet.create({
+  waveformContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 5,
+  },
+  waveBar: {
+    width: 4,
+    backgroundColor: '#007AFF',
+    marginHorizontal: 1,
+    borderRadius: 2,
+  },
+});

package/src/components/styled/Button.tsx

@@ -0,0 +1,107 @@
+import React, { ReactElement, ReactNode } from 'react';
+import styled from 'styled-components/native';
+import {
+  TouchableOpacity,
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  PixelRatio,
+} from 'react-native';
+import Loader from './Loader';
+import { getTintedColor } from '../../helpers/getTintedColor';
+
+const CustomButton = styled(TouchableOpacity)<{
+  disabled: boolean;
+  backgroundColor?: string;
+  unstyled?: boolean;
+  variant?: 'default' | 'filled' | 'outlined';
+}>`
+  border-width: ${({ variant }) => (variant === 'outlined' ? 1 : 0)}px;
+  border-color: ${({ backgroundColor }) => backgroundColor || '#0052CD'};
+  border-radius: 20px;
+  background-color: ${({ variant, backgroundColor }) =>
+    variant === 'filled' ? backgroundColor || '#0052CD' : 'transparent'};
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  width: 40px;
+  margin: 0 10px;
+  padding-horizontal: 8px;
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+`;
+
+const ButtonText = styled.Text<{
+  variant?: 'default' | 'filled' | 'outlined';
+  backgroundColor?: string;
+}>`
+  color: ${({ variant, backgroundColor }) =>
+    variant === 'filled' ? '#FFFFFF' : backgroundColor || '#0052CD'};
+  font-size: ${PixelRatio.getFontScale() * 14}px;
+  font-weight: bold;
+`;
+
+interface ButtonProps {
+  text?: string | ReactElement;
+  EndIcon?: ReactNode;
+  StartIcon?: ReactNode;
+  loading?: boolean;
+  disabled?: boolean;
+  unstyled?: boolean;
+  variant?: 'default' | 'filled' | 'outlined';
+  backgroundColor?: string;
+  color?: string;
+  style?: ViewStyle;
+  onPress?: () => void;
+  children?: React.ReactNode;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  text,
+  EndIcon,
+  loading = false,
+  disabled = false,
+  unstyled = false,
+  variant = 'default',
+  backgroundColor,
+  onPress,
+  StartIcon,
+  style: containerStyle,
+  color,
+  children,
+}) => {
+  return (
+    <CustomButton
+      style={[containerStyle]}
+      disabled={disabled || loading}
+      onPress={onPress}
+      variant={variant}
+      backgroundColor={backgroundColor}
+    >
+      {loading && <Loader size={24} />}
+      {!loading && StartIcon && <View style={styles.icon}>{StartIcon}</View>}
+      {!loading &&
+        (children || (
+          <ButtonText
+            style={[{ color: color || 'black' }]}
+            variant={variant}
+            backgroundColor={backgroundColor}
+          >
+            {text}
+          </ButtonText>
+        ))}
+      {!loading && EndIcon && <View style={styles.icon}>{EndIcon}</View>}
+    </CustomButton>
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    marginHorizontal: 4,
+    // maxWidth: '20%',
+  },
+});
+
+export default Button;

package/src/components/styled/ChatWrapperBox.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components/native';
+
+export const ChatWrapperBox = styled.View`
+  flex: 1;
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`;

package/src/components/styled/DateLabel.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import { Line } from './StyledComponents';
+import { Text } from 'react-native';
+
+interface DateLabelProps {
+  date: Date;
+  colors?: { primary?: string; secondary?: string };
+}
+
+const Container = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: transparent;
+  gap: 16px;
+  margin: 16px 0;
+`;
+
+export const StyledDateLabel = styled.View<{
+  secondary?: string;
+}>`
+  margin: 0;
+  border-radius: 118px;
+  padding: 5px 8px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: ${(props) => '#e7edf9'};
+`;
+
+export const StyledDateText = styled.Text<{ primary?: string }>`
+  color: ${(props) => '#0052cd'};
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 14px;
+  white-space: nowrap;
+`;
+
+const DateLabel: React.FC<DateLabelProps> = ({ date, colors }) => {
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(today.getDate() - 1);
+
+  const sameDay = (d1: Date, d2: Date) =>
+    d1.getFullYear() === d2.getFullYear() &&
+    d1.getMonth() === d2.getMonth() &&
+    d1.getDate() === d2.getDate();
+
+  const sameYear = (d1: Date, d2: Date) =>
+    d1.getFullYear() === d2.getFullYear();
+
+  let label: string;
+  if (sameDay(date, today)) {
+    label = 'Today';
+  } else if (sameDay(date, yesterday)) {
+    label = 'Yesterday';
+  } else {
+    const options: Intl.DateTimeFormatOptions = sameYear(date, today)
+      ? { month: 'long', day: 'numeric' }
+      : { month: 'long', day: 'numeric', year: 'numeric' };
+    label = date.toLocaleDateString('en-US', options);
+  }
+
+  return (
+    <Container>
+      <Line />
+      <StyledDateLabel secondary={colors?.secondary}>
+        <StyledDateText primary={colors?.primary}>{label}</StyledDateText>
+      </StyledDateLabel>
+      <Line />
+    </Container>
+  );
+};
+
+export default DateLabel;

package/src/components/styled/Loader.tsx

@@ -0,0 +1,65 @@
+/** @format */
+
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, View, StyleSheet } from 'react-native';
+
+interface LoaderProps {
+  size?: number;
+  color?: string;
+}
+
+export default function Loader({ size = 32, color = '#3498db' }: LoaderProps) {
+  const spinValue = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const spinAnimation = Animated.loop(
+      Animated.timing(spinValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+
+    spinAnimation.start();
+
+    return () => {
+      spinAnimation.stop();
+    };
+  }, [spinValue]);
+
+  const spin = spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const borderWidth = size ? size / 8 : 4;
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={[
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            borderWidth: borderWidth,
+            borderTopColor: color,
+            borderRightColor: 'transparent',
+            borderBottomColor: 'transparent',
+            borderLeftColor: 'transparent',
+            transform: [{ rotate: spin }],
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 8,
+  },
+});

package/src/components/styled/MediaFilePreview.tsx

@@ -0,0 +1,42 @@
+import { View } from 'react-native';
+import {
+  MediaContainer,
+  MediaImage,
+} from './StyledInputComponents/StyledInputComponents';
+import { FileIcon } from '../../assets/icons';
+import { RemoveButton, RemoveButtonText } from './StyledComponents';
+import { FC } from 'react';
+import { MediaFile } from '../../types/types';
+
+interface MediaFilePreviewProps {
+  filePreviews: MediaFile[];
+  handleRemoveImage: (index: number) => void;
+}
+
+export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
+  filePreviews,
+  handleRemoveImage,
+}) => {
+  return (
+    <MediaContainer>
+      {filePreviews.map((file, index) => {
+        const isImageOrVideo =
+          file.type?.startsWith('image') || file.type?.startsWith('video');
+        return (
+          <View key={`${file.name}_${index}`}>
+            {isImageOrVideo ? (
+              <MediaImage source={{ uri: file.uri }} />
+            ) : (
+              <View style={{ width: 70, height: 70, borderRadius: 8 }}>
+                <FileIcon width={70} height={70} />
+              </View>
+            )}
+            <RemoveButton onPress={() => handleRemoveImage(index)}>
+              <RemoveButtonText>&times;</RemoveButtonText>
+            </RemoveButton>
+          </View>
+        );
+      })}
+    </MediaContainer>
+  );
+};

package/src/components/styled/MediaModal.tsx

@@ -0,0 +1,54 @@
+/** @format */
+
+import React from 'react';
+import { View, Modal, StyleSheet, ViewStyle, Text } from 'react-native';
+
+interface OverlayProps {
+  children?: React.ReactNode;
+  visible?: boolean;
+  style?: ViewStyle;
+}
+
+export const Overlay = ({ children, visible, style }: OverlayProps) => (
+  <Modal
+    transparent={true}
+    animationType="fade"
+    visible={visible}
+    onRequestClose={() => {
+      // Implement logic to close the modal if needed
+    }}
+  >
+    <View style={[styles.modal, style]}>{children}</View>;
+  </Modal>
+);
+
+export const StyledModal = ({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}) => {
+  return <Text style={[style]}>{children}</Text>;
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999, // Use zIndex for stacking, although this won't work in all cases, Android uses elevation.
+    elevation: 999, // Added to give the overlay layer a higher stacking context on Android.
+  },
+  modal: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'white',
+    padding: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/styled/MessageImage.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { Container } from './StyledInputComponents/MediaComponents';
+import { useDispatch } from 'react-redux';
+import {
+  setActiveFile,
+  setActiveModal,
+} from '../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { ActivityIndicator, Image, TouchableOpacity } from 'react-native';
+interface CustomMessageImageProps {
+  fileURL: string;
+  fileName: string;
+  mimetype: string;
+}
+
+const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
+  fileURL,
+  fileName,
+  mimetype,
+}) => {
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  const dispatch = useDispatch();
+
+  const handleOpen = () => {
+    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
+    dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
+  };
+
+  return (
+    <Container>
+      <TouchableOpacity onPress={handleOpen}>
+        {loading && <ActivityIndicator size="small" color="#0052CD" />}
+        <Image
+          src={
+            fileURL ||
+            'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg'
+          }
+          style={{
+            borderRadius: 16,
+            width: 150,
+            height: 200,
+          }}
+          onError={() => setError(true)}
+          onLoadEnd={() => setLoading(false)}
+          resizeMode="cover"
+        />
+      </TouchableOpacity>
+    </Container>
+  );
+};
+
+export default CustomMessageImage;

package/src/components/styled/NewMessageLabel.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import { Line } from './StyledComponents';
+
+const Container = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: transparent;
+  gap: 16px;
+`;
+
+export const StyledLabel = styled.View`
+  margin: 0;
+  border-radius: 118px;
+  padding: 5px 8px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: #3f3f3f;
+  height: 24px;
+  white-space: nowrap;
+  margin: 10px 0px;
+`;
+
+export const StyledLabelText = styled.Text<{ color?: string }>`
+  color: ${(props) => (props?.color ? props?.color : '#0052CD')};
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+`;
+
+interface NewMessageLabelProps {
+  color?: string;
+}
+
+const NewMessageLabel: React.FC<NewMessageLabelProps> = ({ color }) => {
+  return (
+    <Container>
+      <Line />
+      <StyledLabel>
+        <StyledLabelText color={color}>New messages</StyledLabelText>
+      </StyledLabel>
+      <Line />
+    </Container>
+  );
+};
+
+export default NewMessageLabel;