feat: Implemented search member and display member info feature

packages/react/src/views/RoomMembers/RoomMember.js

@@ -5,6 +5,7 @@ import {
   Button,
   Icon,
   Sidebar,
+  Input,
   Popup,
   useComponentOverrides,
   useTheme,
@@ -33,6 +34,9 @@ const RoomMembers = ({ members }) => {
   const [userInfo, setUserInfo] = useState(null);
   const setExclusiveState = useSetExclusiveState();
 
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filteredMembers, setFilteredMembers] = useState(members);
+
   useEffect(() => {
     const getUserInfo = async () => {
       try {
@@ -47,9 +51,20 @@ const RoomMembers = ({ members }) => {
     getUserInfo();
   }, [RCInstance]);
 
+  useEffect(() => {
+    setFilteredMembers(
+      members.filter(
+        (member) =>
+          member.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          member.username?.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+  }, [searchTerm, members]);
+
   const roles = userInfo && userInfo.roles ? userInfo.roles : [];
   const isAdmin = roles.includes('admin');
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
+
   return (
     <ViewComponent
       title="Members"
@@ -70,10 +85,6 @@ const RoomMembers = ({ members }) => {
             <InviteMembers />
           ) : (
             <>
-              {members.map((member) => (
-                <RoomMemberItem user={member} host={host} key={member._id} />
-              ))}
-
               {isAdmin && (
                 <Button
                   style={{ marginTop: '10px', width: '100%' }}
@@ -84,13 +95,38 @@ const RoomMembers = ({ members }) => {
                   <Icon size="1em" name="link" /> Invite Link
                 </Button>
               )}
+              <Box css={styles.searchContainer}>
+                <Input
+                  css={styles.textInput}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  placeholder="Search members"
+                />
+                <Icon name="magnifier" size="1.5rem" css={styles.searchIcon} />
+              </Box>
+              <Box css={styles.memberList}>
+                {filteredMembers.length > 0 ? (
+                  filteredMembers.map((member) => (
+                    <>
+                      <RoomMemberItem
+                        user={member}
+                        host={host}
+                        key={member._id}
+                      />
+                    </>
+                  ))
+                ) : (
+                  <Box css={styles.noMembers}>No members found</Box>
+                )}
+              </Box>
             </>
           )}
         </Box>
       )}
     </ViewComponent>
   );
 };
+
 export default RoomMembers;
 
 RoomMembers.propTypes = {

packages/react/src/views/RoomMembers/RoomMemberItem.js

@@ -4,6 +4,8 @@ import { css } from '@emotion/react';
 import { Box, Icon, Avatar } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
 import { RoomMemberItemStyles as styles } from './RoomMembers.styles';
+import useSetExclusiveState from '../../hooks/useSetExclusiveState';
+import { useUserStore } from '../../store';
 
 const RoomMemberItem = ({ user, host }) => {
   const { RCInstance } = useContext(RCContext);
@@ -18,15 +20,28 @@ const RoomMemberItem = ({ user, host }) => {
           setUserStatus(res.status);
         }
       } catch (err) {
-        console.error('Error fetching user status', err);
+        console.error('Error fetching user status:', err);
       }
     };
 
     getStatus();
   }, [RCInstance]);
+  const setExclusiveState = useSetExclusiveState();
+  const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
+    setShowCurrentUserInfo: state.setShowCurrentUserInfo,
+    setCurrentUser: state.setCurrentUser,
+  }));
 
+  const handleShowUserInfo = () => {
+    setExclusiveState(setShowCurrentUserInfo);
+    setCurrentUser(user);
+  };
   return (
-    <Box css={styles.container}>
+    <Box
+      css={styles.container}
+      style={{ cursor: 'pointer' }}
+      onClick={handleShowUserInfo}
+    >
       <Avatar
         url={avatarUrl}
         alt="avatar"
@@ -46,7 +61,9 @@ const RoomMemberItem = ({ user, host }) => {
         {userStatus && (
           <Icon name={userStatus} size="1.25rem" css={styles.icon} />
         )}
-        <Box is="span">{user.username}</Box>
+        <Box is="span">
+          {user.name} ({user.username})
+        </Box>
       </Box>
     </Box>
   );

packages/react/src/views/RoomMembers/RoomMembers.styles.js

@@ -1,14 +1,48 @@
 import { css } from '@emotion/react';
 
-export const getRoomMemberStyles = () => {
+export const getRoomMemberStyles = (theme) => {
   const styles = {
     container: css`
       display: flex;
       flex-direction: column;
-      overflow: auto;
+      height: 100%;
       width: 100%;
-      justify-content: center;
       padding: 0 1rem 1rem;
+      box-sizing: border-box;
+    `,
+    searchContainer: css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid ${theme.colors.border};
+      padding: 0 0.5rem;
+      border-radius: ${theme.radius};
+      position: relative;
+      margin-top: 1rem;
+    `,
+    textInput: css`
+      flex: 1;
+      border: none;
+      padding: none;
+      font-size: 1rem;
+      &:focus {
+        outline: none;
+      }
+    `,
+    searchIcon: css`
+      padding-left: 0.5rem;
+      font-size: 1.25rem;
+      color: ${theme.colors.icon};
+    `,
+    memberList: css`
+      flex: 1;
+      overflow-y: auto;
+      margin-top: 1rem;
+    `,
+    noMembers: css`
+      text-align: center;
+      color: ${theme.colors.textSecondary};
+      margin-top: 1rem;
     `,
   };
 

packages/react/src/views/UserInformation/UserInformation.js

@@ -59,6 +59,10 @@ const UserInformation = () => {
       title="User Info"
       iconName="user"
       onClose={() => setExclusiveState(null)}
+      style={{
+        width: '400px',
+        zIndex: window.innerWidth <= 780 ? 1 : null,
+      }}
       {...(viewType === 'Popup'
         ? {
             isPopupHeader: true,