feat: Improve message template view (#1207)

Fixes [CLNP-4852](https://sendbird.atlassian.net/browse/CLNP-4852)

### Changelogs
- Will be added soon.

### How to test?
그룹채널에 유저 두명:
test_liam_1, test_liam_2 (닉네임도 유저id와 동일 함)

로컬 url:

http://localhost:5173/group_channel?appId=5D27A98C-D935-4EDA-846A-BCCD90E8E55B&userId=test_liam_1&nickname=test_liam_1&accessToken=3810634cd02e61956f08edf4fd614bfbe9e3e505

대시보드:

https://dashboard.sendbird.com/5D27A98C-D935-4EDA-846A-BCCD90E8E55B/settings/general

### Figma

https://www.figma.com/design/SVbXU00FhjztekD8AiVukK/WIP_UIKit_React?node-id=2924-4031&m=dev

<img width="1012" alt="Screenshot 2024-09-06 at 2 13 32 PM"
src="https://github.com/user-attachments/assets/c703765c-db6f-4726-b721-efe3f8e0c6e1">

### Default container type rendering (template message only)
[WIP_UIKit_React –
Figma.webm](https://github.com/user-attachments/assets/04c65a8f-6f0d-4ac9-91b9-d19821eb4d03)


[CLNP-4852]:
https://sendbird.atlassian.net/browse/CLNP-4852?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

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

Author: chohongm

package.json

@@ -70,8 +70,8 @@
   },
   "dependencies": {
     "@sendbird/chat": "^4.14.2",
-    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.79",
-    "@sendbird/uikit-tools": "0.0.1-alpha.79",
+    "@sendbird/react-uikit-message-template-view": "0.0.2",
+    "@sendbird/uikit-tools": "0.0.2",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "dompurify": "^3.0.1"

src/modules/Channel/components/Message/hooks/useIsElementInViewport.ts

@@ -1,17 +1,27 @@
-import React, { useLayoutEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-export const useIsElementInViewport = (elementRef: React.MutableRefObject<any>) => {
+export const useIsElementInViewport = (): [React.RefCallback<HTMLDivElement>, boolean] => {
   const [isVisible, setIsVisible] = useState(false);
+  const [element, setElement] = useState(null);
 
-  useLayoutEffect(() => {
-    const observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
+  const ref = useCallback((node) => {
+    if (node !== null) setElement(node);
+  }, []);
+
+  useEffect(() => {
+    if (!element) return;
+
+    const observer = new IntersectionObserver((entries) => {
       const [entry] = entries;
-      if (entry) setIsVisible(entry.isIntersecting);
+      setIsVisible(entry.isIntersecting);
     });
 
-    if (elementRef.current) observer.observe(elementRef.current);
-    return () => observer.disconnect();
-  }, [elementRef.current]);
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [element]);
 
-  return isVisible;
+  return [ref, isVisible];
 };

src/modules/Channel/components/Message/hooks/useLazyImageLoader.ts

@@ -1,10 +1,10 @@
-import React, { useRef } from 'react';
+import { RefCallback, useRef } from 'react';
 import { useIsElementInViewport } from './useIsElementInViewport';
 
-export const useLazyImageLoader = (elementRef: React.MutableRefObject<any>) => {
+export const useLazyImageLoader = (): [RefCallback<HTMLDivElement>, boolean] => {
   const isLoaded = useRef(false);
-  const isVisible = useIsElementInViewport(elementRef);
+  const [ref, isVisible] = useIsElementInViewport();
 
   if (isVisible) isLoaded.current = true;
-  return isLoaded.current;
+  return [ref, isLoaded.current];
 };

src/types.ts

@@ -87,9 +87,4 @@ export interface UploadedFileInfoWithUpload {
 
 export type SendbirdTheme = 'light' | 'dark';
 
-export enum MessageContentMiddleContainerType {
-  DEFAULT = 'default',
-  WIDE = 'wide',
-}
-
 export type HTMLTextDirection = 'ltr' | 'rtl';

src/ui/ChannelAvatar/__tests__/ChannelAvatar.spec.js

@@ -17,7 +17,7 @@ describe('ui/ChannelAvatar', () => {
     expect(container.getElementsByClassName(targetClassName)[0].className).toContain(targetClassName);
   });
 
-  it('should render an avatar broadcastChannel with url', function() {
+  it('should render an avatar broadcastChannel with non default url', function() {
     const targetClassName = "sendbird-chat-header--avatar--broadcast-channel";
     const coverUrl = '123';
     render(<ChannelAvatar channel={{ isBroadcast: true, coverUrl }} />);

src/ui/ContextMenu/index.scss

@@ -4,6 +4,10 @@
   display: inline;
 }
 
+.sendbird-message-content__sendbird-ui-container-type__default__header-container .sendbird-context-menu {
+  display: flex;
+}
+
 .sendbird__offline {
   .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
     cursor: not-allowed;

src/ui/ContextMenu/index.tsx

@@ -84,7 +84,6 @@ export default function ContextMenu({
   return (
     <div
       className="sendbird-context-menu"
-      style={{ display: 'inline' }}
       onClick={onClick}
     >
       {menuTrigger?.(() => setShowMenu(!showMenu))}

src/ui/ImageRenderer/index.tsx

@@ -61,9 +61,8 @@ const ImageRenderer = ({
   shadeOnHover,
   isUploaded = true,
 }: ImageRendererProps): ReactElement => {
-  const ref = useRef(null);
-  const isLoaded = useLazyImageLoader(ref);
-  const internalUrl = isLoaded ? url : null;
+  const [ref, isVisible] = useLazyImageLoader();
+  const internalUrl = isVisible ? url : null;
 
   const [defaultComponentVisible, setDefaultComponentVisible] = useState(false);
   const [placeholderVisible, setPlaceholderVisible] = useState(true);

src/ui/MessageContent/MessageBody/index.tsx

@@ -4,7 +4,7 @@ import {
   CoreMessageType,
   getUIKitMessageType, getUIKitMessageTypes, isTemplateMessage, isMultipleFilesMessage,
   isOGMessage, isSendableMessage,
-  isTextMessage, isThumbnailMessage, isVoiceMessage, isFormMessage,
+  isTextMessage, isThumbnailMessage, isVoiceMessage, isFormMessage, isValidTemplateMessageType,
 } from '../../../utils';
 import { BaseMessage, FileMessage, MultipleFilesMessage, UserMessage } from '@sendbird/chat/message';
 import OGMessageItemBody from '../../OGMessageItemBody';
@@ -23,21 +23,20 @@ import { match } from 'ts-pattern';
 import TemplateMessageItemBody from '../../TemplateMessageItemBody';
 import type { OnBeforeDownloadFileMessageType } from '../../../modules/GroupChannel/context/GroupChannelProvider';
 import FormMessageItemBody from '../../FormMessageItemBody';
+import { MESSAGE_TEMPLATE_KEY } from '../../../utils/consts';
 
 export type CustomSubcomponentsProps = Record<
   'ThumbnailMessageItemBody' | 'MultipleFilesMessageItemBody',
   Record<string, any>
 >;
 
 const MESSAGE_ITEM_BODY_CLASSNAME = 'sendbird-message-content__middle__message-item-body';
-export type RenderedTemplateBodyType = 'failed' | 'composite' | 'simple';
 
 export interface MessageBodyProps {
   className?: string;
   channel: Nullable<GroupChannel>;
   message: CoreMessageType;
   showFileViewer?: (bool: boolean) => void;
-  onTemplateMessageRenderedCallback?: (renderedTemplateBodyType: RenderedTemplateBodyType) => void;
   onMessageHeightChange?: () => void;
   onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 
@@ -55,7 +54,6 @@ export const MessageBody = (props: MessageBodyProps) => {
     channel,
     showFileViewer,
     onMessageHeightChange,
-    onTemplateMessageRenderedCallback,
     onBeforeDownloadFileMessage,
 
     mouseHover,
@@ -76,6 +74,14 @@ export const MessageBody = (props: MessageBodyProps) => {
   const isOgMessageEnabledInGroupChannel = channel?.isGroupChannel() && config.groupChannel.enableOgtag;
   const isFormMessageEnabledInGroupChannel = channel?.isGroupChannel() && config.groupChannel.enableFormTypeMessage;
 
+  const renderUnknownMessageItemBody = () => <UnknownMessageItemBody
+    className={className}
+    message={message}
+    isByMe={isByMe}
+    mouseHover={mouseHover}
+    isReactionEnabled={isReactionEnabledInChannel}
+  />;
+
   return match(message)
     .when((message) => isFormMessageEnabledInGroupChannel && isFormMessage(message),
       () => (
@@ -85,15 +91,22 @@ export const MessageBody = (props: MessageBodyProps) => {
           form={message.messageForm}
         />
       ))
-    .when(isTemplateMessage, () => (
-      <TemplateMessageItemBody
+    .when(isTemplateMessage, () => {
+      const templatePayload = message.extendedMessagePayload[MESSAGE_TEMPLATE_KEY];
+      if (!isValidTemplateMessageType(templatePayload)) {
+        config.logger?.error?.(
+          'TemplateMessageItemBody: invalid type value in message.extendedMessagePayload.message_template.',
+          templatePayload,
+        );
+        return renderUnknownMessageItemBody();
+      }
+      return <TemplateMessageItemBody
         className={className}
         message={message as BaseMessage}
         isByMe={isByMe}
         theme={config?.theme as SendbirdTheme}
-        onTemplateMessageRenderedCallback={onTemplateMessageRenderedCallback}
-      />
-    ))
+      />;
+    })
     .when((message) => isOgMessageEnabledInGroupChannel
       && isSendableMessage(message)
       && isOGMessage(message), () => (
@@ -163,15 +176,9 @@ export const MessageBody = (props: MessageBodyProps) => {
         {...customSubcomponentsProps['ThumbnailMessageItemBody'] ?? {}}
       />
     ))
-    .otherwise((message) => (
-      <UnknownMessageItemBody
-        className={className}
-        message={message}
-        isByMe={isByMe}
-        mouseHover={mouseHover}
-        isReactionEnabled={isReactionEnabledInChannel}
-      />
-    ));
+    .otherwise(() => {
+      return renderUnknownMessageItemBody();
+    });
 };
 
 export default MessageBody;

src/ui/MessageContent/MessageContentForTemplateMessage.tsx

@@ -0,0 +1,115 @@
+import React, { ReactElement } from 'react';
+import Label, { LabelColors, LabelTypography } from '../Label';
+import { classnames } from '../../utils/utils';
+import format from 'date-fns/format';
+import { MessageTemplateData, TemplateType } from '../TemplateMessageItemBody/types';
+import { MessageComponentRenderers, MessageContentProps } from './index';
+import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
+import { uiContainerType } from '../../utils';
+import { useLocalization } from '../../lib/LocalizationContext';
+import { MESSAGE_TEMPLATE_KEY } from '../../utils/consts';
+
+type MessageContentForTemplateMessageProps = MessageContentProps & MessageComponentRenderers & {
+  isByMe: boolean;
+  displayThreadReplies: boolean;
+  mouseHover: boolean;
+  isMobile: boolean;
+  isReactionEnabledInChannel: boolean;
+  hoveredMenuClassName: string;
+  templateType: TemplateType | null;
+  useReplying: boolean;
+};
+
+export function MessageContentForTemplateMessage(props: MessageContentForTemplateMessageProps): ReactElement {
+  const {
+    channel,
+    message,
+    showFileViewer,
+    onMessageHeightChange,
+    onBeforeDownloadFileMessage,
+
+    renderSenderProfile,
+    renderMessageHeader,
+    renderMessageBody,
+
+    isByMe,
+    displayThreadReplies,
+    mouseHover,
+    isMobile,
+    isReactionEnabledInChannel,
+    hoveredMenuClassName,
+    templateType,
+    useReplying,
+  } = props;
+
+  const { config } = useSendbirdStateContext();
+  const { dateLocale } = useLocalization();
+
+  const uiContainerTypeClassName = uiContainerType[templateType] ?? '';
+
+  const senderProfile = renderSenderProfile({
+    ...props,
+    chainBottom: false,
+    className: '',
+    isByMe,
+    displayThreadReplies,
+  });
+  const messageHeader = renderMessageHeader(props);
+  const messageBody = renderMessageBody({
+    message,
+    channel,
+    showFileViewer,
+    onMessageHeightChange,
+    mouseHover,
+    isMobile,
+    config,
+    isReactionEnabledInChannel,
+    isByMe,
+    onBeforeDownloadFileMessage,
+  });
+
+  const timeStamp = <Label
+    className={classnames(
+      'sendbird-message-content__middle__body-container__created-at',
+      'right',
+      hoveredMenuClassName,
+      uiContainerTypeClassName,
+    )}
+    type={LabelTypography.CAPTION_3}
+    color={LabelColors.ONBACKGROUND_2}
+  >
+    {format(message?.createdAt || 0, 'p', {
+      locale: dateLocale,
+    })}
+  </Label>;
+
+  const templateData: MessageTemplateData = message.extendedMessagePayload?.[MESSAGE_TEMPLATE_KEY] as MessageTemplateData;
+  const { profile = true, time = true, nickname = true } = templateData?.container_options ?? {};
+  const hasContainerHeader = profile || nickname;
+
+  return (
+    <div className="sendbird-message-content__sendbird-ui-container-type__default__root">
+      {
+        !isByMe
+        && hasContainerHeader
+        && !useReplying
+        && (
+          <div className="sendbird-message-content__sendbird-ui-container-type__default__header-container">
+            <div
+              className="sendbird-message-content__sendbird-ui-container-type__default__header-container__left__profile">
+              {profile && senderProfile}
+            </div>
+            {nickname && messageHeader}
+          </div>
+        )
+      }
+      {messageBody}
+      {
+        (!isByMe && time)
+        && <div className="sendbird-message-content__sendbird-ui-container-type__default__bottom">
+          {timeStamp}
+        </div>
+      }
+    </div>
+  );
+}