feat: add suggested replies (#825)

Addresses https://sendbird.atlassian.net/browse/AC-581 
The feature request is from AI chat bot. 

#### Scenarios 
If a trigger message(can be set from the dashboard) is sent to the
channel from a user, the predefined suggested reply options will be displayed.
Once the user clicks an option from the list, the option list will be gone and the message will be sent.

Author: AhyoungRyu

package.json

@@ -67,7 +67,7 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.9.14",
+    "@sendbird/chat": "^4.10.1",
     "@sendbird/uikit-tools": "0.0.1-alpha.40",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",

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

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useLayoutEffect,
 } from 'react';
-import type { FileMessage } from '@sendbird/chat/message';
+import type { FileMessage, UserMessage } from '@sendbird/chat/message';
 import format from 'date-fns/format';
 
 import useDidMountEffect from '../../../../utils/useDidMountEffect';
@@ -27,6 +27,7 @@ import { EveryMessage, RenderCustomSeparatorProps, RenderMessageProps } from '..
 import { useLocalization } from '../../../../lib/LocalizationContext';
 import { useHandleOnScrollCallback } from '../../../../hooks/useHandleOnScrollCallback';
 import { useDirtyGetMentions } from '../../../Message/hooks/useDirtyGetMentions';
+import SuggestedReplies from '../SuggestedReplies';
 
 type MessageUIProps = {
   message: EveryMessage;
@@ -91,6 +92,8 @@ const Message = ({
     onMessageHighlighted,
     onScrollCallback,
     setIsScrolled,
+    sendMessage,
+    localMessages,
   } = useChannelContext();
   const [showEdit, setShowEdit] = useState(false);
   const [showRemove, setShowRemove] = useState(false);
@@ -209,6 +212,8 @@ const Message = ({
     return null;
   }, [message, renderCustomSeparator]);
 
+  const suggestedReplies = message.extendedMessagePayload?.suggested_replies as string[] | undefined ?? [];
+
   if (renderedMessage) {
     return (
       <div
@@ -379,6 +384,13 @@ const Message = ({
           />
         )
       }
+      {/** Suggested Replies */}
+      {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')
+        && suggestedReplies.length > 0 && (
+          <SuggestedReplies replyOptions={suggestedReplies} onSendMessage={sendMessage} />
+      )}
       {/* Modal */}
       {
         showRemove && (

src/modules/Channel/components/SuggestedReplies/index.scss

@@ -0,0 +1,43 @@
+@import '../../../../styles/variables';
+
+.sendbird-suggested-replies {
+  @include themed() {
+    font-family: var(--sendbird-font-family-default);
+  }
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  column-gap: 10px;
+  row-gap: 8px;
+  margin-top: 16px;
+  flex-direction: column;
+}
+
+.sendbird-suggested-replies__option {
+  white-space: nowrap;
+  height: 32px;
+  font-size: 12px;
+  padding: 0 14px;
+  display: flex;
+  align-items: center;
+  border-radius: 18px;
+  cursor: pointer;
+  @include themed() {
+    color: t(primary--3-2);
+    border: 1px solid t(primary--3-2);
+    background-color: t(bg-0);
+  }
+  &:hover {
+    @include themed() {
+      background-color: t(bg-1);
+    }
+  }
+  &:active {
+    @include themed() {
+      background-color: t(primary--3-2);
+      color: t(bg-0);
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import './index.scss';
+import React, { useState } from 'react';
+
+interface Props {
+  replyOptions: string[];
+  onSendMessage: ({ message }: { message: string }) => void;
+}
+
+const SuggestedReplies = ({ replyOptions, onSendMessage }: Props) => {
+  const [replied, setReplied] = useState<boolean>(false);
+
+  const onClickReply = (
+    event: React.MouseEvent<HTMLDivElement>,
+    option: string,
+  ) => {
+    event.preventDefault();
+    onSendMessage({ message: option });
+    setReplied(true);
+  };
+
+  if (replied) {
+    return null;
+  }
+
+  return (
+    <div className="sendbird-suggested-replies">
+      {replyOptions.map((option: string, index: number) => {
+        return (
+          <div
+            className="sendbird-suggested-replies__option"
+            id={option}
+            key={index + option}
+            onClick={(e) => onClickReply(e, option)}
+          >
+            {option}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SuggestedReplies;

yarn.lock

@@ -2430,15 +2430,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sendbird/chat@npm:^4.9.14":
-  version: 4.10.0
-  resolution: "@sendbird/chat@npm:4.10.0"
+"@sendbird/chat@npm:^4.10.1":
+  version: 4.10.1
+  resolution: "@sendbird/chat@npm:4.10.1"
   peerDependencies:
     "@react-native-async-storage/async-storage": ^1.17.6
   peerDependenciesMeta:
     "@react-native-async-storage/async-storage":
       optional: true
-  checksum: 92c0cbb71bcba17800d24cad8c0bcbba8ff6fc89b3210e9902d47fe16e5cf187684c9313a885c1b55960f40f648e703c9b29befb222f03836c3a468906a8b0c0
+  checksum: 8e75a50a31557d5ac0d4d24918bdd80c778224cd22b96d6e794bb19ad62a1da454ad85951e461fec429fb0c5b71661755bcb522c2993a7da6f0f3eadfbb89ee6
   languageName: node
   linkType: hard
 
@@ -2459,7 +2459,7 @@ __metadata:
     "@rollup/plugin-node-resolve": ^7.1.3
     "@rollup/plugin-replace": ^2.4.2
     "@rollup/plugin-typescript": ^8.2.1
-    "@sendbird/chat": ^4.9.14
+    "@sendbird/chat": ^4.10.1
     "@sendbird/uikit-tools": 0.0.1-alpha.40
     "@storybook/addon-actions": ^6.5.10
     "@storybook/addon-docs": ^6.5.10