agora-appbuilder-core 4.0.0 → 4.0.1

package/template/src/subComponents/ChatBubble.tsx

@@ -15,17 +15,19 @@ import Hyperlink from 'react-native-hyperlink';
 import {useString} from '../utils/useString';
 import {ChatBubbleProps} from '../components/ChatContext';
 import ColorContext from '../components/ColorContext';
-import {isWebInternal} from '../utils/common';
-import {useChatUIControl, useRender} from 'customization-api';
+import {isWebInternal, trimText} from '../utils/common';
+import {useChatUIControls, useContent} from 'customization-api';
 import ThemeConfig from '../theme';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import Spacer from '../atoms/Spacer';
-import {formatAMPM} from '../utils';
+import {formatAMPM, isURL} from '../utils';
+import {ChatType} from '../components/chat-ui/useChatUIControls';
+import {videoRoomUserFallbackText} from '../language/default-labels/videoCallScreenLabels';
 
 const ChatBubble = (props: ChatBubbleProps) => {
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   const {primaryColor} = useContext(ColorContext);
-  const {privateActive, selectedChatUserId} = useChatUIControl();
+  const {chatType, privateChatUser} = useChatUIControls();
   let {
     isLocal,
     isSameUser,
@@ -35,9 +37,31 @@ const ChatBubble = (props: ChatBubbleProps) => {
     isDeleted,
     msgId,
     updatedTimestamp,
+    previousMessageCreatedTimestamp,
   } = props;
+
   let time = formatAMPM(new Date(parseInt(createdTimestamp)));
 
+  let forceShowUserNameandTimeStamp = false;
+  //calculate time difference between current message and last message
+  //if difference over 2 minutes passed from previous message
+  //then show the user and timestamp again even if same user
+  if (previousMessageCreatedTimestamp && createdTimestamp) {
+    try {
+      const startTime = new Date(parseInt(previousMessageCreatedTimestamp));
+      const endTime = new Date(parseInt(createdTimestamp));
+      let resultInMinutes = 0;
+      if (startTime && endTime) {
+        const difference = endTime.getTime() - startTime.getTime(); // This will give difference in milliseconds
+        resultInMinutes = Math.round(difference / 60000);
+      }
+      forceShowUserNameandTimeStamp =
+        resultInMinutes && !isNaN(resultInMinutes) && resultInMinutes >= 2
+          ? true
+          : false;
+    } catch (e) {}
+  }
+
   const handleUrl = (url: string) => {
     if (isWebInternal()) {
       window.open(url, '_blank');
@@ -45,9 +69,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
       Linking.openURL(url);
     }
   };
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
 
   return props?.render ? (
     props.render(
@@ -59,27 +81,50 @@ const ChatBubble = (props: ChatBubbleProps) => {
       isDeleted,
       updatedTimestamp,
       isSameUser,
+      previousMessageCreatedTimestamp,
     )
   ) : (
     <>
-      {!isSameUser && !(privateActive && selectedChatUserId) ? (
-        <Text
-          style={
-            isLocal ? style.localUsernameStyle : style.remoteUsernameStyle
-          }>
-          {isLocal
-            ? 'You'
-            : renderList[uid]
-            ? renderList[uid].name
-            : remoteUserDefaultLabel}
-        </Text>
+      {(!isSameUser || forceShowUserNameandTimeStamp) &&
+      !(chatType === ChatType.Private && privateChatUser) ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: isLocal ? 'flex-end' : 'flex-start',
+            marginBottom: 8,
+            marginTop: 14,
+            marginHorizontal: 20,
+          }}>
+          <Text style={style.userNameStyle}>
+            {isLocal
+              ? 'You'
+              : defaultContent[uid]?.name
+              ? trimText(defaultContent[uid].name)
+              : remoteUserDefaultLabel}
+          </Text>
+          <Text style={style.timestampStyle}>{time}</Text>
+        </View>
+      ) : (!isSameUser || forceShowUserNameandTimeStamp) &&
+        chatType === ChatType.Private &&
+        privateChatUser ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: isLocal ? 'flex-end' : 'flex-start',
+            marginBottom: 8,
+            marginTop: 14,
+            marginHorizontal: 20,
+          }}>
+          <Text style={style.timestampStyle}>{time}</Text>
+        </View>
       ) : (
         <></>
       )}
       <View
-        style={
-          isLocal ? style.chatBubbleLocalView : style.chatBubbleRemoteView
-        }>
+        style={[
+          isLocal ? style.chatBubbleLocalView : style.chatBubbleRemoteView,
+          //isURL(message) ? {maxWidth: '88%'} : {},
+        ]}>
         <View
           style={
             isLocal
@@ -96,8 +141,6 @@ const ChatBubble = (props: ChatBubbleProps) => {
               {message}
             </Text>
           </Hyperlink>
-          {/* <Spacer size={5} /> */}
-          <Text style={style.timestampStyle}>{time}</Text>
         </View>
       </View>
     </>
@@ -105,51 +148,29 @@ const ChatBubble = (props: ChatBubbleProps) => {
 };
 
 const style = StyleSheet.create({
-  remoteUsernameStyle: {
+  userNameStyle: {
     fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '600',
-    fontSize: ThemeConfig.FontSize.small,
-    textAlign: 'left',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    alignSelf: 'flex-start',
-    marginTop: 20,
-    marginBottom: 8,
-    marginHorizontal: 20,
-  },
-  localUsernameStyle: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: ThemeConfig.FontSize.small,
-    textAlign: 'left',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    alignSelf: 'flex-end',
-    marginTop: 20,
-    marginBottom: 8,
-    marginHorizontal: 20,
+    fontSize: ThemeConfig.FontSize.tiny,
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
   },
   timestampStyle: {
-    // position: 'absolute',
-    // bottom: 0,
-    // right: 12,
     fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.tiny,
-    textAlign: 'right',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
-    marginTop: 4,
-    marginBottom: 6,
+    color: $config.FONT_COLOR + hexadecimalTransparency['30%'],
+    marginLeft: 4,
   },
   chatBubbleRemoteView: {
     backgroundColor: $config.CARD_LAYER_2_COLOR,
-    minWidth: '30%',
-    maxWidth: '80%',
     alignSelf: 'flex-start',
     marginVertical: 2,
     marginHorizontal: 20,
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
     borderTopLeftRadius: 0,
-    borderTopRightRadius: 12,
+    borderTopRightRadius: 8,
+    maxWidth: '88%',
   },
   chatBubbleRemoteViewLayer2: {
     backgroundColor: 'transparent',
@@ -157,9 +178,9 @@ const style = StyleSheet.create({
     // height: '100%',
     paddingVertical: 8,
     paddingHorizontal: 12,
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12,
-    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    borderTopLeftRadius: 8,
     borderTopRightRadius: 0,
   },
   chatBubbleLocalViewLayer2: {
@@ -167,9 +188,9 @@ const style = StyleSheet.create({
     //height: '100%',
     paddingVertical: 8,
     paddingHorizontal: 12,
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12,
-    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    borderTopLeftRadius: 8,
     borderTopRightRadius: 0,
     backgroundColor:
       $config.PRIMARY_ACTION_BRAND_COLOR + hexadecimalTransparency['10%'],
@@ -177,21 +198,20 @@ const style = StyleSheet.create({
   chatBubbleLocalView: {
     backgroundColor:
       $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
-    minWidth: '30%',
-    maxWidth: '80%',
     alignSelf: 'flex-end',
     marginVertical: 2,
     marginHorizontal: 20,
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12,
-    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 8,
+    borderTopLeftRadius: 8,
     borderTopRightRadius: 0,
+    maxWidth: '88%',
   },
   messageStyle: {
     fontFamily: ThemeConfig.FontFamily.sansPro,
     fontWeight: '400',
     fontSize: ThemeConfig.FontSize.small,
-    lineHeight: ThemeConfig.FontSize.small * 1.4,
+    lineHeight: ThemeConfig.FontSize.small * 1.45,
     color: $config.FONT_COLOR,
   },
 });

package/template/src/subComponents/ChatContainer.tsx

@@ -9,7 +9,13 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   View,
   ScrollView,
@@ -22,19 +28,31 @@ import {
 import {RFValue} from 'react-native-responsive-fontsize';
 import ChatBubble from './ChatBubble';
 import {ChatBubbleProps} from '../components/ChatContext';
-import {RenderInterface, useLocalUid} 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, useRtc} from 'customization-api';
+import {
+  ChatType,
+  useChatUIControls,
+} from '../components/chat-ui/useChatUIControls';
+import {useContent} from 'customization-api';
 import {useChatMessages} from '../components/chat-messages/useChatMessages';
 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 {
+  chatPanelUnreadMessageText,
+  chatPanelUserOfflineText,
+  groupChatWelcomeContent,
+} from '../language/default-labels/videoCallScreenLabels';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -44,23 +62,19 @@ import {useChatNotification} from '../components/chat-notification/useChatNotifi
 const ChatContainer = (props?: {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
 }) => {
+  const info1 = useString<boolean>(groupChatWelcomeContent);
   const [scrollToEnd, setScrollToEnd] = useState(false);
-  const {dispatch} = useRtc();
+  const {dispatch} = useContext(DispatchContext);
   const [grpUnreadCount, setGrpUnreadCount] = useState(0);
   const [privateUnreadCount, setPrivateUnreadCount] = useState(0);
-  const {renderList} = useRender();
+  const {defaultContent} = useContent();
   const {messageStore, privateMessageStore} = useChatMessages();
   const messageStoreLengthRef = useRef(messageStore.length);
   const {height, width} = useWindowDimensions();
-  const {
-    groupActive,
-    privateActive,
-    selectedChatUserId: selectedUserID,
-    setPrivateActive,
-    inputActive,
-  } = useChatUIControl();
+  const {chatType, setChatType, privateChatUser, inputActive} =
+    useChatUIControls();
   const privateMessageStoreRef = useRef(
-    privateMessageStore[selectedUserID]?.length,
+    privateMessageStore[privateChatUser]?.length,
   );
   const {
     setUnreadGroupMessageCount,
@@ -69,41 +83,38 @@ const ChatContainer = (props?: {
     setUnreadIndividualMessageCount,
   } = useChatNotification();
   const localUid = useLocalUid();
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
   const scrollViewRef = useRef<ScrollView>(null);
 
   useEffect(() => {
-    if (groupActive) {
+    if (chatType === ChatType.Group) {
       setGrpUnreadCount(unreadGroupMessageCount);
       setUnreadGroupMessageCount(0);
     }
-  }, [groupActive]);
+  }, [chatType]);
 
   useEffect(() => {
-    if (selectedUserID) {
-      setPrivateUnreadCount(unreadIndividualMessageCount[selectedUserID]);
-      setUnreadIndividualMessageCount((prevState) => {
+    if (privateChatUser) {
+      setPrivateUnreadCount(unreadIndividualMessageCount[privateChatUser]);
+      setUnreadIndividualMessageCount(prevState => {
         return {
           ...prevState,
-          [selectedUserID]: 0,
+          [privateChatUser]: 0,
         };
       });
       //Once message is seen, reset lastMessageTimeStamp.
       //so whoever has unread count will show in the top of participant list
-      updateRenderListState(selectedUserID, {lastMessageTimeStamp: 0});
+      updateRenderListState(privateChatUser, {lastMessageTimeStamp: 0});
     }
-  }, [selectedUserID]);
+  }, [privateChatUser]);
 
   const updateRenderListState = (
     uid: number,
-    data: Partial<RenderInterface>,
+    data: Partial<ContentInterface>,
   ) => {
     dispatch({type: 'UpdateRenderList', value: [uid, data]});
   };
 
-  const {ChatBubbleComponent} = useCustomization((data) => {
+  const {ChatBubbleComponent} = useCustomization(data => {
     let components: {
       ChatBubbleComponent: React.ComponentType<ChatBubbleProps>;
     } = {
@@ -134,18 +145,19 @@ 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(() => {
-    if (!privateActive && !grpUnreadCount) {
+    const isPrivateActive = chatType === ChatType.Private;
+    if (!isPrivateActive && !grpUnreadCount) {
       setScrollToEnd(true);
-    } else if (privateActive && !privateUnreadCount) {
+    } else if (isPrivateActive && !privateUnreadCount) {
       setScrollToEnd(true);
     }
-  }, [privateActive, grpUnreadCount, privateUnreadCount]);
+  }, [chatType, grpUnreadCount, privateUnreadCount]);
 
   const onContentSizeChange = useCallback(() => {
     if (scrollToEnd) {
@@ -167,19 +179,19 @@ const ChatContainer = (props?: {
 
   return (
     <View style={style.containerView}>
-      {privateActive && selectedUserID ? (
+      {chatType === ChatType.Private && privateChatUser ? (
         <>
           <View style={style.participantContainer}>
             <View style={style.bgContainerStyle}>
               <UserAvatar
-                name={renderList[selectedUserID].name}
+                name={defaultContent[privateChatUser].name}
                 containerStyle={style.userAvatarContainer}
                 textStyle={style.userAvatarText}
               />
             </View>
             <View style={style.participantTextContainer}>
               <Text style={[style.participantText]} numberOfLines={1}>
-                {renderList[selectedUserID].name}
+                {defaultContent[privateChatUser].name}
               </Text>
             </View>
           </View>
@@ -189,13 +201,11 @@ const ChatContainer = (props?: {
         <></>
       )}
       <ScrollView ref={scrollViewRef} onContentSizeChange={onContentSizeChange}>
-        {!privateActive ? (
+        {chatType === ChatType.Group ? (
           <>
             <View style={style.defaultMessageContainer}>
               <Text style={style.defaultMessageText}>
-                {!messageStore?.length
-                  ? `Welcome to Chat! \nAll messages are deleted when call ends.`
-                  : 'All messages are deleted when call ends.'}
+                {info1(messageStore?.length ? false : true)}
               </Text>
             </View>
             {messageStore.map((message: any, index) => (
@@ -207,7 +217,7 @@ const ChatContainer = (props?: {
                     style={style.unreadMessageContainer}
                     onLayout={unreadViewOnLayout}>
                     <Text style={style.unreadMessageText}>
-                      {grpUnreadCount} Unread Message
+                      {grpUnreadCount} {unreadMessageLabel}
                     </Text>
                   </View>
                 ) : (
@@ -220,6 +230,12 @@ const ChatContainer = (props?: {
                       ? true
                       : false
                   }
+                  previousMessageCreatedTimestamp={
+                    index !== 0
+                      ? (messageStore[index - 1]
+                          .createdTimestamp as unknown as string)
+                      : ''
+                  }
                   message={message.msg}
                   createdTimestamp={message.createdTimestamp}
                   updatedTimestamp={message.updatedTimestamp}
@@ -236,21 +252,26 @@ const ChatContainer = (props?: {
               </>
             ))}
           </>
-        ) : privateMessageStore[selectedUserID] ? (
+        ) : (
+          <></>
+        )}
+        {chatType === ChatType.Private &&
+        privateChatUser &&
+        privateMessageStore[privateChatUser] ? (
           <>
-            {privateMessageStore[selectedUserID].map((message: any, index) => (
+            {privateMessageStore[privateChatUser].map((message: any, index) => (
               <>
                 {privateMessageStoreRef.current ===
-                  privateMessageStore[selectedUserID]?.length &&
+                  privateMessageStore[privateChatUser]?.length &&
                 privateUnreadCount &&
-                privateMessageStore[selectedUserID]?.length -
+                privateMessageStore[privateChatUser]?.length -
                   privateUnreadCount ===
                   index ? (
                   <View
                     style={style.unreadMessageContainer}
                     onLayout={unreadViewOnLayout}>
                     <Text style={style.unreadMessageText}>
-                      {privateUnreadCount} Unread Message
+                      {privateUnreadCount} {unreadMessageLabel}
                     </Text>
                   </View>
                 ) : (
@@ -260,7 +281,7 @@ const ChatContainer = (props?: {
                   isLocal={localUid === message.uid}
                   isSameUser={
                     index !== 0 &&
-                    privateMessageStore[selectedUserID][index - 1].uid ===
+                    privateMessageStore[privateChatUser][index - 1].uid ===
                       message.uid
                       ? true
                       : false
@@ -273,7 +294,7 @@ const ChatContainer = (props?: {
                   msgId={message.msgId}
                   isDeleted={message.isDeleted}
                 />
-                {privateMessageStore[selectedUserID]?.length - 1 === index ? (
+                {privateMessageStore[privateChatUser]?.length - 1 === index ? (
                   <Spacer size={10} />
                 ) : (
                   <></>
@@ -284,7 +305,7 @@ const ChatContainer = (props?: {
         ) : (
           <></>
         )}
-        {renderList[selectedUserID]?.offline && (
+        {defaultContent[privateChatUser]?.offline && (
           <View style={style.infoTextView}>
             <Text style={style.infoText}>{userOfflineLabel}</Text>
           </View>