conflictsResolved

README.md

@@ -1,4 +1,7 @@
-# EmbeddedChat
+<h1 align='center'>Embedded chat: A staple in excellent customer service</h1>
+
+![image](https://github.com/coderboy-yash/EmbeddedChat/assets/109899959/b2961a35-4300-48df-b674-8a128c73e838)
+
 
 An easy to use full-stack component (ReactJS + backend behaviors) embedding Rocket.Chat into your webapp.
 
@@ -43,6 +46,7 @@ To develop and test `EmbeddedChat`, a local instance of Rocket.Chat server is ne
 
 Install all necessary dependencies and build the packages (`auth`, `api`, and `react`) with:
 
+
 ```bash
 yarn
 ```

packages/api/src/EmbeddedChatApi.ts

@@ -443,6 +443,23 @@ export default class EmbeddedChatApi {
     }
   }
 
+  async permissionInfo() {
+    try {
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      const response = await fetch(`${this.host}/api/v1/permissions.listAll`, {
+        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 close() {
     await this.rcClient.unsubscribeAll();
     await this.rcClient.disconnect();

packages/react/src/components/ChatBody/ChatBody.js

@@ -49,6 +49,11 @@ const ChatBody = ({
     }
   `;
 
+  const [scrollPosition, setScrollPosition] = useState(0);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [, setIsUserScrolledUp] = useState(false);
+  const [otherUserMessage, setOtherUserMessage] = useState(false);
+
   const { RCInstance, ECOptions } = useContext(RCContext);
   const messages = useMessageStore((state) => state.messages);
   const threadMessages = useMessageStore((state) => state.threadMessages);
@@ -173,11 +178,6 @@ const ChatBody = ({
     anonymousMode,
   ]);
 
-  const [scrollPosition, setScrollPosition] = useState(0);
-  const [popupVisible, setPopupVisible] = useState(false);
-  const [isUserScrolledUp, setIsUserScrolledUp] = useState(false);
-  const [otherUserMessage, setOtherUserMessage] = useState(false);
-
   const handlePopupClick = () => {
     scrollToBottom();
     setIsUserScrolledUp(false);

packages/react/src/components/ChatHeader/ChatHeader.js

@@ -83,6 +83,8 @@ const ChatHeader = ({
     }
     setFilter(false);
   };
+  const setCanSendMsg = useUserStore((state) => state.setCanSendMsg);
+  const authenticatedUserId = useUserStore((state) => state.userId);
 
   const handleLogout = useCallback(async () => {
     try {
@@ -140,22 +142,53 @@ const ChatHeader = ({
   }, [setShowAllThreads, setShowSearch]);
 
   useEffect(() => {
+    const setMessageAllowed = async () => {
+      const permissionRes = await RCInstance.permissionInfo();
+      const channelRolesRes = await RCInstance.getChannelRoles(
+        isChannelPrivate
+      );
+
+      if (permissionRes.success && channelRolesRes.success) {
+        const postMsgRoles = permissionRes.update[140]?.roles || [];
+
+        const userRoles = channelRolesRes.roles
+          .filter((chRole) => chRole.u?._id === authenticatedUserId)
+          .flatMap((chRole) => chRole.roles);
+
+        const canSendMsg =
+          userRoles.length > 0 &&
+          postMsgRoles.some((role) => userRoles.includes(role));
+        setCanSendMsg(canSendMsg);
+      }
+    };
+
     const getChannelInfo = async () => {
       const res = await RCInstance.channelInfo();
       if (res.success) {
         setChannelInfo(res.room);
         if (res.room.t === 'p') setIsChannelPrivate(true);
-      } else if ('errorType' in res) {
-        if (res.errorType === 'error-room-not-found') {
-          dispatchToastMessage({
-            type: 'error',
-            message: "Channel doesn't exist. Logging out.",
-            position: toastPosition,
-          });
-          await RCInstance.logout();
-        }
+        if (res.room.ro) setMessageAllowed();
+      } else if (
+        'errorType' in res &&
+        res.errorType === 'error-room-not-found'
+      ) {
+        dispatchToastMessage({
+          type: 'error',
+          message: "Channel doesn't exist. Logging out.",
+          position: toastPosition,
+        });
+        await RCInstance.logout();
+      } else if ('errorType' in res && res.errorType === 'Not Allowed') {
+        dispatchToastMessage({
+          type: 'error',
+          message:
+            "You don't have permission to access this channel. Logging out",
+          position: toastPosition,
+        });
+        await RCInstance.logout();
       }
     };
+
     if (isUserAuthenticated) {
       getChannelInfo();
     }
@@ -166,6 +199,9 @@ const ChatHeader = ({
     setIsChannelPrivate,
     dispatchToastMessage,
     toastPosition,
+    isChannelPrivate,
+    setCanSendMsg,
+    authenticatedUserId,
   ]);
 
   const menuOptions = useMemo(() => {

packages/react/src/components/ChatInput/ChatInput.js

@@ -39,6 +39,7 @@ const ChatInput = ({ scrollToBottom }) => {
   const isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );
+  const canSendMsg = useUserStore((state) => state.canSendMsg);
 
   const setIsUserAuthenticated = useUserStore(
     (state) => state.setIsUserAuthenticated
@@ -459,8 +460,14 @@ const ChatInput = ({ scrollToBottom }) => {
         >
           <textarea
             rows={1}
-            disabled={!isUserAuthenticated || isRecordingMessage}
-            placeholder={isUserAuthenticated ? 'Message' : 'Sign in to chat'}
+            disabled={!isUserAuthenticated || !canSendMsg || isRecordingMessage}
+            placeholder={
+              isUserAuthenticated && canSendMsg
+                ? 'Message'
+                : isUserAuthenticated
+                ? 'This room is read only'
+                : 'Sign in to chat'
+            }
             className={styles.textInput}
             onChange={onTextChange}
             onKeyUp={showCommands}

packages/react/src/components/CheckBox/CheckBox.js

@@ -21,6 +21,7 @@ const CheckBox = ({ checked, ...props }) => {
     }
   `;
   return (
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
     <label
       css={CheckBoxCss}
       className={appendClassNames('ec-check-box', classNames)}

packages/react/src/components/EmbeddedChat.js

@@ -251,6 +251,7 @@ const EmbeddedChat = ({
                       anonymousMode={anonymousMode}
                       showRoles={showRoles}
                       messageListRef={messageListRef}
+                      scrollToBottom={scrollToBottom}
                     />
                   ) : (
                     <Home height={!fullScreen ? height : '88vh'} />
@@ -266,6 +267,7 @@ const EmbeddedChat = ({
                     anonymousMode={anonymousMode}
                     showRoles={showRoles}
                     messageListRef={messageListRef}
+                    scrollToBottom={scrollToBottom}
                   />
                 ) : (
                   <Home height={!fullScreen ? height : '88vh'} />

packages/react/src/components/Message/Message.js

@@ -108,8 +108,8 @@ const Message = ({
     }
   };
 
-  const handleDeleteMessage = async (message) => {
-    const res = await RCInstance.deleteMessage(message._id);
+  const handleDeleteMessage = async (msg) => {
+    const res = await RCInstance.deleteMessage(msg._id);
 
     if (res.success) {
       dispatchToastMessage({

packages/react/src/components/Modal/Modal.js

@@ -33,9 +33,6 @@ export const Modal = forwardRef(
       background: ${theme?.palette?.background?.modal || '#fff'};
       border-radius: 0.25rem;
     `;
-    if (!open) {
-      return null;
-    }
 
     const handleClick = useCallback(
       (e) => {
@@ -63,6 +60,10 @@ export const Modal = forwardRef(
       };
     }, [handleEscKey]);
 
+    if (!open) {
+      return null;
+    }
+
     return (
       <ModalBackdrop ref={backDropRef} onClick={handleClick}>
         <Box

packages/react/src/components/Modal/ModalBackdrop.js

@@ -1,26 +1,26 @@
 import React, { forwardRef } from 'react';
 import { Box } from '../Box';
 
-export const ModalBackdrop = forwardRef(
-  ({ children, onClick = () => {} }, ref) => (
-    <Box
-      ref={ref}
-      onClick={onClick}
-      style={{
-        position: 'fixed',
-        zIndex: 10000,
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: '#333333B3',
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      {children}
-    </Box>
-  )
-);
+const ModalBackdrop = forwardRef(({ children, onClick = () => {} }, ref) => (
+  <Box
+    ref={ref}
+    onClick={onClick}
+    style={{
+      position: 'fixed',
+      zIndex: 10000,
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: '#333333B3',
+      width: '100%',
+      height: '100%',
+    }}
+  >
+    {children}
+  </Box>
+));
+ModalBackdrop.displayName = 'ModalBackdrop';
+export { ModalBackdrop };

packages/react/src/components/Tooltip/Tooltip.js

@@ -48,6 +48,8 @@ const Tooltip = ({ children, text, position }) => {
     setTooltipVisible(false);
   };
 
+  let touchTimer;
+
   const handleTouchStart = () => {
     touchTimer = setTimeout(() => {
       setTooltipVisible(true);
@@ -59,8 +61,6 @@ const Tooltip = ({ children, text, position }) => {
     setTooltipVisible(false);
   };
 
-  let touchTimer;
-
   return (
     <div
       onMouseEnter={handleMouseEnter}

packages/react/src/components/uiKit/blocks/UiKitModal.js

@@ -1,3 +1,6 @@
+/* eslint-disable react/jsx-no-undef */
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
 /* eslint-disable no-shadow */
 /* eslint-disable react/jsx-no-constructed-context-values */
 import React from 'react';

packages/react/src/store/userStore.js

@@ -19,8 +19,10 @@ const useUserStore = create((set) => ({
       avatarUrl,
     })),
   isUserAuthenticated: false,
+  canSendMsg: true,
   setIsUserAuthenticated: (isUserAuthenticated) =>
     set(() => ({ isUserAuthenticated })),
+  setCanSendMsg: (canSendMsg) => set(() => ({ canSendMsg })),
   password: null,
   setPassword: (password) => set(() => ({ password })),
   emailoruser: null,