From 9a7bf8b2ba954fc2ca47404a80130aff0c4f03c2 Mon Sep 17 00:00:00 2001 From: Liam Hongman Cho Date: Thu, 18 Apr 2024 16:38:42 +0900 Subject: [PATCH 1/5] horizontal scroll support for suggested replies --- package.json | 4 +- src/lib/Sendbird.tsx | 1 + src/lib/types.ts | 1 + src/lib/utils/uikitConfigMapper.ts | 1 + .../components/Message/MessageView.tsx | 15 +- .../components/SuggestedReplies/index.scss | 30 ++- .../components/SuggestedReplies/index.tsx | 208 ++++++++++++++++-- yarn.lock | 24 +- 8 files changed, 241 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 91adb1996..0a4c536b6 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/lib/Sendbird.tsx b/src/lib/Sendbird.tsx index 0b6e994bf..386f3cc26 100644 --- a/src/lib/Sendbird.tsx +++ b/src/lib/Sendbird.tsx @@ -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, diff --git a/src/lib/types.ts b/src/lib/types.ts index 0efcb2d7d..0e622c9fa 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -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']; diff --git a/src/lib/utils/uikitConfigMapper.ts b/src/lib/utils/uikitConfigMapper.ts index 953d9726a..d98f8766c 100644 --- a/src/lib/utils/uikitConfigMapper.ts +++ b/src/lib/utils/uikitConfigMapper.ts @@ -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, diff --git a/src/modules/GroupChannel/components/Message/MessageView.tsx b/src/modules/GroupChannel/components/Message/MessageView.tsx index aa58aeb97..8b77cc777 100644 --- a/src/modules/GroupChannel/components/Message/MessageView.tsx +++ b/src/modules/GroupChannel/components/Message/MessageView.tsx @@ -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; @@ -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; @@ -276,6 +284,7 @@ const MessageView = (props: MessageViewProps) => { replyOptions: getSuggestedReplies(message), onSendMessage: sendUserMessage, message, + type: groupChannel?.suggestedRepliesDirection, }) } {/* Modal */} diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.scss b/src/modules/GroupChannel/components/SuggestedReplies/index.scss index 1304b4ee1..1f4e78691 100644 --- a/src/modules/GroupChannel/components/SuggestedReplies/index.scss +++ b/src/modules/GroupChannel/components/SuggestedReplies/index.scss @@ -5,25 +5,35 @@ @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 { + width: fit-content; + margin-left: 64px; + .sendbird-suggested-replies__option:not(:last-child) { + margin-right: 8px; + } + } @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 { white-space: nowrap; height: 32px; font-size: 12px; - padding: 0 14px; + padding: 0 70px; display: flex; align-items: center; border-radius: 18px; diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx index 6505bfc89..b5632b31f 100644 --- a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx +++ b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx @@ -1,14 +1,184 @@ import './index.scss'; -import React, { useState } from 'react'; +import React, { useRef, useState } from 'react'; import { BaseMessage } from '@sendbird/chat/message'; export interface SuggestedRepliesProps { replyOptions: string[]; onSendMessage: ({ message }: { message: string }) => void; message: BaseMessage; + type?: 'vertical' | 'horizontal'; + gap?: number; } -const SuggestedReplies = ({ replyOptions, onSendMessage }: SuggestedRepliesProps) => { +interface Position { + x: number; + y: number; +} + +interface DraggingInfo { + scrolling: boolean; + dragging: boolean; + startPos: Position | null; + offset: number; + translateX: number; +} + +const SIDE_PADDING_WIDTH = 24; +const PROFILE_WIDTH = 40; + +const DraggableSuggestedReplies = ({ children }) => { + const carouselRef = useRef(null); + const SCREEN_WIDTH = window.innerWidth; + const DEFAULT_SIZE = SCREEN_WIDTH - (SIDE_PADDING_WIDTH + PROFILE_WIDTH + SIDE_PADDING_WIDTH); + const carouselWidth = carouselRef.current?.clientWidth ?? 0; + + const [draggingInfo, setDraggingInfo] = useState({ + scrolling: false, + dragging: false, + startPos: null, + offset: 0, + translateX: 0, + }); + + const handleMouseDown = (event: React.MouseEvent) => { + setDraggingInfo((props) => ({ + ...props, + scrolling: false, + dragging: true, + startPos: { + x: event.clientX, + y: event.clientY, + }, + })); + }; + + const handleMouseMove = (event: React.MouseEvent) => { + if (!draggingInfo.dragging || !draggingInfo.startPos) return; + const currentX = event.clientX; + const newOffset = currentX - draggingInfo.startPos.x; + setDraggingInfo({ + ...draggingInfo, + offset: newOffset, + }); + }; + + const handleMouseUp = () => { + if (!draggingInfo.dragging) return; + handleDragEnd(); + unblockScroll(); + }; + + const blockScroll = () => { + if (carouselRef.current) { + carouselRef.current.style.touchAction = 'pan-x'; + } + }; + + const unblockScroll = () => { + if (carouselRef.current) { + carouselRef.current.style.touchAction = 'pan-y'; + } + }; + + const handleTouchStart = (event: React.TouchEvent) => { + setDraggingInfo((props) => ({ + ...props, + scrolling: false, + dragging: false, + startPos: { + x: event.touches[0].clientX, + y: event.touches[0].clientY, + }, + })); + }; + + const handleTouchMove = (event: React.TouchEvent) => { + if (!draggingInfo.startPos || draggingInfo.scrolling) return; + + const startPos = draggingInfo.startPos; + const [touchMoveX, touchMoveY] = [event.touches[0].clientX, event.touches[0].clientY]; + const [deltaX, deltaY] = [Math.abs(touchMoveX - startPos.x), Math.abs(touchMoveY - startPos.y)]; + const newOffset = touchMoveX - startPos.x; + + if (draggingInfo.dragging) { + setDraggingInfo((props) => ({ + ...props, + offset: newOffset, + })); + return; + } + if (deltaY > deltaX) { + setDraggingInfo((props) => ({ + ...props, + scrolling: true, + })); + } else { + blockScroll(); + setDraggingInfo((props) => ({ + ...props, + dragging: true, + offset: newOffset, + })); + } + }; + const handleTouchEnd = () => { + if (!draggingInfo.dragging) return; + handleDragEnd(); + unblockScroll(); + }; + + const getNewDraggingInfo = (): DraggingInfo => { + return { + scrolling: false, + dragging: false, + startPos: null, + offset: 0, + translateX: getNewTranslateX(), + }; + }; + const handleDragEnd = () => { + setDraggingInfo(getNewDraggingInfo()); + }; + + const getNewTranslateX = () => { + let newTranslateX = draggingInfo.translateX + draggingInfo.offset; + if (newTranslateX > 0) { + newTranslateX = 0; + } else if (newTranslateX < 0) { + if (carouselWidth <= DEFAULT_SIZE) { + newTranslateX = 0; + } else { + const overflowSize = carouselWidth - DEFAULT_SIZE; + const MIN_TRANSLATE_X = overflowSize * -1; + newTranslateX = Math.max(newTranslateX, MIN_TRANSLATE_X); + } + } + return newTranslateX; + }; + + return ( +
+ {children} +
+ ); +}; + +const SuggestedReplies = ({ replyOptions, onSendMessage, type = 'vertical' }: SuggestedRepliesProps) => { const [replied, setReplied] = useState(false); const onClickReply = ( @@ -24,21 +194,27 @@ const SuggestedReplies = ({ replyOptions, onSendMessage }: SuggestedRepliesProps return null; } + const children = replyOptions.map((option: string, index: number) => { + return ( +
onClickReply(e, option)} + > + {option} +
+ ); + }); + return ( -
- {replyOptions.map((option: string, index: number) => { - return ( -
onClickReply(e, option)} - > - {option} -
- ); - })} -
+ type === 'vertical' + ?
+ {children} +
+ : + {children} + ); }; diff --git a/yarn.lock b/yarn.lock index 0d1f19cb4..119ebb9ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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: @@ -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 @@ -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 From bfa63df087112de40acdec3fdc82840190ae68c3 Mon Sep 17 00:00:00 2001 From: Hyungu Kang | Airen Date: Fri, 26 Apr 2024 10:34:26 +0900 Subject: [PATCH 2/5] chore: horizontal scroll view (#1076) --- .../components/MessageList/index.scss | 4 ++-- .../components/SuggestedReplies/index.scss | 20 +++++++++++++++++-- .../components/SuggestedReplies/index.tsx | 10 +--------- src/styles/_variables.scss | 3 +++ 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/modules/GroupChannel/components/MessageList/index.scss b/src/modules/GroupChannel/components/MessageList/index.scss index 8c0008867..add69076f 100644 --- a/src/modules/GroupChannel/components/MessageList/index.scss +++ b/src/modules/GroupChannel/components/MessageList/index.scss @@ -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, diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.scss b/src/modules/GroupChannel/components/SuggestedReplies/index.scss index 1f4e78691..dedcfa51b 100644 --- a/src/modules/GroupChannel/components/SuggestedReplies/index.scss +++ b/src/modules/GroupChannel/components/SuggestedReplies/index.scss @@ -17,13 +17,29 @@ margin-top: 8px; } } + &.horizontal { - width: fit-content; - margin-left: 64px; + 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); } diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx index b5632b31f..9588bf741 100644 --- a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx +++ b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx @@ -207,15 +207,7 @@ const SuggestedReplies = ({ replyOptions, onSendMessage, type = 'vertical' }: Su ); }); - return ( - type === 'vertical' - ?
- {children} -
- : - {children} - - ); + return
{children}
; }; export default SuggestedReplies; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 26b7ad28b..8e3394ed8 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -1,2 +1,5 @@ @import './color-themes'; @import './media-query'; + +$messages-padding: 24px; +$messages-padding-mobile: 12px; From c79182bec9306b78478d63b28122453efe05ed64 Mon Sep 17 00:00:00 2001 From: Liam Hongman Cho Date: Tue, 30 Apr 2024 13:15:27 +0900 Subject: [PATCH 3/5] remove unused --- .../components/SuggestedReplies/index.tsx | 170 +----------------- 1 file changed, 1 insertion(+), 169 deletions(-) diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx index 9588bf741..5373e7120 100644 --- a/src/modules/GroupChannel/components/SuggestedReplies/index.tsx +++ b/src/modules/GroupChannel/components/SuggestedReplies/index.tsx @@ -1,5 +1,5 @@ import './index.scss'; -import React, { useRef, useState } from 'react'; +import React, { useState } from 'react'; import { BaseMessage } from '@sendbird/chat/message'; export interface SuggestedRepliesProps { @@ -10,174 +10,6 @@ export interface SuggestedRepliesProps { gap?: number; } -interface Position { - x: number; - y: number; -} - -interface DraggingInfo { - scrolling: boolean; - dragging: boolean; - startPos: Position | null; - offset: number; - translateX: number; -} - -const SIDE_PADDING_WIDTH = 24; -const PROFILE_WIDTH = 40; - -const DraggableSuggestedReplies = ({ children }) => { - const carouselRef = useRef(null); - const SCREEN_WIDTH = window.innerWidth; - const DEFAULT_SIZE = SCREEN_WIDTH - (SIDE_PADDING_WIDTH + PROFILE_WIDTH + SIDE_PADDING_WIDTH); - const carouselWidth = carouselRef.current?.clientWidth ?? 0; - - const [draggingInfo, setDraggingInfo] = useState({ - scrolling: false, - dragging: false, - startPos: null, - offset: 0, - translateX: 0, - }); - - const handleMouseDown = (event: React.MouseEvent) => { - setDraggingInfo((props) => ({ - ...props, - scrolling: false, - dragging: true, - startPos: { - x: event.clientX, - y: event.clientY, - }, - })); - }; - - const handleMouseMove = (event: React.MouseEvent) => { - if (!draggingInfo.dragging || !draggingInfo.startPos) return; - const currentX = event.clientX; - const newOffset = currentX - draggingInfo.startPos.x; - setDraggingInfo({ - ...draggingInfo, - offset: newOffset, - }); - }; - - const handleMouseUp = () => { - if (!draggingInfo.dragging) return; - handleDragEnd(); - unblockScroll(); - }; - - const blockScroll = () => { - if (carouselRef.current) { - carouselRef.current.style.touchAction = 'pan-x'; - } - }; - - const unblockScroll = () => { - if (carouselRef.current) { - carouselRef.current.style.touchAction = 'pan-y'; - } - }; - - const handleTouchStart = (event: React.TouchEvent) => { - setDraggingInfo((props) => ({ - ...props, - scrolling: false, - dragging: false, - startPos: { - x: event.touches[0].clientX, - y: event.touches[0].clientY, - }, - })); - }; - - const handleTouchMove = (event: React.TouchEvent) => { - if (!draggingInfo.startPos || draggingInfo.scrolling) return; - - const startPos = draggingInfo.startPos; - const [touchMoveX, touchMoveY] = [event.touches[0].clientX, event.touches[0].clientY]; - const [deltaX, deltaY] = [Math.abs(touchMoveX - startPos.x), Math.abs(touchMoveY - startPos.y)]; - const newOffset = touchMoveX - startPos.x; - - if (draggingInfo.dragging) { - setDraggingInfo((props) => ({ - ...props, - offset: newOffset, - })); - return; - } - if (deltaY > deltaX) { - setDraggingInfo((props) => ({ - ...props, - scrolling: true, - })); - } else { - blockScroll(); - setDraggingInfo((props) => ({ - ...props, - dragging: true, - offset: newOffset, - })); - } - }; - const handleTouchEnd = () => { - if (!draggingInfo.dragging) return; - handleDragEnd(); - unblockScroll(); - }; - - const getNewDraggingInfo = (): DraggingInfo => { - return { - scrolling: false, - dragging: false, - startPos: null, - offset: 0, - translateX: getNewTranslateX(), - }; - }; - const handleDragEnd = () => { - setDraggingInfo(getNewDraggingInfo()); - }; - - const getNewTranslateX = () => { - let newTranslateX = draggingInfo.translateX + draggingInfo.offset; - if (newTranslateX > 0) { - newTranslateX = 0; - } else if (newTranslateX < 0) { - if (carouselWidth <= DEFAULT_SIZE) { - newTranslateX = 0; - } else { - const overflowSize = carouselWidth - DEFAULT_SIZE; - const MIN_TRANSLATE_X = overflowSize * -1; - newTranslateX = Math.max(newTranslateX, MIN_TRANSLATE_X); - } - } - return newTranslateX; - }; - - return ( -
- {children} -
- ); -}; - const SuggestedReplies = ({ replyOptions, onSendMessage, type = 'vertical' }: SuggestedRepliesProps) => { const [replied, setReplied] = useState(false); From 1102e8a53171dc314205c0a2ecf0dae0ca0f3318 Mon Sep 17 00:00:00 2001 From: Liam Hongman Cho Date: Tue, 30 Apr 2024 14:49:55 +0900 Subject: [PATCH 4/5] put back padding to original --- apps/testing/src/utils/paramsBuilder.ts | 8 +++++++- .../GroupChannel/components/SuggestedReplies/index.scss | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/testing/src/utils/paramsBuilder.ts b/apps/testing/src/utils/paramsBuilder.ts index e0ac715be..91f4b9206 100644 --- a/apps/testing/src/utils/paramsBuilder.ts +++ b/apps/testing/src/utils/paramsBuilder.ts @@ -28,7 +28,13 @@ export const useConfigParams = (initParams: InitialParams): ParamsAsProps => { accessToken: searchParams.get('accessToken') || initParams.accessToken, allowProfileEdit: parseValue(searchParams.get('enableProfileEdit')) ?? true, isMultipleFilesMessageEnabled: parseValue(searchParams.get('enableMultipleFilesMessage')) ?? true, - uikitOptions: {}, + uikitOptions: { + groupChannel: { + enableSuggestedReplies: true, + showSuggestedRepliesFor: 'all_messages', + suggestedRepliesDirection: 'horizontal', + }, + }, } as ParamsAsProps; if (!response.appId) throw new Error(`Invalid app id: ${response.appId}`); diff --git a/src/modules/GroupChannel/components/SuggestedReplies/index.scss b/src/modules/GroupChannel/components/SuggestedReplies/index.scss index dedcfa51b..791e5e2c4 100644 --- a/src/modules/GroupChannel/components/SuggestedReplies/index.scss +++ b/src/modules/GroupChannel/components/SuggestedReplies/index.scss @@ -49,7 +49,7 @@ white-space: nowrap; height: 32px; font-size: 12px; - padding: 0 70px; + padding: 0 14px; display: flex; align-items: center; border-radius: 18px; From 4d5a98b4f633bfc205ef662a1d9776452b8c5d2e Mon Sep 17 00:00:00 2001 From: Hyungu Kang | Airen Date: Thu, 2 May 2024 13:54:03 +0900 Subject: [PATCH 5/5] chore: revert testing app configs --- apps/testing/src/utils/paramsBuilder.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/apps/testing/src/utils/paramsBuilder.ts b/apps/testing/src/utils/paramsBuilder.ts index 91f4b9206..e0ac715be 100644 --- a/apps/testing/src/utils/paramsBuilder.ts +++ b/apps/testing/src/utils/paramsBuilder.ts @@ -28,13 +28,7 @@ export const useConfigParams = (initParams: InitialParams): ParamsAsProps => { accessToken: searchParams.get('accessToken') || initParams.accessToken, allowProfileEdit: parseValue(searchParams.get('enableProfileEdit')) ?? true, isMultipleFilesMessageEnabled: parseValue(searchParams.get('enableMultipleFilesMessage')) ?? true, - uikitOptions: { - groupChannel: { - enableSuggestedReplies: true, - showSuggestedRepliesFor: 'all_messages', - suggestedRepliesDirection: 'horizontal', - }, - }, + uikitOptions: {}, } as ParamsAsProps; if (!response.appId) throw new Error(`Invalid app id: ${response.appId}`);