Improved_visibilityAndPosition

RocketChat · Mar 9, 2024 · b991945 · b991945
2 parents 2cba231 + f68f9d9
commit b991945
Show file tree

Hide file tree

Showing 64 changed files with 1,961 additions and 723 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ _EmbeddedChat is a full-stack React component node module of the RocketChat appl
 </div>
 
 ## Installation and Usage
-Installtion and usage documentation could be found here [EmbeddedChat installation and usage](packages/react/README.md)
+Installation and usage documentation could be found here [EmbeddedChat installation and usage](packages/react/README.md)
 
 ## Development
 

diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts
@@ -703,6 +703,26 @@ export default class EmbeddedChatApi {
     }
   }
 
+  async getMentionedMessages() {
+    try {
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      const response = await fetch(
+        `${this.host}/api/v1/chat.getMentionedMessages?roomId=${this.rid}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Auth-Token": authToken,
+            "X-User-Id": userId,
+          },
+          method: "GET",
+        }
+      );
+      return await response.json();
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
   async pinMessage(mid: string) {
     try {
       const { userId, authToken } = (await this.auth.getCurrentUser()) || {};

diff --git a/packages/react/src/components/Attachments/AttachmentMetadata.js b/packages/react/src/components/Attachments/AttachmentMetadata.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { ActionButton } from '../ActionButton';
+import { Box } from '../Box';
+
+const AttachmentMetadata = ({ attachment, url }) => {
+  const handleDownload = () => {
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = attachment.title;
+
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+  };
+
+  return (
+    <>
+      <p style={{ margin: 0 }}>{attachment.description}</p>
+      <Box
+        style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+      >
+        <p style={{ margin: 0, color: 'grey' }}>{attachment.title}</p>
+        <ActionButton
+          ghost
+          icon="download"
+          size="small"
+          onClick={handleDownload}
+          style={{
+            marginLeft: '10px',
+            marginTop: '5px',
+            color: 'grey',
+          }}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default AttachmentMetadata;
diff --git a/packages/react/src/components/Attachments/AudioAttachment.js b/packages/react/src/components/Attachments/AudioAttachment.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
 const AudioAttachment = ({ attachment, host }) => (
   <Box>
-    <p>{attachment?.description}</p>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.audio_url}
+    />
     <audio src={host + attachment.audio_url} width="100%" controls />
   </Box>
 );

diff --git a/packages/react/src/components/Attachments/ImageAttachment.js b/packages/react/src/components/Attachments/ImageAttachment.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
 const ImageAttachment = ({ attachment, host }) => (
   <Box>
-    <p>{attachment?.description}</p>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.image_url}
+    />
     <img
       src={host + attachment.image_url}
       style={{ maxWidth: '100%', objectFit: 'contain' }}

diff --git a/packages/react/src/components/Attachments/PinnedAttachment.js b/packages/react/src/components/Attachments/PinnedAttachment.js
@@ -1,18 +1,46 @@
-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 }) => (
-  <Box
-    style={{
-      borderInlineStart: '1px solid currentColor',
-      paddingLeft: '0.8rem',
-    }}
-  >
-    <Box>{attachment?.author_name}</Box>
-    <Box>{attachment?.text}</Box>
-  </Box>
-);
+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>
+  );
+};
 
 export default PinnedAttachment;
 

diff --git a/packages/react/src/components/Attachments/VideoAttachment.js b/packages/react/src/components/Attachments/VideoAttachment.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../Box';
+import AttachmentMetadata from './AttachmentMetadata';
 
 const VideoAttachment = ({ attachment, host }) => (
   <Box>
-    <p>{attachment?.description}</p>
+    <AttachmentMetadata
+      attachment={attachment}
+      url={host + attachment.video_url}
+    />
     <video width={300} controls>
       <source src={host + attachment.video_url} type={attachment.video_type} />
     </video>

diff --git a/packages/react/src/components/ChatBody/ChatBody.js b/packages/react/src/components/ChatBody/ChatBody.js
@@ -136,18 +136,21 @@ const ChatBody = ({
     setViewData(null);
   };
 
-  const onModalSubmit = useCallback(async (data, value) => {
-    console.log(data);
-    // const { actionId, value, blockId, appId, viewId } = data;
-    // await RCInstance?.triggerBlockAction({
-    //   rid: RCInstance.rid,
-    //   actionId,
-    //   value,
-    //   blockId,
-    //   appId,
-    //   viewId,
-    // });
-  });
+  const onModalSubmit = useCallback(
+    async (data) => {
+      console.log(data);
+      const { actionId, value, blockId, appId, viewId } = data;
+      await RCInstance?.triggerBlockAction({
+        rid: RCInstance.rid,
+        actionId,
+        value,
+        blockId,
+        appId,
+        viewId,
+      });
+    },
+    [RCInstance]
+  );
 
   useEffect(() => {
     RCInstance.auth.onAuthChange((user) => {

diff --git a/packages/react/src/components/ChatHeader/ChatHeader.js b/packages/react/src/components/ChatHeader/ChatHeader.js
@@ -10,6 +10,8 @@ import {
   useSearchMessageStore,
   useChannelStore,
   useToastStore,
+  useThreadsMessageStore,
+  useMentionsStore,
 } from '../../store';
 import { DynamicHeader } from '../DynamicHeader';
 import { Tooltip } from '../Tooltip';
@@ -18,7 +20,6 @@ import useComponentOverrides from '../../theme/useComponentOverrides';
 import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
 import { Menu } from '../Menu';
-import useThreadsMessageStore from '../../store/threadsMessageStore';
 import { useToastBarDispatch } from '../../hooks/useToastBarDispatch';
 import useFetchChatData from '../../hooks/useFetchChatData';
 
@@ -73,6 +74,7 @@ const ChatHeader = ({
   const setShowAllThreads = useThreadsMessageStore(
     (state) => state.setShowAllThreads
   );
+  const setShowMentions = useMentionsStore((state) => state.setShowMentions);
   const toastPosition = useToastStore((state) => state.position);
 
   const handleGoBack = async () => {
@@ -141,6 +143,11 @@ const ChatHeader = ({
     setShowSearch(false);
   }, [setShowAllThreads, setShowSearch]);
 
+  const showMentions = useCallback(async () => {
+    setShowMentions(true);
+    setShowSearch(false);
+  }, [setShowMentions, setShowSearch]);
+
   useEffect(() => {
     const setMessageAllowed = async () => {
       const permissionRes = await RCInstance.permissionInfo();
@@ -223,6 +230,12 @@ const ChatHeader = ({
             label: 'Threads',
             icon: 'thread',
           },
+          {
+            id: 'mentions',
+            action: showMentions,
+            label: 'Mentions',
+            icon: 'at',
+          },
           {
             id: 'members',
             action: showChannelMembers,
@@ -273,6 +286,7 @@ const ChatHeader = ({
     moreOpts,
     setFullScreen,
     showAllThreads,
+    showMentions,
     showChannelMembers,
     showChannelinformation,
     showPinnedMessage,