Help Center: Re-design improvements

packages/odie-client/src/assets/send-message-icon.tsx

@@ -0,0 +1,13 @@
+export const SendMessageIcon = () => (
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g id="Icon">
+			<path
+				id="Shape"
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M6.33139 5.74784C5.30139 5.32184 4.27139 6.35484 4.69939 7.38384L6.40139 11.3138L13.8824 11.8888C14.0054 11.8988 14.0054 12.0788 13.8824 12.0888L6.39939 12.6638L4.69939 16.5728C4.27039 17.6018 5.30139 18.6348 6.33139 18.2088L18.5964 13.1328C19.6264 12.7068 19.6264 11.2488 18.5964 10.8228L6.33139 5.74784Z"
+				fill="white"
+			/>
+		</g>
+	</svg>
+);

packages/odie-client/src/assets/thumbs-down.tsx

@@ -0,0 +1,19 @@
+export const ThumbsDown = () => (
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g id="Icon" clipPath="url(#clip0_755_6104)">
+			<path
+				id="Vector"
+				d="M12.7503 1.49978H14.7528C15.1772 1.49228 15.5897 1.64088 15.9118 1.9174C16.234 2.19391 16.4434 2.57908 16.5003 2.99978V8.24978C16.4434 8.67049 16.234 9.05566 15.9118 9.33217C15.5897 9.60868 15.1772 9.75729 14.7528 9.74978H12.7503M7.50027 11.2498V14.2498C7.50027 14.8465 7.73732 15.4188 8.15928 15.8408C8.58123 16.2627 9.15353 16.4998 9.75027 16.4998L12.7503 9.74978V1.49978H4.29027C3.92852 1.49569 3.57748 1.62248 3.30184 1.85678C3.02619 2.09108 2.84451 2.4171 2.79027 2.77478L1.75527 9.52478C1.72264 9.73976 1.73714 9.95927 1.79776 10.1681C1.85839 10.3769 1.96369 10.5701 2.10637 10.7341C2.24906 10.8982 2.42571 11.0293 2.62409 11.1184C2.82247 11.2074 3.03784 11.2522 3.25527 11.2498H7.50027Z"
+				stroke="white"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_755_6104">
+				<rect width="18" height="18" fill="white" />
+			</clipPath>
+		</defs>
+	</svg>
+);

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 (
 		<>
 			<div className="message-header bot">
-				<img
-					src={ WapuuAvatarSquared }
-					alt={ __( 'AI profile picture', __i18n_text_domain__ ) }
-					className="odie-chatbox-message-avatar"
-				/>
-				<strong className="message-header-name">{ botName }</strong>
+				<WapuuAvatar className="odie-chatbox-message-avatar" />
+				<strong className="message-header-name"></strong>
 			</div>
 			<div className="odie-chatbox-dislike-feedback-message">
 				<Markdown
@@ -27,12 +23,12 @@ export const DislikeFeedbackMessage = () => {
 					} }
 				>
 					{ __(
-						'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__
 					) }
 				</Markdown>
-				{ shouldUseHelpCenterExperience ? <GetSupport /> : extraContactOptions }
 			</div>
+			{ shouldUseHelpCenterExperience ? <GetSupport /> : extraContactOptions }
 		</>
 	);
 };

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);

packages/odie-client/src/components/message/get-support.tsx

@@ -13,7 +13,7 @@ export const GetSupport = () => {
 
 	return (
 		<div className="odie__transfer-to-human">
-			<button onClick={ handleOnClick }>Get support</button>
+			<button onClick={ handleOnClick }>Get instant support</button>
 		</div>
 	);
 };

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 = ( {

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 (
 			<div
-				className="odie-chatbox-message-sources-container"
+				className={ containerClasses }
 				ref={ ref }
 				data-is-last-user-message={ isLastUserMessage }
 				data-is-last-error-message={ isLastErrorMessage }

packages/odie-client/src/components/message/messages-container.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+import { ThumbsDown } from '../../assets/thumbs-down';
 import { useOdieAssistantContext } from '../../context';
 import { useZendeskMessageListener } from '../../utils';
 import { DislikeFeedbackMessage } from './dislike-feedback-message';
@@ -9,6 +10,13 @@ import type { CurrentUser } from '../../types/';
 interface ChatMessagesProps {
 	currentUser: CurrentUser;
 }
+const DislikeThumb = () => {
+	return (
+		<div className="chatbox-message__dislike-thumb">
+			<ThumbsDown />
+		</div>
+	);
+};
 
 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 (
 			<div className="chatbox-messages" ref={ ref }>
 				{ 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' && <DislikeThumb /> }
 				<div className="odie-chatbox__action-message">
 					{ chatStatus === 'sending' && <ThinkingPlaceholder /> }
 					{ chatStatus === 'dislike' && <DislikeFeedbackMessage /> }

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;
+	}
 }