From 04ab62beb0e04fbf0e1d257a4ce0f0a932a4e5fc Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Wed, 21 Aug 2024 16:52:24 +0900 Subject: [PATCH 01/10] update head --- packages/uikit | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uikit b/packages/uikit index 39bef8bbc..8429761f8 160000 --- a/packages/uikit +++ b/packages/uikit @@ -1 +1 @@ -Subproject commit 39bef8bbc30682a9ec71fae7177537db3eb4832c +Subproject commit 8429761f8b8d5c7944aef9a9902ae7c27fb9da7a From 5d8865e93cfa7c07d73cca4d36dd71d5d6146783 Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Wed, 24 Jul 2024 15:33:52 +0900 Subject: [PATCH 02/10] Fix broken dark theme for MessageDataContent --- src/components/MessageDataContent.tsx | 68 +++++++++------- src/theme.ts | 107 ++++++++++++++++++++++---- 2 files changed, 130 insertions(+), 45 deletions(-) diff --git a/src/components/MessageDataContent.tsx b/src/components/MessageDataContent.tsx index 5f28f98e9..65b8067d4 100644 --- a/src/components/MessageDataContent.tsx +++ b/src/components/MessageDataContent.tsx @@ -31,32 +31,37 @@ const TextButton = styled.div` const ViewDetails = styled.div` display: flex; align-items: center; - color: #6210cc; - path { - fill: #6210cc; - } - &:hover { - color: #4e11a1; - cursor: pointer; - path { - fill: #4e11a1; - } - } - &:focus { - border: 1px solid #6210cc; - } - &:active { - color: #0d0d0d; - path { - fill: #0d0d0d; - } - } - &:disabled { - color: #a6a6a6; - path { - fill: #a6a6a6; + ${({ theme }) => { + const linkColors = theme.textColor.messageDataContent.link; + return { + color: linkColors.default, + path: { + fill: linkColors.default, + }, + '&:hover': { + color: linkColors.hover, + cursor: 'pointer', + path: { + fill: linkColors.hover, + } + }, + '&:focus': { + border: `2px solid ${linkColors.focus}`, + }, + '&:active': { + color: linkColors.active, + path: { + fill: linkColors.active, + } + }, + '&:disabled': { + color: linkColors.disabled, + path: { + fill: linkColors.disabled, + } + } } - } + }}; `; const LineHeightWrapper = styled.div` @@ -67,7 +72,7 @@ const LineHeightWrapper = styled.div` const WorkFlowType = styled.div` border-radius: 2px; - border: 1px solid #ccc; + border: 1px solid ${({ theme }) => theme.borderColor.messageDataContent.intentType}; font-size: 12px; font-weight: 400; line-height: 16px; @@ -85,7 +90,7 @@ const Root = styled.div` const SideBar = styled.div` width: 4px; border-radius: 100px; - background-color: #e0e0e0; + background-color: ${({ theme }) => theme.bgColor.messageDataContent.sidebar}; margin-left: 8px; `; @@ -97,6 +102,7 @@ const DataContainer = styled.div` gap: 4px; margin-left: 16px; flex: 1; // Without this, Sidebar width is reduced. + color: ${({ theme }) => theme.textColor.messageDataContent.default}; `; const DataRow = styled.div` @@ -108,7 +114,7 @@ const DataRow = styled.div` `; const AdditionalInfo = styled.div` - color: #858585; + color: ${({ theme }) => theme.textColor.messageDataContent.sideNote}; font-size: 12px; font-weight: 400; line-height: 16px; @@ -121,6 +127,12 @@ const Icon = styled.div` align-items: center; width: 16px; height: 20px; + + svg { + path { + fill: ${({ theme }) => theme.textColor.messageDataContent.default}; + } + } `; interface MessageDataContentProps { diff --git a/src/theme.ts b/src/theme.ts index f02e1bc5d..ab41fa9c5 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -27,6 +27,9 @@ export interface CommonTheme { hover: string; focus: string; }; + messageDataContent: { + sidebar: string; + }; }; textColor: { incomingMessage: string; @@ -50,6 +53,17 @@ export interface CommonTheme { focus: string; }; activeButton: string; + messageDataContent: { + default: string; + link: { + default: string; + hover: string; + focus: string; + active: string; + disabled: string; + }; + sideNote: string; + }; }; borderColor: { channelHeader: string; @@ -66,6 +80,9 @@ export interface CommonTheme { hover: string; focus: string; }; + messageDataContent: { + intentType: string; + }; }; accentColor: string; } @@ -74,6 +91,11 @@ interface Theme { dark: CommonTheme; } +interface ColorVariantsByTheme { + light: Record; + dark: Record; +} + export function getTheme({ accentColor, botMessageBGColor, @@ -81,6 +103,21 @@ export function getTheme({ accentColor?: string; botMessageBGColor?: string; }): Theme { + const colorVarsForBotMessageBGColor: ColorVariantsByTheme | undefined = + botMessageBGColor ? { + light: generateColorVariants(botMessageBGColor, 'light'), + dark: generateColorVariants(botMessageBGColor, 'dark'), + } : undefined; + const colorVarsForAccentColor: ColorVariantsByTheme | undefined = + accentColor ? { + light: generateColorVariants(accentColor, 'light'), + dark: generateColorVariants(accentColor, 'dark'), + } : undefined; + const satColorForBotMessageBGColor = + botMessageBGColor ? getColorBasedOnSaturation(botMessageBGColor) : undefined; + const satColorForAccentColor = + accentColor ? getColorBasedOnSaturation(accentColor) : undefined; + return { light: { bgColor: { @@ -93,10 +130,10 @@ export function getTheme({ loadingScreen: 'var(--sendbird-light-background-50)', hover: { // Give 1 level darker color for hover - incomingMessage: botMessageBGColor - ? generateColorVariants(botMessageBGColor)[400] - : 'var(--sendbird-light-background-200)', - outgoingMessage: accentColor ? generateColorVariants(accentColor)[400] : 'var(--sendbird-light-primary-400)', + incomingMessage: colorVarsForBotMessageBGColor + ? colorVarsForBotMessageBGColor['light'][400] : 'var(--sendbird-light-background-200)', + outgoingMessage: colorVarsForAccentColor + ? colorVarsForAccentColor['light'][400] : 'var(--sendbird-light-primary-400)', suggestedReply: 'var(--sendbird-light-background-100)', carouselButton: 'var(--sendbird-light-background-100)', }, @@ -113,12 +150,13 @@ export function getTheme({ hover: 'var(--sendbird-light-background-50)', focus: 'var(--sendbird-light-background-50)', }, + messageDataContent: { + sidebar: 'var(--sendbird-light-background-200)', + } }, textColor: { - incomingMessage: botMessageBGColor - ? getColorBasedOnSaturation(botMessageBGColor) - : 'var(--sendbird-dark-onlight-01)', - outgoingMessage: accentColor ? getColorBasedOnSaturation(accentColor) : 'var(--sendbird-light-ondark-01)', + incomingMessage: satColorForBotMessageBGColor ?? 'var(--sendbird-dark-onlight-01)', + outgoingMessage: satColorForAccentColor ?? 'var(--sendbird-light-ondark-01)', errorMessage: 'var(--sendbird-dark-onlight-01)', sentTime: 'var(--sendbird-dark-onlight-03)', sourceInfo: 'var(--sendbird-light-ondark-01)', @@ -137,7 +175,21 @@ export function getTheme({ hover: 'var(--sendbird-light-primary-300)', focus: 'var(--sendbird-light-onlight-02)', }, - activeButton: accentColor ? getColorBasedOnSaturation(accentColor, 0.88) : 'var(--sendbird-dark-ondark-01)', + activeButton: satColorForAccentColor ?? 'var(--sendbird-dark-ondark-01)', + messageDataContent: { + default: 'var(--sendbird-light-onlight-01)', + link: { + default: colorVarsForAccentColor + ? colorVarsForAccentColor['light'][300] : 'var(--sendbird-light-primary-300)', + hover: colorVarsForAccentColor + ? colorVarsForAccentColor['light'][400] : 'var(--sendbird-light-primary-400)', + focus: colorVarsForAccentColor + ? colorVarsForAccentColor['light'][300] : 'var(--sendbird-light-primary-300)', + active: 'var(--sendbird-light-onlight-01)', + disabled: 'var(--sendbird-light-onlight-03)', + }, + sideNote: 'var(--sendbird-light-onlight-02)', + }, }, borderColor: { channelHeader: 'var(--sendbird-light-onlight-04)', @@ -154,6 +206,9 @@ export function getTheme({ hover: 'var(--sendbird-light-primary-300)', focus: 'var(--sendbird-light-primary-300)', }, + messageDataContent: { + intentType: 'var(--sendbird-light-onlight-04)', + } }, accentColor: accentColor ?? 'var(--sendbird-light-primary-300)', }, @@ -168,11 +223,11 @@ export function getTheme({ loadingScreen: 'var(--sendbird-dark-background-600)', hover: { // Give 1 level lighter color for hover - incomingMessage: botMessageBGColor - ? generateColorVariants(botMessageBGColor)[200] - : 'var(--sendbird-dark-background-400)', + incomingMessage: colorVarsForBotMessageBGColor + ? colorVarsForBotMessageBGColor['dark'][200] : 'var(--sendbird-dark-background-400)', // Give 1 level darker color for hover - outgoingMessage: accentColor ? generateColorVariants(accentColor)[400] : 'var(--sendbird-dark-primary-300)', + outgoingMessage: colorVarsForAccentColor + ? colorVarsForAccentColor['dark'][400] : 'var(--sendbird-dark-primary-300)', suggestedReply: 'var(--sendbird-dark-background-500)', carouselButton: 'var(--sendbird-dark-background-500)', }, @@ -189,12 +244,13 @@ export function getTheme({ hover: 'var(--sendbird-light-onlight-03)', focus: 'var(--sendbird-light-onlight-03)', }, + messageDataContent: { + sidebar: 'var(--sendbird-dark-background-400)', + } }, textColor: { - outgoingMessage: accentColor ? getColorBasedOnSaturation(accentColor) : 'var(--sendbird-dark-onlight-01)', - incomingMessage: botMessageBGColor - ? getColorBasedOnSaturation(botMessageBGColor) - : 'var(--sendbird-dark-ondark-01)', + outgoingMessage: satColorForAccentColor ?? 'var(--sendbird-dark-onlight-01)', + incomingMessage: satColorForBotMessageBGColor ?? 'var(--sendbird-dark-ondark-01)', errorMessage: 'var(--sendbird-dark-ondark-01)', sentTime: 'var(--sendbird-dark-ondark-03)', sourceInfo: 'var(--sendbird-light-ondark-01)', @@ -214,6 +270,20 @@ export function getTheme({ focus: 'var(--sendbird-dark-ondark-02)', }, activeButton: accentColor ? getColorBasedOnSaturation(accentColor, 0.88) : 'var(--sendbird-light-onlight-01)', + messageDataContent: { + default: 'var(--sendbird-dark-ondark-01)', + link: { + default: colorVarsForAccentColor + ? colorVarsForAccentColor['dark'][200] : 'var(--sendbird-dark-primary-200)', + hover: colorVarsForAccentColor + ? colorVarsForAccentColor['dark'][300] : 'var(--sendbird-dark-primary-300)', + focus: colorVarsForAccentColor + ? colorVarsForAccentColor['dark'][200] : 'var(--sendbird-dark-primary-200)', + active: 'var(--sendbird-dark-ondark-01)', + disabled: 'var(--sendbird-dark-ondark-03)', + }, + sideNote: 'var(--sendbird-dark-ondark-02)', + } }, borderColor: { channelHeader: 'var(--sendbird-dark-ondark-04)', @@ -230,6 +300,9 @@ export function getTheme({ hover: 'var(--sendbird-dark-primary-200)', focus: 'var(--sendbird-dark-ondark-02)', }, + messageDataContent: { + intentType: 'var(--sendbird-dark-ondark-02)', + } }, accentColor: accentColor ?? 'var(--sendbird-dark-primary-200)', }, From 38ad731521de6bd30e1258b661e11c33caf01e4a Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Wed, 21 Aug 2024 17:00:41 +0900 Subject: [PATCH 03/10] format --- src/components/MessageDataContent.tsx | 10 ++-- src/main.tsx | 5 +- src/theme.ts | 70 +++++++++++++++------------ 3 files changed, 47 insertions(+), 38 deletions(-) diff --git a/src/components/MessageDataContent.tsx b/src/components/MessageDataContent.tsx index 65b8067d4..61fb34c70 100644 --- a/src/components/MessageDataContent.tsx +++ b/src/components/MessageDataContent.tsx @@ -43,7 +43,7 @@ const ViewDetails = styled.div` cursor: 'pointer', path: { fill: linkColors.hover, - } + }, }, '&:focus': { border: `2px solid ${linkColors.focus}`, @@ -52,15 +52,15 @@ const ViewDetails = styled.div` color: linkColors.active, path: { fill: linkColors.active, - } + }, }, '&:disabled': { color: linkColors.disabled, path: { fill: linkColors.disabled, - } - } - } + }, + }, + }; }}; `; diff --git a/src/main.tsx b/src/main.tsx index ad8146042..f56afff11 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,6 +5,9 @@ import App from './App'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + , ); diff --git a/src/theme.ts b/src/theme.ts index ab41fa9c5..a962eacab 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -103,21 +103,21 @@ export function getTheme({ accentColor?: string; botMessageBGColor?: string; }): Theme { - const colorVarsForBotMessageBGColor: ColorVariantsByTheme | undefined = - botMessageBGColor ? { - light: generateColorVariants(botMessageBGColor, 'light'), - dark: generateColorVariants(botMessageBGColor, 'dark'), - } : undefined; - const colorVarsForAccentColor: ColorVariantsByTheme | undefined = - accentColor ? { - light: generateColorVariants(accentColor, 'light'), - dark: generateColorVariants(accentColor, 'dark'), - } : undefined; - const satColorForBotMessageBGColor = - botMessageBGColor ? getColorBasedOnSaturation(botMessageBGColor) : undefined; - const satColorForAccentColor = - accentColor ? getColorBasedOnSaturation(accentColor) : undefined; - + const colorVarsForBotMessageBGColor: ColorVariantsByTheme | undefined = botMessageBGColor + ? { + light: generateColorVariants(botMessageBGColor, 'light'), + dark: generateColorVariants(botMessageBGColor, 'dark'), + } + : undefined; + const colorVarsForAccentColor: ColorVariantsByTheme | undefined = accentColor + ? { + light: generateColorVariants(accentColor, 'light'), + dark: generateColorVariants(accentColor, 'dark'), + } + : undefined; + const satColorForBotMessageBGColor = botMessageBGColor ? getColorBasedOnSaturation(botMessageBGColor) : undefined; + const satColorForAccentColor = accentColor ? getColorBasedOnSaturation(accentColor) : undefined; + return { light: { bgColor: { @@ -131,9 +131,11 @@ export function getTheme({ hover: { // Give 1 level darker color for hover incomingMessage: colorVarsForBotMessageBGColor - ? colorVarsForBotMessageBGColor['light'][400] : 'var(--sendbird-light-background-200)', + ? colorVarsForBotMessageBGColor['light'][400] + : 'var(--sendbird-light-background-200)', outgoingMessage: colorVarsForAccentColor - ? colorVarsForAccentColor['light'][400] : 'var(--sendbird-light-primary-400)', + ? colorVarsForAccentColor['light'][400] + : 'var(--sendbird-light-primary-400)', suggestedReply: 'var(--sendbird-light-background-100)', carouselButton: 'var(--sendbird-light-background-100)', }, @@ -152,7 +154,7 @@ export function getTheme({ }, messageDataContent: { sidebar: 'var(--sendbird-light-background-200)', - } + }, }, textColor: { incomingMessage: satColorForBotMessageBGColor ?? 'var(--sendbird-dark-onlight-01)', @@ -180,11 +182,14 @@ export function getTheme({ default: 'var(--sendbird-light-onlight-01)', link: { default: colorVarsForAccentColor - ? colorVarsForAccentColor['light'][300] : 'var(--sendbird-light-primary-300)', + ? colorVarsForAccentColor['light'][300] + : 'var(--sendbird-light-primary-300)', hover: colorVarsForAccentColor - ? colorVarsForAccentColor['light'][400] : 'var(--sendbird-light-primary-400)', + ? colorVarsForAccentColor['light'][400] + : 'var(--sendbird-light-primary-400)', focus: colorVarsForAccentColor - ? colorVarsForAccentColor['light'][300] : 'var(--sendbird-light-primary-300)', + ? colorVarsForAccentColor['light'][300] + : 'var(--sendbird-light-primary-300)', active: 'var(--sendbird-light-onlight-01)', disabled: 'var(--sendbird-light-onlight-03)', }, @@ -208,7 +213,7 @@ export function getTheme({ }, messageDataContent: { intentType: 'var(--sendbird-light-onlight-04)', - } + }, }, accentColor: accentColor ?? 'var(--sendbird-light-primary-300)', }, @@ -224,10 +229,12 @@ export function getTheme({ hover: { // Give 1 level lighter color for hover incomingMessage: colorVarsForBotMessageBGColor - ? colorVarsForBotMessageBGColor['dark'][200] : 'var(--sendbird-dark-background-400)', + ? colorVarsForBotMessageBGColor['dark'][200] + : 'var(--sendbird-dark-background-400)', // Give 1 level darker color for hover outgoingMessage: colorVarsForAccentColor - ? colorVarsForAccentColor['dark'][400] : 'var(--sendbird-dark-primary-300)', + ? colorVarsForAccentColor['dark'][400] + : 'var(--sendbird-dark-primary-300)', suggestedReply: 'var(--sendbird-dark-background-500)', carouselButton: 'var(--sendbird-dark-background-500)', }, @@ -246,7 +253,7 @@ export function getTheme({ }, messageDataContent: { sidebar: 'var(--sendbird-dark-background-400)', - } + }, }, textColor: { outgoingMessage: satColorForAccentColor ?? 'var(--sendbird-dark-onlight-01)', @@ -274,16 +281,15 @@ export function getTheme({ default: 'var(--sendbird-dark-ondark-01)', link: { default: colorVarsForAccentColor - ? colorVarsForAccentColor['dark'][200] : 'var(--sendbird-dark-primary-200)', - hover: colorVarsForAccentColor - ? colorVarsForAccentColor['dark'][300] : 'var(--sendbird-dark-primary-300)', - focus: colorVarsForAccentColor - ? colorVarsForAccentColor['dark'][200] : 'var(--sendbird-dark-primary-200)', + ? colorVarsForAccentColor['dark'][200] + : 'var(--sendbird-dark-primary-200)', + hover: colorVarsForAccentColor ? colorVarsForAccentColor['dark'][300] : 'var(--sendbird-dark-primary-300)', + focus: colorVarsForAccentColor ? colorVarsForAccentColor['dark'][200] : 'var(--sendbird-dark-primary-200)', active: 'var(--sendbird-dark-ondark-01)', disabled: 'var(--sendbird-dark-ondark-03)', }, sideNote: 'var(--sendbird-dark-ondark-02)', - } + }, }, borderColor: { channelHeader: 'var(--sendbird-dark-ondark-04)', @@ -302,7 +308,7 @@ export function getTheme({ }, messageDataContent: { intentType: 'var(--sendbird-dark-ondark-02)', - } + }, }, accentColor: accentColor ?? 'var(--sendbird-dark-primary-200)', }, From 0a4c9250aefdf3cecbc7de58b9992df0be07d922 Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Wed, 21 Aug 2024 17:03:56 +0900 Subject: [PATCH 04/10] put back --- src/main.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/main.tsx b/src/main.tsx index f56afff11..ad8146042 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,9 +5,6 @@ import App from './App'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + , ); From 74fb2f987c73a98aeca1cda644d5d33f3d61f797 Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Thu, 18 Jul 2024 14:02:19 +0900 Subject: [PATCH 05/10] fix --- src/components/CustomChannelComponent.tsx | 7 +++---- src/components/FormInput.tsx | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index 5c8fee6f3..e55587648 100644 --- a/src/components/CustomChannelComponent.tsx +++ b/src/components/CustomChannelComponent.tsx @@ -278,7 +278,6 @@ export function CustomChannelComponent() { if (isWelcomeMessagesGiven && welcomeMessageTimeStamp && message.messageId === firstUserMessage?.messageId) { hasSeparator = !isSameDay(message.createdAt, welcomeMessageTimeStamp); } - return (
+ {message.messageId === lastMessage?.messageId && + true && + message.data && } {message.messageId === lastMessage?.messageId && (() => { if (dynamicReplyOptions.length > 0) { @@ -313,9 +315,6 @@ export function CustomChannelComponent() { } return null; })()} - {message.messageId === lastMessage?.messageId && - isDashboardPreview(customUserAgentParam) && - message.data && }
); diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx index 2ffc3a201..7075293d3 100644 --- a/src/components/FormInput.tsx +++ b/src/components/FormInput.tsx @@ -400,7 +400,7 @@ const FormInput = (props: InputProps) => { ) : ( Date: Thu, 22 Aug 2024 10:50:39 +0900 Subject: [PATCH 06/10] remove form related change --- src/components/FormInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx index 7075293d3..2ffc3a201 100644 --- a/src/components/FormInput.tsx +++ b/src/components/FormInput.tsx @@ -400,7 +400,7 @@ const FormInput = (props: InputProps) => { ) : ( Date: Thu, 22 Aug 2024 10:51:20 +0900 Subject: [PATCH 07/10] format --- src/components/CustomChannelComponent.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index e55587648..e8e9be2b9 100644 --- a/src/components/CustomChannelComponent.tsx +++ b/src/components/CustomChannelComponent.tsx @@ -23,7 +23,7 @@ import useAutoDismissMobileKeyboardHandler from '../hooks/useAutoDismissMobileKe import { useBlockWhileBotResponding } from '../hooks/useBlockWhileBotResponding'; import { useResetHistoryOnConnected } from '../hooks/useResetHistoryOnConnected'; import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming'; -import { isDashboardPreview, isIOSMobile } from '../utils'; +import { isIOSMobile } from '../utils'; import { getBotWelcomeMessages, getSenderUserIdFromMessage, @@ -118,7 +118,7 @@ const Root = styled.div` `; export function CustomChannelComponent() { - const { suggestedMessageContent, botId, enableEmojiFeedback, customUserAgentParam, botStudioEditProps } = + const { suggestedMessageContent, botId, enableEmojiFeedback, botStudioEditProps } = useConstantState(); const { messages, currentChannel: channel, scrollToBottom, refresh } = useGroupChannelContext(); const { resetSession } = useWidgetSetting(); @@ -300,9 +300,9 @@ export function CustomChannelComponent() { isLastBotMessage={isLastBotMessage} messageCount={messageCount} /> - {message.messageId === lastMessage?.messageId && - true && - message.data && } + {message.messageId === lastMessage?.messageId && true && message.data && ( + + )} {message.messageId === lastMessage?.messageId && (() => { if (dynamicReplyOptions.length > 0) { From f0cfabb402969a36a84557401573bfdf74b0c7d6 Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Thu, 22 Aug 2024 11:18:23 +0900 Subject: [PATCH 08/10] format --- src/components/CustomChannelComponent.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index e8e9be2b9..1706b3805 100644 --- a/src/components/CustomChannelComponent.tsx +++ b/src/components/CustomChannelComponent.tsx @@ -118,8 +118,7 @@ const Root = styled.div` `; export function CustomChannelComponent() { - const { suggestedMessageContent, botId, enableEmojiFeedback, botStudioEditProps } = - useConstantState(); + const { suggestedMessageContent, botId, enableEmojiFeedback, botStudioEditProps } = useConstantState(); const { messages, currentChannel: channel, scrollToBottom, refresh } = useGroupChannelContext(); const { resetSession } = useWidgetSetting(); const { userId: currentUserId } = useWidgetSession(); From dd066b99dbdd1bd5df809c7a6bf7c756e88f5ab3 Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Thu, 22 Aug 2024 11:47:57 +0900 Subject: [PATCH 09/10] fix --- src/components/CustomChannelComponent.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index 1706b3805..41656d792 100644 --- a/src/components/CustomChannelComponent.tsx +++ b/src/components/CustomChannelComponent.tsx @@ -23,7 +23,7 @@ import useAutoDismissMobileKeyboardHandler from '../hooks/useAutoDismissMobileKe import { useBlockWhileBotResponding } from '../hooks/useBlockWhileBotResponding'; import { useResetHistoryOnConnected } from '../hooks/useResetHistoryOnConnected'; import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming'; -import { isIOSMobile } from '../utils'; +import {isDashboardPreview, isIOSMobile} from '../utils'; import { getBotWelcomeMessages, getSenderUserIdFromMessage, @@ -118,7 +118,7 @@ const Root = styled.div` `; export function CustomChannelComponent() { - const { suggestedMessageContent, botId, enableEmojiFeedback, botStudioEditProps } = useConstantState(); + const { suggestedMessageContent, botId, enableEmojiFeedback, botStudioEditProps, customUserAgentParam } = useConstantState(); const { messages, currentChannel: channel, scrollToBottom, refresh } = useGroupChannelContext(); const { resetSession } = useWidgetSetting(); const { userId: currentUserId } = useWidgetSession(); @@ -299,9 +299,9 @@ export function CustomChannelComponent() { isLastBotMessage={isLastBotMessage} messageCount={messageCount} /> - {message.messageId === lastMessage?.messageId && true && message.data && ( - - )} + {message.messageId === lastMessage?.messageId && + isDashboardPreview(customUserAgentParam) && + message.data && } {message.messageId === lastMessage?.messageId && (() => { if (dynamicReplyOptions.length > 0) { From aa3f3d2a30ef1e5c81df29b8c83893d0a5166087 Mon Sep 17 00:00:00 2001 From: Liam Cho Date: Thu, 22 Aug 2024 11:48:33 +0900 Subject: [PATCH 10/10] format --- src/components/CustomChannelComponent.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/CustomChannelComponent.tsx b/src/components/CustomChannelComponent.tsx index 41656d792..fde51ea1f 100644 --- a/src/components/CustomChannelComponent.tsx +++ b/src/components/CustomChannelComponent.tsx @@ -23,7 +23,7 @@ import useAutoDismissMobileKeyboardHandler from '../hooks/useAutoDismissMobileKe import { useBlockWhileBotResponding } from '../hooks/useBlockWhileBotResponding'; import { useResetHistoryOnConnected } from '../hooks/useResetHistoryOnConnected'; import { useScrollOnStreaming } from '../hooks/useScrollOnStreaming'; -import {isDashboardPreview, isIOSMobile} from '../utils'; +import { isDashboardPreview, isIOSMobile } from '../utils'; import { getBotWelcomeMessages, getSenderUserIdFromMessage, @@ -118,7 +118,8 @@ const Root = styled.div` `; export function CustomChannelComponent() { - const { suggestedMessageContent, botId, enableEmojiFeedback, botStudioEditProps, customUserAgentParam } = useConstantState(); + const { suggestedMessageContent, botId, enableEmojiFeedback, botStudioEditProps, customUserAgentParam } = + useConstantState(); const { messages, currentChannel: channel, scrollToBottom, refresh } = useGroupChannelContext(); const { resetSession } = useWidgetSetting(); const { userId: currentUserId } = useWidgetSession();