@ethora/chat-component-rn 26.4.1

package/src/hooks/useChatWrapperInit.ts

@@ -0,0 +1,266 @@
+/** @format */
+
+import { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { IConfig } from '../types/types';
+import XmppClient from '../networking/xmppClient';
+import { AppDispatch, RootState } from '../roomStore';
+import { useXmppClient } from '../context/xmppProvider';
+import { chatAutoEnterer } from '../helpers/chatAutoEnterer';
+import { initRoomsPresence } from '../helpers/initRoomsPresence';
+import { updatedChatLastTimestamps } from '../helpers/updatedChatLastTimestamps';
+import { updateMessagesTillLast } from '../helpers/updateMessagesTillLast';
+import { refresh } from '../networking/apiClient';
+import { setLangSource, setConfig } from '../roomStore/chatSettingsSlice';
+import { setIsLoading } from '../roomStore/roomsSlice';
+import { useRoomState } from './useRoomState';
+import { useChatSettingState } from './useChatSettingState';
+import { isChatIdPresentInArray } from '../helpers/isChatIdPresentInArray';
+import useGetNewArchRoom from './useGetNewArchRoom';
+import { getRoomsWithRetry } from '../helpers/getRoomsWithRetry';
+
+interface useChatWrapperInitProps {
+  roomJID: string | null | undefined;
+  wasAutoSelected: boolean;
+  config: IConfig;
+}
+
+interface useChatWrapperInitResult {
+  inited: boolean;
+  isRetrying: boolean | 'norooms';
+  showModal: boolean;
+  setInited: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
+  client: XmppClient | null;
+  setClient: React.Dispatch<React.SetStateAction<XmppClient | null>>;
+  isConnectionLost: boolean;
+}
+
+const useChatWrapperInit = ({
+  roomJID,
+  wasAutoSelected,
+  config,
+}: useChatWrapperInitProps): useChatWrapperInitResult => {
+  const dispatch = useDispatch<AppDispatch>();
+  const [inited, setInited] = useState<boolean>(false);
+  const [showModal, setShowModal] = useState<boolean>(false);
+  const [isConnectionLost, setConnectionLost] = useState<boolean>(false);
+  const [isRetrying, setIsRetrying] = useState<boolean | 'norooms'>(false);
+  const hasSyncedHistoryRef = useRef<boolean>(false);
+
+  const { client, initializeClient, setClient } = useXmppClient();
+  const syncRooms = useGetNewArchRoom();
+
+  const { rooms } = useSelector((state: RootState) => state.rooms);
+  const { roomsList } = useRoomState();
+  const { user } = useChatSettingState();
+
+  useEffect(() => {
+    return () => {
+      if (client && user.xmppPassword === '') {
+        console.log('closing client');
+        client.close();
+        setClient(null);
+      }
+    };
+  }, [user.xmppPassword]);
+
+  const getRoomsWithRertyRequest = async () => {
+    setIsRetrying(true);
+    const retryRooms = await getRoomsWithRetry(
+      client,
+      config,
+      syncRooms,
+      roomJID
+    );
+    if (!retryRooms) {
+      setIsRetrying('norooms');
+      return;
+    }
+    setIsRetrying(false);
+  };
+
+  const loadRooms = async (
+    client: XmppClient,
+    disableLoad: boolean = false
+  ) => {
+    !disableLoad &&
+      dispatch(
+        setIsLoading({ loading: true, loadingText: 'Loading rooms...' })
+      );
+    const rooms = await syncRooms(client, config);
+    dispatch(setIsLoading({ loading: false, loadingText: undefined }));
+    return rooms;
+  };
+
+  useEffect(() => {
+    let retryTimeout: NodeJS.Timeout;
+
+    const initXmmpClient = async () => {
+      if (config?.translates?.enabled && !config?.translates?.translations) {
+        dispatch(setLangSource(config?.translates?.translations));
+      }
+
+      dispatch(setConfig(config));
+      try {
+        if (!user.xmppUsername) {
+          setShowModal(true);
+          console.error('Error, no user');
+        } else {
+          chatAutoEnterer({ roomJID, wasAutoSelected, config, dispatch });
+
+          if (!client) {
+            try {
+              setInited(false);
+              setShowModal(false);
+
+              console.log(' No client, initializing one');
+              const newClient = await initializeClient(
+                user.xmppUsername || user?.defaultWallet?.walletAddress,
+                user?.xmppPassword,
+                config?.xmppSettings,
+                roomsList
+              ).then((client) => {
+                console.log(' Client initialized', client?.status);
+                return client;
+              });
+
+              if (roomsList && Object.keys(roomsList).length > 0) {
+                console.log(
+                  ' Using existing roomsList',
+                  Object.keys(roomsList).length
+                );
+                setInited(true);
+                await initRoomsPresence(newClient, roomsList);
+              } else {
+                if (config?.newArch) {
+                  console.log(' Loading rooms with newArch');
+                  const loadedRooms = await loadRooms(newClient);
+                  console.log(' Loaded rooms', loadedRooms?.length || 0);
+                  if (config?.enableRoomsRetry?.enabled) {
+                    const isSelectedRoomPresent = isChatIdPresentInArray(
+                      roomJID,
+                      loadedRooms
+                    );
+                    console.log(
+                      ' Selected room present?',
+                      isSelectedRoomPresent,
+                      roomJID
+                    );
+                    if (!isSelectedRoomPresent) {
+                      await getRoomsWithRertyRequest();
+                    }
+                  }
+                  setInited(true);
+                } else {
+                  console.log(' Using old arch, getting rooms stanza');
+                  await newClient.getRoomsStanza();
+                }
+              }
+              await newClient
+                .getChatsPrivateStoreRequestStanza()
+                .then(
+                  async (
+                    roomTimestampObject: [jid: string, timestamp: string]
+                  ) => {
+                    console.log(
+                      'Got chats private store',
+                      roomTimestampObject?.length || 0
+                    );
+                    updatedChatLastTimestamps(roomTimestampObject, dispatch);
+                    if (!hasSyncedHistoryRef.current) {
+                      console.log('Updating messages till last');
+                      await updateMessagesTillLast(rooms, newClient);
+                      hasSyncedHistoryRef.current = true;
+                    }
+                    setClient(newClient);
+                    setConnectionLost(false);
+                    console.log('Initialization complete');
+                  }
+                );
+
+              {
+                config?.refreshTokens?.enabled && refresh();
+              }
+            } catch (error) {
+              console.error(' Error during initialization', error);
+              setConnectionLost(true);
+              retryTimeout = setTimeout(initXmmpClient, 5000);
+            }
+          } else {
+            if (config?.newArch) {
+              if (config?.enableRoomsRetry?.enabled) {
+                const isSelectedRoomPresent = isChatIdPresentInArray(
+                  roomJID,
+                  roomsList
+                );
+                console.log(
+                  'Selected room present in existing client?',
+                  isSelectedRoomPresent
+                );
+                if (!isSelectedRoomPresent) {
+                  await getRoomsWithRertyRequest();
+                }
+              }
+            }
+            setInited(true);
+            console.log(' Getting chats private store for existing client');
+            await client
+              .getChatsPrivateStoreRequestStanza()
+              .then(
+                async (
+                  roomTimestampObject: [jid: string, timestamp: string]
+                ) => {
+                  console.log(
+                    'Got chats private store for existing client',
+                    roomTimestampObject?.length || 0
+                  );
+                  updatedChatLastTimestamps(roomTimestampObject, dispatch);
+                  if (!hasSyncedHistoryRef.current) {
+                    console.log(
+                      'Updating messages till last for existing client'
+                    );
+                    await updateMessagesTillLast(rooms, client);
+                    hasSyncedHistoryRef.current = true;
+                  }
+                  setClient(client);
+                  setConnectionLost(false);
+                  console.log(' Initialization complete for existing client');
+                }
+              );
+            {
+              config?.refreshTokens?.enabled && refresh();
+            }
+          }
+        }
+        dispatch(setIsLoading({ loading: false }));
+      } catch (error) {
+        console.error(' Fatal error', error);
+        setShowModal(false);
+        setConnectionLost(true);
+        setInited(false);
+        dispatch(setIsLoading({ loading: false }));
+        retryTimeout = setTimeout(initXmmpClient, 5000);
+      }
+    };
+
+    initXmmpClient();
+
+    return () => {
+      clearTimeout(retryTimeout);
+    };
+  }, [user.xmppPassword, user.xmppUsername]);
+
+  return {
+    client,
+    inited,
+    isRetrying,
+    showModal,
+    isConnectionLost,
+    setClient,
+    setInited,
+    setShowModal,
+  };
+};
+
+export default useChatWrapperInit;

package/src/hooks/useComposing.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useXmppClient } from '../context/xmppProvider';
+import { useSelector } from 'react-redux';
+import { RootState } from '../roomStore';
+import { useChatSettingState } from './useChatSettingState';
+import { IConfig } from '../types/types';
+
+const useComposing = (config?: IConfig) => {
+  const { client } = useXmppClient();
+  const { activeRoomJID } = useSelector((state: RootState) => state.rooms);
+  const { user } = useChatSettingState();
+
+  const sendStartComposing = useCallback(() => {
+    console.log('🟣 [useComposing] start', {
+      hasClient: !!client,
+      room: activeRoomJID,
+      disabled: !!config?.disableTypingIndicator,
+    });
+    if (config?.disableTypingIndicator) {
+      return;
+    }
+    if (client) {
+      client.sendTypingRequestStanza(
+        activeRoomJID || '',
+        `${user.firstName} ${user.lastName}`,
+        true
+      );
+    }
+  }, [activeRoomJID, client, config?.disableTypingIndicator, user.firstName, user.lastName]);
+
+  const sendEndComposing = useCallback(() => {
+    console.log('🟣 [useComposing] end', {
+      hasClient: !!client,
+      room: activeRoomJID,
+    });
+    if (config?.disableTypingIndicator) {
+      return;
+    }
+    if (client) {
+      client.sendTypingRequestStanza(
+        activeRoomJID || '',
+        `${user.firstName} ${user.lastName}`,
+        false
+      );
+    }
+  }, [activeRoomJID, client, config?.disableTypingIndicator, user.firstName, user.lastName]);
+
+  useEffect(() => {
+    const timerId = setTimeout(() => {
+      sendEndComposing();
+    }, 100);
+
+    return () => clearTimeout(timerId);
+  }, [sendEndComposing]);
+
+  return { sendStartComposing, sendEndComposing };
+};
+
+export default useComposing;

package/src/hooks/useCustomTypingIndicator.tsx

@@ -0,0 +1,193 @@
+import { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useChatSettingState } from './useChatSettingState';
+import {
+  generateDefaultText,
+  generateProcessingText,
+} from '../components/styled/StyledInputComponents/CustomTypingIndicator';
+import { RootState } from '../roomStore';
+
+/**
+ * Hook for managing custom typing indicator functionality
+ * Provides utilities for text generation and typing state management
+ */
+export const useCustomTypingIndicator = (roomJID: string) => {
+  const { config } = useChatSettingState();
+  const { rooms } = useSelector((state: RootState) => ({
+    rooms: state.rooms.rooms,
+  }));
+
+  const room = rooms[roomJID];
+  const isComposing = room?.composing || false;
+  const composingList = room?.composingList || [];
+
+  // Generate text based on configuration
+  const getTypingText = useCallback(
+    (customText?: string | ((usersTyping: string[]) => string)) => {
+      if (typeof customText === 'function') {
+        return customText(composingList);
+      } else if (typeof customText === 'string') {
+        return customText;
+      } else {
+        return generateDefaultText(composingList);
+      }
+    },
+    [composingList]
+  );
+
+  // Generate processing text (for AI/processing states)
+  const getProcessingText = useCallback(() => {
+    return generateProcessingText(composingList);
+  }, [composingList]);
+
+  // Check if custom typing indicator is enabled
+  const isCustomTypingEnabled = useMemo(() => {
+    return config?.customTypingIndicator?.enabled || false;
+  }, [config?.customTypingIndicator?.enabled]);
+
+  // Get typing indicator configuration
+  const typingConfig = useMemo(() => {
+    return config?.customTypingIndicator || null;
+  }, [config?.customTypingIndicator]);
+
+  // Check if indicator should be visible
+  const shouldShowIndicator = useMemo(() => {
+    return isComposing && composingList.length > 0;
+  }, [isComposing, composingList.length]);
+
+  // Get position-specific styles
+  const getPositionStyles = useCallback(
+    (position: string) => {
+      const baseStyles = typingConfig?.styles || {};
+
+      switch (position) {
+        case 'top':
+          return {
+            ...baseStyles,
+            position: 'absolute',
+            top: '8px',
+            left: '16px',
+            right: '16px',
+            background: 'rgba(255, 255, 255, 0.95)',
+            padding: '8px 12px',
+            borderRadius: '8px',
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+            backdropFilter: 'blur(10px)',
+          };
+        case 'overlay':
+          return {
+            ...baseStyles,
+            position: 'fixed',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            background: 'rgba(0, 0, 0, 0.8)',
+            color: 'white',
+            padding: '16px 24px',
+            borderRadius: '12px',
+            backdropFilter: 'blur(10px)',
+          };
+        case 'floating':
+          return {
+            ...baseStyles,
+            position: 'fixed',
+            bottom: '80px',
+            right: '20px',
+            background: 'rgba(255, 255, 255, 0.95)',
+            padding: '12px 16px',
+            borderRadius: '20px',
+            boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)',
+            backdropFilter: 'blur(10px)',
+          };
+        case 'bottom':
+        default:
+          return {
+            ...baseStyles,
+            position: 'static',
+            padding: '8px 0',
+          };
+      }
+    },
+    [typingConfig?.styles]
+  );
+
+  return {
+    isComposing,
+    composingList,
+    isCustomTypingEnabled,
+    typingConfig,
+    shouldShowIndicator,
+    getTypingText,
+    getProcessingText,
+    getPositionStyles,
+  };
+};
+
+/**
+ * Utility functions for creating common typing indicator configurations
+ */
+export const createTypingIndicatorConfigs = {
+  // Default typing indicator
+  default: {
+    enabled: true,
+    position: 'bottom' as const,
+  },
+
+  // Processing state indicator
+  processing: {
+    enabled: true,
+    position: 'overlay' as const,
+    text: (usersTyping: string[]) => generateProcessingText(usersTyping),
+    styles: {
+      background: 'rgba(0, 0, 0, 0.8)',
+      color: 'white',
+      fontSize: '16px',
+      fontWeight: '500',
+    },
+  },
+
+  // Floating indicator
+  floating: {
+    enabled: true,
+    position: 'floating' as const,
+    styles: {
+      background: 'rgba(255, 255, 255, 0.95)',
+      color: '#333',
+      fontSize: '14px',
+      fontWeight: '500',
+      boxShadow: '0 4px 16px rgba(0, 0, 0, 0.15)',
+    },
+  },
+
+  // Top positioned indicator
+  top: {
+    enabled: true,
+    position: 'top' as const,
+    styles: {
+      background: 'rgba(255, 255, 255, 0.95)',
+      color: '#555',
+      fontSize: '14px',
+      fontWeight: '500',
+      boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    },
+  },
+
+  // Custom text examples
+  customTexts: {
+    aiProcessing: (usersTyping: string[]) => {
+      const states = ['thinking', 'processing', 'generating answer'];
+      const randomState = states[Math.floor(Math.random() * states.length)];
+      return `${usersTyping[0]} is ${randomState}`;
+    },
+
+    simple: (usersTyping: string[]) => {
+      return `${usersTyping.length} user${usersTyping.length > 1 ? 's' : ''} typing...`;
+    },
+
+    minimal: (usersTyping: string[]) => {
+      return '...';
+    },
+  },
+};
+
+export default useCustomTypingIndicator;

package/src/hooks/useEventHandlers.tsx

@@ -0,0 +1,81 @@
+import { useCallback } from 'react';
+import { IConfig } from '../types/types';
+
+interface MessageSentEvent {
+  message: string;
+  roomJID: string;
+  user: any;
+  messageType: 'text' | 'media';
+  metadata?: any;
+}
+
+interface MessageFailedEvent {
+  message: string;
+  roomJID: string;
+  error: Error;
+  messageType: 'text' | 'media';
+}
+
+interface MessageEditedEvent {
+  messageId: string;
+  newMessage: string;
+  roomJID: string;
+  user: any;
+}
+
+export interface EventHandlersHook {
+  handleMessageSent: (event: MessageSentEvent) => Promise<void>;
+  handleMessageFailed: (event: MessageFailedEvent) => void;
+  handleMessageEdited: (event: MessageEditedEvent) => void;
+}
+
+export const useEventHandlers = (config?: IConfig): EventHandlersHook => {
+  const handleMessageSent = useCallback(
+    async (event: MessageSentEvent) => {
+      try {
+        if (config?.eventHandlers?.onMessageSent) {
+          await config.eventHandlers.onMessageSent(event);
+        }
+      } catch (error) {
+        console.error('Error in message sent handler:', error);
+        throw error;
+      }
+    },
+    [config]
+  );
+
+  const handleMessageFailed = useCallback(
+    (event: MessageFailedEvent) => {
+      try {
+        if (config?.eventHandlers?.onMessageFailed) {
+          config.eventHandlers.onMessageFailed(event);
+        }
+        console.error('Message failed details:', {
+          message: event.message,
+          roomJID: event.roomJID,
+          messageType: event.messageType,
+          error: event.error?.message,
+          timestamp: new Date().toISOString(),
+        });
+      } catch (handlerError) {
+        console.error('Error in message failed handler:', handlerError);
+      }
+    },
+    [config]
+  );
+
+  const handleMessageEdited = useCallback(
+    (event: MessageEditedEvent) => {
+      try {
+        if (config?.eventHandlers?.onMessageEdited) {
+          config.eventHandlers.onMessageEdited(event);
+        }
+      } catch (error) {
+        console.error('Error in message edited handler:', error);
+      }
+    },
+    [config]
+  );
+
+  return { handleMessageSent, handleMessageFailed, handleMessageEdited };
+};

package/src/hooks/useGetNewArchRoom.tsx

@@ -0,0 +1,57 @@
+import { useCallback } from 'react';
+import { useAppDispatch } from './hooks';
+import { useXmppClient } from '../context/xmppProvider';
+import { createRoomFromApi } from '../helpers/createRoomFromApi';
+import { getRooms } from '../networking/api-requests/rooms.api';
+import {
+  addRoomViaApi,
+  setIsLoading,
+  updateUsersSet,
+} from '../roomStore/roomsSlice';
+import { ApiRoom } from '../types/types';
+import { pushSubscriptionService } from '../services/pushSubscriptionService';
+
+const useGetNewArchRoom = () => {
+  const { client } = useXmppClient();
+  const dispatch = useAppDispatch();
+
+  const syncRooms = useCallback(
+    async (client: any, config: any): Promise<ApiRoom[]> => {
+      const rooms = await getRooms();
+      const roomJIDs: string[] = [];
+
+      rooms?.items?.forEach((room) => {
+        const createdRoom = createRoomFromApi(room, config?.xmppSettings?.conference);
+        if (createdRoom) {
+          dispatch(
+            addRoomViaApi({
+              room: createdRoom,
+              xmpp: client,
+            })
+          );
+          if (createdRoom.jid) {
+            roomJIDs.push(createdRoom.jid);
+          }
+        }
+      });
+      dispatch(setIsLoading({ loading: false, loadingText: undefined }));
+      dispatch(updateUsersSet({ rooms: rooms.items || [] }));
+
+      if (client?.client && roomJIDs.length > 0) {
+        const userNick = client.client.jid?.getLocal();
+        await pushSubscriptionService
+          .subscribeToRooms(client.client, roomJIDs, userNick)
+          .catch((error) => {
+            console.error('Failed to subscribe to loaded rooms for push:', error);
+          });
+      }
+
+      return rooms?.items || [];
+    },
+    [dispatch]
+  );
+
+  return syncRooms;
+};
+
+export default useGetNewArchRoom;