feat: support carousel template with simple templates

src/lib/dux/appInfo/utils.ts

@@ -6,7 +6,7 @@ import { SendbirdMessageTemplate } from '../../../ui/TemplateMessageItemBody/typ
  */
 export const getProcessedTemplate = (parsedTemplate: SendbirdMessageTemplate): ProcessedMessageTemplate => {
   return {
-    version: parsedTemplate.ui_template.version,
+    version: Number(parsedTemplate.ui_template.version),
     uiTemplate: JSON.stringify(parsedTemplate.ui_template.body.items),
     colorVariables: parsedTemplate.color_variables,
   };

src/ui/MessageContent/MessageBody/index.tsx

@@ -23,12 +23,14 @@ import { match } from 'ts-pattern';
 import TemplateMessageItemBody from '../../TemplateMessageItemBody';
 
 const MESSAGE_ITEM_BODY_CLASSNAME = 'sendbird-message-content__middle__message-item-body';
+export type RenderedTemplateBodyType = 'failed' | 'composite' | 'simple';
 
 export interface MessageBodyProps {
   channel: Nullable<GroupChannel>;
   message: CoreMessageType;
   showFileViewer?: (bool: boolean) => void;
   onMessageHeightChange?: (isBottomMessageAffected?: boolean) => void;
+  onTemplateMessageRenderedCallback?: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
 
   mouseHover: boolean;
   isMobile: boolean;
@@ -43,6 +45,7 @@ export default function MessageBody(props: MessageBodyProps): ReactElement {
     channel,
     showFileViewer,
     onMessageHeightChange,
+    onTemplateMessageRenderedCallback,
 
     mouseHover,
     isMobile,
@@ -66,6 +69,7 @@ export default function MessageBody(props: MessageBodyProps): ReactElement {
         message={message as BaseMessage}
         isByMe={isByMe}
         theme={config?.theme as SendbirdTheme}
+        onTemplateMessageRenderedCallback={onTemplateMessageRenderedCallback}
       />
     ))
     .when((message) => isOgMessageEnabledInGroupChannel

src/ui/MessageContent/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, useContext, useEffect, useRef, useState } from 'react';
+import React, { ReactElement, ReactNode, useContext, useMemo, useRef, useState } from 'react';
 import format from 'date-fns/format';
 import './index.scss';
 
@@ -151,12 +151,21 @@ export default function MessageContent(props: MessageContentProps): ReactElement
   const [showFeedbackOptionsMenu, setShowFeedbackOptionsMenu] = useState(false);
   const [showFeedbackModal, setShowFeedbackModal] = useState(false);
   const [feedbackFailedText, setFeedbackFailedText] = useState('');
-  const [totalBottom, setTotalBottom] = useState<number>(0);
-
-  const uiContainerType: UI_CONTAINER_TYPES = getMessageContentMiddleClassNameByContainerType({
+  const [uiContainerType, setUiContainerType] = useState<UI_CONTAINER_TYPES>(getMessageContentMiddleClassNameByContainerType({
     message,
     isMobile,
-  });
+  }));
+
+  const onTemplateMessageRenderedCallback = (renderedTemplateType: 'failed' | 'composite' | 'simple') => {
+    if (renderedTemplateType === 'failed') {
+      setUiContainerType(UI_CONTAINER_TYPES.DEFAULT);
+    } else if (renderedTemplateType === 'composite') {
+      /**
+       * Composite templates must have default carousel view irregardless of given containerType.
+       */
+      setUiContainerType(UI_CONTAINER_TYPES.DEFAULT_CAROUSEL);
+    }
+  };
 
   const { stringSet } = useContext(LocalizationContext);
 
@@ -200,6 +209,22 @@ export default function MessageContent(props: MessageContentProps): ReactElement
 
   const isTimestampBottom = !!uiContainerType;
 
+  const getTotalBottom = (): number => {
+    let sum = 2;
+    if (timestampRef.current && isTimestampBottom) {
+      sum += 4 + timestampRef.current.clientHeight;
+    }
+    if (threadRepliesRef.current) {
+      sum += 4 + threadRepliesRef.current.clientHeight;
+    }
+    if (feedbackButtonsRef.current) {
+      sum += 4 + feedbackButtonsRef.current.clientHeight;
+    }
+    return sum;
+  };
+
+  const totalBottom = useMemo(() => getTotalBottom(), [isTimestampBottom]);
+
   const onCloseFeedbackForm = () => {
     setShowFeedbackModal(false);
   };
@@ -233,23 +258,6 @@ export default function MessageContent(props: MessageContentProps): ReactElement
     return (<ClientAdminMessage message={message as AdminMessage} />);
   }
 
-  useEffect(() => {
-    const getTotalBottom = (): number => {
-      let sum = 2;
-      if (timestampRef.current && isTimestampBottom) {
-        sum += 4 + timestampRef.current.clientHeight;
-      }
-      if (threadRepliesRef.current) {
-        sum += 4 + threadRepliesRef.current.clientHeight;
-      }
-      if (feedbackButtonsRef.current) {
-        sum += 4 + feedbackButtonsRef.current.clientHeight;
-      }
-      return sum;
-    };
-    setTotalBottom(getTotalBottom());
-  }, [isTimestampBottom]);
-
   return (
     <div
       className={getClassName([
@@ -382,6 +390,7 @@ export default function MessageContent(props: MessageContentProps): ReactElement
               config,
               isReactionEnabledInChannel,
               isByMe,
+              onTemplateMessageRenderedCallback,
             })
           }
           {/* reactions */}

src/ui/MessageTemplate/messageTemplateErrorBoundary.tsx

@@ -1,9 +1,12 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 import { LoggerInterface } from '../../lib/Logger';
+import { RenderedTemplateBodyType } from '../MessageContent/MessageBody';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
   fallbackMessage: ReactNode;
+  onTemplateMessageRenderedCallback: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
+  isComposite?: boolean;
   logger?: LoggerInterface;
 }
 
@@ -27,8 +30,10 @@ export class MessageTemplateErrorBoundary extends Component<ErrorBoundaryProps,
 
   render() {
     if (this.state.hasError) {
+      this.props.onTemplateMessageRenderedCallback('failed');
       return this.props.fallbackMessage;
     }
+    this.props.onTemplateMessageRenderedCallback(this.props.isComposite ? 'composite' : 'simple');
     return this.props.children;
   }
 }