Help Center: add Zendesk chat second method

packages/help-center/src/components/help-center-odie.tsx

@@ -12,7 +12,7 @@ import OdieAssistantProvider, {
 } from '@automattic/odie-client';
 import { useSelect } from '@wordpress/data';
 import { useI18n } from '@wordpress/react-i18n';
-import React, { useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { useNavigate, Navigate } from 'react-router-dom';
 import PopoverMenuItem from 'calypso/components/popover-menu/item';
 import { useHelpCenterContext } from '../contexts/HelpCenterContext';
@@ -22,7 +22,7 @@ import { HELP_CENTER_STORE } from '../stores';
  * Internal Dependencies
  */
 import { BackButtonHeader } from './back-button';
-import { ExtraContactOptions } from './help-center-extra-contact-option';
+import { HelpCenterZendesk } from './help-center-zendesk';
 import './help-center-odie.scss';
 import type { HelpCenterSelect } from '@automattic/data-stores';
 import type { OdieAllowedBots } from '@automattic/odie-client/src/types/index';
@@ -79,6 +79,7 @@ export function HelpCenterOdie( {
 	isUserEligible: boolean;
 	searchTerm: string;
 } ): JSX.Element {
+	const [ messageHandler, setMessageHandler ] = useState( undefined );
 	const navigate = useNavigate();
 	const shouldUseWapuu = useShouldUseWapuu();
 	const preventOdieAccess = ! shouldUseWapuu && ! isUserEligible;
@@ -135,12 +136,16 @@ export function HelpCenterOdie( {
 				logger={ trackEvent }
 				loggerEventNamePrefix="calypso_odie"
 				selectedSiteId={ site?.ID as number }
-				extraContactOptions={ <ExtraContactOptions isUserEligible={ isUserEligible } /> }
 				navigateToContactOptions={ navigateToContactOptions }
 				navigateToSupportDocs={ navigateToSupportDocs }
 				isUserEligible={ isUserEligible }
+				messageHandler={ messageHandler }
 			>
 				<div className="help-center__container-content-odie">
+					<HelpCenterZendesk
+						setMessageHandler={ setMessageHandler }
+						messageHandler={ messageHandler }
+					/>
 					<div className="help-center__container-odie-header">
 						<BackButtonHeader className="help-center__container-odie-back-button">
 							<OdieEllipsisMenu />

packages/help-center/src/components/help-center-zendesk.tsx

@@ -0,0 +1,65 @@
+import { useOdieAssistantContext } from '@automattic/odie-client';
+import { useSmooch } from '@automattic/zendesk-client';
+import { useEffect, useState } from 'react';
+import { useHelpCenterContext } from '../contexts/HelpCenterContext';
+
+export const HelpCenterZendesk = ( {
+	setMessageHandler,
+	messageHandler,
+}: {
+	setMessageHandler: any;
+	messageHandler: any;
+} ) => {
+	const [ whoAreWeTalkingTo, setWhoAreWeTalkingTo ] = useState< 'odie' | 'human' >( 'odie' );
+	const { chat, addMessage, clearChat } = useOdieAssistantContext();
+	const { site } = useHelpCenterContext();
+	const { createConversation, addMessengerListener, sendMessage } = useSmooch();
+
+	const interceptedUserMessageHandler = ( message: any ) => {
+		if ( sendMessage ) {
+			sendMessage( message?.content );
+		}
+	};
+
+	const forwardedZendeskMessageHandler = ( message: any ) => {
+		if ( addMessage ) {
+			addMessage( {
+				content: message?.text,
+				role: 'human',
+				type: 'message',
+			} );
+		}
+	};
+
+	// Listen for the transfer to human event.
+	useEffect( () => {
+		const lastMessage = chat.messages[ chat.messages.length - 1 ];
+
+		if ( lastMessage?.context?.flags?.forward_to_human_support ) {
+			clearChat();
+			setWhoAreWeTalkingTo( 'human' );
+			if ( createConversation ) {
+				createConversation(
+					{
+						messaging_initial_message: 'Passing in from Odie',
+						messaging_source: 'help-center',
+						messaging_site_id: site?.ID as number,
+					},
+					{ odieChatId: chat.chat_id as number }
+				);
+			}
+		}
+	}, [ chat.messages ] );
+
+	// Switch to human
+	useEffect( () => {
+		if ( whoAreWeTalkingTo === 'human' && ! messageHandler ) {
+			setMessageHandler( interceptedUserMessageHandler );
+			if ( addMessengerListener ) {
+				addMessengerListener( forwardedZendeskMessageHandler );
+			}
+		}
+	}, [ whoAreWeTalkingTo ] );
+
+	return null;
+};

packages/help-center/src/components/help-center.tsx

@@ -3,8 +3,8 @@
  * External Dependencies
  */
 import { initializeAnalytics } from '@automattic/calypso-analytics';
-import { useZendeskMessagingBindings, useLoadZendeskMessaging } from '@automattic/zendesk-client';
-import { useSelect } from '@wordpress/data';
+import { useLoadZendeskMessaging, useSmooch } from '@automattic/zendesk-client';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { createPortal, useEffect, useRef } from '@wordpress/element';
 /**
  * Internal Dependencies
@@ -35,6 +35,7 @@ const HelpCenter: React.FC< Container > = ( {
 			isMinimized: helpCenterSelect.getIsMinimized(),
 		};
 	}, [] );
+	const { setUnreadCount } = useDispatch( HELP_CENTER_STORE );
 
 	const { currentUser } = useHelpCenterContext();
 
@@ -46,14 +47,31 @@ const HelpCenter: React.FC< Container > = ( {
 
 	useActionHooks();
 
-	const { hasActiveChats, isEligibleForChat } = useChatStatus();
+	const { isEligibleForChat } = useChatStatus();
 	const { isMessagingScriptLoaded } = useLoadZendeskMessaging(
 		'zendesk_support_chat_key',
-		( isHelpCenterShown && isEligibleForChat ) || hasActiveChats,
-		isEligibleForChat || hasActiveChats
+		isHelpCenterShown && isEligibleForChat,
+		isEligibleForChat
 	);
+	const { init, initSmooch, destroy, addUnreadCountListener } = useSmooch();
+	const ref = useRef( null );
 
-	useZendeskMessagingBindings( HELP_CENTER_STORE, hasActiveChats, isMessagingScriptLoaded );
+	useEffect( () => {
+		if ( isMessagingScriptLoaded && ref?.current ) {
+			initSmooch( ref.current );
+		}
+		return () => {
+			destroy();
+		};
+	}, [ isMessagingScriptLoaded, ref?.current ] );
+
+	useEffect( () => {
+		if ( init && addUnreadCountListener ) {
+			addUnreadCountListener( ( unreadCount: number ) => {
+				setUnreadCount( unreadCount );
+			} );
+		}
+	}, [ init, setUnreadCount ] );
 
 	const openingCoordinates = useOpeningCoordinates( isHelpCenterShown, isMinimized );
 
@@ -73,12 +91,15 @@ const HelpCenter: React.FC< Container > = ( {
 	}, [ portalParent, handleClose ] );
 
 	return createPortal(
-		<HelpCenterContainer
-			handleClose={ handleClose }
-			hidden={ hidden }
-			currentRoute={ currentRoute }
-			openingCoordinates={ openingCoordinates }
-		/>,
+		<>
+			<HelpCenterContainer
+				handleClose={ handleClose }
+				hidden={ hidden }
+				currentRoute={ currentRoute }
+				openingCoordinates={ openingCoordinates }
+			/>
+			<div ref={ ref } style={ { display: 'none' } }></div>
+		</>,
 		portalParent
 	);
 };

packages/odie-client/src/assets/human-avatar.tsx

@@ -0,0 +1,28 @@
+export const HumanAvatar: React.FC = () => (
+	<svg
+		width="38"
+		height="38"
+		viewBox="0 0 38 38"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		xmlnsXlink="http://www.w3.org/1999/xlink"
+	>
+		<g clipPath="url(#clip0_351_8437)">
+			<circle cx="19" cy="19" r="19" fill="url(#pattern0_351_8437)" />
+		</g>
+		<defs>
+			<pattern id="pattern0_351_8437" patternContentUnits="objectBoundingBox" width="1" height="1">
+				<use xlinkHref="#image0_351_8437" transform="scale(0.00833333)" />
+			</pattern>
+			<clipPath id="clip0_351_8437">
+				<rect width="38" height="38" rx="19" fill="white" />
+			</clipPath>
+			<image
+				id="image0_351_8437"
+				width="120"
+				height="120"
+				xlinkHref="data:image/png;base64,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"
+			/>
+		</defs>
+	</svg>
+);

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

@@ -8,6 +8,7 @@ import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
+import { HumanAvatar } from '../../assets/human-avatar';
 import MaximizeIcon from '../../assets/maximize-icon.svg';
 import MinimizeIcon from '../../assets/minimize-icon.svg';
 import WapuuAvatar from '../../assets/wapuu-squared-avatar.svg';
@@ -75,15 +76,18 @@ const ChatMessage = ( props: ChatMessageProps & MessageIndicators ) => {
 		</>
 	) : (
 		<>
-			<img
-				src={ WapuuAvatar }
-				alt={ sprintf(
-					/* translators: %s is bot name, like Wapuu */
-					_x( '%(botName)s profile picture', 'html alt tag', __i18n_text_domain__ ),
-					botName
-				) }
-				className={ wapuuAvatarClasses }
-			/>
+			{ message.role === 'human' && <HumanAvatar /> }
+			{ message.role === 'bot' && (
+				<img
+					src={ WapuuAvatar }
+					alt={ sprintf(
+						/* translators: %s is bot name, like Wapuu */
+						_x( '%(botName)s profile picture', 'html alt tag', __i18n_text_domain__ ),
+						botName
+					) }
+					className={ wapuuAvatarClasses }
+				/>
+			) }
 			{ message.type === 'placeholder' ? (
 				<img
 					src={ WapuuThinking }

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

@@ -20,7 +20,7 @@ export const UserMessage = ( {
 	const { extraContactOptions, isUserEligible } = useOdieAssistantContext();
 	const isRequestingHumanSupport = message.context?.flags?.forward_to_human_support;
 	const hasFeedback = !! message?.rating_value;
-	const isUser = message.role === 'user';
+	const isBot = message.role === 'bot';
 	const isPositiveFeedback =
 		hasFeedback && message && message.rating_value && +message.rating_value === 1;
 	const showExtraContactOptions =
@@ -48,14 +48,14 @@ export const UserMessage = ( {
 				{ isRequestingHumanSupport ? forwardMessage : message.content }
 			</Markdown>
 			{ showExtraContactOptions && extraContactOptions }
-			{ ! hasFeedback && ! isUser && (
+			{ ! hasFeedback && isBot && (
 				<WasThisHelpfulButtons
 					message={ message }
 					onDislike={ onDislike }
 					isDisliked={ isDisliked }
 				/>
 			) }
-			{ ! isUser && (
+			{ isBot && (
 				<>
 					{ ! showExtraContactOptions && <DirectEscalationLink messageId={ message.message_id } /> }
 					<div className="disclaimer">

packages/odie-client/src/components/send-message-input/index.tsx

@@ -28,7 +28,8 @@ export const OdieSendMessageButton = ( {
 	const { _x } = useI18n();
 	const [ messageString, setMessageString ] = useState< string >( '' );
 	const divContainerRef = useRef< HTMLDivElement >( null );
-	const { initialUserMessage, chat, trackEvent, isLoading } = useOdieAssistantContext();
+	const { initialUserMessage, chat, trackEvent, isLoading, messageHandler } =
+		useOdieAssistantContext();
 	const { mutateAsync: sendOdieMessage } = useOdieSendMessage();
 
 	useEffect( () => {
@@ -46,8 +47,11 @@ export const OdieSendMessageButton = ( {
 				role: 'user',
 				type: 'message',
 			} as Message;
-
-			await sendOdieMessage( { message } );
+			if ( messageHandler ) {
+				messageHandler( message );
+			} else {
+				await sendOdieMessage( { message } );
+			}
 
 			trackEvent( 'chat_message_action_receive' );
 		} catch ( e ) {
@@ -56,7 +60,7 @@ export const OdieSendMessageButton = ( {
 				error: error?.message,
 			} );
 		}
-	}, [ messageString, sendOdieMessage, trackEvent ] );
+	}, [ messageString, sendOdieMessage, trackEvent, messageHandler ] );
 
 	const sendMessageIfNotEmpty = useCallback( async () => {
 		if ( messageString.trim() === '' ) {