Merge branch 'develop' into ux

.github/workflows/build-pr.yml

@@ -12,7 +12,7 @@ env:
   LAYOUT_EDITOR_BASE_URL: "/EmbeddedChat/pulls/pr-${{github.event.pull_request.number}}/layout_editor"
   DOCS_BASE_URL: "/EmbeddedChat/pulls/pr-${{github.event.pull_request.number}}/docs"
   STORYBOOK_RC_HOST: "https://demo.qa.rocket.chat"
-  
+
 jobs:
   build:
     if: github.event.review.state == 'approved' && (github.event.review.author_association == 'COLLABORATOR' || github.event.review.author_association == 'OWNER')
@@ -22,6 +22,15 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v2
 
+      - name: Get user
+        run: echo "${{ github.event.pull_request.head.repo.owner.login }}" > user.txt
+
+      - name: Upload Artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: user
+          path: user.txt
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:

.github/workflows/deploy-pr.yml

@@ -1,22 +1,71 @@
 name: Deploy PR-Preview
-
 on:
   workflow_run:
     workflows: ["Build PR-Preview"]
     types:
       - completed
-
 permissions:
   contents: write
   pages: write
-
 jobs:
   deploy:
     if: github.event.workflow_run.conclusion == 'success'
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/download-artifact@v4
+        with:
+          name: user
+          path: .
+          github-token: ${{github.token}}
+          repository: ${{github.repository}}
+          run-id: ${{github.event.workflow_run.id}}
+
+      - name: Get user
+        id: get_user
+        run: |
+          USER=$(cat user.txt)
+          echo "USER=$USER" >> $GITHUB_ENV
+
+      - name: Get Pull Request Number
+        id: get_pr_number
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          PR_NUMBER=$(curl -s -H "Authorization: token $GITHUB_TOKEN" \
+             "https://api.github.com/repos/${{ github.repository }}/pulls?head=${{env.USER}}:${{ github.event.workflow_run.head_branch }}" \
+            | jq -r '.[0].number')
+          echo "PR_NUMBER=$PR_NUMBER" >> $GITHUB_ENV
+
+      - name: Check PR Approval Status
+        id: approval_check
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          PR_NUMBER=${{ env.PR_NUMBER }}
+
+          RESPONSE=$(curl -s -H "Authorization: token $GITHUB_TOKEN" \
+            "https://api.github.com/repos/${{ github.repository }}/pulls/$PR_NUMBER/reviews")
+
+          if ! echo "$RESPONSE" | jq . > /dev/null 2>&1; then
+            echo "Error: Invalid JSON response from GitHub API."
+            exit 1
+          fi
+
+          LATEST_REVIEW=$(echo "$RESPONSE" | jq 'sort_by(.submitted_at) | last')
+
+          STATE=$(echo "$LATEST_REVIEW" | jq -r '.state')
+          AUTHOR_ASSOCIATION=$(echo "$LATEST_REVIEW" | jq -r '.author_association')
+
+          echo "Latest review state: $STATE"
+          echo "Author association: $AUTHOR_ASSOCIATION"
+
+          if [ "$STATE" != "APPROVED" ] || { [ "$AUTHOR_ASSOCIATION" != "COLLABORATOR" ] && [ "$AUTHOR_ASSOCIATION" != "OWNER" ]; }; then
+            echo "The latest review is not an approved review from a collaborator or owner. Exiting."
+            exit 1
+          fi
+
+      - uses: actions/download-artifact@v4
+        if: success()
         with:
           name: github-pages
           path: build/
@@ -25,6 +74,7 @@ jobs:
           run-id: ${{github.event.workflow_run.id}}
 
       - name: Deploy to GitHub Pages
+        if: success()
         uses: crazy-max/ghaction-github-pages@v2
         with:
           target_branch: gh-deploy

packages/api/src/EmbeddedChatApi.ts

@@ -1124,4 +1124,21 @@ export default class EmbeddedChatApi {
     const data = response.json();
     return data;
   }
+
+  async userData(username: string) {
+    const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+    const response = await fetch(
+      `${this.host}/api/v1/users.info?username=${username}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+      }
+    );
+    const data = response.json();
+    return data;
+  }
 }

packages/markups/src/mentions/UserMention.js

@@ -1,11 +1,30 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Box } 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';
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
 import useMentionStyles from '../elements/elements.styles';
 
 const UserMention = ({ contents }) => {
   const { members, username } = useContext(MarkupInteractionContext);
+  const { RCInstance } = useContext(RCContext);
+  const setExclusiveState = useSetExclusiveState();
+  const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
+    setShowCurrentUserInfo: state.setShowCurrentUserInfo,
+    setCurrentUser: state.setCurrentUser,
+  }));
+
+  const handleUserInfo = async (uname) => {
+    const data = await RCInstance.userData(uname);
+    setCurrentUser({
+      _id: data.user._id,
+      username: data.user.username,
+      name: data.user.name,
+    });
+    setExclusiveState(setShowCurrentUserInfo);
+  };
 
   const hasMember = (user) => {
     if (user === 'all' || user === 'here') return true;
@@ -23,7 +42,15 @@ const UserMention = ({ contents }) => {
   return (
     <>
       {hasMember(contents.value) ? (
-        <Box is="span" css={styles.mention}>
+        <Box
+          is="span"
+          css={styles.mention}
+          onClick={
+            ['here', 'all'].includes(contents.value)
+              ? null
+              : () => handleUserInfo(contents.value)
+          }
+        >
           {contents.value}
         </Box>
       ) : (

packages/react/src/hooks/useRCAuth.js

@@ -1,7 +1,12 @@
 import { useContext } from 'react';
 import { useToastBarDispatch } from '@embeddedchat/ui-elements';
 import RCContext from '../context/RCInstance';
-import { useUserStore, totpModalStore, useLoginStore } from '../store';
+import {
+  useUserStore,
+  totpModalStore,
+  useLoginStore,
+  useMessageStore,
+} from '../store';
 
 export const useRCAuth = () => {
   const { RCInstance } = useContext(RCContext);
@@ -23,6 +28,9 @@ export const useRCAuth = () => {
   const setUserPinPermissions = useUserStore(
     (state) => state.setUserPinPermissions
   );
+  const setEditMessagePermissions = useMessageStore(
+    (state) => state.setEditMessagePermissions
+  );
   const dispatchToastMessage = useToastBarDispatch();
 
   const handleLogin = async (userOrEmail, password, code) => {
@@ -61,6 +69,7 @@ export const useRCAuth = () => {
           setEmailorUser(null);
           setPassword(null);
           setUserPinPermissions(permissions.update[150]);
+          setEditMessagePermissions(permissions.update[28]);
           dispatchToastMessage({
             type: 'success',
             message: 'Successfully logged in',

packages/react/src/store/messageStore.js

@@ -71,6 +71,9 @@ const useMessageStore = create((set, get) => ({
     }
   },
   setEditMessage: (editMessage) => set(() => ({ editMessage })),
+  editMessagePermissions: {},
+  setEditMessagePermissions: (editMessagePermissions) =>
+    set((state) => ({ ...state, editMessagePermissions })),
   addQuoteMessage: (quoteMessage) =>
     set((state) => ({ quoteMessage: [...state.quoteMessage, quoteMessage] })),
   removeQuoteMessage: (quoteMessage) =>

packages/react/src/views/ChatHeader/ChatHeader.js

@@ -21,6 +21,7 @@ import {
   usePinnedMessageStore,
   useStarredMessageStore,
   useFileStore,
+  useSidebarStore,
 } from '../../store';
 import { DynamicHeader } from '../DynamicHeader';
 import useFetchChatData from '../../hooks/useFetchChatData';
@@ -84,7 +85,7 @@ const ChatHeader = ({
   const setIsUserAuthenticated = useUserStore(
     (state) => state.setIsUserAuthenticated
   );
-
+  const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
   const dispatchToastMessage = useToastBarDispatch();
   const { getMessagesAndRoles } = useFetchChatData(showRoles);
   const setMessageLimit = useSettingsStore((state) => state.setMessageLimit);
@@ -130,6 +131,7 @@ const ChatHeader = ({
     try {
       await RCInstance.logout();
       setMessages([]);
+      setShowSidebar(false);
       setUserAvatarUrl(null);
       useMessageStore.setState({ isMessageLoaded: false });
     } catch (e) {

packages/react/src/views/ChatInput/ChatInput.js

@@ -34,6 +34,7 @@ import useShowCommands from '../../hooks/useShowCommands';
 import useSearchMentionUser from '../../hooks/useSearchMentionUser';
 import formatSelection from '../../lib/formatSelection';
 import { parseEmoji } from '../../lib/emoji';
+import { Markdown } from '../Markdown';
 
 const ChatInput = ({ scrollToBottom }) => {
   const { styleOverrides, classNames } = useComponentOverrides('ChatInput');

packages/react/src/views/EmbeddedChat.js

@@ -18,7 +18,7 @@ import {
 import { ChatLayout } from './ChatLayout';
 import { ChatHeader } from './ChatHeader';
 import { RCInstanceProvider } from '../context/RCInstance';
-import { useUserStore, useLoginStore } from '../store';
+import { useUserStore, useLoginStore, useMessageStore } from '../store';
 import DefaultTheme from '../theme/DefaultTheme';
 import { getTokenStorage } from '../lib/auth';
 import { styles } from './EmbeddedChat.styles';
@@ -87,6 +87,9 @@ const EmbeddedChat = (props) => {
     (state) => state.setUserPinPermissions
   );
 
+  const setEditMessagePermissions = useMessageStore(
+    (state) => state.setEditMessagePermissions
+  );
   if (isClosable && !setClosableState) {
     throw Error(
       'Please provide a setClosableState to props when isClosable = true'
@@ -130,6 +133,7 @@ const EmbeddedChat = (props) => {
         await RCInstance.autoLogin(auth);
         const permissions = await RCInstance.permissionInfo();
         setUserPinPermissions(permissions.update[150]);
+        setEditMessagePermissions(permissions.update[28]);
       } catch (error) {
         console.error(error);
       } finally {

packages/react/src/views/GlobalStyles.js

@@ -8,7 +8,6 @@ const getGlobalStyles = (theme) => css`
     margin: 0;
     padding: 0;
   }
-
   .ec-embedded-chat body {
     font-family: ${theme.typography.default.fontFamily};
     font-size: ${theme.typography.default.fontSize}px;
@@ -36,6 +35,17 @@ const getGlobalStyles = (theme) => css`
   .ec-embedded-chat ::-webkit-scrollbar-button {
     display: none;
   }
+  @media (max-width: 780px) {
+    .ec-sidebar {
+      position: absolute;
+      width: 100% !important;
+      height: calc(100% - 56.39px) !important;
+      min-width: 250px !important;
+      left: 0;
+      bottom: 0;
+      background: ${theme.colors.background}!important;
+    }
+  }
 `;
 
 const GlobalStyles = () => {

packages/react/src/views/Markdown/Markdown.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Box } from '@embeddedchat/ui-elements';
-import { Markup, MarkupInteractionContext } from '@embeddedchat/markups';
+import { Markup, MarkupInteractionContext } from '@embeddedchat/markups/src';
 import EmojiReaction from '../EmojiReaction/EmojiReaction';
 import { useMemberStore, useUserStore } from '../../store';