Added renderSuggestedReplies in Message module (#977)

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

### Changelogs
* Added `showSuggestedRepliesFor` global option
  * How to use?
  ```tsx
  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
        // Below setting always shows `SuggestedReplies` component of a message. Default value is 'last_message_only'.
        showSuggestedRepliesFor: 'always',
      }
    }}
  />
  ```
* Added `renderSuggestedReplies` in `Message` module
  * How to use?
  ```tsx
  <Channel
    renderSuggestedReplies={(suggestedRepliesProps) => {
      const { replyOptions, onSendMessage, message } = suggestedRepliesProps;
      return <CustomSuggestedReplies options={replyOptions} />;
    }}
  />
  ```

### Design Doc

https://sendbird.atlassian.net/wiki/spaces/SDK/pages/2262860027/React+Design+Doc

### Customer Requirements Doc

https://sendbird.atlassian.net/wiki/spaces/SDK/pages/2262860027/React+Design+Doc

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

Author: chohongm

package.json

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

src/lib/Sendbird.tsx

@@ -386,6 +386,7 @@ const SendbirdSDK = ({
             typingIndicatorTypes: configs.groupChannel.channel.typingIndicatorTypes,
             enableFeedback: configs.groupChannel.channel.enableFeedback,
             enableSuggestedReplies: configs.groupChannel.channel.enableSuggestedReplies,
+            showSuggestedRepliesFor: configs.groupChannel.channel.showSuggestedRepliesFor,
           },
           openChannel: {
             enableOgtag:

src/lib/types.ts

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

src/lib/utils/uikitConfigMapper.ts

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

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

@@ -352,6 +352,7 @@ export const GroupChannel = () => {
                     typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
                     enableFeedback: true, // This enables feedback message feature.
                     enableSuggestedReplies: true, // This enables suggested replies feature.
+                    showSuggestedRepliesFor: 'all_messages', // This enables suggested replies should be displayed for all messages but not just the last message.
                   }
                 }}
                 imageCompression={{ compressionRate: sampleOptions.imageCompression ? 0.7 : 1 }}

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

@@ -49,7 +49,11 @@ const Message = (props: MessageProps): React.ReactElement => {
       }
       shouldRenderSuggestedReplies={
         config?.groupChannel?.enableSuggestedReplies
-        && message.messageId === currentGroupChannel?.lastMessage?.messageId
+        && (
+          config?.groupChannel?.showSuggestedRepliesFor === 'all_messages'
+            ? true
+            : message.messageId === currentGroupChannel?.lastMessage?.messageId
+        )
         // the options should appear only when there's no failed or pending messages
         && localMessages?.length === 0
         && getSuggestedReplies(message).length > 0

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

@@ -37,6 +37,7 @@ export const MessageList = ({
   className = '',
   renderMessage,
   renderMessageContent,
+  renderSuggestedReplies,
   renderCustomSeparator,
   renderPlaceholderLoader = () => <PlaceHolder type={PlaceHolderTypes.LOADING} />,
   renderPlaceholderEmpty = () => <PlaceHolder className="sendbird-conversation__no-messages" type={PlaceHolderTypes.NO_MESSAGES} />,
@@ -202,6 +203,7 @@ export const MessageList = ({
                     chainTop={chainTop}
                     chainBottom={chainBottom}
                     renderMessageContent={renderMessageContent}
+                    renderSuggestedReplies={renderSuggestedReplies}
                     renderCustomSeparator={renderCustomSeparator}
                     // backward compatibility
                     renderMessage={renderMessage}
@@ -227,6 +229,7 @@ export const MessageList = ({
                     chainTop={chainTop}
                     chainBottom={chainBottom}
                     renderMessageContent={renderMessageContent}
+                    renderSuggestedReplies={renderSuggestedReplies}
                     renderCustomSeparator={renderCustomSeparator}
                     // backward compatibility
                     renderMessage={renderMessage}

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

@@ -12,6 +12,7 @@ import type { RenderCustomSeparatorProps, RenderMessageParamsType } from '../../
 import type { GroupChannelHeaderProps } from '../GroupChannelHeader';
 import type { GroupChannelMessageListProps } from '../MessageList';
 import type { MessageContentProps } from '../../../../ui/MessageContent';
+import { SuggestedRepliesProps } from '../SuggestedReplies';
 
 export interface GroupChannelUIBasicProps {
   // Components
@@ -50,6 +51,10 @@ export interface GroupChannelUIBasicProps {
    * A function that customizes the rendering of the content portion of each message component.
    */
   renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of the suggested replies of each message component.
+   */
+  renderSuggestedReplies?: (props: SuggestedRepliesProps) => React.ReactElement;
   /**
    * A function that customizes the rendering of a separator component between messages.
    */

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

@@ -18,7 +18,7 @@ import MessageInput from '../../../../ui/MessageInput';
 import { MessageInputKeys } from '../../../../ui/MessageInput/const';
 import MessageContent, { MessageContentProps } from '../../../../ui/MessageContent';
 
-import SuggestedReplies from '../SuggestedReplies';
+import SuggestedReplies, { SuggestedRepliesProps } from '../SuggestedReplies';
 import SuggestedMentionListView from '../SuggestedMentionList/SuggestedMentionListView';
 
 export interface MessageProps {
@@ -36,6 +36,10 @@ export interface MessageProps {
    * A function that customizes the rendering of the content portion of message component.
    */
   renderMessageContent?: (props: MessageContentProps) => React.ReactElement;
+  /**
+   * A function that customizes the rendering of suggested replies component of messages.
+   */
+  renderSuggestedReplies?: (props: SuggestedRepliesProps) => React.ReactElement;
   /**
    * A function that customizes the rendering of a separator between messages.
    */
@@ -96,6 +100,9 @@ const MessageView = (props: MessageViewProps) => {
     renderMessage,
     children,
     renderMessageContent = (props) => <MessageContent {...props} />,
+    renderSuggestedReplies = (props) => (
+      <SuggestedReplies {...props} />
+    ),
     renderCustomSeparator,
     renderEditInput,
     hasSeparator,
@@ -283,9 +290,13 @@ const MessageView = (props: MessageViewProps) => {
           onQuoteMessageClick: onQuoteMessageClick,
           onMessageHeightChange: handleScroll,
         })}
+        { /* Suggested Replies */ }
         {
-          /** Suggested Replies */
-          shouldRenderSuggestedReplies && <SuggestedReplies replyOptions={getSuggestedReplies(message)} onSendMessage={sendUserMessage} />
+          shouldRenderSuggestedReplies && renderSuggestedReplies({
+            replyOptions: getSuggestedReplies(message),
+            onSendMessage: sendUserMessage,
+            message,
+          })
         }
         {/* Modal */}
         {showRemove && renderRemoveMessageModal({ message, onCancel: () => setShowRemove(false) })}

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

@@ -37,9 +37,15 @@ export const Message = (props: MessageProps): React.ReactElement => {
   const { message } = props;
   const initialized = !loading && Boolean(currentChannel);
 
+  const groupChannelConfig = config?.groupChannel;
   const shouldRenderSuggestedReplies = useIIFE(() => {
-    if (!config?.groupChannel?.enableSuggestedReplies) return false;
-    if (message.messageId !== currentChannel?.lastMessage?.messageId) return false;
+    if (!groupChannelConfig) return false;
+    const { enableSuggestedReplies, showSuggestedRepliesFor } = groupChannelConfig;
+    if (!enableSuggestedReplies) return false;
+    if (
+      (!showSuggestedRepliesFor || showSuggestedRepliesFor === 'last_message_only')
+      && message.messageId === currentChannel?.lastMessage?.messageId
+    ) return false;
     if (getSuggestedReplies(message).length === 0) return false;
     const lastMessage = messages[messages.length - 1];
     if (lastMessage && isSendableMessage(lastMessage) && lastMessage.sendingStatus !== 'succeeded') return false;