Skip to content

Commit eeebbdc

Browse files
chohongmbang9
chohongm
and
bang9
authored
feat: Update TypingIndicatorBubble to support multiple typing members (#838)
Fixes: [UIKIT-4563](https://sendbird.atlassian.net/browse/UIKIT-4563) ### Docs - https://sendbird.atlassian.net/wiki/spaces/UK/pages/2177794776/Typing+indicator+type+2+-+animated+message+bubble ### Standard test sheet https://docs.google.com/spreadsheets/d/1ytDNIBdMJOUTifYyQrFLRYsSDqpHY87CYXiQG9ZHeso/edit#gid=0 ### Figma https://www.figma.com/file/SVbXU00FhjztekD8AiVukK/UIKit_Work-file_React?node-id=1950%3A5345&mode=dev ### Changelog - Added `typingIndicatorTypes` global option - Added `TypingIndicatorType` enum ``` export declare enum TypingIndicatorType { Text = "text", Bubble = "bubble" } <App appId={appId} userId={userId} ... uikitOptions={{ groupChannel: { // Below turns on both bubble and text typing indicators. Default is Text only. typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]), } }} /> ``` - Added `TypingIndicatorBubble` ``` const moveScroll = (): void => { const current = scrollRef?.current; if (current) { const bottom = current.scrollHeight - current.scrollTop - current.offsetHeight; if (scrollBottom < bottom && scrollBottom < SCROLL_BUFFER) { // Move the scroll as much as the height of the message has changed current.scrollTop += bottom - scrollBottom; } } }; return ( <TypingIndicatorBubble typingMembers={typingMembers} handleScroll={moveScroll} // Scroll to the rendered typing indicator message IFF current scroll is bottom. /> ); ``` [UIKIT-4563]: https://sendbird.atlassian.net/browse/UIKIT-4563?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Hyungu Kang | Airen <[email protected]>
1 parent 8d582f0 commit eeebbdc

File tree

33 files changed

+378
-207
lines changed

33 files changed

+378
-207
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
},
6969
"dependencies": {
7070
"@sendbird/chat": "^4.10.1",
71-
"@sendbird/uikit-tools": "0.0.1-alpha.40",
71+
"@sendbird/uikit-tools": "0.0.1-alpha.43",
7272
"css-vars-ponyfill": "^2.3.2",
7373
"date-fns": "^2.16.1",
7474
"dompurify": "^3.0.1"

‎rollup.module-exports.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ export default {
197197
'ui/Toggle': 'src/ui/Toggle/index.tsx',
198198
'ui/Tooltip': 'src/ui/Tooltip/index.tsx',
199199
'ui/TooltipWrapper': 'src/ui/TooltipWrapper/index.tsx',
200+
'ui/TypingIndicatorBubble': 'src/ui/TypingIndicatorBubble/index.tsx',
200201
'ui/UnknownMessageItemBody': 'src/ui/UnknownMessageItemBody/index.tsx',
201202
'ui/UserListItem': 'src/ui/UserListItem/index.tsx',
202203
'ui/UserProfile': 'src/ui/UserProfile/index.tsx',

‎src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,6 @@ export { default as sendbirdSelectors } from './lib/selectors';
2020
// for legacy parity, slowly remove
2121
export { default as sendBirdSelectors } from './lib/selectors';
2222
export { default as useSendbirdStateContext } from './hooks/useSendbirdStateContext';
23+
24+
// Public enum included in AppProps
25+
export { TypingIndicatorType } from './types';

‎src/lib/Sendbird.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps, React.Pro
112112
}
113113

114114
export function SendbirdProvider(props: SendbirdProviderProps) {
115-
const localConfigs = uikitConfigMapper({
115+
const localConfigs: UIKitOptions = uikitConfigMapper({
116116
legacyConfig: {
117117
replyType: props.replyType,
118118
isMentionEnabled: props.isMentionEnabled,
@@ -371,6 +371,7 @@ const SendbirdSDK = ({
371371
enableTypingIndicator: configs.groupChannel.channel.enableTypingIndicator,
372372
enableDocument: configs.groupChannel.channel.input.enableDocument,
373373
threadReplySelectType: getCaseResolvedThreadReplySelectType(configs.groupChannel.channel.threadReplySelectType).lowerCase,
374+
typingIndicatorTypes: configs.groupChannel.channel.typingIndicatorTypes,
374375
},
375376
openChannel: {
376377
enableOgtag:

‎src/lib/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ export interface SendBirdStateConfig {
100100
enableTypingIndicator: SBUConfig['groupChannel']['channel']['enableTypingIndicator'];
101101
enableDocument: SBUConfig['groupChannel']['channel']['input']['enableDocument'];
102102
threadReplySelectType: SBUConfig['groupChannel']['channel']['threadReplySelectType'];
103+
typingIndicatorTypes: SBUConfig['groupChannel']['channel']['typingIndicatorTypes'];
103104
},
104105
openChannel: {
105106
enableOgtag: SBUConfig['openChannel']['channel']['enableOgtag'];

‎src/lib/utils/uikitConfigMapper.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export function uikitConfigMapper({
3434
input: {
3535
enableDocument: uikitOptions.groupChannel?.input?.enableDocument,
3636
},
37+
typingIndicatorTypes: uikitOptions.groupChannel?.typingIndicatorTypes,
3738
},
3839
groupChannelList: {
3940
enableTypingIndicator: uikitOptions.groupChannelList?.enableTypingIndicator ?? isTypingIndicatorEnabledOnChannelList,

‎src/modules/App/stories/index.stories.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import MessageSearch from '../../MessageSearch';
1212
import { withSendBird } from '../../..';
1313
import { sendbirdSelectors } from '../../..';
1414
import { fitPageSize } from './utils';
15+
import { TypingIndicatorType } from '../../../types';
1516

1617
const appId = process.env.STORYBOOK_APP_ID;
1718
const userId = 'sendbird';
@@ -282,8 +283,13 @@ export const user1 = () => fitPageSize(
282283
isMentionEnabled
283284
isVoiceMessageEnabled
284285
isMultipleFilesMessageEnabled
285-
isTypingIndicatorEnabledOnChannelList
286286
isMessageReceiptStatusEnabledOnChannelList
287+
uikitOptions={{
288+
groupChannel: {
289+
// enableTypingIndicator: false,
290+
typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
291+
}
292+
}}
287293
/>
288294
);
289295
export const user2 = () => fitPageSize(
@@ -328,6 +334,12 @@ export const user3 = () => fitPageSize(
328334
isMultipleFilesMessageEnabled
329335
isTypingIndicatorEnabledOnChannelList
330336
isMessageReceiptStatusEnabledOnChannelList
337+
uikitOptions={{
338+
groupChannel: {
339+
// enableTypingIndicator: false,
340+
typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
341+
}
342+
}}
331343
/>
332344
);
333345
export const user4 = () => fitPageSize(

‎src/modules/App/stories/integrated.stories.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Icon, { IconTypes, IconColors } from '../../../ui/Icon';
1010
import Checkbox from '../../../ui/Checkbox';
1111
import Button, { ButtonSizes, ButtonTypes } from '../../../ui/Button';
1212
import { MediaQueryProvider } from '../../../lib/MediaQueryContext';
13+
import { TypingIndicatorType } from '../../../types';
1314

1415
const STORAGE_KEY = 'sendbird-integrated-app-v1-groupchannel';
1516

@@ -345,6 +346,12 @@ export const GroupChannel = () => {
345346
isMessageReceiptStatusEnabledOnChannelList={sampleOptions.messageStatus}
346347
isVoiceMessageEnabled={sampleOptions.isVoiceMessageEnabled}
347348
isMultipleFilesMessageEnabled={sampleOptions.multipleFiles}
349+
uikitOptions={{
350+
groupChannel: {
351+
// enableTypingIndicator: false,
352+
typingIndicatorTypes: new Set([TypingIndicatorType.Bubble, TypingIndicatorType.Text]),
353+
}
354+
}}
348355
imageCompression={{ compressionRate: sampleOptions.imageCompression ? 0.7 : 1 }}
349356
replyType={sampleOptions.replyType}
350357
config={{ logLevel: 'all' }}

‎src/modules/Channel/components/ChannelUI/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import ChannelHeader from '../ChannelHeader';
1010
import MessageList from '../MessageList';
1111
import TypingIndicator from '../TypingIndicator';
1212
import MessageInputWrapper from '../MessageInput';
13-
import { RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
13+
import { RenderCustomSeparatorProps, RenderMessageProps, TypingIndicatorType } from '../../../../types';
1414

1515
export interface ChannelUIProps {
1616
isLoading?: boolean;
@@ -126,9 +126,13 @@ const ChannelUI: React.FC<ChannelUIProps> = ({
126126
<div className="sendbird-conversation__footer__typing-indicator">
127127
{
128128
renderTypingIndicator?.()
129-
|| globalStore?.config?.groupChannel?.enableTypingIndicator && (
129+
|| (
130+
globalStore?.config?.groupChannel?.enableTypingIndicator
131+
&& globalStore?.config?.groupChannel?.typingIndicatorTypes?.has(TypingIndicatorType.Text)
132+
&& (
130133
<TypingIndicator />
131134
)
135+
)
132136
}
133137
{
134138
!isOnline && (

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useChannelContext } from '../../context/ChannelProvider';
66
import PlaceHolder, { PlaceHolderTypes } from '../../../../ui/PlaceHolder';
77
import Icon, { IconTypes, IconColors } from '../../../../ui/Icon';
88
import Message from '../Message';
9-
import { EveryMessage, RenderCustomSeparatorProps, RenderMessageProps } from '../../../../types';
9+
import { EveryMessage, RenderCustomSeparatorProps, RenderMessageProps, TypingIndicatorType } from '../../../../types';
1010
import { isAboutSame } from '../../context/utils';
1111
import { getMessagePartsInfo } from './getMessagePartsInfo';
1212
import UnreadCount from '../UnreadCount';
@@ -19,6 +19,7 @@ import { useHandleOnScrollCallback } from '../../../../hooks/useHandleOnScrollCa
1919
import { useSetScrollToBottom } from './hooks/useSetScrollToBottom';
2020
import { useScrollBehavior } from './hooks/useScrollBehavior';
2121
import * as utils from '../../context/utils';
22+
import TypingIndicatorBubble from '../../../../ui/TypingIndicatorBubble';
2223

2324
const SCROLL_BOTTOM_PADDING = 50;
2425

@@ -61,6 +62,7 @@ const MessageList: React.FC<MessageListProps> = ({
6162
isScrolled,
6263
unreadSince,
6364
unreadSinceDate,
65+
typingMembers,
6466
} = useChannelContext();
6567

6668
const store = useSendbirdStateContext();
@@ -240,6 +242,15 @@ const MessageList: React.FC<MessageListProps> = ({
240242
);
241243
})
242244
}
245+
{
246+
!hasMoreNext
247+
&& store?.config?.groupChannel?.enableTypingIndicator
248+
&& store?.config?.groupChannel?.typingIndicatorTypes?.has(TypingIndicatorType.Bubble)
249+
&& <TypingIndicatorBubble
250+
typingMembers={typingMembers}
251+
handleScroll={moveScroll}
252+
/>
253+
}
243254
{/* show frozen notifications, */}
244255
{/* show new message notifications, */}
245256
</div>

0 commit comments

Comments
 (0)