Merge branch 'RocketChat:develop' into secure-deploy-pr-workflow

RocketChat · Dec 17, 2024 · e74edef · e74edef
2 parents a940001 + 1058405
commit e74edef
Show file tree

Hide file tree

Showing 25 changed files with 800 additions and 125 deletions.
diff --git a/packages/react/src/hooks/useFetchChatData.js b/packages/react/src/hooks/useFetchChatData.js
@@ -5,6 +5,7 @@ import {
   useChannelStore,
   useMemberStore,
   useMessageStore,
+  useStarredMessageStore,
 } from '../store';
 
 const useFetchChatData = (showRoles) => {
@@ -13,6 +14,9 @@ const useFetchChatData = (showRoles) => {
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
   const setMessages = useMessageStore((state) => state.setMessages);
   const setAdmins = useMemberStore((state) => state.setAdmins);
+  const setStarredMessages = useStarredMessageStore(
+    (state) => state.setStarredMessages
+  );
   const isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );
@@ -80,7 +84,24 @@ const useFetchChatData = (showRoles) => {
     ]
   );
 
-  return getMessagesAndRoles;
+  const getStarredMessages = useCallback(
+    async (anonymousMode) => {
+      if (isUserAuthenticated) {
+        try {
+          if (!isUserAuthenticated && !anonymousMode) {
+            return;
+          }
+          const { messages } = await RCInstance.getStarredMessages();
+          setStarredMessages(messages);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    },
+    [isUserAuthenticated, RCInstance, setStarredMessages]
+  );
+
+  return { getMessagesAndRoles, getStarredMessages };
 };
 
 export default useFetchChatData;
diff --git a/packages/react/src/hooks/useRCAuth.js b/packages/react/src/hooks/useRCAuth.js
@@ -20,11 +20,15 @@ export const useRCAuth = () => {
   );
   const setPassword = useUserStore((state) => state.setPassword);
   const setEmailorUser = useUserStore((state) => state.setEmailorUser);
+  const setUserPinPermissions = useUserStore(
+    (state) => state.setUserPinPermissions
+  );
   const dispatchToastMessage = useToastBarDispatch();
 
   const handleLogin = async (userOrEmail, password, code) => {
     try {
       const res = await RCInstance.login(userOrEmail, password, code);
+      const permissions = await RCInstance.permissionInfo();
       if (res.error === 'Unauthorized' || res.error === 403) {
         dispatchToastMessage({
           type: 'error',
@@ -56,6 +60,7 @@ export const useRCAuth = () => {
           setIsTotpModalOpen(false);
           setEmailorUser(null);
           setPassword(null);
+          setUserPinPermissions(permissions.update[150]);
           dispatchToastMessage({
             type: 'success',
             message: 'Successfully logged in',

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/store/starredMessageStore.js b/packages/react/src/store/starredMessageStore.js
@@ -3,6 +3,8 @@ import { create } from 'zustand';
 const useStarredMessageStore = create((set) => ({
   showStarred: false,
   setShowStarred: (showStarred) => set(() => ({ showStarred })),
+  starredMessages: [],
+  setStarredMessages: (messages) => set(() => ({ starredMessages: messages })),
 }));
 
 export default useStarredMessageStore;
diff --git a/packages/react/src/store/userStore.js b/packages/react/src/store/userStore.js
@@ -27,8 +27,11 @@ const useUserStore = create((set) => ({
   setPassword: (password) => set(() => ({ password })),
   emailoruser: null,
   setEmailorUser: (emailoruser) => set(() => ({ emailoruser })),
-  roles: {},
+  roles: [],
   setRoles: (roles) => set((state) => ({ ...state, roles })),
+  userPinPermissions: {},
+  setUserPinPermissions: (userPinPermissions) =>
+    set((state) => ({ ...state, userPinPermissions })),
   showCurrentUserInfo: false,
   setShowCurrentUserInfo: (showCurrentUserInfo) =>
     set(() => ({ showCurrentUserInfo })),

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 @@