feat: Support form message (#1168)

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

### Test sheet

https://docs.google.com/spreadsheets/d/1TBjj8SBnxdV0dy65PEshUUGq-2HShFFQmkS3184cVj4/edit?gid=0#gid=0

### Changelogs
UIKit now supports form message! `message` with `messageForm` will be
displayed as form message.

### Features:
* Added `enableFormTypeMessage` global option
  * How to use?
  ```tsx
  <App
    appId={appId}
    userId={userId}
    uikitOptions={{
      groupChannel: {
// Below turns on the form message feature. Default value is false.
        enableFormTypeMessage: true,
      }
    }}
  />
  ```
* `MessageInput` is now being disabled if a channel has a form message
that is not submitted and its
`extendedMessagePayload['disable_chat_input']` value is true
* Added `FormMessageItemBody`, and `FormInput`

### Sample

https://deploy-preview-1168--sendbird-uikit-react.netlify.app/group_channel


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

---------

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

Author: 3 people

apps/testing/src/utils/paramsBuilder.ts

@@ -6,6 +6,8 @@ export interface InitialParams {
   userId?: string;
   nickname?: string;
   accessToken?: string;
+  customApiHost?: string;
+  customWebSocketHost?: string;
 }
 
 interface ParamsAsProps {
@@ -26,6 +28,8 @@ export const useConfigParams = (initParams: InitialParams): ParamsAsProps => {
     userId: searchParams.get('userId') || initParams.userId,
     nickname: searchParams.get('nickname') || initParams.nickname || initParams.userId,
     accessToken: searchParams.get('accessToken') || initParams.accessToken,
+    customApiHost: searchParams.get('customApiHost') || initParams.customApiHost,
+    customWebSocketHost: searchParams.get('customWebSocketHost') || initParams.customWebSocketHost,
     allowProfileEdit: parseValue(searchParams.get('enableProfileEdit')) ?? true,
     isMultipleFilesMessageEnabled: parseValue(searchParams.get('enableMultipleFilesMessage')) ?? true,
     enableLegacyChannelModules: parseValue(searchParams.get('enableLegacyChannelModules')) ?? false,
@@ -97,6 +101,7 @@ export const paramKeys = [
   'groupChannel_enableSuggestedReplies',
   'groupChannel_showSuggestedRepliesFor',
   'groupChannel_enableMarkdownForUserMessage',
+  'groupChannel_enableFormTypeMessage',
   'groupChannelList_enableTypingIndicator',
   'groupChannelList_enableMessageReceiptStatus',
   'groupChannelSettings_enableMessageSearch',

package.json

@@ -69,9 +69,9 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.13.0",
-    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.76",
-    "@sendbird/uikit-tools": "0.0.1-alpha.76",
+    "@sendbird/chat": "^4.14.2",
+    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.79",
+    "@sendbird/uikit-tools": "0.0.1-alpha.79",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "dompurify": "^3.0.1"

src/lib/Sendbird.tsx

@@ -387,6 +387,7 @@ const SendbirdSDK = ({
             showSuggestedRepliesFor: configs.groupChannel.channel.showSuggestedRepliesFor,
             suggestedRepliesDirection: configs.groupChannel.channel.suggestedRepliesDirection,
             enableMarkdownForUserMessage: configs.groupChannel.channel.enableMarkdownForUserMessage,
+            enableFormTypeMessage: configs.groupChannel.channel.enableFormTypeMessage,
             enableReactionsSupergroup: sdkInitialized && configsWithAppAttr(sdk).groupChannel.channel.enableReactionsSupergroup as never,
           },
           groupChannelList: {

src/lib/types.ts

@@ -112,6 +112,7 @@ export interface SendBirdStateConfig {
     showSuggestedRepliesFor: SBUConfig['groupChannel']['channel']['showSuggestedRepliesFor'];
     suggestedRepliesDirection: SBUConfig['groupChannel']['channel']['suggestedRepliesDirection'];
     enableMarkdownForUserMessage: SBUConfig['groupChannel']['channel']['enableMarkdownForUserMessage'];
+    enableFormTypeMessage: SBUConfig['groupChannel']['channel']['enableFormTypeMessage'];
     /**
      * @deprecated Currently, this feature is turned off by default. If you wish to use this feature, contact us: {@link https://dashboard.sendbird.com/settings/contact_us?category=feedback_and_feature_requests&product=UIKit}
      */

src/lib/utils/uikitConfigMapper.ts

@@ -40,6 +40,7 @@ export function uikitConfigMapper({
       showSuggestedRepliesFor: uikitOptions.groupChannel?.showSuggestedRepliesFor,
       suggestedRepliesDirection: uikitOptions.groupChannel?.suggestedRepliesDirection,
       enableMarkdownForUserMessage: uikitOptions.groupChannel?.enableMarkdownForUserMessage,
+      enableFormTypeMessage: uikitOptions.groupChannel?.enableFormTypeMessage,
     },
     groupChannelList: {
       enableTypingIndicator: uikitOptions.groupChannelList?.enableTypingIndicator ?? isTypingIndicatorEnabledOnChannelList,

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

@@ -21,6 +21,7 @@ export const MessageInputWrapper = (props: MessageInputWrapperProps) => {
       {...props}
       {...context}
       currentChannel={currentGroupChannel}
+      messages={context.allMessages}
       sendUserMessage={(params) => {
         return sendMessage({
           message: params.message,

src/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView.tsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import type { User } from '@sendbird/chat';
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type {
+  BaseMessage,
   FileMessage,
   FileMessageCreateParams,
   MultipleFilesMessage,
@@ -15,6 +16,7 @@ import {
   isDisabledBecauseFrozen,
   isDisabledBecauseMuted,
   isDisabledBecauseSuggestedReplies,
+  isDisabledBecauseMessageForm,
 } from '../../context/utils';
 import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 import { useLocalization } from '../../../../lib/LocalizationContext';
@@ -34,6 +36,7 @@ export interface MessageInputWrapperViewProps {
   disabled?: boolean;
   // ChannelContext
   currentChannel: GroupChannel | null;
+  messages: BaseMessage[];
   isMultipleFilesMessageEnabled?: boolean;
   loading: boolean;
   quoteMessage: SendableMessageType | null;
@@ -58,6 +61,7 @@ export const MessageInputWrapperView = React.forwardRef((
   // Props
   const {
     currentChannel,
+    messages,
     loading,
     quoteMessage,
     setQuoteMessage,
@@ -103,6 +107,7 @@ export const MessageInputWrapperView = React.forwardRef((
     || isDisabledBecauseFrozen(currentChannel)
     || isDisabledBecauseMuted(currentChannel)
     || isDisabledBecauseSuggestedReplies(currentChannel, config.groupChannel.enableSuggestedReplies)
+    || isDisabledBecauseMessageForm(messages, config.groupChannel.enableFormTypeMessage)
     || disabled;
 
   const showSuggestedMentionList = !isMessageInputDisabled
@@ -210,7 +215,14 @@ export const MessageInputWrapperView = React.forwardRef((
           placeholder={
             (quoteMessage && stringSet.MESSAGE_INPUT__QUOTE_REPLY__PLACE_HOLDER)
             || (isDisabledBecauseFrozen(currentChannel) && stringSet.MESSAGE_INPUT__PLACE_HOLDER__FROZEN)
-            || (isDisabledBecauseMuted(currentChannel) && (isMobile ? stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT : stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED))
+            || (isDisabledBecauseMuted(currentChannel)
+              && (isMobile
+                ? stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED_SHORT
+                : stringSet.MESSAGE_INPUT__PLACE_HOLDER__MUTED))
+            || (isDisabledBecauseSuggestedReplies(currentChannel, config.groupChannel.enableSuggestedReplies)
+              && stringSet.MESSAGE_INPUT__PLACE_HOLDER__SUGGESTED_REPLIES)
+            || (isDisabledBecauseMessageForm(messages, config.groupChannel.enableFormTypeMessage)
+              && stringSet.MESSAGE_INPUT__PLACE_HOLDER__MESSAGE_FORM)
             || (disabled && stringSet.MESSAGE_INPUT__PLACE_HOLDER__DISABLED)
             || undefined
           }

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -186,7 +186,9 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     onMessagesReceived: () => {
       // FIXME: onMessagesReceived called with onApiResult
       if (isScrollBottomReached && isContextMenuClosed()) {
-        scrollPubSub.publish('scrollToBottom', {});
+        setTimeout(() => {
+          scrollPubSub.publish('scrollToBottom', {});
+        }, 10);
       }
     },
     onChannelDeleted: () => {

src/modules/GroupChannel/context/const.ts

@@ -1,6 +1,7 @@
 export const MAX_USER_MENTION_COUNT = 10;
 export const MAX_USER_SUGGESTION_COUNT = 15;
 export const USER_MENTION_TEMP_CHAR = '@';
+export const UIKIT_COMPATIBLE_FORM_VERSION = 1;
 
 export enum ThreadReplySelectType {
   PARENT = 'PARENT',

src/modules/GroupChannel/context/utils.ts

@@ -1,6 +1,7 @@
 import type { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { BaseMessage } from '@sendbird/chat/message';
 import type { SendableMessage } from '@sendbird/chat/lib/__definition';
+import { UIKIT_COMPATIBLE_FORM_VERSION } from './const';
 
 export function getComponentKeyFromMessage(message: BaseMessage | SendableMessage): string {
   if ('sendingStatus' in message) {
@@ -36,6 +37,28 @@ export const isDisabledBecauseMuted = (groupChannel?: GroupChannel | null) => {
   return groupChannel.myMutedState === 'muted';
 };
 
-export const isDisabledBecauseSuggestedReplies = (channel: GroupChannel | null | undefined, enableSuggestedReplies: boolean) => {
-  return enableSuggestedReplies && !!channel?.lastMessage?.extendedMessagePayload?.disable_chat_input;
+export const isDisabledBecauseSuggestedReplies = (
+  channel: GroupChannel | null | undefined,
+  enableSuggestedReplies: boolean,
+) => {
+  return enableSuggestedReplies
+    && Array.isArray(channel?.lastMessage?.extendedMessagePayload?.suggested_replies)
+    && !!channel?.lastMessage?.extendedMessagePayload?.disable_chat_input;
+};
+
+export const isFormVersionCompatible = (version: number) => {
+  return version <= UIKIT_COMPATIBLE_FORM_VERSION;
+};
+
+export const isDisabledBecauseMessageForm = (
+  allMessages: BaseMessage[],
+  enableFormTypeMessage: boolean,
+) => {
+  return enableFormTypeMessage
+    && allMessages.some((message) => (
+      !!message.messageForm
+      && !message.messageForm.isSubmitted
+      && !!message.extendedMessagePayload?.disable_chat_input
+      && isFormVersionCompatible(message.messageForm.version)
+    ));
 };