@ethora/chat-component-rn 26.4.1

package/src/components/styled/RoomListComponents/index.tsx

@@ -0,0 +1,164 @@
+import React, { createContext } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  TextStyle,
+} from 'react-native';
+import { getTintedColor } from '../../../helpers/getTintedColor';
+
+// Container with burger menu support
+export const Container = ({
+  burgerMenu,
+  open,
+  children,
+}: {
+  burgerMenu?: boolean;
+  open?: boolean;
+  children: React.ReactNode;
+}) => (
+  <View
+    style={[
+      styles.container,
+      burgerMenu && open ? styles.containerOpen : styles.containerClosed,
+      burgerMenu && styles.burgerMenu,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+// Button for the burger menu
+export const BurgerButton = ({ onPress }: { onPress: () => void }) => (
+  <TouchableOpacity style={styles.burgerButton} onPress={onPress}>
+    <Text style={styles.burgerButtonText}>☰</Text>
+  </TouchableOpacity>
+);
+
+// Chat item
+const ColorContext = createContext<string | undefined>(undefined);
+
+export const ChatItem = ({
+  children,
+}: {
+  bg?: string;
+  children: React.ReactNode;
+}) => {
+  return <View style={styles.chatItem}>{children}</View>;
+};
+
+// Search container for the chat area
+export const SearchContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => <View style={styles.searchContainer}>{children}</View>;
+
+// Scrollable container
+export const ScollableContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => <View style={styles.scollableContainer}>{children}</View>;
+
+// Chat info (name & last message)
+export const ChatInfo = ({ children }: { children: React.ReactNode }) => (
+  <View style={styles.chatInfo}>{children}</View>
+);
+
+// Chat name and last message display
+export const ChatName = ({ text }: { text: string }) => (
+  <Text style={styles.chatName}>{text}</Text>
+);
+
+export const LastMessage = ({ children }: { children: React.ReactNode }) => (
+  <Text style={styles.lastMessage}>{children}</Text>
+);
+
+// User count display for the chat
+export const UserCount = ({
+  style,
+  text,
+}: {
+  text: string;
+  style: TextStyle;
+}) => <Text style={[styles.userCount, style]}>{text}</Text>;
+
+export const Viewider = () => <View style={styles.viewider} />;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    paddingTop: 0,
+    backgroundColor: '#fff',
+    overflow: 'hidden',
+  },
+  burgerMenu: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: 300,
+    height: '100%',
+    transform: [{ translateX: -300 }],
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#fff',
+    padding: 16,
+    borderRightWidth: 1,
+    borderRightColor: '#f0f0f0',
+  },
+  containerOpen: {
+    transform: [{ translateX: 0 }],
+  },
+  containerClosed: {
+    transform: [{ translateX: -300 }],
+  },
+  burgerButton: {
+    position: 'absolute',
+    left: 10,
+    top: 10,
+    padding: 10,
+  },
+  burgerButtonText: {
+    fontSize: 24,
+    color: '#333',
+  },
+  chatItem: {
+    borderRadius: 16,
+    gap: 16,
+    color: '#000',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+  },
+  searchContainer: {
+    display: 'flex',
+    gap: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 50,
+    paddingHorizontal: 12,
+  },
+  scollableContainer: {
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  chatInfo: {
+    maxWidth: '60%',
+  },
+  chatName: {
+    fontWeight: 'bold',
+  },
+  lastMessage: {
+    color: '#999',
+  },
+  userCount: {
+    marginLeft: 'auto',
+  },
+  viewider: {
+    height: 1,
+    width: '100%',
+    backgroundColor: '#0052cd0d',
+  },
+});

package/src/components/styled/SendInput.tsx

@@ -0,0 +1,297 @@
+/** @format */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+  MessageInputContainer,
+  InputContainer,
+  MessageInput,
+} from './StyledInputComponents/StyledInputComponents';
+import { IConfig, MediaFile } from '../../types/types';
+import Button from './Button';
+import { SendIcon, AttachIcon } from '../../assets/icons';
+import { KeyboardAvoidingView, Platform, View, TouchableOpacity, Alert, ActionSheetIOS, Linking } from 'react-native';
+import { ModalSelectMedia } from '../Modals/ModalSelectMedia/ModalSelectMedia.tsx';
+import { MediaFilePreview } from './MediaFilePreview';
+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';
+
+interface SendInputProps {
+  sendMessage: (message: string) => void;
+  isLoading: boolean;
+  editMessage?: string;
+  sendMedia: (data: any, type: string) => void;
+  config?: IConfig;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  isMessageProcessing?: boolean;
+  formatMessage?: (text: string) => string;
+  multiline?: boolean;
+  inputHeight?: number;
+  showPreview?: boolean;
+  previewParser?: (text: string) => (string | JSX.Element)[];
+}
+
+const SendInput: React.FC<SendInputProps> = ({
+  sendMessage,
+  sendMedia,
+  config,
+  onFocus,
+  onBlur,
+  editMessage,
+  isLoading,
+  isMessageProcessing,
+}) => {
+  const [message, setMessage] = useState('');
+  const [isRecording, setIsRecording] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [filePreviews, setFilePreviews] = useState<MediaFile[]>([]);
+  const [inputHeight, setInputHeight] = useState(40);
+  const [showMediaMenu, setShowMediaMenu] = useState(false);
+
+  const handleFileSelect = (files: MediaFile[]) => {
+    console.log('🔵 [SendInput] Files selected:', files);
+    setFilePreviews([...files]);
+  };
+
+  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);
+      return requestStatus;
+    }
+    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', style: 'cancel' },
+        { text: 'Open Settings', onPress: () => Linking.openSettings() },
+      ]);
+      return;
+    }
+
+    try {
+      const image = await ImagePicker.openCamera({
+        width: 300,
+        height: 400,
+        cropping: true,
+      });
+      const file = {
+        uri: image.path,
+        type: image.mime,
+        name: image.path.split('/').pop() || `camera_${Date.now()}.jpg`,
+      };
+      handleFileSelect([file]);
+    } catch (error: any) {
+      if (error?.code !== 'E_PICKER_CANCELLED') {
+        console.error('Camera error:', error);
+      }
+    }
+  };
+
+  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;
+      }
+
+      const permissionStatus = await checkPermission(permission);
+      if (permissionStatus !== RESULTS.GRANTED) {
+        Alert.alert('Permission required', 'Gallery permission is needed to select photos.', [
+          { text: 'Cancel', style: 'cancel' },
+          { text: 'Open Settings', onPress: () => Linking.openSettings() },
+        ]);
+        return;
+      }
+
+      const image = await ImagePicker.openPicker({
+        multiple: false,
+        mediaType: 'any',
+      });
+      const file = {
+        uri: image.path,
+        type: image.mime,
+        name: image.path.split('/').pop() || `gallery_${Date.now()}.jpg`,
+      };
+      handleFileSelect([file]);
+    } catch (error: any) {
+      if (error?.code !== 'E_PICKER_CANCELLED') {
+        console.error('Gallery error:', error);
+      }
+    }
+  };
+
+  const handleFileSelection = async () => {
+    try {
+      const result = await DocumentPicker.pick({
+        type: [DocumentPicker.types.allFiles],
+        allowMultiSelection: false,
+      });
+      const files = result.map((file) => ({
+        uri: file.uri,
+        type: file.type || 'unknown',
+        name: file.name || `file_${Date.now()}`,
+      }));
+      handleFileSelect(files);
+    } catch (err: any) {
+      if (!DocumentPicker.isCancel(err)) {
+        console.error('DocumentPicker Error:', err);
+      }
+    }
+  };
+
+  const handleAttachPress = () => {
+    console.log('🔵 [SendInput] Attach button pressed');
+    if (Platform.OS === 'ios') {
+      ActionSheetIOS.showActionSheetWithOptions(
+        {
+          options: ['Cancel', 'Camera', 'Photo Library', 'Document'],
+          cancelButtonIndex: 0,
+        },
+        (buttonIndex) => {
+          if (buttonIndex === 1) {handleCameraSelection();}
+          else if (buttonIndex === 2) {handleGallerySelection();}
+          else if (buttonIndex === 3) {handleFileSelection();}
+        }
+      );
+    } else {
+      Alert.alert('Select Media', 'Choose an option', [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Camera', onPress: handleCameraSelection },
+        { text: 'Photo Library', onPress: handleGallerySelection },
+        { text: 'Document', onPress: handleFileSelection },
+      ]);
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setFilePreviews((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSendClick = useCallback(() => {
+    console.log('🔵 [SendInput] handleSendClick', {
+      hasMessage: !!message,
+      msgLen: message?.length || 0,
+      files: filePreviews.length,
+    });
+    // Send media first (so it lands above the caption), then the text
+    // — previously it was either-or, so the user could never attach a
+    // file AND type a caption in the same tap.
+    if (filePreviews.length > 0) {
+      filePreviews.forEach((file) => {
+        sendMedia(file, file.type);
+      });
+    }
+    if (message) {
+      sendMessage(message);
+    }
+    setMessage('');
+    setFilePreviews([]);
+  }, [filePreviews, message, sendMessage, sendMedia]);
+
+  useEffect(() => {
+    setMessage(editMessage || '');
+  }, [editMessage]);
+
+  return (
+    <InputContainer isText={!!message}>
+        {filePreviews.length > 0 && (
+          <MediaFilePreview
+            filePreviews={filePreviews}
+            handleRemoveImage={handleRemoveImage}
+          />
+        )}
+        <MessageInputContainer>
+          {!isRecording && (
+            <>
+              {/* Media selection button - always visible on the left, unless disabled in config */}
+              {!config?.disableMedia && (
+                <TouchableOpacity
+                  onPress={handleAttachPress}
+                  style={{
+                    width: 40,
+                    height: 40,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: 'transparent',
+                  }}
+                  activeOpacity={0.7}
+                >
+                  <AttachIcon color={config?.colors?.primary || '#0052CD'} />
+                </TouchableOpacity>
+              )}
+              <MessageInput
+                isFocused={isFocused}
+                color={config?.colors?.primary}
+                placeholder="Type message"
+                placeholderTextColor="#999"
+                value={message}
+                onChangeText={setMessage}
+                onFocus={() => {
+                  onFocus?.();
+                  setIsFocused(true);
+                }}
+                onBlur={() => {
+                  onBlur?.();
+                  setIsFocused(false);
+                }}
+                editable={!isLoading || !isMessageProcessing}
+                multiline={true}
+                // maxHeight={72}
+                onContentSizeChange={(event) => {
+                  setInputHeight(
+                    Math.min(
+                      72,
+                      Math.max(40, event.nativeEvent.contentSize.height)
+                    )
+                  );
+                }}
+                style={{
+                  height: inputHeight,
+                  flex: 1,
+                }}
+              />
+            </>
+          )}
+          {/* Always show send button - it's needed for sending messages and media */}
+          <Button
+            onPress={handleSendClick}
+            disabled={!message && filePreviews.length === 0}
+            EndIcon={
+              <SendIcon
+                color={
+                  message || filePreviews.length > 0 ? '#FFFFFF' : '#D4D4D8'
+                }
+              />
+            }
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 20,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor:
+                message || filePreviews.length > 0
+                  ? config?.colors?.primary
+                  : 'transparent',
+              opacity: message || filePreviews.length > 0 ? 1 : 0.5,
+            }}
+          />
+        </MessageInputContainer>
+      </InputContainer>
+  );
+};
+
+export default SendInput;