Merge branch 'develop' into feat/reaction-feature

RocketChat · Jan 11, 2025 · 06e7439 · 06e7439
2 parents 8a5af41 + bcc7e95
commit 06e7439
Show file tree

Hide file tree

Showing 13 changed files with 179 additions and 63 deletions.
diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts
@@ -732,21 +732,22 @@ export default class EmbeddedChatApi {
     }
   }
 
-  async getAllFiles(isChannelPrivate = false) {
+  async getAllFiles(isChannelPrivate = false, typeGroup: string) {
     const roomType = isChannelPrivate ? "groups" : "channels";
     try {
       const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
-      const response = await fetch(
-        `${this.host}/api/v1/${roomType}.files?roomId=${this.rid}`,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Auth-Token": authToken,
-            "X-User-Id": userId,
-          },
-          method: "GET",
-        }
-      );
+      const url =
+        typeGroup === ""
+          ? `${this.host}/api/v1/${roomType}.files?roomId=${this.rid}`
+          : `${this.host}/api/v1/${roomType}.files?roomId=${this.rid}&typeGroup=${typeGroup}`;
+      const response = await fetch(url, {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+        method: "GET",
+      });
       return await response.json();
     } catch (err) {
       console.error(err);

diff --git a/packages/markups/src/elements/CodeBlock.js b/packages/markups/src/elements/CodeBlock.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Box, useTheme } from '@embeddedchat/ui-elements';
 import SyntaxHighlighter from 'react-syntax-highlighter';

diff --git a/packages/markups/src/elements/elements.styles.js b/packages/markups/src/elements/elements.styles.js
@@ -99,6 +99,13 @@ const useMentionStyles = (contents, username) => {
       cursor: pointer;
       padding: 1.5px;
       border-radius: 3px;
+
+      &:hover {
+        text-decoration: underline;
+        text-decoration-color: ${contents.value === username
+          ? theme.colors.destructiveForeground
+          : theme.colors.mutedForeground};
+      }
     `,
   };
 

diff --git a/packages/markups/src/mentions/UserMention.js b/packages/markups/src/mentions/UserMention.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@embeddedchat/ui-elements';
+import { Box, Tooltip } from '@embeddedchat/ui-elements';
 import { useUserStore } from '@embeddedchat/react/src/store';
 import useSetExclusiveState from '@embeddedchat/react/src/hooks/useSetExclusiveState';
 import RCContext from '@embeddedchat/react/src/context/RCInstance';
@@ -27,7 +27,9 @@ const UserMention = ({ contents }) => {
   };
 
   const hasMember = (user) => {
-    if (user === 'all' || user === 'here') return true;
+    if (user === 'all' || user === 'here') {
+      return true;
+    }
     let found = false;
     Object.keys(members).forEach((ele) => {
       if (members[ele].username === user) {
@@ -39,20 +41,27 @@ const UserMention = ({ contents }) => {
 
   const styles = useMentionStyles(contents, username);
 
+  const handleClick = () => {
+    if (!['here', 'all'].includes(contents.value)) {
+      handleUserInfo(contents.value);
+    }
+  };
+
+  const tooltipMap = {
+    all: 'Mentions all the room members',
+    here: 'Mentions online room members',
+    [username]: 'Mentions you',
+  };
+  const tooltipText = tooltipMap[contents.value] || 'Mentions user';
+
   return (
     <>
       {hasMember(contents.value) ? (
-        <Box
-          is="span"
-          css={styles.mention}
-          onClick={
-            ['here', 'all'].includes(contents.value)
-              ? null
-              : () => handleUserInfo(contents.value)
-          }
-        >
-          {contents.value}
-        </Box>
+        <Tooltip text={tooltipText} position="top" key={username}>
+          <Box is="span" css={styles.mention} onClick={handleClick}>
+            {contents.value}
+          </Box>
+        </Tooltip>
       ) : (
         `@${contents.value}`
       )}

diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -112,6 +112,14 @@ export const getCommonRecorderStyles = (theme) => {
       display: flex;
       margin: auto;
     `,
+    modal: {
+      '@media(max-width: 768px)': {
+        height: '100%',
+        width: '100%',
+        maxHeight: '100%',
+        maxWidth: '100%',
+      },
+    },
   };
 
   return styles;

diff --git a/packages/react/src/views/ChatInput/VideoMessageRecoder.js b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
@@ -164,18 +164,17 @@ const VideoMessageRecorder = ({ disabled }) => {
           <Modal
             open={state === 'recording'}
             onClose={handleCancelRecordButton}
-            style={{
-              display: 'flex',
-              width: '28rem',
-            }}
+            css={styles.modal}
           >
             <video
               muted
               autoPlay
               playsInline
               ref={videoRef}
               css={css`
-                margin-bottom: 2px;
+                object-fit: cover;
+                width: 100%;
+                height: 95%;
               `}
             />
             <Box css={styles.controller}>

diff --git a/packages/react/src/views/MessageAggregators/FileGallery.js b/packages/react/src/views/MessageAggregators/FileGallery.js
@@ -15,6 +15,16 @@ const FileGallery = () => {
   const [text, setText] = useState('');
   const [isFetching, setIsFetching] = useState(true);
   const [files, setFiles] = useState([]);
+  const [selectedFilter, setSelectedFilter] = useState('all');
+
+  const options = [
+    { value: 'all', label: 'All' },
+    { value: 'application', label: 'Files' },
+    { value: 'video', label: 'Videos' },
+    { value: 'image', label: 'Images' },
+    { value: 'audio', label: 'Audios' },
+    { value: 'text', label: 'Texts' },
+  ];
 
   const handleInputChange = (e) => {
     setText(e.target.value);
@@ -30,7 +40,7 @@ const FileGallery = () => {
 
   useEffect(() => {
     const fetchAllFiles = async () => {
-      const res = await RCInstance.getAllFiles(isChannelPrivate);
+      const res = await RCInstance.getAllFiles(isChannelPrivate, '');
       if (res?.files) {
         const sortedFiles = res.files.sort(
           (a, b) => new Date(b.uploadedAt) - new Date(a.uploadedAt)
@@ -42,11 +52,33 @@ const FileGallery = () => {
     fetchAllFiles();
   }, [RCInstance, isChannelPrivate, messages]);
 
+  const handleFilterSelect = async (val) => {
+    setIsFetching(true);
+    setSelectedFilter(val);
+    let res;
+    val === 'all'
+      ? (res = await RCInstance.getAllFiles(isChannelPrivate, ''))
+      : (res = await RCInstance.getAllFiles(isChannelPrivate, val));
+    if (res?.files) {
+      const sortedFiles = res.files.sort(
+        (a, b) => new Date(b.uploadedAt) - new Date(a.uploadedAt)
+      );
+      setFiles(sortedFiles);
+      setIsFetching(false);
+    }
+  };
+
   return (
     <MessageAggregator
       title="Files"
       iconName="attachment"
       noMessageInfo="No Files Found"
+      filterProps={{
+        isFile: true,
+        options,
+        value: selectedFilter,
+        handleFilterSelect,
+      }}
       searchProps={{
         isSearch: true,
         handleInputChange,

diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js
@@ -25,6 +25,7 @@ export const MessageAggregator = ({
   noMessageInfo,
   shouldRender,
   fetchedMessageList,
+  filterProps,
   searchProps,
   searchFiltered,
   fetching,
@@ -112,6 +113,7 @@ export const MessageAggregator = ({
     <ViewComponent
       title={title}
       iconName={iconName}
+      filterProps={filterProps}
       searchProps={searchProps}
       onClose={() => setExclusiveState(null)}
       style={{

diff --git a/packages/ui-elements/src/components/Sidebar/Sidebar.js b/packages/ui-elements/src/components/Sidebar/Sidebar.js
@@ -11,6 +11,7 @@ const Sidebar = ({
   iconName,
   onClose,
   children,
+  filterProps = {},
   searchProps = {},
   footer,
   style = {},
@@ -26,7 +27,9 @@ const Sidebar = ({
       style={{ ...style, ...styleOverrides }}
     >
       <SidebarHeader title={title} iconName={iconName} onClose={onClose} />
-      <SidebarContent searchProps={searchProps}>{children}</SidebarContent>
+      <SidebarContent searchProps={searchProps} filterProps={filterProps}>
+        {children}
+      </SidebarContent>
       {footer && <SidebarFooter>{footer}</SidebarFooter>}
     </Box>
   );

diff --git a/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js b/packages/ui-elements/src/components/Sidebar/Sidebar.styles.js
@@ -34,11 +34,16 @@ export const getSidebarContentStyles = (theme) => {
       padding: 0 0.5rem;
       border-radius: ${theme.radius};
       position: relative;
-      margin: 0 1rem 1rem;
       &.focused {
         outline: 1px solid ${theme.colors.ring};
       }
     `,
+    filesHeader: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 1px 1rem 0;
+    `,
 
     textInput: css`
       border: none;

diff --git a/packages/ui-elements/src/components/Sidebar/SidebarContent.js b/packages/ui-elements/src/components/Sidebar/SidebarContent.js
@@ -4,13 +4,20 @@ import { Icon } from '../Icon';
 import { Input } from '../Input';
 import { getSidebarContentStyles } from './Sidebar.styles';
 import { useTheme } from '../../hooks';
+import { StaticSelect } from '../StaticSelect';
 
-const SidebarContent = ({ children, searchProps = {}, style }) => {
+const SidebarContent = ({
+  children,
+  searchProps = {},
+  style,
+  filterProps = {},
+}) => {
   const {
     isSearch = false,
     handleInputChange,
     placeholder,
   } = searchProps || {};
+  const { isFile, options, value, handleFilterSelect } = filterProps || {};
   const searchContainerRef = useRef(null);
   const { theme } = useTheme();
   const styles = getSidebarContentStyles(theme);
@@ -29,25 +36,42 @@ const SidebarContent = ({ children, searchProps = {}, style }) => {
 
   return (
     <Box css={styles.content} style={style}>
-      {isSearch && (
-        <Box
-          css={styles.searchContainer}
-          style={{
-            position: 'relative',
-            margin: '0.5rem',
-          }}
-          ref={searchContainerRef}
-        >
-          <Input
-            placeholder={placeholder}
-            onChange={handleInputChange}
-            css={styles.textInput}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-          />
-          <Icon name="magnifier" size="1.25rem" css={styles.noInfoIcon} />
-        </Box>
-      )}
+      <Box css={styles.filesHeader}>
+        {isSearch && (
+          <Box
+            css={styles.searchContainer}
+            style={{
+              position: 'relative',
+              marginBottom: '0.5rem',
+              width: isFile ? '60%' : '100%',
+            }}
+            ref={searchContainerRef}
+          >
+            <Input
+              placeholder={placeholder}
+              onChange={handleInputChange}
+              css={styles.textInput}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+            />
+            <Icon name="magnifier" size="1.25rem" css={styles.noInfoIcon} />
+          </Box>
+        )}
+        {isFile && (
+          <Box>
+            <StaticSelect
+              style={{
+                position: 'relative',
+                marginBottom: '0.5rem',
+              }}
+              isFile={isFile}
+              options={options}
+              value={value}
+              onSelect={handleFilterSelect}
+            />
+          </Box>
+        )}
+      </Box>
       {children}
     </Box>
   );