Add typing indicator and message status into the channel preview (#145)

App & SendbirdProvider
* Add props
  * isTypingIndicatorEnabledOnChannelList
  * isMessageReceiptStatusEnabledOnChannelList

Channel List
* Add props
  * isTypingIndicatorEnabled
  * isMessageReceiptStatusEnabled
* Add typing indicator into the Channel Preview component
* Add message status into the Channel Preview component

Author: HoonBaek

src/index.d.ts

@@ -71,12 +71,14 @@ interface SendBirdProviderProps {
   config?: SendBirdProviderConfig;
   stringSet?: Record<string, string>;
   colorSet?: Record<string, string>;
-  isMentionEnabled?: boolean;
   imageCompression?: {
     compressionRate?: number,
     resizingWidth?: number | string,
     resizingHeight?: number | string,
   };
+  isMentionEnabled?: boolean;
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
 }
 
 interface SendBirdStateConfig {
@@ -102,6 +104,8 @@ interface SendBirdStateConfig {
     resizingWidth?: number | string,
     resizingHeight?: number | string,
   };
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
 }
 export interface SdkStore {
   error: boolean;
@@ -262,6 +266,9 @@ interface AppProps {
   };
   replyType?: ReplyType;
   disableAutoSelect?: boolean;
+  isMentionEnabled?: boolean;
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
 }
 
 interface ApplicationUserListQuery {
@@ -309,6 +316,9 @@ export interface ChannelListProviderProps {
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode;
   disableUserProfile?: boolean;
   disableAutoSelect?: boolean;
+  typingChannels?: Array<Sendbird.GroupChannel>;
+  isTypingIndicatorEnabled?: boolean;
+  isMessageReceiptStatusEnabled?: boolean;
 }
 
 export interface ChannelListProviderInterface extends ChannelListProviderProps {
@@ -352,6 +362,7 @@ interface ChannelListHeaderInterface {
 interface ChannelPreviewInterface {
   channel: SendBird.GroupChannel;
   isActive?: boolean;
+  isTyping?: boolean;
   onClick: () => void;
   renderChannelAction: (props: { channel: SendBird.GroupChannel }) => React.ReactNode;
   tabIndex: number;

src/lib/Sendbird.jsx

@@ -42,6 +42,8 @@ export default function Sendbird(props) {
     imageCompression,
     useReaction,
     isMentionEnabled,
+    isTypingIndicatorEnabledOnChannelList,
+    isMessageReceiptStatusEnabledOnChannelList,
   } = props;
 
   const {
@@ -174,6 +176,8 @@ export default function Sendbird(props) {
             maxMentionCount: userMention?.maxMentionCount || 10,
             maxSuggestionCount: userMention?.maxSuggestionCount || 15,
           },
+          isTypingIndicatorEnabledOnChannelList,
+          isMessageReceiptStatusEnabledOnChannelList,
         },
       }}
     >
@@ -231,6 +235,8 @@ Sendbird.propTypes = {
       PropTypes.string,
     ]),
   }),
+  isTypingIndicatorEnabledOnChannelList: PropTypes.bool,
+  isMessageReceiptStatusEnabledOnChannelList: PropTypes.bool,
 };
 
 Sendbird.defaultProps = {
@@ -249,4 +255,6 @@ Sendbird.defaultProps = {
   imageCompression: {},
   useReaction: true,
   isMentionEnabled: false,
+  isTypingIndicatorEnabledOnChannelList: false,
+  isMessageReceiptStatusEnabledOnChannelList: false,
 };

src/lib/SendbirdState.tsx

@@ -52,6 +52,8 @@ interface SendBirdStateConfig {
     resizingWidth?: number | string,
     resizingHeight?: number | string,
   };
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
 }
 
 export interface SdkStore {

src/lib/types.ts

@@ -24,6 +24,8 @@ export interface SendBirdProviderProps {
     resizingWidth?: number | string,
     resizingHeight?: number | string,
   };
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
 }
 
 interface SendBirdStateConfig {
@@ -49,6 +51,8 @@ interface SendBirdStateConfig {
     resizingWidth?: number | string,
     resizingHeight?: number | string,
   };
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
 }
 export interface SdkStore {
   error: boolean;

src/smart-components/App/index.jsx

@@ -39,6 +39,8 @@ export default function App(props) {
     onProfileEditSuccess,
     imageCompression,
     disableAutoSelect,
+    isTypingIndicatorEnabledOnChannelList,
+    isMessageReceiptStatusEnabledOnChannelList,
   } = props;
   const [currentChannelUrl, setCurrentChannelUrl] = useState(null);
   const [showSettings, setShowSettings] = useState(false);
@@ -64,6 +66,8 @@ export default function App(props) {
       imageCompression={imageCompression}
       useReaction={useReaction}
       isMentionEnabled={isMentionEnabled}
+      isTypingIndicatorEnabledOnChannelList={isTypingIndicatorEnabledOnChannelList}
+      isMessageReceiptStatusEnabledOnChannelList={isMessageReceiptStatusEnabledOnChannelList}
     >
       <div className="sendbird-app__wrap">
         <div className="sendbird-app__channellist-wrap">
@@ -183,6 +187,8 @@ App.propTypes = {
   }),
   disableAutoSelect: PropTypes.bool,
   isMentionEnabled: PropTypes.bool,
+  isTypingIndicatorEnabledOnChannelList: PropTypes.bool,
+  isMessageReceiptStatusEnabledOnChannelList: PropTypes.bool,
 };
 
 App.defaultProps = {
@@ -206,4 +212,6 @@ App.defaultProps = {
   colorSet: null,
   imageCompression: {},
   disableAutoSelect: false,
+  isTypingIndicatorEnabledOnChannelList: false,
+  isMessageReceiptStatusEnabledOnChannelList: false,
 };

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

@@ -210,6 +210,9 @@ export const Korean = () => fitPageSize(
       CHANNEL__MESSAGE_INPUT__PLACE_HOLDER__DISABLED: '입력이 불가능 합니다',
       CHANNEL__MESSAGE_INPUT__PLACE_HOLDER__MUTED: '음소거 되었습니다',
     }}
+    isMentionEnabled
+    isTypingIndicatorEnabledOnChannelList
+    isMessageReceiptStatusEnabledOnChannelList
   />
 );
 
@@ -225,6 +228,8 @@ export const user1 = () => fitPageSize(
     queries={{}}
     replyType="QUOTE_REPLY"
     isMentionEnabled
+    isTypingIndicatorEnabledOnChannelList
+    isMessageReceiptStatusEnabledOnChannelList
   />
 );
 export const user2 = () => fitPageSize(
@@ -244,6 +249,8 @@ export const user2 = () => fitPageSize(
       resizingHeight: '100px',
     }}
     isMentionEnabled
+    isTypingIndicatorEnabledOnChannelList
+    isMessageReceiptStatusEnabledOnChannelList
   />
 );
 export const user3 = () => fitPageSize(
@@ -257,6 +264,8 @@ export const user3 = () => fitPageSize(
     profileUrl={addProfile}
     config={{ logLevel: 'all' }}
     replyType="QUOTE_REPLY"
+    isTypingIndicatorEnabledOnChannelList
+    isMessageReceiptStatusEnabledOnChannelList
   />
 );
 export const user4 = () => fitPageSize(

src/smart-components/App/types.ts

@@ -34,4 +34,6 @@ export default interface AppProps {
   };
   replyType?: ReplyType;
   disableAutoSelect?: boolean;
+  isTypingIndicatorEnabledOnChannelList?: boolean;
+  isMessageReceiptStatusEnabledOnChannelList?: boolean;
 }

src/smart-components/Channel/components/TypingIndicator.tsx

@@ -11,7 +11,7 @@ export interface TypingIndicatorTextProps {
   members: SendBird.Member[];
 }
 
-const TypingIndicatorText: React.FC<TypingIndicatorTextProps> = ({ members }: TypingIndicatorTextProps) => {
+export const TypingIndicatorText: React.FC<TypingIndicatorTextProps> = ({ members }: TypingIndicatorTextProps) => {
   const { stringSet } = useContext(LocalizationContext);
   if (!members || members.length === 0) {
     return '';

src/smart-components/ChannelList/components/ChannelListUI/index.tsx

@@ -57,6 +57,7 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
     currentChannel,
     channelListDispatcher,
     channelSource,
+    typingChannels,
   } = useChannelListContext();
 
   const state = useSendbirdStateContext();
@@ -195,6 +196,7 @@ const ChannelListUI: React.FC<ChannelListUIProps> = (props: ChannelListUIProps)
                       onClick={onClick}
                       channel={channel}
                       isActive={channel.url === currentChannel?.url}
+                      isTyping={typingChannels?.some(({ url }) => url === channel.url)}
                       renderChannelAction={(() => (
                         <ChannelPreviewAction
                           disabled={!isOnline}

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

@@ -67,6 +67,10 @@
         margin-left: 4px;
         margin-bottom: 4px;
         white-space: nowrap;
+        &.sendbird-message-status {
+          max-width: 74px;
+          justify-content: flex-end;
+        }
       }
     }