@ethora/chat-component-rn 26.4.1

package/src/components/OperationalModal/OperationalModal.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+// import QRCode from 'react-qr-code';
+import { CloseButton } from '../Modals/styledModalComponents';
+import { Overlay, StyledModal } from '../styled/MediaModal';
+import { StyledInput } from '../styled/StyledInputComponents/StyledInputComponents';
+import Button from '../styled/Button';
+import { Text, View } from 'react-native';
+import { QRCODE_URL } from '../../helpers/constants/PLATFORM_CONSTANTS';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+interface OperationalModalProps {
+  isVisible: boolean;
+  chatJid: string;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const OperationalModal: React.FC<OperationalModalProps> = ({
+  isVisible,
+  chatJid,
+  setVisible,
+}) => {
+  const handleCopyClick = () => {
+    Clipboard.setString(`${QRCODE_URL}${chatJid}`);
+  };
+
+  return (
+    isVisible && (
+      <Overlay
+        style={{
+          position: 'absolute',
+        }}
+      >
+        <StyledModal
+          style={{
+            borderRadius: 16,
+            width: 'auto',
+            height: 'auto',
+            paddingHorizontal: 64,
+            paddingVertical: 32,
+            minWidth: 480,
+          }}
+        >
+          <CloseButton onPress={() => setVisible(false)}>
+            <Text style={{ fontSize: 24 }}>&times;</Text>
+          </CloseButton>
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 16,
+              alignItems: 'center',
+            }}
+          >
+            <View style={{ width: '70%', position: 'relative' }} />
+
+            <View
+              style={{
+                display: 'flex',
+                gap: 8,
+                alignItems: 'center',
+                minWidth: 400,
+              }}
+            >
+              <StyledInput
+                value={chatJid}
+                editable={true}
+                style={{ width: '80%' }}
+              />
+              <Button text="Copy" onPress={handleCopyClick} />
+            </View>
+          </View>
+        </StyledModal>
+      </Overlay>
+    )
+  );
+};
+
+export default OperationalModal;

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -0,0 +1,219 @@
+import React, { useMemo } from 'react';
+import { IConfig, IRoom } from '../../types/types';
+import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
+import {
+  ChatItem,
+  ChatInfo,
+  ChatName,
+  LastMessage,
+  UserCount,
+} from '../styled/RoomListComponents';
+import Composing from '../styled/StyledInputComponents/Composing';
+import { Text, View } from 'react-native';
+import LastMessageItem from './LastMessageItem';
+import { LastRoomMessageText } from './styled/StyledRoomComponents';
+
+interface ChatRoomItemProps {
+  chat: IRoom;
+  index?: number;
+  isDriver?: boolean;
+  config?: IConfig;
+}
+
+const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
+  chat,
+  index,
+  isDriver,
+  config,
+}) => {
+  const displayName = String(chat?.title || chat?.name || '').trim();
+
+  const lastMessage = useMemo(() => {
+    if (!chat?.messages || chat.messages.length === 0) {return undefined;}
+
+    for (let i = chat.messages.length - 1; i >= 0; i--) {
+      const msg = chat.messages[i];
+      if (!msg.deleted && !msg.isDeleted) {
+        return msg;
+      }
+    }
+    return undefined;
+  }, [chat?.messages]);
+
+  // Mirrors web's formatter: tolerates undefined/garbage inputs (returns
+  // undefined instead of "NaN:NaN"), and uses HH:MM today / MM/DD this
+  // year / YYYY/MM/DD older.
+  const formatTimeToHHMM = (
+    isoTime?: string | Date | number
+  ): string | undefined => {
+    if (isoTime == null) {return undefined;}
+    let date: Date;
+    try {
+      if (isoTime instanceof Date) {
+        date = isoTime;
+      } else if (typeof isoTime === 'number') {
+        date = new Date(isoTime);
+      } else if (typeof isoTime === 'string') {
+        const trimmed = isoTime.trim();
+        date = /^\d+$/.test(trimmed)
+          ? new Date(parseInt(trimmed, 10))
+          : new Date(trimmed);
+      } else {
+        return undefined;
+      }
+      if (isNaN(date.getTime())) {return undefined;}
+      const now = new Date();
+      if (date.getFullYear() !== now.getFullYear()) {
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');
+        const day = date.getDate().toString().padStart(2, '0');
+        return `${year}/${month}/${day}`;
+      }
+      if (date.toDateString() === now.toDateString()) {
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        return `${hours}:${minutes}`;
+      }
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const day = date.getDate().toString().padStart(2, '0');
+      return `${month}/${day}`;
+    } catch {
+      return undefined;
+    }
+  };
+
+  const stamp = formatTimeToHHMM(lastMessage?.date ?? chat?.createdAt);
+
+  return (
+    <ChatItem key={index}>
+      <ProfileImagePlaceholder name={displayName} icon={chat?.icon} active={false} />
+      <View
+        style={{
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          flex: 2,
+          width: '100%',
+          paddingVertical: 8,
+          paddingRight: 8,
+          borderBottomWidth: 1,
+          borderBottomColor: '#F0F0F0',
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <ChatInfo>
+            <ChatName text={displayName} />
+          </ChatInfo>
+          {stamp ? (
+            <UserCount
+              style={{
+                color: '#8C8C8C',
+                fontSize: 12,
+              }}
+              text={stamp}
+            />
+          ) : null}
+        </View>
+        <View
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'flex-start',
+            minHeight: 40,
+          }}
+        >
+          {/* {chat.composing ? (
+            <Composing
+              usersTyping={chat.composingList}
+              style={{ color: "#141414" }}
+            />
+            ) : lastMessage?.body ? (
+            <View
+              style={{
+                display: "flex",
+                width: "80%",
+                flexDirection: "column",
+                alignItems: "flex-start",
+              }}
+            >
+              <View
+                style={{
+                  height: 20,
+                }}
+              >
+                <Text style={{ fontWeight: "600", textAlign: "right" }}>
+                  {lastMessage.user.name || ""}:
+                </Text>
+              </View>
+              <View
+                style={{
+                  height: 20,
+                  maxWidth: 200,
+                  overflow: "hidden",
+                }}
+              >
+                <Text
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                  style={{
+                    textAlign: "right",
+                  }}
+                >
+                  {lastMessage.body || "Chat created"}
+                </Text>
+              </View>
+            </View>
+          ) : null} */}
+          {chat.composing ? (
+            <Composing
+              usersTyping={chat.composingList}
+              // style={{ color: !isChatActive ? '#141414' : '#fff' }}
+            />
+          ) : lastMessage?.body ? (
+            <LastMessageItem lastMessage={lastMessage} />
+          ) : chat.messages.length === 0 && chat.historyComplete ? (
+            <LastRoomMessageText>Room created</LastRoomMessageText>
+          ) : undefined}
+          {chat.unreadMessages && chat.unreadMessages > 0 ? (
+            <View
+              style={{
+                borderRadius: 8,
+                backgroundColor: config?.colors?.primary,
+                padding: 2,
+                minWidth: 24,
+                minHeight: 24,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginLeft: 'auto',
+              }}
+            >
+              <Text
+                style={{
+                  // color: isChatActive ? "#141414" : "#fff",
+                  color: '#141414',
+                  fontSize: 14,
+                  fontWeight: '600',
+                }}
+              >
+                {chat.unreadMessages || ''}
+              </Text>
+            </View>
+          ) : null}
+        </View>
+        {isDriver && (
+          <View
+            style={{ height: 1, backgroundColor: '#0052CD0D', marginTop: 8 }}
+          />
+        )}
+      </View>
+    </ChatItem>
+  );
+};
+
+export default ChatRoomItem;

package/src/components/RoomComponents/LastMessageItem.tsx

@@ -0,0 +1,47 @@
+import React, { FC } from 'react';
+import { LastMessage } from '../../types/types';
+import LastMessageVideo from './styled/LastMessageVideo';
+import LastTextMessage from './styled/LastTextMessage';
+import LastMessagePhoto from './styled/LastMessagePhoto';
+import LastMessageEmoji from './styled/LastMessageEmoji';
+import LastMessageFile from './styled/LastMessageFile';
+import LastAudioMessage from './styled/LastAudioMessage';
+
+interface LastMessageItemProps {
+  lastMessage: LastMessage;
+}
+
+const LastMessageItem: FC<LastMessageItemProps> = ({ lastMessage }) => {
+  const { body, emoji, mimetype } = lastMessage;
+
+  if (mimetype) {
+    if (mimetype.startsWith('image/')) {
+      return <LastMessagePhoto {...lastMessage} />;
+    }
+
+    if (mimetype.startsWith('video/')) {
+      return <LastMessageVideo {...lastMessage} />;
+    }
+
+    if (
+      mimetype.startsWith('audio/') ||
+      mimetype.includes('application/octet-stream')
+    ) {
+      return <LastAudioMessage {...lastMessage} />;
+    }
+
+    return <LastMessageFile {...lastMessage} />;
+  }
+
+  if (emoji) {
+    return <LastMessageEmoji {...lastMessage} />;
+  }
+
+  if (body) {
+    return <LastTextMessage {...lastMessage} />;
+  }
+
+  return undefined;
+};
+
+export default LastMessageItem;

package/src/components/RoomComponents/styled/LastAudioMessage.tsx

@@ -0,0 +1,62 @@
+import React, { FC } from 'react';
+import {
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+  ShadeWrapper,
+} from './StyledRoomComponents';
+import { LastMessage } from '../../../types/types';
+import styled from 'styled-components/native';
+import { Text, View } from 'react-native';
+
+interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {}
+
+const PlayButton = styled.View`
+  position: absolute;
+  width: 8px;
+  height: 9px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 10px;
+  pointer-events: none;
+  z-index: 100;
+`;
+
+const PhotoContainer = styled.View`
+  position: relative;
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+  border-radius: 8px;
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  pointer-events: none;
+`;
+
+const LastAudioMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
+  return (
+    <LastRoomMessageContainer>
+      <LastRoomMessageName>{user?.name ?? ''}</LastRoomMessageName>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '4px',
+        }}
+      >
+        <PhotoContainer>
+          <ShadeWrapper>
+            <PlayButton><Text>▶</Text></PlayButton>
+          </ShadeWrapper>
+        </PhotoContainer>
+        <LastRoomMessageText>audio</LastRoomMessageText>
+      </View>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastAudioMessage;

package/src/components/RoomComponents/styled/LastMessageEmoji.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import {
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+} from './StyledRoomComponents';
+import { LastMessage } from '../../../types/types';
+import emojiData from 'emoji-mart';
+
+interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'emoji'> {}
+
+const LastMessageEmoji: FC<LastMessageEmojiProps> = ({ user, emoji }) => {
+  const memoEmoji = (id: string) => {
+    const emoji = (emojiData as any).emojis[id];
+    return emoji ? emoji.skins[0].native : '';
+  };
+
+  return (
+    <LastRoomMessageContainer>
+      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      <LastRoomMessageText>{emoji ? memoEmoji(emoji) : ''}</LastRoomMessageText>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastMessageEmoji;

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -0,0 +1,54 @@
+import React, { FC, useState } from 'react';
+import styled from 'styled-components';
+import { LastMessage } from '../../../types/types';
+import {
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+} from './StyledRoomComponents';
+import { FileIcon } from '../../../assets/icons';
+import { Image, View } from 'react-native';
+
+interface LastMessageFileProps
+  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
+
+const fallbackImage =
+  'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
+
+const LastMessageFile: FC<LastMessageFileProps> = ({
+  user,
+  originalName,
+  locationPreview,
+}) => {
+  const [imgSrc, setImgSrc] = useState(locationPreview);
+
+  return (
+    <LastRoomMessageContainer>
+      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '4px',
+        }}
+      >
+        {imgSrc ? (
+          <Image
+            source={{ uri: imgSrc }}
+            style={{
+              borderRadius: 16,
+              width: 20,
+              height: 20,
+            }}
+            onError={() => setImgSrc(fallbackImage)}
+          />
+        ) : (
+          <FileIcon style={{ width: '20px', height: '20px' }} />
+        )}
+        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+      </View>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastMessageFile;

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -0,0 +1,54 @@
+import React, { FC } from 'react';
+import styled from 'styled-components/native';
+import { LastMessage } from '../../../types/types';
+import {
+  LastMessageImg,
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+  ShadeWrapper,
+} from './StyledRoomComponents';
+import { View } from 'react-native';
+
+const PhotoContainer = styled.View`
+  position: relative;
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+  border-radius: 8px;
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  pointer-events: none;
+`;
+
+interface LastMessagePhotoProps
+  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
+
+const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
+  user,
+  locationPreview,
+  originalName,
+}) => {
+  return (
+    <LastRoomMessageContainer>
+      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '4px',
+        }}
+      >
+        <PhotoContainer>
+          <ShadeWrapper>
+            <LastMessageImg src={locationPreview} />
+          </ShadeWrapper>
+        </PhotoContainer>
+        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+      </View>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastMessagePhoto;

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from 'react';
+import styled from 'styled-components/native';
+import { LastMessage } from '../../../types/types';
+import {
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+  ShadeWrapper,
+} from './StyledRoomComponents';
+import { Text, View } from 'react-native';
+
+const VideoContainer = styled.View`
+  position: relative;
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+  border-radius: 8px;
+`;
+
+const Thumbnail = styled.Image`
+  width: 20px;
+  height: 20px;
+  border-radius: 8px;
+`;
+
+const PlayButton = styled.View`
+  position: absolute;
+  width: 8px;
+  height: 9px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 10px;
+  pointer-events: none;
+  z-index: 100;
+`;
+
+interface LastMessageVideoProps
+  extends Pick<LastMessage, 'user' | 'location' | 'originalName'> {}
+
+const LastMessageVideo: FC<LastMessageVideoProps> = ({
+  user,
+  location,
+  originalName,
+}) => {
+  return (
+    <LastRoomMessageContainer>
+      <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
+      <View
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          gap: '4px',
+        }}
+      >
+        <VideoContainer>
+          <ShadeWrapper>
+            <Thumbnail src={location} />
+          </ShadeWrapper>
+          <PlayButton><Text>▶</Text></PlayButton>
+        </VideoContainer>
+        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+      </View>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastMessageVideo;

package/src/components/RoomComponents/styled/LastTextMessage.tsx

@@ -0,0 +1,65 @@
+import React, { FC } from 'react';
+import {
+  LastRoomMessageContainer,
+  LastRoomMessageName,
+  LastRoomMessageText,
+} from './StyledRoomComponents';
+import { LastMessage } from '../../../types/types';
+import { decodeHTMLEntities } from '../../../helpers/parseMessageBody';
+
+interface LastMessageEmojiProps extends Pick<LastMessage, 'user' | 'body'> {}
+
+const getPlainText = (body: string | undefined): string => {
+  if (!body || typeof body !== 'string') {
+    return 'Chat created';
+  }
+
+  let text = decodeHTMLEntities(body);
+
+  text = text.replace(/^#{1,6}\s+/gm, '');
+
+  text = text.replace(/\*\*([^*]+)\*\*/g, '$1');
+  text = text.replace(/__([^_]+)__/g, '$1');
+
+  text = text.replace(/\*([^*]+)\*/g, '$1');
+  text = text.replace(/_([^_]+)_/g, '$1');
+
+  text = text.replace(/~~([^~]+)~~/g, '$1');
+
+  text = text.replace(/`([^`]+)`/g, '$1');
+
+  text = text.replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1');
+
+  text = text.replace(/^[\s]*[-*+]\s+/gm, '');
+
+  text = text.replace(/^\s*\d+\.\s+/gm, '');
+
+  text = text.replace(/\|/g, ' ');
+
+  text = text.replace(/```[\s\S]*?```/g, '');
+
+  text = text.replace(/<[^>]+>/g, '');
+
+  text = text.replace(/\s+/g, ' ');
+
+  text = text.replace(/\n/g, ' ').trim();
+
+  return text || 'Chat created';
+};
+
+const LastTextMessage: FC<LastMessageEmojiProps> = ({ user, body }) => {
+  const plainText = getPlainText(body);
+
+  return (
+    <LastRoomMessageContainer>
+      <LastRoomMessageName numberOfLines={1} ellipsizeMode="tail">
+        {user?.name}
+      </LastRoomMessageName>
+      <LastRoomMessageText numberOfLines={1} ellipsizeMode="tail">
+        {plainText}
+      </LastRoomMessageText>
+    </LastRoomMessageContainer>
+  );
+};
+
+export default LastTextMessage;