Skip to content

feat: Horizontal scroll support for suggested replies #1061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 2, 2024
Merged

feat: Horizontal scroll support for suggested replies #1061

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9a7bf8b
horizontal scroll support for suggested replies
chohongm Apr 18, 2024
bfa63df
chore: horizontal scroll view (#1076)
bang9 Apr 26, 2024
c79182b
remove unused
chohongm Apr 30, 2024
1102e8a
put back padding to original
chohongm Apr 30, 2024
4d5a98b
chore: revert testing app configs
bang9 May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@
},
"dependencies": {
"@sendbird/chat": "^4.12.3",
"@sendbird/react-uikit-message-template-view": "0.0.1-alpha.72",
"@sendbird/uikit-tools": "0.0.1-alpha.72",
"@sendbird/react-uikit-message-template-view": "0.0.1-alpha.73",
"@sendbird/uikit-tools": "0.0.1-alpha.73",
"css-vars-ponyfill": "^2.3.2",
"date-fns": "^2.16.1",
"dompurify": "^3.0.1"
Expand Down
1 change: 1 addition & 0 deletions src/lib/Sendbird.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,7 @@ const SendbirdSDK = ({
enableFeedback: configs.groupChannel.channel.enableFeedback,
enableSuggestedReplies: configs.groupChannel.channel.enableSuggestedReplies,
showSuggestedRepliesFor: configs.groupChannel.channel.showSuggestedRepliesFor,
suggestedRepliesDirection: configs.groupChannel.channel.suggestedRepliesDirection,
},
groupChannelList: {
enableTypingIndicator: configs.groupChannel.channelList.enableTypingIndicator,
Expand Down
1 change: 1 addition & 0 deletions src/lib/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export interface SendBirdStateConfig {
enableFeedback: SBUConfig['groupChannel']['channel']['enableFeedback'];
enableSuggestedReplies: SBUConfig['groupChannel']['channel']['enableSuggestedReplies'];
showSuggestedRepliesFor: SBUConfig['groupChannel']['channel']['showSuggestedRepliesFor'];
suggestedRepliesDirection: SBUConfig['groupChannel']['channel']['suggestedRepliesDirection'];
},
groupChannelList: {
enableTypingIndicator: SBUConfig['groupChannel']['channelList']['enableTypingIndicator'];
Expand Down
1 change: 1 addition & 0 deletions src/lib/utils/uikitConfigMapper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export function uikitConfigMapper({
enableFeedback: uikitOptions.groupChannel?.enableFeedback,
enableSuggestedReplies: uikitOptions.groupChannel?.enableSuggestedReplies,
showSuggestedRepliesFor: uikitOptions.groupChannel?.showSuggestedRepliesFor,
suggestedRepliesDirection: uikitOptions.groupChannel?.suggestedRepliesDirection,
},
groupChannelList: {
enableTypingIndicator: uikitOptions.groupChannelList?.enableTypingIndicator ?? isTypingIndicatorEnabledOnChannelList,
Expand Down
15 changes: 12 additions & 3 deletions src/modules/GroupChannel/components/Message/MessageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,13 @@ const MessageView = (props: MessageViewProps) => {
const { dateLocale, stringSet } = useLocalization();
const globalStore = useSendbirdStateContext();

const { userId, isOnline, userMention, logger, groupChannel } = globalStore.config;
const {
userId,
isOnline,
userMention,
logger,
groupChannel,
} = globalStore.config;
const maxUserMentionCount = userMention?.maxMentionCount || MAX_USER_MENTION_COUNT;
const maxUserSuggestionCount = userMention?.maxSuggestionCount || MAX_USER_SUGGESTION_COUNT;

Expand All @@ -168,8 +174,10 @@ const MessageView = (props: MessageViewProps) => {
const [mentionSuggestedUsers, setMentionSuggestedUsers] = useState([]);
const editMessageInputRef = useRef(null);
const messageScrollRef = useRef(null);

const displaySuggestedMentionList = isOnline && groupChannel.enableMention && mentionNickname.length > 0 && !isDisabledBecauseFrozen(channel) && !isDisabledBecauseMuted(channel);
const displaySuggestedMentionList = isOnline
&& groupChannel.enableMention && mentionNickname.length > 0
&& !isDisabledBecauseFrozen(channel)
&& !isDisabledBecauseMuted(channel);

const mentionNodes = useDirtyGetMentions({ ref: editMessageInputRef }, { logger });
const ableMention = mentionNodes?.length < maxUserMentionCount;
Expand Down Expand Up @@ -276,6 +284,7 @@ const MessageView = (props: MessageViewProps) => {
replyOptions: getSuggestedReplies(message),
onSendMessage: sendUserMessage,
message,
type: groupChannel?.suggestedRepliesDirection,
})
}
{/* Modal */}
Expand Down
4 changes: 2 additions & 2 deletions src/modules/GroupChannel/components/MessageList/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
position: relative;
height: 100%;
overflow-x: hidden;
padding: 0px 24px;
padding: 0 $messages-padding;
@include mobile() {
padding: 0px 12px;
padding: 0 $messages-padding-mobile;
}
}
.sendbird-separator,
Expand Down
44 changes: 35 additions & 9 deletions src/modules/GroupChannel/components/SuggestedReplies/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,44 @@
@import '../../../../styles/variables';

.sendbird-suggested-replies {
position: relative;
display: flex;
margin-top: 8px;
&.vertical {
justify-content: flex-end;
align-items: flex-end;
flex-wrap: wrap;
flex-direction: column;
.sendbird-suggested-replies__option:not(:first-child) {
margin-top: 8px;
}
}

&.horizontal {
display: flex;
flex-direction: row;
overflow-x: scroll;

margin-left: -$messages-padding;
margin-right: -$messages-padding;
padding-left: $messages-padding;
padding-right: $messages-padding;
@include mobile() {
margin-left: -$messages-padding-mobile;
margin-right: -$messages-padding-mobile;
padding-left: calc(40px + $messages-padding-mobile);
padding-right: $messages-padding-mobile;
}
.sendbird-suggested-replies__option:not(:last-child) {
margin-right: 8px;
}
}
&::-webkit-scrollbar {
display: none;
}
@include themed() {
font-family: var(--sendbird-font-family-default);
}
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 8px;
margin-top: 16px;
flex-direction: column;
}

.sendbird-suggested-replies__option {
Expand Down
34 changes: 17 additions & 17 deletions src/modules/GroupChannel/components/SuggestedReplies/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ export interface SuggestedRepliesProps {
replyOptions: string[];
onSendMessage: ({ message }: { message: string }) => void;
message: BaseMessage;
type?: 'vertical' | 'horizontal';
gap?: number;
}

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

const onClickReply = (
Expand All @@ -24,22 +26,20 @@ const SuggestedReplies = ({ replyOptions, onSendMessage }: SuggestedRepliesProps
return null;
}

return (
<div className="sendbird-suggested-replies">
{replyOptions.map((option: string, index: number) => {
return (
<div
className="sendbird-suggested-replies__option"
id={option}
key={index + option}
onClick={(e) => onClickReply(e, option)}
>
{option}
</div>
);
})}
</div>
);
const children = replyOptions.map((option: string, index: number) => {
return (
<div
className="sendbird-suggested-replies__option"
id={option}
key={index + option}
onClick={(e) => onClickReply(e, option)}
>
{option}
</div>
);
});

return <div className={`sendbird-suggested-replies ${type}`}>{children}</div>;
};

export default SuggestedReplies;
3 changes: 3 additions & 0 deletions src/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
@import './color-themes';
@import './media-query';

$messages-padding: 24px;
$messages-padding-mobile: 12px;
24 changes: 12 additions & 12 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2635,20 +2635,20 @@ __metadata:
languageName: node
linkType: hard

"@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.72":
version: 0.0.1-alpha.72
resolution: "@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.72"
"@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.73":
version: 0.0.1-alpha.73
resolution: "@sendbird/react-uikit-message-template-view@npm:0.0.1-alpha.73"
dependencies:
"@sendbird/uikit-message-template": ^0.0.1-alpha.72
"@sendbird/uikit-message-template": ^0.0.1-alpha.73
peerDependencies:
"@sendbird/chat": ">=4.3.0 <5"
react: ">=16.8.6"
react-dom: ">=16.8.6"
checksum: f08023a2f679c942fbce73288a40752e7c1a8f03b487b4dffa2e76495f1078706cab3db41e0f02468569717dc9b84f26e8d0addbdc80bd5d9ae1184d3ec33c66
checksum: 22cd8e83eda3e63f3463a07ae73678608087232719230fabc3ccbd5b6b9112bcd5c0ec2bd8a52e883230d91de9f2352d1e98b61afb4e400523cbd3c7f58a5f4f
languageName: node
linkType: hard

"@sendbird/uikit-message-template@npm:^0.0.1-alpha.72":
"@sendbird/uikit-message-template@npm:^0.0.1-alpha.73":
version: 0.0.1-alpha.73
resolution: "@sendbird/uikit-message-template@npm:0.0.1-alpha.73"
peerDependencies:
Expand Down Expand Up @@ -2676,8 +2676,8 @@ __metadata:
"@rollup/plugin-replace": ^5.0.4
"@rollup/plugin-typescript": ^11.1.5
"@sendbird/chat": ^4.12.3
"@sendbird/react-uikit-message-template-view": 0.0.1-alpha.72
"@sendbird/uikit-tools": 0.0.1-alpha.72
"@sendbird/react-uikit-message-template-view": 0.0.1-alpha.73
"@sendbird/uikit-tools": 0.0.1-alpha.73
"@storybook/addon-essentials": ^8.0.9
"@storybook/react-vite": ^8.0.9
"@svgr/rollup": ^8.1.0
Expand Down Expand Up @@ -2734,13 +2734,13 @@ __metadata:
languageName: unknown
linkType: soft

"@sendbird/uikit-tools@npm:0.0.1-alpha.72":
version: 0.0.1-alpha.72
resolution: "@sendbird/uikit-tools@npm:0.0.1-alpha.72"
"@sendbird/uikit-tools@npm:0.0.1-alpha.73":
version: 0.0.1-alpha.73
resolution: "@sendbird/uikit-tools@npm:0.0.1-alpha.73"
peerDependencies:
"@sendbird/chat": ">=4.10.5 <5"
react: ">=16.8.6"
checksum: a209342267a8ddbbdd9d310a42def22d54a20ad30a54002de893480ed0bc26c0d3ebb7614ceb39340f3e6eb0d7bf5067769a0b73aca135b9e954580a8f5b08c0
checksum: e75a6cde2a645d1fcc535fd65001337ba40ce68c87f30e5a0c8ab2c0ca9df69684988f9c9c0e147ceeb26efee4f157cd2e27d692de091cf320e12d9e70e9258b
languageName: node
linkType: hard

Expand Down