agora-appbuilder-core 2.3.0-beta.12 → 2.3.0-beta.15

package/package.json

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

package/template/_package-lock.json

@@ -23,12 +23,14 @@
         "electron-updater": "4.3.9",
         "exponential-backoff": "3.1.0",
         "graphql": "15.5.0",
+        "nanoid": "4.0.0",
         "nosleep.js": "0.12.0",
         "react": "16.13.1",
         "react-dom": "16.13.1",
         "react-is": "18.0.0",
         "react-native": "0.63.3",
         "react-native-agora": "3.4.2",
+        "react-native-get-random-values": "1.8.0",
         "react-native-hyperlink": "0.0.19",
         "react-native-inappbrowser-reborn": "3.5.1",
         "react-native-keep-awake": "4.0.0",
@@ -12940,6 +12942,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/fast-base64-decode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz",
+      "integrity": "sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q=="
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -22140,6 +22147,17 @@
       "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
       "optional": true
     },
+    "node_modules/nanoid": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -23984,6 +24002,17 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-get-random-values": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.8.0.tgz",
+      "integrity": "sha512-H/zghhun0T+UIJLmig3+ZuBCvF66rdbiWUfRSNS6kv5oDSpa1ZiVyvRWtuPesQpT8dXj+Bv7WJRQOUP+5TB1sA==",
+      "dependencies": {
+        "fast-base64-decode": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.56"
+      }
+    },
     "node_modules/react-native-hyperlink": {
       "version": "0.0.19",
       "resolved": "https://registry.npmjs.org/react-native-hyperlink/-/react-native-hyperlink-0.0.19.tgz",
@@ -39247,6 +39276,11 @@
         "time-stamp": "^1.0.0"
       }
     },
+    "fast-base64-decode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-base64-decode/-/fast-base64-decode-1.0.0.tgz",
+      "integrity": "sha512-qwaScUgUGBYeDNRnbc/KyllVU88Jk1pRHPStuF/lO7B0/RTRLj7U0lkdTAutlBblY08rwZDff6tNU9cjv6j//Q=="
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -46424,6 +46458,11 @@
       "integrity": "sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==",
       "optional": true
     },
+    "nanoid": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+      "integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -48158,6 +48197,14 @@
       "integrity": "sha512-zY2BIDCG9vEGQMW9oggsom9XHZJqETG/nafLsZx4z52TzHw9bipNypL/jXpE50Ofg+bS9YKYJaSZGy8M9dgKSA==",
       "requires": {}
     },
+    "react-native-get-random-values": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/react-native-get-random-values/-/react-native-get-random-values-1.8.0.tgz",
+      "integrity": "sha512-H/zghhun0T+UIJLmig3+ZuBCvF66rdbiWUfRSNS6kv5oDSpa1ZiVyvRWtuPesQpT8dXj+Bv7WJRQOUP+5TB1sA==",
+      "requires": {
+        "fast-base64-decode": "^1.0.0"
+      }
+    },
     "react-native-hyperlink": {
       "version": "0.0.19",
       "resolved": "https://registry.npmjs.org/react-native-hyperlink/-/react-native-hyperlink-0.0.19.tgz",

package/template/agora-rn-uikit/src/Reducer/UserJoined.ts

@@ -32,7 +32,9 @@ export default function UserJoined(
       ...typeData,
     },
   };
-  let renderPosition = [...state.renderPosition, newUid];
+  let renderPosition = state.renderPosition.filter((i) => i === newUid).length
+    ? [...state.renderPosition]
+    : [...state.renderPosition, newUid];
   const [maxUid] = renderPosition;
   if (renderPosition.length === 2 && maxUid === localUid) {
     //Only one remote and local is maximized

package/template/agora-rn-uikit/src/RtcConfigure.tsx

@@ -203,16 +203,30 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
 
   const swapVideo = useCallback(
     (state: RenderStateInterface, newMaxUid: UidType) => {
+      if (state?.renderPosition?.indexOf(newMaxUid) === -1) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
       let renderPosition: RenderStateInterface['renderPosition'] = [
         ...state.renderPosition,
       ];
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
       };
+
       // Element which is currently maximized
       const [currentMaxUid] = renderPosition;
 
       if (currentMaxUid === newMaxUid) {
+        //skip the update if new max uid is already maximized
+        return {};
+      }
+
+      const newMaxUidOldPosition = renderPosition.findIndex(
+        (i) => i === newMaxUid,
+      );
+
+      if (!newMaxUidOldPosition) {
         return {};
       }
 
@@ -228,10 +242,6 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
        * else push newMaxUid at last position
        */
 
-      const newMaxUidOldPosition = renderPosition.findIndex(
-        (i) => i === newMaxUid,
-      );
-
       renderPosition[0] = newMaxUid;
       renderPosition[newMaxUidOldPosition] = currentMaxUid;
 
@@ -254,10 +264,15 @@ const RtcConfigure = (props: {children: React.ReactNode}) => {
       let renderList: RenderStateInterface['renderList'] = {
         ...state.renderList,
       };
+      if (!(newMaxUid in renderList)) {
+        //skip the update if new max uid is not joined yet.
+        return {};
+      }
       // Element which is currently maximized
       const [currentMaxUid] = renderPosition;
 
       if (currentMaxUid === newMaxUid) {
+        //skip the update if new max uid is already maximized
         return {};
       }
 

package/template/fpe-api/utils.ts

@@ -38,6 +38,8 @@ export {
   default as useSendMessage,
   MESSAGE_TYPE,
 } from '../src/utils/useSendMessage';
+export {default as useEditMessage} from '../src/utils/useEditMessage';
+export {default as useDeleteMessage} from '../src/utils/useDeleteMessage';
 export {controlMessageEnum} from '../src/components/ChatContext';
 export {
   default as useSendControlMessage,

package/template/package.json

@@ -62,12 +62,14 @@
     "electron-updater": "4.3.9",
     "exponential-backoff": "3.1.0",
     "graphql": "15.5.0",
+    "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-is": "18.0.0",
     "react-native": "0.63.3",
     "react-native-agora": "3.4.2",
+    "react-native-get-random-values": "1.8.0",
     "react-native-hyperlink": "0.0.19",
     "react-native-inappbrowser-reborn": "3.5.1",
     "react-native-keep-awake": "4.0.0",

package/template/src/components/ChatContext.ts

@@ -16,18 +16,25 @@ import {createContext, SetStateAction} from 'react';
 export interface ChatBubbleProps {
   isLocal: boolean;
   message: string;
-  timestamp: string;
+  createdTimestamp: string;
+  updatedTimestamp?: string;
   uid: UidType;
+  msgId: string;
+  isDeleted: boolean;
   render?: (
     isLocal: boolean,
     message: string,
-    timestamp: string,
+    createdTimestamp: string,
     uid: UidType,
+    msgId: string,
+    isDeleted: boolean,
+    updatedTimestamp?: string,
   ) => JSX.Element;
 }
 
 export interface messageStoreInterface {
-  ts: string;
+  createdTimestamp: string;
+  updatedTimestamp?: string;
   uid: UidType;
   msg: string;
 }

package/template/src/components/RTMConfigure.tsx

@@ -11,7 +11,7 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect, useRef} from 'react';
-import RtmEngine, {RtmAttribute} from 'agora-react-native-rtm';
+import RtmEngine from 'agora-react-native-rtm';
 import {PropsContext, useLocalUid} from '../../agora-rn-uikit';
 import ChatContext, {controlMessageEnum} from './ChatContext';
 import {RtcContext} from '../../agora-rn-uikit';
@@ -20,7 +20,6 @@ import {Platform} from 'react-native';
 import {backOff} from 'exponential-backoff';
 import {useString} from '../utils/useString';
 import {isAndroid, isWeb} from '../utils/common';
-import StorageContext from './StorageContext';
 import {useRenderContext} from 'fpe-api';
 import {
   safeJsonParse,
@@ -33,8 +32,6 @@ import {
 import {EventUtils, EventsQueue, eventMessageType} from '../rtm-events';
 import RTMEngine from '../rtm/RTMEngine';
 import {filterObject} from '../utils';
-import CustomEvents, {EventLevel} from '../custom-events';
-import {EventNames} from '../rtm-events';
 import useLocalScreenShareUid from '../utils/useLocalShareScreenUid';
 
 export enum UserType {
@@ -139,7 +136,9 @@ const RtmConfigure = (props: any) => {
     try {
       await engine.current.setLocalUserAttributes(rtmAttributes);
       timerValueRef.current = 5;
-      joinChannel();
+      await joinChannel();
+      setHasUserJoinedRTM(true);
+      await runQueuedCustomEvents();
     } catch (error) {
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
@@ -153,8 +152,6 @@ const RtmConfigure = (props: any) => {
       await engine.current.joinChannel(rtcProps.channel);
       timerValueRef.current = 5;
       await getMembers();
-      setHasUserJoinedRTM(true);
-      await runQueuedCustomEvents();
     } catch (error) {
       setTimeout(async () => {
         timerValueRef.current = timerValueRef.current + timerValueRef.current;
@@ -446,22 +443,12 @@ const RtmConfigure = (props: any) => {
 
   const runQueuedCustomEvents = async () => {
     try {
-      const eventsInQueue = EventsQueue.printQueue();
-      if (eventsInQueue.length !== 0) {
-        for (const queuedEvents of eventsInQueue) {
-          await customEventDispatcher(
-            queuedEvents.data,
-            queuedEvents.uid,
-            queuedEvents.ts,
-          );
-          // EventsQueue.dequeue();
-        }
+      while (!EventsQueue.isEmpty()) {
+        const currEvt = EventsQueue.dequeue();
+        await customEventDispatcher(currEvt.data, currEvt.uid, currEvt.ts);
       }
     } catch (error) {
-      throw Error(
-        'CUSTOM_EVENTS_API: error while running queued events ',
-        error,
-      );
+      console.log('CUSTOM_EVENT_API:  error while running queue events', error);
     }
   };
 
@@ -486,7 +473,7 @@ const RtmConfigure = (props: any) => {
     }
     // Step 2: Emit the event
     try {
-      console.log('CUSTOM_EVENT_API:  emiting event: ');
+      console.log('CUSTOM_EVENT_API:  emiting event..: ');
       EventUtils.emitEvent(evt, {payload, sender, ts});
     } catch (error) {
       console.log('CUSTOM_EVENT_API: error while emiting event: ', error);
@@ -554,8 +541,9 @@ const RtmConfigure = (props: any) => {
 
   const end = async () => {
     callActive
-      ? (await (engine.current as RtmEngine).logout(),
-        await (engine.current as RtmEngine).destroyClient(),
+      ? (RTMEngine.getInstance().destroy(),
+        EventUtils.clear(),
+        setHasUserJoinedRTM(false),
         // setLogin(false),
         console.log('RTM cleanup done'))
       : {};

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

@@ -21,39 +21,66 @@ import {useChatNotification} from '../chat-notification/useChatNotification';
 import Toast from '../../../react-native-toast-message';
 import {timeNow} from '../../rtm/utils';
 import {useSidePanel} from '../../utils/useSidePanel';
+import getUniqueID from '../../utils/getUniqueID';
+
+enum ChatMessageActionEnum {
+  Create = 'Create_Chat_Message',
+  Update = 'Update_Chat_Message',
+  Delete = 'Delete_Chat_Message',
+}
 
 interface ChatMessagesProviderProps {
   children: React.ReactNode;
 }
 interface messageInterface {
-  ts: number;
+  createdTimestamp: number;
+  updatedTimestamp?: number;
   msg: string;
+  msgId: string;
+  isDeleted: boolean;
 }
 interface messageStoreInterface extends messageInterface {
   uid: UidType;
 }
 
 interface ChatMessagesInterface {
-  messageStore: messageStoreInterface | any;
-  privateMessageStore: any;
+  messageStore: messageStoreInterface[];
+  privateMessageStore: {[key: string]: messageStoreInterface[]};
   sendChatMessage: (msg: string, toUid?: UidType) => void;
+  editChatMessage: (msgId: string, msg: string, toUid?: UidType) => void;
+  deleteChatMessage: (msgId: string, toUid?: UidType) => void;
 }
 
 const ChatMessagesContext = React.createContext<ChatMessagesInterface>({
   messageStore: [],
   privateMessageStore: {},
   sendChatMessage: () => {},
+  editChatMessage: () => {},
+  deleteChatMessage: () => {},
 });
 
 const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const {renderList} = useRenderContext();
   const localUid = useLocalUid();
   const {setSidePanel} = useSidePanel();
-  const {groupActive, selectedChatUserId, setGroupActive} = useChatUIControl();
-  const {setUnreadGroupMessageCount, setUnreadIndividualMessageCount} =
-    useChatNotification();
+  const {
+    groupActive,
+    selectedChatUserId,
+    setGroupActive,
+    setPrivateActive,
+    setSelectedChatUserId,
+  } = useChatUIControl();
+  const {
+    setUnreadGroupMessageCount,
+    setUnreadIndividualMessageCount,
+    unreadPrivateMessageCount,
+    unreadIndividualMessageCount,
+    setUnreadPrivateMessageCount,
+  } = useChatNotification();
   const [messageStore, setMessageStore] = useState<messageStoreInterface[]>([]);
-  const [privateMessageStore, setPrivateMessageStore] = useState({});
+  const [privateMessageStore, setPrivateMessageStore] = useState<{
+    [key: string]: messageStoreInterface[];
+  }>({});
 
   const renderListRef = useRef({renderList: renderList});
   const groupActiveRef = useRef<boolean>();
@@ -75,70 +102,207 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   }, [selectedChatUserId]);
 
   React.useEffect(() => {
-    const showMessageNotification = (msg: string, uid: string) => {
+    const showMessageNotification = (
+      msg: string,
+      uid: string,
+      isPrivateMessage: boolean = false,
+    ) => {
+      const uidAsNumber = parseInt(uid);
       Toast.show({
         type: 'success',
         text1: msg.length > 30 ? msg.slice(0, 30) + '...' : msg,
-        text2: renderListRef.current.renderList[parseInt(uid)]?.name
-          ? fromText(renderListRef.current.renderList[parseInt(uid)]?.name)
+        text2: renderListRef.current.renderList[uidAsNumber]?.name
+          ? fromText(renderListRef.current.renderList[uidAsNumber]?.name)
           : '',
         visibilityTime: 1000,
         onPress: () => {
+          if (isPrivateMessage) {
+            setUnreadPrivateMessageCount(
+              unreadPrivateMessageCount -
+                (unreadIndividualMessageCount[uidAsNumber] || 0),
+            );
+            setUnreadIndividualMessageCount((prevState) => {
+              return {
+                ...prevState,
+                [uidAsNumber]: 0,
+              };
+            });
+            setGroupActive(false);
+            setSelectedChatUserId(uidAsNumber);
+            setPrivateActive(true);
+          } else {
+            setUnreadGroupMessageCount(0);
+            setPrivateActive(false);
+            setSelectedChatUserId(0);
+            setGroupActive(true);
+          }
           setSidePanel(SidePanelType.Chat);
-          setUnreadGroupMessageCount(0);
-          setGroupActive(true);
         },
       });
     };
     CustomEvents.on(EventNames.PUBLIC_CHAT_MESSAGE, (data) => {
-      showMessageNotification(data.payload.value, data.sender);
-      addMessageToStore(parseInt(data.sender), {
-        msg: data.payload.value,
-        ts: data.ts,
-      });
-      /**
-       * if chat group window is not active.
-       * then we will increment the unread count
-       */
-      if (!groupActiveRef.current) {
-        setUnreadGroupMessageCount((prevState) => {
-          return prevState + 1;
-        });
+      const messageData = JSON.parse(data.payload.value);
+      switch (data?.payload?.action) {
+        case ChatMessageActionEnum.Create:
+          showMessageNotification(messageData.msg, data.sender);
+          addMessageToStore(parseInt(data.sender), {
+            msg: messageData.msg,
+            createdTimestamp: messageData.createdTimestamp,
+            isDeleted: messageData.isDeleted,
+            msgId: messageData.msgId,
+          });
+          /**
+           * if chat group window is not active.
+           * then we will increment the unread count
+           */
+          if (!groupActiveRef.current) {
+            setUnreadGroupMessageCount((prevState) => {
+              return prevState + 1;
+            });
+          }
+          break;
+        case ChatMessageActionEnum.Update:
+          setMessageStore((prevState) => {
+            const newState = prevState.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === parseInt(data.sender)
+              ) {
+                return {
+                  ...item,
+                  msg: messageData.msg,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            return newState;
+          });
+          break;
+        case ChatMessageActionEnum.Delete:
+          setMessageStore((prevState) => {
+            const newState = prevState.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === parseInt(data.sender)
+              ) {
+                return {
+                  ...item,
+                  isDeleted: true,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            return newState;
+          });
+          break;
+        default:
+          break;
       }
     });
     CustomEvents.on(EventNames.PRIVATE_CHAT_MESSAGE, (data) => {
-      showMessageNotification(data.payload.value, data.sender);
-      addMessageToPrivateStore(
-        parseInt(data.sender),
-        {
-          msg: data.payload.value,
-          ts: data.ts,
-        },
-        false,
-      );
-      /**
-       * if user's private window is active.
-       * then we will not increment the unread count
-       */
-
-      if (!(individualActiveRef.current === parseInt(data.sender))) {
-        setUnreadIndividualMessageCount((prevState) => {
-          const prevCount =
-            prevState && prevState[parseInt(data.sender)]
-              ? prevState[parseInt(data.sender)]
-              : 0;
-          return {
-            ...prevState,
-            [parseInt(data.sender)]: prevCount + 1,
-          };
-        });
+      const messageData = JSON.parse(data.payload.value);
+
+      switch (data?.payload?.action) {
+        case ChatMessageActionEnum.Create:
+          showMessageNotification(messageData.msg, data.sender, true);
+          addMessageToPrivateStore(
+            parseInt(data.sender),
+            {
+              msg: messageData.msg,
+              createdTimestamp: messageData.createdTimestamp,
+              msgId: messageData.msgId,
+              isDeleted: messageData.isDeleted,
+            },
+            false,
+          );
+          /**
+           * if user's private window is active.
+           * then we will not increment the unread count
+           */
+
+          if (!(individualActiveRef.current === parseInt(data.sender))) {
+            setUnreadIndividualMessageCount((prevState) => {
+              const prevCount =
+                prevState && prevState[parseInt(data.sender)]
+                  ? prevState[parseInt(data.sender)]
+                  : 0;
+              return {
+                ...prevState,
+                [parseInt(data.sender)]: prevCount + 1,
+              };
+            });
+          }
+          break;
+        case ChatMessageActionEnum.Update:
+          setPrivateMessageStore((prevState) => {
+            const privateChatOfUid = prevState[parseInt(data.sender)];
+            const updatedData = privateChatOfUid.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === parseInt(data.sender)
+              ) {
+                return {
+                  ...item,
+                  msg: messageData.msg,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            const newState = {
+              ...prevState,
+              [parseInt(data.sender)]: updatedData,
+            };
+            return newState;
+          });
+          break;
+        case ChatMessageActionEnum.Delete:
+          setPrivateMessageStore((prevState) => {
+            const privateChatOfUid = prevState[parseInt(data.sender)];
+            const updatedData = privateChatOfUid.map((item) => {
+              if (
+                item.msgId === messageData.msgId &&
+                item.uid === parseInt(data.sender)
+              ) {
+                return {
+                  ...item,
+                  isDeleted: true,
+                  updatedTimestamp: messageData.updatedTimestamp,
+                };
+              } else {
+                return item;
+              }
+            });
+            const newState = {
+              ...prevState,
+              [parseInt(data.sender)]: updatedData,
+            };
+            return newState;
+          });
+          break;
+        default:
+          break;
       }
     });
   }, []);
 
   const addMessageToStore = (uid: UidType, body: messageInterface) => {
     setMessageStore((m: messageStoreInterface[]) => {
-      return [...m, {ts: body.ts, uid, msg: body.msg}];
+      return [
+        ...m,
+        {
+          createdTimestamp: body.createdTimestamp,
+          uid,
+          msg: body.msg,
+          msgId: body.msgId,
+          isDeleted: body.isDeleted,
+        },
+      ];
     });
   };
 
@@ -147,16 +311,30 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
     body: messageInterface,
     local: boolean,
   ) => {
-    setPrivateMessageStore((state: any) => {
+    setPrivateMessageStore((state) => {
       let newState = {...state};
       newState[uid] !== undefined
         ? (newState[uid] = [
             ...newState[uid],
-            {ts: body.ts, uid: local ? localUid : uid, msg: body.msg},
+            {
+              createdTimestamp: body.createdTimestamp,
+              uid: local ? localUid : uid,
+              msg: body.msg,
+              msgId: body.msgId,
+              isDeleted: body.isDeleted,
+            },
           ])
         : (newState = {
             ...newState,
-            [uid]: [{ts: body.ts, uid: local ? localUid : uid, msg: body.msg}],
+            [uid]: [
+              {
+                createdTimestamp: body.createdTimestamp,
+                uid: local ? localUid : uid,
+                msg: body.msg,
+                msgId: body.msgId,
+                isDeleted: body.isDeleted,
+              },
+            ],
           });
       return {...newState};
     });
@@ -165,29 +343,148 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const sendChatMessage = (msg: string, toUid?: UidType) => {
     if (typeof msg == 'string' && msg.trim() === '') return;
     if (toUid) {
+      const messageData = {
+        msg,
+        createdTimestamp: timeNow(),
+        msgId: getUniqueID(),
+        isDeleted: false,
+      };
       CustomEvents.send(
         EventNames.PRIVATE_CHAT_MESSAGE,
         {
-          value: msg,
+          value: JSON.stringify(messageData),
+          action: ChatMessageActionEnum.Create,
         },
         toUid,
       );
-      addMessageToPrivateStore(
-        toUid,
-        {
-          msg: msg,
-          ts: timeNow(),
-        },
-        true,
-      );
+      addMessageToPrivateStore(toUid, messageData, true);
     } else {
+      const messageData = {
+        msg,
+        msgId: getUniqueID(),
+        isDeleted: false,
+        createdTimestamp: timeNow(),
+      };
       CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
-        value: msg,
-      });
-      addMessageToStore(localUid, {
-        msg: msg,
-        ts: timeNow(),
+        value: JSON.stringify(messageData),
+        action: ChatMessageActionEnum.Create,
       });
+      addMessageToStore(localUid, messageData);
+    }
+  };
+
+  const editChatMessage = (msgId: string, msg: string, toUid?: UidType) => {
+    if (typeof msg == 'string' && msg.trim() === '') return;
+    if (toUid) {
+      const checkData = privateMessageStore[toUid].filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const editMsgData = {msg, updatedTimestamp: timeNow()};
+        CustomEvents.send(
+          EventNames.PRIVATE_CHAT_MESSAGE,
+          {
+            value: JSON.stringify({msgId, ...editMsgData}),
+            action: ChatMessageActionEnum.Update,
+          },
+          toUid,
+        );
+        setPrivateMessageStore((prevState) => {
+          const privateChatOfUid = prevState[toUid];
+          const updatedData = privateChatOfUid.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, ...editMsgData};
+            } else {
+              return item;
+            }
+          });
+          const newState = {...prevState, [toUid]: updatedData};
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to edit");
+      }
+    } else {
+      //check if user has permission to edit
+      const checkData = messageStore.filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const editMsgData = {msg, updatedTimestamp: timeNow()};
+        CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
+          value: JSON.stringify({msgId, ...editMsgData}),
+          action: ChatMessageActionEnum.Update,
+        });
+        setMessageStore((prevState) => {
+          const newState = prevState.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, ...editMsgData};
+            } else {
+              return item;
+            }
+          });
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to edit");
+      }
+    }
+  };
+
+  const deleteChatMessage = (msgId: string, toUid?: UidType) => {
+    if (toUid) {
+      const checkData = privateMessageStore[toUid].filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const deleteMsgData = {updatedTimestamp: timeNow()};
+        CustomEvents.send(
+          EventNames.PRIVATE_CHAT_MESSAGE,
+          {
+            value: JSON.stringify({msgId, ...deleteMsgData}),
+            action: ChatMessageActionEnum.Delete,
+          },
+          toUid,
+        );
+        setPrivateMessageStore((prevState) => {
+          const privateChatOfUid = prevState[toUid];
+          const updatedData = privateChatOfUid.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, isDeleted: true, ...deleteMsgData};
+            } else {
+              return item;
+            }
+          });
+          const newState = {...prevState, [toUid]: updatedData};
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to delete");
+      }
+    } else {
+      //check if user has permission to delete
+      const checkData = messageStore.filter(
+        (item) => item.msgId === msgId && item.uid === localUid,
+      );
+      if (checkData && checkData.length) {
+        const deleteMsgData = {updatedTimestamp: timeNow()};
+        CustomEvents.send(EventNames.PUBLIC_CHAT_MESSAGE, {
+          value: JSON.stringify({msgId, ...deleteMsgData}),
+          action: ChatMessageActionEnum.Delete,
+        });
+        setMessageStore((prevState) => {
+          const newState = prevState.map((item) => {
+            if (item.msgId === msgId) {
+              return {...item, isDeleted: true, ...deleteMsgData};
+            } else {
+              return item;
+            }
+          });
+          return newState;
+        });
+      } else {
+        console.log("You don't have permission to delete");
+      }
     }
   };
 
@@ -197,6 +494,8 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         messageStore,
         privateMessageStore,
         sendChatMessage,
+        editChatMessage,
+        deleteChatMessage,
       }}>
       {props.children}
     </ChatMessagesContext.Provider>

package/template/src/pages/VideoCall.tsx

@@ -201,12 +201,12 @@ const VideoCall: React.FC = () => {
                 <DeviceConfigure>
                   <ChatUIControlProvider>
                     <ChatNotificationProvider>
-                      <ChatMessagesProvider>
-                        <SidePanelProvider
-                          value={{
-                            sidePanel,
-                            setSidePanel,
-                          }}>
+                      <SidePanelProvider
+                        value={{
+                          sidePanel,
+                          setSidePanel,
+                        }}>
+                        <ChatMessagesProvider>
                           <ScreenShareProvider>
                             <RtmConfigure
                               setRecordingActive={setRecordingActive}
@@ -260,8 +260,8 @@ const VideoCall: React.FC = () => {
                               </UserPreferenceProvider>
                             </RtmConfigure>
                           </ScreenShareProvider>
-                        </SidePanelProvider>
-                      </ChatMessagesProvider>
+                        </ChatMessagesProvider>
+                      </SidePanelProvider>
                     </ChatNotificationProvider>
                   </ChatUIControlProvider>
                 </DeviceConfigure>

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

@@ -95,14 +95,13 @@ const VideoCallScreen = () => {
         components.BottombarComponent = data?.components?.videoCall.bottomBar;
       }
 
-      // commented for v1 release
-      // if (
-      //   data?.components?.videoCall.topBar &&
-      //   typeof data?.components?.videoCall.topBar !== 'object' &&
-      //   isValidReactComponent(data?.components?.videoCall.topBar)
-      // ) {
-      //   components.TopbarComponent = data?.components?.videoCall.topBar;
-      // }
+      if (
+        data?.components?.videoCall.topBar &&
+        typeof data?.components?.videoCall.topBar !== 'object' &&
+        isValidReactComponent(data?.components?.videoCall.topBar)
+      ) {
+        components.TopbarComponent = data?.components?.videoCall.topBar;
+      }
 
       if (
         data?.components?.videoCall.participantsPanel &&

package/template/src/rtm/RTMEngine.ts

@@ -30,6 +30,11 @@ class RTMEngine {
     await this.engine.createClient($config.APP_ID);
   }
 
+  private async destroyClientInstance() {
+    await this.engine.logout();
+    await this.engine.destroyClient();
+  }
+
   private constructor() {
     if (RTMEngine._instance) {
       return RTMEngine._instance;
@@ -53,6 +58,14 @@ class RTMEngine {
   get channelUid() {
     return this.channelId;
   }
+  destroy() {
+    try {
+      this.destroyClientInstance();
+      RTMEngine._instance = null;
+    } catch (error) {
+      console.log('Error destroying instance error: ', error);
+    }
+  }
 }
 
 export default RTMEngine;

package/template/src/rtm-events/EventUtils.ts

@@ -245,6 +245,9 @@ const EventUtils = (function () {
       }
       return this;
     },
+    clear() {
+      _events = {};
+    },
     // 1. To add multiple listeners
     // addListeners(evt: string, listeners: any) {
     //   if (Array.isArray(listeners)) {

package/template/src/rtm-events/EventsQueue.ts

@@ -27,10 +27,16 @@ const EventsQueue = (function () {
     },
     dequeue() {
       if (_eventsQueue.length == 0) return;
-      _eventsQueue.shift();
+      return _eventsQueue.pop();
     },
-    printQueue() {
-      return _eventsQueue;
+    isEmpty() {
+      return _eventsQueue.length === 0;
+    },
+    size() {
+      return _eventsQueue.length;
+    },
+    clear() {
+      _eventsQueue = [];
     },
   };
 })();

package/template/src/subComponents/ChatBubble.tsx

@@ -21,11 +21,19 @@ import useUserList from '../utils/useUserList';
 const ChatBubble = (props: ChatBubbleProps) => {
   const {renderList} = useUserList();
   const {primaryColor} = useContext(ColorContext);
-  let {isLocal, message, timestamp, uid} = props;
+  let {
+    isLocal,
+    message,
+    createdTimestamp,
+    uid,
+    isDeleted,
+    msgId,
+    updatedTimestamp,
+  } = props;
   let time =
-    new Date(parseInt(timestamp)).getHours() +
+    new Date(parseInt(createdTimestamp)).getHours() +
     ':' +
-    new Date(parseInt(timestamp)).getMinutes();
+    new Date(parseInt(createdTimestamp)).getMinutes();
   const handleUrl = (url: string) => {
     if (isWeb) {
       window.open(url, '_blank');
@@ -37,7 +45,15 @@ const ChatBubble = (props: ChatBubbleProps) => {
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
   return props?.render ? (
-    props.render(isLocal, message, timestamp, uid)
+    props.render(
+      isLocal,
+      message,
+      createdTimestamp,
+      uid,
+      msgId,
+      isDeleted,
+      updatedTimestamp,
+    )
   ) : (
     <View>
       <View style={isLocal ? style.chatSenderViewLocal : style.chatSenderView}>

package/template/src/subComponents/ChatContainer.tsx

@@ -129,9 +129,12 @@ const ChatContainer = (props?: {
               <ChatBubbleComponent
                 isLocal={localUid === message.uid}
                 message={message.msg}
-                timestamp={message.ts}
+                createdTimestamp={message.createdTimestamp}
+                updatedTimestamp={message.updatedTimestamp}
                 uid={message.uid}
                 key={message.ts}
+                msgId={message.msgId}
+                isDeleted={message.isDeleted}
               />
             </>
           ))
@@ -140,9 +143,12 @@ const ChatContainer = (props?: {
             <ChatBubbleComponent
               isLocal={localUid === message.uid}
               message={message.msg}
-              timestamp={message.ts}
+              createdTimestamp={message.createdTimestamp}
+              updatedTimestamp={message.updatedTimestamp}
               uid={message.uid}
               key={message.ts}
+              msgId={message.msgId}
+              isDeleted={message.isDeleted}
             />
           ))
         ) : (

package/template/src/subComponents/recording/useRecording.tsx

@@ -91,7 +91,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
   //const recordingStartedText = useString<boolean>('recordingNotificationLabel');
   const recordingStartedText = (active: boolean) =>
     active ? 'Recording Started' : 'Recording Stopped';
-  const {executePresenterQuery} = useRecordingLayoutQuery();
+  const {executePresenterQuery, executeNormalQuery} = useRecordingLayoutQuery();
   const {localUid} = useContext(ChatContext);
   const {screenShareData} = useScreenContext();
 
@@ -156,9 +156,14 @@ const RecordingProvider = (props: RecordingProviderProps) => {
           // 2. set the local recording state to true to update the UI
           setRecordingActive(true);
           // 3. set the presenter mode if screen share is active
-          if (Object.values(screenShareData).some((item) => item.isActive)) {
-            console.log('Executing presenter query');
-            executePresenterQuery();
+          const activeScreenshareUid = Object.keys(screenShareData).find(
+            (key) => screenShareData[key]?.isActive,
+          );
+          if (activeScreenshareUid) {
+            console.log('screenshare: Executing presenter query');
+            executePresenterQuery(parseInt(activeScreenshareUid));
+          } else {
+            executeNormalQuery();
           }
         }
       })

package/template/src/subComponents/recording/useRecordingLayoutQuery.tsx

@@ -1,8 +1,8 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {useParams} from '../../components/Router';
 
 import {gql, useMutation} from '@apollo/client';
-import {PropsContext} from '../../../agora-rn-uikit';
+import {UidType} from '../../../agora-rn-uikit';
 
 const SET_PRESENTER = gql`
   mutation setPresenter($uid: Int!, $passphrase: String!) {
@@ -19,10 +19,9 @@ const SET_NORMAL = gql`
 function useRecordingLayoutQuery() {
   const [setPresenterQuery] = useMutation(SET_PRESENTER);
   const [setNormalQuery] = useMutation(SET_NORMAL);
-  const {screenShareUid} = useContext(PropsContext).rtcProps;
   const {phrase} = useParams<any>();
 
-  const executePresenterQuery = () => {
+  const executePresenterQuery = (screenShareUid: UidType) => {
     setPresenterQuery({
       variables: {
         uid: screenShareUid,

package/template/src/subComponents/screenshare/ScreenshareConfigure.tsx

@@ -99,9 +99,10 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   }, []);
 
   const executeRecordingQuery = (isScreenActive: boolean) => {
-    if (!isScreenActive) {
+    if (isScreenActive) {
+      console.log('screenshare: Executing presenter query');
       // If screen share is not going on, start the screen share by executing the graphql query
-      executePresenterQuery();
+      executePresenterQuery(screenShareUid);
     } else {
       // If recording is already going on, stop the recording by executing the graphql query.
       executeNormalQuery();
@@ -134,16 +135,28 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         encryption as unknown as any,
       );
       isActive && setScreenshareActive(true);
+
       if (isActive) {
+        // 1. Set local state
+        setScreenShareData((prevState) => {
+          return {
+            ...prevState,
+            [screenShareUid]: {
+              name: renderListRef.current.renderList[screenShareUid]?.name,
+              isActive: true,
+            },
+          };
+        });
+        // 2. Inform everyone in the channel screenshare is actice
         CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
           value: `${true}`,
           level: EventLevel.LEVEL2,
         });
-        //if local user started the screenshare then change layout to pinned
+        //3 . if local user started the screenshare then change layout to pinned
         triggerChangeLayout(true, screenShareUid);
       }
     } catch (e) {
-      console.error("supriya an't start the screen share", e);
+      console.error("can't start the screen share", e);
       executeNormalQuery();
     }
   };

package/template/src/utils/getUniqueID.native.ts

@@ -0,0 +1,6 @@
+import 'react-native-get-random-values';
+import {nanoid} from 'nanoid';
+
+export default function getUniqueID() {
+  return nanoid();
+}

package/template/src/utils/getUniqueID.ts

@@ -0,0 +1,5 @@
+import {nanoid} from 'nanoid';
+
+export default function getUniqueID() {
+  return nanoid();
+}

package/template/src/utils/useDeleteMessage.ts

@@ -0,0 +1,36 @@
+/*
+********************************************
+ 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 {UidType} from '../../agora-rn-uikit';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
+import {MESSAGE_TYPE} from './useSendMessage';
+
+function useDeleteMessage() {
+  const {deleteChatMessage} = useChatMessages();
+  return (type: MESSAGE_TYPE, msgId: string, uid?: UidType) => {
+    switch (type) {
+      case MESSAGE_TYPE.group:
+        deleteChatMessage(msgId);
+        break;
+      case MESSAGE_TYPE.private:
+        if (uid) {
+          deleteChatMessage(msgId, uid);
+        } else {
+          console.error('To delete the private message, UID should be passed');
+        }
+        break;
+      default:
+        break;
+    }
+  };
+}
+
+export default useDeleteMessage;

package/template/src/utils/useEditMessage.ts

@@ -0,0 +1,41 @@
+/*
+********************************************
+ 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 {UidType} from '../../agora-rn-uikit';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
+import {MESSAGE_TYPE} from './useSendMessage';
+
+function useEditMessage() {
+  const {editChatMessage} = useChatMessages();
+  return (
+    type: MESSAGE_TYPE,
+    msgId: string,
+    message: string,
+    uid?: UidType,
+  ) => {
+    switch (type) {
+      case MESSAGE_TYPE.group:
+        editChatMessage(msgId, message);
+        break;
+      case MESSAGE_TYPE.private:
+        if (uid) {
+          editChatMessage(msgId, message, uid);
+        } else {
+          console.error('To edit the private message, UID should be passed');
+        }
+        break;
+      default:
+        break;
+    }
+  };
+}
+
+export default useEditMessage;

package/template/src/utils/useSendMessage.ts

@@ -9,24 +9,23 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import {useContext} from 'react';
-import ChatContext from '../components/ChatContext';
 import {UidType} from '../../agora-rn-uikit';
+import {useChatMessages} from '../components/chat-messages/useChatMessages';
 
 export enum MESSAGE_TYPE {
   group,
   private,
 }
 function useSendMessage() {
-  const {sendMessage, sendMessageToUid} = useContext(ChatContext);
+  const {sendChatMessage} = useChatMessages();
   return (type: MESSAGE_TYPE, message: string, uid?: UidType) => {
     switch (type) {
       case MESSAGE_TYPE.group:
-        sendMessage(message);
+        sendChatMessage(message);
         break;
       case MESSAGE_TYPE.private:
         if (uid) {
-          sendMessageToUid(message, uid);
+          sendChatMessage(message, uid);
         } else {
           console.error('To send the private message, UID should be passed');
         }