fix: resolve mention highlighting issue in File Upload descriptions

RocketChat · Nov 2, 2024 · 583d6b6 · 583d6b6
1 parent faf9fb7
commit 583d6b6
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 17 deletions.
diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -6,8 +6,12 @@ import ImageAttachment from './ImageAttachment';
 import AudioAttachment from './AudioAttachment';
 import VideoAttachment from './VideoAttachment';
 import TextAttachment from './TextAttachment';
+import { useUserStore } from '../../store';
 
 const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
+  const { username } = useUserStore((state) => ({
+    username: state.username,
+  }));
   if (attachment && attachment.audio_url) {
     return (
       <AudioAttachment
@@ -44,14 +48,54 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
       />
     );
   }
+  const parseMentions = (msg) => {
+    const mentionRegex = /(@\w+)/g;
+    const parts = msg.split(mentionRegex);
+    return parts;
+  };
+  const parts = parseMentions(attachment.description);
+
   return (
     <Box
       css={css`
         display: flex;
       `}
     >
-      {attachment?.description}
-
+      <div>
+        {parts.map((part, index) =>
+          part.startsWith('@') ? (
+            part.slice(1) !== username ? (
+              <span
+                key={index}
+                css={css`
+                  color: #71717a;
+                  font-weight: bold;
+                  background-color: #f4f4f5;
+                  padding: 1.5px;
+                  border-radius: 3px;
+                `}
+              >
+                {part.slice(1)}
+              </span>
+            ) : (
+              <span
+                key={index}
+                css={css`
+                  color: #fafafa;
+                  font-weight: bold;
+                  background-color: #ef4444;
+                  padding: 1.5px;
+                  border-radius: 3px;
+                `}
+              >
+                {part.slice(1)}
+              </span>
+            )
+          ) : (
+            <span key={index}>{part}</span>
+          )
+        )}
+      </div>
       <Icon name="file" size="20px" />
       <a href={`${host}${attachment.title_link}`}>{attachment.title}</a>
     </Box>

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -1,8 +1,13 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { ActionButton, Box } from '@embeddedchat/ui-elements';
+import { useUserStore } from '../../store';
 
 const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => {
+  const { username } = useUserStore((state) => ({
+    username: state.username,
+  }));
+
   const handleDownload = async () => {
     try {
       const response = await fetch(url);
@@ -21,6 +26,13 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => {
       console.error('Error downloading the file:', error);
     }
   };
+  const parseMentions = (msg) => {
+    const mentionRegex = /(@\w+)/g;
+    const parts = msg.split(mentionRegex);
+    return parts;
+  };
+
+  const parts = parseMentions(attachment.description);
 
   return (
     <Box
@@ -32,15 +44,41 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => {
         variantStyles.attachmentMetaContainer,
       ]}
     >
-      <p
-        css={[
-          css`
-            margin: 0;
-          `,
-        ]}
-      >
-        {attachment.description}
-      </p>
+      <div>
+        {parts.map((part, index) =>
+          part.startsWith('@') ? (
+            part.slice(1) !== username ? (
+              <span
+                key={index}
+                css={css`
+                  color: #71717a;
+                  font-weight: bold;
+                  background-color: #f4f4f5;
+                  padding: 1.5px;
+                  border-radius: 3px;
+                `}
+              >
+                {part.slice(1)}
+              </span>
+            ) : (
+              <span
+                key={index}
+                css={css`
+                  color: #fafafa;
+                  font-weight: bold;
+                  background-color: #ef4444;
+                  padding: 1.5px;
+                  border-radius: 3px;
+                `}
+              >
+                {part.slice(1)}
+              </span>
+            )
+          ) : (
+            <span key={index}>{part}</span>
+          )
+        )}
+      </div>
       <Box
         css={css`
           display: flex;

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, useEffect } 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.js';
+import TypingUsers from '../TypingUsers/TypingUsers.js';
+import useSearchMentionUser from '../../hooks/useSearchMentionUser.js';
 
 const AttachmentPreview = () => {
   const { RCInstance, ECOptions } = useContext(RCContext);
@@ -16,25 +19,44 @@ 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();
@@ -89,6 +111,20 @@ const AttachmentPreview = () => {
                 css={styles.input}
                 placeholder="name"
               />
+              <Box>
+                {showMembersList && (
+                  <MembersList
+                    messageRef={messageRef}
+                    mentionIndex={mentionIndex}
+                    setMentionIndex={setMentionIndex}
+                    filteredMembers={filteredMembers}
+                    setFilteredMembers={setFilteredMembers}
+                    setStartReadMentionUser={setStartReadMentionUser}
+                    setShowMembersList={setShowMembersList}
+                  />
+                )}
+                <TypingUsers />
+              </Box>
             </Box>
 
             <Box css={styles.inputContainer}>
@@ -105,9 +141,9 @@ const AttachmentPreview = () => {
                 onChange={(e) => {
                   handleFileDescription(e);
                 }}
-                value={fileDescription}
                 css={styles.input}
                 placeholder="Description"
+                ref={messageRef}
               />
             </Box>
           </Box>