@ethora/chat-component-rn 26.5.4 → 26.5.7

package/src/components/InputComponents/AudioRecorder.tsx

@@ -1,100 +0,0 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import {
-  RecordContainer,
-  Timer,
-} from '../styled/StyledInputComponents/StyledInputComponents';
-import { RecordIcon, RemoveIcon, SendIcon } from '../../assets/icons';
-import Button from '../styled/Button';
-import RecordingIndicator from './RecordingIndicator';
-import { Platform, View } from 'react-native';
-import AudioRecorderPlayer from 'react-native-audio-recorder-player';
-import RNFS from 'react-native-fs';
-
-interface AudioRecorderProps {
-  setIsRecording: (state: boolean) => void;
-  isRecording: boolean;
-  handleSendClick: (audioBlob?: any) => void;
-}
-
-const AudioRecorder: React.FC<AudioRecorderProps> = ({
-  setIsRecording,
-  isRecording,
-  handleSendClick,
-}) => {
-  const audioRecorderPlayer = useRef(new AudioRecorderPlayer()).current;
-  const [timer, setTimer] = useState('00:00');
-  const [audioPath, setAudioPath] = useState<string | null>(null);
-
-  useEffect(() => {
-    return () => {
-      audioRecorderPlayer.stopRecorder();
-      audioRecorderPlayer.removeRecordBackListener();
-    };
-  }, [audioRecorderPlayer]);
-
-  const startRecording = async () => {
-    try {
-      const path = Platform.select({
-        ios: `${RNFS.DocumentDirectoryPath}/recording.m4a`,
-        android: `${RNFS.CachesDirectoryPath}/recording.mp4`,
-      });
-      const uri = await audioRecorderPlayer.startRecorder(path);
-      setAudioPath(uri);
-
-      audioRecorderPlayer.addRecordBackListener((e: any) => {
-        const minutes = Math.floor(e.currentPosition / 60000);
-        const seconds = Math.floor((e.currentPosition % 60000) / 1000);
-        setTimer(
-          `${minutes.toString().padStart(2, '0')}:${seconds
-            .toString()
-            .padStart(2, '0')}`
-        );
-      });
-
-      setIsRecording(true);
-    } catch (error) {
-      console.error('Error starting recording:', error);
-    }
-  };
-
-  const stopRecording = async () => {
-    try {
-      await audioRecorderPlayer.stopRecorder();
-      audioRecorderPlayer.removeRecordBackListener();
-      setIsRecording(false);
-    } catch (error) {
-      console.error('Error stopping recording:', error);
-    }
-  };
-
-  const sendAudio = () => {
-    if (audioPath) {
-      console.log('Audio sent:', audioPath);
-      handleSendClick(audioPath);
-      resetState();
-    }
-  };
-
-  const resetState = () => {
-    setAudioPath(null);
-    setTimer('00:00');
-    setIsRecording(false);
-  };
-  return isRecording ? (
-    <RecordContainer>
-      <View style={{ display: 'flex', alignItems: 'center' }}>
-        {isRecording && <RecordingIndicator />}
-        <Timer>{timer}</Timer>
-      </View>
-
-      <View style={{ display: 'flex', gap: 8 }}>
-        <Button onPress={stopRecording} EndIcon={<RemoveIcon />} unstyled />
-        <Button onPress={sendAudio} EndIcon={<SendIcon />} unstyled />
-      </View>
-    </RecordContainer>
-  ) : (
-    <Button onPress={startRecording} EndIcon={<RecordIcon />} />
-  );
-};
-
-export default AudioRecorder;

package/src/components/InputComponents/MediaInput.tsx

@@ -1,113 +0,0 @@
-import React, { useCallback } from 'react';
-import { View, Image, TouchableOpacity } from 'react-native';
-import { Video, ResizeMode } from 'expo-av';
-import * as ImagePicker from 'expo-image-picker';
-import { AttachIcon, RemoveIcon } from '../../assets/icons';
-import Button from '../styled/Button';
-import { IConfig } from '../../types/types';
-
-interface FilePreview {
-  uri: string;
-  name: string;
-  type: string;
-}
-
-interface MediaInputProps {
-  filePreviews: FilePreview[];
-  setFilePreviews: (
-    update: FilePreview[] | ((prev: FilePreview[]) => FilePreview[])
-  ) => void;
-  handleSendClick: () => void;
-  config?: IConfig;
-}
-
-const MediaInput: React.FC<MediaInputProps> = ({
-  filePreviews,
-  setFilePreviews,
-  handleSendClick,
-  config,
-}) => {
-  const handleAttachClick = useCallback(async () => {
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ['images', 'videos'],
-      allowsMultipleSelection: true,
-      selectionLimit: 5,
-      quality: 0.8,
-    });
-
-    if (!result.canceled && result.assets) {
-      const newFiles = result.assets.map((asset) => ({
-        uri: asset.uri,
-        name: asset.fileName || asset.uri.split('/').pop() || `file_${Date.now()}`,
-        type: asset.mimeType || 'application/octet-stream',
-      }));
-      setFilePreviews((prevFiles: FilePreview[]) =>
-        [...prevFiles, ...newFiles].slice(0, 5)
-      );
-    }
-  }, [setFilePreviews]);
-
-  const handleRemoveFile = useCallback(
-    (file: FilePreview) => {
-      setFilePreviews((prevFiles: FilePreview[]) =>
-        prevFiles.filter((f) => f.uri !== file.uri)
-      );
-    },
-    [setFilePreviews]
-  );
-
-  const renderFilePreview = useCallback((file: FilePreview) => {
-    if (file.type?.startsWith('image/')) {
-      return (
-        <Image source={{ uri: file.uri }} style={{ width: 50, height: 50 }} />
-      );
-    } else if (file.type?.startsWith('video/')) {
-      return (
-        <Video
-          source={{ uri: file.uri }}
-          style={{ width: 50, height: 50 }}
-          useNativeControls
-          resizeMode={ResizeMode.COVER}
-        />
-      );
-    }
-    return null;
-  }, []);
-
-  return (
-    <View>
-      <Button
-        onPress={handleAttachClick}
-        disabled={config?.disableMedia}
-        EndIcon={<AttachIcon />}
-      />
-      {filePreviews.length > 0 && (
-        <View>
-          {filePreviews.map((file) => (
-            <View key={file.uri} style={{ position: 'relative', margin: 8 }}>
-              {renderFilePreview(file)}
-              <TouchableOpacity
-                onPress={() => handleRemoveFile(file)}
-                style={{
-                  position: 'absolute',
-                  top: 4,
-                  right: 4,
-                  width: 20,
-                  height: 20,
-                  backgroundColor: 'rgba(0, 0, 0, 0.5)',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderRadius: 10,
-                }}
-              >
-                <RemoveIcon />
-              </TouchableOpacity>
-            </View>
-          ))}
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default MediaInput;

package/src/components/InputComponents/RecordingIndicator.tsx

@@ -1,77 +0,0 @@
-import React, {useEffect, useRef} from 'react';
-import {View, StyleSheet, Animated} from 'react-native';
-
-const RecordingIndicator = () => {
-  const scaleAnim = useRef(new Animated.Value(1)).current; // For scaling the circle
-  const opacityAnim = useRef(new Animated.Value(1)).current; // For pulsating effect
-
-  useEffect(() => {
-    Animated.loop(
-      Animated.sequence([
-        Animated.parallel([
-          Animated.timing(scaleAnim, {
-            toValue: 1.3,
-            duration: 750,
-            useNativeDriver: true,
-          }),
-          Animated.timing(opacityAnim, {
-            toValue: 0.6,
-            duration: 750,
-            useNativeDriver: true,
-          }),
-        ]),
-        Animated.parallel([
-          Animated.timing(scaleAnim, {
-            toValue: 1,
-            duration: 750,
-            useNativeDriver: true,
-          }),
-          Animated.timing(opacityAnim, {
-            toValue: 1,
-            duration: 750,
-            useNativeDriver: true,
-          }),
-        ]),
-      ]),
-    ).start();
-  }, [scaleAnim, opacityAnim]);
-
-  return (
-    <View style={styles.wrapper}>
-      <Animated.View
-        style={[
-          styles.outerCircle,
-          {
-            transform: [{scale: scaleAnim}],
-            opacity: opacityAnim,
-          },
-        ]}
-      />
-      <View style={styles.innerCircle} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 10,
-  },
-  outerCircle: {
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-    backgroundColor: 'rgba(255, 0, 0, 0.6)',
-    position: 'absolute',
-  },
-  innerCircle: {
-    width: 16,
-    height: 16,
-    borderRadius: 8,
-    backgroundColor: 'red',
-    position: 'relative',
-  },
-});
-
-export default RecordingIndicator;

package/src/components/Modals/ModalSelectMedia/ModalSelectMedia.tsx

@@ -1,283 +0,0 @@
-import React, { FC, useMemo } from 'react';
-import { Alert, Linking, Platform } from 'react-native';
-import Button from '../../styled/Button';
-import DropdownMenu from '../../DropdownMenu/DropdownMenu';
-import DocumentPicker from 'react-native-document-picker';
-import ImagePicker from 'react-native-image-crop-picker';
-import {
-  check,
-  request,
-  PERMISSIONS,
-  RESULTS,
-  Permission,
-} from 'react-native-permissions';
-import {
-  AttachIcon,
-  CameraIcon,
-  DocumentIcon,
-  MediaIcon,
-} from '../../../assets/icons';
-import { MediaFile } from '../../../types/types';
-
-interface ModalSelectMediaProps {
-  onFileSelect: (files: MediaFile[]) => void;
-  config?: any;
-}
-
-interface Permissions {
-  UNAVAILABLE: 'unavailable';
-  BLOCKED: 'blocked';
-  DENIED: 'denied';
-  GRANTED: 'granted';
-  LIMITED: 'limited';
-}
-
-export const ModalSelectMedia: FC<ModalSelectMediaProps> = ({
-  onFileSelect,
-  config,
-}) => {
-  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);
-      if (requestStatus === RESULTS.GRANTED) {
-        return requestStatus;
-      } else if (requestStatus === RESULTS.DENIED) {
-        return requestStatus;
-      }
-    } else if (status === RESULTS.UNAVAILABLE) {
-      return status;
-    } else {
-      return status;
-    }
-  };
-
-  const handleCameraSelection = async () => {
-    const permission =
-      Platform.OS === 'ios'
-        ? PERMISSIONS.IOS.CAMERA
-        : PERMISSIONS.ANDROID.CAMERA;
-    const permissionStatus = await checkPermission(permission);
-
-    if (permissionStatus !== RESULTS.GRANTED) {
-      Alert.alert(
-        'Permission required',
-        'Camera permission is needed to take photos.',
-        [
-          {
-            text: 'Cancel',
-            onPress: () => console.log('Camera permission cancelled'),
-            style: 'cancel',
-          },
-          {
-            text: 'Open Settings',
-            onPress: () => Linking.openSettings(),
-          },
-        ]
-      );
-      return;
-    }
-
-    try {
-      const image = await ImagePicker.openCamera({
-        width: 300,
-        height: 400,
-        cropping: true,
-      });
-
-      const originalName = image.path.split('/').pop();
-      const file = {
-        uri: image.path,
-        type: image.mime,
-        name: originalName || `camera_${Date.now()}.jpg`,
-      };
-      onFileSelect([file]);
-    } catch (error: any) {
-      const errorMessage = error?.message || String(error);
-      const isSimulatorError =
-        errorMessage.includes('simulator') ||
-        errorMessage.includes('Cannot run camera') ||
-        errorMessage.includes('Camera not available');
-
-      if (isSimulatorError) {
-        Alert.alert(
-          'Camera unavailable',
-          'Camera is not available on iOS Simulator. Please test on a real device.',
-          [{ text: 'OK' }]
-        );
-      } else if (error?.code !== 'E_PICKER_CANCELLED') {
-        console.error('Camera error:', error);
-        Alert.alert(
-          'Camera error',
-          errorMessage || 'Failed to open camera. Please try again.',
-          [{ text: 'OK' }]
-        );
-      }
-    }
-  };
-
-  const handleGallerySelection = async () => {
-    try {
-      let permission: Permission;
-
-      if (Platform.OS === 'ios') {
-        permission = PERMISSIONS.IOS.PHOTO_LIBRARY;
-      } else if (Number(Platform.Version) >= 33) {
-        permission = PERMISSIONS.ANDROID.READ_MEDIA_IMAGES;
-      } else {
-        permission = PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE;
-      }
-
-      console.log('handleGallerySelection - checking permission:', permission);
-      const permissionStatus = await checkPermission(permission);
-      console.log('handleGallerySelection - permission status:', permissionStatus);
-
-      if (permissionStatus !== RESULTS.GRANTED) {
-        console.log('handleGallerySelection - permission not granted, showing alert');
-        Alert.alert(
-          'Permission required',
-          'Gallery permission is needed to select photos.',
-          [
-            {
-              text: 'Cancel',
-              onPress: () => console.log('Gallery permission cancelled'),
-              style: 'cancel',
-            },
-            {
-              text: 'Open Settings',
-              onPress: () => Linking.openSettings(),
-            },
-          ]
-        );
-        return;
-      }
-
-      await new Promise(resolve => setTimeout(resolve, 300));
-      const image = await ImagePicker.openPicker({
-        multiple: false,
-        mediaType: 'any',
-      });
-      console.log('handleGallerySelection - image selected:', image);
-
-      const originalName = image.path.split('/').pop();
-      const file = {
-        uri: image.path,
-        type: image.mime,
-        name:
-          originalName ||
-          `gallery_${Date.now()}${
-            image.mime.includes('video') ? '.mp4' : '.jpg'
-          }`,
-      };
-
-      onFileSelect([file]);
-    } catch (error: any) {
-      if (error?.code === 'E_PICKER_CANCELLED') {
-        return;
-      }
-
-      console.error('Gallery error:', error);
-      console.error('Gallery error code:', error?.code);
-      console.error('Gallery error message:', error?.message);
-
-      const errorMessage = error?.message || String(error);
-      Alert.alert(
-        'Gallery error',
-        errorMessage || 'Failed to open gallery. Please try again.',
-        [{ text: 'OK' }]
-      );
-    }
-  };
-
-  const handleFileSelection = async () => {
-    try {
-      const result = await DocumentPicker.pick({
-        type: [DocumentPicker.types.allFiles],
-        allowMultiSelection: false,
-      });
-
-      const files = result.map((file: any) => {
-        const originalName = file.name;
-        return {
-          uri: file.uri,
-          type: file.type || 'unknown',
-          name: originalName || `file_${Date.now()}`,
-        };
-      });
-
-      onFileSelect(files);
-    } catch (err: any) {
-      if (DocumentPicker.isCancel(err)) {
-        console.log('User cancelled file picker');
-      } else {
-        console.error('DocumentPicker Error:', err);
-        const errorMessage = err?.message || String(err);
-        Alert.alert(
-          'File selection error',
-          errorMessage || 'Failed to select file. Please try again.',
-          [{ text: 'OK' }]
-        );
-      }
-    }
-  };
-
-  const menuOptions = useMemo(
-    () => [
-      {
-        label: 'Camera',
-        icon: <CameraIcon />,
-        onClick: async () => {
-          setTimeout(async () => {
-            await handleCameraSelection();
-          }, 500);
-        },
-      },
-      {
-        label: 'Media File',
-        icon: <MediaIcon />,
-        onClick: async () => {
-          await handleGallerySelection();
-        },
-      },
-      {
-        label: 'Document',
-        icon: <DocumentIcon />,
-        onClick: async () => {
-          setTimeout(async () => {
-            await handleFileSelection();
-          }, 500);
-        },
-      },
-    ],
-    []
-  );
-
-  return (
-    <DropdownMenu
-      position="leftBottom"
-      options={menuOptions}
-      openButton={(onPress) => {
-        return (
-          <Button
-            style={{
-              padding: 0,
-              height: 40,
-              width: 40,
-              justifyContent: 'center',
-              alignItems: 'center',
-              backgroundColor: 'transparent',
-              margin: 0,
-            }}
-            EndIcon={<AttachIcon color={config?.colors?.primary || '#0052CD'} />}
-            onPress={() => {
-              onPress();
-            }}
-          />
-        );
-      }}
-    />
-  );
-};

package/src/components/OperationalModal/OperationalModal.tsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-// import QRCode from 'react-qr-code';
-import { CloseButton } from '../Modals/styledModalComponents';
-import { Overlay, StyledModal } from '../styled/MediaModal';
-import { StyledInput } from '../styled/StyledInputComponents/StyledInputComponents';
-import Button from '../styled/Button';
-import { Text, View } from 'react-native';
-import { QRCODE_URL } from '../../helpers/constants/PLATFORM_CONSTANTS';
-import Clipboard from '@react-native-clipboard/clipboard';
-
-interface OperationalModalProps {
-  isVisible: boolean;
-  chatJid: string;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const OperationalModal: React.FC<OperationalModalProps> = ({
-  isVisible,
-  chatJid,
-  setVisible,
-}) => {
-  const handleCopyClick = () => {
-    Clipboard.setString(`${QRCODE_URL}${chatJid}`);
-  };
-
-  return (
-    isVisible && (
-      <Overlay
-        style={{
-          position: 'absolute',
-        }}
-      >
-        <StyledModal
-          style={{
-            borderRadius: 16,
-            width: 'auto',
-            height: 'auto',
-            paddingHorizontal: 64,
-            paddingVertical: 32,
-            minWidth: 480,
-          }}
-        >
-          <CloseButton onPress={() => setVisible(false)}>
-            <Text style={{ fontSize: 24 }}>&times;</Text>
-          </CloseButton>
-          <View
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 16,
-              alignItems: 'center',
-            }}
-          >
-            <View style={{ width: '70%', position: 'relative' }} />
-
-            <View
-              style={{
-                display: 'flex',
-                gap: 8,
-                alignItems: 'center',
-                minWidth: 400,
-              }}
-            >
-              <StyledInput
-                value={chatJid}
-                editable={true}
-                style={{ width: '80%' }}
-              />
-              <Button text="Copy" onPress={handleCopyClick} />
-            </View>
-          </View>
-        </StyledModal>
-      </Overlay>
-    )
-  );
-};
-
-export default OperationalModal;