@ethora/chat-component-rn 26.4.1

package/src/components/MainComponents/MessageContainer.tsx

@@ -0,0 +1,122 @@
+import React, { FC, Fragment, useMemo } from 'react';
+import { IConfig, IMessage } from '../../types/types';
+import DateLabel from '../styled/DateLabel';
+import SystemMessage from './SystemMessage';
+import NewMessageLabel from '../styled/NewMessageLabel';
+import {
+  Message,
+  MessageText,
+  MessageTimestamp,
+  UserName,
+} from '../styled/StyledComponents';
+import { View } from 'react-native';
+
+interface MessageContainerProps {
+  CustomMessage?: React.ComponentType<{
+    message: IMessage;
+    isUser: boolean;
+    isReply: boolean;
+    className?: string;
+  }>;
+  CustomDaySeparator?: React.ComponentType<{
+    date: Date;
+    formattedDate: string;
+  }>;
+  CustomNewMessageLabel?: React.ComponentType<{
+    color?: string;
+  }>;
+  message: IMessage;
+  activeMessage?: IMessage;
+  config?: IConfig;
+  walletAddress: string;
+  isReply: boolean;
+  showDateLabel: boolean;
+  className?: string;
+}
+
+export const MessageContainer: FC<MessageContainerProps> = ({
+  CustomMessage,
+  CustomDaySeparator,
+  CustomNewMessageLabel,
+  message,
+  activeMessage,
+  config,
+  walletAddress,
+  showDateLabel,
+  isReply,
+  className,
+}) => {
+  const isUser = message.user.id === walletAddress;
+
+  const messageDate = new Date(message.date);
+
+  if (message?.isSystemMessage === 'true') {
+    const SystemMessageComponent = config?.customSystemMessage;
+    return (
+      <Fragment key={message.id}>
+        {showDateLabel && (
+          CustomDaySeparator ? (
+            <CustomDaySeparator
+              date={messageDate}
+              formattedDate={messageDate.toLocaleDateString()}
+            />
+          ) : (
+            <DateLabel date={messageDate} colors={config?.colors} />
+          )
+        )}
+        {SystemMessageComponent ? (
+          <SystemMessageComponent message={message} isUser={false} isReply={false} />
+        ) : (
+          <SystemMessage messageText={message.body} colors={config?.colors} />
+        )}
+      </Fragment>
+    );
+  }
+
+  if (message?.id === 'delimiter-new') {
+    return CustomNewMessageLabel ? (
+      <CustomNewMessageLabel color={config?.colors?.primary} />
+    ) : (
+      <NewMessageLabel color={config?.colors?.primary} />
+    );
+  }
+
+  const MessageComponent = CustomMessage || Message;
+
+  return (
+    <View key={message.id}>
+      {showDateLabel && !activeMessage && message.id !== 'delimiter-new' ? (
+        CustomDaySeparator ? (
+          <CustomDaySeparator
+            date={messageDate}
+            formattedDate={messageDate.toLocaleDateString()}
+          />
+        ) : (
+          <DateLabel date={messageDate} colors={config?.colors} />
+        )
+      ) : null}
+      <MessageComponent
+        message={message}
+        isUser={isUser}
+        isReply={isReply}
+        className={className}
+      >
+        {!CustomMessage ? (
+          <>
+            <MessageTimestamp>
+              {messageDate.toLocaleTimeString()}
+            </MessageTimestamp>
+            <UserName>{message.user.name}: </UserName>
+            <MessageText>{message.body}</MessageText>
+          </>
+        ) : (
+          <MessageComponent
+            message={message}
+            isUser={isUser}
+            isReply={isReply}
+          />
+        )}
+      </MessageComponent>
+    </View>
+  );
+};

package/src/components/MainComponents/MessageList.tsx

@@ -0,0 +1,429 @@
+/** @format */
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  Image,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  TouchableOpacity,
+  Keyboard,
+  ImageSourcePropType,
+} from 'react-native';
+import { IMessage, User, IConfig, IRoom } from '../../types/types';
+import Composing from '../styled/StyledInputComponents/Composing';
+import TreadLabel from '../styled/TreadLabel';
+import { MessageContainer } from './MessageContainer';
+import { useRoomState } from '../../hooks/useRoomState';
+import Loader from '../styled/Loader';
+import { ArowDownIcon } from '../../assets/icons';
+import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
+
+interface MessageListProps<TMessage extends IMessage> {
+  CustomMessage?: React.ComponentType<{
+    message: IMessage;
+    isUser: boolean;
+    isReply: boolean;
+  }>;
+  CustomDaySeparator?: React.ComponentType<{
+    date: Date;
+    formattedDate: string;
+  }>;
+  CustomNewMessageLabel?: React.ComponentType<{
+    color?: string;
+  }>;
+  user: User;
+  roomJID: string;
+  loadMoreMessages: (
+    chatJID: string,
+    max: number,
+    amount?: number
+  ) => Promise<void>;
+  loading: boolean;
+  config?: IConfig;
+  isReply: boolean;
+  activeMessage?: IMessage;
+}
+
+const MessageList = <TMessage extends IMessage>({
+  CustomMessage,
+  CustomDaySeparator,
+  CustomNewMessageLabel,
+  user,
+  loadMoreMessages,
+  roomJID,
+  config,
+  loading,
+  isReply,
+  activeMessage,
+}: MessageListProps<TMessage>) => {
+  const { composing, messages, composingList } = useRoomState(roomJID)
+    .room! as IRoom;
+  const [isUserAtBottom, setIsUserAtBottom] = useState(true);
+  const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
+  const [isContentOffset, setIsContentOffset] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [isScrollBlocked, setIsScrollBlocked] = useState(false);
+  const [hasUserScrolled, setHasUserScrolled] = useState(false);
+
+  const flatListRef = useRef<FlatList<IMessage>>(null);
+
+  const addReplyMessages = useMemo(() => {
+    return messages.map((message: IMessage) => {
+      const newMessage = {
+        ...message,
+        reply: messages.filter(
+          (mess: IMessage) =>
+            !!mess.mainMessage &&
+            JSON.parse(mess.mainMessage).id === message.id &&
+            !mess.deleted &&
+            !mess.isDeleted
+        ),
+      };
+      return newMessage;
+    });
+  }, [messages]);
+
+  const memoizedMessages = useMemo(() => {
+    const nonDeletedMessages = addReplyMessages.filter(
+      (item: IMessage) => !item.deleted && !item.isDeleted
+    );
+
+    let filtered: IMessage[];
+    if (isReply) {
+      filtered = nonDeletedMessages.filter(
+        (item: IMessage) =>
+          item.roomJid === roomJID &&
+          item.isReply &&
+          item.isReply === 'true' &&
+          item.mainMessage &&
+          JSON.parse(item.mainMessage).id === activeMessage?.id
+      );
+    } else {
+      filtered = nonDeletedMessages.filter(
+        (item: IMessage) =>
+          item.showInChannel === 'true' ||
+          ((!item.isReply || item.isReply === 'false') && !item.mainMessage)
+      );
+    }
+
+    // Explicit chronological sort by stanza-id timestamp (microseconds-
+    // since-epoch encoded in the id). Without this, MAM history that
+    // streams in across multiple ticks visibly reorders itself:
+    // insertMessageWithDelimiter inserts new arrivals at the slot
+    // matching their date.toString() comparison, but redux state can
+    // emit intermediate snapshots between dispatches, so the FlatList
+    // briefly renders messages out-of-order until the final batch
+    // settles. Sorting here makes each render a stable, ordered view —
+    // even mid-stream — so the user sees them appear from oldest to
+    // newest with no swap animation.
+    const sorted = filtered.slice().sort((a, b) => {
+      // Pull a numeric timestamp out of the id (server stamps a
+      // microsecond timestamp into the stanza-id) — fallback to the
+      // `date` ISO string when id isn't numeric (e.g. delimiter rows).
+      const aNum = Number(a?.id) || new Date(a?.date as any).getTime() || 0;
+      const bNum = Number(b?.id) || new Date(b?.date as any).getTime() || 0;
+      return aNum - bNum;
+    });
+    return sorted;
+  }, [addReplyMessages, isReply, roomJID, activeMessage]);
+
+  const handleLoadMore = useCallback(async () => {
+    console.log('🟠 [MessageList] handleLoadMore fired', {
+      loading,
+      isLoadingMore,
+      msgCount: memoizedMessages.length,
+      isScrollBlocked,
+    });
+    if (
+      loading ||
+      isLoadingMore ||
+      !memoizedMessages.length ||
+      isScrollBlocked
+    ) {
+      console.log('🟠 [MessageList] handleLoadMore gated out');
+      return;
+    }
+
+    const oldestMessage = memoizedMessages[0];
+    if (!oldestMessage || !oldestMessage.id) {
+      console.log('🟠 [MessageList] no oldest msg');
+      return;
+    }
+
+    setIsLoadingMore(true);
+    setIsScrollBlocked(true);
+
+    try {
+      console.log('🟠 [MessageList] calling loadMoreMessages', {
+        room: oldestMessage.roomJid || roomJID,
+        beforeId: Number(oldestMessage.id),
+        oldestId: oldestMessage.id,
+      });
+      await loadMoreMessages(
+        oldestMessage.roomJid || roomJID,
+        15,
+        Number(oldestMessage.id)
+      );
+      console.log('🟠 [MessageList] loadMoreMessages returned');
+    } catch (error) {
+      console.error('🔴 [MessageList] loadMoreMessages threw:', error);
+    } finally {
+      setTimeout(() => {
+        setIsLoadingMore(false);
+        setIsScrollBlocked(false);
+      }, 500);
+    }
+  }, [
+    memoizedMessages,
+    loadMoreMessages,
+    loading,
+    isLoadingMore,
+    isScrollBlocked,
+    roomJID,
+  ]);
+
+  const dataMessages = useMemo(() => {
+    return memoizedMessages.slice().reverse();
+  }, [memoizedMessages]);
+
+  const renderMessage = useCallback(
+    ({ item, index }: { item: IMessage; index: number }) => {
+      const messageDate = new Date(item.date).toDateString();
+      let showDateLabel = false;
+
+      const nextMessage =
+        index < dataMessages.length - 1 ? dataMessages[index + 1] : null;
+      const nextMessageDate = nextMessage
+        ? new Date(nextMessage.date).toDateString()
+        : null;
+
+      if (!nextMessage || messageDate !== nextMessageDate) {
+        showDateLabel = true;
+      }
+
+      return (
+        <MessageContainer
+          CustomMessage={CustomMessage}
+          CustomDaySeparator={CustomDaySeparator}
+          CustomNewMessageLabel={CustomNewMessageLabel}
+          message={item}
+          activeMessage={activeMessage}
+          config={config}
+          walletAddress={user.xmppUsername || user.walletAddress}
+          isReply={isReply}
+          showDateLabel={showDateLabel}
+        />
+      );
+    },
+    [
+      activeMessage,
+      config,
+      user.xmppUsername,
+      user.walletAddress,
+      isReply,
+      memoizedMessages.length,
+    ]
+  );
+
+  const scrollToBottom = useCallback(() => {
+    if (flatListRef.current) {
+      flatListRef.current.scrollToOffset({
+        offset: 0,
+        animated: true,
+      });
+    }
+  }, [flatListRef]);
+
+  const handleContentSizeChange = useCallback(() => {
+    if (isContentOffset) {
+      scrollToBottom();
+      setIsContentOffset(false);
+    }
+    if (!isLoadingMore && flatListRef.current && isUserAtBottom) {
+      scrollToBottom();
+    } else if (!isLoadingMore && hasUserScrolled) {
+      setShowNewMessageIndicator(true);
+    }
+  }, [isUserAtBottom, scrollToBottom, isLoadingMore, hasUserScrolled]);
+
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const contentOffset = event.nativeEvent.contentOffset.y;
+
+      Keyboard.dismiss();
+
+      if (contentOffset > 150 && !hasUserScrolled) {
+        setHasUserScrolled(true);
+      }
+
+      if (contentOffset < 150) {
+        setIsContentOffset(true);
+        setShowNewMessageIndicator(false);
+        setIsUserAtBottom(true);
+      } else {
+        setIsContentOffset(false);
+        if (hasUserScrolled) {
+          setShowNewMessageIndicator(true);
+        }
+        setIsUserAtBottom(false);
+      }
+    },
+    [hasUserScrolled]
+  );
+
+  const handleLayout = () => {
+    setIsContentOffset(true);
+    setIsUserAtBottom(true);
+  };
+
+  const handleNewMessageIndicatorPress = () => {
+    setShowNewMessageIndicator(false);
+    setIsUserAtBottom(true);
+    scrollToBottom();
+  };
+
+  useEffect(() => {
+    setHasUserScrolled(false);
+    setShowNewMessageIndicator(false);
+    setIsUserAtBottom(true);
+  }, [roomJID]);
+
+  const BackgroundImage = useMemo(() => {
+    const image = config?.backgroundChat?.image;
+
+    if (image) {
+      if (typeof image === 'function') {
+        const SvgComponent = image as React.FC<React.SVGProps<SVGSVGElement>>;
+        return <SvgComponent width="100%" />;
+      } else {
+        return <Image source={image as ImageSourcePropType} />;
+      }
+    }
+
+    return <View />;
+  }, [config?.backgroundChat?.image]);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: config?.backgroundChat?.color || '#F3F6FC' },
+      ]}
+    >
+      <View style={styles.backgroundImageContainer}>{BackgroundImage}</View>
+      {activeMessage && (
+        <View>
+          {CustomMessage && (
+            <CustomMessage
+              message={activeMessage}
+              isUser={activeMessage.user.id === user.walletAddress}
+              isReply={isReply}
+            />
+          )}
+          <TreadLabel reply={memoizedMessages.length} colors={config?.colors} />
+        </View>
+      )}
+      <FlatList
+        ref={flatListRef}
+        data={memoizedMessages.slice().reverse()}
+        renderItem={renderMessage}
+        keyExtractor={(item) => item.id.toString()}
+        onEndReached={handleLoadMore}
+        onScroll={handleScroll}
+        onContentSizeChange={handleContentSizeChange}
+        onEndReachedThreshold={0.1}
+        scrollEventThrottle={16}
+        onLayout={handleLayout}
+        inverted={true}
+        contentContainerStyle={styles.flatListContent}
+        ListFooterComponent={
+          loading && memoizedMessages.length > 15 ? (
+            <Loader color={config?.colors?.primary} />
+          ) : null
+        }
+      />
+      {showNewMessageIndicator && (
+        <TouchableOpacity
+          style={[
+            styles.newMessageIndicator,
+            { backgroundColor: config?.colors?.secondary },
+          ]}
+          onPress={handleNewMessageIndicatorPress}
+        >
+          <ArowDownIcon />
+        </TouchableOpacity>
+      )}
+      {config?.customTypingIndicator?.enabled && composing && (
+        <CustomTypingIndicator
+          usersTyping={composingList || ['User']}
+          text={config.customTypingIndicator.text}
+          position={config.customTypingIndicator.position || 'bottom'}
+          styles={config.customTypingIndicator.styles}
+          customComponent={config.customTypingIndicator.customComponent}
+          isVisible={composing}
+        />
+      )}
+
+      {!config?.customTypingIndicator?.enabled &&
+        config?.disableHeader &&
+        composing && <Composing usersTyping={composingList || ['User']} />}
+    </View>
+  );
+};
+
+export default MessageList;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
+  flatListContent: {
+    paddingHorizontal: 10,
+    paddingBottom: 10,
+  },
+  messageList: {
+    paddingHorizontal: 10,
+    flexGrow: 1,
+    backgroundColor: '#434343',
+  },
+  backgroundImageContainer: {
+    width: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+  },
+  image: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+  },
+  newMessageIndicator: {
+    position: 'absolute',
+    width: 40,
+    height: 40,
+    bottom: 20,
+    right: 20,
+    backgroundColor: '#007AFF',
+    padding: 10,
+    borderRadius: 20,
+  },
+  newMessageText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+});

package/src/components/MainComponents/NoMessagesPlaceholder.tsx

@@ -0,0 +1,49 @@
+import { Text, View } from 'react-native';
+import { NoMessages } from '../../assets/icons';
+
+const NoMessagesPlaceholder = () => {
+  return (
+    <View
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <View style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {/* <NoMessages /> */}
+        <View
+          style={{
+            flexDirection: 'column',
+            gap: 8,
+            padding: 16,
+            justifyContent: 'center',
+          }}
+        >
+          <Text
+            style={{
+              color: '#a3a3a3',
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: '600',
+            }}
+          >
+            This chat is empty
+          </Text>
+          <Text
+            style={{
+              color: '#a3a3a3',
+              textAlign: 'center',
+              fontSize: 14,
+              fontWeight: '400',
+            }}
+          >
+            Be the first one to start it.
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default NoMessagesPlaceholder;