fix: issue of mentioning the user in the file description (#677)

* Fix the issue of mentioning the user in the file description * Removed all unwanted warnings * Formatted with prettier * Adjusted the width of the mentions preview in the file description * fixed the position of mentions preview such that it does not affect the height of file upload modal * Fixed all the inconsistencies * Fixed minor design inconsistency --------- Co-authored-by: Zishan Ahmad <[email protected]>
RocketChat · Jan 1, 2025 · cb012e7 · cb012e7
1 parent 5e3e82e
commit cb012e7
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 50 deletions.
diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -7,7 +7,7 @@ import AudioAttachment from './AudioAttachment';
 import VideoAttachment from './VideoAttachment';
 import TextAttachment from './TextAttachment';
 
-const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
+const Attachment = ({ attachment, host, type, variantStyles = {}, msg }) => {
   const author = {
     authorIcon: attachment?.author_icon,
     authorName: attachment?.author_name,
@@ -19,6 +19,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
         host={host}
         author={author}
         variantStyles={variantStyles}
+        msg={msg}
       />
     );
   }
@@ -29,6 +30,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
         host={host}
         author={author}
         variantStyles={variantStyles}
+        msg={msg}
       />
     );
   }
@@ -39,6 +41,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
         host={host}
         author={author}
         variantStyles={variantStyles}
+        msg={msg}
       />
     );
   }

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { ActionButton, Box } from '@embeddedchat/ui-elements';
+import { Markdown } from '../Markdown';
 
-const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => {
+const AttachmentMetadata = ({ attachment, url, variantStyles = {}, msg }) => {
   const handleDownload = async () => {
     try {
       const response = await fetch(url);
@@ -32,15 +33,25 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => {
         variantStyles.attachmentMetaContainer,
       ]}
     >
-      <p
-        css={[
-          css`
-            margin: 9px 0 0;
-          `,
-        ]}
+      <div
+        css={
+          attachment.description !== ''
+            ? [
+                css`
+                  margin: 10px 0px;
+                `,
+              ]
+            : css`
+                margin: -7px 0px;
+              `
+        }
       >
-        {attachment.description}
-      </p>
+        {msg ? (
+          <Markdown body={msg} md={attachment.descriptionMd} />
+        ) : (
+          attachment.description
+        )}
+      </div>
       <Box
         css={css`
           display: flex;
@@ -49,11 +60,21 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => {
         `}
       >
         <p
-          css={css`
-            margin: 0;
-            font-size: 14px;
-            opacity: 0.7;
-          `}
+          css={
+            attachment.description
+              ? [
+                  css`
+                    margin: 0px;
+                    font-size: 14px;
+                    opacity: 0.7;
+                  `,
+                ]
+              : css`
+                  margin: 22px 0 15px 0;
+                  font-size: 14px;
+                  opacity: 0.7;
+                `
+          }
         >
           {attachment.title}
         </p>

diff --git a/packages/react/src/views/AttachmentHandler/Attachments.js b/packages/react/src/views/AttachmentHandler/Attachments.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Attachment from './Attachment';
 import RCContext from '../../context/RCInstance';
 
-const Attachments = ({ attachments, type, variantStyles = {} }) => {
+const Attachments = ({ attachments, type, variantStyles = {}, msg }) => {
   const { RCInstance } = useContext(RCContext);
   let host = RCInstance.getHost();
   host = host.replace(/\/$/, '');
@@ -15,6 +15,7 @@ const Attachments = ({ attachments, type, variantStyles = {} }) => {
       host={host}
       variantStyles={variantStyles}
       type={type}
+      msg={msg}
     />
   ));
 };

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -5,7 +5,14 @@ import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
 import AttachmentMetadata from './AttachmentMetadata';
 import RCContext from '../../context/RCInstance';
 
-const AudioAttachment = ({ attachment, host, type, author, variantStyles }) => {
+const AudioAttachment = ({
+  attachment,
+  host,
+  type,
+  author,
+  variantStyles,
+  msg,
+}) => {
   const { RCInstance } = useContext(RCContext);
   const { theme } = useTheme();
   const getUserAvatarUrl = (icon) => {
@@ -58,6 +65,7 @@ const AudioAttachment = ({ attachment, host, type, author, variantStyles }) => {
           attachment={attachment}
           url={host + (attachment.title_url || attachment.audio_url)}
           variantStyles={variantStyles}
+          msg={msg}
         />
         <audio src={host + attachment.audio_url} width="100%" controls />
 

diff --git a/packages/react/src/views/AttachmentHandler/ImageAttachment.js b/packages/react/src/views/AttachmentHandler/ImageAttachment.js
@@ -12,6 +12,7 @@ const ImageAttachment = ({
   type,
   author,
   variantStyles = {},
+  msg,
 }) => {
   const { RCInstance } = useContext(RCContext);
   const [showGallery, setShowGallery] = useState(false);
@@ -75,6 +76,7 @@ const ImageAttachment = ({
           attachment={attachment}
           url={host + (attachment.title_link || attachment.image_url)}
           variantStyles={variantStyles}
+          msg={msg}
         />
         <img
           src={host + attachment.image_url}

diff --git a/packages/react/src/views/AttachmentHandler/VideoAttachment.js b/packages/react/src/views/AttachmentHandler/VideoAttachment.js
@@ -21,6 +21,7 @@ const VideoAttachment = ({
   type,
   author,
   variantStyles = {},
+  msg,
 }) => {
   const { RCInstance } = useContext(RCContext);
   const { theme } = useTheme();
@@ -74,6 +75,7 @@ const VideoAttachment = ({
           attachment={attachment}
           url={host + (attachment.title_url || attachment.video_url)}
           variantStyles={variantStyles}
+          msg={msg}
         />
         <video
           width={300}

diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.js
@@ -1,12 +1,15 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useRef } from 'react';
 import { css } from '@emotion/react';
 import { Box, Icon, Button, Input, Modal } from '@embeddedchat/ui-elements';
 import useAttachmentWindowStore from '../../store/attachmentwindow';
 import CheckPreviewType from './CheckPreviewType';
 import RCContext from '../../context/RCInstance';
-import { useMessageStore } from '../../store';
+import { useMessageStore, useMemberStore } from '../../store';
 import getAttachmentPreviewStyles from './AttachmentPreview.styles';
 import { parseEmoji } from '../../lib/emoji';
+import MembersList from '../Mentions/MembersList';
+import TypingUsers from '../TypingUsers/TypingUsers';
+import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 
 const AttachmentPreview = () => {
   const { RCInstance, ECOptions } = useContext(RCContext);
@@ -16,30 +19,51 @@ const AttachmentPreview = () => {
   const data = useAttachmentWindowStore((state) => state.data);
   const setData = useAttachmentWindowStore((state) => state.setData);
   const [isPending, setIsPending] = useState(false);
+  const messageRef = useRef(null);
+  const [showMembersList, setShowMembersList] = useState(false);
+  const [filteredMembers, setFilteredMembers] = useState([]);
+  const [mentionIndex, setMentionIndex] = useState(-1);
+  const [startReadMentionUser, setStartReadMentionUser] = useState(false);
 
   const [fileName, setFileName] = useState(data?.name);
-  const [fileDescription, setFileDescription] = useState('');
 
   const threadId = useMessageStore((state) => state.threadMainMessage?._id);
   const handleFileName = (e) => {
     setFileName(e.target.value);
   };
 
+  const { members } = useMemberStore((state) => ({
+    members: state.members,
+  }));
+
+  const searchMentionUser = useSearchMentionUser(
+    members,
+    startReadMentionUser,
+    setStartReadMentionUser,
+    setFilteredMembers,
+    setMentionIndex,
+    setShowMembersList
+  );
+
   const handleFileDescription = (e) => {
-    setFileDescription(parseEmoji(e.target.value));
+    const description = e.target.value;
+    messageRef.current.value = parseEmoji(description);
+    searchMentionUser(description);
   };
 
   const submit = async () => {
     setIsPending(true);
     await RCInstance.sendAttachment(
       data,
       fileName,
-      fileDescription,
+      messageRef.current.value,
       ECOptions?.enableThreads ? threadId : undefined
     );
     toggle();
     setData(null);
-    setIsPending(false);
+    if (isPending) {
+      setIsPending(false);
+    }
   };
   return (
     <Modal onClose={toggle}>
@@ -89,6 +113,7 @@ const AttachmentPreview = () => {
                 css={styles.input}
                 placeholder="name"
               />
+              <TypingUsers />
             </Box>
 
             <Box css={styles.inputContainer}>
@@ -101,14 +126,32 @@ const AttachmentPreview = () => {
               >
                 File description
               </Box>
-              <Input
-                onChange={(e) => {
-                  handleFileDescription(e);
-                }}
-                value={fileDescription}
-                css={styles.input}
-                placeholder="Description"
-              />
+              <Box css={styles.fileDescription}>
+                <Box css={styles.mentionListContainer}>
+                  {showMembersList && (
+                    <MembersList
+                      messageRef={messageRef}
+                      mentionIndex={mentionIndex}
+                      setMentionIndex={setMentionIndex}
+                      filteredMembers={filteredMembers}
+                      setFilteredMembers={setFilteredMembers}
+                      setStartReadMentionUser={setStartReadMentionUser}
+                      setShowMembersList={setShowMembersList}
+                      css={css`
+                        width: auto;
+                      `}
+                    />
+                  )}
+                </Box>
+                <Input
+                  onChange={(e) => {
+                    handleFileDescription(e);
+                  }}
+                  css={styles.input}
+                  placeholder="Description"
+                  ref={messageRef}
+                />
+              </Box>
             </Box>
           </Box>
         </Box>

diff --git a/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js b/packages/react/src/views/AttachmentPreview/AttachmentPreview.styles.js
@@ -11,14 +11,30 @@ const getAttachmentPreviewStyles = () => {
     `,
 
     input: css`
-      width: 95.5%;
+      width: 100%;
     `,
 
     modalContent: css`
       overflow-y: auto;
       overflow-x: hidden;
       max-height: 350px;
     `,
+
+    fileDescription: css`
+      width: 100%;
+      position: relative;
+      z-index: 1300;
+    `,
+
+    mentionListContainer: css`
+      position: absolute;
+      top: -100px;
+      width: 100%;
+      max-height: 100px;
+      overflow-y: auto;
+      background: white;
+      z-index: 1400;
+    `,
   };
 
   return styles;

diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js
@@ -469,18 +469,23 @@ const ChatInput = ({ scrollToBottom }) => {
             }
           />
         ) : null}
-
-        {showMembersList && (
-          <MembersList
-            messageRef={messageRef}
-            mentionIndex={mentionIndex}
-            setMentionIndex={setMentionIndex}
-            filteredMembers={filteredMembers}
-            setFilteredMembers={setFilteredMembers}
-            setStartReadMentionUser={setStartReadMentionUser}
-            setShowMembersList={setShowMembersList}
-          />
-        )}
+        <Box
+          css={css`
+            margin: 0rem 2rem;
+          `}
+        >
+          {showMembersList && (
+            <MembersList
+              messageRef={messageRef}
+              mentionIndex={mentionIndex}
+              setMentionIndex={setMentionIndex}
+              filteredMembers={filteredMembers}
+              setFilteredMembers={setFilteredMembers}
+              setStartReadMentionUser={setStartReadMentionUser}
+              setShowMembersList={setShowMembersList}
+            />
+          )}
+        </Box>
 
         {showCommandList && (
           <CommandsList

diff --git a/packages/react/src/views/Markdown/Markdown.js b/packages/react/src/views/Markdown/Markdown.js
@@ -6,7 +6,7 @@ import { Markup, MarkupInteractionContext } from '@embeddedchat/markups/src';
 import EmojiReaction from '../EmojiReaction/EmojiReaction';
 import { useMemberStore, useUserStore } from '../../store';
 
-const Markdown = ({ body, isReaction = false }) => {
+const Markdown = ({ body, md, isReaction = false }) => {
   const members = useMemberStore((state) => state.members);
   const username = useUserStore((state) => state.username);
   const value = useMemo(() => ({ members, username }), [members, username]);
@@ -23,12 +23,12 @@ const Markdown = ({ body, isReaction = false }) => {
     );
   }
 
-  if (!body || !body.md) return <></>;
+  if (!body || !md) return <></>;
 
   return (
     <Box>
       <MarkupInteractionContext.Provider value={value}>
-        <Markup tokens={body.md} />
+        <Markup tokens={md} />
       </MarkupInteractionContext.Provider>
     </Box>
   );