agora-appbuilder-core 4.0.13 → 4.0.14

package/template/src/subComponents/ChatBubble.tsx

@@ -10,86 +10,24 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  Linking,
-  Image,
-  Pressable,
-  TouchableOpacity,
-  ActivityIndicator,
-} from 'react-native';
+import {View, Text, StyleSheet, Linking} from 'react-native';
 import Hyperlink from 'react-native-hyperlink';
 import {useString} from '../utils/useString';
 import {ChatBubbleProps} from '../components/ChatContext';
+import ColorContext from '../components/ColorContext';
 import {isWebInternal, trimText} from '../utils/common';
 import {useChatUIControls, useContent} from 'customization-api';
 import ThemeConfig from '../theme';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
-import {containsOnlyEmojis, formatAMPM, isURL} from '../utils';
-import {ChatType, UploadStatus} from '../components/chat-ui/useChatUIControls';
-import ImageIcon from '../atoms/ImageIcon';
-import {ChatActionMenu, MoreMenu} from './chat/ChatActionMenu';
-import ImagePopup from './chat/ImagePopup';
-import {ChatMessageType} from '../components/chat-messages/useChatMessages';
-import {
-  chatMsgDeletedText,
-  videoRoomUserFallbackText,
-} from '../language/default-labels/videoCallScreenLabels';
-
-export const AttachmentBubble = ({
-  fileName,
-  fileExt,
-  isFullWidth = false,
-  fileType = '',
-  secondaryComponent,
-}) => {
-  const {uploadStatus} = useChatUIControls();
-
-  return (
-    <View
-      style={[
-        style.fileContainer,
-        isFullWidth && {width: '100%'},
-        uploadStatus === UploadStatus.FAILURE && {
-          borderColor: $config.SEMANTIC_ERROR + hexadecimalTransparency['40%'],
-        },
-      ]}>
-      <View style={[style.fileBlock]}>
-        <ImageIcon
-          base64={true}
-          iconSize={24}
-          iconType="plain"
-          name={
-            fileType === ChatMessageType.IMAGE
-              ? 'chat_attachment_image'
-              : fileExt === 'pdf'
-              ? 'chat_attachment_pdf'
-              : fileExt === 'doc' || fileExt === 'docx'
-              ? 'chat_attachment_doc'
-              : 'chat_attachment_unknown'
-          }
-          tintColor={$config.SEMANTIC_NEUTRAL}
-        />
-        <Text style={style.fileName} numberOfLines={1} ellipsizeMode="tail">
-          {fileName}
-        </Text>
-      </View>
-      {secondaryComponent}
-    </View>
-  );
-};
+import Spacer from '../atoms/Spacer';
+import {formatAMPM, isURL} from '../utils';
+import {ChatType} from '../components/chat-ui/useChatUIControls';
+import {videoRoomUserFallbackText} from '../language/default-labels/videoCallScreenLabels';
 
 const ChatBubble = (props: ChatBubbleProps) => {
   const {defaultContent} = useContent();
+  const {primaryColor} = useContext(ColorContext);
   const {chatType, privateChatUser} = useChatUIControls();
-  const [actionMenuVisible, setActionMenuVisible] =
-    React.useState<boolean>(false);
-  const [lightboxVisible, setLightboxVisible] = React.useState(false);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const moreIconRef = React.useRef<View>(null);
-
   let {
     isLocal,
     isSameUser,
@@ -100,17 +38,10 @@ const ChatBubble = (props: ChatBubbleProps) => {
     msgId,
     updatedTimestamp,
     previousMessageCreatedTimestamp,
-    type,
-    url,
-    thumb,
-    fileName,
-    ext,
   } = props;
 
   let time = formatAMPM(new Date(parseInt(createdTimestamp)));
 
-  const chatMsgDeletedTxt = useString(chatMsgDeletedText);
-
   let forceShowUserNameandTimeStamp = false;
   //calculate time difference between current message and last message
   //if difference over 2 minutes passed from previous message
@@ -138,12 +69,6 @@ const ChatBubble = (props: ChatBubbleProps) => {
       Linking.openURL(url);
     }
   };
-
-  const handleImageLoad = () => {
-    setIsLoading(false);
-  };
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
 
   return props?.render ? (
@@ -156,11 +81,6 @@ const ChatBubble = (props: ChatBubbleProps) => {
       isDeleted,
       updatedTimestamp,
       isSameUser,
-      type,
-      thumb,
-      url,
-      fileName,
-      ext,
       previousMessageCreatedTimestamp,
     )
   ) : (
@@ -171,9 +91,9 @@ const ChatBubble = (props: ChatBubbleProps) => {
           style={{
             flexDirection: 'row',
             justifyContent: isLocal ? 'flex-end' : 'flex-start',
-            marginBottom: 4,
-            marginTop: 16,
-            marginHorizontal: 12,
+            marginBottom: 8,
+            marginTop: 14,
+            marginHorizontal: 20,
           }}>
           <Text style={style.userNameStyle}>
             {isLocal
@@ -191,9 +111,9 @@ const ChatBubble = (props: ChatBubbleProps) => {
           style={{
             flexDirection: 'row',
             justifyContent: isLocal ? 'flex-end' : 'flex-start',
-            marginBottom: 4,
-            marginTop: 16,
-            marginHorizontal: 12,
+            marginBottom: 8,
+            marginTop: 14,
+            marginHorizontal: 20,
           }}>
           <Text style={style.timestampStyle}>{time}</Text>
         </View>
@@ -206,108 +126,21 @@ const ChatBubble = (props: ChatBubbleProps) => {
           //isURL(message) ? {maxWidth: '88%'} : {},
         ]}>
         <View
-          style={[
+          style={
             isLocal
               ? style.chatBubbleLocalViewLayer2
-              : style.chatBubbleRemoteViewLayer2,
-            type === ChatMessageType.IMAGE && style.chatBubbleViewImg,
-          ]}>
-          {isDeleted ? (
-            <View style={style.deleteMsgContainer}>
-              <ImageIcon
-                iconSize={18}
-                iconType="plain"
-                name="remove"
-                tintColor={$config.SEMANTIC_NEUTRAL}
-              />
-              <Text
-                style={[
-                  style.messageStyle,
-                  {color: $config.SEMANTIC_NEUTRAL, marginLeft: 5},
-                ]}>
-                {chatMsgDeletedTxt(isLocal ? 'You' : defaultContent[uid]?.name)}
-              </Text>
-            </View>
-          ) : (
-            <Hyperlink
-              onPress={handleUrl}
-              linkStyle={{
-                color: $config.FONT_COLOR,
-                textDecorationLine: 'underline',
-              }}>
-              {type === ChatMessageType.TXT && (
-                <Text
-                  style={[
-                    style.messageStyle,
-                    containsOnlyEmojis(message)
-                      ? {fontSize: 24, lineHeight: 32}
-                      : {fontSize: 14, lineHeight: 20},
-                  ]}
-                  selectable={true}>
-                  {message}
-                </Text>
-              )}
-              {type === ChatMessageType.IMAGE && (
-                <View>
-                  <TouchableOpacity
-                    style={{justifyContent: 'center', alignItems: 'center'}}
-                    onPress={() => {
-                      !isLoading && setLightboxVisible(true);
-                    }}>
-                    {isLoading ? (
-                      <View style={style.spinnerContainer}>
-                        <ActivityIndicator
-                          size="small"
-                          color={$config.PRIMARY_ACTION_BRAND_COLOR}
-                        />
-                      </View>
-                    ) : null}
-                    <Image
-                      source={{uri: thumb}}
-                      style={style.previewImg}
-                      onLoad={handleImageLoad}
-                    />
-                  </TouchableOpacity>
-                  {lightboxVisible ? (
-                    <ImagePopup
-                      modalVisible={lightboxVisible}
-                      setModalVisible={setLightboxVisible}
-                      imageUrl={url}
-                      msgId={msgId}
-                      fileName={fileName}
-                      senderName={isLocal ? 'You' : defaultContent[uid]?.name}
-                      timestamp={createdTimestamp}
-                      isLocal={isLocal}
-                    />
-                  ) : null}
-                </View>
-              )}
-              {type === ChatMessageType.FILE && (
-                <AttachmentBubble
-                  fileName={fileName}
-                  fileExt={ext}
-                  secondaryComponent={
-                    <View>
-                      <MoreMenu
-                        ref={moreIconRef}
-                        setActionMenuVisible={setActionMenuVisible}
-                      />
-                      <ChatActionMenu
-                        actionMenuVisible={actionMenuVisible}
-                        setActionMenuVisible={setActionMenuVisible}
-                        btnRef={moreIconRef}
-                        fileName={fileName}
-                        fileUrl={url}
-                        msgId={msgId}
-                        privateChatUser={privateChatUser}
-                        isLocal={isLocal}
-                      />
-                    </View>
-                  }
-                />
-              )}
-            </Hyperlink>
-          )}
+              : style.chatBubbleRemoteViewLayer2
+          }>
+          <Hyperlink
+            onPress={handleUrl}
+            linkStyle={{
+              color: $config.FONT_COLOR,
+              textDecorationLine: 'underline',
+            }}>
+            <Text style={style.messageStyle} selectable={true}>
+              {message}
+            </Text>
+          </Hyperlink>
         </View>
       </View>
     </>
@@ -332,7 +165,7 @@ const style = StyleSheet.create({
     backgroundColor: $config.CARD_LAYER_2_COLOR,
     alignSelf: 'flex-start',
     marginVertical: 2,
-    marginHorizontal: 12,
+    marginHorizontal: 20,
     borderBottomLeftRadius: 8,
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 0,
@@ -343,7 +176,8 @@ const style = StyleSheet.create({
     backgroundColor: 'transparent',
     //  width: '100%',
     // height: '100%',
-    padding: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
     borderBottomLeftRadius: 8,
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 8,
@@ -352,7 +186,8 @@ const style = StyleSheet.create({
   chatBubbleLocalViewLayer2: {
     //width: '100%',
     //height: '100%',
-    padding: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
     borderBottomLeftRadius: 8,
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 8,
@@ -365,7 +200,7 @@ const style = StyleSheet.create({
       $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
     alignSelf: 'flex-end',
     marginVertical: 2,
-    marginHorizontal: 12,
+    marginHorizontal: 20,
     borderBottomLeftRadius: 8,
     borderBottomRightRadius: 8,
     borderTopLeftRadius: 8,
@@ -379,61 +214,6 @@ const style = StyleSheet.create({
     lineHeight: ThemeConfig.FontSize.small * 1.45,
     color: $config.FONT_COLOR,
   },
-  previewImg: {
-    width: 256,
-    height: 160,
-    resizeMode: 'cover',
-    borderRadius: 8,
-  },
-  chatBubbleViewImg: {
-    paddingHorizontal: 6,
-    paddingVertical: 6,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  fileName: {
-    color: $config.FONT_COLOR,
-    fontSize: 14,
-    lineHeight: 20,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-  },
-  fileContainer: {
-    flexDirection: 'row',
-    gap: 2,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: 8,
-    backgroundColor: $config.CARD_LAYER_4_COLOR,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['10%'],
-    width: 240,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 4,
-    },
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    elevation: 1, // For Android
-  },
-  fileBlock: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    flex: 0.8,
-  },
-  spinnerContainer: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 1,
-  },
-  deleteMsgContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    alignItems: 'center',
-  },
 });
 
 export default ChatBubble;

package/template/src/subComponents/ChatContainer.tsx

@@ -42,12 +42,12 @@ import {
   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 {useChatMessages} from '../components/chat-messages/useChatMessages';
 import {
   chatPanelUnreadMessageText,
   chatPanelUserOfflineText,
@@ -68,7 +68,7 @@ const ChatContainer = (props?: {
   const [grpUnreadCount, setGrpUnreadCount] = useState(0);
   const [privateUnreadCount, setPrivateUnreadCount] = useState(0);
   const {defaultContent} = useContent();
-  const {privateMessageStore, messageStore} = useChatMessages();
+  const {messageStore, privateMessageStore} = useChatMessages();
   const messageStoreLengthRef = useRef(messageStore.length);
   const {height, width} = useWindowDimensions();
   const {chatType, setChatType, privateChatUser, inputActive} =
@@ -240,14 +240,9 @@ const ChatContainer = (props?: {
                   createdTimestamp={message.createdTimestamp}
                   updatedTimestamp={message.updatedTimestamp}
                   uid={message.uid}
-                  key={message.msgId}
+                  key={message.ts}
                   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} />
@@ -298,11 +293,6 @@ const ChatContainer = (props?: {
                   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} />
@@ -343,7 +333,7 @@ const style = StyleSheet.create({
     borderRadius: 8,
     padding: 12,
     marginTop: 20,
-    marginHorizontal: 12,
+    marginHorizontal: 20,
     marginBottom: 0,
   },
   defaultMessageText: {

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

@@ -0,0 +1,184 @@
+/*
+********************************************
+ 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';
+import {
+  groupChatInputPlaceHolderText,
+  privateChatInputPlaceHolderText,
+} from '../language/default-labels/videoCallScreenLabels';
+
+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 groupChatInputPlaceHolder = useString(groupChatInputPlaceHolderText);
+  const privateChatInputPlaceHolder = useString(
+    privateChatInputPlaceHolderText,
+  );
+
+  const chatMessageInputPlaceholder =
+    chatType === ChatType.Private
+      ? privateChatInputPlaceHolder(defaultContent[privateChatUser]?.name)
+      : groupChatInputPlaceHolder(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;