@ethora/chat-component-rn 26.4.1

package/src/components/MainComponents/ChatWrapper.tsx

@@ -0,0 +1,318 @@
+import React, {FC, useEffect, useMemo, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import ChatRoom from './ChatRoom';
+import {
+  setActiveModal,
+  setConfig,
+  setDeleteModal,
+  setStoreClient,
+} from '../../roomStore/chatSettingsSlice';
+import {ChatWrapperBox} from '../styled/ChatWrapperBox';
+import {Overlay, StyledModal} from '../styled/MediaModal';
+import {Message} from '../MessageBubble/Message';
+import {IConfig, IRoom, MessageProps, ModalType, User} from '../../types/types';
+import {useXmppClient} from '../../context/xmppProvider';
+import LoginForm from '../AuthForms/Login';
+import {RootState} from '../../roomStore';
+import Loader from '../styled/Loader';
+import {
+  setCurrentRoom,
+  setEditAction,
+  setIsLoading,
+  setLastViewedTimestamp,
+} from '../../roomStore/roomsSlice';
+import {refresh} from '../../networking/apiClient';
+import RoomList from './RoomList';
+import {StyledLoaderWrapper} from '../styled/StyledComponents';
+import Modal from '../Modals/Modal/Modal';
+import ThreadWrapper from '../Thread/ThreadWrapper';
+import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
+import {useChatSettingState} from '../../hooks/useChatSettingState';
+import {Text} from 'react-native';
+import {pushLog as devPushLog} from '../../utils/devLogger';
+
+interface ChatWrapperProps {
+  token?: string;
+  room?: IRoom;
+  loginData?: {email: string; password: string};
+  MainComponentStyles?: React.CSSProperties; //change to particular types
+  CustomMessageComponent?: React.ComponentType<MessageProps>;
+  config?: IConfig;
+  roomJID?: string;
+}
+
+const ChatWrapper: FC<ChatWrapperProps> = ({
+  MainComponentStyles,
+  CustomMessageComponent,
+  room,
+  config,
+  roomJID,
+}) => {
+  const {
+    user,
+    activeModal,
+    deleteModal,
+    client: storedClient,
+  } = useChatSettingState();
+
+  const [isInited, setInited] = useState(false);
+  const [showModal, setShowModal] = useState(false);
+  // const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
+
+  const [isChatVisible, setIsChatVisible] = useState(false);
+  const [isSmallScreen, setIsSmallScreen] = useState(false);
+
+  const handleItemClick = (value: boolean) => {
+    setIsChatVisible(value);
+  };
+
+  const dispatch = useDispatch();
+  const {
+    client,
+    initializeClient,
+    setClient,
+    providerBootstrapStatus,
+    initMode,
+  } = useXmppClient();
+
+  const {rooms, activeRoomJID} = useSelector((state: RootState) => state.rooms);
+
+  const activeMessage = useMemo(() => {
+    if (activeRoomJID) {
+      return rooms[activeRoomJID]?.messages?.find(
+        message => message?.activeMessage,
+      );
+    }
+  }, [rooms, activeRoomJID]);
+
+  const handleChangeChat = (chat: IRoom) => {
+    dispatch(setCurrentRoom({roomJID: chat.jid}));
+    activeRoomJID !== chat.jid &&
+      dispatch(setIsLoading({chatJID: chat.jid, loading: true}));
+    dispatch(setEditAction({isEdit: false}));
+    handleItemClick(true);
+  };
+
+  const handleDeleteClick = () => {
+    if (!client || !deleteModal?.roomJid || !deleteModal?.messageId) {
+      dispatch(setDeleteModal({isDeleteModal: false}));
+      return;
+    }
+    client.deleteMessageStanza(deleteModal.roomJid, deleteModal.messageId);
+    dispatch(setDeleteModal({isDeleteModal: false}));
+  };
+
+  const handleCloseDeleteModal = () => {
+    dispatch(setDeleteModal({isDeleteModal: false}));
+  };
+
+  useEffect(() => {
+    return () => {
+      if (client && user.xmppPassword === '') {
+        console.log('closing client');
+        client.close();
+        setClient(null);
+      }
+    };
+  }, [user.xmppPassword]);
+
+  // Tell the XMPP client which room is currently active so the QoS
+  // scheduler can prioritize its history fetches.
+  useEffect(() => {
+    if (!client) {return;}
+    client.setActiveRoomJid?.(activeRoomJID || null);
+  }, [client, activeRoomJID]);
+
+  useEffect(() => {
+    if (roomJID) {
+      dispatch(setCurrentRoom({roomJID: roomJID}));
+    }
+
+    const initXmmpClient = async () => {
+      // Only sync config to redux if we have one — passing `undefined`
+      // wipes whatever XmppProvider already set up.
+      if (config) {dispatch(setConfig(config));}
+      try {
+        const hasUser =
+          !!user?.defaultWallet?.walletAddress &&
+          user?.defaultWallet.walletAddress !== '' &&
+          !!user?.xmppPassword;
+
+        // initBeforeLoad path — provider owns auth + xmpp connect; we just wait.
+        if (config?.initBeforeLoad && initMode === 'provider') {
+          if (providerBootstrapStatus === 'failed') {
+            devPushLog('error', 'ChatWrapper: bootstrap failed');
+            setShowModal(true);
+            setInited(false);
+            return;
+          }
+          if (providerBootstrapStatus !== 'ready') {
+            // 'idle' or 'running' → just wait; effect will re-run when status flips.
+            devPushLog(
+              'rn',
+              `ChatWrapper: waiting for provider (${providerBootstrapStatus})`
+            );
+            return;
+          }
+          // ready — fall through to client wiring below
+        }
+
+        if (!hasUser) {
+          // No user yet. In initBeforeLoad mode this is normal during the
+          // bootstrap window; show the loader (no modal). In legacy mode
+          // it's an error.
+          if (config?.initBeforeLoad) {
+            devPushLog('rn', 'ChatWrapper: no user yet, awaiting provider');
+            setShowModal(false);
+            return;
+          }
+          devPushLog('error', 'ChatWrapper: no user (legacy login path)');
+          setShowModal(true);
+          return;
+        }
+
+        // We have a user. Modal should be down.
+        setShowModal(false);
+
+        if (!client && !storedClient) {
+          devPushLog('rn', 'ChatWrapper: initing xmpp client (legacy path)');
+          await initializeClient(
+            user.xmppUsername || user.defaultWallet?.walletAddress,
+            user.xmppPassword,
+            config?.xmppSettings,
+          ).then(c => {
+            c.getRoomsStanza().then(() => {
+              c.getChatsPrivateStoreRequestStanza();
+              dispatch(setStoreClient(c));
+              setClient(c);
+            });
+          });
+          setInited(true);
+          if (config?.refreshTokens?.enabled) {refresh();}
+        } else if (storedClient) {
+          devPushLog('rn', 'ChatWrapper: reusing storedClient');
+          setClient(storedClient);
+          if (!activeRoomJID) {
+            storedClient.getRoomsStanza().then(() => {
+              storedClient.getChatsPrivateStoreRequestStanza();
+            });
+          }
+          setInited(true);
+          if (config?.refreshTokens?.enabled) {refresh();}
+        } else if (client) {
+          devPushLog('rn', 'ChatWrapper: reusing provider client');
+          if (!activeRoomJID) {
+            client.getRoomsStanza().then(() => {
+              client.getChatsPrivateStoreRequestStanza();
+            });
+          }
+          client.getChatsPrivateStoreRequestStanza();
+          setInited(true);
+          if (config?.refreshTokens?.enabled) {refresh();}
+        }
+
+        dispatch(setIsLoading({loading: false}));
+      } catch (error) {
+        devPushLog('error', 'ChatWrapper: init failed', error);
+        setShowModal(true);
+        setInited(false);
+        dispatch(setIsLoading({loading: false}));
+      }
+    };
+
+    initXmmpClient();
+  }, [
+    user.xmppPassword,
+    user.defaultWallet,
+    providerBootstrapStatus,
+    initMode,
+    config?.initBeforeLoad,
+  ]);
+
+  // Skip the legacy email/password LoginForm entirely when XmppProvider
+  // is driving auth via initBeforeLoad — the bootstrap effect will
+  // populate the user shortly. Showing LoginForm here causes a flicker
+  // and (worse) a stale form that races against the in-flight bootstrap.
+  if (
+    user.xmppPassword === '' &&
+    user.xmppUsername === '' &&
+    !config?.initBeforeLoad
+  )
+    {return <LoginForm config={config} />;}
+
+  // Mirror the web layout: when `disableRooms` is false and the
+  // consumer didn't preselect a `roomJID`, show the RoomList until the
+  // user picks one; then show the chat with a back button to return to
+  // the list. With `roomJID` or `disableRooms`, skip the list entirely.
+  const showRoomList =
+    !config?.disableRooms && !roomJID && !activeRoomJID;
+
+  return (
+    <>
+      {showModal && (
+        <Overlay>
+          <StyledModal>
+            <Text>There was an error. Please, refresh the page</Text>
+          </StyledModal>
+        </Overlay>
+      )}
+      <>
+        {isInited ? (
+          <ChatWrapperBox
+            style={{
+              ...MainComponentStyles,
+            }}>
+            {showRoomList ? (
+              <RoomList
+                chats={Object.values(rooms)}
+                onRoomClick={handleChangeChat}
+              />
+            ) : (
+              <ChatWrapperBox
+                style={{
+                  ...MainComponentStyles,
+                }}>
+                <ChatRoom
+                  CustomMessageComponent={CustomMessageComponent || Message}
+                  // Only show the back button when there's a room list to
+                  // return to. In single-room mode (`roomJID` preselected
+                  // by the consumer) or when the consumer disabled the
+                  // list (`disableRooms`), there's nowhere to go back to,
+                  // so we omit the handler and ChatHeader renders without
+                  // the back arrow.
+                  handleBackClick={
+                    roomJID || config?.disableRooms
+                      ? undefined
+                      : () => {
+                          dispatch(setCurrentRoom({ roomJID: '' }));
+                        }
+                  }
+                />
+              </ChatWrapperBox>
+            )}
+            {/*
+              Mount the active-modal renderer so ChatHeader's onPress
+              (dispatch setActiveModal(CHAT_PROFILE)) actually surfaces
+              a modal. Without this, tapping the header was a no-op:
+              redux state flipped but nothing was listening. Web's
+              ChatWrapper mounts the same component (web ChatWrapper
+              lines 331-336).
+            */}
+            <Modal
+              modal={activeModal}
+              setOpenModal={(value?: ModalType) =>
+                dispatch(setActiveModal(value))
+              }
+            />
+          </ChatWrapperBox>
+        ) : (
+          <StyledLoaderWrapper>
+            <Loader color={config?.colors?.primary} />
+          </StyledLoaderWrapper>
+        )}
+      </>
+    </>
+  );
+};
+
+export {ChatWrapper};

package/src/components/MainComponents/ChooseChatMessage.tsx

@@ -0,0 +1,44 @@
+import { styled } from 'styled-components/native';
+import { NoSelectedChatIcon } from '../../assets/icons';
+
+export const ChooseChatMessageContainer = styled.View`
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+export const ChooseChatMessageContainerBoxText = styled.View`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+`;
+
+export const ChooseChatTitle = styled.Text`
+  font-size: 16px;
+  color: #141414;
+  font-weight: 600;
+`;
+
+export const ChooseChatDescription = styled.Text`
+  font-size: 14px;
+  color: #141414;
+`;
+
+export const ChooseChatMessage = () => {
+  return (
+    <ChooseChatMessageContainer>
+      <NoSelectedChatIcon />
+      <ChooseChatMessageContainerBoxText>
+        <ChooseChatTitle>Start a Conversation</ChooseChatTitle>
+        <ChooseChatDescription>
+          Choose a chat to start messaging.
+        </ChooseChatDescription>
+      </ChooseChatMessageContainerBoxText>
+    </ChooseChatMessageContainer>
+  );
+};

package/src/components/MainComponents/ConnectionBanner.tsx

@@ -0,0 +1,33 @@
+/** @format */
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+const ConnectionBanner: React.FC = () => {
+  return (
+    <View style={styles.bannerContainer}>
+      <Text style={styles.bannerText}>Connection lost. Retrying...</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bannerContainer: {
+    backgroundColor: '#ff9800',
+    padding: 8,
+    paddingHorizontal: 16,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000,
+  },
+  bannerText: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+});
+
+export default ConnectionBanner;
+

package/src/components/MainComponents/EditWrapper.tsx

@@ -0,0 +1,72 @@
+import React, { FC } from 'react';
+import { EditIcon } from '../../assets/icons';
+import { styled } from 'styled-components/native';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+export const EditContainer = styled.View`
+  background-color: #0052cd0d;
+  padding: 12px 24px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+export const EditInfoBox = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const EditTitle = styled.Text`
+  margin: 0px;
+  color: rgb(140, 140, 140);
+  text-align: start;
+  font-size: 12px;
+  padding-bottom: 4px;
+`;
+
+export const EditText = styled.Text`
+  margin: 0px;
+  font-size: 16px;
+  text-align: start;
+`;
+
+interface EditWrapperProps {
+  text: string;
+  onClose: () => void;
+}
+
+export const EditWrapper: FC<EditWrapperProps> = ({ text, onClose }) => {
+  console.log('text', text);
+  return (
+    <EditContainer>
+      <EditInfoBox>
+        <View
+          style={{
+            padding: 9,
+            paddingRight: 20,
+            paddingLeft: 0,
+            borderRightWidth: 1,
+            borderRightColor: '#0052CD',
+            borderStyle: 'solid',
+          }}
+        >
+          <EditIcon color="#0052CD" />
+        </View>
+        <View style={{ paddingLeft: 20 }}>
+          <EditTitle>Edit Message</EditTitle>
+          <EditText>{text}</EditText>
+        </View>
+      </EditInfoBox>
+      <TouchableOpacity
+        style={{
+          // background: "none",
+          // border: "none",
+          borderRadius: 8,
+        }}
+        onPress={onClose}
+      >
+        <Text style={{ fontSize: 24, color: '#888' }}>&times;</Text>
+      </TouchableOpacity>
+    </EditContainer>
+  );
+};

package/src/components/MainComponents/LoginWrapper.tsx

@@ -0,0 +1,134 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import {IConfig, MessageProps} from '../../types/types';
+import {ChatWrapper} from './ChatWrapper';
+import {RootState} from '../../roomStore';
+import {useDispatch, useSelector} from 'react-redux';
+import {setUser} from '../../roomStore/chatSettingsSlice';
+import {loginEmail} from '../../networking/api-requests/auth.api';
+import {OrDelimiter} from '../styled/StyledComponents';
+import {ButtonText, Container, CustomButton, Message} from './RNStyled';
+import {Text} from 'react-native';
+
+interface LoginWrapperProps {
+  user?: {email: string; password: string};
+  MainComponentStyles?: React.CSSProperties;
+  CustomMessageComponent?: React.ComponentType<MessageProps>;
+  config?: IConfig;
+  roomJID?: string;
+}
+
+const LoginWrapper: React.FC<LoginWrapperProps> = ({...props}) => {
+  const [showModal, setShowModal] = useState(false);
+
+  const {user} = useSelector((state: RootState) => state.chatSettingStore);
+
+  const loginUserFunction = useCallback(async () => {
+    try {
+      const authData = await loginEmail(
+        props?.user?.email || 'yukiraze9@gmail.com',
+        props?.user?.password || 'Qwerty123',
+      );
+
+      return {
+        ...authData.data.user,
+        token: authData.data.token,
+        refreshToken: authData.data.refreshToken,
+      };
+    } catch (error) {
+      console.error('Login failed:', error);
+      return null;
+    }
+  }, []);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    // When config.initBeforeLoad is enabled, the XmppProvider owns user
+    // resolution end-to-end. Skip the legacy login paths here so we don't
+    // race against the provider's resolveInitBeforeLoadUser pipeline.
+    if (props?.config?.initBeforeLoad) {
+      return;
+    }
+
+    if (props?.config?.userLogin?.enabled && props?.config?.userLogin?.user) {
+      dispatch(setUser(props.config.userLogin.user));
+      return;
+    }
+
+    //if no login config - default user login
+
+    if (
+      !props.config?.googleLogin &&
+      !props.config?.defaultLogin &&
+      !props.config?.jwtLogin &&
+      !props.config?.userLogin &&
+      !props.config?.customLogin &&
+      user.xmppUsername === ''
+    ) {
+      const defaultLogin = async () => {
+        try {
+          const loginData = await loginUserFunction();
+          if (loginData) {
+            dispatch(setUser(loginData));
+          }
+        } catch (error) {
+          console.log('error with default login', error);
+          setShowModal(true);
+        }
+      };
+      defaultLogin();
+    }
+    //if google - show login.tsx and process user there (there will be dispatch, set user)
+    //if only ethora - show login with only ethora
+    return () => {
+      //clear
+    };
+  }, []);
+
+  return (
+    // <>
+    //   {showModal ? (
+    //     <View
+    //       style={{
+    //         ...props.MainComponentStyles,
+    //         display: 'flex',
+    //         justifyContent: 'center',
+    //         alignItems: 'center',
+    //         flexDirection: 'column',
+    //         padding: '20px',
+    //         gap: '8px',
+    //       }}
+    //     >
+    //       <p>Error on loading chat. Please, try again later</p>
+    //       <OrDelimiter>Or</OrDelimiter>
+    //       <Button onClick={() => setShowModal(false)} style={{ width: '100%' }}>
+    //         Enter with default account
+    //       </Button>
+    //     </View>
+    //   ) : user && user.xmppPassword !== '' ? (
+    //     <ChatWrapper {...props} />
+    //   ) : (
+    //     <LoginForm {...props} />
+    //   )}
+    // </>
+    <>
+      {showModal ? (
+        <Container>
+          <Message>Error on loading chat. Please, try again later</Message>
+          <OrDelimiter>Or</OrDelimiter>
+          <CustomButton onPress={() => setShowModal(false)}>
+            <ButtonText>Enter with default account</ButtonText>
+          </CustomButton>
+        </Container>
+      ) : (
+        // CRITICAL: forward props so `ChatWrapper` sees `config` (and
+        // therefore `initBeforeLoad`, `xmppSettings`, `refreshTokens`,
+        // etc.). Without this, ChatWrapper's effect can't tell that
+        // XmppProvider owns bootstrap and races against it.
+        <ChatWrapper {...props} />
+      )}
+    </>
+  );
+};
+
+export default LoginWrapper;

package/src/components/MainComponents/MediaMessage.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { IMessage } from '../../types/types';
+import FileDownload from '../styled/UnsupportedType';
+import CustomMessageImage from '../styled/MessageImage';
+import CustomMessageVideo from '../styled/VideoMessage';
+import AudioMessage from '../styled/AudioMessage';
+import { Text } from 'react-native';
+
+interface MediaMessageProps {
+  mimeType?: string;
+  message?: IMessage;
+  location?: string;
+  messageText?: string;
+}
+
+const MediaMessage: React.FC<MediaMessageProps> = ({
+  mimeType,
+  location,
+  messageText,
+  message,
+}) => {
+  if (mimeType)
+    {switch (true) {
+      case mimeType.startsWith('image/'):
+        return (
+          <CustomMessageImage
+            fileName={message?.fileName || '000132001'}
+            fileURL={messageText || ''}
+            mimetype={mimeType}
+          />
+        );
+      case mimeType.startsWith('video/'):
+        return (
+          <CustomMessageVideo
+            fileName={message?.fileName || '000132001'}
+            fileURL={location || ''}
+            mimetype={mimeType}
+          />
+        );
+      case mimeType.startsWith('audio/') ||
+        mimeType.includes('application/octet-stream'):
+        return <AudioMessage src={location || ''} />;
+      default:
+        return (
+          <FileDownload
+            fileURL={location ? location : ''}
+            fileName={location?.split('/')?.pop() || 'MediaFile'}
+            mimetype={mimeType}
+          />
+        );
+    }}
+  return <Text>Unsupported media type</Text>;
+};
+
+export default MediaMessage;