From b8890044cac148b39695864e0981ffe4ec7268a5 Mon Sep 17 00:00:00 2001
From: Abir Chakraborty <142606190+abirc8010@users.noreply.github.com>
Date: Sat, 11 Jan 2025 21:56:13 +0530
Subject: [PATCH 1/3] fix: video modal responsiveness (#726)

* video modal fix

* Make video modal occupy full space

* make the video modal occupy full size only for smaller screens

* change screen width upper-bound from 500px to 768px
---
 packages/react/src/views/ChatInput/ChatInput.styles.js   | 8 ++++++++
 .../react/src/views/ChatInput/VideoMessageRecoder.js     | 9 ++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index 7aa85e40f..21e7a2473 100644
--- 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
index 911df74c6..91783d676 100644
--- a/packages/react/src/views/ChatInput/VideoMessageRecoder.js
+++ b/packages/react/src/views/ChatInput/VideoMessageRecoder.js
@@ -164,10 +164,7 @@ const VideoMessageRecorder = ({ disabled }) => {
           <Modal
             open={state === 'recording'}
             onClose={handleCancelRecordButton}
-            style={{
-              display: 'flex',
-              width: '28rem',
-            }}
+            css={styles.modal}
           >
             <video
               muted
@@ -175,7 +172,9 @@ const VideoMessageRecorder = ({ disabled }) => {
               playsInline
               ref={videoRef}
               css={css`
-                margin-bottom: 2px;
+                object-fit: cover;
+                width: 100%;
+                height: 95%;
               `}
             />
             <Box css={styles.controller}>

From d1f074b6bb2e47dd156277181e4394e68ad705c8 Mon Sep 17 00:00:00 2001
From: Anirban Singha <143536290+SinghaAnirban005@users.noreply.github.com>
Date: Sat, 11 Jan 2025 21:57:59 +0530
Subject: [PATCH 2/3] feat: add file type filtering dropdown to improve file
 navigation (#718)

* feat: add file type filtering dropdown to improve file navigation

* Update StaticSelect.styles.js

* change layout of files search sidebar from col to row

* fix: ensure selected value is persistent in placeholder
---
 packages/api/src/EmbeddedChatApi.ts           | 25 ++++----
 .../views/MessageAggregators/FileGallery.js   | 34 +++++++++-
 .../common/MessageAggregator.js               |  2 +
 .../src/components/Sidebar/Sidebar.js         |  5 +-
 .../src/components/Sidebar/Sidebar.styles.js  |  7 +-
 .../src/components/Sidebar/SidebarContent.js  | 64 +++++++++++++------
 .../components/StaticSelect/StaticSelect.js   | 35 +++++++---
 .../StaticSelect/StaticSelect.styles.js       |  9 +++
 8 files changed, 137 insertions(+), 44 deletions(-)

diff --git a/packages/api/src/EmbeddedChatApi.ts b/packages/api/src/EmbeddedChatApi.ts
index 2f843a1cd..3a1c3b5f9 100644
--- 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/react/src/views/MessageAggregators/FileGallery.js b/packages/react/src/views/MessageAggregators/FileGallery.js
index 606add5f0..8c23f6eef 100644
--- 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
index 56d52a08c..44461790a 100644
--- 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
index 8c8ec7092..cd9e7a1f7 100644
--- 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
index bf7d07ef7..bc8fe1c7b 100644
--- 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
index 7e8756f87..cbe19088b 100644
--- 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>
   );
diff --git a/packages/ui-elements/src/components/StaticSelect/StaticSelect.js b/packages/ui-elements/src/components/StaticSelect/StaticSelect.js
index d3123dfba..b64e40b0f 100644
--- a/packages/ui-elements/src/components/StaticSelect/StaticSelect.js
+++ b/packages/ui-elements/src/components/StaticSelect/StaticSelect.js
@@ -12,6 +12,7 @@ const StaticSelect = ({
   style = {},
   options = [],
   placeholder = '',
+  isFile,
   value,
   onSelect,
   disabled = false,
@@ -22,9 +23,18 @@ const StaticSelect = ({
   const styles = getStaticSelectStyles(theme);
 
   const [isOpen, setIsOpen] = useState(false);
-  const [internalValue, setInternalValue] = useState('');
+  const [internalValue, setInternalValue] = useState(value || '');
+  const [selectedOption, setSelectedOption] = useState(null);
   const staticSelectRef = useRef(null);
 
+  useEffect(() => {
+    setInternalValue(value || '');
+    const option = options.find((opt) => opt.value === value);
+    if (option) {
+      setSelectedOption(option);
+    }
+  }, [value, options]);
+
   const toggleDropdown = () => {
     if (!disabled) {
       setIsOpen(!isOpen);
@@ -32,17 +42,15 @@ const StaticSelect = ({
   };
 
   const handleSelect = (optionValue) => {
+    const selectedOpt = options.find((opt) => opt.value === optionValue);
     setInternalValue(optionValue);
+    setSelectedOption(selectedOpt);
     setIsOpen(false);
     if (onSelect) {
       onSelect(optionValue);
     }
   };
 
-  useEffect(() => {
-    setInternalValue(value || '');
-  }, [value]);
-
   useEffect(() => {
     const handleClickOutside = (event) => {
       if (
@@ -61,6 +69,8 @@ const StaticSelect = ({
     };
   }, [isOpen]);
 
+  const displayValue = selectedOption?.label || placeholder;
+
   return (
     <Box
       className={`ec-static-select ${className} ${classNames}`}
@@ -78,20 +88,27 @@ const StaticSelect = ({
         {...props}
       >
         <Box is="span" className="selected-option">
-          {!isOpen && internalValue
-            ? options.find((option) => option.value === internalValue)?.label
-            : placeholder}
+          {displayValue}
         </Box>
         <Icon name="chevron-down" />
       </Box>
 
-      {isOpen && (
+      {isOpen && !isFile && (
         <ListBox
           options={options}
           onSelect={handleSelect}
           value={internalValue}
         />
       )}
+      {isOpen && isFile && (
+        <Box css={styles.fileTypeSelect}>
+          <ListBox
+            options={options}
+            onSelect={handleSelect}
+            value={internalValue}
+          />
+        </Box>
+      )}
     </Box>
   );
 };
diff --git a/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js b/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js
index 3374417f6..e42215564 100644
--- a/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js
+++ b/packages/ui-elements/src/components/StaticSelect/StaticSelect.styles.js
@@ -38,6 +38,15 @@ const getStaticSelectStyles = (theme) => {
       cursor: not-allowed !important;
       color: ${theme.colors.mutedForeground};
     `,
+
+    fileTypeSelect: css`
+      position: absolute;
+      z-index: 10;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      background-color: white;
+    `,
   };
 
   return styles;

From bcc7e95e5b9c2f2474fef558652adfec17557565 Mon Sep 17 00:00:00 2001
From: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Date: Sat, 11 Jan 2025 21:58:25 +0530
Subject: [PATCH 3/3] Feat: Added 'Mentions you' and 'Mentions user' tooltips
 for mentioned users & underline on hover (#859)

* Feat: Added Tooltip for Send button & Arrow-back button

* removed tooltip for send button & changed label to Jump to message

* Removed gap between tooltip and tooltipArrow for left position

* Added tooltip styles positioning for left, right positions

* Dynamic Positioning for Tooltip with readable code

* Feat: Add 'Mentions you' and 'Mentions user' tooltips for mentioned users & underline on hover

* Update Tooltip.styles.js

* Update Tooltip.js

* Update MessageAggregator.js

* Added tooltip for all and here mentions

---------

Co-authored-by: Zishan Ahmad <zishan.barun@gmail.com>
---
 packages/markups/src/elements/CodeBlock.js    |  2 +-
 .../markups/src/elements/elements.styles.js   |  7 ++++
 packages/markups/src/mentions/UserMention.js  | 35 ++++++++++++-------
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/markups/src/elements/CodeBlock.js b/packages/markups/src/elements/CodeBlock.js
index 54bad69fc..d2d93901e 100644
--- 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
index 2f1f2fb29..31497a651 100644
--- 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
index c860a4d70..45615e4a1 100644
--- 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}`
       )}