@ethora/chat-component-rn 26.4.1

package/src/components/Header/HeaderRoomList.tsx

@@ -0,0 +1,104 @@
+/** @format */
+
+import React, { FC, useMemo } from 'react';
+import { View, StyleSheet, Image, Text } from 'react-native';
+import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { BurgerMenuIcon } from '../../assets/icons';
+import Button from '../styled/Button';
+
+interface HeaderRoomListProps {
+  setDrawerOpen: () => void;
+}
+
+export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
+  const { config, user, selectedUser } = useChatSettingState();
+
+  const modalUser: any = selectedUser ?? user;
+
+  const HeaderLogo = useMemo(() => {
+    const image = config?.headerLogo;
+
+    if (image) {
+      if (typeof image === 'function') {
+        const SvgComponent = image as React.FC<React.SVGProps<SVGSVGElement>>;
+        return <SvgComponent />;
+      } else if (typeof image === 'string') {
+        return <Image source={{ uri: image }} />;
+      } else {
+        return image;
+      }
+    }
+
+    return <View />;
+  }, [config?.backgroundChat?.image]);
+
+  return (
+    <View style={styles.headerContainer}>
+      {!config?.disableRoomMenu && config?.headerMenu ? (
+        <View style={styles.leftContainer}>
+          <Button
+            style={styles.menuButton}
+            color="black"
+            unstyled
+            EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+            onPress={() => config?.headerMenu && config?.headerMenu()}
+          />
+        </View>
+      ) : (
+        <View style={styles.leftContainer} />
+      )}
+      <View style={styles.centerContainer}>
+        {config?.headerLogo ? (
+          HeaderLogo
+        ) : (
+          <Text style={{ fontWeight: 500, fontSize: 18 }}>Chats</Text>
+        )}
+      </View>
+      <View style={styles.rightContainer}>
+        <ProfileImagePlaceholder
+          icon={modalUser?.profileImage ?? null}
+          name={modalUser?.name ?? modalUser?.firstName}
+          size={30}
+          click={{
+            isClick: true,
+            onPress: setDrawerOpen,
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    paddingTop: 62, // 60px top padding + 2px for header content
+    maxHeight: 24,
+    minHeight: 24,
+    justifyContent: 'space-between',
+  },
+  menuButton: {
+    padding: 8,
+    borderRadius: 16,
+    backgroundColor: 'transparent',
+  },
+  leftContainer: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  centerContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  rightContainer: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+});

package/src/components/InputComponents/AudioInput.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import AudioRecorder from '../InputComponents/AudioRecorder';
+
+interface AudioInputProps {
+  isRecording: boolean;
+  setIsRecording: (value: boolean) => void;
+  handleSendClick: (audioUrl?: string) => void;
+}
+
+const AudioInput: React.FC<AudioInputProps> = ({
+  isRecording,
+  setIsRecording,
+  handleSendClick,
+}) => {
+  return (
+    <AudioRecorder
+      setIsRecording={setIsRecording}
+      isRecording={isRecording}
+      handleSendClick={handleSendClick}
+    />
+  );
+};
+
+export default AudioInput;

package/src/components/InputComponents/AudioRecorder.tsx

@@ -0,0 +1,100 @@
+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) => {
+        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

@@ -0,0 +1,114 @@
+import React, { useCallback } from 'react';
+import { View, Image, TouchableOpacity } from 'react-native';
+import Video from 'react-native-video';
+import { AttachIcon, RemoveIcon } from '../../assets/icons';
+import Button from '../styled/Button';
+import { launchImageLibrary } from 'react-native-image-picker';
+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(() => {
+    launchImageLibrary(
+      {
+        mediaType: 'mixed',
+        selectionLimit: 5,
+      },
+      (response) => {
+        if (response.assets) {
+          const newFiles = response.assets.map((asset) => ({
+            uri: asset.uri!,
+            name: asset.fileName!,
+            type: asset.type!,
+          }));
+          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 }}
+          controls
+          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

@@ -0,0 +1,77 @@
+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/InputComponents/Search.tsx

@@ -0,0 +1,135 @@
+import React, { useState, useEffect, useRef } from 'react';
+import styled, { css } from 'styled-components/native';
+import {
+  TextInput,
+  View,
+  TouchableOpacity,
+  TextInputProps,
+} from 'react-native';
+
+const shouldForwardProp = (prop: string) =>
+  prop !== 'animated' && prop !== 'expanded' && prop !== 'direction';
+
+const SearchInputWrapper = styled.View.withConfig({ shouldForwardProp })<{
+  animated?: boolean;
+  direction?: string;
+  expanded?: boolean;
+}>`
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 16px;
+  height: 48px;
+  padding: 0 16px;
+  margin: 0 6px 16px 6px;
+  flex: 1;
+  ${({ animated, expanded }) =>
+    animated &&
+    css`
+      justify-content: ${expanded ? 'flex-start' : 'center'};
+      transition: width 0.7s ease-in-out;
+    `};
+`;
+
+const SearchIcon = styled(TouchableOpacity)<{
+  animated?: boolean;
+  expanded?: boolean;
+}>`
+  padding: 3.5px;
+  color: #999;
+`;
+
+const StyledInput = styled(TextInput)<{
+  animated?: boolean;
+  expanded?: boolean;
+}>`
+  background-color: transparent;
+  border: none;
+  flex: 1;
+  font-size: 16px;
+  color: #000;
+  opacity: ${({ animated, expanded }) => (animated && !expanded ? 0 : 1)};
+  display: ${({ animated, expanded }) =>
+    animated && !expanded ? 'none' : 'flex'};
+  ${({ animated }) =>
+    animated &&
+    css`
+      transition: opacity 0.7s ease-in-out;
+    `}
+`;
+
+interface SearchInputProps extends TextInputProps {
+  icon?: React.ReactNode;
+  animated?: boolean;
+  direction?: 'left' | 'right';
+  placeholder?: string;
+  value: string;
+}
+
+const SearchInput: React.FC<SearchInputProps> = ({
+  icon,
+  animated = false,
+  direction = 'left',
+  placeholder,
+  ...props
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
+  const inputRef = useRef<TextInput | null>(null);
+
+  const handleFocus = () => {
+    setIsExpanded(true);
+  };
+
+  const handleBlur = () => {
+    if (!isTyping) {
+      setIsExpanded(false);
+    }
+  };
+
+  const handleInput = (text: string) => {
+    setIsTyping(!!text);
+  };
+
+  useEffect(() => {
+    if (isExpanded && animated) {
+      const timeout = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 250);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [isExpanded, animated]);
+
+  return (
+    <SearchInputWrapper
+      animated={animated}
+      direction={direction}
+      expanded={isExpanded}
+      onTouchStart={handleFocus}
+    >
+      {icon && (
+        <SearchIcon
+          animated={animated}
+          expanded={isExpanded}
+          onPress={() => inputRef.current?.focus()}
+        >
+          {icon}
+        </SearchIcon>
+      )}
+      <StyledInput
+        ref={inputRef}
+        onBlur={handleBlur}
+        animated={animated}
+        expanded={isExpanded}
+        onChangeText={handleInput}
+        placeholder={placeholder}
+        placeholderTextColor="#999"
+        {...props}
+      />
+    </SearchInputWrapper>
+  );
+};
+
+export { SearchInput };

package/src/components/InputComponents/TextInput.tsx

@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react';
+import { SendIcon } from '../../assets/icons';
+import { IConfig } from '../../types/types';
+import Button from '../styled/Button';
+import { MessageInput } from '../styled/StyledInputComponents/StyledInputComponents';
+
+interface TextInputProps {
+  message: string;
+  setMessage: (value: string) => void;
+  handleSendClick: () => void;
+  isLoading: boolean;
+  config?: IConfig;
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+const TextInput: React.FC<TextInputProps> = ({
+  message,
+  setMessage,
+  handleSendClick,
+  config,
+  isLoading,
+  onFocus,
+  onBlur,
+}) => {
+  const handleInputChange = useCallback(
+    (text: string) => {
+      setMessage(text);
+    },
+    [setMessage]
+  );
+
+  const handleKeyDown = useCallback(
+    (event: { nativeEvent: { key: string } }) => {
+      if (event.nativeEvent.key === 'Enter' && message) {
+        handleSendClick();
+      }
+    },
+    [handleSendClick, message]
+  );
+
+  return (
+    <>
+      <MessageInput
+        color={config?.colors?.primary}
+        placeholder="Type message"
+        value={message}
+        onChangeText={handleInputChange}
+        onSubmitEditing={handleSendClick}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        editable={isLoading}
+      />
+      <Button
+        onPress={handleSendClick}
+        EndIcon={<SendIcon color={!message ? '#D4D4D8' : '#fff'} />}
+        style={{
+          borderRadius: 100,
+          backgroundColor: !message ? 'transparent' : config?.colors?.primary,
+        }}
+      />
+    </>
+  );
+};
+
+export default TextInput;