Merge v3.14.0-beta-1 to main!

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog - v3
 
+## [v3.14.0] (Apr 5, 2024)
+### Feature
+- `TemplateMessageItemBody` now supports `CarouselView` type template
+- Added 'wide' width support for `MessageContent` when value exists in `message.extendedMessagePayload['ui']['container_type']`
+- Added template version validation for `TemplateMessageItemBody`
+
+### Message template fixes/updates
+- Fixed a bug where argb color values are not converted to rgba
+- Fixed a bug where style properties expecting numeric values are set with string values
+- Removed default values of `borderRadius`, `backgroundColor`, and `color` for message template items
+
+### Other fixes
+- Fixed a bug where scroll bar is displayed in message sender name container
+
 ## [v3.13.5] (Apr 5, 2024)
 
 ### Fixes

package.json

@@ -67,9 +67,9 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.11.0",
-    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.68",
-    "@sendbird/uikit-tools": "0.0.1-alpha.68",
+    "@sendbird/chat": "^4.11.3",
+    "@sendbird/react-uikit-message-template-view": "0.0.1-alpha.72",
+    "@sendbird/uikit-tools": "0.0.1-alpha.72",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",
     "dompurify": "^3.0.1"

scripts/steps.md

@@ -34,7 +34,7 @@
   - Add all merged [SBISSUES tickets](https://sendbird.atlassian.net/jira/dashboards/11202?maximized=25045) in the `Linked issues` as `blocks` (When the ticket status changes to `Released`, Atlassan automatically adds a comment to each linked issues).
 8. Ask EM to review the release ticket and await for `Release approved`.
 9. In the root, `yarn build` to create new build files. Once created, make sure files in `dist` is newly created/updated.
-10. Change directory to `./dist` and then publish `npm publish`
+10. Change directory to `./dist` and then publish `npm publish` (`npm publish --tag beta` for beta release).
 11. In the release branch, create a new tag `v{X.X.X}` and the push the tag `git push v{X.X.X} origin`.
 12. After release do the followings:
   - Update release ticket to `Released`

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,6 @@
 export type ProcessedMessageTemplate = {
-  uiTemplate: string; // This is stringified ui_template.
+  version: number;
+  uiTemplate: string; // This is stringified ui_template.body.items
   colorVariables?: Record<string, string>;
 };
 
@@ -10,7 +11,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

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

@@ -258,6 +258,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/MessageList/index.scss

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

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,9 +7,13 @@ export interface MessageTemplateWrapperProps extends MessageTemplateProps {
   message: BaseMessage;
 }
 
-export const MessageTemplateWrapper = ({ message, templateItems }: MessageTemplateWrapperProps) => {
+export const MessageTemplateWrapper = ({
+  message,
+  templateVersion,
+  templateItems,
+}: MessageTemplateWrapperProps): ReactElement => {
   return <MessageTemplateProvider message={message}>
-    <MessageTemplate templateItems={templateItems} />
+    <MessageTemplate templateVersion={templateVersion} templateItems={templateItems} />
   </MessageTemplateProvider>;
 };
 

src/types.ts

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