agora-appbuilder-core 3.0.8 → 4.0.0-api.0

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,26 @@ 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 {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
@@ -40,20 +57,60 @@ import {useChatMessages} from '../components/chat-messages/useChatMessages';
 const ChatContainer = (props?: {
   chatBubble?: React.ComponentType<ChatBubbleProps>;
 }) => {
-  const {renderList} = useRender();
+  const [scrollToEnd, setScrollToEnd] = useState(false);
+  const {dispatch} = useContext(DispatchContext);
+  const [grpUnreadCount, setGrpUnreadCount] = useState(0);
+  const [privateUnreadCount, setPrivateUnreadCount] = useState(0);
+  const {defaultContent} = useContent();
   const {messageStore, privateMessageStore} = 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);
 
+  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>;
@@ -88,70 +145,160 @@ 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(() => {
+    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}>
+                {!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} />
+                ) : (
+                  <></>
+                )}
+              </>
+            ))}
+          </>
         ) : (
           <></>
         )}
-        {renderList[selectedUserID]?.offline && (
+        {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} Unread Message
+                    </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}
+                />
+                {privateMessageStore[privateChatUser]?.length - 1 === index ? (
+                  <Spacer size={10} />
+                ) : (
+                  <></>
+                )}
+              </>
+            ))}
+          </>
+        ) : (
+          <></>
+        )}
+        {defaultContent[privateChatUser]?.offline && (
           <View style={style.infoTextView}>
             <Text style={style.infoText}>{userOfflineLabel}</Text>
           </View>
@@ -162,42 +309,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: 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: {
     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,

package/template/src/subComponents/ChatInput.ios.tsx

@@ -0,0 +1,175 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+import React, {useContext, useEffect, useRef} from 'react';
+import {View, TouchableOpacity, StyleSheet, Image} from 'react-native';
+import ColorContext from '../components/ColorContext';
+import TextInput from '../atoms/TextInput';
+import {useString} from '../utils/useString';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
+import {isIOS, isValidReactComponent, isWebInternal} from '../utils/common';
+import {useCustomization} from 'customization-implementation';
+import {
+  ChatType,
+  useChatUIControls,
+} from '../components/chat-ui/useChatUIControls';
+import {useContent, useUserName} from 'customization-api';
+import ImageIcon from '../atoms/ImageIcon';
+import ThemeConfig from '../theme';
+import {BottomSheetTextInput} from '@gorhom/bottom-sheet';
+
+export interface ChatSendButtonProps {
+  render?: (onPress: () => void) => JSX.Element;
+}
+
+export const ChatSendButton = (props: ChatSendButtonProps) => {
+  const {privateChatUser, message, setMessage, inputActive} =
+    useChatUIControls();
+  const {sendChatMessage} = useChatMessages();
+  const onPress = () => {
+    if (!privateChatUser) {
+      sendChatMessage(message);
+      setMessage && setMessage('');
+    } else {
+      sendChatMessage(message, privateChatUser);
+      setMessage && setMessage('');
+    }
+  };
+  return props?.render ? (
+    props.render(onPress)
+  ) : (
+    <TouchableOpacity style={[style.chatInputButton]} onPress={onPress}>
+      <ImageIcon
+        iconType="plain"
+        tintColor={
+          inputActive
+            ? $config.PRIMARY_ACTION_BRAND_COLOR
+            : $config.SEMANTIC_NEUTRAL
+        }
+        name={'send'}
+      />
+    </TouchableOpacity>
+  );
+};
+export interface ChatTextInputProps {
+  render?: (
+    message: string,
+    onChangeText: (text: string) => void,
+    onSubmitEditing: () => void,
+    chatMessageInputPlaceholder: string,
+  ) => JSX.Element;
+}
+export const ChatTextInput = (props: ChatTextInputProps) => {
+  let chatInputRef = useRef(null);
+  const {privateChatUser, message, setMessage, chatType, inputActive} =
+    useChatUIControls();
+  const {sendChatMessage} = useChatMessages();
+  const {defaultContent} = useContent();
+  //commented for v1 release
+  // const chatMessageInputPlaceholder = useString(
+  //   'chatMessageInputPlaceholder',
+  // )();
+  const [name] = useUserName();
+  const chatMessageInputPlaceholder =
+    chatType === ChatType.Private
+      ? `Private Message to ${defaultContent[privateChatUser].name}`
+      : `Chat publicly as ${name}...`;
+  const onChangeText = (text: string) => setMessage(text);
+  const onSubmitEditing = () => {
+    if (!privateChatUser) {
+      sendChatMessage(message);
+      setMessage('');
+    } else {
+      sendChatMessage(message, privateChatUser);
+      setMessage('');
+    }
+  };
+  const {setInputActive} = useChatUIControls();
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (isWebInternal()) {
+        chatInputRef?.current?.focus();
+      }
+    });
+  }, []);
+
+  return props?.render ? (
+    props.render(
+      message,
+      onChangeText,
+      onSubmitEditing,
+      chatMessageInputPlaceholder,
+    )
+  ) : (
+    <BottomSheetTextInput
+      onFocus={() => setInputActive(true)}
+      onBlur={() => setInputActive(false)}
+      value={message}
+      onChangeText={onChangeText}
+      style={{
+        minHeight: 56,
+        borderRadius: 0,
+        borderBottomLeftRadius: 12,
+        borderWidth: 0,
+        color: $config.FONT_COLOR,
+        textAlign: 'left',
+        paddingVertical: 21,
+        paddingLeft: 20,
+        flex: 1,
+        alignSelf: 'center',
+        fontFamily: ThemeConfig.FontFamily.sansPro,
+        fontWeight: '400',
+      }}
+      blurOnSubmit={false}
+      onSubmitEditing={onSubmitEditing}
+      placeholder={chatMessageInputPlaceholder}
+      placeholderTextColor={
+        $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
+      }
+      autoCorrect={false}
+    />
+  );
+};
+
+/**
+ * Input component for the Chat interface
+ */
+export const ChatInput = () => {
+  const {inputActive} = useChatUIControls();
+  return (
+    <View style={[style.inputView, inputActive ? style.inputActiveView : {}]}>
+      <ChatTextInput />
+      <ChatSendButton />
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  inputActiveView: {
+    borderTopWidth: 1,
+    borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  inputView: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    borderTopWidth: 1,
+    borderTopColor: 'transparent',
+  },
+  chatInputButton: {
+    flex: 0.1,
+    borderBottomRightRadius: 12,
+    alignSelf: 'center',
+    marginRight: 16,
+  },
+});
+export default ChatInput;