@ethora/chat-component-rn 26.5.17 → 26.5.18

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -12,6 +12,7 @@ import {
 import { BurgerMenuIcon } from '../../assets/icons';
 import { IConfig } from '../../types/types';
 import Button from '../styled/Button';
+import { getIconColor } from '../../helpers/getIconColor';
 
 const positionMenu = {
   right: { top: 95, right: 10 },
@@ -104,7 +105,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({
           }}
           color="black"
           unstyled
-          EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+          EndIcon={<BurgerMenuIcon color={getIconColor(config)} />}
           onPress={toggleMenu}
         />
       )}

package/src/components/MainComponents/ChatHeader.tsx

@@ -27,6 +27,7 @@ import { RoomMenu } from '../MenuRoom/MenuRoom';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { View, StyleSheet, Text, Keyboard } from 'react-native';
+import { getIconColor } from '../../helpers/getIconColor';
 
 interface ChatHeaderProps {
   currentRoom: IRoom;
@@ -89,7 +90,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
               style={styles.menuButton}
               color="black"
               unstyled
-              EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+              EndIcon={<BurgerMenuIcon color={getIconColor(config)} />}
               onPress={handleHeaderChatMenu}
             />
           </View>

package/src/components/MainComponents/ChatRoom.tsx

@@ -18,7 +18,8 @@ import ChatHeader from './ChatHeader';
 import NoMessagesPlaceholder from './NoMessagesPlaceholder';
 import NewChatModal from '../Modals/NewChatModal/NewChatModal';
 import { EditWrapper } from './EditWrapper';
-import { NoSelectedChatIcon } from '../../assets/icons';
+import { EmptyChatIllustration } from '../../assets/EmptyChatIllustration';
+import { getIconColor } from '../../helpers/getIconColor';
 import { ChooseChatMessage } from './ChooseChatMessage';
 import { useRoomUrl } from '../../hooks/useRoomUrl';
 import { useSendMessage } from '../../hooks/useSendMessage';
@@ -320,7 +321,9 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   alignItems: 'center',
                 }}
               >
-                <NoSelectedChatIcon />
+                <EmptyChatIllustration
+                  color={getIconColor(configWithEventHandlers)}
+                />
               </View>
             ) : !roomMessages || roomMessages.length === 0 ? (
               <View

package/src/components/MainComponents/ChooseChatMessage.tsx

@@ -1,5 +1,7 @@
 import { styled } from 'styled-components/native';
-import { NoSelectedChatIcon } from '../../assets/icons';
+import { EmptyChatIllustration } from '../../assets/EmptyChatIllustration';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
 
 export const ChooseChatMessageContainer = styled.View`
   height: 100%;
@@ -30,9 +32,10 @@ export const ChooseChatDescription = styled.Text`
 `;
 
 export const ChooseChatMessage = () => {
+  const { config } = useChatSettingState();
   return (
     <ChooseChatMessageContainer>
-      <NoSelectedChatIcon />
+      <EmptyChatIllustration color={getIconColor(config)} />
       <ChooseChatMessageContainerBoxText>
         <ChooseChatTitle>Start a Conversation</ChooseChatTitle>
         <ChooseChatDescription>

package/src/components/MainComponents/EditWrapper.tsx

@@ -2,9 +2,11 @@ import React, { FC } from 'react';
 import { EditIcon } from '../../assets/icons';
 import { styled } from 'styled-components/native';
 import { Text, TouchableOpacity, View } from 'react-native';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
 
-export const EditContainer = styled.View`
-  background-color: #0052cd0d;
+export const EditContainer = styled.View<{ accentColor?: string }>`
+  background-color: ${({ accentColor }) => (accentColor || '#0052cd') + '0d'};
   padding: 12px 24px;
   flex-direction: row;
   align-items: center;
@@ -36,9 +38,10 @@ interface EditWrapperProps {
 }
 
 export const EditWrapper: FC<EditWrapperProps> = ({ text, onClose }) => {
-  console.log('text', text);
+  const { config } = useChatSettingState();
+  const iconColor = getIconColor(config);
   return (
-    <EditContainer>
+    <EditContainer accentColor={iconColor}>
       <EditInfoBox>
         <View
           style={{
@@ -46,11 +49,11 @@ export const EditWrapper: FC<EditWrapperProps> = ({ text, onClose }) => {
             paddingRight: 20,
             paddingLeft: 0,
             borderRightWidth: 1,
-            borderRightColor: '#0052CD',
+            borderRightColor: iconColor,
             borderStyle: 'solid',
           }}
         >
-          <EditIcon color="#0052CD" />
+          <EditIcon color={iconColor} />
         </View>
         <View style={{ paddingLeft: 20 }}>
           <EditTitle>Edit Message</EditTitle>

package/src/components/MainComponents/MessageList.tsx

@@ -27,6 +27,7 @@ import { useRoomState } from '../../hooks/useRoomState';
 import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
+import { getIconColor } from '../../helpers/getIconColor';
 
 interface MessageListProps<TMessage extends IMessage> {
   CustomMessage?: React.ComponentType<{
@@ -453,7 +454,7 @@ const MessageList = <TMessage extends IMessage>({
         <TouchableOpacity
           style={[
             styles.newMessageIndicator,
-            { backgroundColor: config?.colors?.primary || '#0052CD' },
+            { backgroundColor: getIconColor(config) },
           ]}
           onPress={handleNewMessageIndicatorPress}
         >

package/src/components/MainComponents/NoMessagesPlaceholder.tsx

@@ -1,7 +1,10 @@
 import { Text, View } from 'react-native';
 import { NoMessages } from '../../assets/icons';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
 
 const NoMessagesPlaceholder = () => {
+  const { config } = useChatSettingState();
   return (
     <View
       style={{
@@ -11,7 +14,7 @@ const NoMessagesPlaceholder = () => {
       }}
     >
       <View style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        {/* <NoMessages /> */}
+        <NoMessages color={getIconColor(config)} />
         <View
           style={{
             flexDirection: 'column',

package/src/components/MainComponents/ProfileImagePlaceholder.tsx

@@ -11,7 +11,11 @@ import {
   RemoveButtonText,
   Wrapper,
 } from '../styled/StyledComponents';
-import { nameToColor } from '../../helpers/hashcolor';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import {
+  getAvatarColor,
+  getAvatarTextColor,
+} from '../../helpers/getAvatarColor';
 
 interface ProfileImagePlaceholderProps {
   name?: string;
@@ -49,12 +53,13 @@ export const ProfileImagePlaceholder: React.FC<
   placeholderIcon,
   disableOverlay,
 }) => {
+  const { config } = useChatSettingState();
   const backgroundColor = useMemo(() => {
     if(!name) {
       return { backgroundColor: 'transparent' };
     }
-    return nameToColor(name);
-  }, [name]);
+    return { backgroundColor: getAvatarColor(name, config) };
+  }, [name, config]);
 
   const getTwoUppercaseLetters = (fullName: string) => {
     if (!fullName) {return '';}
@@ -120,10 +125,12 @@ export const ProfileImagePlaceholder: React.FC<
         ) : placeholderIcon ? (
           placeholderIcon
         ) : (
-          // Black initials on the pastel hash-color bg — white text
-          // on these light backgrounds is unreadable (matches web's
-          // default-color behavior).
-          <InitialsText size={size} color="#141414">
+          // Black initials on the light pastel hash-colors; a dark
+          // configured colors.avatar flips them to white.
+          <InitialsText
+            size={size}
+            color={getAvatarTextColor(backgroundColor?.backgroundColor)}
+          >
             {getInitials()}
           </InitialsText>
         )}

package/src/components/MainComponents/RoomList.tsx

@@ -24,6 +24,7 @@ import { useChatSettingState } from '../../hooks/useChatSettingState';
 import Button from '../styled/Button';
 import { HeaderRoomList } from '../Header/HeaderRoomList';
 import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
+import { getIconColor } from '../../helpers/getIconColor';
 
 const LONG_PRESS_THRESHOLD = 200;
 
@@ -165,7 +166,7 @@ const RoomList: React.FC<RoomListProps> = ({
           }}
           color="black"
           unstyled
-          EndIcon={<BurgerMenuIcon color={config?.colors?.primary} />}
+          EndIcon={<BurgerMenuIcon color={getIconColor(config)} />}
           onPress={() => setOpen(!open)}
         />
       )}

package/src/components/MessageBubble/Avatar.tsx

@@ -1,6 +1,10 @@
 import React, { useMemo } from 'react';
 import styled from 'styled-components/native';
-import { nameToColor } from '../../helpers/hashcolor';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import {
+  getAvatarColor,
+  getAvatarTextColor,
+} from '../../helpers/getAvatarColor';
 
 interface AvatarProps {
   username?: string | null;
@@ -23,13 +27,13 @@ const AvatarCircle = styled.View<{ bgColor?: string }>`
   elevation: 4;
 `;
 
-const AvatarText = styled.Text`
+const AvatarText = styled.Text<{ color?: string }>`
   font-size: 16px;
   font-weight: bold;
-  // Pastel backgrounds from nameToColor() are all light (#E2F4FB,
-  // #EEE6F9, #F5F2BC, ...). White text on light = invisible — web
-  // uses default-black text on the same palette. Match it.
-  color: #141414;
+  // Pastel backgrounds from the hash palette are all light, so the
+  // default is dark text; a configured colors.avatar may be dark, in
+  // which case getAvatarTextColor flips this to white.
+  color: ${({ color }) => color || '#141414'};
 `;
 
 export const Avatar: React.FC<AvatarProps> = ({
@@ -38,12 +42,15 @@ export const Avatar: React.FC<AvatarProps> = ({
   lastName,
   style,
 }) => {
+  const { config } = useChatSettingState();
   const backgroundColor = useMemo(() => {
       if (!username && !firstName) {
         return { backgroundColor: 'transparent' };
       }
-      return nameToColor(username ? username : firstName || '');
-    }, [username, firstName]);
+      return {
+        backgroundColor: getAvatarColor(username || firstName, config),
+      };
+    }, [username, firstName, config]);
 
   const getInitials = () => {
     const isAlphabetic = (char: string) => /^[a-zA-Zа-яА-ЯёЁ]$/.test(char);
@@ -78,7 +85,9 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <AvatarCircle style={style} bgColor={backgroundColor?.backgroundColor}>
-      <AvatarText>{getInitials()}</AvatarText>
+      <AvatarText color={getAvatarTextColor(backgroundColor?.backgroundColor)}>
+        {getInitials()}
+      </AvatarText>
     </AvatarCircle>
   );
 };

package/src/components/MessageBubble/Message.tsx

@@ -28,6 +28,7 @@ import MediaMessage from '../MainComponents/MediaMessage';
 import MessageTranslations from './MessageTranslations';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { parseMessageBody } from '../../helpers/parseMessageBody';
+import { getSenderNameColor } from '../../helpers/getSenderNameColor';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
 import { DoubleTick } from '../../assets/icons';
 import { useXmppClient } from '../../context/xmppProvider';
@@ -367,7 +368,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             backgroundMessage={config?.messageColor?.backgroundMessage}
           >
             {!isUser && (
-              <CustomUserName color={config?.colors?.primary} media={message?.isMediafile === 'true'}>
+              <CustomUserName color={getSenderNameColor(config)} media={message?.isMediafile === 'true'}>
                 {message.user.name}
               </CustomUserName>
             )}
@@ -425,6 +426,9 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                   ! Failed — tap to retry
                 </Text>
               )}
+              {message?.isEdited && !message?.isDeleted && (
+                <Text style={styles.editedText}>edited</Text>
+              )}
               <Text style={styles.timestampText}>
                 {new Date(message.date).toLocaleTimeString([], {
                   hour: '2-digit',
@@ -525,4 +529,15 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     textAlignVertical: 'center',
   },
+  // Small muted "edited" marker shown before the timestamp (Slack/WhatsApp
+  // style). Italic + same muted grey so it reads as metadata, not content.
+  editedText: {
+    fontSize: 11,
+    lineHeight: 16,
+    color: '#999',
+    fontStyle: 'italic',
+    marginRight: 6,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
 });

package/src/components/Modals/ModalWrapper/ModalWrapper.tsx

@@ -10,6 +10,8 @@ import {
 import { TextareaInput } from '../../styled/StyledInputComponents/StyledInputComponents';
 import Button from '../../styled/Button';
 import { Modal, Text, TextInput, View, StyleSheet } from 'react-native';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { getIconColor } from '../../../helpers/getIconColor';
 
 interface ModalWrapperProps {
   iconTitle?: any;
@@ -44,6 +46,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   compact = false,
 }) => {
   const textareaRef = useRef<TextInput>(null);
+  const { config } = useChatSettingState();
 
   // const handleInput = () => {
   //   const textarea = textareaRef.current;
@@ -73,6 +76,9 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
           style={{ width: '100%' }}
           unstyled
           variant="outlined"
+          // Outlined Button draws its border from `backgroundColor`
+          // (defaults to the hardcoded blue) — feed it the themed color.
+          borderColor={getIconColor(config)}
         />
         {buttonText && (
           <Button

package/src/components/styled/Button.tsx

@@ -15,11 +15,12 @@ import { getTintedColor } from '../../helpers/getTintedColor';
 const CustomButton = styled(TouchableOpacity)<{
   disabled: boolean;
   backgroundColor?: string;
+  borderColor?: string;
   unstyled?: boolean;
   variant?: 'default' | 'filled' | 'outlined';
 }>`
   border-width: ${({ variant }) => (variant === 'outlined' ? 1 : 0)}px;
-  border-color: ${({ backgroundColor }) => backgroundColor || '#0052CD'};
+  border-color: ${({ borderColor }) => borderColor || '#0052CD'};
   border-radius: 20px;
   background-color: ${({ variant, backgroundColor }) =>
     variant === 'filled' ? backgroundColor || '#0052CD' : 'transparent'};
@@ -52,6 +53,7 @@ export interface ButtonProps {
   unstyled?: boolean;
   variant?: 'default' | 'filled' | 'outlined';
   backgroundColor?: string;
+  borderColor?: string;
   color?: string;
   style?: ViewStyle;
   onPress?: () => void;
@@ -71,6 +73,7 @@ const Button: React.FC<ButtonProps> = ({
   unstyled = false,
   variant = 'default',
   backgroundColor,
+  borderColor,
   onPress,
   StartIcon,
   style: containerStyle,
@@ -90,6 +93,7 @@ const Button: React.FC<ButtonProps> = ({
       onPress={onPress}
       variant={variant}
       backgroundColor={backgroundColor}
+      borderColor={borderColor}
     >
       {loading && <Loader size={24} />}
       {!loading && StartIcon && <View style={styles.icon}>{StartIcon}</View>}

package/src/components/styled/DateLabel.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import styled from 'styled-components/native';
 import { Line } from './StyledComponents';
 import { Text } from 'react-native';
+import { getDateLabelColor } from '../../helpers/getDateLabelColor';
 
 interface DateLabelProps {
   date: Date;
-  colors?: { primary?: string; secondary?: string };
+  colors?: { primary?: string; secondary?: string; dateLabel?: string };
 }
 
 const Container = styled.View`
@@ -19,7 +20,7 @@ const Container = styled.View`
 `;
 
 export const StyledDateLabel = styled.View<{
-  secondary?: string;
+  bgColor?: string;
 }>`
   margin: 0;
   border-radius: 118px;
@@ -27,11 +28,11 @@ export const StyledDateLabel = styled.View<{
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  background-color: ${(props) => '#e7edf9'};
+  background-color: ${({ bgColor }) => bgColor || '#e7edf9'};
 `;
 
-export const StyledDateText = styled.Text<{ primary?: string }>`
-  color: ${(props) => '#0052cd'};
+export const StyledDateText = styled.Text<{ color?: string }>`
+  color: ${({ color }) => color || '#0052cd'};
   font-size: 12px;
   font-weight: 400;
   line-height: 14px;
@@ -63,11 +64,13 @@ const DateLabel: React.FC<DateLabelProps> = ({ date, colors }) => {
     label = date.toLocaleDateString('en-US', options);
   }
 
+  const textColor = getDateLabelColor({ colors });
+
   return (
     <Container>
       <Line />
-      <StyledDateLabel secondary={colors?.secondary}>
-        <StyledDateText primary={colors?.primary}>{label}</StyledDateText>
+      <StyledDateLabel bgColor={colors?.secondary}>
+        <StyledDateText color={textColor}>{label}</StyledDateText>
       </StyledDateLabel>
       <Line />
     </Container>

package/src/components/styled/SendInput.tsx

@@ -12,6 +12,7 @@ import { SendIcon, AttachIcon, RecordIcon } from '../../assets/icons';
 import { KeyboardAvoidingView, Platform, View, Text, TouchableOpacity, Alert, Linking } from 'react-native';
 import AttachSheet from '../Modals/AttachSheet/AttachSheet';
 import { MediaFilePreview } from './MediaFilePreview';
+import { getIconColor } from '../../helpers/getIconColor';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import * as ImageManipulator from 'expo-image-manipulator';
@@ -486,7 +487,7 @@ const SendInput: React.FC<SendInputProps> = ({
                   }}
                   activeOpacity={0.7}
                 >
-                  <AttachIcon color={config?.colors?.primary || '#0052CD'} />
+                  <AttachIcon color={getIconColor(config)} />
                 </TouchableOpacity>
               )}
               <MessageInput
@@ -615,7 +616,7 @@ const SendInput: React.FC<SendInputProps> = ({
                   marginLeft: 0,
                   marginRight: 0,
                   backgroundColor: filled
-                    ? config?.colors?.primary
+                    ? getIconColor(config)
                     : 'transparent',
                   opacity: filled ? 1 : 0.5,
                 }}
@@ -629,7 +630,7 @@ const SendInput: React.FC<SendInputProps> = ({
           onCamera={handleCameraSelection}
           onGallery={handleGallerySelection}
           onDocument={handleFileSelection}
-          primaryColor={config?.colors?.primary}
+          primaryColor={getIconColor(config)}
         />
       </InputContainer>
   );

package/src/context/xmppProvider.tsx

@@ -507,9 +507,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
     if (!client) {return;}
     const id = setInterval(() => {
       if (AppState.currentState !== 'active') {return;}
-      if (client.status !== 'online' && !client.suppressReconnect) {
+      if (client.suppressReconnect) {return;}
+      if (client.status !== 'online') {
         devPushLog('rn', `watchdog: client ${client.status} → forceReconnect`);
         client.forceReconnect();
+      } else {
+        client.ensureStreamAlive?.();
       }
     }, 30000);
     return () => clearInterval(id);
@@ -713,6 +716,8 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       if (client.status === 'offline' || client.status === 'error') {
         devPushLog('rn', `NetInfo: reachable & client ${client.status} → forceReconnect`);
         client.forceReconnect();
+      } else if (client.status === 'online') {
+        client.ensureStreamAlive?.();
       }
     });
     return () => unsub();

package/src/helpers/getAvatarColor.ts

@@ -0,0 +1,31 @@
+import { nameToColor } from './hashcolor';
+
+// Background for initials avatars. When `colors.avatar` is set in the
+// config every avatar uses it; otherwise each user keeps their per-name
+// pastel from the hash palette (the current default).
+export const getAvatarColor = (
+  name?: string | null,
+  config?: { colors?: { avatar?: string } }
+) => config?.colors?.avatar || nameToColor(name || '')?.backgroundColor;
+
+// The default pastels are all light, so initials are dark (#141414). A
+// configured avatar color may be dark (e.g. brand primary) — flip the
+// initials to white when the background is too dark to read on.
+export const getAvatarTextColor = (bg?: string) => {
+  if (!bg || !bg.startsWith('#')) {
+    return '#141414';
+  }
+  let hex = bg.slice(1);
+  if (hex.length === 3) {
+    hex = hex
+      .split('')
+      .map((c) => c + c)
+      .join('');
+  }
+  const num = parseInt(hex.slice(0, 6), 16);
+  const r = (num >> 16) & 255;
+  const g = (num >> 8) & 255;
+  const b = num & 255;
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+  return luminance > 150 ? '#141414' : '#FFFFFF';
+};

package/src/helpers/getDateLabelColor.ts

@@ -0,0 +1,3 @@
+export const getDateLabelColor = (config?: {
+  colors?: { primary?: string; secondary?: string; dateLabel?: string };
+}) => config?.colors?.dateLabel || config?.colors?.primary || '#0052CD';

package/src/helpers/getIconColor.ts

@@ -0,0 +1,3 @@
+export const getIconColor = (config?: {
+  colors?: { primary?: string; secondary?: string; icon?: string };
+}) => config?.colors?.icon || config?.colors?.primary || '#0052CD';

package/src/helpers/getSenderNameColor.ts

@@ -0,0 +1,3 @@
+export const getSenderNameColor = (config?: {
+  colors?: { primary?: string; secondary?: string; senderName?: string };
+}) => config?.colors?.senderName || config?.colors?.primary || '#0052CD';