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

package/template/src/subComponents/ChatBubble.tsx

@@ -26,7 +26,12 @@ import Hyperlink from 'react-native-hyperlink';
 import {useString} from '../utils/useString';
 import {ChatBubbleProps} from '../components/ChatContext';
 import {isMobileUA, isWebInternal, trimText} from '../utils/common';
-import {useChatUIControls, useContent, useLocalUid} from 'customization-api';
+import {
+  useChatUIControls,
+  useContent,
+  useLocalUid,
+  IconButton,
+} from 'customization-api';
 import ThemeConfig from '../theme';
 import hexadecimalTransparency from '../utils/hexadecimalTransparency';
 import {containsOnlyEmojis, formatAMPM, isURL} from '../utils';
@@ -34,14 +39,18 @@ import {ChatType, UploadStatus} from '../components/chat-ui/useChatUIControls';
 import ImageIcon from '../atoms/ImageIcon';
 import {ChatActionMenu, MoreMenu} from './chat/ChatActionMenu';
 import ImagePopup from './chat/ImagePopup';
-import {ChatMessageType} from '../components/chat-messages/useChatMessages';
+import {
+  ChatMessageType,
+  useChatMessages,
+} from '../components/chat-messages/useChatMessages';
 import {
   chatMsgDeletedText,
   videoRoomUserFallbackText,
 } from '../language/default-labels/videoCallScreenLabels';
-import {ReactionPicker} from './chat/ChatEmoji';
+import {ReactionPicker, CustomReactionPicker} from './chat/ChatEmoji';
 import {useChatConfigure} from '../../src/components/chat/chatConfigure';
 import Tooltip from '../../src/atoms/Tooltip';
+import {MoreMessageOptions} from './chat/ChatQuickActionsMenu';
 
 type AttachmentBubbleProps = {
   fileName: string;
@@ -103,6 +112,177 @@ export const AttachmentBubble: React.FC<AttachmentBubbleProps> = ({
   );
 };
 
+export const ReplyMessageBubble = ({
+  repliedMsgId,
+  replyTxt,
+  showCoseIcon = false,
+  showPreview = true,
+}) => {
+  const {messageStore, privateMessageStore} = useChatMessages();
+  const {defaultContent} = useContent();
+  const {setReplyToMsgId, chatType, privateChatUser} = useChatUIControls();
+  const localUid = useLocalUid();
+  let repliedMsg = [];
+  const msgStore =
+    chatType === ChatType.Group
+      ? messageStore
+      : privateMessageStore[privateChatUser] || messageStore;
+  repliedMsg = msgStore.filter(msg => msg.msgId === repliedMsgId);
+  if (repliedMsg.length == 0 && chatType === ChatType.Private) {
+    repliedMsg = messageStore.filter(msg => msg.msgId === repliedMsgId);
+  }
+  const isAttachMsg = repliedMsg[0]?.type !== ChatMessageType.TXT;
+
+  let time = formatAMPM(new Date(repliedMsg[0]?.createdTimestamp));
+  const name =
+    localUid === repliedMsg[0]?.uid
+      ? 'You'
+      : trimText(defaultContent[repliedMsg[0]?.uid]?.name);
+  const text = repliedMsg[0]?.msg;
+  const fileName = `[${repliedMsg[0]?.fileName}]`;
+  const fileExt = repliedMsg[0]?.ext;
+
+  return (
+    <View style={style.repliedMsgContainer}>
+      <View
+        style={{
+          flexDirection: 'row',
+          gap: 8,
+          alignItems: 'center',
+        }}>
+        <View style={style.repliedMsgContent}>
+          {isAttachMsg ? (
+            repliedMsg[0]?.type === ChatMessageType.IMAGE ? (
+              <Image
+                source={{uri: repliedMsg[0]?.thumb}}
+                style={style.replyPreviewImg}
+              />
+            ) : (
+              <ImageIcon
+                base64={true}
+                iconSize={32}
+                iconType="plain"
+                name={
+                  fileExt === 'pdf'
+                    ? 'chat_attachment_pdf'
+                    : fileExt === 'doc' || fileExt === 'docx'
+                    ? 'chat_attachment_doc'
+                    : 'chat_attachment_unknown'
+                }
+                tintColor={$config.SEMANTIC_NEUTRAL}
+              />
+            )
+          ) : (
+            // <Text style={style.messageStyle}>{text}</Text>
+            <></>
+          )}
+        </View>
+        <View>
+          <View style={{display: 'flex', flexDirection: 'row'}}>
+            <Text
+              style={style.userNameStyle}
+              numberOfLines={1}
+              ellipsizeMode="tail">
+              {name}
+            </Text>
+            <Text
+              style={style.timestampStyle}
+              numberOfLines={1}
+              ellipsizeMode="tail">
+              {time}
+            </Text>
+          </View>
+          {isAttachMsg ? (
+            <Text
+              style={style.replyMessageStyle}
+              numberOfLines={1}
+              ellipsizeMode="tail">
+              {fileName + ' ' + text}
+            </Text>
+          ) : (
+            <Text style={[style.messageStyle, {maxWidth: 265}]}>{text}</Text>
+          )}
+        </View>
+      </View>
+      {showCoseIcon && (
+        <View>
+          <IconButton
+            hoverEffect={false}
+            hoverEffectStyle={{
+              backgroundColor: $config.ICON_BG_COLOR,
+              borderRadius: 20,
+            }}
+            iconProps={{
+              iconType: 'plain',
+              iconContainerStyle: {
+                padding: 5,
+              },
+              iconSize: 20,
+              name: 'close',
+              tintColor: $config.SECONDARY_ACTION_COLOR,
+            }}
+            onPress={() => {
+              // handleEmojiClose();
+              // setShowEmojiPicker(false);
+              setReplyToMsgId('');
+            }}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const ChatLastMsgOptions = ({msgId, isLocal, userId, type, message}) => {
+  const {setReplyToMsgId} = useChatUIControls();
+  return (
+    <View
+      style={[
+        style.chatLastMsgOptions,
+        isLocal ? style.lastOptionsLocalView : style.lastOptionsRemoteView,
+      ]}>
+      <View>
+        <IconButton
+          hoverEffect={false}
+          hoverEffectStyle={{
+            backgroundColor: $config.ICON_BG_COLOR,
+            borderRadius: 20,
+          }}
+          iconProps={{
+            iconType: 'plain',
+            iconContainerStyle: {
+              padding: 2,
+            },
+            iconSize: 20,
+            name: 'reply',
+            tintColor: $config.SECONDARY_ACTION_COLOR,
+          }}
+          onPress={() => {
+            setReplyToMsgId(msgId);
+          }}
+        />
+      </View>
+      <View>
+        <CustomReactionPicker
+          isLocal={isLocal}
+          messageId={msgId}
+          setIsHovered={() => {}}
+        />
+      </View>
+
+      <MoreMessageOptions
+        userId={userId}
+        isLocal={isLocal}
+        messageId={msgId}
+        type={type}
+        message={message}
+        showReplyOption={false}
+        setIsHovered={() => {}}
+      />
+    </View>
+  );
+};
+
 const ChatBubble = (props: ChatBubbleProps) => {
   const {defaultContent} = useContent();
   const {chatType, privateChatUser} = useChatUIControls();
@@ -130,6 +310,8 @@ const ChatBubble = (props: ChatBubbleProps) => {
     ext,
     reactions,
     scrollOffset,
+    replyToMsgId,
+    isLastMsg,
   } = props;
 
   const localUid = useLocalUid();
@@ -190,6 +372,7 @@ const ChatBubble = (props: ChatBubbleProps) => {
       ext,
       previousMessageCreatedTimestamp,
       reactions,
+      replyToMsgId,
     )
   ) : (
     <>
@@ -284,19 +467,33 @@ const ChatBubble = (props: ChatBubbleProps) => {
                       textDecorationLine: 'underline',
                     }}>
                     {type === ChatMessageType.TXT && (
-                      <Text
-                        style={[
-                          style.messageStyle,
-                          containsOnlyEmojis(message)
-                            ? {fontSize: 24, lineHeight: 32}
-                            : {fontSize: 14, lineHeight: 20},
-                        ]}
-                        selectable={true}>
-                        {message}
-                      </Text>
+                      <>
+                        {replyToMsgId && (
+                          <ReplyMessageBubble
+                            repliedMsgId={replyToMsgId}
+                            replyTxt={message}
+                          />
+                        )}
+                        <Text
+                          style={[
+                            style.messageStyle,
+                            containsOnlyEmojis(message)
+                              ? {fontSize: 24, lineHeight: 32}
+                              : {fontSize: 14, lineHeight: 20},
+                          ]}
+                          selectable={true}>
+                          {message}
+                        </Text>
+                      </>
                     )}
                     {type === ChatMessageType.IMAGE && (
                       <View>
+                        {replyToMsgId && (
+                          <ReplyMessageBubble
+                            repliedMsgId={replyToMsgId}
+                            replyTxt={message}
+                          />
+                        )}
                         <TouchableOpacity
                           style={{
                             justifyContent: 'center',
@@ -343,30 +540,38 @@ const ChatBubble = (props: ChatBubbleProps) => {
                       </View>
                     )}
                     {type === ChatMessageType.FILE && (
-                      <AttachmentBubble
-                        fileName={fileName}
-                        fileExt={ext}
-                        msg={message}
-                        secondaryComponent={
-                          <View>
-                            <MoreMenu
-                              ref={moreIconRef}
-                              setActionMenuVisible={setActionMenuVisible}
-                            />
-                            <ChatActionMenu
-                              actionMenuVisible={actionMenuVisible}
-                              setActionMenuVisible={setActionMenuVisible}
-                              btnRef={moreIconRef}
-                              fileName={fileName}
-                              fileUrl={url}
-                              msgId={msgId}
-                              privateChatUser={privateChatUser}
-                              isLocal={isLocal}
-                              userId={uid}
-                            />
-                          </View>
-                        }
-                      />
+                      <>
+                        {replyToMsgId && (
+                          <ReplyMessageBubble
+                            repliedMsgId={replyToMsgId}
+                            replyTxt={message}
+                          />
+                        )}
+                        <AttachmentBubble
+                          fileName={fileName}
+                          fileExt={ext}
+                          msg={message}
+                          secondaryComponent={
+                            <View>
+                              <MoreMenu
+                                ref={moreIconRef}
+                                setActionMenuVisible={setActionMenuVisible}
+                              />
+                              <ChatActionMenu
+                                actionMenuVisible={actionMenuVisible}
+                                setActionMenuVisible={setActionMenuVisible}
+                                btnRef={moreIconRef}
+                                fileName={fileName}
+                                fileUrl={url}
+                                msgId={msgId}
+                                privateChatUser={privateChatUser}
+                                isLocal={isLocal}
+                                userId={uid}
+                              />
+                            </View>
+                          }
+                        />
+                      </>
                     )}
                   </Hyperlink>
                 )}
@@ -376,80 +581,96 @@ const ChatBubble = (props: ChatBubbleProps) => {
         }}
       </PlatformWrapper>
       {!isDeleted && (
-        <View
-          style={[
-            style.reactionContainer,
-            isLocal ? style.reactionLocalView : style.reactionRemoteView,
-          ]}>
-          {reactions?.map((reactionObj, index) => {
-            const msg =
-              reactionObj.userList.length > 3
-                ? `${reactionObj.userList
-                    .slice(0, 2)
-                    .map(uid => {
-                      return Number(uid) === localUid
-                        ? 'You(click to remove)'
-                        : defaultContent[uid]?.name || 'User';
-                    })
-                    .join(', ')} and ${reactionObj.userList.length - 2} others`
-                : `${reactionObj.userList
-                    .map(uid => {
-                      return Number(uid) === localUid
-                        ? 'You(click to remove)'
-                        : defaultContent[uid]?.name || 'User';
-                    })
-                    .join(', ')}`;
+        <View>
+          <View
+            style={[
+              style.reactionContainer,
+              isLocal ? style.reactionLocalView : style.reactionRemoteView,
+            ]}>
+            {reactions?.map((reactionObj, index) => {
+              const msg =
+                reactionObj.userList.length > 3
+                  ? `${reactionObj.userList
+                      .slice(0, 2)
+                      .map(uid => {
+                        return Number(uid) === localUid
+                          ? 'You(click to remove)'
+                          : defaultContent[uid]?.name || 'User';
+                      })
+                      .join(', ')} and ${
+                      reactionObj.userList.length - 2
+                    } others`
+                  : `${reactionObj.userList
+                      .map(uid => {
+                        return Number(uid) === localUid
+                          ? 'You(click to remove)'
+                          : defaultContent[uid]?.name || 'User';
+                      })
+                      .join(', ')}`;
 
-            return reactionObj.count > 0 ? (
-              <Tooltip
-                scrollY={scrollOffset}
-                key={`${uid}-${reactionObj.reaction}`}
-                // toolTipMessage={msg}
-                toolTipMessage={
-                  <Text>
-                    <Text style={{color: $config.FONT_COLOR, fontSize: 12}}>
-                      {msg}
-                    </Text>
-                    <Text
-                      style={{
-                        color:
-                          $config.FONT_COLOR + hexadecimalTransparency['40%'],
-                        fontSize: 12,
-                      }}>
-                      {' '}
-                      reacted with{' '}
-                    </Text>
-                    <Text>{reactionObj.reaction}</Text>
-                  </Text>
-                }
-                containerStyle={`max-width:200px;z-index:100000;`}
-                placement={`${isLocal ? 'left' : 'right'}`}
-                fontSize={12}
-                renderContent={(isToolTipVisible, setToolTipVisible) => {
-                  return (
-                    <TouchableOpacity
-                      style={style.reactionWrapper}
-                      onPress={() => {
-                        if (
-                          reactionObj.userList.includes(localUid.toString())
-                        ) {
-                          removeReaction(msgId, reactionObj.reaction);
-                        } else {
-                          addReaction(msgId, reactionObj.reaction);
-                        }
-                      }}>
-                      <Text style={{fontSize: 10}}>{reactionObj.reaction}</Text>
-                      <Text style={style.reactionCount}>
-                        {reactionObj.count}
+              return reactionObj.count > 0 ? (
+                <Tooltip
+                  scrollY={scrollOffset}
+                  key={`${uid}-${reactionObj.reaction}`}
+                  // toolTipMessage={msg}
+                  toolTipMessage={
+                    <Text>
+                      <Text style={{color: $config.FONT_COLOR, fontSize: 12}}>
+                        {msg}
                       </Text>
-                    </TouchableOpacity>
-                  );
-                }}
-              />
-            ) : (
-              <></>
-            );
-          })}
+                      <Text
+                        style={{
+                          color:
+                            $config.FONT_COLOR + hexadecimalTransparency['40%'],
+                          fontSize: 12,
+                        }}>
+                        {' '}
+                        reacted with{' '}
+                      </Text>
+                      <Text>{reactionObj.reaction}</Text>
+                    </Text>
+                  }
+                  containerStyle={`max-width:200px;z-index:100000;`}
+                  placement={`${isLocal ? 'left' : 'right'}`}
+                  fontSize={12}
+                  renderContent={(isToolTipVisible, setToolTipVisible) => {
+                    return (
+                      <TouchableOpacity
+                        style={style.reactionWrapper}
+                        onPress={() => {
+                          if (
+                            reactionObj.userList.includes(localUid.toString())
+                          ) {
+                            removeReaction(msgId, reactionObj.reaction);
+                          } else {
+                            addReaction(msgId, reactionObj.reaction);
+                          }
+                        }}>
+                        <Text style={{fontSize: 10}}>
+                          {reactionObj.reaction}
+                        </Text>
+                        <Text style={style.reactionCount}>
+                          {reactionObj.count}
+                        </Text>
+                      </TouchableOpacity>
+                    );
+                  }}
+                />
+              ) : (
+                <></>
+              );
+            })}
+          </View>
+
+          {isLastMsg && (
+            <ChatLastMsgOptions
+              msgId={msgId}
+              isLocal={isLocal}
+              userId={uid}
+              type={type}
+              message={message}
+            />
+          )}
         </View>
       )}
     </>
@@ -478,7 +699,13 @@ const PlatformWrapper = ({children, isLocal, isChatBubble = true}) => {
       onMouseLeave: handleMouseLeave,
     })
   ) : (
-    <>{children(false)}</>
+    <Pressable
+      onPress={() => {
+        setIsHovered(prev => !prev);
+      }}
+      style={{}}>
+      {children(isHovered, setIsHovered)}
+    </Pressable>
   );
 };
 
@@ -570,6 +797,16 @@ const style = StyleSheet.create({
     fontSize: ThemeConfig.FontSize.small,
     lineHeight: ThemeConfig.FontSize.small * 1.45,
     color: $config.FONT_COLOR,
+    flexWrap: 'wrap',
+  },
+  replyMessageStyle: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
+    marginTop: 4,
+    maxWidth: 200,
   },
   previewImg: {
     width: 256,
@@ -577,6 +814,13 @@ const style = StyleSheet.create({
     resizeMode: 'cover',
     borderRadius: 4,
   },
+  replyPreviewImg: {
+    width: 36,
+    height: 36,
+    borderRadius: 2,
+    resizeMode: 'cover',
+  },
+
   chatBubbleViewImg: {
     paddingHorizontal: 6,
     paddingVertical: 6,
@@ -665,6 +909,40 @@ const style = StyleSheet.create({
   reactionUserList: {
     position: 'absolute',
   },
+  repliedMsgContainer: {
+    backgroundColor:
+      $config.CARD_LAYER_1_COLOR + hexadecimalTransparency['45%'],
+    borderRadius: 4,
+    borderLeftWidth: 2,
+    padding: 8,
+    borderLeftColor: $config.SEMANTIC_NEUTRAL + hexadecimalTransparency['80%'],
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  repliedMsgContent: {
+    maxHeight: 100,
+    overflow: 'scroll',
+  },
+  chatLastMsgOptions: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+  },
+  lastOptionsLocalView: {
+    alignSelf: 'flex-end',
+    marginVertical: 2,
+    marginHorizontal: 12,
+    position: 'relative',
+  },
+  lastOptionsRemoteView: {
+    alignSelf: 'flex-start',
+    marginVertical: 2,
+    marginHorizontal: 12,
+    position: 'relative',
+  },
 });
 
 export default ChatBubble;