feat: Apply template container type to message content

package.json

@@ -67,7 +67,7 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.11.0",
+    "@sendbird/chat": "^4.11.3",
     "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.65",
     "@sendbird/uikit-tools": "0.0.1-alpha.65",
     "css-vars-ponyfill": "^2.3.2",

src/lib/dux/appInfo/actionTypes.ts

@@ -3,9 +3,9 @@ import { MessageTemplatesInfo, ProcessedMessageTemplate } from './initialState';
 
 export const APP_INFO_ACTIONS = {
   INITIALIZE_MESSAGE_TEMPLATES_INFO: 'INITIALIZE_MESSAGE_TEMPLATES_INFO',
-  UPSERT_MESSAGE_TEMPLATE: 'UPSERT_MESSAGE_TEMPLATE',
-  UPSERT_WAITING_TEMPLATE_KEY: 'UPSERT_WAITING_TEMPLATE_KEY',
-  MARK_ERROR_WAITING_TEMPLATE_KEY: 'MARK_ERROR_WAITING_TEMPLATE_KEY',
+  UPSERT_MESSAGE_TEMPLATES: 'UPSERT_MESSAGE_TEMPLATES',
+  UPSERT_WAITING_TEMPLATE_KEYS: 'UPSERT_WAITING_TEMPLATE_KEYS',
+  MARK_ERROR_WAITING_TEMPLATE_KEYS: 'MARK_ERROR_WAITING_TEMPLATE_KEYS',
 } as const;
 
 export type TemplatesMapData = {
@@ -15,9 +15,9 @@ export type TemplatesMapData = {
 
 type APP_INFO_PAYLOAD_TYPES = {
   [APP_INFO_ACTIONS.INITIALIZE_MESSAGE_TEMPLATES_INFO]: MessageTemplatesInfo,
-  [APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATE]: TemplatesMapData,
-  [APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEY]: { key: string, requestedAt: number },
-  [APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEY]: { key: string },
+  [APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATES]: TemplatesMapData[],
+  [APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEYS]: { keys: string[], requestedAt: number },
+  [APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEYS]: { keys: string[], messageId: number },
 };
 
 export type AppInfoActionTypes = CreateAction<APP_INFO_PAYLOAD_TYPES>;

src/lib/dux/appInfo/initialState.ts

@@ -1,5 +1,5 @@
 export type ProcessedMessageTemplate = {
-  uiTemplate: string; // This is stringified ui_template.
+  uiTemplate: string; // This is stringified ui_template.body.items
   colorVariables?: Record<string, string>;
 };
 
@@ -10,7 +10,7 @@ export interface MessageTemplatesInfo {
 
 export interface WaitingTemplateKeyData {
   requestedAt: number;
-  isError: boolean;
+  erroredMessageIds: number[];
 }
 
 export interface AppInfoStateType {

src/lib/dux/appInfo/reducers.ts

@@ -13,40 +13,54 @@ export default function reducer(state: AppInfoStateType, action: AppInfoActionTy
         };
       })
     .with(
-      { type: APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATE },
+      { type: APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATES },
       ({ payload }) => {
         const templatesInfo = state.messageTemplatesInfo;
         if (!templatesInfo) return state; // Not initialized. Ignore.
 
-        const { key, template } = payload;
-        templatesInfo.templatesMap[key] = template;
-
-        delete state.waitingTemplateKeysMap[key];
-
+        const waitingTemplateKeysMap = { ...state.waitingTemplateKeysMap };
+        payload.forEach((templatesMapData) => {
+          const { key, template } = templatesMapData;
+          templatesInfo.templatesMap[key] = template;
+          delete waitingTemplateKeysMap[key];
+        });
         return {
           ...state,
+          waitingTemplateKeysMap,
           messageTemplatesInfo: templatesInfo,
         };
       })
     .with(
-      { type: APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEY },
+      { type: APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEYS },
       ({ payload }) => {
-        const { key, requestedAt } = payload;
-        state.waitingTemplateKeysMap[key] = {
-          requestedAt,
-          isError: false,
+        const { keys, requestedAt } = payload;
+        const waitingTemplateKeysMap = { ...state.waitingTemplateKeysMap };
+        keys.forEach((key) => {
+          waitingTemplateKeysMap[key] = {
+            erroredMessageIds: waitingTemplateKeysMap[key]?.erroredMessageIds ?? [],
+            requestedAt,
+          };
+        });
+        return {
+          ...state,
+          waitingTemplateKeysMap,
         };
-        return { ...state };
       })
     .with(
-      { type: APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEY },
+      { type: APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEYS },
       ({ payload }) => {
-        const { key } = payload;
-        const waitingTemplateKeyData: WaitingTemplateKeyData | undefined = state.waitingTemplateKeysMap[key];
-        if (waitingTemplateKeyData) {
-          waitingTemplateKeyData.isError = true;
-        }
-        return { ...state };
+        const { keys, messageId } = payload;
+        const waitingTemplateKeysMap = { ...state.waitingTemplateKeysMap };
+        keys.forEach((key) => {
+          const waitingTemplateKeyData: WaitingTemplateKeyData | undefined = waitingTemplateKeysMap[key];
+          if (waitingTemplateKeyData && waitingTemplateKeyData.erroredMessageIds.indexOf(messageId) === -1) {
+            waitingTemplateKeyData.erroredMessageIds.push(messageId);
+          }
+        });
+        return {
+          ...state,
+          waitingTemplateKeysMap,
+        };
       })
     .otherwise(() => {
       return state;

src/lib/dux/appInfo/utils.ts

@@ -11,7 +11,7 @@ export const getProcessedTemplate = (parsedTemplate: SendbirdMessageTemplate): P
   };
 };
 
-export const getProcessedTemplates = (
+export const getProcessedTemplatesMap = (
   parsedTemplates: SendbirdMessageTemplate[],
 ): Record<string, ProcessedMessageTemplate> => {
   const processedTemplates = {};

src/lib/hooks/useMessageTemplateUtils.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { AppInfoStateType, MessageTemplatesInfo, ProcessedMessageTemplate } from '../dux/appInfo/initialState';
 import { SendbirdMessageTemplate } from '../../ui/TemplateMessageItemBody/types';
-import { getProcessedTemplate, getProcessedTemplates } from '../dux/appInfo/utils';
+import { getProcessedTemplate, getProcessedTemplatesMap } from '../dux/appInfo/utils';
 import SendbirdChat from '@sendbird/chat';
 import { APP_INFO_ACTIONS, AppInfoActionTypes } from '../dux/appInfo/actionTypes';
 import { CACHED_MESSAGE_TEMPLATES_KEY, CACHED_MESSAGE_TEMPLATES_TOKEN_KEY } from '../../utils/consts';
@@ -18,15 +18,15 @@ interface UseMessageTemplateUtilsProps {
 
 export interface UseMessageTemplateUtilsWrapper {
   getCachedTemplate: (key: string) => ProcessedMessageTemplate | null;
-  updateMessageTemplatesInfo: (templateKey: string, requestedAt: number) => Promise<void>;
+  updateMessageTemplatesInfo: (templateKeys: string[], messageId: number, requestedAt: number) => Promise<void>;
   initializeMessageTemplatesInfo: (readySdk: SendbirdChat) => Promise<void>;
 }
 
 const {
   INITIALIZE_MESSAGE_TEMPLATES_INFO,
-  UPSERT_MESSAGE_TEMPLATE,
-  UPSERT_WAITING_TEMPLATE_KEY,
-  MARK_ERROR_WAITING_TEMPLATE_KEY,
+  UPSERT_MESSAGE_TEMPLATES,
+  UPSERT_WAITING_TEMPLATE_KEYS,
+  MARK_ERROR_WAITING_TEMPLATE_KEYS,
 } = APP_INFO_ACTIONS;
 
 export default function useMessageTemplateUtils({
@@ -105,7 +105,7 @@ export default function useMessageTemplateUtils({
       const parsedTemplates = await fetchAllMessageTemplates(readySdk);
       const newMessageTemplatesInfo: MessageTemplatesInfo = {
         token: sdkMessageTemplateToken,
-        templatesMap: getProcessedTemplates(parsedTemplates),
+        templatesMap: getProcessedTemplatesMap(parsedTemplates),
       };
       appInfoDispatcher({ type: INITIALIZE_MESSAGE_TEMPLATES_INFO, payload: newMessageTemplatesInfo });
       localStorage.setItem(CACHED_MESSAGE_TEMPLATES_TOKEN_KEY, sdkMessageTemplateToken);
@@ -118,7 +118,7 @@ export default function useMessageTemplateUtils({
       const parsedTemplates: SendbirdMessageTemplate[] = JSON.parse(cachedMessageTemplates);
       const newMessageTemplatesInfo: MessageTemplatesInfo = {
         token: sdkMessageTemplateToken,
-        templatesMap: getProcessedTemplates(parsedTemplates),
+        templatesMap: getProcessedTemplatesMap(parsedTemplates),
       };
       appInfoDispatcher({ type: INITIALIZE_MESSAGE_TEMPLATES_INFO, payload: newMessageTemplatesInfo });
     }
@@ -128,54 +128,72 @@ export default function useMessageTemplateUtils({
    * If given message is a template message with template key and if the key does not exist in the cache,
    * update the cache by fetching the template.
    */
-  const updateMessageTemplatesInfo = async (templateKey: string, requestedAt: number): Promise<void> => {
+  const updateMessageTemplatesInfo = async (
+    templateKeys: string[],
+    messageId: number,
+    requestedAt: number,
+  ): Promise<void> => {
     if (appInfoDispatcher) {
       appInfoDispatcher({
-        type: UPSERT_WAITING_TEMPLATE_KEY,
+        type: UPSERT_WAITING_TEMPLATE_KEYS,
         payload: {
-          key: templateKey,
+          keys: templateKeys,
           requestedAt,
         },
       });
-
-      let parsedTemplate: SendbirdMessageTemplate | null = null;
+      const newParsedTemplates: SendbirdMessageTemplate[] | null = [];
       try {
-        const newTemplate = await sdk.message.getMessageTemplate(templateKey);
-        parsedTemplate = JSON.parse(newTemplate.template);
+        let hasMore = true;
+        let token = null;
+        while (hasMore) {
+          const result = await sdk.message.getMessageTemplatesByToken(token, {
+            keys: templateKeys,
+          });
+          result.templates.forEach((newTemplate) => {
+            newParsedTemplates.push(JSON.parse(newTemplate.template));
+          });
+          hasMore = result.hasMore;
+          token = result.token;
+        }
       } catch (e) {
-        logger?.error?.('Sendbird | fetchProcessedMessageTemplate failed', e);
+        logger?.error?.('Sendbird | fetchProcessedMessageTemplates failed', e, templateKeys);
       }
-
-      if (parsedTemplate) {
+      if (newParsedTemplates.length > 0) {
         // Update cache
         const cachedMessageTemplates: string | null = localStorage.getItem(CACHED_MESSAGE_TEMPLATES_KEY);
         if (cachedMessageTemplates) {
           const parsedTemplates: SendbirdMessageTemplate[] = JSON.parse(cachedMessageTemplates);
-          parsedTemplates.push(parsedTemplate);
+          const existingKeys = parsedTemplates.map((parsedTemplate) => parsedTemplate.key);
+          newParsedTemplates.forEach((newParsedTemplate) => {
+            if (!existingKeys.includes(newParsedTemplate.key)) {
+              parsedTemplates.push(newParsedTemplate);
+            }
+          });
           localStorage.setItem(CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify(parsedTemplates));
         } else {
-          localStorage.setItem(CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify([parsedTemplate]));
+          localStorage.setItem(CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify([newParsedTemplates]));
         }
         // Update memory
-        const processedTemplate: ProcessedMessageTemplate = getProcessedTemplate(parsedTemplate);
         appInfoDispatcher({
-          type: UPSERT_MESSAGE_TEMPLATE,
-          payload: {
-            key: templateKey,
-            template: processedTemplate,
-          },
+          type: UPSERT_MESSAGE_TEMPLATES,
+          payload: newParsedTemplates.map((newParsedTemplate) => {
+            return {
+              key: newParsedTemplate.key,
+              template: getProcessedTemplate(newParsedTemplate),
+            };
+          }),
         });
       } else {
         appInfoDispatcher({
-          type: MARK_ERROR_WAITING_TEMPLATE_KEY,
+          type: MARK_ERROR_WAITING_TEMPLATE_KEYS,
           payload: {
-            key: templateKey,
+            keys: templateKeys,
+            messageId,
           },
         });
       }
     }
   };
-
   return {
     getCachedTemplate,
     updateMessageTemplatesInfo,

src/lib/types.ts

@@ -257,6 +257,6 @@ export type SendbirdChatInitParams = Omit<SendbirdChatParams<Module[]>, 'appId'>
 export type CustomExtensionParams = Record<string, string>;
 
 export type SendbirdProviderUtils = {
-  updateMessageTemplatesInfo: (templateKey: string, createdAt: number) => Promise<void>;
+  updateMessageTemplatesInfo: (templateKeys: string[], messageId: number, createdAt: number) => Promise<void>;
   getCachedTemplate: (key: string) => ProcessedMessageTemplate | null;
 };

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

@@ -260,7 +260,7 @@ const MessageView = (props: MessageViewProps) => {
           setQuoteMessage,
           onReplyInThread: onReplyInThreadClick,
           onQuoteMessageClick: onQuoteMessageClick,
-          onMessageHeightChange: handleScroll,
+          onMessageHeightChange: (a?: boolean) => handleScroll(a),
         })}
         { /* Suggested Replies */ }
         {

src/modules/GroupChannel/components/MessageList/index.scss

@@ -8,8 +8,6 @@
   position: relative;
   .sendbird-conversation__messages-padding {
     position: relative;
-    padding-left: 24px;
-    padding-right: 24px;
     height: 100%;
     overflow-x: hidden;
     overflow-y: scroll;

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

@@ -153,7 +153,10 @@ export const MessageList = ({
       <div className={`sendbird-conversation__messages ${className}`}>
         <div className="sendbird-conversation__scroll-container">
           <div className="sendbird-conversation__padding" />
-          <div className="sendbird-conversation__messages-padding" ref={scrollRef}>
+          <div
+            ref={scrollRef}
+            className="sendbird-conversation__messages-padding"
+          >
             {messages.map((message, idx) => {
               const { chainTop, chainBottom, hasSeparator } = getMessagePartsInfo({
                 allMessages: messages as CoreMessageType[],

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { BaseMessage } from '@sendbird/chat/message';
 import MessageTemplate, { MessageTemplateProps } from '../../../../ui/MessageTemplate';
 import { MessageProvider as MessageTemplateProvider } from '@sendbird/react-uikit-message-template-view';
@@ -7,7 +7,10 @@ export interface MessageTemplateWrapperProps extends MessageTemplateProps {
   message: BaseMessage;
 }
 
-export const MessageTemplateWrapper = ({ message, templateItems }: MessageTemplateWrapperProps) => {
+export const MessageTemplateWrapper = ({
+  message,
+  templateItems,
+}: MessageTemplateWrapperProps): ReactElement => {
   return <MessageTemplateProvider message={message}>
     <MessageTemplate templateItems={templateItems} />
   </MessageTemplateProvider>;

src/types.ts

@@ -86,3 +86,9 @@ export interface UploadedFileInfoWithUpload {
 }
 
 export type SendbirdTheme = 'light' | 'dark';
+
+export enum MessageContentMiddleContainerType {
+  DEFAULT = 'default',
+  WIDE = 'wide',
+  FULL = 'full',
+}

src/ui/Avatar/index.tsx

@@ -147,6 +147,7 @@ interface AvatarProps {
   width?: string | number,
   zIndex?: string | number,
   left?: string,
+  bottom?: string,
   src?: string | Array<string>,
   alt?: string,
   onClick?(): void,
@@ -162,6 +163,7 @@ function Avatar(
     height = '56px',
     zIndex = 0,
     left = '',
+    bottom = '',
     onClick,
     customDefaultComponent,
   }: AvatarProps,
@@ -180,6 +182,7 @@ function Avatar(
         width,
         zIndex,
         left,
+        bottom,
       }}
       onClick={onClick}
       onKeyDown={onClick}

src/ui/Carousel/index.scss

@@ -0,0 +1,4 @@
+.sendbird-carousel-items-wrapper {
+  display: flex;
+  box-sizing: border-box;
+}