Skip to content

Commit 6122270

Browse files
chohongmbang9
chohongm
and
bang9
authored
feat: Horizontal scroll support for suggested replies (#1061)
Fixes: [AC-1727](https://sendbird.atlassian.net/browse/AC-1727) ### Docs https://sendbird.atlassian.net/wiki/spaces/SDK/pages/2336523995/Meeting+note+-+Horizontal+Suggested+Replies+-+240422 ### Figma https://www.figma.com/file/SVbXU00FhjztekD8AiVukK/UIKit_Work-file_React?node-id=2440%3A6306&mode=dev ## Changelogs ### Features * Added `suggestedRepliesDirection` global option which serves as vertical/horizontal scroll option for `SuggestedReplies` * How to use? ```tsx <App appId={appId} userId={userId} uikitOptions={{ groupChannel: { // Below turns on the `SuggestedReplies` feature (see v3.8.0 release changelog). Default value is false. enableSuggestedReplies: true, // Below changes scroll direction from horizontal to vertical. suggestedRepliesDirection: 'vertical' } }} /> ``` [AC-1727]: https://sendbird.atlassian.net/browse/AC-1727?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: Hyungu Kang | Airen <gusrn1423@naver.com>
1 parent 0a9d34f commit 6122270

File tree

10 files changed

+86
-45
lines changed

10 files changed

+86
-45
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@
6868
},
6969
"dependencies": {
7070
"@sendbird/chat": "^4.12.3",
71-
"@sendbird/react-uikit-message-template-view": "0.0.1-alpha.72",
72-
"@sendbird/uikit-tools": "0.0.1-alpha.72",
71+
"@sendbird/react-uikit-message-template-view": "0.0.1-alpha.73",
72+
"@sendbird/uikit-tools": "0.0.1-alpha.73",
7373
"css-vars-ponyfill": "^2.3.2",
7474
"date-fns": "^2.16.1",
7575
"dompurify": "^3.0.1"

‎src/lib/Sendbird.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,7 @@ const SendbirdSDK = ({
392392
enableFeedback: configs.groupChannel.channel.enableFeedback,
393393
enableSuggestedReplies: configs.groupChannel.channel.enableSuggestedReplies,
394394
showSuggestedRepliesFor: configs.groupChannel.channel.showSuggestedRepliesFor,
395+
suggestedRepliesDirection: configs.groupChannel.channel.suggestedRepliesDirection,
395396
},
396397
groupChannelList: {
397398
enableTypingIndicator: configs.groupChannel.channelList.enableTypingIndicator,

‎src/lib/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export interface SendBirdStateConfig {
107107
enableFeedback: SBUConfig['groupChannel']['channel']['enableFeedback'];
108108
enableSuggestedReplies: SBUConfig['groupChannel']['channel']['enableSuggestedReplies'];
109109
showSuggestedRepliesFor: SBUConfig['groupChannel']['channel']['showSuggestedRepliesFor'];
110+
suggestedRepliesDirection: SBUConfig['groupChannel']['channel']['suggestedRepliesDirection'];
110111
},
111112
groupChannelList: {
112113
enableTypingIndicator: SBUConfig['groupChannel']['channelList']['enableTypingIndicator'];

‎src/lib/utils/uikitConfigMapper.ts

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export function uikitConfigMapper({
3737
enableFeedback: uikitOptions.groupChannel?.enableFeedback,
3838
enableSuggestedReplies: uikitOptions.groupChannel?.enableSuggestedReplies,
3939
showSuggestedRepliesFor: uikitOptions.groupChannel?.showSuggestedRepliesFor,
40+
suggestedRepliesDirection: uikitOptions.groupChannel?.suggestedRepliesDirection,
4041
},
4142
groupChannelList: {
4243
enableTypingIndicator: uikitOptions.groupChannelList?.enableTypingIndicator ?? isTypingIndicatorEnabledOnChannelList,

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

+12-3
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,13 @@ const MessageView = (props: MessageViewProps) => {
152152
const { dateLocale, stringSet } = useLocalization();
153153
const globalStore = useSendbirdStateContext();
154154

155-
const { userId, isOnline, userMention, logger, groupChannel } = globalStore.config;
155+
const {
156+
userId,
157+
isOnline,
158+
userMention,
159+
logger,
160+
groupChannel,
161+
} = globalStore.config;
156162
const maxUserMentionCount = userMention?.maxMentionCount || MAX_USER_MENTION_COUNT;
157163
const maxUserSuggestionCount = userMention?.maxSuggestionCount || MAX_USER_SUGGESTION_COUNT;
158164

@@ -168,8 +174,10 @@ const MessageView = (props: MessageViewProps) => {
168174
const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
169175
const editMessageInputRef = useRef(null);
170176
const messageScrollRef = useRef(null);
171-
172-
const displaySuggestedMentionList = isOnline && groupChannel.enableMention && mentionNickname.length > 0 && !isDisabledBecauseFrozen(channel) && !isDisabledBecauseMuted(channel);
177+
const displaySuggestedMentionList = isOnline
178+
&& groupChannel.enableMention && mentionNickname.length > 0
179+
&& !isDisabledBecauseFrozen(channel)
180+
&& !isDisabledBecauseMuted(channel);
173181

174182
const mentionNodes = useDirtyGetMentions({ ref: editMessageInputRef }, { logger });
175183
const ableMention = mentionNodes?.length < maxUserMentionCount;
@@ -276,6 +284,7 @@ const MessageView = (props: MessageViewProps) => {
276284
replyOptions: getSuggestedReplies(message),
277285
onSendMessage: sendUserMessage,
278286
message,
287+
type: groupChannel?.suggestedRepliesDirection,
279288
})
280289
}
281290
{/* Modal */}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
position: relative;
1111
height: 100%;
1212
overflow-x: hidden;
13-
padding: 0px 24px;
13+
padding: 0 $messages-padding;
1414
@include mobile() {
15-
padding: 0px 12px;
15+
padding: 0 $messages-padding-mobile;
1616
}
1717
}
1818
.sendbird-separator,

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

+35-9
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,44 @@
55
@import '../../../../styles/variables';
66

77
.sendbird-suggested-replies {
8+
position: relative;
9+
display: flex;
10+
margin-top: 8px;
11+
&.vertical {
12+
justify-content: flex-end;
13+
align-items: flex-end;
14+
flex-wrap: wrap;
15+
flex-direction: column;
16+
.sendbird-suggested-replies__option:not(:first-child) {
17+
margin-top: 8px;
18+
}
19+
}
20+
21+
&.horizontal {
22+
display: flex;
23+
flex-direction: row;
24+
overflow-x: scroll;
25+
26+
margin-left: -$messages-padding;
27+
margin-right: -$messages-padding;
28+
padding-left: $messages-padding;
29+
padding-right: $messages-padding;
30+
@include mobile() {
31+
margin-left: -$messages-padding-mobile;
32+
margin-right: -$messages-padding-mobile;
33+
padding-left: calc(40px + $messages-padding-mobile);
34+
padding-right: $messages-padding-mobile;
35+
}
36+
.sendbird-suggested-replies__option:not(:last-child) {
37+
margin-right: 8px;
38+
}
39+
}
40+
&::-webkit-scrollbar {
41+
display: none;
42+
}
843
@include themed() {
944
font-family: var(--sendbird-font-family-default);
1045
}
11-
position: relative;
12-
display: flex;
13-
justify-content: flex-end;
14-
align-items: flex-end;
15-
flex-wrap: wrap;
16-
column-gap: 10px;
17-
row-gap: 8px;
18-
margin-top: 16px;
19-
flex-direction: column;
2046
}
2147

2248
.sendbird-suggested-replies__option {

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

+17-17
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ export interface SuggestedRepliesProps {
66
replyOptions: string[];
77
onSendMessage: ({ message }: { message: string }) => void;
88
message: BaseMessage;
9+
type?: 'vertical' | 'horizontal';
10+
gap?: number;
911
}
1012

11-
const SuggestedReplies = ({ replyOptions, onSendMessage }: SuggestedRepliesProps) => {
13+
const SuggestedReplies = ({ replyOptions, onSendMessage, type = 'vertical' }: SuggestedRepliesProps) => {
1214
const [replied, setReplied] = useState<boolean>(false);
1315

1416
const onClickReply = (
@@ -24,22 +26,20 @@ const SuggestedReplies = ({ replyOptions, onSendMessage }: SuggestedRepliesProps
2426
return null;
2527
}
2628

27-
return (
28-
<div className="sendbird-suggested-replies">
29-
{replyOptions.map((option: string, index: number) => {
30-
return (
31-
<div
32-
className="sendbird-suggested-replies__option"
33-
id={option}
34-
key={index + option}
35-
onClick={(e) => onClickReply(e, option)}
36-
>
37-
{option}
38-
</div>
39-
);
40-
})}
41-
</div>
42-
);
29+
const children = replyOptions.map((option: string, index: number) => {
30+
return (
31+
<div
32+
className="sendbird-suggested-replies__option"
33+
id={option}
34+
key={index + option}
35+
onClick={(e) => onClickReply(e, option)}
36+
>
37+
{option}
38+
</div>
39+
);
40+
});
41+
42+
return <div className={`sendbird-suggested-replies ${type}`}>{children}</div>;
4343
};
4444

4545
export default SuggestedReplies;

‎src/styles/_variables.scss

+3
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
@import './color-themes';
22
@import './media-query';
3+
4+
$messages-padding: 24px;
5+
$messages-padding-mobile: 12px;

‎yarn.lock

+12-12
Original file line numberDiff line numberDiff line change
@@ -2635,20 +2635,20 @@ __metadata:
26352635
languageName: node
26362636
linkType: hard
26372637

2638-
"@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.72":
2639-
version: 0.0.1-alpha.72
2640-
resolution: "@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.72"
2638+
"@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.73":
2639+
version: 0.0.1-alpha.73
2640+
resolution: "@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.73"
26412641
dependencies:
2642-
"@sendbird/uikit-message-template": ^0.0.1-alpha.72
2642+
"@sendbird/uikit-message-template": ^0.0.1-alpha.73
26432643
peerDependencies:
26442644
"@sendbird/chat": ">=4.3.0 <5"
26452645
react: ">=16.8.6"
26462646
react-dom: ">=16.8.6"
2647-
checksum: f08023a2f679c942fbce73288a40752e7c1a8f03b487b4dffa2e76495f1078706cab3db41e0f02468569717dc9b84f26e8d0addbdc80bd5d9ae1184d3ec33c66
2647+
checksum: 22cd8e83eda3e63f3463a07ae73678608087232719230fabc3ccbd5b6b9112bcd5c0ec2bd8a52e883230d91de9f2352d1e98b61afb4e400523cbd3c7f58a5f4f
26482648
languageName: node
26492649
linkType: hard
26502650

2651-
"@sendbird/uikit-message-template@npm:^0.0.1-alpha.72":
2651+
"@sendbird/uikit-message-template@npm:^0.0.1-alpha.73":
26522652
version: 0.0.1-alpha.73
26532653
resolution: "@sendbird/uikit-message-template@npm:0.0.1-alpha.73"
26542654
peerDependencies:
@@ -2676,8 +2676,8 @@ __metadata:
26762676
"@rollup/plugin-replace": ^5.0.4
26772677
"@rollup/plugin-typescript": ^11.1.5
26782678
"@sendbird/chat": ^4.12.3
2679-
"@sendbird/react-uikit-message-template-view": 0.0.1-alpha.72
2680-
"@sendbird/uikit-tools": 0.0.1-alpha.72
2679+
"@sendbird/react-uikit-message-template-view": 0.0.1-alpha.73
2680+
"@sendbird/uikit-tools": 0.0.1-alpha.73
26812681
"@storybook/addon-essentials": ^8.0.9
26822682
"@storybook/react-vite": ^8.0.9
26832683
"@svgr/rollup": ^8.1.0
@@ -2734,13 +2734,13 @@ __metadata:
27342734
languageName: unknown
27352735
linkType: soft
27362736

2737-
"@sendbird/uikit-tools@npm:0.0.1-alpha.72":
2738-
version: 0.0.1-alpha.72
2739-
resolution: "@sendbird/uikit-tools@npm:0.0.1-alpha.72"
2737+
"@sendbird/uikit-tools@npm:0.0.1-alpha.73":
2738+
version: 0.0.1-alpha.73
2739+
resolution: "@sendbird/uikit-tools@npm:0.0.1-alpha.73"
27402740
peerDependencies:
27412741
"@sendbird/chat": ">=4.10.5 <5"
27422742
react: ">=16.8.6"
2743-
checksum: a209342267a8ddbbdd9d310a42def22d54a20ad30a54002de893480ed0bc26c0d3ebb7614ceb39340f3e6eb0d7bf5067769a0b73aca135b9e954580a8f5b08c0
2743+
checksum: e75a6cde2a645d1fcc535fd65001337ba40ce68c87f30e5a0c8ab2c0ca9df69684988f9c9c0e147ceeb26efee4f157cd2e27d692de091cf320e12d9e70e9258b
27442744
languageName: node
27452745
linkType: hard
27462746

0 commit comments

Comments
 (0)