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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "2.3.0-beta.12",
+  "version": "2.3.0-beta.13",
   "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/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/chat-messages/useChatMessages.tsx

@@ -21,28 +21,42 @@ 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) => {
@@ -53,7 +67,9 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
   const {setUnreadGroupMessageCount, setUnreadIndividualMessageCount} =
     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>();
@@ -91,54 +107,168 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
       });
     };
     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);
+          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 +277,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 +309,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 +460,8 @@ const ChatMessagesProvider = (props: ChatMessagesProviderProps) => {
         messageStore,
         privateMessageStore,
         sendChatMessage,
+        editChatMessage,
+        deleteChatMessage,
       }}>
       {props.children}
     </ChatMessagesContext.Provider>

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/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');
         }