@messenger-box/platform-mobile 10.0.3-alpha.5 → 10.0.3-alpha.54

package/src/screens/inbox/components/GiftedChatInboxComponent.tsx

@@ -0,0 +1,411 @@
+import React, { forwardRef, useCallback, useMemo } from 'react';
+import { Platform, View, KeyboardAvoidingView, TouchableOpacity, TextInput, ScrollView, Animated } from 'react-native';
+import { Spinner, Box, Image, HStack, Text } from '@admin-layout/gluestack-ui-mobile';
+import { GiftedChat, Send } from 'react-native-gifted-chat';
+import { Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
+import colors from 'tailwindcss/colors';
+// If you have a SlackMessage component, import it:
+// import SlackMessage from './SlackMessage';
+
+export interface GiftedChatInboxComponentProps {
+    messages: any[];
+    onSend: (messages: any[]) => void;
+    text: string;
+    onInputTextChanged: (text: string) => void;
+    user: any;
+    images: any[];
+    onSelectImages: () => void;
+    onRemoveImage: (index: number) => void;
+    selectedImage: string;
+    setSelectedImage: (img: string) => void;
+    isUploadingImage: boolean;
+    loading: boolean;
+    errorMessage: string;
+    notificationType?: string;
+    onCloseError?: () => void;
+    inputToolbarHeight?: number;
+    bottomMargin?: number;
+    renderMessageText?: any;
+    renderActions?: any;
+    renderAccessory?: any;
+    renderMessage?: any;
+    renderInputToolbar?: any;
+    renderChatFooter?: any;
+    renderLoadEarlier?: any;
+    loadEarlier?: boolean;
+    isLoadingEarlier?: boolean;
+    totalCount?: number;
+    channelMessagesLength?: number;
+    keyboardVerticalOffset?: number;
+    placeholder?: string;
+    listViewProps?: any;
+    wrapInSafeArea?: boolean;
+    minComposerHeight?: number;
+    maxComposerHeight?: number;
+    renderFooter?: any;
+    lightboxProps?: any;
+    infiniteScroll?: boolean;
+    alwaysShowSend?: boolean;
+    minInputToolbarHeight?: number;
+    textInputProps?: any;
+    messagesContainerStyle?: any;
+    renderHeader?: any;
+    [key: string]: any;
+}
+
+// Helper to get the current ref if it's an object
+function getRefCurrent(ref: React.ForwardedRef<any>) {
+    if (ref && typeof ref === 'object' && 'current' in ref) {
+        return ref.current;
+    }
+    return null;
+}
+
+export const GiftedChatInboxComponent = forwardRef<any, GiftedChatInboxComponentProps>((props, ref) => {
+    const {
+        messages,
+        onSend,
+        text,
+        onInputTextChanged,
+        user,
+        images,
+        setImages,
+        onSelectImages,
+        onRemoveImage,
+        selectedImage,
+        setSelectedImage,
+        isUploadingImage,
+        loading,
+        errorMessage,
+        notificationType = 'error',
+        onCloseError,
+        inputToolbarHeight = 56,
+        bottomMargin = 0,
+        renderMessageText,
+        renderActions,
+        renderAccessory,
+        renderMessage,
+        renderInputToolbar,
+        renderChatFooter,
+        renderLoadEarlier,
+        loadEarlier,
+        isLoadingEarlier,
+        keyboardVerticalOffset = Platform.OS === 'ios' ? 64 : 0,
+        placeholder = 'Jot something down',
+        listViewProps,
+        wrapInSafeArea = true,
+        minComposerHeight = 36,
+        maxComposerHeight = 100,
+        renderFooter,
+        lightboxProps = {
+            underlayColor: 'transparent',
+            springConfig: { tension: 90000, friction: 90000 },
+            disabled: true,
+        },
+        infiniteScroll = false,
+        alwaysShowSend = true,
+        minInputToolbarHeight = 30,
+        textInputProps = {
+            multiline: true,
+            returnKeyType: 'default',
+            enablesReturnKeyAutomatically: true,
+            placeholderTextColor: colors.gray[400],
+        },
+        messagesContainerStyle = { paddingTop: 8 },
+        renderHeader,
+        ...rest
+    } = props;
+
+    // Error Notification
+    const renderErrorNotification = () => {
+        if (!errorMessage) return null;
+        return (
+            <Animated.View
+                style={{
+                    position: 'absolute',
+                    top: 10,
+                    left: 10,
+                    right: 10,
+                    backgroundColor: notificationType === 'error' ? '#f44336' : '#ff9800',
+                    padding: 15,
+                    borderRadius: 8,
+                    shadowColor: '#000',
+                    shadowOffset: { width: 0, height: 2 },
+                    shadowOpacity: 0.25,
+                    shadowRadius: 3.84,
+                    elevation: 5,
+                    zIndex: 1000,
+                }}
+            >
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <View>
+                        <Text style={{ color: 'white', fontWeight: 'bold' }}>
+                            {notificationType === 'error' ? 'Error' : 'Warning'}
+                        </Text>
+                    </View>
+                    <View>
+                        <TouchableOpacity onPress={onCloseError}>
+                            <Ionicons name="close" size={20} color="white" />
+                        </TouchableOpacity>
+                    </View>
+                </View>
+                <Text style={{ color: 'white', marginTop: 5 }}>{errorMessage}</Text>
+            </Animated.View>
+        );
+    };
+
+    const renderInputToolbarDefault = useCallback(
+        (props) => (
+            <View style={{ backgroundColor: '#fff', paddingBottom: 4, paddingTop: 4 }}>
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        minHeight: 44,
+                        maxHeight: 56,
+                        backgroundColor: '#fff',
+                        borderRadius: 22,
+                        marginHorizontal: 8,
+                        paddingHorizontal: 8,
+                        borderTopWidth: 1,
+                        borderTopColor: '#e0e0e0',
+                    }}
+                >
+                    <TouchableOpacity
+                        onPress={onSelectImages}
+                        style={{
+                            width: 32,
+                            height: 32,
+                            borderRadius: 16,
+                            backgroundColor: '#fff',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            marginRight: 8,
+                        }}
+                    >
+                        <MaterialIcons name="add" size={24} color="#888" />
+                    </TouchableOpacity>
+                    <TextInput
+                        ref={ref}
+                        style={{
+                            flex: 1,
+                            //minHeight: 36,
+                            maxHeight: 44,
+                            backgroundColor: 'transparent',
+                            color: '#444',
+                            paddingHorizontal: 8,
+                            paddingVertical: 0,
+                            alignSelf: 'center',
+                            textAlignVertical: 'center',
+                        }}
+                        placeholder={placeholder || 'Jot something down'}
+                        placeholderTextColor={colors.gray[400]}
+                        multiline
+                        value={text}
+                        onChangeText={onInputTextChanged}
+                    />
+                    <TouchableOpacity
+                        onPress={() => onSend([{ text: text }])}
+                        // disabled={(!messageText.trim() && images.length === 0) || isUploadingImage || loading}
+                        disabled={false}
+                        style={{
+                            marginLeft: 8,
+                            // opacity: (!messageText.trim() && images.length === 0) || isUploadingImage || loading ? 0.5 : 1,
+                            opacity: !text.trim() && images.length === 0 ? 0.5 : 1,
+                        }}
+                    >
+                        <MaterialCommunityIcons
+                            name="send-circle"
+                            size={32}
+                            color={!text.trim() && images.length === 0 ? colors.gray[400] : colors.blue[500]}
+                            // color={
+                            //     (!messageText.trim() && images.length === 0) || isUploadingImage || loading
+                            //         ? colors.gray[400]
+                            //         : colors.blue[500]
+                            // }
+                        />
+                    </TouchableOpacity>
+                </View>
+                {/* Selected Images Row */}
+                {images && images.length > 0 && (
+                    <ScrollView
+                        horizontal
+                        showsHorizontalScrollIndicator={false}
+                        style={{ marginTop: 4, marginLeft: 8 }}
+                    >
+                        {images.map((img, index) => (
+                            <View
+                                key={`image-preview-${index}`}
+                                style={{
+                                    width: 48,
+                                    height: 48,
+                                    marginRight: 8,
+                                    borderRadius: 6,
+                                    overflow: 'hidden',
+                                    position: 'relative',
+                                    backgroundColor: colors.gray[200],
+                                }}
+                            >
+                                <Image
+                                    source={{ uri: img.uri || img.url }}
+                                    style={{ width: '100%', height: '100%' }}
+                                    alt={`selected image ${index + 1}`}
+                                />
+                                <TouchableOpacity
+                                    onPress={() => {
+                                        onRemoveImage(index);
+                                    }}
+                                    style={{
+                                        position: 'absolute',
+                                        top: 2,
+                                        right: 2,
+                                        backgroundColor: 'rgba(0,0,0,0.6)',
+                                        borderRadius: 10,
+                                        width: 20,
+                                        height: 20,
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }}
+                                >
+                                    <Ionicons name="close" size={14} color="white" />
+                                </TouchableOpacity>
+                            </View>
+                        ))}
+                    </ScrollView>
+                )}
+            </View>
+        ),
+        [onSelectImages, text, images, isUploadingImage, loading, onSend, onRemoveImage, placeholder, ref],
+    );
+
+    const renderAccessoryDefault = useCallback(() => {
+        if (!images.length) return null;
+        return (
+            <Box style={{ position: 'relative', height: 70, backgroundColor: 'transparent', justifyContent: 'center' }}>
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    style={{
+                        flexDirection: 'row',
+                        paddingLeft: 15,
+                        paddingRight: 5,
+                    }}
+                    contentContainerStyle={{
+                        alignItems: 'center',
+                        height: '100%',
+                    }}
+                >
+                    {images.map((img, index) => (
+                        <View
+                            key={`image-preview-${index}`}
+                            style={{
+                                width: 40,
+                                height: 40,
+                                marginRight: 15,
+                                borderRadius: 4,
+                                backgroundColor: colors.gray[200],
+                                overflow: 'hidden',
+                                borderWidth: 1,
+                                borderColor: '#e0e0e0',
+                                position: 'relative',
+                                zIndex: 10,
+                            }}
+                        >
+                            <Image
+                                source={{ uri: img.uri || img.url }}
+                                style={{ width: '100%', height: '100%' }}
+                                alt={`selected image ${index + 1}`}
+                            />
+                            {/* Cross button at top right */}
+                            <TouchableOpacity
+                                onPress={() => {
+                                    const newImages = [...images];
+                                    newImages.splice(index, 1);
+                                    setImages(newImages);
+                                    if (newImages.length === 0) {
+                                        setSelectedImage('');
+                                        const inputRef = getRefCurrent(ref);
+                                        if (inputRef && typeof inputRef.focus === 'function') {
+                                            inputRef.focus();
+                                        }
+                                    }
+                                }}
+                                style={{
+                                    position: 'absolute',
+                                    top: -1,
+                                    right: -1,
+                                    backgroundColor: 'rgba(0,0,0,0.6)',
+                                    borderRadius: 12,
+                                    width: 20,
+                                    height: 20,
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    zIndex: 9999,
+                                }}
+                            >
+                                <Ionicons name="close" size={16} color="white" />
+                            </TouchableOpacity>
+                        </View>
+                    ))}
+                </ScrollView>
+            </Box>
+        );
+    }, [images, setImages, setSelectedImage, ref]);
+
+    return (
+        <KeyboardAvoidingView
+            style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: '#fff' }}
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            keyboardVerticalOffset={keyboardVerticalOffset}
+        >
+            <View
+                style={{
+                    flex: 1,
+                    backgroundColor: '#fff',
+                    position: 'relative',
+                    marginBottom: bottomMargin,
+                }}
+            >
+                {renderErrorNotification()}
+                {loading && <Spinner color={colors.blue[500]} />}
+                <GiftedChat
+                    ref={ref}
+                    wrapInSafeArea={wrapInSafeArea}
+                    messages={messages}
+                    onSend={onSend}
+                    text={text}
+                    onInputTextChanged={onInputTextChanged}
+                    user={user}
+                    renderMessageText={renderMessageText}
+                    renderActions={renderActions || null}
+                    renderAccessory={renderAccessory || renderAccessoryDefault}
+                    renderMessage={renderMessage}
+                    renderInputToolbar={renderInputToolbar || renderInputToolbarDefault}
+                    renderLoading={props.renderLoading || null}
+                    renderChatFooter={renderChatFooter}
+                    renderLoadEarlier={renderLoadEarlier}
+                    listViewProps={listViewProps}
+                    loadEarlier={loadEarlier}
+                    isLoadingEarlier={isLoadingEarlier}
+                    bottomOffset={props.bottomOffset || 0}
+                    isKeyboardInternallyHandled={props.isKeyboardInternallyHandled || false}
+                    renderFooter={() => (renderFooter ? renderFooter() : null)}
+                    minComposerHeight={minComposerHeight}
+                    maxComposerHeight={maxComposerHeight}
+                    placeholder={placeholder || 'Jot something down'}
+                    lightboxProps={lightboxProps}
+                    infiniteScroll={infiniteScroll}
+                    alwaysShowSend={alwaysShowSend}
+                    minInputToolbarHeight={minInputToolbarHeight}
+                    textInputProps={textInputProps}
+                    messagesContainerStyle={messagesContainerStyle}
+                    isTyping={props.isTyping || false}
+                    renderChatEmpty={props.renderChatEmpty || null}
+                    {...rest}
+                />
+            </View>
+        </KeyboardAvoidingView>
+    );
+});
+
+export default GiftedChatInboxComponent;