agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/subComponents/ChatContainer.tsx

@@ -9,7 +9,13 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useRef} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   View,
   ScrollView,
@@ -22,15 +28,31 @@ import {
 import {RFValue} from 'react-native-responsive-fontsize';
 import ChatBubble from './ChatBubble';
 import {ChatBubbleProps} from '../components/ChatContext';
-import {useLocalUid} from '../../agora-rn-uikit';
-import {ImageIcon} from '../../agora-rn-uikit';
+import {
+  DispatchContext,
+  ContentInterface,
+  useLocalUid,
+} from '../../agora-rn-uikit';
 import TextWithTooltip from './TextWithTooltip';
 import {useCustomization} from 'customization-implementation';
 import {isValidReactComponent, isWebInternal} from '../utils/common';
 import {useString} from '../utils/useString';
-import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
-import {useRender} from 'customization-api';
+import {
+  ChatType,
+  useChatUIControls,
+} from '../components/chat-ui/useChatUIControls';
+import {useContent} from 'customization-api';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import ThemeConfig from '../theme';
+import UserAvatar from '../atoms/UserAvatar';
+import Spacer from '../atoms/Spacer';
+import {useChatNotification} from '../components/chat-notification/useChatNotification';
 import {useChatMessages} from '../components/chat-messages/useChatMessages';
+import {
+  chatPanelUnreadMessageText,
+  chatPanelUserOfflineText,
+  groupChatWelcomeContent,
+} from '../language/default-labels/videoCallScreenLabels';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -40,21 +62,59 @@ import {useChatMessages} from '../components/chat-messages/useChatMessages';
 const ChatContainer = (props?: {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
 }) => {
-  const {renderList} = useRender();
-  const {messageStore, privateMessageStore} = useChatMessages();
+  const info1 = useString<boolean>(groupChatWelcomeContent);
+  const [scrollToEnd, setScrollToEnd] = useState(false);
+  const {dispatch} = useContext(DispatchContext);
+  const [grpUnreadCount, setGrpUnreadCount] = useState(0);
+  const [privateUnreadCount, setPrivateUnreadCount] = useState(0);
+  const {defaultContent} = useContent();
+  const {privateMessageStore, messageStore} = useChatMessages();
+  const messageStoreLengthRef = useRef(messageStore.length);
   const {height, width} = useWindowDimensions();
+  const {chatType, setChatType, privateChatUser, inputActive} =
+    useChatUIControls();
+  const privateMessageStoreRef = useRef(
+    privateMessageStore[privateChatUser]?.length,
+  );
   const {
-    privateActive,
-    selectedChatUserId: selectedUserID,
-    setPrivateActive,
-  } = useChatUIControl();
+    setUnreadGroupMessageCount,
+    unreadGroupMessageCount,
+    unreadIndividualMessageCount,
+    setUnreadIndividualMessageCount,
+  } = useChatNotification();
   const localUid = useLocalUid();
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
   const scrollViewRef = useRef<ScrollView>(null);
 
-  const {ChatBubbleComponent} = useCustomization((data) => {
+  useEffect(() => {
+    if (chatType === ChatType.Group) {
+      setGrpUnreadCount(unreadGroupMessageCount);
+      setUnreadGroupMessageCount(0);
+    }
+  }, [chatType]);
+
+  useEffect(() => {
+    if (privateChatUser) {
+      setPrivateUnreadCount(unreadIndividualMessageCount[privateChatUser]);
+      setUnreadIndividualMessageCount(prevState => {
+        return {
+          ...prevState,
+          [privateChatUser]: 0,
+        };
+      });
+      //Once message is seen, reset lastMessageTimeStamp.
+      //so whoever has unread count will show in the top of participant list
+      updateRenderListState(privateChatUser, {lastMessageTimeStamp: 0});
+    }
+  }, [privateChatUser]);
+
+  const updateRenderListState = (
+    uid: number,
+    data: Partial<ContentInterface>,
+  ) => {
+    dispatch({type: 'UpdateRenderList', value: [uid, data]});
+  };
+
+  const {ChatBubbleComponent} = useCustomization(data => {
     let components: {
       ChatBubbleComponent: React.ComponentType<ChatBubbleProps>;
     } = {
@@ -85,73 +145,177 @@ const ChatContainer = (props?: {
     }
     return components;
   });
-  //commented for v1 release
-  //const userOfflineLabel = useString('userOfflineLabel')();
-  const userOfflineLabel = 'User is offline';
+
+  const userOfflineLabel = useString(chatPanelUserOfflineText)();
+  const unreadMessageLabel = useString(chatPanelUnreadMessageText)();
+
+  //if we don't have unread count then enable scroll to end
+  useEffect(() => {
+    const isPrivateActive = chatType === ChatType.Private;
+    if (!isPrivateActive && !grpUnreadCount) {
+      setScrollToEnd(true);
+    } else if (isPrivateActive && !privateUnreadCount) {
+      setScrollToEnd(true);
+    }
+  }, [chatType, grpUnreadCount, privateUnreadCount]);
+
+  const onContentSizeChange = useCallback(() => {
+    if (scrollToEnd) {
+      scrollViewRef.current?.scrollToEnd({animated: false});
+    }
+  }, [scrollToEnd]);
+
+  //if we have unread container then scrollTo that container and scrollToEnd will be disabled since its has unread count
+  const unreadViewOnLayout = ({
+    nativeEvent: {
+      layout: {y},
+    },
+  }) => {
+    //scroll to unread message label
+    if (y) {
+      scrollViewRef.current?.scrollTo({y, animated: false});
+    }
+  };
+
   return (
     <View style={style.containerView}>
-      {privateActive && (
-        <TouchableOpacity
-          style={style.row}
-          onPress={() => setPrivateActive(false)}>
-          <View style={style.backButton}>
-            <ImageIcon style={[style.backIcon]} name={'backBtn'} />
-          </View>
-          <View style={{flex: 1}}>
-            <TextWithTooltip
-              style={[
-                style.name,
-                {
-                  flexShrink: 1,
-                  fontSize: RFValue(16, height > width ? height : width),
-                },
-              ]}
-              value={
-                renderList[selectedUserID]
-                  ? renderList[selectedUserID]?.name + ' '
-                  : remoteUserDefaultLabel + ' '
-              }
-            />
+      {chatType === ChatType.Private && privateChatUser ? (
+        <>
+          <View style={style.participantContainer}>
+            <View style={style.bgContainerStyle}>
+              <UserAvatar
+                name={defaultContent[privateChatUser].name}
+                containerStyle={style.userAvatarContainer}
+                textStyle={style.userAvatarText}
+              />
+            </View>
+            <View style={style.participantTextContainer}>
+              <Text style={[style.participantText]} numberOfLines={1}>
+                {defaultContent[privateChatUser].name}
+              </Text>
+            </View>
           </View>
-        </TouchableOpacity>
+          <Spacer size={10} />
+        </>
+      ) : (
+        <></>
       )}
-      <ScrollView
-        ref={scrollViewRef}
-        onContentSizeChange={() => {
-          scrollViewRef.current?.scrollToEnd({animated: true});
-        }}>
-        {!privateActive ? (
-          messageStore.map((message: any) => (
-            <>
-              <ChatBubbleComponent
-                isLocal={localUid === message.uid}
-                message={message.msg}
-                createdTimestamp={message.createdTimestamp}
-                updatedTimestamp={message.updatedTimestamp}
-                uid={message.uid}
-                key={message.ts}
-                msgId={message.msgId}
-                isDeleted={message.isDeleted}
-              />
-            </>
-          ))
-        ) : privateMessageStore[selectedUserID] ? (
-          privateMessageStore[selectedUserID].map((message: any) => (
-            <ChatBubbleComponent
-              isLocal={localUid === message.uid}
-              message={message.msg}
-              createdTimestamp={message.createdTimestamp}
-              updatedTimestamp={message.updatedTimestamp}
-              uid={message.uid}
-              key={message.ts}
-              msgId={message.msgId}
-              isDeleted={message.isDeleted}
-            />
-          ))
+      <ScrollView ref={scrollViewRef} onContentSizeChange={onContentSizeChange}>
+        {chatType === ChatType.Group ? (
+          <>
+            <View style={style.defaultMessageContainer}>
+              <Text style={style.defaultMessageText}>
+                {info1(messageStore?.length ? false : true)}
+              </Text>
+            </View>
+            {messageStore.map((message: any, index) => (
+              <>
+                {messageStoreLengthRef.current === messageStore.length &&
+                grpUnreadCount &&
+                messageStore.length - grpUnreadCount === index ? (
+                  <View
+                    style={style.unreadMessageContainer}
+                    onLayout={unreadViewOnLayout}>
+                    <Text style={style.unreadMessageText}>
+                      {grpUnreadCount} {unreadMessageLabel}
+                    </Text>
+                  </View>
+                ) : (
+                  <></>
+                )}
+                <ChatBubbleComponent
+                  isLocal={localUid === message.uid}
+                  isSameUser={
+                    index !== 0 && messageStore[index - 1].uid === message.uid
+                      ? true
+                      : false
+                  }
+                  previousMessageCreatedTimestamp={
+                    index !== 0
+                      ? (messageStore[index - 1]
+                          .createdTimestamp as unknown as string)
+                      : ''
+                  }
+                  message={message.msg}
+                  createdTimestamp={message.createdTimestamp}
+                  updatedTimestamp={message.updatedTimestamp}
+                  uid={message.uid}
+                  key={message.msgId}
+                  msgId={message.msgId}
+                  isDeleted={message.isDeleted}
+                  type={message.type}
+                  url={message?.url}
+                  thumb={message?.thumb}
+                  fileName={message?.fileName}
+                  ext={message?.ext}
+                />
+                {messageStore?.length - 1 === index ? (
+                  <Spacer size={10} />
+                ) : (
+                  <></>
+                )}
+              </>
+            ))}
+          </>
+        ) : (
+          <></>
+        )}
+        {chatType === ChatType.Private &&
+        privateChatUser &&
+        privateMessageStore[privateChatUser] ? (
+          <>
+            {privateMessageStore[privateChatUser].map((message: any, index) => (
+              <>
+                {privateMessageStoreRef.current ===
+                  privateMessageStore[privateChatUser]?.length &&
+                privateUnreadCount &&
+                privateMessageStore[privateChatUser]?.length -
+                  privateUnreadCount ===
+                  index ? (
+                  <View
+                    style={style.unreadMessageContainer}
+                    onLayout={unreadViewOnLayout}>
+                    <Text style={style.unreadMessageText}>
+                      {privateUnreadCount} {unreadMessageLabel}
+                    </Text>
+                  </View>
+                ) : (
+                  <></>
+                )}
+                <ChatBubbleComponent
+                  isLocal={localUid === message.uid}
+                  isSameUser={
+                    index !== 0 &&
+                    privateMessageStore[privateChatUser][index - 1].uid ===
+                      message.uid
+                      ? true
+                      : false
+                  }
+                  message={message.msg}
+                  createdTimestamp={message.createdTimestamp}
+                  updatedTimestamp={message.updatedTimestamp}
+                  uid={message.uid}
+                  key={message.ts}
+                  msgId={message.msgId}
+                  isDeleted={message.isDeleted}
+                  type={message.type}
+                  url={message?.url}
+                  thumb={message?.thumb}
+                  fileName={message?.fileName}
+                  ext={message?.ext}
+                />
+                {privateMessageStore[privateChatUser]?.length - 1 === index ? (
+                  <Spacer size={10} />
+                ) : (
+                  <></>
+                )}
+              </>
+            ))}
+          </>
         ) : (
           <></>
         )}
-        {renderList[selectedUserID]?.offline && (
+        {defaultContent[privateChatUser]?.offline && (
           <View style={style.infoTextView}>
             <Text style={style.infoText}>{userOfflineLabel}</Text>
           </View>
@@ -162,42 +326,82 @@ const ChatContainer = (props?: {
 };
 
 const style = StyleSheet.create({
-  containerView: {flex: 8},
-  row: {
+  unreadMessageContainer: {
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    padding: 8,
+    marginVertical: 20,
+  },
+  unreadMessageText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 12,
+    color: $config.FONT_COLOR,
+    textAlign: 'center',
+  },
+  defaultMessageContainer: {
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 20,
+    marginHorizontal: 12,
+    marginBottom: 0,
+  },
+  defaultMessageText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 12,
+    color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
+  },
+  bgContainerStyle: {
+    backgroundColor: $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    marginRight: 8,
+    marginLeft: 20,
+    marginVertical: 8,
+  },
+  userAvatarContainer: {
+    backgroundColor:
+      $config.PRIMARY_ACTION_BRAND_COLOR + hexadecimalTransparency['10%'],
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+  userAvatarText: {
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 12,
+    fontWeight: '400',
+    color: $config.CARD_LAYER_1_COLOR,
+  },
+  participantContainer: {
     flexDirection: 'row',
-    marginTop: 2,
-    alignItems: 'baseline',
-    paddingVertical: 10,
-    ...Platform.select({
-      android: {
-        height: 40,
-      },
-      ios: {
-        height: 40,
-      },
-    }),
+    overflow: 'hidden',
+    justifyContent: 'space-between',
+    backgroundColor:
+      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['10%'],
   },
-  backButton: {
-    marginHorizontal: 10,
-    justifyContent: 'center',
-    alignSelf: 'flex-end',
+  participantTextContainer: {
+    flex: 1,
+    alignSelf: 'center',
+    marginRight: 8,
   },
-  name: {
-    fontWeight: isWebInternal() ? '500' : '700',
-    color: $config.PRIMARY_FONT_COLOR,
+  participantText: {
+    // flex: 1,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 14,
+    color: $config.FONT_COLOR,
     textAlign: 'left',
-    marginRight: 10,
-  },
-  backIcon: {
-    width: 20,
-    height: 20,
+    flexShrink: 1,
   },
+  containerView: {flex: 8},
   infoTextView: {
     marginVertical: 2,
     flexDirection: 'row',
   },
   infoText: {
-    color: $config.PRIMARY_FONT_COLOR + '60',
+    color: $config.FONT_COLOR + hexadecimalTransparency['60%'],
     fontWeight: '500',
     fontSize: 14,
     flex: 1,