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

package/template/src/subComponents/ChatContainer.tsx

@@ -58,6 +58,7 @@ import {
   groupChatWelcomeContent,
 } from '../language/default-labels/videoCallScreenLabels';
 import CommonStyles from '../components/CommonStyles';
+import PinnedMessage from './chat/PinnedMessage';
 
 /**
  * Chat container is the component which renders all the chat messages
@@ -76,8 +77,15 @@ const ChatContainer = (props?: {
   const {privateMessageStore, messageStore} = useChatMessages();
   const messageStoreLengthRef = useRef(messageStore.length);
   const {height, width} = useWindowDimensions();
-  const {chatType, setChatType, privateChatUser, inputActive, showEmojiPicker} =
-    useChatUIControls();
+  const {
+    chatType,
+    setChatType,
+    privateChatUser,
+    inputActive,
+    showEmojiPicker,
+    pinMsgId,
+    pinnedByUser,
+  } = useChatUIControls();
   const privateMessageStoreRef = useRef(
     privateMessageStore[privateChatUser]?.length,
   );
@@ -212,6 +220,9 @@ const ChatContainer = (props?: {
       ) : (
         <></>
       )}
+      {pinMsgId && (
+        <PinnedMessage pinMsgId={pinMsgId} pinnedByUser={pinnedByUser} />
+      )}
       <ScrollView
         ref={scrollViewRef}
         onContentSizeChange={onContentSizeChange}
@@ -223,6 +234,7 @@ const ChatContainer = (props?: {
                 {info1(messageStore?.length ? false : true)}
               </Text>
             </View>
+
             {messageStore.map((message: messageStoreInterface, index) => (
               <>
                 {messageStoreLengthRef.current === messageStore.length &&
@@ -241,34 +253,38 @@ const ChatContainer = (props?: {
                 ) : (
                   <></>
                 )}
-                <ChatBubbleComponent
-                  isLocal={localUid === message.uid}
-                  isSameUser={
-                    index !== 0 && messageStore[index - 1].uid === message.uid
-                      ? true
-                      : false
-                  }
-                  previousMessageCreatedTimestamp={
-                    index !== 0
-                      ? (messageStore[index - 1]
-                          .createdTimestamp as unknown as string)
-                      : ''
-                  }
-                  message={message.msg}
-                  createdTimestamp={message.createdTimestamp}
-                  updatedTimestamp={message.updatedTimestamp}
-                  uid={message.uid}
-                  key={message.msgId}
-                  msgId={message.msgId}
-                  isDeleted={message.isDeleted}
-                  type={message.type}
-                  url={message?.url}
-                  thumb={message?.thumb}
-                  fileName={message?.fileName}
-                  ext={message?.ext}
-                  reactions={message?.reactions}
-                  scrollOffset={scrollOffset}
-                />
+                {!message?.hide ? (
+                  <ChatBubbleComponent
+                    isLocal={localUid === message.uid}
+                    isSameUser={
+                      index !== 0 && messageStore[index - 1].uid === message.uid
+                        ? true
+                        : false
+                    }
+                    previousMessageCreatedTimestamp={
+                      index !== 0
+                        ? (messageStore[index - 1]
+                            .createdTimestamp as unknown as string)
+                        : ''
+                    }
+                    message={message.msg}
+                    createdTimestamp={message.createdTimestamp}
+                    updatedTimestamp={message.updatedTimestamp}
+                    uid={message.uid}
+                    key={message.msgId}
+                    msgId={message.msgId}
+                    isDeleted={message.isDeleted}
+                    type={message.type}
+                    url={message?.url}
+                    thumb={message?.thumb}
+                    fileName={message?.fileName}
+                    ext={message?.ext}
+                    reactions={message?.reactions}
+                    scrollOffset={scrollOffset}
+                    replyToMsgId={message?.replyToMsgId}
+                    isLastMsg={messageStore.length - 1 === index}
+                  />
+                ) : null}
                 {messageStore?.length - 1 === index ? (
                   <Spacer size={10} />
                 ) : (
@@ -306,29 +322,36 @@ const ChatContainer = (props?: {
                   ) : (
                     <></>
                   )}
-                  <ChatBubbleComponent
-                    isLocal={localUid === message.uid}
-                    isSameUser={
-                      index !== 0 &&
-                      privateMessageStore[privateChatUser][index - 1].uid ===
-                        message.uid
-                        ? true
-                        : false
-                    }
-                    message={message.msg}
-                    createdTimestamp={message.createdTimestamp}
-                    updatedTimestamp={message.updatedTimestamp}
-                    uid={message.uid}
-                    key={message.msgId}
-                    msgId={message.msgId}
-                    isDeleted={message.isDeleted}
-                    type={message.type}
-                    url={message?.url}
-                    thumb={message?.thumb}
-                    fileName={message?.fileName}
-                    ext={message?.ext}
-                    reactions={message?.reactions}
-                  />
+                  {!message?.hide ? (
+                    <ChatBubbleComponent
+                      isLocal={localUid === message.uid}
+                      isSameUser={
+                        index !== 0 &&
+                        privateMessageStore[privateChatUser][index - 1].uid ===
+                          message.uid
+                          ? true
+                          : false
+                      }
+                      message={message.msg}
+                      createdTimestamp={message.createdTimestamp}
+                      updatedTimestamp={message.updatedTimestamp}
+                      uid={message.uid}
+                      key={message.msgId}
+                      msgId={message.msgId}
+                      isDeleted={message.isDeleted}
+                      type={message.type}
+                      url={message?.url}
+                      thumb={message?.thumb}
+                      fileName={message?.fileName}
+                      ext={message?.ext}
+                      reactions={message?.reactions}
+                      replyToMsgId={message?.replyToMsgId}
+                      isLastMsg={
+                        privateMessageStore[privateChatUser].length - 1 ===
+                        index
+                      }
+                    />
+                  ) : null}
                   {privateMessageStore[privateChatUser]?.length - 1 ===
                   index ? (
                     <Spacer size={10} />

package/template/src/subComponents/ChatInput.native.tsx

@@ -17,9 +17,10 @@ import {
   Image,
   Text,
   TextInput,
+  ViewStyle,
 } from 'react-native';
 import {useString} from '../utils/useString';
-import {ChatEmojiPicker, ChatEmojiButton} from './chat/ChatEmoji';
+import {ChatEmojiPicker, ChatEmojiButton} from './chat/ChatEmoji.native';
 
 import {
   ChatType,
@@ -47,11 +48,31 @@ import {useChatConfigure} from '../components/chat/chatConfigure';
 import {
   ChatMessageType,
   SDKChatType,
+  useChatMessages,
 } from '../components/chat-messages/useChatMessages';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import ChatUploadStatus from './chat/ChatUploadStatus';
 import {isAndroid} from '../utils/common';
 import Toast from '../../react-native-toast-message';
+import {ReplyMessageBubble} from './ChatBubble';
+import {
+  ChatError,
+  ChatMessage,
+  ChatMessageChatType,
+} from 'react-native-agora-chat';
+
+interface ExtendedChatMessage extends ChatMessage {
+  body: {
+    localPath?: string;
+    remotePath?: string;
+    type: ChatMessageType;
+  };
+  attributes: {
+    file_ext?: string;
+    file_name?: string;
+    replyToMsgId?: string;
+  };
+}
 
 export interface ChatSendButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -62,7 +83,7 @@ const ChatPanel = () => {
     <View style={style.chatPanelContainer}>
       <View style={style.chatPanel}>
         <ChatAttachmentButton />
-        {/* <ChatEmojiButton /> */}
+        <ChatEmojiButton />
       </View>
       <ChatSendButton />
     </View>
@@ -76,6 +97,7 @@ export interface ChatTextInputProps {
     onSubmitEditing: () => void,
     chatMessageInputPlaceholder: string,
   ) => JSX.Element;
+  style?: ViewStyle;
 }
 export const ChatTextInput = (props: ChatTextInputProps) => {
   const {
@@ -87,6 +109,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     uploadStatus,
     inputHeight,
     setInputHeight,
+    replyToMsgId,
   } = useChatUIControls();
 
   const {defaultContent} = useContent();
@@ -100,6 +123,8 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     privateChatInputPlaceHolderText,
   );
 
+  const {addMessageToPrivateStore, addMessageToStore} = useChatMessages();
+
   // React.useEffect(() => {
   //   if (message.length === 0) {
   //     setInputHeight(MIN_HEIGHT);
@@ -153,8 +178,36 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       from: data.uid.toString(),
       to: privateChatUser ? privateChatUser.toString() : groupID,
       msg: message,
+      ext: {
+        replyToMsgId,
+      },
+    };
+    const onProgress = (localMsgId: string, progress: number) => {
+      console.warn('chat msg in progress', progress);
+    };
+    const onError = (localMsgId: string, error: ChatError) => {
+      console.warn('chat msg in error', error);
+    };
+    const onSuccess = (message: ExtendedChatMessage) => {
+      console.warn('chat msg in success', message);
+      // Text message added here , attachments are added in ChatAttachment.native
+      const messageData = {
+        msg: option.msg.replace(/^(\n)+|(\n)+$/g, ''),
+        createdTimestamp: message.localTime,
+        msgId: message.msgId,
+        isDeleted: false,
+        type: message.body.type,
+        replyToMsgId: message.attributes?.replyToMsgId,
+      };
+      console.warn('message data', messageData);
+      // this is local user messages
+      if (message.chatType === ChatMessageChatType.PeerChat) {
+        addMessageToPrivateStore(Number(message.to), messageData, true);
+      } else {
+        addMessageToStore(Number(message.from), messageData);
+      }
     };
-    sendChatSDKMessage(option);
+    sendChatSDKMessage(option, {onProgress, onError, onSuccess});
     setInputHeight(MIN_HEIGHT);
     setMessage('');
   };
@@ -199,6 +252,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
         borderTopLeftRadius: isUploadStatusShown ? 0 : 8,
         maxHeight: MAX_HEIGHT,
         overflow: 'scroll',
+        ...props.style,
       }}
       blurOnSubmit={false}
       onSubmitEditing={onSubmitEditing}
@@ -216,20 +270,36 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
  * Input component for the Chat interface
  */
 const ChatInput = () => {
-  const {inputActive, showEmojiPicker} = useChatUIControls();
+  const {
+    inputActive,
+    showEmojiPicker,
+    replyToMsgId,
+    setShowEmojiPicker,
+    setMessage,
+  } = useChatUIControls();
   return (
-    <View
-      style={[
-        style.inputContainer,
-        showEmojiPicker
-          ? {backgroundColor: 'transparent'}
-          : {backgroundColor: $config.CARD_LAYER_1_COLOR},
-        // inputActive ? style.inputActiveView : {},
-      ]}>
-      {showEmojiPicker && <ChatEmojiPicker />}
+    <View style={[style.inputContainer]}>
+      {showEmojiPicker && (
+        <ChatEmojiPicker
+          isEmojiPickerOpen={true}
+          setIsEmojiPickerOpen={setShowEmojiPicker}
+          onEmojiSelect={emoji => setMessage(prev => prev + ' ' + emoji)}
+        />
+      )}
+
       <View style={style.inputView}>
         <ChatUploadStatus />
-        <ChatTextInput />
+        <View style={replyToMsgId ? [style.inputWrapper, {}] : {}}>
+          {replyToMsgId && (
+            <ReplyMessageBubble
+              repliedMsgId={replyToMsgId}
+              replyTxt={''}
+              showCoseIcon={true}
+              showPreview={false}
+            />
+          )}
+          <ChatTextInput style={replyToMsgId ? {borderWidth: 0} : {}} />
+        </View>
         <ChatPanel />
       </View>
     </View>
@@ -265,5 +335,14 @@ const style = StyleSheet.create({
   chatPanel: {
     flexDirection: 'row',
   },
+  inputWrapper: {
+    paddingHorizontal: 12,
+    paddingTop: 12,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['40%'],
+    borderRadius: 8,
+    borderTopWidth: 1,
+  },
 });
 export default ChatInput;

package/template/src/subComponents/ChatInput.tsx

@@ -43,6 +43,7 @@ import ChatSendButton, {handleChatSend} from './chat/ChatSendButton';
 import {
   ChatMessageType,
   SDKChatType,
+  useChatMessages,
 } from '../components/chat-messages/useChatMessages';
 import {
   groupChatLiveInputPlaceHolderText,
@@ -52,7 +53,7 @@ import {
   chatSendErrorTextSizeToastSubHeading,
 } from '../language/default-labels/videoCallScreenLabels';
 import ChatUploadStatus from './chat/ChatUploadStatus';
-import {AttachmentBubble} from './ChatBubble';
+import {AttachmentBubble, ReplyMessageBubble} from './ChatBubble';
 import IconButton from '../atoms/IconButton';
 import Toast from '../../react-native-toast-message';
 
@@ -93,9 +94,12 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     _handleHeightChange,
     chatInputRef,
     showEmojiPicker,
+    replyToMsgId,
+    setReplyToMsgId,
   } = useChatUIControls();
   const {defaultContent} = useContent();
   const {sendChatSDKMessage, uploadAttachment} = useChatConfigure();
+  const {addMessageToPrivateStore, addMessageToStore} = useChatMessages();
 
   React.useEffect(() => {
     if (message.length === 0) {
@@ -155,6 +159,10 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       toastHeadingSize,
       errorSubHeadingSize,
       _resetTextareaHeight,
+      replyToMsgId,
+      setReplyToMsgId,
+      addMessageToStore,
+      addMessageToPrivateStore,
     });
   };
 
@@ -197,7 +205,7 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
         fontFamily: ThemeConfig.FontFamily.sansPro,
         fontWeight: '400',
         height: inputHeight,
-        padding: 12,
+        padding: replyToMsgId ? 0 : 12,
         fontSize: ThemeConfig.FontSize.small,
         lineHeight: LINE_HEIGHT,
         borderWidth: 1,
@@ -269,6 +277,17 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
     />
   );
 
+  const renderReplyMsg = () => {
+    return (
+      <ReplyMessageBubble
+        repliedMsgId={replyToMsgId}
+        replyTxt={''}
+        showCoseIcon={true}
+        showPreview={false}
+      />
+    );
+  };
+
   return props?.render ? (
     props.render(
       message,
@@ -281,7 +300,8 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
       {uploadedFiles.length > 0 ? (
         <View
           style={[
-            style.attachmentContainer,
+            style.inputWrapper,
+            {paddingBottom: replyToMsgId ? 12 : 0},
             isUploadStatusShown
               ? {
                   borderTopLeftRadius: 0,
@@ -291,12 +311,26 @@ export const ChatTextInput = (props: ChatTextInputProps) => {
               : {borderRadius: 8, borderTopWidth: 1},
           ]}>
           <ScrollView style={{maxHeight: showEmojiPicker ? 120 : '100%'}}>
-            {uploadedFiles.map(renderAttachmentBubble)}
-            {renderTextInput({borderWidth: 0, padddingLeft: 0})}
+            {!replyToMsgId && uploadedFiles.map(renderAttachmentBubble)}
+            {/* {replyToMsgId && renderTextInput({borderWidth: 0, padddingLeft: 0})} */}
+            <View>
+              {replyToMsgId && <View>{renderReplyMsg()}</View>}
+              {replyToMsgId && uploadedFiles.map(renderAttachmentBubble)}
+              {!replyToMsgId &&
+                renderTextInput({borderWidth: 0, padddingLeft: 0})}
+            </View>
           </ScrollView>
         </View>
       ) : (
-        renderTextInput()
+        <View
+          style={
+            replyToMsgId
+              ? [style.inputWrapper, {borderRadius: 8, borderTopWidth: 1}]
+              : {}
+          }>
+          {replyToMsgId && <View>{renderReplyMsg()}</View>}
+          {renderTextInput({borderWidth: 0, padddingLeft: 0})}
+        </View>
       )}
     </>
   );
@@ -330,7 +364,7 @@ const style = StyleSheet.create({
     borderTopWidth: 1,
     borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
   },
-  attachmentContainer: {
+  inputWrapper: {
     paddingHorizontal: 12,
     paddingTop: 12,
     backgroundColor: $config.CARD_LAYER_2_COLOR,

package/template/src/subComponents/caption/Caption.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, TextStyle, View} from 'react-native';
 import React from 'react';
 import {useContent, useRtc} from 'customization-api';
 import {useCaption} from './useCaption';
@@ -14,7 +14,15 @@ type WebStreamMessageArgs = [number, Uint8Array];
 type NativeStreamMessageArgs = [{}, number, number, Uint8Array, number, number];
 type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
 
-const Caption: React.FC = () => {
+interface CaptionProps {
+  captionTextStyle?: TextStyle;
+  captionUserStyle?: TextStyle;
+}
+
+const Caption: React.FC<CaptionProps> = ({
+  captionTextStyle = {},
+  captionUserStyle = {},
+}) => {
   const {RtcEngineUnsafe} = useRtc();
   const {
     isLangChangeInProgress,
@@ -97,6 +105,8 @@ const Caption: React.FC = () => {
               setActiveLinesAvailable={setActiveLinesAvailable}
               inActiveLinesAvailable={inActiveLinesAvailable}
               setInActiveLinesAvaialble={setInActiveLinesAvaialble}
+              captionUserStyle={captionUserStyle}
+              captionTextStyle={captionTextStyle}
             />
           ) : (
             <></>
@@ -112,6 +122,8 @@ const Caption: React.FC = () => {
               setActiveLinesAvailable={setActiveLinesAvailable}
               inActiveLinesAvailable={inActiveLinesAvailable}
               setInActiveLinesAvaialble={setInActiveLinesAvaialble}
+              captionUserStyle={captionUserStyle}
+              captionTextStyle={captionTextStyle}
             />
           ) : (
             <></>

package/template/src/subComponents/caption/CaptionContainer.tsx

@@ -1,4 +1,11 @@
-import {StyleSheet, Text, useWindowDimensions, View} from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  TextStyle,
+  useWindowDimensions,
+  View,
+  ViewStyle,
+} from 'react-native';
 import React from 'react';
 
 import Caption from './Caption';
@@ -37,7 +44,17 @@ import {
 } from '../../language/default-labels/videoCallScreenLabels';
 import {logger, LogSource} from '../../logger/AppBuilderLogger';
 
-const CaptionContainer = () => {
+interface CaptionContainerProps {
+  containerStyle?: ViewStyle;
+  captionUserStyle?: TextStyle;
+  captionTextStyle?: TextStyle;
+}
+
+const CaptionContainer: React.FC<CaptionContainerProps> = ({
+  containerStyle = {},
+  captionUserStyle = {},
+  captionTextStyle = {},
+}) => {
   const moreIconRef = React.useRef<View>(null);
   const [actionMenuVisible, setActionMenuVisible] =
     React.useState<boolean>(false);
@@ -90,6 +107,7 @@ const CaptionContainer = () => {
             isMobileUA() ? styles.mobileContainer : styles.container,
             isMobileUA() && {marginHorizontal: 0},
             !isMobileUA() && isSmall() && {marginTop: 0},
+            containerStyle,
           ]}>
           <CaptionsActionMenu
             actionMenuVisible={actionMenuVisible}
@@ -104,7 +122,10 @@ const CaptionContainer = () => {
             />
           )}
 
-          <Caption />
+          <Caption
+            captionUserStyle={captionUserStyle}
+            captionTextStyle={captionTextStyle}
+          />
         </View>
       </View>
     </PlatformWrapper>

package/template/src/subComponents/caption/CaptionText.tsx

@@ -1,4 +1,10 @@
-import {Text, View, StyleSheet, LayoutChangeEvent} from 'react-native';
+import {
+  Text,
+  View,
+  StyleSheet,
+  LayoutChangeEvent,
+  TextStyle,
+} from 'react-native';
 import React from 'react';
 
 import ThemeConfig from '../../../src/theme';
@@ -14,6 +20,8 @@ interface CaptionTextProps {
   setActiveLinesAvailable?: React.Dispatch<React.SetStateAction<number>>;
   inActiveLinesAvailable?: number;
   setInActiveLinesAvaialble?: React.Dispatch<React.SetStateAction<number>>;
+  captionUserStyle?: TextStyle;
+  captionTextStyle?: TextStyle;
 }
 
 const DESKTOP_LINE_HEIGHT = 28;
@@ -29,6 +37,8 @@ const CaptionText = ({
   setActiveLinesAvailable,
   inActiveLinesAvailable,
   setInActiveLinesAvaialble,
+  captionUserStyle = {},
+  captionTextStyle = {},
 }: CaptionTextProps) => {
   const isMobile = isMobileUA();
 
@@ -95,6 +105,7 @@ const CaptionText = ({
         style={[
           styles.captionUserName,
           isMobile ? styles.mobileNameFontSize : styles.desktopNameFontSize,
+          captionUserStyle,
         ]}
         numberOfLines={1}
         textBreakStrategy="simple"
@@ -122,6 +133,7 @@ const CaptionText = ({
               ? styles.mobileCaptionFontSize
               : styles.desktopCaptionFontSize,
             isAndroid() && {lineHeight: MOBILE_LINE_HEIGHT - 2},
+            captionTextStyle,
           ]}>
           {value}
         </Text>

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

@@ -1,6 +1,11 @@
 import {StyleSheet, Text, useWindowDimensions, View} from 'react-native';
 import React from 'react';
-import {calculatePosition, isMobileUA, trimText} from '../../utils/common';
+import {
+  calculatePosition,
+  isMobileUA,
+  isWebInternal,
+  trimText,
+} from '../../utils/common';
 import IconButton from '../../atoms/IconButton';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import ActionMenu, {ActionMenuItem} from '../../../src/atoms/ActionMenu';
@@ -60,7 +65,13 @@ export const ChatActionMenu = (props: ChatActionMenuProps) => {
     userId,
   } = props;
 
-  const {setChatType, setPrivateChatUser} = useChatUIControls();
+  const {
+    setChatType,
+    setPrivateChatUser,
+    setReplyToMsgId,
+    pinMsgId,
+    pinnedByUser,
+  } = useChatUIControls();
 
   const actionMenuitems: ActionMenuItem[] = [];
   const [modalPosition, setModalPosition] = React.useState({});
@@ -68,7 +79,8 @@ export const ChatActionMenu = (props: ChatActionMenuProps) => {
   const [showDeleteMessageModal, setShowDeleteMessageModal] =
     React.useState(false);
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
-  const {downloadAttachment, deleteAttachment} = useChatConfigure();
+  const {downloadAttachment, deleteAttachment, pinMessage, unPinMessage} =
+    useChatConfigure();
   const {removeMessageFromPrivateStore, removeMessageFromStore} =
     useChatMessages();
   const {defaultContent} = useContent();
@@ -96,6 +108,31 @@ export const ChatActionMenu = (props: ChatActionMenuProps) => {
     );
   }
   const copiedToClipboardTextLabel = useString(copiedToClipboardText)();
+  const isMsgPinned = pinMsgId === msgId && pinnedByUser === userId;
+
+  actionMenuitems.push({
+    icon: 'reply',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: 'Reply',
+    onPress: () => {
+      setReplyToMsgId(msgId);
+      setActionMenuVisible(false);
+    },
+  });
+
+  // native pin message to be released with 1.3.0 chat sdk
+  isWebInternal() &&
+    actionMenuitems.push({
+      icon: isMsgPinned ? 'unpin-outlined' : 'pin-outlined',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: isMsgPinned ? 'UnPin Message' : 'Pin Message',
+      onPress: () => {
+        isMsgPinned ? unPinMessage(msgId) : pinMessage(msgId);
+        setActionMenuVisible(false);
+      },
+    });
 
   !isLocal &&
     chatType == SDKChatType.GROUP_CHAT &&