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

package/template/src/subComponents/ChatInput.tsx

@@ -9,49 +9,61 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useContext} from 'react';
-import {View, TouchableOpacity, StyleSheet, Image} from 'react-native';
-import ColorContext from '../components/ColorContext';
+import React, {useEffect, useRef} from 'react';
+import {
+  View,
+  StyleSheet,
+  ActivityIndicator,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
 import TextInput from '../atoms/TextInput';
-import icons from '../assets/icons';
 import {useString} from '../utils/useString';
-import {useChatMessages} from '../components/chat-messages/useChatMessages';
-import {isValidReactComponent} from '../utils/common';
-import {useCustomization} from 'customization-implementation';
-import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
+import {isWeb, isWebInternal} from '../utils/common';
+import {
+  ChatType,
+  UploadStatus,
+  useChatUIControls,
+  MIN_HEIGHT,
+  MAX_HEIGHT,
+  LINE_HEIGHT,
+  MAX_TEXT_MESSAGE_SIZE,
+  MAX_FILES_UPLOAD,
+} from '../components/chat-ui/useChatUIControls';
+import {useContent, useRoomInfo, useUserName} from 'customization-api';
+import ImageIcon from '../atoms/ImageIcon';
+import ThemeConfig from '../theme';
+import {ChatEmojiPicker, ChatEmojiButton} from './chat/ChatEmoji';
+import {useChatConfigure} from '../components/chat/chatConfigure';
+import hexadecimalTransparency from '../utils/hexadecimalTransparency';
+import {ChatAttachmentButton} from './chat/ChatAttachment';
+import ChatSendButton, {handleChatSend} from './chat/ChatSendButton';
+import {
+  ChatMessageType,
+  SDKChatType,
+} from '../components/chat-messages/useChatMessages';
+import {
+  groupChatLiveInputPlaceHolderText,
+  groupChatMeetingInputPlaceHolderText,
+  privateChatInputPlaceHolderText,
+  chatSendErrorTextSizeToastHeading,
+  chatSendErrorTextSizeToastSubHeading,
+} from '../language/default-labels/videoCallScreenLabels';
+import ChatUploadStatus from './chat/ChatUploadStatus';
+import {AttachmentBubble} from './ChatBubble';
+import IconButton from '../atoms/IconButton';
+import Toast from '../../react-native-toast-message';
 
-export interface ChatSendButtonProps {
-  render?: (onPress: () => void) => JSX.Element;
-}
-
-export const ChatSendButton = (props: ChatSendButtonProps) => {
-  const {
-    selectedChatUserId: selectedUserId,
-    message,
-    setMessage,
-  } = useChatUIControl();
-  const {sendChatMessage} = useChatMessages();
-  const onPress = () => {
-    if (!selectedUserId) {
-      sendChatMessage(message);
-      setMessage && setMessage('');
-    } else {
-      sendChatMessage(message, selectedUserId);
-      setMessage && setMessage('');
-    }
-  };
-  return props?.render ? (
-    props.render(onPress)
-  ) : (
-    <TouchableOpacity style={style.chatInputButton} onPress={onPress}>
-      <Image
-        source={{
-          uri: icons.send,
-        }}
-        style={style.chatInputButtonIcon}
-        resizeMode={'contain'}
-      />
-    </TouchableOpacity>
+const ChatPanel = () => {
+  return (
+    <View style={style.chatPanelContainer}>
+      <View style={style.chatPanel}>
+        <ChatAttachmentButton />
+        <ChatEmojiButton />
+      </View>
+      <ChatSendButton />
+    </View>
   );
 };
 export interface ChatTextInputProps {
@@ -63,160 +75,300 @@ export interface ChatTextInputProps {
   ) => JSX.Element;
 }
 export const ChatTextInput = (props: ChatTextInputProps) => {
+  let chatInputRef = useRef(null);
   const {
-    selectedChatUserId: selectedUserId,
+    privateChatUser: selectedUserId,
     message,
     setMessage,
-  } = useChatUIControl();
-  const {sendChatMessage} = useChatMessages();
-  //commented for v1 release
-  // const chatMessageInputPlaceholder = useString(
-  //   'chatMessageInputPlaceholder',
-  // )();
-  const chatMessageInputPlaceholder = 'Type your message..';
-  const onChangeText = (text: string) => setMessage(text);
-  const onSubmitEditing = () => {
-    if (!selectedUserId) {
-      sendChatMessage(message);
-      setMessage('');
-    } else {
-      sendChatMessage(message, selectedUserId);
-      setMessage('');
+    inputActive,
+    setInputActive,
+    chatType,
+    uploadStatus,
+    uploadedFiles,
+    setUploadedFiles,
+    inputHeight,
+    setInputHeight,
+    setShowEmojiPicker,
+    showEmojiPicker,
+  } = useChatUIControls();
+  const {defaultContent} = useContent();
+  const {sendChatSDKMessage, uploadAttachment} = useChatConfigure();
+
+  React.useEffect(() => {
+    if (message.length === 0) {
+      setInputHeight(MIN_HEIGHT);
     }
+  }, [message]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (isWebInternal()) {
+        chatInputRef?.current?.focus();
+      }
+    });
+  }, []);
+
+  const {data} = useRoomInfo();
+  const [name] = useUserName();
+  const toastHeadingSize = useString(chatSendErrorTextSizeToastHeading)();
+  const errorSubHeadingSize = useString(chatSendErrorTextSizeToastSubHeading);
+
+  const isUploadStatusShown =
+    uploadedFiles.filter(
+      file =>
+        file.upload_status === UploadStatus.IN_PROGRESS ||
+        file.upload_status === UploadStatus.FAILURE,
+    ).length > 0 || uploadedFiles.length === MAX_FILES_UPLOAD;
+
+  const groupChatInputPlaceHolder = $config.EVENT_MODE
+    ? useString(groupChatLiveInputPlaceHolderText)
+    : useString(groupChatMeetingInputPlaceHolderText);
+  const privateChatInputPlaceHolder = useString(
+    privateChatInputPlaceHolderText,
+  );
+
+  const chatMessageInputPlaceholder =
+    chatType === ChatType.Private
+      ? privateChatInputPlaceHolder(defaultContent[selectedUserId]?.name)
+      : groupChatInputPlaceHolder(name);
+
+  const onChangeText = (text: string) => {
+    setMessage(text);
   };
 
-  return props?.render ? (
-    props.render(
+  const onSubmitEditing = () => {
+    handleChatSend({
+      sendChatSDKMessage,
+      selectedUserId,
       message,
-      onChangeText,
-      onSubmitEditing,
-      chatMessageInputPlaceholder,
-    )
-  ) : (
+      setMessage,
+      inputActive,
+      uploadStatus,
+      uploadedFiles,
+      setUploadedFiles,
+      setInputHeight,
+      data,
+      setShowEmojiPicker,
+      toastHeadingSize,
+      errorSubHeadingSize,
+    });
+  };
+
+  // with multiline textinput enter prints /n
+  const handleKeyPress = ({nativeEvent}) => {
+    if (nativeEvent.key === 'Enter' && !nativeEvent.shiftKey) {
+      onSubmitEditing();
+      nativeEvent.preventDefault();
+    }
+  };
+
+  const handleContentSizeChange = e => {
+    const contentHeight = e.nativeEvent.contentSize.height;
+    const lines = Math.floor((contentHeight - 24) / LINE_HEIGHT);
+    const newHeight = lines < 5 ? LINE_HEIGHT * lines + 24 + 2 : MAX_HEIGHT; // Assuming lineHeight is LINE_HEIGHT
+    setInputHeight(newHeight);
+  };
+
+  const handleUploadRetry = () => {
+    uploadAttachment(uploadedFiles[0]);
+  };
+
+  const renderTextInput = (style = {}) => (
     <TextInput
+      setRef={ref => (chatInputRef.current = ref)}
+      onFocus={() => setInputActive(true)}
+      onBlur={() => setInputActive(false)}
       value={message}
+      multiline={true}
       onChangeText={onChangeText}
+      textAlignVertical="top"
+      scrollEnabled={true}
       style={{
-        borderRadius: 10,
-        backgroundColor: $config.PRIMARY_FONT_COLOR + '10',
-        borderWidth: 1,
-        color: $config.PRIMARY_FONT_COLOR,
+        color: $config.FONT_COLOR,
         textAlign: 'left',
-        height: 40,
-        paddingVertical: 10,
-        flex: 1,
+        width: '100%',
         alignSelf: 'center',
+        fontFamily: ThemeConfig.FontFamily.sansPro,
+        fontWeight: '400',
+        height: inputHeight,
+        padding: 12,
+        fontSize: ThemeConfig.FontSize.small,
+        lineHeight: LINE_HEIGHT,
+        borderWidth: 1,
+        borderColor:
+          $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['40%'],
+        backgroundColor: $config.CARD_LAYER_2_COLOR,
+        borderRadius: 8,
+        borderTopRightRadius: isUploadStatusShown ? 0 : 8,
+        borderTopLeftRadius: isUploadStatusShown ? 0 : 8,
+        maxHeight: MAX_HEIGHT,
+        ...style,
       }}
       blurOnSubmit={false}
       onSubmitEditing={onSubmitEditing}
       placeholder={chatMessageInputPlaceholder}
-      placeholderTextColor={$config.PRIMARY_FONT_COLOR}
+      placeholderTextColor={$config.FONT_COLOR + hexadecimalTransparency['40%']}
       autoCorrect={false}
+      onKeyPress={handleKeyPress}
+      onContentSizeChange={handleContentSizeChange}
+    />
+  );
+
+  const renderAttachmentBubble = (file, index) => (
+    <AttachmentBubble
+      key={file.file_id}
+      fileName={file.file_name}
+      fileExt={file.file_ext}
+      isFullWidth={true}
+      fileType={file.file_type}
+      secondaryComponent={
+        file.upload_status === UploadStatus.IN_PROGRESS ? (
+          <ActivityIndicator />
+        ) : file.upload_status === UploadStatus.FAILURE ? (
+          <TouchableOpacity onPress={handleUploadRetry}>
+            <Text style={style.btnRetry}>{'Retry'}</Text>
+          </TouchableOpacity>
+        ) : file.upload_status === UploadStatus.SUCCESS ? (
+          <View>
+            <IconButton
+              hoverEffect={true}
+              hoverEffectStyle={{
+                backgroundColor:
+                  $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['20%'],
+                borderRadius: 20,
+              }}
+              iconProps={{
+                iconType: 'plain',
+                iconSize: 20,
+                iconContainerStyle: {
+                  padding: 2,
+                },
+                name: 'close',
+                tintColor: $config.SECONDARY_ACTION_COLOR,
+              }}
+              onPress={() => {
+                setUploadedFiles(files =>
+                  files.filter(uploadedFile => {
+                    return uploadedFile.file_id !== file.file_id;
+                  }),
+                );
+              }}
+            />
+          </View>
+        ) : null
+      }
+      containerStyle={{
+        marginBottom: index !== uploadedFiles.length - 1 ? 6 : 0,
+      }}
     />
   );
+
+  return props?.render ? (
+    props.render(
+      message,
+      onChangeText,
+      onSubmitEditing,
+      chatMessageInputPlaceholder,
+    )
+  ) : (
+    <>
+      {uploadedFiles.length > 0 ? (
+        <View
+          style={[
+            style.attachmentContainer,
+
+            isUploadStatusShown
+              ? {
+                  borderTopLeftRadius: 0,
+                  borderTopRightRadius: 0,
+                  borderTopWidth: 0,
+                }
+              : {borderRadius: 8, borderTopWidth: 1},
+          ]}>
+          <ScrollView style={{maxHeight: showEmojiPicker ? 120 : '100%'}}>
+            {uploadedFiles.map(renderAttachmentBubble)}
+            {renderTextInput({borderWidth: 0, padddingLeft: 0})}
+          </ScrollView>
+        </View>
+      ) : (
+        renderTextInput()
+      )}
+    </>
+  );
 };
 
 /**
  * Input component for the Chat interface
  */
-const ChatInput = (props: {
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
-}) => {
-  const {primaryColor} = useContext(ColorContext);
-  const {ChatInputComponent, ChatSendButtonComponent} = useCustomization(
-    (data) => {
-      let components: {
-        ChatInputComponent: React.ComponentType<ChatTextInputProps>;
-        ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>;
-      } = {
-        ChatInputComponent: ChatTextInput,
-        ChatSendButtonComponent: ChatSendButton,
-      };
-      if (
-        data?.components?.videoCall &&
-        typeof data?.components?.videoCall === 'object'
-      ) {
-        if (
-          data?.components?.videoCall?.chat &&
-          typeof data?.components?.videoCall?.chat === 'object'
-        ) {
-          if (
-            data?.components?.videoCall?.chat?.chatInput &&
-            typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
-            isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
-          ) {
-            components.ChatInputComponent =
-              data?.components?.videoCall?.chat?.chatInput;
-          }
-          if (
-            data?.components?.videoCall?.chat?.chatSendButton &&
-            typeof data?.components?.videoCall?.chat?.chatSendButton !==
-              'object' &&
-            isValidReactComponent(
-              data?.components?.videoCall?.chat?.chatSendButton,
-            )
-          ) {
-            components.ChatSendButtonComponent =
-              data?.components?.videoCall?.chat?.chatSendButton;
-          }
-        }
-      } else {
-        if (props?.chatInput && isValidReactComponent(props.chatInput)) {
-          components.ChatInputComponent = props.chatInput;
-        }
-        if (
-          props?.chatSendButton &&
-          isValidReactComponent(props.chatSendButton)
-        ) {
-          components.ChatSendButtonComponent = props.chatSendButton;
-        }
-      }
-      return components;
-    },
-  );
+export const ChatInput = () => {
+  const {inputActive, showEmojiPicker} = useChatUIControls();
 
   return (
-    <View style={[style.inputView, {borderColor: primaryColor, height: 40}]}>
-      <ChatInputComponent />
-      <ChatSendButtonComponent />
+    <View
+      style={[
+        {flex: 1},
+        showEmojiPicker
+          ? {backgroundColor: 'transparent'}
+          : {backgroundColor: $config.CARD_LAYER_1_COLOR},
+        // inputActive ? style.inputActiveView : {},
+      ]}>
+      {showEmojiPicker && <ChatEmojiPicker />}
+      <View style={style.inputView}>
+        <ChatUploadStatus />
+        <ChatTextInput />
+        <ChatPanel />
+      </View>
     </View>
   );
 };
 
 const style = StyleSheet.create({
-  inputView: {
-    width: '95%',
-    flexDirection: 'row',
-    marginHorizontal: 10,
-    paddingVertical: 15,
+  inputActiveView: {
+    borderTopWidth: 1,
+    borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  attachmentContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 12,
+
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['40%'],
+    borderRadius: 8,
   },
-  chatInput: {
+  inputView: {
     flex: 1,
-    width: '100%',
-    backgroundColor: $config.PRIMARY_FONT_COLOR,
-    color: $config.PRIMARY_FONT_COLOR,
+    flexDirection: 'column',
+    borderTopWidth: 1,
+    borderTopColor: 'transparent',
+    paddingHorizontal: 12,
+    paddingBottom: 8,
   },
   chatInputButton: {
-    width: 30,
-    marginRight: 0,
-    height: 30,
-    borderRadius: 30,
+    flex: 0.1,
+    borderBottomRightRadius: 12,
     alignSelf: 'center',
-    marginHorizontal: 10,
-    backgroundColor: $config.PRIMARY_COLOR,
-    display: 'flex',
-    justifyContent: 'center',
+    marginRight: 16,
   },
-  chatInputButtonIcon: {
-    width: '80%',
-    height: '80%',
-    alignSelf: 'center',
-    transform: [
-      {
-        translateX: -2,
-      },
-    ],
+  emojiPicker: {
+    width: '100%',
+  },
+  chatPanelContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 12,
+    paddingTop: 4,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+  },
+  chatPanel: {
+    flexDirection: 'row',
+  },
+  btnRetry: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: 12,
+    fontWeight: '600',
   },
 });
 export default ChatInput;

package/template/src/subComponents/Checkbox.native.tsx

@@ -1,36 +1,47 @@
-/*
-********************************************
- 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} from 'react';
-import CheckBox from '@react-native-community/checkbox';
+// /*
+// ********************************************
+//  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} from 'react';
+// import CheckBox from '@react-native-community/checkbox';
+// import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 
-/**
- * A checkbox component for mobile
- */
-const Checkbox = (props: any) => {
-  const urlCheckbox = props.value;
-  const setUrlCheckbox = props.onValueChange;
-  return (
-    <CheckBox
-      value={urlCheckbox}
-      onValueChange={setUrlCheckbox}
-      disabled={props?.disabled}
-      tintColors={{
-        true: props?.disabled ? 'grey' : $config.PRIMARY_COLOR,
-        false: props?.disabled ? 'grey' : $config.PRIMARY_FONT_COLOR + 80,
-      }}
-      tintColor={props?.disabled ? 'grey' : $config.PRIMARY_FONT_COLOR + 80}
-      onCheckColor={props?.disabled ? 'grey' : $config.PRIMARY_COLOR}
-      onTintColor={props?.disabled ? 'grey' : $config.PRIMARY_COLOR}
-    />
-  );
-};
-export default Checkbox;
+// /**
+//  * A checkbox component for mobile
+//  */
+// const Checkbox = (props: any) => {
+//   const urlCheckbox = props.value;
+//   const setUrlCheckbox = props.onValueChange;
+//   return (
+//     <CheckBox
+//       value={urlCheckbox}
+//       onValueChange={setUrlCheckbox}
+//       disabled={props?.disabled}
+//       tintColors={{
+//         true: props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR,
+//         false: props?.disabled
+//           ? 'grey'
+//           : $config.FONT_COLOR + hexadecimalTransparency['80%'],
+//       }}
+//       tintColor={
+//         props?.disabled
+//           ? 'grey'
+//           : $config.FONT_COLOR + hexadecimalTransparency['80%']
+//       }
+//       onCheckColor={
+//         props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+//       }
+//       onTintColor={
+//         props?.disabled ? 'grey' : $config.PRIMARY_ACTION_BRAND_COLOR
+//       }
+//     />
+//   );
+// };
+// export default Checkbox;

package/template/src/subComponents/Checkbox.tsx

@@ -1,15 +1,16 @@
 /*
 ********************************************
  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. 
+ 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} from 'react';
+//@ts-ignore
 import {CheckBox, StyleSheet} from 'react-native';
 import ColorContext from '../components/ColorContext';
 
@@ -26,8 +27,8 @@ const Checkbox = (props: any) => {
       value={urlCheckbox}
       onValueChange={setUrlCheckbox}
       //@ts-ignore Color prop exists on react-native-web but it not present in @react-native-community/checkbox
-      color={primaryColor}
-      style={styles.check}
+      color={props.color ?? primaryColor}
+      style={{...styles.check, ...props.style}}
     />
   );
 };