agora-appbuilder-core 4.0.31-beta-1 → 4.0.31-beta-2

package/package.json

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

package/template/src/components/Controls.tsx

@@ -604,6 +604,12 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
   });
 
   if ($config.CHAT) {
+    //disable chat button when BE sends error on chat
+    const ChatError =
+      data?.chat?.error &&
+      (data?.chat?.error?.code || data?.chat?.error?.message)
+        ? true
+        : false;
     actionMenuitems.push({
       hide: w => {
         return w >= BREAKPOINTS.lg ? true : false;
@@ -615,9 +621,32 @@ const MoreButton = (props: {fields: ToolbarMoreButtonDefaultFields}) => {
       textColor: $config.FONT_COLOR,
       title: chatLabel,
       onPress: () => {
-        setActionMenuVisible(false);
-        setChatType(ChatType.Group);
-        setSidePanel(SidePanelType.Chat);
+        if (ChatError) {
+          setActionMenuVisible(false);
+          Toast.show({
+            leadingIconName: 'alert',
+            type: 'error',
+            text1: 'Failed to enable Chat Service.',
+            text2: data?.chat?.error?.message,
+            visibilityTime: 1000 * 10,
+            primaryBtn: null,
+            secondaryBtn: null,
+            leadingIcon: null,
+          });
+          logger.error(
+            LogSource.Internals,
+            'JOIN_MEETING',
+            'Failed to enable Chat Service',
+            {
+              message: data?.chat?.error?.message,
+              code: data?.chat?.error?.code,
+            },
+          );
+        } else {
+          setActionMenuVisible(false);
+          setChatType(ChatType.Group);
+          setSidePanel(SidePanelType.Chat);
+        }
       },
     });
   }

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

@@ -98,6 +98,7 @@ export interface messageInterface {
   ext?: string;
   reactions?: Reaction[];
   replyToMsgId?: string;
+  hide?: boolean;
 }
 
 export enum SDKChatType {
@@ -346,6 +347,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           ext: body?.ext,
           fileName: body?.fileName,
           replyToMsgId: body?.replyToMsgId,
+          hide: false,
         },
       ];
     });
@@ -373,6 +375,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
               ext: body?.ext,
               fileName: body?.fileName,
               replyToMsgId: body?.replyToMsgId,
+              hide: false,
             },
           ])
         : (newState = {
@@ -390,6 +393,7 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
                 ext: body?.ext,
                 fileName: body?.fileName,
                 replyToMsgId: body?.replyToMsgId,
+                hide: false,
               },
             ],
           });
@@ -398,56 +402,40 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   };
 
   const removeMessageFromStore = (msgID, isMsgRecalled) => {
-    console.warn('msg delete native', msgID);
     setMessageStore(prev => {
-      if (isMsgRecalled) {
-        const recalledMsgIndex = prev.findIndex(msg => msg.msgId === msgID);
-        if (recalledMsgIndex !== -1) {
-          const updatedMessages = [...prev];
-          updatedMessages[recalledMsgIndex].isDeleted = true;
-          return updatedMessages;
-        } else {
-          return prev;
-        }
-      } else {
-        return prev.filter(msg => msg.msgId !== msgID);
-      }
+      const recalledMsgIndex = prev.findIndex(msg => msg.msgId === msgID);
+      if (recalledMsgIndex === -1) return prev;
+
+      const updatedMessages = [...prev];
+      updatedMessages[recalledMsgIndex][isMsgRecalled ? 'isDeleted' : 'hide'] =
+        true;
+      return updatedMessages;
     });
   };
 
-  // const removeMessageFromPrivateStore = (msgID, isMsgRecalled) => {
-  //   setPrivateMessageStore(prev => {
-  //     const state = {...prev};
-  //     const filteredData = prev[localUid].filter(msg => msg.msgId !== msgID);
-  //     const newState = {...state, [localUid]: filteredData};
-  //     return {...newState};
-  //   });
-  // };
-
   const removeMessageFromPrivateStore = (msgID, isMsgRecalled) => {
     setPrivateMessageStore(state => {
       const newState = {...state};
 
-      if (isMsgRecalled) {
-        Object.keys(newState).forEach(uid => {
-          const messages = newState[uid];
-          if (messages) {
-            const recalledMsg = messages.find(msg => msg.msgId === msgID);
-            if (recalledMsg) {
-              recalledMsg.isDeleted = true;
+      Object.keys(newState).forEach(uid => {
+        const messages = newState[uid];
+        if (messages) {
+          const recalledMsgIndex = messages.findIndex(
+            msg => msg.msgId === msgID,
+          );
+          if (recalledMsgIndex !== -1) {
+            const updatedMessages = [...messages];
+            if (isMsgRecalled) {
+              updatedMessages[recalledMsgIndex].isDeleted = true;
+            } else {
+              updatedMessages[recalledMsgIndex].hide = true;
             }
+            newState[uid] = updatedMessages;
           }
-        });
-      } else {
-        Object.keys(newState).forEach(uid => {
-          const messages = newState[uid];
-          if (messages) {
-            newState[uid] = messages.filter(msg => msg.msgId !== msgID);
-          }
-        });
-      }
+        }
+      });
 
-      return {...newState};
+      return newState;
     });
   };
 

package/template/src/components/precall/joinWaitingRoomBtn.tsx

@@ -132,12 +132,31 @@ const JoinWaitingRoomBtn = (props: PreCallJoinWaitingRoomBtnProps) => {
               token: mainUser.rtc,
               screenShareToken: screenShare.rtc,
               screenShareUid: screenShare.uid,
-              whiteboard,
-              chat: {
-                user_token: chat?.userToken,
-                group_id: chat?.groupId,
-                is_group_owner: chat?.isGroupOwner,
-              },
+              whiteboard: whiteboard?.error
+                ? {
+                    room_token: '',
+                    room_uuid: '',
+                    error: {
+                      code: whiteboard?.error?.code,
+                      message: whiteboard?.error?.message,
+                    },
+                  }
+                : whiteboard,
+              chat: chat?.error
+                ? {
+                    user_token: '',
+                    group_id: '',
+                    is_group_owner: false,
+                    error: {
+                      code: chat?.error?.code,
+                      message: chat?.error?.message,
+                    },
+                  }
+                : {
+                    user_token: chat?.userToken,
+                    group_id: chat?.groupId,
+                    is_group_owner: chat?.isGroupOwner,
+                  },
             },
           };
         });

package/template/src/pages/Create.tsx

@@ -163,7 +163,8 @@ const Create = () => {
       Toast.show({
         leadingIconName: 'alert',
         type: 'error',
-        text1: data?.pstn?.error?.message,
+        text1: 'Failed to enable PSTN Service',
+        text2: data?.pstn?.error?.message,
         visibilityTime: 1000 * 10,
         primaryBtn: null,
         secondaryBtn: null,

package/template/src/subComponents/ChatBubble.tsx

@@ -200,7 +200,7 @@ export const ReplyMessageBubble = ({
               {fileName + ' ' + text}
             </Text>
           ) : (
-            <Text style={style.messageStyle}>{text}</Text>
+            <Text style={[style.messageStyle, {maxWidth: 265}]}>{text}</Text>
           )}
         </View>
       </View>
@@ -797,6 +797,7 @@ const style = StyleSheet.create({
     fontSize: ThemeConfig.FontSize.small,
     lineHeight: ThemeConfig.FontSize.small * 1.45,
     color: $config.FONT_COLOR,
+    flexWrap: 'wrap',
   },
   replyMessageStyle: {
     fontFamily: ThemeConfig.FontFamily.sansPro,

package/template/src/subComponents/ChatContainer.tsx

@@ -253,36 +253,38 @@ const ChatContainer = (props?: {
                 ) : (
                   <></>
                 )}
-                <ChatBubbleComponent
-                  isLocal={localUid === message.uid}
-                  isSameUser={
-                    index !== 0 && messageStore[index - 1].uid === message.uid
-                      ? true
-                      : false
-                  }
-                  previousMessageCreatedTimestamp={
-                    index !== 0
-                      ? (messageStore[index - 1]
-                          .createdTimestamp as unknown as string)
-                      : ''
-                  }
-                  message={message.msg}
-                  createdTimestamp={message.createdTimestamp}
-                  updatedTimestamp={message.updatedTimestamp}
-                  uid={message.uid}
-                  key={message.msgId}
-                  msgId={message.msgId}
-                  isDeleted={message.isDeleted}
-                  type={message.type}
-                  url={message?.url}
-                  thumb={message?.thumb}
-                  fileName={message?.fileName}
-                  ext={message?.ext}
-                  reactions={message?.reactions}
-                  scrollOffset={scrollOffset}
-                  replyToMsgId={message?.replyToMsgId}
-                  isLastMsg={messageStore.length - 1 === index}
-                />
+                {!message?.hide ? (
+                  <ChatBubbleComponent
+                    isLocal={localUid === message.uid}
+                    isSameUser={
+                      index !== 0 && messageStore[index - 1].uid === message.uid
+                        ? true
+                        : false
+                    }
+                    previousMessageCreatedTimestamp={
+                      index !== 0
+                        ? (messageStore[index - 1]
+                            .createdTimestamp as unknown as string)
+                        : ''
+                    }
+                    message={message.msg}
+                    createdTimestamp={message.createdTimestamp}
+                    updatedTimestamp={message.updatedTimestamp}
+                    uid={message.uid}
+                    key={message.msgId}
+                    msgId={message.msgId}
+                    isDeleted={message.isDeleted}
+                    type={message.type}
+                    url={message?.url}
+                    thumb={message?.thumb}
+                    fileName={message?.fileName}
+                    ext={message?.ext}
+                    reactions={message?.reactions}
+                    scrollOffset={scrollOffset}
+                    replyToMsgId={message?.replyToMsgId}
+                    isLastMsg={messageStore.length - 1 === index}
+                  />
+                ) : null}
                 {messageStore?.length - 1 === index ? (
                   <Spacer size={10} />
                 ) : (
@@ -320,33 +322,36 @@ const ChatContainer = (props?: {
                   ) : (
                     <></>
                   )}
-                  <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.msgId}
-                    msgId={message.msgId}
-                    isDeleted={message.isDeleted}
-                    type={message.type}
-                    url={message?.url}
-                    thumb={message?.thumb}
-                    fileName={message?.fileName}
-                    ext={message?.ext}
-                    reactions={message?.reactions}
-                    replyToMsgId={message?.replyToMsgId}
-                    isLastMsg={
-                      privateMessageStore[privateChatUser].length - 1 === index
-                    }
-                  />
+                  {!message?.hide ? (
+                    <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.msgId}
+                      msgId={message.msgId}
+                      isDeleted={message.isDeleted}
+                      type={message.type}
+                      url={message?.url}
+                      thumb={message?.thumb}
+                      fileName={message?.fileName}
+                      ext={message?.ext}
+                      reactions={message?.reactions}
+                      replyToMsgId={message?.replyToMsgId}
+                      isLastMsg={
+                        privateMessageStore[privateChatUser].length - 1 ===
+                        index
+                      }
+                    />
+                  ) : null}
                   {privateMessageStore[privateChatUser]?.length - 1 ===
                   index ? (
                     <Spacer size={10} />

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

@@ -87,7 +87,7 @@ const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
 
   const groupID = chat.group_id;
   const isGroupOwner = chat.is_group_owner;
-  const isMsgPinned = pinMsgId === messageId && pinnedByUser === userId;
+  const isMsgPinned = pinMsgId === messageId;
 
   showReplyOption &&
     actionMenuitems.push({
@@ -153,6 +153,7 @@ const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
 
   // native pin message to be released with 1.3.0 chat sdk
   isWebInternal() &&
+    chatType == SDKChatType.GROUP_CHAT &&
     actionMenuitems.push({
       icon: isMsgPinned ? 'unpin-outlined' : 'pin-outlined',
       iconColor: $config.SECONDARY_ACTION_COLOR,
@@ -183,13 +184,13 @@ const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
     iconColor: $config.SEMANTIC_ERROR,
     textColor: $config.SEMANTIC_ERROR,
     title: 'Delete Message',
+    disabled: isMsgPinned,
     onPress: () => {
       if (isLocal) {
         // confirm dialog : user is deleting for all
         setShowDeleteMessageModal(true);
         //deleteAttachment(msgId, recallFromUser.toString(), chatType);
       } else {
-        debugger;
         if (chatType === SDKChatType.GROUP_CHAT) {
           removeMessageFromStore(messageId, isLocal);
         }
@@ -198,7 +199,6 @@ const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
         }
       }
       setActionMenuVisible(false);
-      setIsHovered(false);
     },
   });
 

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

@@ -16,6 +16,7 @@ import {
 import {useContent, useLocalUid, UidType} from 'customization-api';
 import {trimText} from '../../../src/utils/common';
 import {formatAMPM} from '../../../src/utils';
+import {useChatConfigure} from '../../components/chat/chatConfigure';
 
 interface PinnedMessageProps {
   pinMsgId: string;
@@ -31,6 +32,7 @@ const PinnedMessage: React.FC<PinnedMessageProps> = ({
   const {defaultContent} = useContent();
   const [isExpanded, setIsExpanded] = useState(false);
   const [showMoreIcon, setShowMoreIcon] = useState(false);
+  const {unPinMessage} = useChatConfigure();
 
   const pinnedMsg = messageStore.filter(msg => msg.msgId === pinMsgId);
   if (pinnedMsg.length === 0) return null;
@@ -48,7 +50,7 @@ const PinnedMessage: React.FC<PinnedMessageProps> = ({
   const fileName = pinnedMsg[0].fileName;
 
   const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
+    setIsExpanded(prev => !prev);
   };
   const handleTextLayout = e => {
     let textHeight = e.nativeEvent.layout?.height;
@@ -59,20 +61,26 @@ const PinnedMessage: React.FC<PinnedMessageProps> = ({
     }
   };
 
+  const handleMessageUnpin = () => {
+    unPinMessage(pinMsgId);
+  };
+
   return (
-    <View style={styles.container}>
+    <View
+      style={[styles.container, {overflow: isExpanded ? 'scroll' : 'hidden'}]}>
       <View style={styles.pinUserContainer}>
-        <ImageIcon
-          iconType="plain"
-          name="pin-filled"
-          iconSize={20}
-          iconContainerStyle={styles.pinIcon}
-          tintColor={$config.FONT_COLOR + hexadecimalTransparency['40%']}
-        />
+        <Pressable onPress={handleMessageUnpin}>
+          <ImageIcon
+            iconType="plain"
+            name="unpin-filled"
+            iconSize={20}
+            tintColor={$config.FONT_COLOR + hexadecimalTransparency['40%']}
+          />
+        </Pressable>
         <Text style={styles.pinnedUser}> Pinned By {msgPinnedUser}</Text>
       </View>
 
-      <Pressable style={styles.msgContainer} onPress={toggleExpanded}>
+      <View style={styles.msgContainer}>
         <View
           style={{
             flexDirection: 'row',
@@ -121,14 +129,16 @@ const PinnedMessage: React.FC<PinnedMessageProps> = ({
         </View>
 
         {showMoreIcon && (
-          <ImageIcon
-            iconType="plain"
-            name={isExpanded ? 'arrow-up' : 'arrow-down'}
-            iconSize={20}
-            tintColor={$config.SECONDARY_ACTION_COLOR}
-          />
+          <Pressable onPress={toggleExpanded}>
+            <ImageIcon
+              iconType="plain"
+              name={isExpanded ? 'arrow-up' : 'arrow-down'}
+              iconSize={20}
+              tintColor={$config.SECONDARY_ACTION_COLOR}
+            />
+          </Pressable>
         )}
-      </Pressable>
+      </View>
 
       <Text style={styles.user}>
         {name} <Text style={styles.pinnedUser}>sent at {time}</Text>
@@ -159,7 +169,6 @@ const styles = StyleSheet.create({
     gap: 4,
     alignItems: 'flex-start',
     maxHeight: 120,
-    overflow: 'scroll',
   },
   pinIcon: {
     transform: [{rotate: '-45deg'}],