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

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

@@ -19,7 +19,6 @@ import {
   useChatUIControls,
 } from '../../components/chat-ui/useChatUIControls';
 import {logger, LogSource} from '../../logger/AppBuilderLogger';
-import {err} from 'react-native-svg/lib/typescript/xml';
 
 export interface FileObj {
   url: string;
@@ -42,6 +41,8 @@ interface chatConfigureContextInterface {
   ) => void;
   addReaction: (messageId: string, reaction: string) => void;
   removeReaction: (messageId: string, reaction: string) => void;
+  pinMessage: (messageId: string) => void;
+  unPinMessage: (messageId: string) => void;
 }
 
 export const chatConfigureContext =
@@ -55,6 +56,8 @@ export const chatConfigureContext =
     deleteAttachment: () => {},
     addReaction: () => {},
     removeReaction: () => {},
+    pinMessage: () => {},
+    unPinMessage: () => {},
   });
 
 const ChatConfigure = ({children}) => {
@@ -62,8 +65,14 @@ const ChatConfigure = ({children}) => {
   const {data} = useRoomInfo();
   const connRef = React.useRef(null);
   const {defaultContent} = useContent();
-  const {privateChatUser, setUploadStatus, setUploadedFiles, uploadedFiles} =
-    useChatUIControls();
+  const {
+    privateChatUser,
+    setUploadStatus,
+    setUploadedFiles,
+    uploadedFiles,
+    setPinMsgId,
+    setPinnedByUser,
+  } = useChatUIControls();
   const localUid = useLocalUid();
   const defaultContentRef = React.useRef(defaultContent);
   const {
@@ -92,6 +101,7 @@ const ChatConfigure = ({children}) => {
         // Initializes the Web client.
         newConn = new AgoraChat.connection({
           appKey: CHAT_APP_KEY,
+          isFixedDeviceId: false,
         });
         // Logs into Agora Chat.
         const result = await newConn.open({
@@ -131,6 +141,7 @@ const ChatConfigure = ({children}) => {
                 : message.ext.file_url;
 
             const fromUser = message?.from;
+            const msgId = message.id;
 
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               showMessageNotification(
@@ -143,12 +154,13 @@ const ChatConfigure = ({children}) => {
               addMessageToStore(Number(fromUser), {
                 msg: message?.ext?.msg,
                 createdTimestamp: message.time,
-                msgId: message.id,
+                msgId,
                 isDeleted: false,
                 type: ChatMessageType.FILE,
                 url: fileUrl,
                 ext: message.ext.file_ext,
                 fileName: message.ext.file_name,
+                replyToMsgId: message.ext?.replyToMsgId,
               });
             }
             if (message.chatType === SDKChatType.SINGLE_CHAT) {
@@ -163,12 +175,13 @@ const ChatConfigure = ({children}) => {
                 {
                   msg: message?.ext?.msg,
                   createdTimestamp: message.time,
-                  msgId: message.id,
+                  msgId,
                   isDeleted: false,
                   type: ChatMessageType.FILE,
                   url: fileUrl,
                   ext: message.ext.file_ext,
                   fileName: message.ext.file_name,
+                  replyToMsgId: message.ext?.replyToMsgId,
                 },
                 false,
               );
@@ -191,6 +204,7 @@ const ChatConfigure = ({children}) => {
                 : message.ext.file_url;
 
             const fromUser = message?.from;
+            const msgId = message.id;
 
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               showMessageNotification(
@@ -202,12 +216,13 @@ const ChatConfigure = ({children}) => {
               addMessageToStore(Number(fromUser), {
                 msg: message?.ext?.msg,
                 createdTimestamp: message.time,
-                msgId: message.id,
+                msgId,
                 isDeleted: false,
                 type: ChatMessageType.IMAGE,
                 thumb: fileUrl + '&thumbnail=true',
                 url: fileUrl,
                 fileName: message.ext?.file_name,
+                replyToMsgId: message.ext?.replyToMsgId,
               });
             }
             if (message.chatType === SDKChatType.SINGLE_CHAT) {
@@ -224,12 +239,13 @@ const ChatConfigure = ({children}) => {
                 {
                   msg: message?.ext?.msg,
                   createdTimestamp: message.time,
-                  msgId: message.id,
+                  msgId,
                   isDeleted: false,
                   type: ChatMessageType.IMAGE,
                   thumb: fileUrl + '&thumbnail=true',
                   url: fileUrl,
                   fileName: message.ext?.file_name,
+                  replyToMsgId: message.ext?.replyToMsgId,
                 },
                 false,
               );
@@ -248,6 +264,7 @@ const ChatConfigure = ({children}) => {
             );
 
             const fromUser = message?.from;
+            const msgId = message.id;
 
             if (message.chatType === SDKChatType.GROUP_CHAT) {
               // show to notifcation- group msg received
@@ -260,9 +277,10 @@ const ChatConfigure = ({children}) => {
               addMessageToStore(Number(fromUser), {
                 msg: message.msg.replace(/^(\n)+|(\n)+$/g, ''),
                 createdTimestamp: message.time,
-                msgId: message.id,
+                msgId,
                 isDeleted: false,
                 type: ChatMessageType.TXT,
+                replyToMsgId: message.ext?.replyToMsgId,
               });
             }
 
@@ -280,9 +298,10 @@ const ChatConfigure = ({children}) => {
                 {
                   msg: message.msg.replace(/^(\n)+|(\n)+$/g, ''),
                   createdTimestamp: message.time,
-                  msgId: message.id,
+                  msgId,
                   isDeleted: false,
                   type: ChatMessageType.TXT,
+                  replyToMsgId: message.ext?.replyToMsgId,
                 },
                 false,
               );
@@ -301,6 +320,12 @@ const ChatConfigure = ({children}) => {
           onTokenExpired: () => {
             logger.log(LogSource.Internals, 'CHAT', 'ChatSDK Token expired');
           },
+          // to reciev pin message event
+          onMessagePinEvent: options => {
+            const {messageId, operation, operatorId} = options;
+            operation === 'pin' ? setPinMsgId(messageId) : setPinMsgId('');
+            setPinnedByUser(operatorId);
+          },
           onError: error => {
             logger.error(LogSource.Internals, 'CHAT', 'ChatSDK Error', error);
           },
@@ -376,6 +401,7 @@ const ChatConfigure = ({children}) => {
             url: option?.ext?.file_url,
             ext: option?.ext?.file_ext,
             fileName: option?.ext?.file_name,
+            replyToMsgId: option?.ext?.replyToMsgId,
           };
 
           // update local user message store
@@ -581,6 +607,68 @@ const ChatConfigure = ({children}) => {
         });
     }
   };
+
+  const pinMessage = (messageId: string) => {
+    if (connRef.current) {
+      connRef.current
+        .pinMessage({
+          conversationId: data.chat.group_id,
+          conversationType: SDKChatType.GROUP_CHAT,
+          messageId,
+        })
+        .then(res => {
+          setPinMsgId(messageId);
+          setPinnedByUser(localUid);
+          //
+          logger.debug(
+            LogSource.Internals,
+            'CHAT',
+            `Successfully Pinned message with id ${messageId}`,
+            res,
+          );
+        })
+        .catch(err => {
+          logger.debug(
+            LogSource.Internals,
+            'CHAT',
+            `Failed to Pin Message with id ${messageId}`,
+            err,
+          );
+        });
+    }
+  };
+
+  const unPinMessage = (messageId: string) => {
+    if (connRef.current) {
+      connRef.current
+        .unpinMessage({
+          conversationId: data.chat.group_id,
+          conversationType: SDKChatType.GROUP_CHAT,
+          messageId,
+        })
+        .then(res => {
+          setPinMsgId('');
+          logger.debug(
+            LogSource.Internals,
+            'CHAT',
+            `Successfully Pinned message with id ${messageId}`,
+            res,
+          );
+        })
+        .catch(err => {
+          logger.debug(
+            LogSource.Internals,
+            'CHAT',
+            `Failed to Pin Message with id ${messageId}`,
+            err,
+          );
+        });
+    }
+  };
+
+  const blockGroupMember = () => {};
+
+  const unBlockGroupMember = () => {};
   return (
     <chatConfigureContext.Provider
       value={{
@@ -593,6 +681,8 @@ const ChatConfigure = ({children}) => {
         deleteAttachment,
         addReaction,
         removeReaction,
+        pinMessage,
+        unPinMessage,
       }}>
       {children}
     </chatConfigureContext.Provider>

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

@@ -97,6 +97,8 @@ export interface messageInterface {
   fileName?: string;
   ext?: string;
   reactions?: Reaction[];
+  replyToMsgId?: string;
+  hide?: boolean;
 }
 
 export enum SDKChatType {
@@ -119,6 +121,7 @@ export interface ChatOption {
     from_platform?: string;
     channel?: string;
     msg?: string;
+    replyToMsgId?: string;
   };
   url?: string;
 }
@@ -343,6 +346,8 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
           url: body?.url,
           ext: body?.ext,
           fileName: body?.fileName,
+          replyToMsgId: body?.replyToMsgId,
+          hide: false,
         },
       ];
     });
@@ -369,6 +374,8 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
               url: body?.url,
               ext: body?.ext,
               fileName: body?.fileName,
+              replyToMsgId: body?.replyToMsgId,
+              hide: false,
             },
           ])
         : (newState = {
@@ -385,6 +392,8 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
                 url: body.url,
                 ext: body?.ext,
                 fileName: body?.fileName,
+                replyToMsgId: body?.replyToMsgId,
+                hide: false,
               },
             ],
           });
@@ -393,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/chat-ui/useChatUIControls.tsx

@@ -58,6 +58,12 @@ export interface ChatUIControlsInterface {
   _resetTextareaHeight: () => void;
   _handleHeightChange: () => void;
   chatInputRef: any;
+  replyToMsgId: string;
+  setReplyToMsgId: React.Dispatch<SetStateAction<string>>;
+  pinMsgId: string;
+  setPinMsgId: React.Dispatch<SetStateAction<string>>;
+  pinnedByUser: UidType;
+  setPinnedByUser: React.Dispatch<SetStateAction<UidType>>;
 }
 
 const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
@@ -80,6 +86,12 @@ const ChatUIControlsContext = React.createContext<ChatUIControlsInterface>({
   _resetTextareaHeight: () => {},
   _handleHeightChange: () => {},
   chatInputRef: null,
+  replyToMsgId: '',
+  setReplyToMsgId: () => {},
+  pinMsgId: '',
+  setPinMsgId: () => {},
+  pinnedByUser: 0,
+  setPinnedByUser: () => {},
 });
 
 interface ChatUIControlsProviderProps {
@@ -110,6 +122,9 @@ const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
   const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);
   const [inputHeight, setInputHeight] = useState(MIN_HEIGHT);
   const chatInputRef = useRef(null);
+  const [replyToMsgId, setReplyToMsgId] = useState('');
+  const [pinMsgId, setPinMsgId] = useState('');
+  const [pinnedByUser, setPinnedByUser] = useState<UidType>(0);
 
   const _resetTextareaHeight = () => {
     if (chatInputRef?.current) {
@@ -162,6 +177,12 @@ const ChatUIControlsProvider = (props: ChatUIControlsProviderProps) => {
         chatInputRef,
         _resetTextareaHeight,
         _handleHeightChange,
+        replyToMsgId,
+        setReplyToMsgId,
+        pinMsgId,
+        setPinMsgId,
+        pinnedByUser,
+        setPinnedByUser,
       }}>
       {props.children}
     </ChatUIControlsContext.Provider>

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/components/room-info/useRoomInfo.tsx

@@ -33,15 +33,27 @@ export interface RoomData {
   pstn?: {
     number: string;
     pin: string;
+    error?: {
+      code?: number;
+      message?: string;
+    };
   };
   whiteboard?: {
     room_uuid: string;
     room_token: string;
+    error?: {
+      code?: number;
+      message?: string;
+    };
   };
   chat?: {
     user_token: string;
     group_id: string;
     is_group_owner: boolean;
+    error?: {
+      code?: number;
+      message?: string;
+    };
   };
   isSeparateHostLink: boolean;
   channel?: string;

package/template/src/pages/Create.tsx

@@ -28,7 +28,10 @@ import {useString} from '../utils/useString';
 import useCreateRoom from '../utils/useCreateRoom';
 import {CreateProvider} from './create/useCreate';
 import useJoinRoom from '../utils/useJoinRoom';
-import {RoomInfoDefaultValue} from '../components/room-info/useRoomInfo';
+import {
+  RoomInfoDefaultValue,
+  useRoomInfo,
+} from '../components/room-info/useRoomInfo';
 import Input from '../atoms/Input';
 import Toggle from '../atoms/Toggle';
 import Card from '../atoms/Card';
@@ -59,6 +62,7 @@ import {
   createRoomSuccessToastSubHeading,
 } from '../language/default-labels/createScreenLabels';
 import {LogSource, logger} from '../logger/AppBuilderLogger';
+import {backendErrorCode} from 'src/utils/BackendErrorCode';
 
 const Create = () => {
   const {CreateComponent} = useCustomization(data => {
@@ -90,6 +94,7 @@ const Create = () => {
   const [coHostToggle, setCoHostToggle] = useState(false);
   const [roomCreated, setRoomCreated] = useState(false);
   const createRoomFun = useCreateRoom();
+  const {data} = useRoomInfo();
   const {setRoomInfo} = useSetRoomInfo();
 
   const loadingText = useString('loadingText')();
@@ -152,6 +157,26 @@ const Create = () => {
 
   const isDesktop = !isMobileUA();
 
+  //Added error toast notification to inform PSTN is not enabled
+  useEffect(() => {
+    if (data && data?.pstn && data?.pstn?.error) {
+      Toast.show({
+        leadingIconName: 'alert',
+        type: 'error',
+        text1: 'Failed to enable PSTN Service',
+        text2: data?.pstn?.error?.message,
+        visibilityTime: 1000 * 10,
+        primaryBtn: null,
+        secondaryBtn: null,
+        leadingIcon: null,
+      });
+      logger.error(LogSource.Internals, 'CREATE_MEETING', 'PSTN Error', {
+        message: data?.pstn?.error?.message,
+        code: data?.pstn?.error?.code,
+      });
+    }
+  }, [data]);
+
   useEffect(() => {
     //Generating the random room title for placeholder
     // setRandomRoomTitle(

package/template/src/pages/video-call/VideoCallMobileView.tsx

@@ -184,6 +184,7 @@ const VideoCallMobileView = props => {
 
 const VideoCallView = React.memo(() => {
   //toolbar changes
+
   const {
     BottombarComponent,
     BottombarProps,
@@ -253,7 +254,7 @@ const VideoCallView = React.memo(() => {
   });
 
   return (
-    <VideocallWrapper>
+    <>
       <ToolbarProvider value={{position: ToolbarPosition.top}}>
         {Object.keys(TopbarProps)?.length ? (
           <TopbarComponent items={TopbarProps} includeDefaultItems={false} />
@@ -277,7 +278,7 @@ const VideoCallView = React.memo(() => {
           )}
         </ActionSheetProvider>
       </ToolbarProvider>
-    </VideocallWrapper>
+    </>
   );
 });
 

package/template/src/pages/video-call/VideoCallScreen.tsx

@@ -329,7 +329,9 @@ const VideoCallScreen = () => {
   ) : // ) : !isDesktop ? (
   isMobileUA() ? (
     // Mobile View
-    <VideoCallMobileView native={false} />
+    <VideocallWrapper>
+      <VideoCallMobileView native={false} />
+    </VideocallWrapper>
   ) : (
     // Desktop View
     <>