Skip to content

Commit 31791b9

Browse files
chohongmchohongm
authored
feat: Apply template container type to message content (#999)
Fixes: [AC-1497](https://sendbird.atlassian.net/browse/AC-1497) ### Changelogs - Added 'wide' and 'full' width support for `MessageContent` when value exists in `message.extendedMessagePayload['ui']['container_type']` [AC-1497]: https://sendbird.atlassian.net/browse/AC-1497?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
1 parent 33a5206 commit 31791b9

File tree

30 files changed

+860
-258
lines changed

30 files changed

+860
-258
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
6868
},
6969
"dependencies": {
70-
"@sendbird/chat": "^4.11.0",
70+
"@sendbird/chat": "^4.11.3",
7171
"@sendbird/react-uikit-message-template-view": "0.0.1-alpha.65",
7272
"@sendbird/uikit-tools": "0.0.1-alpha.65",
7373
"css-vars-ponyfill": "^2.3.2",

‎src/lib/dux/appInfo/actionTypes.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { MessageTemplatesInfo, ProcessedMessageTemplate } from './initialState';
33

44
export const APP_INFO_ACTIONS = {
55
INITIALIZE_MESSAGE_TEMPLATES_INFO: 'INITIALIZE_MESSAGE_TEMPLATES_INFO',
6-
UPSERT_MESSAGE_TEMPLATE: 'UPSERT_MESSAGE_TEMPLATE',
7-
UPSERT_WAITING_TEMPLATE_KEY: 'UPSERT_WAITING_TEMPLATE_KEY',
8-
MARK_ERROR_WAITING_TEMPLATE_KEY: 'MARK_ERROR_WAITING_TEMPLATE_KEY',
6+
UPSERT_MESSAGE_TEMPLATES: 'UPSERT_MESSAGE_TEMPLATES',
7+
UPSERT_WAITING_TEMPLATE_KEYS: 'UPSERT_WAITING_TEMPLATE_KEYS',
8+
MARK_ERROR_WAITING_TEMPLATE_KEYS: 'MARK_ERROR_WAITING_TEMPLATE_KEYS',
99
} as const;
1010

1111
export type TemplatesMapData = {
@@ -15,9 +15,9 @@ export type TemplatesMapData = {
1515

1616
type APP_INFO_PAYLOAD_TYPES = {
1717
[APP_INFO_ACTIONS.INITIALIZE_MESSAGE_TEMPLATES_INFO]: MessageTemplatesInfo,
18-
[APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATE]: TemplatesMapData,
19-
[APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEY]: { key: string, requestedAt: number },
20-
[APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEY]: { key: string },
18+
[APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATES]: TemplatesMapData[],
19+
[APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEYS]: { keys: string[], requestedAt: number },
20+
[APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEYS]: { keys: string[], messageId: number },
2121
};
2222

2323
export type AppInfoActionTypes = CreateAction<APP_INFO_PAYLOAD_TYPES>;

‎src/lib/dux/appInfo/initialState.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export type ProcessedMessageTemplate = {
2-
uiTemplate: string; // This is stringified ui_template.
2+
uiTemplate: string; // This is stringified ui_template.body.items
33
colorVariables?: Record<string, string>;
44
};
55

@@ -10,7 +10,7 @@ export interface MessageTemplatesInfo {
1010

1111
export interface WaitingTemplateKeyData {
1212
requestedAt: number;
13-
isError: boolean;
13+
erroredMessageIds: number[];
1414
}
1515

1616
export interface AppInfoStateType {

‎src/lib/dux/appInfo/reducers.ts‎

Lines changed: 33 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,40 +13,54 @@ export default function reducer(state: AppInfoStateType, action: AppInfoActionTy
1313
};
1414
})
1515
.with(
16-
{ type: APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATE },
16+
{ type: APP_INFO_ACTIONS.UPSERT_MESSAGE_TEMPLATES },
1717
({ payload }) => {
1818
const templatesInfo = state.messageTemplatesInfo;
1919
if (!templatesInfo) return state; // Not initialized. Ignore.
2020

21-
const { key, template } = payload;
22-
templatesInfo.templatesMap[key] = template;
23-
24-
delete state.waitingTemplateKeysMap[key];
25-
21+
const waitingTemplateKeysMap = { ...state.waitingTemplateKeysMap };
22+
payload.forEach((templatesMapData) => {
23+
const { key, template } = templatesMapData;
24+
templatesInfo.templatesMap[key] = template;
25+
delete waitingTemplateKeysMap[key];
26+
});
2627
return {
2728
...state,
29+
waitingTemplateKeysMap,
2830
messageTemplatesInfo: templatesInfo,
2931
};
3032
})
3133
.with(
32-
{ type: APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEY },
34+
{ type: APP_INFO_ACTIONS.UPSERT_WAITING_TEMPLATE_KEYS },
3335
({ payload }) => {
34-
const { key, requestedAt } = payload;
35-
state.waitingTemplateKeysMap[key] = {
36-
requestedAt,
37-
isError: false,
36+
const { keys, requestedAt } = payload;
37+
const waitingTemplateKeysMap = { ...state.waitingTemplateKeysMap };
38+
keys.forEach((key) => {
39+
waitingTemplateKeysMap[key] = {
40+
erroredMessageIds: waitingTemplateKeysMap[key]?.erroredMessageIds ?? [],
41+
requestedAt,
42+
};
43+
});
44+
return {
45+
...state,
46+
waitingTemplateKeysMap,
3847
};
39-
return { ...state };
4048
})
4149
.with(
42-
{ type: APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEY },
50+
{ type: APP_INFO_ACTIONS.MARK_ERROR_WAITING_TEMPLATE_KEYS },
4351
({ payload }) => {
44-
const { key } = payload;
45-
const waitingTemplateKeyData: WaitingTemplateKeyData | undefined = state.waitingTemplateKeysMap[key];
46-
if (waitingTemplateKeyData) {
47-
waitingTemplateKeyData.isError = true;
48-
}
49-
return { ...state };
52+
const { keys, messageId } = payload;
53+
const waitingTemplateKeysMap = { ...state.waitingTemplateKeysMap };
54+
keys.forEach((key) => {
55+
const waitingTemplateKeyData: WaitingTemplateKeyData | undefined = waitingTemplateKeysMap[key];
56+
if (waitingTemplateKeyData && waitingTemplateKeyData.erroredMessageIds.indexOf(messageId) === -1) {
57+
waitingTemplateKeyData.erroredMessageIds.push(messageId);
58+
}
59+
});
60+
return {
61+
...state,
62+
waitingTemplateKeysMap,
63+
};
5064
})
5165
.otherwise(() => {
5266
return state;

‎src/lib/dux/appInfo/utils.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const getProcessedTemplate = (parsedTemplate: SendbirdMessageTemplate): P
1111
};
1212
};
1313

14-
export const getProcessedTemplates = (
14+
export const getProcessedTemplatesMap = (
1515
parsedTemplates: SendbirdMessageTemplate[],
1616
): Record<string, ProcessedMessageTemplate> => {
1717
const processedTemplates = {};

‎src/lib/hooks/useMessageTemplateUtils.ts‎

Lines changed: 46 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { AppInfoStateType, MessageTemplatesInfo, ProcessedMessageTemplate } from '../dux/appInfo/initialState';
33
import { SendbirdMessageTemplate } from '../../ui/TemplateMessageItemBody/types';
4-
import { getProcessedTemplate, getProcessedTemplates } from '../dux/appInfo/utils';
4+
import { getProcessedTemplate, getProcessedTemplatesMap } from '../dux/appInfo/utils';
55
import SendbirdChat from '@sendbird/chat';
66
import { APP_INFO_ACTIONS, AppInfoActionTypes } from '../dux/appInfo/actionTypes';
77
import { CACHED_MESSAGE_TEMPLATES_KEY, CACHED_MESSAGE_TEMPLATES_TOKEN_KEY } from '../../utils/consts';
@@ -18,15 +18,15 @@ interface UseMessageTemplateUtilsProps {
1818

1919
export interface UseMessageTemplateUtilsWrapper {
2020
getCachedTemplate: (key: string) => ProcessedMessageTemplate | null;
21-
updateMessageTemplatesInfo: (templateKey: string, requestedAt: number) => Promise<void>;
21+
updateMessageTemplatesInfo: (templateKeys: string[], messageId: number, requestedAt: number) => Promise<void>;
2222
initializeMessageTemplatesInfo: (readySdk: SendbirdChat) => Promise<void>;
2323
}
2424

2525
const {
2626
INITIALIZE_MESSAGE_TEMPLATES_INFO,
27-
UPSERT_MESSAGE_TEMPLATE,
28-
UPSERT_WAITING_TEMPLATE_KEY,
29-
MARK_ERROR_WAITING_TEMPLATE_KEY,
27+
UPSERT_MESSAGE_TEMPLATES,
28+
UPSERT_WAITING_TEMPLATE_KEYS,
29+
MARK_ERROR_WAITING_TEMPLATE_KEYS,
3030
} = APP_INFO_ACTIONS;
3131

3232
export default function useMessageTemplateUtils({
@@ -105,7 +105,7 @@ export default function useMessageTemplateUtils({
105105
const parsedTemplates = await fetchAllMessageTemplates(readySdk);
106106
const newMessageTemplatesInfo: MessageTemplatesInfo = {
107107
token: sdkMessageTemplateToken,
108-
templatesMap: getProcessedTemplates(parsedTemplates),
108+
templatesMap: getProcessedTemplatesMap(parsedTemplates),
109109
};
110110
appInfoDispatcher({ type: INITIALIZE_MESSAGE_TEMPLATES_INFO, payload: newMessageTemplatesInfo });
111111
localStorage.setItem(CACHED_MESSAGE_TEMPLATES_TOKEN_KEY, sdkMessageTemplateToken);
@@ -118,7 +118,7 @@ export default function useMessageTemplateUtils({
118118
const parsedTemplates: SendbirdMessageTemplate[] = JSON.parse(cachedMessageTemplates);
119119
const newMessageTemplatesInfo: MessageTemplatesInfo = {
120120
token: sdkMessageTemplateToken,
121-
templatesMap: getProcessedTemplates(parsedTemplates),
121+
templatesMap: getProcessedTemplatesMap(parsedTemplates),
122122
};
123123
appInfoDispatcher({ type: INITIALIZE_MESSAGE_TEMPLATES_INFO, payload: newMessageTemplatesInfo });
124124
}
@@ -128,54 +128,72 @@ export default function useMessageTemplateUtils({
128128
* If given message is a template message with template key and if the key does not exist in the cache,
129129
* update the cache by fetching the template.
130130
*/
131-
const updateMessageTemplatesInfo = async (templateKey: string, requestedAt: number): Promise<void> => {
131+
const updateMessageTemplatesInfo = async (
132+
templateKeys: string[],
133+
messageId: number,
134+
requestedAt: number,
135+
): Promise<void> => {
132136
if (appInfoDispatcher) {
133137
appInfoDispatcher({
134-
type: UPSERT_WAITING_TEMPLATE_KEY,
138+
type: UPSERT_WAITING_TEMPLATE_KEYS,
135139
payload: {
136-
key: templateKey,
140+
keys: templateKeys,
137141
requestedAt,
138142
},
139143
});
140-
141-
let parsedTemplate: SendbirdMessageTemplate | null = null;
144+
const newParsedTemplates: SendbirdMessageTemplate[] | null = [];
142145
try {
143-
const newTemplate = await sdk.message.getMessageTemplate(templateKey);
144-
parsedTemplate = JSON.parse(newTemplate.template);
146+
let hasMore = true;
147+
let token = null;
148+
while (hasMore) {
149+
const result = await sdk.message.getMessageTemplatesByToken(token, {
150+
keys: templateKeys,
151+
});
152+
result.templates.forEach((newTemplate) => {
153+
newParsedTemplates.push(JSON.parse(newTemplate.template));
154+
});
155+
hasMore = result.hasMore;
156+
token = result.token;
157+
}
145158
} catch (e) {
146-
logger?.error?.('Sendbird | fetchProcessedMessageTemplate failed', e);
159+
logger?.error?.('Sendbird | fetchProcessedMessageTemplates failed', e, templateKeys);
147160
}
148-
149-
if (parsedTemplate) {
161+
if (newParsedTemplates.length > 0) {
150162
// Update cache
151163
const cachedMessageTemplates: string | null = localStorage.getItem(CACHED_MESSAGE_TEMPLATES_KEY);
152164
if (cachedMessageTemplates) {
153165
const parsedTemplates: SendbirdMessageTemplate[] = JSON.parse(cachedMessageTemplates);
154-
parsedTemplates.push(parsedTemplate);
166+
const existingKeys = parsedTemplates.map((parsedTemplate) => parsedTemplate.key);
167+
newParsedTemplates.forEach((newParsedTemplate) => {
168+
if (!existingKeys.includes(newParsedTemplate.key)) {
169+
parsedTemplates.push(newParsedTemplate);
170+
}
171+
});
155172
localStorage.setItem(CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify(parsedTemplates));
156173
} else {
157-
localStorage.setItem(CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify([parsedTemplate]));
174+
localStorage.setItem(CACHED_MESSAGE_TEMPLATES_KEY, JSON.stringify([newParsedTemplates]));
158175
}
159176
// Update memory
160-
const processedTemplate: ProcessedMessageTemplate = getProcessedTemplate(parsedTemplate);
161177
appInfoDispatcher({
162-
type: UPSERT_MESSAGE_TEMPLATE,
163-
payload: {
164-
key: templateKey,
165-
template: processedTemplate,
166-
},
178+
type: UPSERT_MESSAGE_TEMPLATES,
179+
payload: newParsedTemplates.map((newParsedTemplate) => {
180+
return {
181+
key: newParsedTemplate.key,
182+
template: getProcessedTemplate(newParsedTemplate),
183+
};
184+
}),
167185
});
168186
} else {
169187
appInfoDispatcher({
170-
type: MARK_ERROR_WAITING_TEMPLATE_KEY,
188+
type: MARK_ERROR_WAITING_TEMPLATE_KEYS,
171189
payload: {
172-
key: templateKey,
190+
keys: templateKeys,
191+
messageId,
173192
},
174193
});
175194
}
176195
}
177196
};
178-
179197
return {
180198
getCachedTemplate,
181199
updateMessageTemplatesInfo,

‎src/lib/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,6 @@ export type SendbirdChatInitParams = Omit<SendbirdChatParams<Module[]>, 'appId'>
257257
export type CustomExtensionParams = Record<string, string>;
258258

259259
export type SendbirdProviderUtils = {
260-
updateMessageTemplatesInfo: (templateKey: string, createdAt: number) => Promise<void>;
260+
updateMessageTemplatesInfo: (templateKeys: string[], messageId: number, createdAt: number) => Promise<void>;
261261
getCachedTemplate: (key: string) => ProcessedMessageTemplate | null;
262262
};

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ const MessageView = (props: MessageViewProps) => {
260260
setQuoteMessage,
261261
onReplyInThread: onReplyInThreadClick,
262262
onQuoteMessageClick: onQuoteMessageClick,
263-
onMessageHeightChange: handleScroll,
263+
onMessageHeightChange: (a?: boolean) => handleScroll(a),
264264
})}
265265
{ /* Suggested Replies */ }
266266
{

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
position: relative;
99
.sendbird-conversation__messages-padding {
1010
position: relative;
11-
padding-left: 24px;
12-
padding-right: 24px;
1311
height: 100%;
1412
overflow-x: hidden;
1513
overflow-y: scroll;

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,10 @@ export const MessageList = ({
153153
<div className={`sendbird-conversation__messages ${className}`}>
154154
<div className="sendbird-conversation__scroll-container">
155155
<div className="sendbird-conversation__padding" />
156-
<div className="sendbird-conversation__messages-padding" ref={scrollRef}>
156+
<div
157+
ref={scrollRef}
158+
className="sendbird-conversation__messages-padding"
159+
>
157160
{messages.map((message, idx) => {
158161
const { chainTop, chainBottom, hasSeparator } = getMessagePartsInfo({
159162
allMessages: messages as CoreMessageType[],

0 commit comments

Comments
 (0)