Fix: [v3] Fix for QA mention and verse (#155)

Fix: UI materials
* Change the front-weight of Subtitle2 from 600 to 500
* Modify mention badge position on the ChannelListItem component
* Change Info Icon size to 20px on the SuggestedMentionListItem component
Fix: Mention related stuff
* Modify the onMouseOver event on the SuggestedMentionList component
* Filter 'html' text when pasting text to the MessageInput component
* Hide and apply ellipsis for overflowing text on the SuggestedMentionListItem component
* Deactivate the MessageInput component when the current user is muted or the current channel is frozen
* Reset the mention states of the current channel when changing channel and closing the edit MessageInput component

Author: HoonBaek

scripts/index_d_ts

@@ -668,11 +668,11 @@ type SuggestedMentionListProps = {
 };
 
 type SuggestedUserMentionItemProps = {
-  member: SendBird.User;
+  member: SendBird.User | SendBird.Member;
   isFocused?: boolean;
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   onMouseOver?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  renderUserMentionItem?: (props: { user: SendBird.User }) => JSX.Element;
+  renderUserMentionItem?: (props: { user: SendBird.User | SendBird.Member }) => JSX.Element;
 };
 
 interface UnreadCountProps {

src/index.d.ts

@@ -706,6 +706,14 @@ interface RemoveMessageProps {
   message: EveryMessage;
 }
 
+interface SendbirdUIKitUIEvent<> {
+  event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>;
+}
+export interface MentionItemUIEvent extends SendbirdUIKitUIEvent {
+  member: SendBird.Member;
+  itemRef: React.RefObject<HTMLDivElement>;
+}
+
 declare module '@sendbird/uikit-react/Channel' {
   type Channel = React.FC<ChannelProps>;
   export default Channel;

src/smart-components/App/stories/index.stories.js

@@ -224,7 +224,12 @@ export const user1 = () => fitPageSize(
     profileUrl={addProfile}
     showSearchIcon
     allowProfileEdit
-    config={{ logLevel: 'all' }}
+    config={{
+      logLevel: 'all',
+      userMention: {
+        maxMentionCount: 2,
+      }
+    }}
     queries={{}}
     replyType="QUOTE_REPLY"
     isMentionEnabled
@@ -265,6 +270,7 @@ export const user3 = () => fitPageSize(
     profileUrl={addProfile}
     config={{ logLevel: 'all' }}
     replyType="QUOTE_REPLY"
+    isMentionEnabled
     isTypingIndicatorEnabledOnChannelList
     isMessageReceiptStatusEnabledOnChannelList
   />

src/smart-components/Channel/components/Message/index.tsx

@@ -240,7 +240,13 @@ const Message: React.FC<MessageUIProps> = (props: MessageUIProps) => {
             });
             setShowEdit(false);
           }}
-          onCancelEdit={() => { setShowEdit(false); }}
+          onCancelEdit={() => {
+            setMentionNickname('');
+            setMentionedUsers([]);
+            setMentionedUserIds([]);
+            setMentionSuggestedUsers([])
+            setShowEdit(false);
+          }}
           onUserMentioned={(user) => {
             if (selectedUser?.userId === user?.userId) {
               setSelectedUser(null);

src/smart-components/Channel/components/MessageInput/index.tsx

@@ -44,7 +44,22 @@ const MessageInputWrapper = (): JSX.Element => {
   const isOperator = utils.isOperator(channel);
   const { isBroadcast } = channel;
 
-  const displaySuggestedMentionList = (isMentionEnabled && mentionNickname.length > 0);
+  const displaySuggestedMentionList = isOnline
+    && isMentionEnabled
+    && mentionNickname.length > 0
+    && !utils.isDisabledBecauseFrozen(channel)
+    && !utils.isDisabledBecauseMuted(channel);
+
+  // Reset when channel changes
+  useEffect(() => {
+    setMentionNickname('');
+    setMentionedUsers([]);
+    setMentionedUserIds([]);
+    setSelectedUser(null);
+    setMentionSuggestedUsers([]);
+    setAbleMention(true);
+    setMessageInputEvent(null);
+  }, [channel?.url]);
 
   useEffect(() => {
     if (mentionedUsers?.length >= maxUserMentionCount) {

src/smart-components/Channel/components/SuggestedMentionList/SuggestedUserMentionItem.tsx

@@ -4,37 +4,47 @@ import Avatar from '../../../../ui/Avatar';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import SendBird from 'sendbird';
+import { MentionItemUIEvent } from '../../../..';
 
 interface SuggestedUserMentionItemProps {
-  member: SendBird.User;
+  member: SendBird.User | SendBird.Member;
   isFocused?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  onMouseOver?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  renderUserMentionItem?: (props: { user: SendBird.User }) => JSX.Element;
+  parentScrollRef?: React.RefObject<HTMLDivElement>;
+  onClick?: (props: MentionItemUIEvent) => void;
+  onMouseOver?: (props: MentionItemUIEvent) => void;
+  onMouseMove?: (props: MentionItemUIEvent) => void;
+  renderUserMentionItem?: (props: { user: SendBird.User | SendBird.Member }) => JSX.Element;
 }
 
 function SuggestedUserMentionItem(props: SuggestedUserMentionItemProps): JSX.Element {
   const {
     member,
     isFocused = false,
+    parentScrollRef,
     onClick,
     onMouseOver,
+    onMouseMove,
     renderUserMentionItem,
   } = props;
   const scrollRef = useRef(null);
   const { stringSet = {} } = useContext(LocalizationContext);
   useEffect(() => {
     if (isFocused) {
-      scrollRef?.current?.scrollIntoView({ block: 'center', inline: 'center' });
+      if (parentScrollRef?.current?.scrollTop >= scrollRef?.current?.offsetTop) {
+        scrollRef?.current?.scrollIntoView({ block: "start", inline: "nearest" });
+      } else if (parentScrollRef?.current?.scrollTop + parentScrollRef?.current?.clientHeight <= scrollRef?.current?.offsetTop) {
+        scrollRef?.current?.scrollIntoView({ block: "end", inline: "nearest" });
+      }
     }
   }, [isFocused]);
   const customMentionItem = useMemo(() => {
     if (renderUserMentionItem) {
       return (
         <div
           className="sendbird-mention-suggest-list__user-item"
-          onClick={onClick}
-          onMouseOver={onMouseOver}
+          onClick={(event) => onClick?.({ event, member: (member as SendBird.Member), itemRef: scrollRef })}
+          onMouseOver={(event) => onMouseOver?.({ event, member: (member as SendBird.Member), itemRef: scrollRef })}
+          onMouseMove={(event) => onMouseMove?.({ event, member: (member as SendBird.Member), itemRef: scrollRef })}
           key={member.nickname}
           ref={scrollRef}
         >
@@ -49,8 +59,9 @@ function SuggestedUserMentionItem(props: SuggestedUserMentionItemProps): JSX.Ele
   return (
     <div
       className={`sendbird-mention-suggest-list__user-item ${isFocused ? 'focused' : ''}`}
-      onClick={onClick}
-      onMouseOver={onMouseOver}
+      onClick={(event) => onClick?.({ event, member: (member as SendBird.Member), itemRef: scrollRef })}
+      onMouseOver={(event) => onMouseOver?.({ event, member: (member as SendBird.Member), itemRef: scrollRef })}
+      onMouseMove={(event) => onMouseMove?.({ event, member: (member as SendBird.Member), itemRef: scrollRef })}
       key={member.nickname}
       ref={scrollRef}
     >

src/smart-components/Channel/components/SuggestedMentionList/index.scss

@@ -21,12 +21,6 @@
     @include themed() {
       background-color: t(bg-0);
     }
-    &:hover {
-      cursor: pointer;
-      @include themed() {
-        background-color: t(bg-1);
-      }
-    }
     &.focused {
       @include themed() {
         background-color: t(bg-1);
@@ -41,11 +35,19 @@
       position: relative;
       display: inline-block;
       margin-left: 16px;
+      max-width: calc(100% - 250px);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .sendbird-mention-suggest-list__user-item__user-id {
       position: absolute;
       display: inline-block;
       right: 16px;
+      max-width: 180px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 

src/smart-components/Channel/components/SuggestedMentionList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 import SendBird from 'sendbird';
 import './index.scss';
 
@@ -43,12 +43,12 @@ function SuggestedMentionList(props: SuggestedMentionListProps): JSX.Element {
   const { logger } = config;
   const currentUserId = stores?.sdkStore?.sdk?.currentUser?.userId || '';
   const { currentGroupChannel } = useChannel();
+  const scrollRef = useRef(null);
   const { stringSet } = useContext(LocalizationContext);
   const [timer, setTimer] = useState(null);
   const [searchString, setSearchString] = useState('');
   const [lastSearchString, setLastSearchString] = useState('');
   const [currentUser, setCurrentUser] = useState<SendBird.User>(null);
-  const [mouseOverUser, setMouseOverUser] = useState<SendBird.User>(null);
   const [currentMemberList, setCurrentMemberList] = useState<Array<SendBird.Member>>([]);
 
   useEffect(() => {
@@ -88,7 +88,7 @@ function SuggestedMentionList(props: SuggestedMentionListProps): JSX.Element {
 
   /* Fetch member list */
   useEffect(() => {
-    if (!currentGroupChannel || !currentGroupChannel.createMemberListQuery || !ableAddMention) {
+    if (!currentGroupChannel || !currentGroupChannel.createMemberListQuery) {
       logger.warning('SuggestedMentionList: Creating member list query failed');
       return;
     }
@@ -117,26 +117,28 @@ function SuggestedMentionList(props: SuggestedMentionListProps): JSX.Element {
     });
   }, [currentGroupChannel?.url, searchString]);
 
+  if (!ableAddMention && currentMemberList.length === 0) {
+    return null;
+  }
+
   return (
     <div
       className="sendbird-mention-suggest-list"
-      onMouseLeave={() => {
-        if (mouseOverUser) {
-          setCurrentUser(mouseOverUser);
-        }
-      }}
+      key="sendbird-mention-suggest-list"
+      ref={scrollRef}
     >
       {
         ableAddMention && currentMemberList?.map((member) => (
           <SuggestedUserMentionItem
             key={member?.nickname}
             member={member}
             isFocused={member?.userId === currentUser?.userId}
-            onClick={() => {
+            parentScrollRef={scrollRef}
+            onClick={({ member }) => {
               onUserItemClick(member);
             }}
-            onMouseOver={() => {
-              setMouseOverUser(member);
+            onMouseOver={({ member }) => {
+              setCurrentUser(member);
             }}
             renderUserMentionItem={renderUserMentionItem}
           />
@@ -149,6 +151,8 @@ function SuggestedMentionList(props: SuggestedMentionListProps): JSX.Element {
               className="sendbird-mention-suggest-list__notice-item__icon"
               type={IconTypes.INFO}
               fillColor={IconColors.ON_BACKGROUND_2}
+              width="20px"
+              height="20px"
             />
             <Label
               className="sendbird-mention-suggest-list__notice-item__text"

src/smart-components/Channel/context/utils.js

@@ -5,6 +5,7 @@ import * as topics from '../../../lib/pubSub/topics';
 import {
   getSendingMessageStatus,
   getOutgoingMessageStates,
+  isReadMessage,
 } from '../../../utils';
 
 const MessageStatusType = getOutgoingMessageStates();
@@ -186,7 +187,7 @@ export const getNicknamesMapFromMembers = (members = []) => {
 
 export const getMessageCreatedAt = (message) => format(message.createdAt, 'p');
 
-export const isSameGroup = (message, comparingMessage) => {
+export const isSameGroup = (message, comparingMessage, currentChannel) => {
   if (!(message
     && comparingMessage
     && message?.messageType !== 'admin'
@@ -200,24 +201,25 @@ export const isSameGroup = (message, comparingMessage) => {
   )) {
     return false;
   }
-
   return (
     message?.sendingStatus === comparingMessage?.sendingStatus
     && message?.sender?.userId === comparingMessage?.sender?.userId
     && getMessageCreatedAt(message) === getMessageCreatedAt(comparingMessage)
+    && isReadMessage(currentChannel, message) === isReadMessage(currentChannel, comparingMessage)
   );
 };
 
 export const compareMessagesForGrouping = (
   prevMessage,
   currMessage,
   nextMessage,
+  currentChannel,
 ) => {
   const sendingStatus = currMessage?.sendingStatus || '';
   const isAcceptable = sendingStatus !== 'pending' && sendingStatus !== 'failed';
   return [
-    isSameGroup(prevMessage, currMessage) && isAcceptable,
-    isSameGroup(currMessage, nextMessage) && isAcceptable,
+    isSameGroup(prevMessage, currMessage, currentChannel) && isAcceptable,
+    isSameGroup(currMessage, nextMessage, currentChannel) && isAcceptable,
   ];
 };
 

src/smart-components/ChannelList/components/ChannelPreview/channel-preview.scss

@@ -91,6 +91,11 @@
         align-items: center;
         margin-left: 8px;
         margin-bottom: 12px;
+        .sendbird-channel-preview__content__lower__unread-message-count__mention {
+          display: inline-flex;
+          align-items: center;
+          margin-right: 4px;
+        }
       }
     }
   }