From 58c065de068c9fe015d964c7d3541902a4753b9e Mon Sep 17 00:00:00 2001 From: bang9 Date: Tue, 27 Aug 2024 11:35:12 +0900 Subject: [PATCH 01/12] chore: update for qa --- src/main.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/main.tsx b/src/main.tsx index ad8146042..894a910d8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,8 +3,20 @@ import ReactDOM from 'react-dom/client'; import App from './App'; +const QA = () => { + const urlParams = new URLSearchParams(window.location.search); + const appId = urlParams.get('app_id') ?? import.meta.env.VITE_CHAT_WIDGET_APP_ID; + const botId = urlParams.get('bot_id') ?? import.meta.env.VITE_CHAT_WIDGET_BOT_ID; + + if (!appId || !botId) { + return null; + } + + return ; +}; + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + , ); From c3be61923fd5ef87a4ddb99ada83203257dd7aec Mon Sep 17 00:00:00 2001 From: bang9 Date: Tue, 27 Aug 2024 15:05:27 +0900 Subject: [PATCH 02/12] fix: hide feedback button of welcome messages --- src/components/CustomMessage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx index 326c11d27..1b667eaf8 100644 --- a/src/components/CustomMessage.tsx +++ b/src/components/CustomMessage.tsx @@ -40,7 +40,10 @@ export default function CustomMessage(props: Props) { const shouldRenderFeedback = () => { return ( - enableEmojiFeedback && message.myFeedbackStatus !== 'NOT_APPLICABLE' && !messageExtension.isStreaming(message) + enableEmojiFeedback && + message.myFeedbackStatus !== 'NOT_APPLICABLE' && + !messageExtension.isStreaming(message) && + !messageExtension.isBotWelcomeMsg(message, botUserId ?? '') ); }; From 01112c1f4223cd2510d68246eb6a365d30c78c39 Mon Sep 17 00:00:00 2001 From: bang9 Date: Tue, 27 Aug 2024 15:42:44 +0900 Subject: [PATCH 03/12] fix: date separator style issue --- src/components/chat/hooks/useBotStudioView.tsx | 1 + src/foundation/components/DateSeparator/css.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/chat/hooks/useBotStudioView.tsx b/src/components/chat/hooks/useBotStudioView.tsx index 35da61cb2..1d03c0e46 100644 --- a/src/components/chat/hooks/useBotStudioView.tsx +++ b/src/components/chat/hooks/useBotStudioView.tsx @@ -99,4 +99,5 @@ export const useBotStudioView = () => { const dateSeparatorMargin = css` margin: 8px 0; + padding: 0 16px; `; diff --git a/src/foundation/components/DateSeparator/css.ts b/src/foundation/components/DateSeparator/css.ts index a019a28c7..8dce518a6 100644 --- a/src/foundation/components/DateSeparator/css.ts +++ b/src/foundation/components/DateSeparator/css.ts @@ -3,7 +3,7 @@ import { css } from '@linaria/core'; export const dateSeparatorContainer = css` display: flex; flex-direction: row; - justify-content: center; + align-items: center; `; export const dateSeparatorLabel = css` From cf7633e83c06b28a6016245033f697d2a4c0097c Mon Sep 17 00:00:00 2001 From: bang9 Date: Wed, 28 Aug 2024 11:53:33 +0900 Subject: [PATCH 04/12] fix: message gap styles --- src/components/BotMessageWithBodyInput.tsx | 1 - src/components/CurrentUserMessage.tsx | 2 - .../CustomTypingIndicatorBubble.tsx | 2 +- src/components/SuggestedRepliesContainer.tsx | 12 ++--- src/components/UserMessageWithBodyInput.tsx | 1 - src/components/chat/ui/ChatMessageList.tsx | 44 ++++++++++--------- 6 files changed, 31 insertions(+), 31 deletions(-) diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx index ea58c57c6..ae41ff029 100644 --- a/src/components/BotMessageWithBodyInput.tsx +++ b/src/components/BotMessageWithBodyInput.tsx @@ -12,7 +12,6 @@ const Root = styled.span` display: flex; flex-direction: row; align-items: flex-end; - margin-bottom: 6px; gap: 8px; position: relative; `; diff --git a/src/components/CurrentUserMessage.tsx b/src/components/CurrentUserMessage.tsx index 67493d1de..ffd159e58 100644 --- a/src/components/CurrentUserMessage.tsx +++ b/src/components/CurrentUserMessage.tsx @@ -9,9 +9,7 @@ const Root = styled.div<{ enableEmojiFeedback: boolean }>` display: flex; justify-content: flex-end; align-items: end; - margin-bottom: 6px; gap: 4px; - margin-top: ${({ enableEmojiFeedback }) => (enableEmojiFeedback ? '16px' : '0')}; `; type Props = { diff --git a/src/components/CustomTypingIndicatorBubble.tsx b/src/components/CustomTypingIndicatorBubble.tsx index 0fbdc64a8..e1b6baaf1 100644 --- a/src/components/CustomTypingIndicatorBubble.tsx +++ b/src/components/CustomTypingIndicatorBubble.tsx @@ -3,7 +3,7 @@ import { TypingBubble } from '../foundation/components/TypingBubble'; function CustomTypingIndicatorBubble({ botProfileUrl }: { botProfileUrl: string }) { return ( -
+
diff --git a/src/components/SuggestedRepliesContainer.tsx b/src/components/SuggestedRepliesContainer.tsx index 29c950f42..c9b957c44 100644 --- a/src/components/SuggestedRepliesContainer.tsx +++ b/src/components/SuggestedRepliesContainer.tsx @@ -11,11 +11,13 @@ interface Props { const SuggestedRepliesContainer = ({ replies = [], type = 'vertical', sendUserMessage }: Props) => { if (replies.length <= 0) return null; return ( - sendUserMessage?.({ message })} - type={type} - /> +
+ sendUserMessage?.({ message })} + type={type} + /> +
); }; diff --git a/src/components/UserMessageWithBodyInput.tsx b/src/components/UserMessageWithBodyInput.tsx index a741d87f6..b05970085 100644 --- a/src/components/UserMessageWithBodyInput.tsx +++ b/src/components/UserMessageWithBodyInput.tsx @@ -13,7 +13,6 @@ import { formatCreatedAtToAMPM } from '../utils/messageTimestamp'; const Root = styled.div` display: flex; align-items: flex-end; - margin-bottom: 6px; flex-wrap: wrap; gap: 8px; position: relative; diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx index 85031a0e3..36dbc6bb6 100644 --- a/src/components/chat/ui/ChatMessageList.tsx +++ b/src/components/chat/ui/ChatMessageList.tsx @@ -62,29 +62,31 @@ export const ChatMessageList = () => { formatString={stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR} /> )} - +
+ - {message.data && - isDashboardPreview(customUserAgentParam) && - message.messageId === channel?.lastMessage?.messageId && ( - + {message.data && + isDashboardPreview(customUserAgentParam) && + message.messageId === channel?.lastMessage?.messageId && ( + + )} + + {showRepliesOnLastMessage && suggestedReplies.length > 0 && ( + { + dataSource.sendUserMessage(params, handlers.onAfterSendMessage).then(handlers.onAfterSendMessage); + }} + /> )} - - {showRepliesOnLastMessage && suggestedReplies.length > 0 && ( - { - dataSource.sendUserMessage(params, handlers.onAfterSendMessage).then(handlers.onAfterSendMessage); - }} - /> - )} +
); }} From de23db721b1b97b3a3e98b62b16d79d343c5531c Mon Sep 17 00:00:00 2001 From: bang9 Date: Thu, 29 Aug 2024 12:33:35 +0900 Subject: [PATCH 05/12] fix: typing indicator styles --- src/components/CustomMessage.tsx | 8 ++++---- src/components/CustomTypingIndicatorBubble.tsx | 11 ++++++++++- src/foundation/components/TypingBubble/css.ts | 2 +- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx index 1b667eaf8..be7e2805c 100644 --- a/src/components/CustomMessage.tsx +++ b/src/components/CustomMessage.tsx @@ -30,12 +30,12 @@ type Props = { export default function CustomMessage(props: Props) { const { message, activeSpinnerId, botUser } = props; - const { replacementTextList, enableEmojiFeedback, botStudioEditProps } = useConstantState(); + const { replacementTextList, enableEmojiFeedback, botStudioEditProps = {} } = useConstantState(); const { userId: currentUserId } = useWidgetSession(); - const { profileUrl } = botStudioEditProps?.botInfo ?? {}; + const { botInfo } = botStudioEditProps; const botUserId = botUser?.userId; - const botProfileUrl = profileUrl ?? botUser?.profileUrl ?? ''; + const botProfileUrl = botInfo?.profileUrl ?? botUser?.profileUrl ?? ''; const isWaitingForBotReply = activeSpinnerId === message.messageId && !!botUser; const shouldRenderFeedback = () => { @@ -68,7 +68,7 @@ export default function CustomMessage(props: Props) { return (
- {isWaitingForBotReply && } + {isWaitingForBotReply && }
); } diff --git a/src/components/CustomTypingIndicatorBubble.tsx b/src/components/CustomTypingIndicatorBubble.tsx index e1b6baaf1..9c560b993 100644 --- a/src/components/CustomTypingIndicatorBubble.tsx +++ b/src/components/CustomTypingIndicatorBubble.tsx @@ -1,7 +1,16 @@ import BotProfileImage from './BotProfileImage'; +import { useChatContext } from './chat/context/ChatProvider'; +import { useConstantState } from '../context/ConstantContext'; import { TypingBubble } from '../foundation/components/TypingBubble'; -function CustomTypingIndicatorBubble({ botProfileUrl }: { botProfileUrl: string }) { +function CustomTypingIndicatorBubble() { + const { botStudioEditProps = {}, botId } = useConstantState(); + const { channel } = useChatContext(); + + const botUser = channel?.members.find((member) => member.userId === botId); + const botInfo = botStudioEditProps.botInfo; + const botProfileUrl = botInfo?.profileUrl ?? botUser?.profileUrl; + return (
diff --git a/src/foundation/components/TypingBubble/css.ts b/src/foundation/components/TypingBubble/css.ts index 683976061..76b6aad44 100644 --- a/src/foundation/components/TypingBubble/css.ts +++ b/src/foundation/components/TypingBubble/css.ts @@ -2,7 +2,7 @@ import { css } from '@linaria/core'; export const typingDotContainer = css` align-items: center; - border-radius: 16px; + border-radius: 100px; display: flex; gap: 6px; justify-content: center; From 1202fafa969b48cd950bf125e433e52f8a853223 Mon Sep 17 00:00:00 2001 From: bang9 Date: Thu, 29 Aug 2024 17:01:05 +0900 Subject: [PATCH 06/12] fix(AC-3683): changed overflow-y to auto --- src/foundation/components/InfiniteMessageList/css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/foundation/components/InfiniteMessageList/css.ts b/src/foundation/components/InfiniteMessageList/css.ts index 80886e35e..04df39d56 100644 --- a/src/foundation/components/InfiniteMessageList/css.ts +++ b/src/foundation/components/InfiniteMessageList/css.ts @@ -11,7 +11,7 @@ export const infiniteListInner = css` display: flex; flex: 1; flex-direction: column; - overflow-y: scroll; + overflow-y: auto; `; export const infiniteListOverlayContainer = css` From 1c0f54ec9d5220538b4de644fa7bd3cdf6f1b5da Mon Sep 17 00:00:00 2001 From: bang9 Date: Mon, 2 Sep 2024 10:26:15 +0900 Subject: [PATCH 07/12] fix(AC-3696): gap issue of injected welcome messages --- src/components/chat/hooks/useBotStudioView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/chat/hooks/useBotStudioView.tsx b/src/components/chat/hooks/useBotStudioView.tsx index 1d03c0e46..937ee1fea 100644 --- a/src/components/chat/hooks/useBotStudioView.tsx +++ b/src/components/chat/hooks/useBotStudioView.tsx @@ -64,7 +64,7 @@ export const useBotStudioView = () => { const isLastMessage = index === welcomeMessages.length - 1; return ( -
+
Date: Mon, 2 Sep 2024 16:55:21 +0900 Subject: [PATCH 08/12] chore: revert changes for testing --- src/main.tsx | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index 894a910d8..ad8146042 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,20 +3,8 @@ import ReactDOM from 'react-dom/client'; import App from './App'; -const QA = () => { - const urlParams = new URLSearchParams(window.location.search); - const appId = urlParams.get('app_id') ?? import.meta.env.VITE_CHAT_WIDGET_APP_ID; - const botId = urlParams.get('bot_id') ?? import.meta.env.VITE_CHAT_WIDGET_BOT_ID; - - if (!appId || !botId) { - return null; - } - - return ; -}; - ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + , ); From 871feef97da13140c8b2c375df1987149c1f0fd8 Mon Sep 17 00:00:00 2001 From: bang9 Date: Mon, 2 Sep 2024 18:47:13 +0900 Subject: [PATCH 09/12] Revert "chore: revert changes for testing" This reverts commit 0c562a7b2e95ab9ad4971fc274d1bd0e59c79634. --- src/main.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/main.tsx b/src/main.tsx index ad8146042..894a910d8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,8 +3,20 @@ import ReactDOM from 'react-dom/client'; import App from './App'; +const QA = () => { + const urlParams = new URLSearchParams(window.location.search); + const appId = urlParams.get('app_id') ?? import.meta.env.VITE_CHAT_WIDGET_APP_ID; + const botId = urlParams.get('bot_id') ?? import.meta.env.VITE_CHAT_WIDGET_BOT_ID; + + if (!appId || !botId) { + return null; + } + + return ; +}; + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + , ); From 763fd4bbdbea689a6d79344e33604f24c8862bf5 Mon Sep 17 00:00:00 2001 From: bang9 Date: Tue, 3 Sep 2024 15:42:43 +0900 Subject: [PATCH 10/12] fix: create truth of source for botUser --- src/components/BotMessageFeedback.tsx | 7 +++---- src/components/BotMessageWithBodyInput.tsx | 6 +++--- src/components/CustomMessage.tsx | 15 ++++++--------- src/components/CustomTypingIndicatorBubble.tsx | 5 ++--- src/components/chat/context/ChatProvider.tsx | 13 +++++++++++-- src/components/chat/hooks/useBotStudioView.tsx | 4 +--- src/components/chat/ui/ChatHeader.tsx | 5 ++--- src/components/chat/ui/ChatInput.tsx | 6 ++---- src/components/chat/ui/ChatMessageList.tsx | 2 -- src/components/messages/FormMessage.tsx | 5 ++--- src/hooks/useBlockWhileBotResponding.ts | 4 ++-- 11 files changed, 34 insertions(+), 38 deletions(-) diff --git a/src/components/BotMessageFeedback.tsx b/src/components/BotMessageFeedback.tsx index 927b064fa..074ea0d02 100644 --- a/src/components/BotMessageFeedback.tsx +++ b/src/components/BotMessageFeedback.tsx @@ -1,11 +1,10 @@ -import { Feedback, FeedbackRating } from '@sendbird/chat/message'; +import { BaseMessage, Feedback, FeedbackRating } from '@sendbird/chat/message'; import { useReducer } from 'react'; import FeedbackIconButton from '@uikit/ui/FeedbackIconButton'; import MessageFeedbackFailedModal from '@uikit/ui/MessageFeedbackFailedModal'; import MessageFeedbackModal from '@uikit/ui/MessageFeedbackModal'; import MobileFeedbackMenu from '@uikit/ui/MobileFeedbackMenu'; -import { CoreMessageType } from '@uikit/utils'; import { elementIds } from '../const'; import { useConstantState } from '../context/ConstantContext'; @@ -17,7 +16,7 @@ type State = Partial<{ menuVisible: boolean; }>; -function BotMessageFeedback({ message }: { message: CoreMessageType }) { +function BotMessageFeedback({ message }: { message: BaseMessage }) { const { stringSet } = useConstantState(); const [state, setState] = useReducer((p: State, a: State) => ({ ...p, ...a }), { errorText: '', @@ -104,7 +103,7 @@ function BotMessageFeedback({ message }: { message: CoreMessageType }) { isMobile rootElementId={elementIds.widgetWindow} selectedFeedback={message.myFeedback.rating} - message={message} + message={message as any} onUpdate={async (selectedFeedback, comment) => { if (message.myFeedback) { try { diff --git a/src/components/BotMessageWithBodyInput.tsx b/src/components/BotMessageWithBodyInput.tsx index ae41ff029..e8cd6b90f 100644 --- a/src/components/BotMessageWithBodyInput.tsx +++ b/src/components/BotMessageWithBodyInput.tsx @@ -1,8 +1,8 @@ -import { User } from '@sendbird/chat'; import { ReactNode } from 'react'; import styled from 'styled-components'; import BotProfileImage from './BotProfileImage'; +import { useChatContext } from './chat/context/ChatProvider'; import { DefaultSentTime, FullBodyContainer, WideSentTime } from './MessageComponent'; import { useConstantState } from '../context/ConstantContext'; import { Label } from '../foundation/components/Label'; @@ -37,7 +37,6 @@ const EmptyImageContainer = styled.div` `; type Props = { - botUser?: User; createdAt?: number; messageData?: string; bodyComponent: ReactNode; @@ -54,9 +53,10 @@ const HEIGHTS = { }; export default function BotMessageWithBodyInput(props: Props) { + const { botUser } = useChatContext(); const { botStudioEditProps, dateLocale } = useConstantState(); - const { botUser, createdAt, bodyComponent, chainTop, chainBottom, messageFeedback, wideContainer = false } = props; + const { createdAt, bodyComponent, chainTop, chainBottom, messageFeedback, wideContainer = false } = props; const profilePaddingBottom = (messageFeedback ? HEIGHTS.FEEDBACK : 0) + (wideContainer ? HEIGHTS.TIMESTAMP : 0); diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx index be7e2805c..59ab084ab 100644 --- a/src/components/CustomMessage.tsx +++ b/src/components/CustomMessage.tsx @@ -1,10 +1,11 @@ -import { User } from '@sendbird/chat'; +import { BaseMessage } from '@sendbird/chat/message'; -import { CoreMessageType, isVideoMessage } from '@uikit/utils'; +import { isVideoMessage } from '@uikit/utils'; import AdminMessage from './AdminMessage'; import BotMessageFeedback from './BotMessageFeedback'; import BotMessageWithBodyInput from './BotMessageWithBodyInput'; +import { useChatContext } from './chat/context/ChatProvider'; import CurrentUserMessage from './CurrentUserMessage'; import CustomMessageBody from './CustomMessageBody'; import CustomTypingIndicatorBubble from './CustomTypingIndicatorBubble'; @@ -21,15 +22,15 @@ import { messageExtension } from '../utils/messageExtension'; import { isSentBy } from '../utils/messages'; type Props = { - message: CoreMessageType; + message: BaseMessage; activeSpinnerId: number; - botUser?: User; chainTop?: boolean; chainBottom?: boolean; }; export default function CustomMessage(props: Props) { - const { message, activeSpinnerId, botUser } = props; + const { botUser } = useChatContext(); + const { message, activeSpinnerId } = props; const { replacementTextList, enableEmojiFeedback, botStudioEditProps = {} } = useConstantState(); const { userId: currentUserId } = useWidgetSession(); const { botInfo } = botStudioEditProps; @@ -80,7 +81,6 @@ export default function CustomMessage(props: Props) { return ( } createdAt={message.createdAt} /> @@ -93,7 +93,6 @@ export default function CustomMessage(props: Props) { } createdAt={message.createdAt} messageFeedback={renderFeedbackButtons()} @@ -114,7 +113,6 @@ export default function CustomMessage(props: Props) { } textBody={textMessageBody} /> } @@ -128,7 +126,6 @@ export default function CustomMessage(props: Props) { return ( member.userId === botId); const botInfo = botStudioEditProps.botInfo; const botProfileUrl = botInfo?.profileUrl ?? botUser?.profileUrl; diff --git a/src/components/chat/context/ChatProvider.tsx b/src/components/chat/context/ChatProvider.tsx index cf49c703e..1d256fe77 100644 --- a/src/components/chat/context/ChatProvider.tsx +++ b/src/components/chat/context/ChatProvider.tsx @@ -1,4 +1,4 @@ -import { SendbirdChatWith, SendbirdError, SendbirdErrorCode } from '@sendbird/chat'; +import { SendbirdChatWith, SendbirdError, SendbirdErrorCode, User } from '@sendbird/chat'; import { GroupChannel, GroupChannelModule } from '@sendbird/chat/groupChannel'; import { useGroupChannelMessages } from '@sendbird/uikit-tools'; import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'; @@ -18,6 +18,7 @@ export interface WidgetStringSet { export interface ChatContextType { sdk: SendbirdChatWith<[GroupChannelModule]> | null; channel: GroupChannel | null; + botUser?: User; dataSource: ReturnType; scrollSource: ReturnType; @@ -74,7 +75,14 @@ export const ChatContainer = (props: PropsWithChildren) => { if (errorMessage) return ; return ( - + it.userId === botId)} + dataSource={dataSource} + scrollSource={scrollSource} + handlers={handlers} + {...props} + > {children} ); @@ -82,6 +90,7 @@ export const ChatContainer = (props: PropsWithChildren) => { interface ChatProviderProps extends ChatContainerProps { channel: GroupChannel | null; + botUser?: User; dataSource: ReturnType; scrollSource: ReturnType; handlers: WidgetChatHandlers; diff --git a/src/components/chat/hooks/useBotStudioView.tsx b/src/components/chat/hooks/useBotStudioView.tsx index 937ee1fea..7e72bd509 100644 --- a/src/components/chat/hooks/useBotStudioView.tsx +++ b/src/components/chat/hooks/useBotStudioView.tsx @@ -13,11 +13,10 @@ import { useChatContext } from '../context/ChatProvider'; export const useBotStudioView = () => { const { botStudioEditProps = {}, botId, replacementTextList, stringSet } = useConstantState(); - const { dataSource, channel, handlers } = useChatContext(); + const { dataSource, handlers } = useChatContext(); const { suggestedRepliesDirection, welcomeMessages = [] } = botStudioEditProps; const { messages } = dataSource; - const botUser = channel?.members.find((member) => member.userId === botId); const originalWMs = getBotWelcomeMessages(messages, botId); const firstUserMsg = messages[originalWMs.length + 1]; @@ -68,7 +67,6 @@ export const useBotStudioView = () => { } createdAt={firstOriginalWM?.createdAt} /> diff --git a/src/components/chat/ui/ChatHeader.tsx b/src/components/chat/ui/ChatHeader.tsx index 18715ac0f..515a7482f 100644 --- a/src/components/chat/ui/ChatHeader.tsx +++ b/src/components/chat/ui/ChatHeader.tsx @@ -18,13 +18,12 @@ type Props = { fullscreen: boolean; }; export const ChatHeader = ({ fullscreen }: Props) => { - const { botId, botStudioEditProps, isMobileView, enableWidgetExpandButton, betaMark, customBetaMarkText } = + const { botStudioEditProps, isMobileView, enableWidgetExpandButton, betaMark, customBetaMarkText } = useConstantState(); - const { sdk, channel, dataSource } = useChatContext(); + const { sdk, channel, botUser, dataSource } = useChatContext(); const { setIsOpen } = useWidgetState(); const { botInfo } = botStudioEditProps ?? {}; - const botUser = channel?.members.find((member) => member.userId === botId); const botNickname = botInfo?.nickname ?? botUser?.nickname; const profileUrl = botInfo?.profileUrl ?? botUser?.profileUrl; const buttonSize = isMobileView ? 24 : 16; diff --git a/src/components/chat/ui/ChatInput.tsx b/src/components/chat/ui/ChatInput.tsx index 41bb3436c..873673709 100644 --- a/src/components/chat/ui/ChatInput.tsx +++ b/src/components/chat/ui/ChatInput.tsx @@ -4,22 +4,20 @@ import { useRef } from 'react'; import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext'; import MessageInputWrapperView from '@uikit/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView'; -import { useConstantState } from '../../../context/ConstantContext'; import { themedColors } from '../../../foundation/colors/css'; import { useBlockWhileBotResponding } from '../../../hooks/useBlockWhileBotResponding'; import { isIOSMobile } from '../../../utils'; import { useChatContext } from '../context/ChatProvider'; export const ChatInput = () => { - const { botId } = useConstantState(); - const { channel, dataSource, handlers } = useChatContext(); + const { channel, botUser, dataSource, handlers } = useChatContext(); const ref = useRef(null); const { config } = useSendbirdStateContext(); const isMessageInputDisabled = useBlockWhileBotResponding({ lastMessage: dataSource.messages[dataSource.messages.length - 1], - botUser: channel?.members.find((it) => it.userId === botId), + botUser, }); return ( diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx index 36dbc6bb6..3ea3d45cf 100644 --- a/src/components/chat/ui/ChatMessageList.tsx +++ b/src/components/chat/ui/ChatMessageList.tsx @@ -2,7 +2,6 @@ import { css } from '@linaria/core'; import { isSameDay } from 'date-fns/isSameDay'; import { getComponentKeyFromMessage } from '@uikit/modules/GroupChannel/context/utils'; -import { isSendableMessage } from '@uikit/utils'; import { useConstantState } from '../../../context/ConstantContext'; import { DateSeparator } from '../../../foundation/components/DateSeparator'; @@ -65,7 +64,6 @@ export const ChatMessageList = () => {
Date: Tue, 3 Sep 2024 16:55:17 +0900 Subject: [PATCH 11/12] chore: update suggested replies visible logic --- src/components/chat/ui/ChatMessageList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx index 3ea3d45cf..1cd6f4272 100644 --- a/src/components/chat/ui/ChatMessageList.tsx +++ b/src/components/chat/ui/ChatMessageList.tsx @@ -48,7 +48,8 @@ export const ChatMessageList = () => { renderMessage={({ message, index }) => { const prevCreatedAt = filteredMessages[index - 1]?.createdAt ?? 0; const suggestedReplies = message.suggestedReplies ?? []; - const showRepliesOnLastMessage = message.messageId === channel?.lastMessage?.messageId; + const lastMessageInChannel = filteredMessages[filteredMessages.length - 1]; + const showRepliesOnLastMessage = message.messageId === lastMessageInChannel?.messageId; const [top, bottom] = getMessageGrouping(message, filteredMessages[index - 1], filteredMessages[index + 1]); From c6949798cb7f7e22201072be97ca91c85b3d447e Mon Sep 17 00:00:00 2001 From: bang9 Date: Thu, 5 Sep 2024 10:39:44 +0900 Subject: [PATCH 12/12] fix: handle frozen cases --- src/components/chat/ui/ChatMessageList.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/chat/ui/ChatMessageList.tsx b/src/components/chat/ui/ChatMessageList.tsx index 1cd6f4272..5f3f06a72 100644 --- a/src/components/chat/ui/ChatMessageList.tsx +++ b/src/components/chat/ui/ChatMessageList.tsx @@ -31,6 +31,8 @@ export const ChatMessageList = () => { } if (dataSource.messages.length === 0) { + const welcomeMessages = renderBotStudioWelcomeMessages(); + if (welcomeMessages) return
{welcomeMessages}
; return ; } @@ -91,7 +93,6 @@ export const ChatMessageList = () => { }} overlayArea={ <> - {channel?.isFrozen && } {/** * Note for unread status count & read status * Currently, the widget only handles cases of chatting with bots, so it is not supported. @@ -114,6 +115,7 @@ export const ChatMessageList = () => { return (
{render()} + {channel?.isFrozen && }
); }; @@ -123,6 +125,7 @@ const frozenBanner = css` inset-block-start: 8px; inset-inline: 0; margin-inline: 24px; + z-index: 10; `; const listContainer = css`