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

package/template/src/subComponents/chat/ChatAttachment.native.tsx

@@ -43,11 +43,12 @@ interface ExtendedChatMessage extends ChatMessage {
   attributes: {
     file_ext?: string;
     file_name?: string;
+    replyToMsgId?: string;
   };
 }
 
 export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
-  const {privateChatUser, setUploadStatus} = useChatUIControls();
+  const {privateChatUser, setUploadStatus, replyToMsgId} = useChatUIControls();
   const {sendChatSDKMessage} = useChatConfigure();
   const {data} = useRoomInfo();
 
@@ -140,6 +141,7 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
             file_name: result[0].name,
             file_url: filePath,
             from_platform: 'native',
+            replyToMsgId,
           },
         };
         console.warn('chatOPtion', option);
@@ -166,8 +168,8 @@ export const ChatAttachmentButton = (props: ChatAttachmentButtonProps) => {
             url: message.body?.remotePath,
             ext: message.attributes?.file_ext,
             fileName: message.attributes?.file_name,
+            replyToMsgId: message.attributes?.replyToMsgId,
           };
-          console.warn('message data', messageData);
 
           // this is local user messages
           if (message.chatType === ChatMessageChatType.PeerChat) {

package/template/src/subComponents/chat/ChatEmoji.native.tsx

@@ -1,9 +1,11 @@
-import {StyleSheet, Text, View} from 'react-native';
+import {Button, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import React from 'react';
 import {useChatUIControls} from '../../components/chat-ui/useChatUIControls';
 import IconButton from '../../../src/atoms/IconButton';
-//import data from 'emoji-mart-native/data/google.json';
-import {Picker} from 'emoji-mart-native';
+import {useChatConfigure} from '../../../src/components/chat/chatConfigure';
+import {MoreMessageOptions} from './ChatQuickActionsMenu';
+import {hexadecimalTransparency} from 'customization-api';
+import EmojiPicker, {type EmojiType} from 'rn-emoji-keyboard';
 
 export interface ChatEmojiButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -32,7 +34,7 @@ export const ChatEmojiButton = (props: ChatEmojiButtonProps) => {
           },
           iconSize: 24,
           name: 'chat_emoji',
-          tintColor: $config.SECONDARY_ACTION_COLOR,
+          tintColor: $config.SEMANTIC_NEUTRAL,
         }}
         onPress={onPress}
       />
@@ -40,28 +42,150 @@ export const ChatEmojiButton = (props: ChatEmojiButtonProps) => {
   );
 };
 
-export const ChatEmojiPicker = () => {
-  const {setShowEmojiPicker, setMessage} = useChatUIControls();
-  const handleEmojiClick = emoji => {
-    setMessage(prev => prev + ' ' + emoji.native);
+export const ChatEmojiPicker = ({
+  isEmojiPickerOpen,
+  setIsEmojiPickerOpen,
+  onEmojiSelect,
+}) => {
+  const handleEmojiClick = ({emoji}) => {
+    onEmojiSelect(emoji);
   };
   return (
     <View style={styles.emojiContainer} testID={'emoji-container'}>
-      <Picker
-        //data={data}
-        // autoFocus={true}
-        native={true}
-        emojiSize={28}
-        perLine={9}
-        onPressClose={() => setShowEmojiPicker(false)}
-        showSkinTones={false}
-        color={$config.PRIMARY_ACTION_BRAND_COLOR}
-        theme={
-          $config.INPUT_FIELD_BACKGROUND_COLOR === '#FFFFFF' ? 'light' : 'dark'
-        }
-        showCloseButton={true}
-        onSelect={handleEmojiClick}
+      <EmojiPicker
+        onEmojiSelected={handleEmojiClick}
+        open={isEmojiPickerOpen}
+        categoryPosition="top" // floating' | 'top' | 'bottom'
+        onClose={() => setIsEmojiPickerOpen(false)}
+        theme={{
+          backdrop:
+            $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['60%'], // need design input
+          knob: $config.SECONDARY_ACTION_COLOR,
+          container: $config.CARD_LAYER_3_COLOR,
+          header: $config.FONT_COLOR,
+          category: {
+            icon: $config.SECONDARY_ACTION_COLOR,
+            iconActive: $config.SECONDARY_ACTION_COLOR, // need design input
+            container: $config.CARD_LAYER_2_COLOR,
+            containerActive: $config.PRIMARY_ACTION_BRAND_COLOR, // need design input
+          },
+        }}
+      />
+    </View>
+  );
+};
+
+export const ReactionPicker = props => {
+  const {setMessage, showEmojiPicker, setShowEmojiPicker} = useChatUIControls();
+  const {addReaction} = useChatConfigure();
+  const {messageId, isLocal, userId, type, message, setIsHovered} = props;
+
+  //	Controls the reactions to display in the reactions picker. Takes unified emoji ids
+  const reactions = [
+    {emoji: '❤️', unified: '2665-fe0f'},
+    {emoji: '👍', unified: '1f44d'},
+    {emoji: '🎉', unified: '1f389'},
+    {
+      emoji: '🤣',
+      unified: '1f923',
+    },
+  ];
+
+  const handleReactionClick = emoji => {
+    addReaction(messageId, emoji);
+    setIsHovered(false);
+  };
+
+  return (
+    <View
+      style={[styles.reactionsContainer, isLocal ? {right: 0} : {left: 0}]}
+      testID={'reaction-container'}>
+      {reactions.map((emojiObject, index) => (
+        <React.Fragment key={emojiObject.unified}>
+          <TouchableOpacity
+            style={styles.emojiWrapper}
+            onPress={() => handleReactionClick(emojiObject.emoji)}>
+            <Text style={{fontSize: 16}}>{emojiObject.emoji}</Text>
+          </TouchableOpacity>
+          {index === reactions.length - 1 && (
+            <>
+              <CustomReactionPicker
+                isLocal={isLocal}
+                messageId={messageId}
+                setIsHovered={setIsHovered}
+              />
+
+              <MoreMessageOptions
+                userId={userId}
+                isLocal={isLocal}
+                messageId={messageId}
+                type={type}
+                message={message}
+                setIsHovered={setIsHovered}
+              />
+            </>
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  );
+};
+
+export const CustomReactionPicker = ({isLocal, setIsHovered, messageId}) => {
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = React.useState(false);
+  const {addReaction} = useChatConfigure();
+  const handleCustomReactionClick = (emoji: string) => {
+    addReaction(messageId, emoji);
+    setIsHovered(false);
+  };
+
+  return (
+    <View>
+      <IconButton
+        hoverEffect={false}
+        hoverEffectStyle={{
+          backgroundColor: $config.ICON_BG_COLOR,
+          borderRadius: 24,
+        }}
+        iconProps={{
+          iconType: 'plain',
+          base64: false,
+          iconContainerStyle: {
+            padding: 2,
+            marginHorizontal: 4,
+          },
+          iconSize: 20,
+          name: 'add_reaction',
+          tintColor:
+            $config.SECONDARY_ACTION_COLOR + hexadecimalTransparency['75%'],
+        }}
+        onPress={() => {
+          setIsEmojiPickerOpen(true);
+        }}
       />
+      {isEmojiPickerOpen ? (
+        <ChatEmojiPicker
+          isEmojiPickerOpen={isEmojiPickerOpen}
+          setIsEmojiPickerOpen={setIsEmojiPickerOpen}
+          onEmojiSelect={handleCustomReactionClick}
+        />
+      ) : (
+        <></>
+      )}
+      {/* {isEmojiPickerOpen && (
+        <CustomEmojiPicker
+          containerStyle={[
+            styles.customEmojiPickerContainer,
+            isLocal ? {right: 0} : {left: 0},
+          ]}
+          isReactionPicker={true}
+          handleEmojiClick={handleCustomReactionClick}
+          handleEmojiClose={() => {
+            setIsEmojiPickerOpen(false);
+            setIsHovered(false);
+          }}
+        />
+      )} */}
     </View>
   );
 };
@@ -72,4 +196,39 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     position: 'relative',
   },
+  emojiWrapper: {
+    width: 20,
+    height: 20,
+    marginHorizontal: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  reactionsContainer: {
+    flexDirection: 'row',
+    position: 'absolute',
+    bottom: '100%',
+    padding: 4,
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    backgroundColor: $config.CARD_LAYER_4_COLOR,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['25%'],
+    borderRadius: 4,
+    zIndex: 1,
+    shadowColor: $config.HARD_CODED_BLACK_COLOR,
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.35,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+  customEmojiPickerContainer: {
+    position: 'absolute',
+    top: 30,
+    right: 0,
+    width: 350,
+  },
 });

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

@@ -157,7 +157,7 @@ const CustomEmojiPicker = ({
   );
 };
 
-const CustomReactioPicker = ({isLocal, setIsHovered, messageId}) => {
+export const CustomReactionPicker = ({isLocal, setIsHovered, messageId}) => {
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = React.useState(false);
   const {addReaction} = useChatConfigure();
   const handleCustomReactionClick = (emojiObject: {
@@ -181,7 +181,7 @@ const CustomReactioPicker = ({isLocal, setIsHovered, messageId}) => {
           iconType: 'plain',
           base64: false,
           iconContainerStyle: {
-            padding: 0,
+            padding: 2,
             marginHorizontal: 4,
           },
           iconSize: 20,
@@ -245,7 +245,7 @@ export const ReactionPicker = props => {
           </TouchableOpacity>
           {index === reactions.length - 1 && (
             <>
-              <CustomReactioPicker
+              <CustomReactionPicker
                 isLocal={isLocal}
                 messageId={messageId}
                 setIsHovered={setIsHovered}
@@ -256,6 +256,7 @@ export const ReactionPicker = props => {
                 messageId={messageId}
                 type={type}
                 message={message}
+                setIsHovered={setIsHovered}
               />
             </>
           )}

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

@@ -1,7 +1,11 @@
 import {StyleSheet, Text, useWindowDimensions, View} from 'react-native';
 import React from 'react';
 import ActionMenu, {ActionMenuItem} from '../../../src/atoms/ActionMenu';
-import {calculatePosition, trimText} from '../../../src/utils/common';
+import {
+  calculatePosition,
+  isWebInternal,
+  trimText,
+} from '../../../src/utils/common';
 import IconButton from '../../../src/atoms/IconButton';
 import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
 import {
@@ -37,6 +41,8 @@ interface ChatQuickActionsMenuProps {
   messageId?: string;
   type: ChatMessageType;
   message: string;
+  showReplyOption?: boolean;
+  setIsHovered?: (isHover: boolean) => void;
 }
 
 const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
@@ -49,17 +55,28 @@ const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
     messageId,
     type,
     message: msg,
+    showReplyOption,
+    setIsHovered,
   } = props;
   const [isPosCalculated, setIsPosCalculated] = React.useState(false);
   const {width: globalWidth, height: globalHeight} = useWindowDimensions();
   const [modalPosition, setModalPosition] = React.useState({});
-  const {setChatType, setPrivateChatUser, showEmojiPicker, privateChatUser} =
-    useChatUIControls();
+  const {
+    setChatType,
+    setPrivateChatUser,
+    showEmojiPicker,
+    privateChatUser,
+    replyToMsgId,
+    pinMsgId,
+    setPinMsgId,
+    setReplyToMsgId,
+    pinnedByUser,
+  } = useChatUIControls();
   const {removeMessageFromPrivateStore, removeMessageFromStore} =
     useChatMessages();
   const [showDeleteMessageModal, setShowDeleteMessageModal] =
     React.useState(false);
-  const {deleteAttachment} = useChatConfigure();
+  const {deleteAttachment, pinMessage, unPinMessage} = useChatConfigure();
 
   const actionMenuitems: ActionMenuItem[] = [];
   const {defaultContent} = useContent();
@@ -69,16 +86,21 @@ const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
   } = useRoomInfo();
 
   const groupID = chat.group_id;
+  const isGroupOwner = chat.is_group_owner;
+  const isMsgPinned = pinMsgId === messageId;
 
-  // actionMenuitems.push({
-  //   icon: 'reply',
-  //   iconColor: $config.SECONDARY_ACTION_COLOR,
-  //   textColor: $config.FONT_COLOR,
-  //   title: 'Reply',
-  //   onPress: () => {
-  //     setActionMenuVisible(false);
-  //   },
-  // });
+  showReplyOption &&
+    actionMenuitems.push({
+      icon: 'reply',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: 'Reply',
+      onPress: () => {
+        setReplyToMsgId(messageId);
+        setActionMenuVisible(false);
+        setIsHovered(false);
+      },
+    });
 
   const cancelTxt = useString(cancelText)();
   const cancelLabel =
@@ -108,9 +130,11 @@ const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
       iconSize: 14,
       title: 'Private Reply',
       onPress: () => {
+        setReplyToMsgId(messageId);
         setPrivateChatUser(userId);
         setChatType(ChatType.Private);
         setActionMenuVisible(false);
+        setIsHovered(false);
       },
     });
 
@@ -123,41 +147,50 @@ const ChatQuickActionsMenu = (props: ChatQuickActionsMenuProps) => {
       onPress: () => {
         Clipboard.setString(msg);
         setActionMenuVisible(false);
+        setIsHovered(false);
+      },
+    });
+
+  // native pin message to be released with 1.3.0 chat sdk
+  isWebInternal() &&
+    chatType == SDKChatType.GROUP_CHAT &&
+    actionMenuitems.push({
+      icon: isMsgPinned ? 'unpin-outlined' : 'pin-outlined',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: isMsgPinned ? 'UnPin Message' : 'Pin Message',
+      onPress: () => {
+        isMsgPinned ? unPinMessage(messageId) : pinMessage(messageId);
+        setActionMenuVisible(false);
+        setIsHovered(false);
       },
     });
-  // actionMenuitems.push({
-  //   icon: 'pin-outlined',
-  //   iconColor: $config.SECONDARY_ACTION_COLOR,
-  //   textColor: $config.FONT_COLOR,
-  //   title: 'Pin Message',
-  //   onPress: () => {
-  //     setActionMenuVisible(false);
-  //   },
-  // });
 
-  // actionMenuitems.push({
-  //   icon: 'block_user',
-  //   iconColor: $config.SEMANTIC_ERROR,
-  //   textColor: $config.SEMANTIC_ERROR,
-  //   title: 'Block User',
-  //   onPress: () => {
-  //     // block user can be done only by group owner and admins
-  //     setActionMenuVisible(false);
-  //   },
-  // });
+  //Only Chat Group Owner and Admin  can block a user
+  // isGroupOwner &&
+  //   actionMenuitems.push({
+  //     icon: 'block_user',
+  //     iconColor: $config.SEMANTIC_ERROR,
+  //     textColor: $config.SEMANTIC_ERROR,
+  //     title: 'Block User',
+  //     onPress: () => {
+  //       // block user can be done only by group owner and admins
+  //       setActionMenuVisible(false);
+  //     },
+  //   });
 
   actionMenuitems.push({
     icon: 'delete',
     iconColor: $config.SEMANTIC_ERROR,
     textColor: $config.SEMANTIC_ERROR,
     title: 'Delete Message',
+    disabled: isMsgPinned,
     onPress: () => {
       if (isLocal) {
         // confirm dialog : user is deleting for all
         setShowDeleteMessageModal(true);
         //deleteAttachment(msgId, recallFromUser.toString(), chatType);
       } else {
-        debugger;
         if (chatType === SDKChatType.GROUP_CHAT) {
           removeMessageFromStore(messageId, isLocal);
         }
@@ -238,6 +271,8 @@ export const MoreMessageOptions = ({
   messageId,
   type,
   message,
+  showReplyOption = true,
+  setIsHovered,
 }) => {
   const moreIconRef = React.useRef(null);
   const [messageOptionsMenuVisible, setMessageOptionsMenuVisible] =
@@ -256,6 +291,8 @@ export const MoreMessageOptions = ({
         messageId={messageId}
         type={type}
         message={message}
+        showReplyOption={showReplyOption}
+        setIsHovered={setIsHovered}
       />
 
       <View
@@ -278,7 +315,6 @@ export const MoreMessageOptions = ({
             borderRadius: 4,
             padding: 2,
           }}
-          containerStyle={{margin: 4}}
           iconProps={{
             iconType: 'plain',
             name: 'more-menu',

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

@@ -12,6 +12,7 @@ import {useRoomInfo} from 'customization-api';
 import {
   ChatMessageType,
   SDKChatType,
+  useChatMessages,
 } from '../../components/chat-messages/useChatMessages';
 import {useString} from '../../utils/useString';
 import {
@@ -21,6 +22,7 @@ import {
 } from '../../language/default-labels/videoCallScreenLabels';
 import {isMobileUA, isWeb} from '../../utils/common';
 import Toast from '../../../react-native-toast-message';
+import {ChatMessageChatType} from 'react-native-agora-chat';
 
 export interface ChatSendButtonProps {
   render?: (onPress: () => void) => JSX.Element;
@@ -41,6 +43,10 @@ export const handleChatSend = ({
   toastHeadingSize,
   errorSubHeadingSize,
   _resetTextareaHeight,
+  replyToMsgId,
+  setReplyToMsgId,
+  addMessageToStore,
+  addMessageToPrivateStore,
 }) => {
   const isAllFilesUploaded =
     uploadedFiles.length > 0 &&
@@ -76,9 +82,35 @@ export const handleChatSend = ({
       to: selectedUserId ? selectedUserId.toString() : groupID,
       ext: {
         from_platform: isWeb() ? 'web' : 'native',
+        replyToMsgId: replyToMsgId,
       },
     };
-    sendChatSDKMessage(option);
+    const onProgress = (localMsgId: string, progress: number) => {
+      console.warn('chat msg in progress', progress);
+    };
+    const onError = (localMsgId: string, error: any) => {
+      console.warn('chat msg in error', error);
+    };
+    const onSuccess = (message: any) => {
+      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, {onProgress, onError, onSuccess});
   };
 
   if (uploadedFiles.length > 0) {
@@ -106,6 +138,7 @@ export const handleChatSend = ({
           file_name,
           from_platform: isWeb() ? 'web' : 'native',
           msg: uploadedFiles.length === 1 ? message : '',
+          replyToMsgId: replyToMsgId,
         },
       };
       sendChatSDKMessage(option);
@@ -120,6 +153,7 @@ export const handleChatSend = ({
   }
 
   setMessage && setMessage('');
+  setReplyToMsgId('');
   setInputHeight && setInputHeight(MIN_HEIGHT);
   setUploadedFiles && setUploadedFiles(prev => []);
   isWeb() && setShowEmojiPicker(false);
@@ -128,6 +162,7 @@ export const handleChatSend = ({
 const ChatSendButton = (props: ChatSendButtonProps) => {
   const {sendChatSDKMessage} = useChatConfigure();
   const {setShowEmojiPicker} = useChatUIControls();
+  const {addMessageToPrivateStore, addMessageToStore} = useChatMessages();
   const {
     privateChatUser: selectedUserId,
     message,
@@ -138,6 +173,8 @@ const ChatSendButton = (props: ChatSendButtonProps) => {
     setUploadedFiles,
     setInputHeight,
     _resetTextareaHeight,
+    replyToMsgId,
+    setReplyToMsgId,
   } = useChatUIControls();
 
   const {data} = useRoomInfo();
@@ -166,6 +203,10 @@ const ChatSendButton = (props: ChatSendButtonProps) => {
       toastHeadingSize,
       errorSubHeadingSize,
       _resetTextareaHeight,
+      replyToMsgId,
+      setReplyToMsgId,
+      addMessageToPrivateStore,
+      addMessageToStore,
     });
 
   return props?.render ? (