diff --git a/packages/odie-client/src/assets/send-message-icon.tsx b/packages/odie-client/src/assets/send-message-icon.tsx new file mode 100644 index 00000000000000..51fdf466c2086b --- /dev/null +++ b/packages/odie-client/src/assets/send-message-icon.tsx @@ -0,0 +1,13 @@ +export const SendMessageIcon = () => ( + + + + + +); diff --git a/packages/odie-client/src/assets/thumbs-down.tsx b/packages/odie-client/src/assets/thumbs-down.tsx new file mode 100644 index 00000000000000..722b0c3b8d7aa9 --- /dev/null +++ b/packages/odie-client/src/assets/thumbs-down.tsx @@ -0,0 +1,19 @@ +export const ThumbsDown = () => ( + + + + + + + + + + +); diff --git a/packages/odie-client/src/components/message/dislike-feedback-message.tsx b/packages/odie-client/src/components/message/dislike-feedback-message.tsx index 9b2946ac8a6626..c8b844afec9cde 100644 --- a/packages/odie-client/src/components/message/dislike-feedback-message.tsx +++ b/packages/odie-client/src/components/message/dislike-feedback-message.tsx @@ -1,23 +1,19 @@ import { __ } from '@wordpress/i18n'; import Markdown from 'react-markdown'; -import WapuuAvatarSquared from '../../assets/wapuu-squared-avatar.svg'; +import { WapuuAvatar } from '../../assets/wapuu-avatar'; import { useOdieAssistantContext } from '../../context'; import CustomALink from './custom-a-link'; import { GetSupport } from './get-support'; import { uriTransformer } from './uri-transformer'; export const DislikeFeedbackMessage = () => { - const { shouldUseHelpCenterExperience, extraContactOptions, botName } = useOdieAssistantContext(); + const { shouldUseHelpCenterExperience, extraContactOptions } = useOdieAssistantContext(); return ( <>
- { - { botName } + +
{ } } > { __( - 'I’m sorry my last response didn’t meet your expectations! Here’s some other ways to get more in-depth help:', + 'Would you like to contact our support team? Select an option below:', __i18n_text_domain__ ) } - { shouldUseHelpCenterExperience ? : extraContactOptions }
+ { shouldUseHelpCenterExperience ? : extraContactOptions } ); }; diff --git a/packages/odie-client/src/components/message/get-support.scss b/packages/odie-client/src/components/message/get-support.scss index ba9b8031bff65e..2f8e29714db90a 100644 --- a/packages/odie-client/src/components/message/get-support.scss +++ b/packages/odie-client/src/components/message/get-support.scss @@ -1,8 +1,7 @@ .help-center__container-chat .chatbox-messages .odie__transfer-to-human { display: flex; - justify-content: left; - gap: 8px; width: 100%; + margin-left: 11%; button { border-radius: 2px; @@ -14,6 +13,7 @@ justify-content: center; align-items: center; gap: 4px; + color: var(--studio-gray-70); &:hover { border: 1px solid var(--studio-gray-20); diff --git a/packages/odie-client/src/components/message/get-support.tsx b/packages/odie-client/src/components/message/get-support.tsx index 4da7fe8bd21c6a..2139a24a319a5b 100644 --- a/packages/odie-client/src/components/message/get-support.tsx +++ b/packages/odie-client/src/components/message/get-support.tsx @@ -13,7 +13,7 @@ export const GetSupport = () => { return (
- +
); }; diff --git a/packages/odie-client/src/components/message/index.tsx b/packages/odie-client/src/components/message/index.tsx index bb1f41cbec3844..b4eaf81451df00 100644 --- a/packages/odie-client/src/components/message/index.tsx +++ b/packages/odie-client/src/components/message/index.tsx @@ -27,6 +27,7 @@ export type MessageIndicators = { isLastFeedbackMessage: boolean; isLastErrorMessage: boolean; isLastMessage: boolean; + isNextMessageFromSameSender: boolean; }; const MessageAvatarHeader = ( { diff --git a/packages/odie-client/src/components/message/message-content.tsx b/packages/odie-client/src/components/message/message-content.tsx index e1968ec933796e..2f8f17bafc14a5 100644 --- a/packages/odie-client/src/components/message/message-content.tsx +++ b/packages/odie-client/src/components/message/message-content.tsx @@ -27,20 +27,30 @@ export const MessageContent = forwardRef< isLastFeedbackMessage, isLastMessage, isLastUserMessage, + isNextMessageFromSameSender, }, ref: ForwardedRef< HTMLDivElement > ) => { const isUser = message.role === 'user'; + const isWapuu = message.role === 'bot'; + const isHuman = message.role === 'business'; + const messageClasses = clsx( 'odie-chatbox-message', - isUser ? 'odie-chatbox-message-user' : 'odie-chatbox-message-wapuu', + isUser && 'odie-chatbox-message-user', + isHuman && 'odie-chatbox-message-business', + isWapuu && 'odie-chatbox-message-wapuu', `odie-chatbox-message-${ message.type ?? 'message' }`, isLastMessage && 'odie-chatbox-message-last' ); + const containerClasses = clsx( + 'odie-chatbox-message-sources-container', + isNextMessageFromSameSender && 'next-chat-message-same-sender' + ); return (
{ + return ( +
+ +
+ ); +}; export const MessagesContainer = forwardRef< HTMLDivElement, ChatMessagesProps >( ( { currentUser }, ref ) => { @@ -33,6 +41,11 @@ export const MessagesContainer = forwardRef< HTMLDivElement, ChatMessagesProps > const lastMessageIndex = chat.messages.length - 1; + // Used to apply the correct styling on messages + const isNextMessageFromSameSender = ( currentMessage: string, nextMessage: string ) => { + return currentMessage === nextMessage; + }; + return (
{ chat.messages.map( ( message, index ) => ( @@ -44,8 +57,13 @@ export const MessagesContainer = forwardRef< HTMLDivElement, ChatMessagesProps > isLastFeedbackMessage={ lastFeedbackMessageIndex === index } isLastErrorMessage={ lastErrorMessageIndex === index } isLastMessage={ lastMessageIndex === index } + isNextMessageFromSameSender={ isNextMessageFromSameSender( + message.role, + chat.messages[ index + 1 ]?.role + ) } /> ) ) } + { chatStatus === 'dislike' && }
{ chatStatus === 'sending' && } { chatStatus === 'dislike' && } diff --git a/packages/odie-client/src/components/message/style.scss b/packages/odie-client/src/components/message/style.scss index c00143bad7cf2a..c94dc8b04ce1ba 100644 --- a/packages/odie-client/src/components/message/style.scss +++ b/packages/odie-client/src/components/message/style.scss @@ -1,33 +1,55 @@ @import "@automattic/typography/styles/variables"; @import "@automattic/components/src/styles/typography"; +$blueberry-color: #3858e9; +.chatbox-message__dislike-thumb { + display: flex; + width: 96%; + justify-content: flex-end; + margin-top: 4px; + svg { + padding: 14px; + background-color: $blueberry-color; + } +} .odie-chatbox__action-message { display: flex; - flex-direction: column; + flex-direction: row; gap: 8px; padding: 16px; + flex-wrap: wrap; - .message-header { - display: flex; - align-items: center; - width: 100%; - gap: 8px; + .odie-chatbox-dislike-feedback-message { + flex: 1; + .message-header { + width: auto; + } + p { + width: 80%; + display: flex; + padding: 16px; + align-items: center; + justify-content: center; + background-color: var(--studio-gray-0); + /* stylelint-disable-next-line scales/radii */ + border-radius: 8px 8px 8px 0; + font-size: 0.875rem; + margin-bottom: 0; + } } } .odie-chatbox-message { display: flex; - justify-content: space-between; word-wrap: break-word; font-size: $font-body; line-height: 1.4; color: #000; - flex-direction: column; - padding: 16px; + flex-direction: row; + padding: 0 16px; gap: 8px; width: 100%; box-sizing: border-box; - min-height: 64px; text-wrap: pretty; ol, @@ -43,10 +65,18 @@ } } + .chat-feedback-wrapper { + padding-top: 24px; + } + .disclaimer { - color: var(--studio-gray-50); + color: var(--studio-gray-80); font-size: $font-body-extra-small; - text-align: right; + text-align: start; + margin: 16px 0; + .components-external-link { + margin-left: 6px; + } } } @@ -74,30 +104,67 @@ margin-bottom: 0; } -.odie-chatbox-message.odie-chatbox-message-user { - background-color: var(--studio-gray-0); +.odie-chatbox-message.odie-chatbox-message-user > :last-child { + margin-bottom: 0; } -.odie-chatbox-message.odie-chatbox-message-user p { - font-size: 1rem; +.odie-chatbox-message.odie-chatbox-message-user { + /* stylelint-disable-next-line scales/radii */ + border-radius: 8px 8px 0 8px; + background-color: $blueberry-color; + width: 80%; + margin-right: 16px; + padding: 16px; + p { + color: var(--studio-white); + padding: 0; + } } -.odie-chatbox-message.odie-chatbox-message-user > :last-child { - margin-bottom: 0; +.odie-chatbox-message.odie-chatbox-message-business { + p { + /* stylelint-disable-next-line scales/radii */ + border-radius: 8px 8px 8px 0; + background-color:#F7F8FE; + + } + } -.odie-chatbox-message.odie-chatbox-message-wapuu { +.odie-chatbox-message.odie-chatbox-message-wapuu.odie-chatbox-message-message { + /* stylelint-disable-next-line scales/radii */ + border-radius: 8px 8px 8px 0; background-color: var(--studio-white); + flex-wrap: wrap; + + p { + flex: 0.8; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--studio-gray-0); + /* stylelint-disable-next-line scales/radii */ + border-radius: 8px 8px 8px 0; + } } -.odie-chatbox-message.odie-chatbox-message-wapuu p { - font-size: 1rem; +.odie-chatbox-message p { + font-size: 0.875rem; + padding: 16px; } .odie-introduction-message-content { display: flex; align-items: center; justify-content: center; + background-color: var(--studio-gray-0); + width: 80%; + /* stylelint-disable-next-line scales/radii */ + border-radius: 8px 8px 8px 0; + p { + color: var(--studio-gray-80); + line-height: 20px; + } } .odie-chatbox-message-avatar { @@ -109,9 +176,7 @@ .message-header { display: flex; - align-items: center; - width: 100%; - gap: 8px; + align-items: end; .user { justify-content: flex-start; @@ -403,10 +468,11 @@ $custom-border-corner-size: 16px; .odie-feedback-message { position: relative; - font-weight: 600; + font-weight: 500; font-size: 1rem; width: 100%; height: 100%; + color: var(--studio-gray-100); .odie-feedback-component-thanks, .odie-feedback-component-question { @@ -472,6 +538,7 @@ $custom-border-corner-size: 16px; } .odie-chatbox-message-sources-container { + padding-bottom: 16px; .foldable-card { margin: 0 !important; width: 100% !important; @@ -490,4 +557,7 @@ $custom-border-corner-size: 16px; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); } } + &.next-chat-message-same-sender { + padding-bottom: 8px; + } } diff --git a/packages/odie-client/src/components/message/user-message.tsx b/packages/odie-client/src/components/message/user-message.tsx index afb5f2ebeb0d18..4609edfc2bf4db 100644 --- a/packages/odie-client/src/components/message/user-message.tsx +++ b/packages/odie-client/src/components/message/user-message.tsx @@ -22,7 +22,7 @@ export const UserMessage = ( { const hasCannedResponse = message.context?.flags?.canned_response; const isRequestingHumanSupport = message.context?.flags?.forward_to_human_support; - const isOnlyMessage = message.context?.flags?.only_message; + const hideDisclaimerContent = message.context?.flags?.hide_disclaimer_content; const hasFeedback = !! message?.rating_value; const isBot = message.role === 'bot'; const isPositiveFeedback = @@ -36,6 +36,25 @@ export const UserMessage = ( { const displayMessage = isUserEligibleForPaidSupport && hasCannedResponse ? message.content : forwardMessage; + const renderExtraContactOptions = () => { + return shouldUseHelpCenterExperience ? : extraContactOptions; + }; + + const renderDisclaimers = () => ( + <> + + +
+ { __( + "Generated by WordPress.com's Support AI. AI-generated responses may contain inaccurate information.", + __i18n_text_domain__ + ) } + + { __( 'Learn more.', __i18n_text_domain__ ) } + +
+ + ); return ( <> @@ -47,30 +66,10 @@ export const UserMessage = ( { > { isRequestingHumanSupport ? displayMessage : message.content } - { ! isOnlyMessage && ( - <> - { showExtraContactOptions && - ( shouldUseHelpCenterExperience ? : extraContactOptions ) } - { ! showExtraContactOptions && isBot && ( - - ) } - { isBot && ( - <> - { ! showExtraContactOptions && ( - - ) } -
- { __( - "Generated by WordPress.com's Support AI. AI-generated responses may contain inaccurate information.", - __i18n_text_domain__ - ) } - - { __( 'Learn more.', __i18n_text_domain__ ) } - -
- - ) } - + { ! hideDisclaimerContent && ( +
+ { showExtraContactOptions ? renderExtraContactOptions() : isBot && renderDisclaimers() } +
) } ); diff --git a/packages/odie-client/src/components/send-message-input/index.tsx b/packages/odie-client/src/components/send-message-input/index.tsx index 4df2974cd8a0e2..ad71b386a109e5 100644 --- a/packages/odie-client/src/components/send-message-input/index.tsx +++ b/packages/odie-client/src/components/send-message-input/index.tsx @@ -1,7 +1,6 @@ import { Spinner } from '@wordpress/components'; import { useCallback, useRef, RefObject } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import ArrowUp from '../../assets/arrow-up.svg'; +import { SendMessageIcon } from '../../assets/send-message-icon'; import { useOdieAssistantContext } from '../../context'; import { useSendChatMessage } from '../../query/use-send-chat-message'; import { Message } from '../../types/'; @@ -70,7 +69,7 @@ export const OdieSendMessageButton = ( { className="odie-send-message-inner-button" disabled={ shouldBeDisabled } > - { +
diff --git a/packages/odie-client/src/components/send-message-input/style.scss b/packages/odie-client/src/components/send-message-input/style.scss index 5f13e76eff1100..a4f03e41507633 100644 --- a/packages/odie-client/src/components/send-message-input/style.scss +++ b/packages/odie-client/src/components/send-message-input/style.scss @@ -1,4 +1,5 @@ @import "@automattic/typography/styles/variables"; +$blueberry-color: #3858e9; .odie-send-message-input-container { display: flex; @@ -51,7 +52,7 @@ background: none; border: none; cursor: pointer; - background-color: var(--color-primary); + background-color: $blueberry-color; height: 40px; width: 40px; diff --git a/packages/odie-client/src/query/use-create-zendesk-conversation.ts b/packages/odie-client/src/query/use-create-zendesk-conversation.ts index d4ce9945267f34..b7a8c81049e240 100644 --- a/packages/odie-client/src/query/use-create-zendesk-conversation.ts +++ b/packages/odie-client/src/query/use-create-zendesk-conversation.ts @@ -20,7 +20,7 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { type: 'message', context: { flags: { - only_message: true, + hide_disclaimer_content: true, }, site_id: null, }, diff --git a/packages/odie-client/src/style.scss b/packages/odie-client/src/style.scss index 283d2a3b93e88b..10a1070f9b4a09 100644 --- a/packages/odie-client/src/style.scss +++ b/packages/odie-client/src/style.scss @@ -34,6 +34,7 @@ align-items: flex-start; height: 100%; overscroll-behavior: contain; + padding-top: 16px; .odie-chatbox-bottom-edge { min-height: 8px; @@ -42,7 +43,9 @@ .odie-chatbox-message-sources-container { width: 100%; - + display: flex; + flex-direction: column; + align-items: flex-end; &:last-of-type > .odie-chatbox-message-sources-container { margin-bottom: 64px; } diff --git a/packages/odie-client/src/types/index.ts b/packages/odie-client/src/types/index.ts index f42cfbd88aaf0e..831ea3d245d626 100644 --- a/packages/odie-client/src/types/index.ts +++ b/packages/odie-client/src/types/index.ts @@ -62,7 +62,7 @@ export type Context = { flags?: { forward_to_human_support?: boolean; canned_response?: boolean; - only_message?: boolean; + hide_disclaimer_content?: boolean; }; };