BA-2116 System messages #186
Conversation
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /packages/components/.eslintrc.js
WalkthroughThis pull request introduces a comprehensive implementation of system messages in the messaging module. The changes span multiple files across the components package, introducing a new Changes
Sequence DiagramsequenceDiagram
participant Client
participant MessagesGroup
participant SystemMessage
participant UserMessage
Client->>MessagesGroup: Render messages
MessagesGroup->>MessagesGroup: Check message type
alt System Message
MessagesGroup->>SystemMessage: Render system message
else User Message
MessagesGroup->>UserMessage: Render user message
end
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
packages/components/modules/messages/constants.ts (1)
5-10: Consider documenting planned message types.The PR objectives mention future system messages for member removal, group creation, etc. Consider adding these as comments to help track future additions to the
MESSAGE_TYPEconstant.export const MESSAGE_TYPE = { user: 'USER_MESSAGE', system: 'SYSTEM_GENERATED', + // TODO: Future message types: + // - Member removed + // - Member left + // - Group created + // - Group name/picture changed + // - Admin role assigned } as constpackages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx (1)
10-19: Add error handling and fallback states.While the implementation is clean, consider adding error boundaries and fallback states for robustness:
- Handle cases where content parsing fails
- Add a fallback message for null/undefined content
- Consider adding a loading state while fragment data is being fetched
const SystemMessage: FC<SystemMessageProps> = ({ messageRef }) => { const message = useFragment(MessageItemFragment, messageRef) const content = useParsedMessageContent(message) + if (!content) return null return ( <SystemMessageTypography color="grey.600" variant="caption"> - {content} + {content || 'System message'} </SystemMessageTypography> ) }packages/components/modules/messages/graphql/queries/MessagesList.ts (1)
27-27: Consider adding GraphQL enum for messageType.While adding the messageType field is correct, consider defining it as an enum in the GraphQL schema to ensure type safety and validation at the API level.
enum MessageType { USER SYSTEM } # Then use it in the fragment: messageType: MessageType!packages/components/modules/messages/utils.ts (1)
36-46: Consider stricter typing for system message content.The MessageItemCore type could be more specific for system messages to ensure proper content format validation at compile time.
type MessageItemCore = { readonly content: string | null | undefined readonly contentLinkedProfile: | { readonly id: string readonly name: string | null | undefined } | null | undefined - readonly messageType: MessageTypeOptions | '%future added value' | null | undefined + readonly messageType: MessageTypeOptions | null | undefined + // Add specific content format for system messages + readonly systemMessageFormat?: { + template: string + placeholders: string[] + } }packages/components/modules/messages/MessagesList/index.tsx (1)
52-55: Consider performance optimization for message filtering.The current implementation filters the messages array on every render. Consider memoizing the filtered user messages.
+ const userMessages = useMemo( + () => allMessages.filter((message) => message?.messageType === MESSAGE_TYPE.user), + [allMessages] + ); const getFirstUnreadMessageId = () => { if (!room?.unreadMessages?.count) return null - const userMessages = allMessages.filter((message) => message?.messageType === MESSAGE_TYPE.user) return userMessages.find((message, index) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 1b42a21 and 6190290bd4f9f77c537e47e0898b031ee2464fd9.
⛔ Files ignored due to path filters (14)
packages/components/__generated__/ChatRoomMessagesListPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomsQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/CreateChatRoomMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MembersListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MessageItemFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MessagesListFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ReadMessagesMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/RoomFragment.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/SendMessageMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/UpdateChatRoomMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/chatRoomsPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/useMessagesListSubscription.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/useRoomListSubscription.graphql.tsis excluded by!**/__generated__/**
📒 Files selected for processing (12)
packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx(2 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/styled.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/types.ts(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx(2 hunks)packages/components/modules/messages/MessagesList/index.tsx(2 hunks)packages/components/modules/messages/constants.ts(1 hunks)packages/components/modules/messages/graphql/queries/MessageItem.ts(1 hunks)packages/components/modules/messages/graphql/queries/MessagesList.ts(1 hunks)packages/components/modules/messages/graphql/queries/Room.ts(1 hunks)packages/components/modules/messages/utils.ts(2 hunks)packages/components/schema.graphql(7 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (11)
packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/types.ts (1)
1-5: LGTM! Clean and well-typed interface definition.The
SystemMessagePropsinterface is properly typed with the GraphQL fragment key, ensuring type safety when working with message data.packages/components/modules/messages/graphql/queries/MessageItem.ts (1)
7-10: Verify fields required for system messages.The fragment includes basic profile information needed for the "[Member Name] was added" message. Let's verify if any additional fields might be needed for future system message types.
Also applies to: 17-17
✅ Verification successful
Fields are correctly defined for system messages
The fragment includes all necessary fields (
contentLinkedProfilewithidandname, plusmessageType) required for system messages. This is confirmed by the schema definition and type system support forSYSTEM_GENERATEDmessage types.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any references to Message fields in the codebase # to ensure we haven't missed any fields needed for system messages # Look for Message type definition in schema echo "Checking GraphQL schema for Message type definition:" rg "type Message" -A 10 "schema.graphql" # Look for message-related field usage in components echo "Checking components for message field usage:" rg -t tsx -t ts "message\." "packages/components/modules/messages"Length of output: 404
Script:
#!/bin/bash # Find and check schema files echo "Searching for schema files:" fd "schema.*" --type f # Look for Message type definitions in TypeScript files echo -e "\nChecking TypeScript files for Message type definitions:" rg "type.*Message.*=|interface.*Message.*{" --type ts -A 5 # Look for message field usage in components with correct file type echo -e "\nChecking components for message field usage:" rg "message\." --type ts --type tsx "packages/components/modules/messages" -A 2Length of output: 665
Script:
#!/bin/bash # Check schema content echo "Checking schema content:" cat packages/components/schema.graphql | grep -A 10 "type Message" # Look for Message type definitions with simpler pattern echo -e "\nChecking for Message types:" rg "type Message|interface Message" --type ts # Check message-related components echo -e "\nChecking message components:" rg "message\." packages/components/modules/messages/**/*.ts* -A 2Length of output: 4509
packages/components/modules/messages/graphql/queries/Room.ts (1)
14-18: Verify unread message behavior for system messages.The fragment includes system message support in the room's last message. However, we should verify if system messages should affect the
unreadMessagescount andmarkedUnreadstatus.✅ Verification successful
System messages do affect unread message counts
Based on the codebase analysis:
- The unread message count is tracked without filtering by message type
- While system messages are handled differently in the UI, they are included in the room's message count and unread status
- No explicit filtering of system messages exists in the unread message calculations
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for unread message handling logic # Look for unread message related code echo "Checking unread message handling:" rg -t tsx -t ts "unreadMessages|markedUnread" "packages/components/modules/messages" # Look for message type checks in unread logic echo "Checking message type usage in unread logic:" ast-grep --pattern 'if ($cond) { $$$ unreadMessages $$$ }'Length of output: 355
Script:
#!/bin/bash # Search for message types and unread handling # Look for message type definitions echo "Checking message type definitions:" rg -t ts -t typescript "enum.*MessageType|type.*MessageType|MessageType.*=" packages/components/modules/messages # Look for unread message handling with correct extension echo "Checking unread message handling:" rg -t ts -t typescript "unreadMessages|markedUnread" packages/components/modules/messages # Look for message type checks in unread calculations echo "Checking message type in unread calculations:" rg -t ts -t typescript "messageType.*unread|unread.*messageType" packages/components/modules/messagesLength of output: 672
Script:
#!/bin/bash # Look for message type definitions and unread handling echo "Checking message types and unread handling:" rg "MessageType|messageType" packages/components/modules/messages echo "Checking unread message handling:" rg "unreadMessages|markedUnread" packages/components/modules/messages # Check GraphQL fragments and queries echo "Checking GraphQL definitions:" fd . packages/components/modules/messages/graphql -e graphql -x cat {}Length of output: 4354
packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/styled.tsx (1)
3-12: LGTM! Well-designed system message styling.The styling effectively differentiates system messages from regular chat bubbles while maintaining visual harmony. The use of theme spacing and colors ensures consistency with the app's design system.
packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx (2)
10-12: LGTM! Clean import organization.The imports are well-organized, separating the new message type constant and SystemMessage component.
129-169: Verify error handling for undefined message type.The conditional rendering looks good, but there's no explicit handling for undefined message types. This could lead to runtime errors if the message type is not set.
Consider adding a default fallback:
- {message.messageType === MESSAGE_TYPE.system ? ( + {message?.messageType === MESSAGE_TYPE.system ? (Also, run this script to verify message type handling across the codebase:
packages/components/modules/messages/ChatRoomsList/ChatRoomItem/index.tsx (1)
51-51: LGTM! Enhanced message content parsing.Good use of the new
useParsedMessageContenthook to handle different message types consistently.packages/components/schema.graphql (4)
181-181: LGTM! Well-defined participant roles.The ChatRoomParticipantRoles enum clearly defines the possible roles (MEMBER, ADMIN) for chat room participants.
Also applies to: 205-212
629-632: LGTM! Enhanced message structure.Good addition of
contentLinkedProfileandmessageTypefields to support system messages while maintaining backward compatibility.
661-665: LGTM! Clear message type enumeration.The MessageType enum clearly distinguishes between user messages and system-generated messages.
286-288: LGTM! Sensible default values.Good practice setting default values for optional fields in ChatRoomUpdateInput.
packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx (1)
83-94: 🛠️ Refactor suggestionExtract message type rendering logic to a separate function.
As suggested in previous reviews, the message type switching logic should be extracted to improve maintainability, especially since more message types might be added in the future.
+ const renderMessage = useCallback(() => { + switch (message.messageType) { + case MESSAGE_TYPE.system: + return <SystemMessage messageRef={message} {...SystemMessageProps} /> + default: + return ( + <UserMessage + allMessages={allMessages} + allMessagesLastIndex={allMessagesLastIndex} + message={message} + messageIndex={messageIndex} + isGroup={isGroup} + {...UserMessageProps} + /> + ) + } + }, [message, allMessages, allMessagesLastIndex, messageIndex, isGroup, SystemMessageProps, UserMessageProps]) return ( <Box display="flex" flexDirection="column" sx={{ paddingTop: 1 / 2, paddingRight: 2 }}> {renderUnreadMessagesDivider(messageIndex)} {renderDateOnTopOfMessagesGroup(messageIndex)} - {message.messageType === MESSAGE_TYPE.system ? ( - <SystemMessage messageRef={message} {...SystemMessageProps} /> - ) : ( - <UserMessage - allMessages={allMessages} - allMessagesLastIndex={allMessagesLastIndex} - message={message} - messageIndex={messageIndex} - isGroup={isGroup} - {...UserMessageProps} - /> - )} + {renderMessage()} </Box> )
🧹 Nitpick comments (3)
packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/index.tsx (3)
33-37: Consider memoizing DateTime calculations.The DateTime diff calculation is performed on every render. Consider memoizing this operation using
useMemosince it depends only on message timestamps.- const { minutes: dateDiff } = DateTime.fromISO(nextMessage?.created).diff( - DateTime.fromISO(currentMessage?.created), - 'minutes', - ) + const dateDiff = useMemo(() => { + return DateTime.fromISO(nextMessage?.created).diff( + DateTime.fromISO(currentMessage?.created), + 'minutes', + ).minutes + }, [nextMessage?.created, currentMessage?.created])
48-59: Extract message grouping logic to a separate hook.The message grouping logic is complex and could be reused. Consider extracting it to a custom hook like
useIsFirstGroupedMessage.const useIsFirstGroupedMessage = ( allMessages: MessageNode[], messageIndex: number, allMessagesLastIndex: number ) => { return useMemo(() => { const currentMessage = allMessages?.[messageIndex] const previousMessage = allMessages?.[messageIndex + 1] const isPreviousMessageFromOtherParticipant = previousMessage?.profile?.id !== currentMessage?.profile?.id const roomHasOnlyOneMessage = allMessagesLastIndex === 0 return isPreviousMessageFromOtherParticipant || roomHasOnlyOneMessage }, [allMessages, allMessagesLastIndex, messageIndex]) }
73-82: Extract magic numbers to constants.The padding and avatar dimensions should be extracted to constants or theme variables for consistency.
+const AVATAR_DIMENSIONS = 32 +const AVATAR_PADDING_RIGHT = '12px' // ... - <Box paddingRight="12px"> + <Box paddingRight={AVATAR_PADDING_RIGHT}> <AvatarWithPlaceholder className="self-start justify-self-center" - width={32} - height={32} + width={AVATAR_DIMENSIONS} + height={AVATAR_DIMENSIONS} src={message?.profile?.image?.url} sx={{ border: 'none' }} /> </Box>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 93b3445e155db64bef85d134400b3a3519376749 and 2832767a50e3e75b08114da4c26ac1b4fdac6e31.
📒 Files selected for processing (8)
packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/styled.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/MessageItem/index.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/MessageItem/types.ts(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/index.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/types.ts(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx(3 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/types.ts(2 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/MessageItem/types.ts
- packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/MessageItem/index.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/styled.tsx
- packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx
🔇 Additional comments (2)
packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/types.ts (1)
6-14: LGTM! Well-structured interface definition.The
UserMessagePropsinterface is well-designed with clear type definitions and appropriate optional properties, allowing for flexible implementation and component injection.packages/components/modules/messages/MessagesList/MessagesGroup/types.ts (1)
15-18: LGTM! Good separation of message type components.The interface changes effectively support the system message feature by cleanly separating system and user message components.
tsl-ps2
force-pushed
the
BA-2116-group-entry-frontend-packages
branch
from
2832767 to
8a15b14
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx (1)
Line range hint
14-94: Consider splitting MessagesGroup into smaller components.The component has multiple responsibilities (date formatting, unread messages, message rendering). Consider splitting these into separate components for better maintainability:
- DateGroup
- UnreadMessagesDivider
- MessageRenderer
Would you like me to provide an example of how to split this component?
packages/components/CHANGELOG.md (1)
7-7: Enhance the changelog entry to be more descriptive.The current entry "Implement system messages" is too vague. Consider expanding it to better document the specific changes:
-- Implement system messages +- Implement system messages for group chats: + - Add SystemMessage component to display when new members are added + - Introduce SystemMessageTypography styled component for consistent stylingThis helps other developers understand:
- The specific feature context (group chats)
- The components added (SystemMessage, SystemMessageTypography)
- The current scope (new member notifications)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📥 Commits
Reviewing files that changed from the base of the PR and between 2832767a50e3e75b08114da4c26ac1b4fdac6e31 and 8a15b14.
⛔ Files ignored due to path filters (4)
packages/components/__generated__/ChatRoomMessagesListPaginationQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/ChatRoomQuery.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MessageUpdateMutation.graphql.tsis excluded by!**/__generated__/**packages/components/__generated__/MessagesListFragment.graphql.tsis excluded by!**/__generated__/**
📒 Files selected for processing (15)
packages/components/CHANGELOG.md(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/styled.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/types.ts(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/MessageItem/index.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/MessageItem/types.ts(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/index.tsx(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/types.ts(1 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx(3 hunks)packages/components/modules/messages/MessagesList/MessagesGroup/types.ts(2 hunks)packages/components/modules/messages/MessagesList/index.tsx(2 hunks)packages/components/modules/messages/constants.ts(1 hunks)packages/components/modules/messages/graphql/fragments/MessagesList.ts(1 hunks)packages/components/package.json(1 hunks)packages/components/schema.graphql(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/components/package.json
🚧 Files skipped from review as they are similar to previous changes (9)
- packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/types.ts
- packages/components/modules/messages/constants.ts
- packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/MessageItem/types.ts
- packages/components/modules/messages/MessagesList/index.tsx
- packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/types.ts
- packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/index.tsx
- packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/styled.tsx
- packages/components/modules/messages/MessagesList/MessagesGroup/UserMessage/MessageItem/index.tsx
- packages/components/schema.graphql
🧰 Additional context used
🪛 GitHub Check: Lint
packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx
[failure] 5-5:
Missing file extension for "../../../graphql/queries/MessageItem"
🪛 GitHub Actions: Main Workflow
packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx
[error] 5-5: Missing file extension for '../../../graphql/queries/MessageItem'
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
packages/components/modules/messages/MessagesList/MessagesGroup/types.ts (1)
15-18: LGTM! Good type safety implementation.The separation of SystemMessage and UserMessage types with Partial props provides good flexibility and type safety.
packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx (1)
9-17: LGTM! Clean implementation of SystemMessage component.The component is well-structured and uses the appropriate hooks for data fetching.
packages/components/modules/messages/MessagesList/MessagesGroup/index.tsx (1)
83-94: Extract message rendering logic into a separate function.As mentioned in the previous review, extracting the ternary into a separate function would improve maintainability, especially when adding more message types in the future.
+ const renderMessage = useCallback(() => { + if (message.messageType === MESSAGE_TYPE.system) { + return <SystemMessage messageRef={message} {...SystemMessageProps} /> + } + return ( + <UserMessage + allMessages={allMessages} + allMessagesLastIndex={allMessagesLastIndex} + message={message} + messageIndex={messageIndex} + isGroup={isGroup} + {...UserMessageProps} + /> + ) + }, [message, SystemMessageProps, UserMessageProps, allMessages, allMessagesLastIndex, messageIndex, isGroup]) + return ( <Box display="flex" flexDirection="column" sx={{ paddingTop: 1 / 2, paddingRight: 2 }}> {renderUnreadMessagesDivider(messageIndex)} {renderDateOnTopOfMessagesGroup(messageIndex)} - {message.messageType === MESSAGE_TYPE.system ? ( - <SystemMessage messageRef={message} {...SystemMessageProps} /> - ) : ( - <UserMessage - allMessages={allMessages} - allMessagesLastIndex={allMessagesLastIndex} - message={message} - messageIndex={messageIndex} - isGroup={isGroup} - {...UserMessageProps} - /> - )} + {renderMessage()} </Box> )
packages/components/modules/messages/MessagesList/MessagesGroup/SystemMessage/index.tsx
Outdated
Show resolved
Hide resolved
|
This implements system messages for creating a group chat. (The story below is slightly different: it asks for creating such messages when someone is added to a group. However, since this functionality does not exist yet, and all messages are kind of equivalent, this PR introduces them for creating a group chat.)
Description
As a user, on the BaseApp Messages,I would like to See a message when a new member has joined the group, In order to be aware of any changes to the group membership.
Acceptance Criteria
Business Rules
Given I am a user in a group chat, when an admin has added a new member to the group, then I should see a message communicating that "[Member Name] was added".
The user should be able to distinguish from the conversation bubbles and this system message
The system-generated message must adhere to the chronological order of the chat history.
All the members in the chat group should see this message, including the person that was added.
Notes
Next story make it about the other system messages:
Removed a member
Left the group
Create the group chat
Edited name
Edited picture
Make someone an admin
Summary by CodeRabbit
New Features
Improvements
Technical Updates