fix/User avatar not visible after pinning a message. #466

RocketChat · Mar 1, 2024 · 0af4085 · 0af4085
1 parent d35fed0
commit 0af4085
Showing 1 changed file with 34 additions and 12 deletions.
diff --git a/packages/react/src/components/Attachments/PinnedAttachment.js b/packages/react/src/components/Attachments/PinnedAttachment.js
@@ -1,18 +1,40 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import { Avatar } from '../Avatar';
+import RCContext from '../../context/RCInstance';
+
+const PinnedAttachment = ({ attachment }) => {
+  const { RCInstance } = useContext(RCContext);
+  const getUserAvatarUrl = (authorIcon) => {
+    const host = RCInstance.getHost();
+    const URL = `${host}${authorIcon}`;
+    return URL;
+  };
+  return (
+    <Box
+      style={{
+        borderInlineStart: '1px solid currentColor',
+        paddingLeft: '0.8rem'
+      }}
+    >
+      <Box style={{
+        display: 'flex',
+        gap: '0.3rem',
+      }}>
+        <Avatar
+          url={getUserAvatarUrl(attachment?.author_icon)}
+          alt="avatar"
+          size={'1.2em'}
+        />
+        <Box>{attachment?.author_name}</Box>
+      </Box>
+      <Box style={{
+        marginTop: '0.7rem',
+      }}>{attachment?.text}</Box>
+    </Box>)
+}
 
-const PinnedAttachment = ({ attachment }) => (
-  <Box
-    style={{
-      borderInlineStart: '1px solid currentColor',
-      paddingLeft: '0.8rem',
-    }}
-  >
-    <Box>{attachment?.author_name}</Box>
-    <Box>{attachment?.text}</Box>
-  </Box>
-);
 
 export default PinnedAttachment;