[Odie] Give Wapuu a chance

packages/odie-client/src/components/message/message-content.tsx

@@ -1,6 +1,7 @@
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import Markdown from 'react-markdown';
+import { useOdieAssistantContext } from '../../context';
 import { zendeskMessageConverter } from '../../utils';
 import ChatWithSupportLabel from '../chat-with-support';
 import CustomALink from './custom-a-link';
@@ -24,6 +25,7 @@ export const MessageContent = ( {
 	displayChatWithSupportLabel?: boolean;
 } ) => {
 	const { __ } = useI18n();
+	const { experimentVariationName } = useOdieAssistantContext();
 	const messageClasses = clsx(
 		'odie-chatbox-message',
 		`odie-chatbox-message-${ message.role }`,
@@ -35,6 +37,9 @@ export const MessageContent = ( {
 		isNextMessageFromSameSender && 'next-chat-message-same-sender'
 	);
 
+	const stopConflatingNegativeRatingWithContactSupport =
+		experimentVariationName === 'give_wapuu_a_chance';
+
 	const isMessageWithOnlyText =
 		message.context?.flags?.hide_disclaimer_content ||
 		message.context?.question_tags?.inquiry_type === 'user-is-greeting';
@@ -97,7 +102,8 @@ export const MessageContent = ( {
 							</p>
 						</div>
 					) }
-					{ message.type === 'dislike-feedback' && <DislikeFeedbackMessage /> }
+					{ ! stopConflatingNegativeRatingWithContactSupport &&
+						message.type === 'dislike-feedback' && <DislikeFeedbackMessage /> }
 				</div>
 			</div>
 			{ displayChatWithSupportLabel && <ChatWithSupportLabel /> }

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

@@ -45,7 +45,7 @@ interface ChatMessagesProps {
 }
 
 export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => {
-	const { chat, botNameSlug, isChatLoaded } = useOdieAssistantContext();
+	const { chat, botNameSlug, experimentVariationName, isChatLoaded } = useOdieAssistantContext();
 	const createZendeskConversation = useCreateZendeskConversation();
 	const resetSupportInteraction = useResetSupportInteraction();
 	const [ searchParams, setSearchParams ] = useSearchParams();
@@ -104,6 +104,13 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => {
 		return currentMessage === nextMessage;
 	};
 
+	const stopConflatingNegativeRatingWithContactSupport =
+		experimentVariationName === 'give_wapuu_a_chance';
+
+	const availableStatusWithFeedback = stopConflatingNegativeRatingWithContactSupport
+		? [ 'sending', 'transfer' ]
+		: [ 'sending', 'dislike', 'transfer' ];
+
 	return (
 		<>
 			<div className="chatbox-messages" ref={ messagesContainerRef }>
@@ -134,8 +141,10 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => {
 							/>
 						) ) }
 						<JumpToRecent containerReference={ messagesContainerRef } />
-						{ chat.status === 'dislike' && <DislikeThumb /> }
-						{ [ 'sending', 'dislike', 'transfer' ].includes( chat.status ) && (
+						{ chat.status === 'dislike' && stopConflatingNegativeRatingWithContactSupport && (
+							<DislikeThumb />
+						) }
+						{ availableStatusWithFeedback.includes( chat.status ) && (
 							<div className="odie-chatbox__action-message">
 								{ chat.status === 'sending' && <ThinkingPlaceholder /> }
 								{ chat.status === 'dislike' && <DislikeFeedbackMessage /> }

packages/odie-client/src/components/message/user-message.tsx

@@ -22,17 +22,25 @@ export const UserMessage = ( {
 	message: Message;
 	isMessageWithoutEscalationOption?: boolean;
 } ) => {
-	const { isUserEligibleForPaidSupport, trackEvent, chat } = useOdieAssistantContext();
+	const { isUserEligibleForPaidSupport, trackEvent, chat, experimentVariationName } =
+		useOdieAssistantContext();
 
 	const hasCannedResponse = message.context?.flags?.canned_response;
-	const isRequestingHumanSupport = message.context?.flags?.forward_to_human_support;
+	const isRequestingHumanSupport = message.context?.flags?.forward_to_human_support ?? false;
 	const hasFeedback = !! message?.rating_value;
 	const isBot = message.role === 'bot';
 	const isConnectedToZendesk = chat?.provider === 'zendesk';
 	const isPositiveFeedback =
 		hasFeedback && message && message.rating_value && +message.rating_value === 1;
-	const showExtraContactOptions =
-		( hasFeedback && ! isPositiveFeedback ) || isRequestingHumanSupport;
+
+	const isExperimentGiveWapuuAChance = experimentVariationName === 'give_wapuu_a_chance';
+
+	let showExtraContactOptions = false;
+	if ( isExperimentGiveWapuuAChance ) {
+		showExtraContactOptions = isRequestingHumanSupport;
+	} else {
+		showExtraContactOptions = ( hasFeedback && ! isPositiveFeedback ) || isRequestingHumanSupport;
+	}
 
 	const forwardMessage = isUserEligibleForPaidSupport
 		? ODIE_FORWARD_TO_ZENDESK_MESSAGE

packages/odie-client/src/context/index.tsx

@@ -37,12 +37,14 @@ export const OdieAssistantContext = createContext< OdieAssistantContextInterface
 	canConnectToZendesk: false,
 	clearChat: noop,
 	currentUser: { display_name: 'Me' },
+	experimentVariationName: null,
 	isChatLoaded: false,
 	isMinimized: false,
 	isUserEligibleForPaidSupport: false,
 	odieBroadcastClientId: '',
 	setChat: noop,
 	setChatStatus: noop,
+	setExperimentVariationName: noop,
 	setMessageLikedStatus: noop,
 	setWaitAnswerToFirstMessageFromHumanSupport: noop,
 	trackEvent: noop,
@@ -84,6 +86,10 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( {
 		};
 	}, [] );
 
+	const [ experimentVariationName, setExperimentVariationName ] = useState<
+		string | null | undefined
+	>( null );
+
 	/**
 	 * The main chat thread.
 	 * This is where we manage the state of the chat.
@@ -176,13 +182,15 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( {
 				extraContactOptions,
 				isChatLoaded,
 				isMinimized,
+				experimentVariationName,
 				isUserEligibleForPaidSupport,
 				canConnectToZendesk,
 				odieBroadcastClientId,
 				selectedSiteId,
 				selectedSiteURL,
 				userFieldMessage,
 				setChatStatus,
+				setExperimentVariationName,
 				setMessageLikedStatus,
 				setWaitAnswerToFirstMessageFromHumanSupport,
 				trackEvent,

packages/odie-client/src/data/use-send-odie-message.ts

@@ -34,8 +34,15 @@ export const useSendOdieMessage = () => {
 	const internal_message_id = generateUUID();
 	const queryClient = useQueryClient();
 
-	const { botNameSlug, selectedSiteId, version, setChat, odieBroadcastClientId, setChatStatus } =
-		useOdieAssistantContext();
+	const {
+		botNameSlug,
+		selectedSiteId,
+		version,
+		setChat,
+		odieBroadcastClientId,
+		setChatStatus,
+		setExperimentVariationName,
+	} = useOdieAssistantContext();
 
 	const addMessage = ( message: Message | Message[], props?: Partial< Chat > ) => {
 		setChat( ( prevChat ) => ( {
@@ -111,7 +118,7 @@ export const useSendOdieMessage = () => {
 				type: 'message',
 				context: returnedChat.messages[ 0 ].context,
 			};
-
+			setExperimentVariationName( returnedChat.experiment_name );
 			addMessage( botMessage, { odieId: returnedChat.chat_id } );
 			broadcastOdieMessage( botMessage, odieBroadcastClientId );
 		},

packages/odie-client/src/types.ts

@@ -10,6 +10,7 @@ export type OdieAssistantContextInterface = {
 	chat: Chat;
 	clearChat: () => void;
 	currentUser: CurrentUser;
+	experimentVariationName: string | undefined | null;
 	isMinimized?: boolean;
 	isUserEligibleForPaidSupport: boolean;
 	extraContactOptions?: ReactNode;
@@ -18,6 +19,7 @@ export type OdieAssistantContextInterface = {
 	selectedSiteURL?: string | null;
 	userFieldMessage?: string | null;
 	waitAnswerToFirstMessageFromHumanSupport: boolean;
+	setExperimentVariationName: ( variationName: string | null | undefined ) => void;
 	setMessageLikedStatus: ( message: Message, liked: boolean ) => void;
 	setChat: ( chat: Chat | SetStateAction< Chat > ) => void;
 	setChatStatus: ( status: ChatStatus ) => void;
@@ -156,7 +158,12 @@ export type Message = {
 
 export type ChatStatus = 'loading' | 'loaded' | 'sending' | 'dislike' | 'transfer' | 'closed';
 
-export type ReturnedChat = { chat_id: number; messages: Message[]; wpcom_user_id: number };
+export type ReturnedChat = {
+	chat_id: number;
+	messages: Message[];
+	wpcom_user_id: number;
+	experiment_name: string | undefined | null;
+};
 
 export type OdieChat = {
 	messages: Message[];