agora-appbuilder-core 4.0.28-beta-2 → 4.0.28-beta-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.28-beta-2",
+  "version": "4.0.28-beta-3",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/defaultConfig.js

@@ -76,8 +76,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.0.28-beta-2',
-  CORE_VERSION: '4.0.28-beta-2',
+  CLI_VERSION: '3.0.28-beta-3',
+  CORE_VERSION: '4.0.28-beta-3',
   DISABLE_LANDSCAPE_MODE: false,
 };
 

package/template/src/components/chat/chatConfigure.native.tsx

@@ -30,6 +30,7 @@ interface ChatMessageAttributes {
   file_url?: string;
   from_platform?: string;
   channel?: string;
+  msg?: string;
 }
 interface chatConfigureContextInterface {
   open: boolean;
@@ -123,7 +124,7 @@ const ChatConfigure = ({children}) => {
             const {msgId, from, body, localTime} = message;
             const chatType = body.type;
             const fromUser = from;
-            const {file_ext, file_name, file_url, from_platform, channel} =
+            const {file_ext, file_name, file_url, from_platform, channel, msg} =
               message.attributes as ChatMessageAttributes;
 
             // prevent cross-channel messages
@@ -169,7 +170,9 @@ const ChatConfigure = ({children}) => {
                         .thumbnailRemotePath;
                 //@ts-ignore
                 const url =
-                  from_platform === 'web' ? file_url : body.remotePath;
+                  from_platform === 'web'
+                    ? file_url
+                    : (body as {remotePath?: string})?.remotePath;
                 console.warn('url ==>', url);
                 if (isGroupChat) {
                   showMessageNotification(
@@ -179,7 +182,7 @@ const ChatConfigure = ({children}) => {
                     ChatMessageType.IMAGE,
                   );
                   addMessageToStore(Number(fromUser), {
-                    msg: '',
+                    msg: msg,
                     createdTimestamp: localTime,
                     msgId: msgId,
                     isDeleted: false,
@@ -199,7 +202,7 @@ const ChatConfigure = ({children}) => {
                   addMessageToPrivateStore(
                     Number(fromUser),
                     {
-                      msg: '',
+                      msg: msg,
                       createdTimestamp: localTime,
                       msgId: msgId,
                       isDeleted: false,
@@ -224,7 +227,7 @@ const ChatConfigure = ({children}) => {
                     ChatMessageType.FILE,
                   );
                   addMessageToStore(Number(fromUser), {
-                    msg: '',
+                    msg: msg,
                     createdTimestamp: localTime,
                     msgId: msgId,
                     isDeleted: false,
@@ -244,7 +247,7 @@ const ChatConfigure = ({children}) => {
                   addMessageToPrivateStore(
                     Number(fromUser),
                     {
-                      msg: '',
+                      msg: msg,
                       createdTimestamp: localTime,
                       msgId: msgId,
                       isDeleted: false,

package/template/src/components/chat/chatConfigure.tsx

@@ -133,7 +133,7 @@ const ChatConfigure = ({children}) => {
               );
 
               addMessageToStore(Number(fromUser), {
-                msg: '',
+                msg: message?.ext?.msg,
                 createdTimestamp: message.time,
                 msgId: message.id,
                 isDeleted: false,
@@ -153,7 +153,7 @@ const ChatConfigure = ({children}) => {
               addMessageToPrivateStore(
                 Number(fromUser),
                 {
-                  msg: '',
+                  msg: message?.ext?.msg,
                   createdTimestamp: message.time,
                   msgId: message.id,
                   isDeleted: false,
@@ -192,7 +192,7 @@ const ChatConfigure = ({children}) => {
                 message.type,
               );
               addMessageToStore(Number(fromUser), {
-                msg: '',
+                msg: message?.ext?.msg,
                 createdTimestamp: message.time,
                 msgId: message.id,
                 isDeleted: false,
@@ -214,7 +214,7 @@ const ChatConfigure = ({children}) => {
               addMessageToPrivateStore(
                 Number(fromUser),
                 {
-                  msg: '',
+                  msg: message?.ext?.msg,
                   createdTimestamp: message.time,
                   msgId: message.id,
                   isDeleted: false,
@@ -342,7 +342,9 @@ const ChatConfigure = ({children}) => {
           );
 
           const messageData = {
-            msg: option.msg.replace(/^(\n)+|(\n)+$/g, ''),
+            msg:
+              option?.msg?.replace(/^(\n)+|(\n)+$/g, '') ||
+              option?.ext?.msg?.replace(/^(\n)+|(\n)+$/g, ''),
             createdTimestamp: timeNow(),
             msgId: res?.serverMsgId,
             isDeleted: false,

package/template/src/components/chat-messages/useChatMessages.tsx

@@ -117,6 +117,7 @@ export interface ChatOption {
     file_url?: string;
     from_platform?: string;
     channel?: string;
+    msg?: string;
   };
   url?: string;
 }

package/template/src/subComponents/ChatBubble.tsx

@@ -45,6 +45,7 @@ type AttachmentBubbleProps = {
   fileExt: string;
   isFullWidth?: boolean;
   fileType?: string;
+  msg?: string;
   secondaryComponent?: React.ReactNode;
   containerStyle?: StyleProp<ViewStyle>; // Accepting external styles
 };
@@ -56,41 +57,46 @@ export const AttachmentBubble: React.FC<AttachmentBubbleProps> = ({
   fileType = '',
   secondaryComponent,
   containerStyle,
+  msg,
 }) => {
   const {uploadStatus} = useChatUIControls();
 
   return (
-    <View
-      style={[
-        containerStyle,
-        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
+        style={[
+          containerStyle,
+          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.bubbleText} numberOfLines={1} ellipsizeMode="tail">
+            {fileName}
+          </Text>
+        </View>
+        {secondaryComponent}
       </View>
-      {secondaryComponent}
-    </View>
+      {msg && <Text style={[style.bubbleText, style.fileText]}>{msg}</Text>}
+    </>
   );
 };
 
@@ -117,7 +123,6 @@ const ChatBubble = (props: ChatBubbleProps) => {
     url,
     thumb,
     fileName,
-    fileType,
     ext,
   } = props;
 
@@ -276,12 +281,19 @@ const ChatBubble = (props: ChatBubbleProps) => {
                         />
                       </View>
                     ) : null}
-                    <Image
-                      source={{uri: thumb}}
-                      style={style.previewImg}
-                      onLoad={handleImageLoad}
-                    />
+                    <>
+                      <Image
+                        source={{uri: thumb}}
+                        style={style.previewImg}
+                        onLoad={handleImageLoad}
+                      />
+                    </>
                   </TouchableOpacity>
+                  {message && (
+                    <Text style={[style.captionText, style.bubbleText]}>
+                      {message}
+                    </Text>
+                  )}
                   {lightboxVisible ? (
                     <ImagePopup
                       modalVisible={lightboxVisible}
@@ -300,6 +312,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
                 <AttachmentBubble
                   fileName={fileName}
                   fileExt={ext}
+                  msg={message}
                   secondaryComponent={
                     <View>
                       <MoreMenu
@@ -405,12 +418,22 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  fileName: {
+  bubbleText: {
     color: $config.FONT_COLOR,
     fontSize: 14,
     lineHeight: 20,
     fontFamily: ThemeConfig.FontFamily.sansPro,
   },
+  fileText: {
+    paddingLeft: 8,
+    paddingTop: 8,
+    maxWidth: 240,
+  },
+  captionText: {
+    maxWidth: 240,
+    paddingLeft: 6,
+    paddingTop: 8,
+  },
   fileContainer: {
     flexDirection: 'row',
     gap: 2,

package/template/src/subComponents/ChatInput.tsx

@@ -16,6 +16,7 @@ import {
   ActivityIndicator,
   Text,
   TouchableOpacity,
+  ScrollView,
 } from 'react-native';
 import TextInput from '../atoms/TextInput';
 import {useString} from '../utils/useString';
@@ -37,7 +38,7 @@ import {ChatEmojiPicker, ChatEmojiButton} from './chat/ChatEmoji';
 import {useChatConfigure} from '../components/chat/chatConfigure';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {ChatAttachmentButton} from './chat/ChatAttachment';
-import ChatSendButton from './chat/ChatSendButton';
+import ChatSendButton, {handleChatSend} from './chat/ChatSendButton';
 import {
   ChatMessageType,
   SDKChatType,
@@ -76,7 +77,7 @@ export interface ChatTextInputProps {
 export const ChatTextInput = (props: ChatTextInputProps) => {
   let chatInputRef = useRef(null);
   const {
-    privateChatUser,
+    privateChatUser: selectedUserId,
     message,
     setMessage,
     inputActive,
@@ -87,6 +88,8 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     setUploadedFiles,
     inputHeight,
     setInputHeight,
+    setShowEmojiPicker,
+    showEmojiPicker,
   } = useChatUIControls();
   const {defaultContent} = useContent();
   const {sendChatSDKMessage, uploadAttachment} = useChatConfigure();
@@ -126,41 +129,29 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
 
   const chatMessageInputPlaceholder =
     chatType === ChatType.Private
-      ? privateChatInputPlaceHolder(defaultContent[privateChatUser]?.name)
+      ? privateChatInputPlaceHolder(defaultContent[selectedUserId]?.name)
       : groupChatInputPlaceHolder(name);
 
   const onChangeText = (text: string) => {
     setMessage(text);
   };
-  const onSubmitEditing = () => {
-    if (message.length === 0) return;
-    const groupID = data.chat.group_id;
-
-    if (message.length >= MAX_TEXT_MESSAGE_SIZE * 1024) {
-      Toast.show({
-        leadingIconName: 'alert',
-        type: 'error',
-        text1: toastHeadingSize,
-        text2: errorSubHeadingSize(MAX_TEXT_MESSAGE_SIZE.toString()),
-        visibilityTime: 3000,
-        primaryBtn: null,
-        secondaryBtn: null,
-      });
-      return;
-    }
 
-    const option = {
-      chatType: privateChatUser
-        ? SDKChatType.SINGLE_CHAT
-        : SDKChatType.GROUP_CHAT,
-      type: ChatMessageType.TXT,
-      from: data.uid.toString(),
-      to: privateChatUser ? privateChatUser.toString() : groupID,
-      msg: message,
-    };
-    sendChatSDKMessage(option);
-    setInputHeight(MIN_HEIGHT);
-    setMessage('');
+  const onSubmitEditing = () => {
+    handleChatSend({
+      sendChatSDKMessage,
+      selectedUserId,
+      message,
+      setMessage,
+      inputActive,
+      uploadStatus,
+      uploadedFiles,
+      setUploadedFiles,
+      setInputHeight,
+      data,
+      setShowEmojiPicker,
+      toastHeadingSize,
+      errorSubHeadingSize,
+    });
   };
 
   // with multiline textinput enter prints /n
@@ -182,6 +173,96 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     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={{
+        color: $config.FONT_COLOR,
+        textAlign: 'left',
+        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.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,
@@ -195,6 +276,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
         <View
           style={[
             style.attachmentContainer,
+
             isUploadStatusShown
               ? {
                   borderTopLeftRadius: 0,
@@ -203,96 +285,13 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
                 }
               : {borderRadius: 8, borderTopWidth: 1},
           ]}>
-          {uploadedFiles.map((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,
-              }}
-            />
-          ))}
+          <ScrollView style={{maxHeight: showEmojiPicker ? 120 : '100%'}}>
+            {uploadedFiles.map(renderAttachmentBubble)}
+            {renderTextInput({borderWidth: 0, padddingLeft: 0})}
+          </ScrollView>
         </View>
       ) : (
-        <TextInput
-          setRef={ref => (chatInputRef.current = ref)}
-          onFocus={() => setInputActive(true)}
-          onBlur={() => setInputActive(false)}
-          value={message}
-          multiline={true}
-          onChangeText={onChangeText}
-          textAlignVertical="top"
-          scrollEnabled={true}
-          style={{
-            color: $config.FONT_COLOR,
-            textAlign: 'left',
-            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,
-          }}
-          blurOnSubmit={false}
-          onSubmitEditing={onSubmitEditing}
-          placeholder={chatMessageInputPlaceholder}
-          placeholderTextColor={
-            $config.FONT_COLOR + hexadecimalTransparency['40%']
-          }
-          autoCorrect={false}
-          onKeyPress={handleKeyPress}
-          onContentSizeChange={handleContentSizeChange}
-        />
+        renderTextInput()
       )}
     </>
   );
@@ -331,7 +330,7 @@ const style = StyleSheet.create({
   attachmentContainer: {
     paddingHorizontal: 12,
     paddingTop: 12,
-    paddingBottom: 40,
+
     backgroundColor: $config.CARD_LAYER_2_COLOR,
     borderWidth: 1,
     borderColor: $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['40%'],

package/template/src/subComponents/chat/ChatEmoji.tsx

@@ -130,7 +130,6 @@ export interface ChatEmojiButtonProps {
 
 export const ChatEmojiButton = (props: ChatEmojiButtonProps) => {
   const {setShowEmojiPicker, uploadedFiles} = useChatUIControls();
-  const isBtnDisabled = uploadedFiles.length > 0;
   const onPress = () => {
     setShowEmojiPicker(prev => !prev);
   };
@@ -143,20 +142,17 @@ export const ChatEmojiButton = (props: ChatEmojiButtonProps) => {
         backgroundColor: $config.ICON_BG_COLOR,
         borderRadius: 24,
       }}
-      disabled={isBtnDisabled}
       iconProps={{
         iconType: 'plain',
         base64: false,
-        hoverBase64: isBtnDisabled ? false : true,
+        hoverBase64: true,
         iconContainerStyle: {
           padding: 4,
         },
         iconSize: 24,
         name: 'chat_emoji',
-        hoverIconName: isBtnDisabled ? 'chat_emoji' : 'chat_emoji_fill',
-        tintColor: isBtnDisabled
-          ? $config.SEMANTIC_NEUTRAL
-          : $config.SECONDARY_ACTION_COLOR,
+        hoverIconName: 'chat_emoji_fill',
+        tintColor: $config.SECONDARY_ACTION_COLOR,
       }}
       onPress={onPress}
     />