feat: Apply lastMessage suggestedReplies disable chat input flag (#957)

Fixes: [AC-1106](https://sendbird.atlassian.net/browse/AC-1106)

### Changelogs
- Added `enableSuggestedReplies` global option
  - How to use?
  ```tsx
  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
// Below turns on the suggested replies feature. Default value is false.
        enableSuggestedReplies: true,
      }
    }}
  />
  ```
- `MessageInput` is now being disabled if
`channel.lastMessage.extendedMessagePayload['disable_chat_input']` is
true

[AC-1106]:
https://sendbird.atlassian.net/browse/AC-1106?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Hyungu Kang | Airen <[email protected]>

Author: chohongm

package.json

@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@sendbird/chat": "^4.10.8",
-    "@sendbird/uikit-tools": "0.0.1-alpha.58",
+    "@sendbird/uikit-tools": "0.0.1-alpha.61",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "dompurify": "^3.0.1"

src/lib/Sendbird.tsx

@@ -383,6 +383,7 @@ const SendbirdSDK = ({
             threadReplySelectType: getCaseResolvedThreadReplySelectType(configs.groupChannel.channel.threadReplySelectType).lowerCase,
             typingIndicatorTypes: configs.groupChannel.channel.typingIndicatorTypes,
             enableFeedback: configs.groupChannel.channel.enableFeedback,
+            enableSuggestedReplies: configs.groupChannel.channel.enableSuggestedReplies,
           },
           openChannel: {
             enableOgtag:

src/lib/types.ts

@@ -105,6 +105,7 @@ export interface SendBirdStateConfig {
     threadReplySelectType: SBUConfig['groupChannel']['channel']['threadReplySelectType'];
     typingIndicatorTypes: SBUConfig['groupChannel']['channel']['typingIndicatorTypes'];
     enableFeedback: SBUConfig['groupChannel']['channel']['enableFeedback'];
+    enableSuggestedReplies: SBUConfig['groupChannel']['channel']['enableSuggestedReplies'];
   },
   openChannel: {
     enableOgtag: SBUConfig['openChannel']['channel']['enableOgtag'];

src/lib/utils/uikitConfigMapper.ts

@@ -36,6 +36,7 @@ export function uikitConfigMapper({
       },
       typingIndicatorTypes: uikitOptions.groupChannel?.typingIndicatorTypes,
       enableFeedback: uikitOptions.groupChannel?.enableFeedback,
+      enableSuggestedReplies: uikitOptions.groupChannel?.enableSuggestedReplies,
     },
     groupChannelList: {
       enableTypingIndicator: uikitOptions.groupChannelList?.enableTypingIndicator ?? isTypingIndicatorEnabledOnChannelList,

src/modules/App/stories/integrated.stories.js

@@ -351,6 +351,7 @@ export const GroupChannel = () => {
                     // enableTypingIndicator: false,
                     typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
                     enableFeedback: true, // This enables feedback message feature.
+                    enableSuggestedReplies: true, // This enables suggested replies feature.
                   }
                 }}
                 imageCompression={{ compressionRate: sampleOptions.imageCompression ? 0.7 : 1 }}

src/modules/Channel/components/ChannelUI/index.tsx

@@ -44,7 +44,10 @@ const ChannelUI = (props: ChannelUIProps) => {
       isInvalid={isInvalid}
       renderChannelHeader={(props) => (<ChannelHeader {...props} />)}
       renderMessageList={(props) => (<MessageList {...props} />)}
-      renderMessageInput={() => (<MessageInputWrapper {...props} />)}
+      renderMessageInput={() => (
+        props.renderMessageInput?.()
+        ?? <MessageInputWrapper {...props} />
+      )}
     />
   );
 };

src/modules/Channel/components/Message/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { UserMessage } from '@sendbird/chat/message';
 
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useChannelContext } from '../../context/ChannelProvider';
@@ -49,9 +48,10 @@ const Message = (props: MessageProps): React.ReactElement => {
         !initialized || isDisabledBecauseFrozen(currentGroupChannel) || isDisabledBecauseMuted(currentGroupChannel) || !config.isOnline
       }
       shouldRenderSuggestedReplies={
-        message.messageId === currentGroupChannel?.lastMessage?.messageId
+        config?.groupChannel?.enableSuggestedReplies
+        && message.messageId === currentGroupChannel?.lastMessage?.messageId
         // the options should appear only when there's no failed or pending messages
-        && localMessages.every((message) => (message as UserMessage).sendingStatus === 'succeeded')
+        && localMessages?.length === 0
         && getSuggestedReplies(message).length > 0
       }
       isReactionEnabled={isReactionEnabled}

src/modules/Channel/components/MessageInputWrapper/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { FileMessageCreateParams } from '@sendbird/chat/message';
 
-import type { SendableMessageType } from '../../../../utils';
+import { getSuggestedReplies, SendableMessageType } from '../../../../utils';
 import MessageInputWrapperView from '../../../GroupChannel/components/MessageInputWrapper/MessageInputWrapperView';
 import { useChannelContext } from '../../context/ChannelProvider';
+import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 
 export interface MessageInputWrapperProps {
   value?: string;
@@ -15,18 +16,28 @@ export interface MessageInputWrapperProps {
 }
 
 export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
+  const { config } = useSendbirdStateContext();
   const context = useChannelContext();
   const {
     currentGroupChannel,
+    localMessages,
     sendMessage,
     sendFileMessage,
     sendVoiceMessage,
     sendMultipleFilesMessage,
   } = context;
 
+  const lastMessage = currentGroupChannel?.lastMessage;
+  const isLastMessageSuggestedRepliesEnabled = config?.groupChannel?.enableSuggestedReplies
+    && getSuggestedReplies(lastMessage).length > 0
+    && localMessages?.length === 0;
+  const disableMessageInput = props.disabled
+    || isLastMessageSuggestedRepliesEnabled && !!lastMessage.extendedMessagePayload?.['disable_chat_input'];
+
   return (
     <MessageInputWrapperView
       {...props}
+      disabled={disableMessageInput}
       {...context}
       currentChannel={currentGroupChannel}
       quoteMessage={context.quoteMessage}

src/modules/GroupChannel/components/GroupChannelUI/index.tsx

@@ -7,6 +7,7 @@ import { RenderCustomSeparatorProps, RenderMessageParamsType } from '../../../..
 import { useGroupChannelContext } from '../../context/GroupChannelProvider';
 import { GroupChannelUIView } from './GroupChannelUIView';
 import type { MessageContentProps } from '../../../../ui/MessageContent';
+import MessageInputWrapper from '../MessageInputWrapper';
 
 export interface GroupChannelUIProps {
   renderPlaceholderLoader?: () => React.ReactElement;
@@ -40,6 +41,10 @@ export const GroupChannelUI = (props: GroupChannelUIProps) => {
       requestedChannelUrl={channelUrl}
       loading={loading}
       isInvalid={channelUrl && !currentChannel}
+      renderMessageInput={() => (
+        props.renderMessageInput?.()
+        ?? <MessageInputWrapper {...props} />
+      )}
     />
   );
 };

src/modules/GroupChannel/components/Message/index.tsx

@@ -38,6 +38,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
   const initialized = !loading && Boolean(currentChannel);
 
   const shouldRenderSuggestedReplies = useIIFE(() => {
+    if (!config?.groupChannel?.enableSuggestedReplies) return false;
     if (message.messageId !== currentChannel?.lastMessage?.messageId) return false;
     if (getSuggestedReplies(message).length === 0) return false;
     const lastMessage = messages[messages.length - 1];