From 9a3b7ac93c3a2233ab7ceb2d49d205317cde8b16 Mon Sep 17 00:00:00 2001 From: Abir Chakraborty <142606190+abirc8010@users.noreply.github.com> Date: Sun, 22 Dec 2024 13:57:01 +0530 Subject: [PATCH 1/6] Fixed UI issues for Sidebar (#634) * Fixed UI issues for Sidebar * Fixed sidebar height issue * Removed unnecessary spacing * Fixed reply in thread issue * Adjusted dynamic header visibility * Revert zIndex changes * Linting fix * Run prettier * Remove zIndex * Adjusted zIndex for ViewComponent * Fix sidebar width * Remove global css for sidebar --------- Co-authored-by: Zishan Ahmad --- packages/react/src/views/ChatHeader/ChatHeader.js | 4 +++- packages/react/src/views/GlobalStyles.js | 12 +++++++++++- packages/react/src/views/Message/Message.js | 5 +++-- packages/react/src/views/Message/Message.styles.js | 3 +++ .../MessageAggregators/common/MessageAggregator.js | 9 ++++++++- .../src/views/RoomInformation/RoomInformation.js | 1 + packages/react/src/views/RoomMembers/RoomMember.js | 1 + 7 files changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/react/src/views/ChatHeader/ChatHeader.js b/packages/react/src/views/ChatHeader/ChatHeader.js index 99babdc51..010739977 100644 --- a/packages/react/src/views/ChatHeader/ChatHeader.js +++ b/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) { diff --git a/packages/react/src/views/GlobalStyles.js b/packages/react/src/views/GlobalStyles.js index b26977e63..c9c821fef 100644 --- a/packages/react/src/views/GlobalStyles.js +++ b/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 = () => { diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js index e460adad0..b587d09e1 100644 --- a/packages/react/src/views/Message/Message.js +++ b/packages/react/src/views/Message/Message.js @@ -11,7 +11,7 @@ import { import { Attachments } from '../AttachmentHandler'; import { Markdown } from '../Markdown'; import MessageHeader from './MessageHeader'; -import { useMessageStore, useUserStore } from '../../store'; +import { useMessageStore, useUserStore, useSidebarStore } from '../../store'; import RCContext from '../../context/RCInstance'; import { MessageBody } from './MessageBody'; import { MessageReactions } from './MessageReactions'; @@ -49,7 +49,7 @@ const Message = ({ const { RCInstance, ECOptions } = useContext(RCContext); showAvatar = ECOptions?.showAvatar && showAvatar; - + const { showSidebar, setShowSidebar } = useSidebarStore(); const authenticatedUserId = useUserStore((state) => state.userId); const authenticatedUserUsername = useUserStore((state) => state.username); const userRoles = useUserStore((state) => state.roles); @@ -137,6 +137,7 @@ const Message = ({ const handleOpenThread = (msg) => async () => { openThread(msg); + setShowSidebar(false); }; const isStarred = message.starred?.find((u) => u._id === authenticatedUserId); diff --git a/packages/react/src/views/Message/Message.styles.js b/packages/react/src/views/Message/Message.styles.js index b6b978fb4..9f9358fd9 100644 --- a/packages/react/src/views/Message/Message.styles.js +++ b/packages/react/src/views/Message/Message.styles.js @@ -81,6 +81,9 @@ export const getMessageDividerStyles = (theme) => { margin-bottom: 0.75rem; padding-left: 1.25rem; padding-right: 1.25rem; + @media (max-width: 780px) { + z-index: 1; + } `, dividerContent: css` diff --git a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js index 3f4f62e73..6e1786a33 100644 --- a/packages/react/src/views/MessageAggregators/common/MessageAggregator.js +++ b/packages/react/src/views/MessageAggregators/common/MessageAggregator.js @@ -70,7 +70,11 @@ export const MessageAggregator = ({ iconName={iconName} searchProps={searchProps} onClose={() => setExclusiveState(null)} - style={{ padding: 0 }} + style={{ + width: '400px', + padding: 0, + zIndex: window.innerWidth <= 780 ? 1 : null, + }} {...(viewType === 'Popup' ? { isPopupHeader: true, @@ -126,6 +130,9 @@ export const MessageAggregator = ({ isInSidebar style={{ flex: 1, + paddingLeft: 3, + paddingRight: 2, + minWidth: 0, }} /> diff --git a/packages/react/src/views/RoomInformation/RoomInformation.js b/packages/react/src/views/RoomInformation/RoomInformation.js index 504b0f4ba..3cfdefad0 100644 --- a/packages/react/src/views/RoomInformation/RoomInformation.js +++ b/packages/react/src/views/RoomInformation/RoomInformation.js @@ -30,6 +30,7 @@ const Roominfo = () => { title="Room Information" iconName="info" onClose={() => setExclusiveState(null)} + style={{ width: '400px', zIndex: window.innerWidth <= 780 ? 1 : null }} {...(viewType === 'Popup' ? { isPopupHeader: true, diff --git a/packages/react/src/views/RoomMembers/RoomMember.js b/packages/react/src/views/RoomMembers/RoomMember.js index c52f48c9d..85b268b07 100644 --- a/packages/react/src/views/RoomMembers/RoomMember.js +++ b/packages/react/src/views/RoomMembers/RoomMember.js @@ -55,6 +55,7 @@ const RoomMembers = ({ members }) => { title="Members" iconName="members" onClose={() => setExclusiveState(null)} + style={{ width: '400px', zIndex: window.innerWidth <= 780 ? 1 : null }} {...(viewType === 'Popup' ? { isPopupHeader: true, From 3d6700c2f93cc9bb9eb4bd54fdfec4009befca6b Mon Sep 17 00:00:00 2001 From: Anirban Singha <143536290+SinghaAnirban005@users.noreply.github.com> Date: Sun, 22 Dec 2024 14:21:20 +0530 Subject: [PATCH 2/6] fix(permissions): ensure admin-granted edit message permissions apply in EmbeddedChat (#702) --- packages/react/src/hooks/useRCAuth.js | 11 ++++++++++- packages/react/src/store/messageStore.js | 3 +++ packages/react/src/views/EmbeddedChat.js | 6 +++++- packages/react/src/views/Message/Message.js | 5 +++++ packages/react/src/views/Message/MessageToolbox.js | 8 +++++++- 5 files changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/react/src/hooks/useRCAuth.js b/packages/react/src/hooks/useRCAuth.js index 6a997cb56..c0b1d3a3b 100644 --- a/packages/react/src/hooks/useRCAuth.js +++ b/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', diff --git a/packages/react/src/store/messageStore.js b/packages/react/src/store/messageStore.js index 507ba3d14..676258c1c 100644 --- a/packages/react/src/store/messageStore.js +++ b/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) => diff --git a/packages/react/src/views/EmbeddedChat.js b/packages/react/src/views/EmbeddedChat.js index a7e258b44..00557f289 100644 --- a/packages/react/src/views/EmbeddedChat.js +++ b/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 { diff --git a/packages/react/src/views/Message/Message.js b/packages/react/src/views/Message/Message.js index b587d09e1..aafb5642b 100644 --- a/packages/react/src/views/Message/Message.js +++ b/packages/react/src/views/Message/Message.js @@ -56,6 +56,9 @@ const Message = ({ const pinPermissions = useUserStore( (state) => state.userPinPermissions.roles ); + const editMessagePermissions = useMessageStore( + (state) => state.editMessagePermissions.roles + ); const [setMessageToReport, toggleShowReportMessage] = useMessageStore( (state) => [state.setMessageToReport, state.toggleShowReportMessage] ); @@ -73,6 +76,7 @@ const Message = ({ const styles = getMessageStyles(theme); const bubbleStyles = useBubbleStyles(isMe); const pinRoles = new Set(pinPermissions); + const editMessageRoles = new Set(editMessagePermissions); const variantStyles = !isInSidebar && variantOverrides === 'bubble' ? bubbleStyles : {}; @@ -210,6 +214,7 @@ const Message = ({ authenticatedUserId={authenticatedUserId} userRoles={userRoles} pinRoles={pinRoles} + editMessageRoles={editMessageRoles} handleOpenThread={handleOpenThread} handleDeleteMessage={handleDeleteMessage} handleStarMessage={handleStarMessage} diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js index 55af7f64d..61765c8dd 100644 --- a/packages/react/src/views/Message/MessageToolbox.js +++ b/packages/react/src/views/Message/MessageToolbox.js @@ -23,6 +23,7 @@ export const MessageToolbox = ({ authenticatedUserId, userRoles, pinRoles, + editMessageRoles, handleOpenThread, handleEmojiClick, handlePinMessage, @@ -70,6 +71,11 @@ export const MessageToolbox = ({ }; const isAllowedToPin = userRoles.some((role) => pinRoles.has(role)); + const isAllowedToEditMessage = userRoles.some((role) => + editMessageRoles.has(role) + ) + ? true + : message.u._id === authenticatedUserId; const options = useMemo( () => ({ reply: { @@ -120,7 +126,7 @@ export const MessageToolbox = ({ id: 'edit', onClick: () => handleEditMessage(message), iconName: 'edit', - visible: message.u._id === authenticatedUserId, + visible: isAllowedToEditMessage, color: isEditing ? 'secondary' : 'default', ghost: !isEditing, }, From 0d7ff8d496326394a21191127b1f8579b209ec54 Mon Sep 17 00:00:00 2001 From: Smriti Doneria Date: Sun, 22 Dec 2024 14:38:04 +0530 Subject: [PATCH 3/6] fixed all markdown issues (#614) * fix mardown * fix conflicts * fix formatting issues * fixed lint issues * changes * prettier * fix quote * fixed * removed markdown from passed prop --------- Co-authored-by: Zishan Ahmad --- packages/react/src/views/ChatInput/ChatInput.js | 1 + .../react/src/views/Message/MessageToolbox.js | 4 ++-- .../src/views/QuoteMessage/QuoteMessage.js | 17 +++++++++-------- 3 files changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/react/src/views/ChatInput/ChatInput.js b/packages/react/src/views/ChatInput/ChatInput.js index 581cbf0d2..86b4b5082 100644 --- a/packages/react/src/views/ChatInput/ChatInput.js +++ b/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'); diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js index 61765c8dd..0ed468bd7 100644 --- a/packages/react/src/views/Message/MessageToolbox.js +++ b/packages/react/src/views/Message/MessageToolbox.js @@ -10,9 +10,9 @@ import { useTheme, } from '@embeddedchat/ui-elements'; import { EmojiPicker } from '../EmojiPicker'; -import { parseEmoji } from '../../lib/emoji'; import { getMessageToolboxStyles } from './Message.styles'; import SurfaceMenu from '../SurfaceMenu/SurfaceMenu'; +import { Markdown } from '../Markdown'; export const MessageToolbox = ({ className = '', @@ -249,7 +249,7 @@ export const MessageToolbox = ({ padding: '0 0.5rem 0.5rem', }} > - {parseEmoji(message.msg)} +