agora-appbuilder-core 3.0.10 → 3.0.12

package/template/src/subComponents/ChatBubble.tsx

@@ -16,19 +16,13 @@ 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 ThemeConfig from '../theme';
-import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import Spacer from '../atoms/Spacer';
-import {formatAMPM} from '../utils';
+import {useRender} from 'customization-api';
 
 const ChatBubble = (props: ChatBubbleProps) => {
   const {renderList} = useRender();
   const {primaryColor} = useContext(ColorContext);
-  const {privateActive, selectedChatUserId} = useChatUIControl();
   let {
     isLocal,
-    isSameUser,
     message,
     createdTimestamp,
     uid,
@@ -36,8 +30,10 @@ const ChatBubble = (props: ChatBubbleProps) => {
     msgId,
     updatedTimestamp,
   } = props;
-  let time = formatAMPM(new Date(parseInt(createdTimestamp)));
-
+  let time =
+    new Date(parseInt(createdTimestamp)).getHours() +
+    ':' +
+    new Date(parseInt(createdTimestamp)).getMinutes();
   const handleUrl = (url: string) => {
     if (isWebInternal()) {
       window.open(url, '_blank');
@@ -48,7 +44,6 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
-
   return props?.render ? (
     props.render(
       isLocal,
@@ -58,141 +53,106 @@ const ChatBubble = (props: ChatBubbleProps) => {
       msgId,
       isDeleted,
       updatedTimestamp,
-      isSameUser,
     )
   ) : (
-    <>
-      {!isSameUser && !(privateActive && selectedChatUserId) ? (
-        <Text
-          style={
-            isLocal ? style.localUsernameStyle : style.remoteUsernameStyle
-          }>
-          {isLocal
-            ? 'You'
-            : renderList[uid]
-            ? renderList[uid].name
-            : remoteUserDefaultLabel}
+    <View>
+      <View style={isLocal ? style.chatSenderViewLocal : style.chatSenderView}>
+        <Text style={isLocal ? style.timestampTextLocal : style.timestampText}>
+          {renderList[uid] ? renderList[uid].name : remoteUserDefaultLabel} |{' '}
+          {time + ' '}
         </Text>
-      ) : (
-        <></>
-      )}
+      </View>
       <View
         style={
-          isLocal ? style.chatBubbleLocalView : style.chatBubbleRemoteView
+          isLocal
+            ? [style.chatBubbleLocal, {backgroundColor: primaryColor}]
+            : style.chatBubble
         }>
-        <View
-          style={
-            isLocal
-              ? style.chatBubbleLocalViewLayer2
-              : style.chatBubbleRemoteViewLayer2
-          }>
-          <Hyperlink
-            onPress={handleUrl}
-            linkStyle={{
-              color: $config.FONT_COLOR,
-              textDecorationLine: 'underline',
-            }}>
-            <Text style={style.messageStyle} selectable={true}>
-              {message}
-            </Text>
-          </Hyperlink>
-          {/* <Spacer size={5} /> */}
-          <Text style={style.timestampStyle}>{time}</Text>
-        </View>
+        <Hyperlink
+          onPress={handleUrl}
+          linkStyle={{
+            color: !isLocal
+              ? $config.PRIMARY_FONT_COLOR
+              : $config.SECONDARY_FONT_COLOR,
+            textDecorationLine: 'underline',
+          }}>
+          <Text
+            style={isLocal ? style.whiteText : style.blackText}
+            selectable={true}>
+            {message}
+          </Text>
+        </Hyperlink>
       </View>
-    </>
+    </View>
   );
 };
 
 const style = StyleSheet.create({
-  remoteUsernameStyle: {
-    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,
+  full: {
+    flex: 1,
+  },
+  chatSenderViewLocal: {
+    // flex: 2,
+    marginVertical: 2,
+    flexDirection: 'row',
+    marginRight: 15,
+    // marginLeft: 30,
+    justifyContent: 'flex-end',
   },
-  localUsernameStyle: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: ThemeConfig.FontSize.small,
+  chatSenderView: {
+    // flex: 2,
+    marginVertical: 2,
+    flexDirection: 'row',
+    marginRight: 30,
+    marginLeft: 15,
+  },
+  timestampText: {
+    color: $config.PRIMARY_FONT_COLOR + '60',
+    fontWeight: '500',
+    fontSize: 12,
+    flex: 1,
     textAlign: 'left',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    alignSelf: 'flex-end',
-    marginTop: 20,
-    marginBottom: 8,
-    marginHorizontal: 20,
   },
-  timestampStyle: {
-    // position: 'absolute',
-    // bottom: 0,
-    // right: 12,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.tiny,
+  timestampTextLocal: {
+    color: $config.PRIMARY_FONT_COLOR + '60',
+    fontWeight: '500',
+    fontSize: 12,
+    flex: 1,
     textAlign: 'right',
-    color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled,
-    marginTop: 4,
-    marginBottom: 6,
   },
-  chatBubbleRemoteView: {
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
-    minWidth: '30%',
+  chatBubble: {
+    backgroundColor: $config.PRIMARY_FONT_COLOR + '20',
+    flex: 1,
+    // width: 'max-content',
     maxWidth: '80%',
     alignSelf: 'flex-start',
-    marginVertical: 2,
-    marginHorizontal: 20,
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 12,
-  },
-  chatBubbleRemoteViewLayer2: {
-    backgroundColor: 'transparent',
-    //  width: '100%',
-    // height: '100%',
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12,
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 0,
+    display: 'flex',
+    marginVertical: 5,
+    padding: 8,
+    marginRight: 30,
+    marginLeft: 15,
+    borderRadius: 10,
   },
-  chatBubbleLocalViewLayer2: {
-    //width: '100%',
-    //height: '100%',
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12,
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 0,
-    backgroundColor:
-      $config.PRIMARY_ACTION_BRAND_COLOR + hexadecimalTransparency['10%'],
-  },
-  chatBubbleLocalView: {
-    backgroundColor:
-      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
-    minWidth: '30%',
+  chatBubbleLocal: {
+    backgroundColor: $config.PRIMARY_COLOR,
     maxWidth: '80%',
+    flex: 1,
+    display: 'flex',
     alignSelf: 'flex-end',
-    marginVertical: 2,
-    marginHorizontal: 20,
-    borderBottomLeftRadius: 12,
-    borderBottomRightRadius: 12,
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 0,
+    marginVertical: 5,
+    padding: 8,
+    marginRight: 15,
+    marginLeft: 30,
+    borderRadius: 10,
+  },
+  whiteText: {
+    color: $config.SECONDARY_FONT_COLOR,
+    fontWeight: '500',
   },
-  messageStyle: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.small,
-    lineHeight: ThemeConfig.FontSize.small * 1.4,
-    color: $config.FONT_COLOR,
+  blackText: {
+    color: $config.PRIMARY_FONT_COLOR,
+    opacity: 1,
+    fontWeight: '500',
   },
 });
 

package/template/src/subComponents/ChatContainer.tsx

@@ -9,7 +9,7 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useRef} from 'react';
 import {
   View,
   ScrollView,
@@ -22,19 +22,15 @@ 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 {useLocalUid} from '../../agora-rn-uikit';
+import {ImageIcon} 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 {useRender} 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';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -44,65 +40,20 @@ import {useChatNotification} from '../components/chat-notification/useChatNotifi
 const ChatContainer = (props?: {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
 }) => {
-  const [scrollToEnd, setScrollToEnd] = useState(false);
-  const {dispatch} = useRtc();
-  const [grpUnreadCount, setGrpUnreadCount] = useState(0);
-  const [privateUnreadCount, setPrivateUnreadCount] = useState(0);
   const {renderList} = useRender();
   const {messageStore, privateMessageStore} = useChatMessages();
-  const messageStoreLengthRef = useRef(messageStore.length);
   const {height, width} = useWindowDimensions();
   const {
-    groupActive,
     privateActive,
     selectedChatUserId: selectedUserID,
     setPrivateActive,
-    inputActive,
   } = useChatUIControl();
-  const privateMessageStoreRef = useRef(
-    privateMessageStore[selectedUserID]?.length,
-  );
-  const {
-    setUnreadGroupMessageCount,
-    unreadGroupMessageCount,
-    unreadIndividualMessageCount,
-    setUnreadIndividualMessageCount,
-  } = useChatNotification();
   const localUid = useLocalUid();
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
   const scrollViewRef = useRef<ScrollView>(null);
 
-  useEffect(() => {
-    if (groupActive) {
-      setGrpUnreadCount(unreadGroupMessageCount);
-      setUnreadGroupMessageCount(0);
-    }
-  }, [groupActive]);
-
-  useEffect(() => {
-    if (selectedUserID) {
-      setPrivateUnreadCount(unreadIndividualMessageCount[selectedUserID]);
-      setUnreadIndividualMessageCount((prevState) => {
-        return {
-          ...prevState,
-          [selectedUserID]: 0,
-        };
-      });
-      //Once message is seen, reset lastMessageTimeStamp.
-      //so whoever has unread count will show in the top of participant list
-      updateRenderListState(selectedUserID, {lastMessageTimeStamp: 0});
-    }
-  }, [selectedUserID]);
-
-  const updateRenderListState = (
-    uid: number,
-    data: Partial<RenderInterface>,
-  ) => {
-    dispatch({type: 'UpdateRenderList', value: [uid, data]});
-  };
-
   const {ChatBubbleComponent} = useCustomization((data) => {
     let components: {
       ChatBubbleComponent: React.ComponentType<ChatBubbleProps>;
@@ -137,150 +88,66 @@ const ChatContainer = (props?: {
   //commented for v1 release
   //const userOfflineLabel = useString('userOfflineLabel')();
   const userOfflineLabel = 'User is offline';
-
-  //if we don't have unread count then enable scroll to end
-  useEffect(() => {
-    if (!privateActive && !grpUnreadCount) {
-      setScrollToEnd(true);
-    } else if (privateActive && !privateUnreadCount) {
-      setScrollToEnd(true);
-    }
-  }, [privateActive, 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 && selectedUserID ? (
-        <>
-          <View style={style.participantContainer}>
-            <View style={style.bgContainerStyle}>
-              <UserAvatar
-                name={renderList[selectedUserID].name}
-                containerStyle={style.userAvatarContainer}
-                textStyle={style.userAvatarText}
-              />
-            </View>
-            <View style={style.participantTextContainer}>
-              <Text style={[style.participantText]} numberOfLines={1}>
-                {renderList[selectedUserID].name}
-              </Text>
-            </View>
+      {privateActive && (
+        <TouchableOpacity
+          style={style.row}
+          onPress={() => setPrivateActive(false)}>
+          <View style={style.backButton}>
+            <ImageIcon style={[style.backIcon]} name={'backBtn'} />
           </View>
-          <Spacer size={10} />
-        </>
-      ) : (
-        <></>
+          <View style={{flex: 1}}>
+            <TextWithTooltip
+              style={[
+                style.name,
+                {
+                  flexShrink: 1,
+                  fontSize: RFValue(16, height > width ? height : width),
+                },
+              ]}
+              value={
+                renderList[selectedUserID]
+                  ? renderList[selectedUserID]?.name + ' '
+                  : remoteUserDefaultLabel + ' '
+              }
+            />
+          </View>
+        </TouchableOpacity>
       )}
-      <ScrollView ref={scrollViewRef} onContentSizeChange={onContentSizeChange}>
+      <ScrollView
+        ref={scrollViewRef}
+        onContentSizeChange={() => {
+          scrollViewRef.current?.scrollToEnd({animated: true});
+        }}>
         {!privateActive ? (
-          <>
-            <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.'}
-              </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} Unread Message
-                    </Text>
-                  </View>
-                ) : (
-                  <></>
-                )}
-                <ChatBubbleComponent
-                  isLocal={localUid === message.uid}
-                  isSameUser={
-                    index !== 0 && messageStore[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}
-                />
-                {messageStore?.length - 1 === index ? (
-                  <Spacer size={10} />
-                ) : (
-                  <></>
-                )}
-              </>
-            ))}
-          </>
+          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, index) => (
-              <>
-                {privateMessageStoreRef.current ===
-                  privateMessageStore[selectedUserID]?.length &&
-                privateUnreadCount &&
-                privateMessageStore[selectedUserID]?.length -
-                  privateUnreadCount ===
-                  index ? (
-                  <View
-                    style={style.unreadMessageContainer}
-                    onLayout={unreadViewOnLayout}>
-                    <Text style={style.unreadMessageText}>
-                      {privateUnreadCount} Unread Message
-                    </Text>
-                  </View>
-                ) : (
-                  <></>
-                )}
-                <ChatBubbleComponent
-                  isLocal={localUid === message.uid}
-                  isSameUser={
-                    index !== 0 &&
-                    privateMessageStore[selectedUserID][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}
-                />
-                {privateMessageStore[selectedUserID]?.length - 1 === index ? (
-                  <Spacer size={10} />
-                ) : (
-                  <></>
-                )}
-              </>
-            ))}
-          </>
+          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}
+            />
+          ))
         ) : (
           <></>
         )}
@@ -295,82 +162,42 @@ const ChatContainer = (props?: {
 };
 
 const style = StyleSheet.create({
-  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: 20,
-    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: {
+  containerView: {flex: 8},
+  row: {
     flexDirection: 'row',
-    overflow: 'hidden',
-    justifyContent: 'space-between',
-    backgroundColor:
-      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['10%'],
+    marginTop: 2,
+    alignItems: 'baseline',
+    paddingVertical: 10,
+    ...Platform.select({
+      android: {
+        height: 40,
+      },
+      ios: {
+        height: 40,
+      },
+    }),
   },
-  participantTextContainer: {
-    flex: 1,
-    alignSelf: 'center',
-    marginRight: 8,
+  backButton: {
+    marginHorizontal: 10,
+    justifyContent: 'center',
+    alignSelf: 'flex-end',
   },
-  participantText: {
-    // flex: 1,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 14,
-    color: $config.FONT_COLOR,
+  name: {
+    fontWeight: isWebInternal() ? '500' : '700',
+    color: $config.PRIMARY_FONT_COLOR,
     textAlign: 'left',
-    flexShrink: 1,
+    marginRight: 10,
+  },
+  backIcon: {
+    width: 20,
+    height: 20,
   },
-  containerView: {flex: 8},
   infoTextView: {
     marginVertical: 2,
     flexDirection: 'row',
   },
   infoText: {
-    color: $config.FONT_COLOR + hexadecimalTransparency['60%'],
+    color: $config.PRIMARY_FONT_COLOR + '60',
     fontWeight: '500',
     fontSize: 14,
     flex: 1,