Fix: Quoting issues (#641)

* fixed recursive quoting issue * fixed multiple quoting issue * Removed unwanted comment * added checks which causing error in deployment * Resolved the commits * Fix the issue of not able to send the quoted thread messages
RocketChat · Dec 15, 2024 · a6ea2bc · a6ea2bc
1 parent 32e14bc
commit a6ea2bc
Show file tree

Hide file tree

Showing 12 changed files with 647 additions and 95 deletions.
diff --git a/packages/react/src/store/messageStore.js b/packages/react/src/store/messageStore.js
@@ -8,7 +8,7 @@ const useMessageStore = create((set, get) => ({
   threadMessages: [],
   filtered: false,
   editMessage: {},
-  quoteMessage: {},
+  quoteMessage: [],
   messageToReport: NaN,
   showReportMessage: false,
   isRecordingMessage: false,
@@ -71,7 +71,13 @@ const useMessageStore = create((set, get) => ({
     }
   },
   setEditMessage: (editMessage) => set(() => ({ editMessage })),
-  setQuoteMessage: (quoteMessage) => set(() => ({ quoteMessage })),
+  addQuoteMessage: (quoteMessage) =>
+    set((state) => ({ quoteMessage: [...state.quoteMessage, quoteMessage] })),
+  removeQuoteMessage: (quoteMessage) =>
+    set((state) => ({
+      quoteMessage: state.quoteMessage.filter((i) => i !== quoteMessage),
+    })),
+  clearQuoteMessages: () => set({ quoteMessage: [] }),
   setMessageToReport: (messageId) =>
     set(() => ({ messageToReport: messageId })),
   toggleShowReportMessage: () => {

diff --git a/packages/react/src/views/AttachmentHandler/Attachment.js b/packages/react/src/views/AttachmentHandler/Attachment.js
@@ -8,11 +8,16 @@ import VideoAttachment from './VideoAttachment';
 import TextAttachment from './TextAttachment';
 
 const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
+  const author = {
+    authorIcon: attachment?.author_icon,
+    authorName: attachment?.author_name,
+  };
   if (attachment && attachment.audio_url) {
     return (
       <AudioAttachment
         attachment={attachment}
         host={host}
+        author={author}
         variantStyles={variantStyles}
       />
     );
@@ -22,6 +27,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
       <VideoAttachment
         attachment={attachment}
         host={host}
+        author={author}
         variantStyles={variantStyles}
       />
     );
@@ -31,6 +37,7 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
       <ImageAttachment
         attachment={attachment}
         host={host}
+        author={author}
         variantStyles={variantStyles}
       />
     );
@@ -40,10 +47,56 @@ const Attachment = ({ attachment, host, type, variantStyles = {} }) => {
       <TextAttachment
         attachment={attachment}
         type={type}
+        author={author}
         variantStyles={variantStyles}
       />
     );
   }
+  if (
+    attachment.attachments &&
+    Array.isArray(attachment.attachments) &&
+    attachment.attachments[0]?.image_url
+  ) {
+    return (
+      <ImageAttachment
+        attachment={attachment.attachments[0]}
+        host={host}
+        type={attachment.attachments[0].type}
+        variantStyles={variantStyles}
+        author={author}
+      />
+    );
+  }
+  if (
+    attachment.attachments &&
+    Array.isArray(attachment.attachments) &&
+    attachment.attachments[0]?.audio_url
+  ) {
+    return (
+      <AudioAttachment
+        attachment={attachment.attachments[0]}
+        host={host}
+        type={attachment.attachments[0].type}
+        variantStyles={variantStyles}
+        author={author}
+      />
+    );
+  }
+  if (
+    attachment.attachments &&
+    Array.isArray(attachment.attachments) &&
+    attachment.attachments[0]?.video_url
+  ) {
+    return (
+      <VideoAttachment
+        attachment={attachment.attachments[0]}
+        host={host}
+        type={attachment.attachments[0].type}
+        variantStyles={variantStyles}
+        author={author}
+      />
+    );
+  }
   return (
     <Box
       css={css`

diff --git a/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js b/packages/react/src/views/AttachmentHandler/AttachmentMetadata.js
@@ -35,7 +35,7 @@ const AttachmentMetadata = ({ attachment, url, variantStyles = {} }) => {
       <p
         css={[
           css`
-            margin: 0;
+            margin: 9px 0 0;
           `,
         ]}
       >

diff --git a/packages/react/src/views/AttachmentHandler/AudioAttachment.js b/packages/react/src/views/AttachmentHandler/AudioAttachment.js
@@ -1,18 +1,129 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@embeddedchat/ui-elements';
+import { css } from '@emotion/react';
+import { Box, Avatar, useTheme } from '@embeddedchat/ui-elements';
 import AttachmentMetadata from './AttachmentMetadata';
+import RCContext from '../../context/RCInstance';
 
-const AudioAttachment = ({ attachment, host, variantStyles }) => (
-  <Box>
-    <AttachmentMetadata
-      attachment={attachment}
-      url={host + (attachment.title_url || attachment.audio_url)}
-      variantStyles={variantStyles}
-    />
-    <audio src={host + attachment.audio_url} width="100%" controls />
-  </Box>
-);
+const AudioAttachment = ({ attachment, host, type, author, variantStyles }) => {
+  const { RCInstance } = useContext(RCContext);
+  const { theme } = useTheme();
+  const getUserAvatarUrl = (icon) => {
+    const instanceHost = RCInstance.getHost();
+    const URL = `${instanceHost}${icon}`;
+    return URL;
+  };
+  const { authorIcon, authorName } = author;
+  return (
+    <Box>
+      <Box
+        css={[
+          css`
+            line-height: 0;
+            border-radius: inherit;
+            padding: 0.5rem;
+          `,
+          (type ? variantStyles.pinnedContainer : '') ||
+            css`
+              ${type === 'file'
+                ? `border: 3px solid ${theme.colors.border};`
+                : ''}
+            `,
+        ]}
+      >
+        {type === 'file' ? (
+          <>
+            <Box
+              css={[
+                css`
+                  display: flex;
+                  gap: 0.3rem;
+                  align-items: center;
+                `,
+                variantStyles.textUserInfo,
+              ]}
+            >
+              <Avatar
+                url={getUserAvatarUrl(authorIcon)}
+                alt="avatar"
+                size="1.2em"
+              />
+              <Box>@{authorName}</Box>
+            </Box>
+          </>
+        ) : (
+          ''
+        )}
+        <AttachmentMetadata
+          attachment={attachment}
+          url={host + (attachment.title_url || attachment.audio_url)}
+          variantStyles={variantStyles}
+        />
+        <audio src={host + attachment.audio_url} width="100%" controls />
+
+        {attachment.attachments &&
+          attachment.attachments.map((nestedAttachment, index) => (
+            <Box key={index}>
+              <Box
+                css={[
+                  css`
+                    line-height: 0;
+                    border-radius: inherit;
+                    padding: 0.5rem;
+                  `,
+                  (nestedAttachment.type
+                    ? variantStyles.pinnedContainer
+                    : variantStyles.quoteContainer) ||
+                    css`
+                      ${nestedAttachment.type === 'file'
+                        ? `border: 3px solid ${theme.colors.border};`
+                        : ''}
+                    `,
+                ]}
+              >
+                {nestedAttachment.type === 'file' ? (
+                  <>
+                    <Box
+                      css={[
+                        css`
+                          display: flex;
+                          gap: 0.3rem;
+                          align-items: center;
+                        `,
+                        variantStyles.textUserInfo,
+                      ]}
+                    >
+                      <Avatar
+                        url={getUserAvatarUrl(nestedAttachment.author_icon)}
+                        alt="avatar"
+                        size="1.2em"
+                      />
+                      <Box>@{nestedAttachment.author_name}</Box>
+                    </Box>
+                  </>
+                ) : (
+                  ''
+                )}
+                <AttachmentMetadata
+                  attachment={nestedAttachment}
+                  url={
+                    host +
+                    (nestedAttachment.title_url || nestedAttachment.audio_url)
+                  }
+                  variantStyles={variantStyles}
+                />
+                <audio
+                  src={host + nestedAttachment.audio_url}
+                  width="100%"
+                  controls
+                />
+              </Box>
+            </Box>
+          ))}
+      </Box>
+    </Box>
+  );
+};
 
 export default AudioAttachment;
-Original file line number
+Diff line change
@@ Expand Up @@
           <p
             css={[
               css`
-                margin: 0;
+                margin: 9px 0 0;
               `,
             ]}
           >
@@ Expand Down @@