Types

apps/editing-toolkit/editing-toolkit-plugin/help-center/class-help-center.php

@@ -128,6 +128,7 @@ public function enqueue_script() {
 		$user            = get_userdata( $user_id );
 		$primary_site_id = $user->primary_blog;
 		$user_email      = $user->user_email;
+		$avatar_url      = function_exists( 'wpcom_get_avatar_url' ) ? wpcom_get_avatar_url( $user_email, 64, '', true )[0] : null;
 
 		wp_localize_script(
 			'help-center-script',
@@ -139,6 +140,8 @@ public function enqueue_script() {
 				'currentUserId' => get_current_user_id(),
 				'primarySiteId' => $primary_site_id,
 				'userEmail'     => $user_email,
+				'avatarUrl'     => $avatar_url,
+				'displayName'   => $user->display_name,
 			)
 		);
 

apps/editing-toolkit/editing-toolkit-plugin/help-center/src/admin-bar.js

@@ -40,6 +40,9 @@ function AdminHelpCenterContent() {
 			locale={ window.helpCenterData.locale }
 			sectionName="wp-admin"
 			currentUserId={ window.helpCenterData.current_user_id }
+			avatarUrl={ window.helpCenterData.avatarUrl }
+			displayName={ window.helpCenterData.displayName }
+			userEmail={ window.helpCenterData.userEmail }
 			selectedSiteId={ window.helpCenterData.current }
 			hasPurchases={ false }
 			primarySiteId={ window.helpCenterData.primary_site_id }

apps/editing-toolkit/editing-toolkit-plugin/help-center/src/help-center.js

@@ -69,6 +69,9 @@ function HelpCenterContent() {
 				sectionName="gutenberg-editor"
 				currentUserId={ window.helpCenterData.current_user_id }
 				selectedSiteId={ window.helpCenterData.current }
+				avatarUrl={ window.helpCenterData.avatarUrl }
+				displayName={ window.helpCenterData.displayName }
+				userEmail={ window.helpCenterData.userEmail }
 				hasPurchases={ false }
 				primarySiteId={ window.helpCenterData.primary_site_id }
 				handleClose={ closeCallback }

client/landing/stepper/declarative-flow/internals/components/help-center/async.tsx

@@ -4,10 +4,14 @@ import { useLocale } from '@automattic/i18n-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
 import AsyncLoad from 'calypso/components/async-load';
 import { useSelector } from 'calypso/state';
-import { getCurrentUserId } from 'calypso/state/current-user/selectors';
+import {
+	getCurrentUser,
+	getCurrentUserDisplayName,
+	getCurrentUserEmail,
+	getCurrentUserId,
+} from 'calypso/state/current-user/selectors';
 import { getUserPurchases } from 'calypso/state/purchases/selectors';
 import getPrimarySiteId from 'calypso/state/selectors/get-primary-site-id';
-import hasCancelableUserPurchases from 'calypso/state/selectors/has-cancelable-user-purchases';
 import { getSiteAdminUrl, isJetpackSite } from 'calypso/state/sites/selectors';
 import { getSection, getSelectedSiteId } from 'calypso/state/ui/selectors';
 
@@ -24,7 +28,10 @@ const AsyncHelpCenter = () => {
 	const currentUserId = useSelector( getCurrentUserId );
 	const selectedSiteId = useSelector( getSelectedSiteId );
 	const userPurchases = useSelector( getUserPurchases );
-	const hasPurchases = useSelector( hasCancelableUserPurchases );
+	const user = useSelector( getCurrentUser );
+	const displayName = useSelector( getCurrentUserDisplayName );
+	const userEmail = useSelector( getCurrentUserEmail );
+	const avatarUrl = user?.avatar_URL;
 	const primarySiteId = useSelector( getPrimarySiteId );
 	const adminUrl = useSelector( ( state ) => getSiteAdminUrl( state, selectedSiteId ) );
 	const isJetpack = useSelector( ( state ) =>
@@ -54,7 +61,9 @@ const AsyncHelpCenter = () => {
 			currentUserId={ currentUserId }
 			selectedSiteId={ selectedSiteId }
 			userPurchases={ userPurchases }
-			hasPurchases={ hasPurchases }
+			avatarUrl={ avatarUrl }
+			displayName={ displayName }
+			userEmail={ userEmail }
 			primarySiteId={ primarySiteId }
 			placeholder={ null }
 			handleClose={ handleClose }

client/layout/index.jsx

@@ -39,6 +39,8 @@ import {
 	isUserLoggedIn,
 	getCurrentUserEmail,
 	getCurrentUserId,
+	getCurrentUserDisplayName,
+	getCurrentUser,
 } from 'calypso/state/current-user/selectors';
 import {
 	getShouldShowCollapsedGlobalSidebar,
@@ -156,6 +158,10 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) {
 	const isJetpack = useSelector( ( state ) =>
 		isJetpackSite( state, selectedSiteId, { treatAtomicAsJetpackSite: false } )
 	);
+	const displayName = useSelector( getCurrentUserDisplayName );
+	const userEmail = useSelector( getCurrentUserEmail );
+	const user = useSelector( getCurrentUser );
+	const avatarUrl = user?.avatar_URL;
 
 	if ( ! loadHelpCenter ) {
 		return null;
@@ -173,6 +179,9 @@ function HelpCenterLoader( { sectionName, loadHelpCenter, currentRoute } ) {
 			sectionName={ sectionName }
 			currentUserId={ currentUserId }
 			currentUserEmail={ currentUserEmail }
+			avatarUrl={ avatarUrl }
+			displayName={ displayName }
+			userEmail={ userEmail }
 			selectedSiteId={ selectedSiteId }
 			userPurchases={ userPurchases }
 			hasPurchases={ hasPurchases }

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

@@ -7,7 +7,7 @@ import OdieAssistantProvider, { useSetOdieStorage } from '@automattic/odie-clien
 import { CardBody, Disabled } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 /**
  * Internal Dependencies
@@ -46,9 +46,9 @@ const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string
 	const location = useLocation();
 	const navigate = useNavigate();
 	const containerRef = useRef< HTMLDivElement >( null );
-	//const {}
 
-	const { sectionName, selectedSiteId } = useHelpCenterContext();
+	const { sectionName, selectedSiteId, currentUserId, userEmail, avatarUrl, displayName } =
+		useHelpCenterContext();
 	const shouldUseWapuu = useShouldUseWapuu();
 	const { isMinimized } = useSelect( ( select ) => {
 		const store = select( HELP_CENTER_STORE ) as HelpCenterSelect;
@@ -57,6 +57,16 @@ const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string
 		};
 	}, [] );
 
+	const currentUser = useMemo(
+		() => ( {
+			id: currentUserId,
+			display_name: displayName,
+			email: userEmail,
+			avatar_URL: avatarUrl,
+		} ),
+		[ currentUserId, userEmail, avatarUrl, displayName ]
+	);
+
 	useEffect( () => {
 		recordTracksEvent( 'calypso_helpcenter_page_open', {
 			pathname: location.pathname,
@@ -121,6 +131,7 @@ const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string
 								botNameSlug="wpcom-support-chat"
 								botName="Wapuu"
 								enabled={ shouldUseWapuu }
+								currentUser={ currentUser }
 								isMinimized={ isMinimized }
 								initialUserMessage={ searchTerm }
 								logger={ trackEvent }

packages/help-center/src/components/index.d.ts

@@ -68,16 +68,6 @@ declare module 'calypso/state/sites/hooks' {
 	export const useSiteOption: ( state: unknown ) => string;
 }
 
-declare module 'calypso/state/selectors/get-primary-site-id' {
-	const getPrimarySiteId: ( state: unknown ) => number;
-	export default getPrimarySiteId;
-}
-
-declare module 'calypso/state/selectors/has-cancelable-user-purchases' {
-	const hasCancelableUserPurchases: ( state: unknown ) => boolean;
-	export default hasCancelableUserPurchases;
-}
-
 declare module 'calypso/state/current-user/selectors' {
 	export const getCurrentUserId: ( state: unknown ) => string;
 }

packages/help-center/src/contexts/HelpCenterContext.tsx

@@ -9,8 +9,11 @@ export type HelpCenterRequiredInformation = {
 	hasPurchases: boolean;
 	primarySiteId: number;
 	getGoogleMailServiceFamily: string;
+	avatarUrl: string | undefined;
+	userEmail: string;
 	isBusinessOrEcomPlanUser?: boolean;
 	onboardingUrl: string;
+	displayName: string;
 	isJetpackSite: boolean;
 	adminUrl: string;
 };
@@ -22,6 +25,9 @@ const HelpCenterRequiredContext = React.createContext< HelpCenterRequiredInforma
 	selectedSiteId: 0,
 	hasPurchases: false,
 	primarySiteId: 0,
+	userEmail: '',
+	displayName: '',
+	avatarUrl: undefined,
 	isBusinessOrEcomPlanUser: false,
 	getGoogleMailServiceFamily: '',
 	onboardingUrl: '',

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

@@ -1,15 +1,13 @@
 /* eslint-disable no-restricted-imports */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+import { Gravatar } from '@automattic/components';
 import { ExternalLink } from '@wordpress/components';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import Markdown from 'react-markdown';
-import { useSelector } from 'react-redux';
-import Gravatar from 'calypso/components/gravatar';
-import { getCurrentUser } from 'calypso/state/current-user/selectors';
 import MaximizeIcon from '../../assets/maximize-icon.svg';
 import MinimizeIcon from '../../assets/minimize-icon.svg';
 import WapuuAvatar from '../../assets/wapuu-squared-avatar.svg';
@@ -21,26 +19,24 @@ import FoldableCard from '../foldable';
 import CustomALink from './custom-a-link';
 import { uriTransformer } from './uri-transformer';
 import WasThisHelpfulButtons from './was-this-helpful-buttons';
-import type { Message, Source } from '../../types';
+import type { CurrentUser, Message, Source } from '../../types';
 
 import './style.scss';
 
 export type ChatMessageProps = {
 	message: Message;
 	scrollToBottom: () => void;
+	currentUser: CurrentUser;
 };
 
 const ChatMessage = (
-	{ message, scrollToBottom }: ChatMessageProps,
+	{ message, scrollToBottom, currentUser }: ChatMessageProps,
 	ref: React.Ref< HTMLDivElement >
 ) => {
 	const isUser = message.role === 'user';
 	const { botName, extraContactOptions, addMessage, trackEvent } = useOdieAssistantContext();
 	const [ scrolledToBottom, setScrolledToBottom ] = useState( false );
 	const [ isFullscreen, setIsFullscreen ] = useState( false );
-	const currentUser = useSelector( getCurrentUser ) ?? {
-		display_name: window?.odieUserData?.displayName ?? 'Me',
-	};
 	const translate = useTranslate();
 
 	const realTimeMessage = useTyper( message.content, ! isUser && message.type === 'message', {

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

@@ -7,7 +7,7 @@ import {
 } from '../data';
 import { getOdieInitialMessage } from './get-odie-initial-message';
 import { useLoadPreviousChat } from './use-load-previous-chat';
-import type { Chat, Context, Message, Nudge, OdieAllowedBots } from '../types';
+import type { Chat, Context, CurrentUser, Message, Nudge, OdieAllowedBots } from '../types';
 import type { ReactNode, FC, PropsWithChildren, SetStateAction } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -24,6 +24,7 @@ type OdieAssistantContextInterface = {
 	botNameSlug: OdieAllowedBots;
 	chat: Chat;
 	clearChat: () => void;
+	currentUser: CurrentUser;
 	initialUserMessage: string | null | undefined;
 	isLoadingChat: boolean;
 	isLoading: boolean;
@@ -61,6 +62,7 @@ const defaultContextInterfaceValues = {
 	isVisible: false,
 	lastNudge: null,
 	odieClientId: '',
+	currentUser: { display_name: 'Me' },
 	sendNudge: noop,
 	setChat: noop,
 	setIsLoadingChat: noop,
@@ -90,6 +92,7 @@ type OdieAssistantProviderProps = {
 	enabled?: boolean;
 	initialUserMessage?: string | null | undefined;
 	isMinimized?: boolean;
+	currentUser: CurrentUser;
 	extraContactOptions?: ReactNode;
 	logger?: ( message: string, properties: Record< string, unknown > ) => void;
 	loggerEventNamePrefix?: string;
@@ -109,6 +112,7 @@ const OdieAssistantProvider: FC< OdieAssistantProviderProps > = ( {
 	loggerEventNamePrefix,
 	selectedSiteId,
 	version = null,
+	currentUser,
 	children,
 } ) => {
 	const [ isVisible, setIsVisible ] = useState( false );
@@ -224,6 +228,7 @@ const OdieAssistantProvider: FC< OdieAssistantProviderProps > = ( {
 				botNameSlug,
 				chat,
 				clearChat,
+				currentUser,
 				extraContactOptions,
 				initialUserMessage,
 				isLoadingChat: false,

packages/odie-client/src/index.tsx

@@ -18,7 +18,7 @@ export const ODIE_THUMBS_UP_RATING_VALUE = 1;
 const ForwardedChatMessage = forwardRef< HTMLDivElement, ChatMessageProps >( ChatMessage );
 
 export const OdieAssistant: React.FC = () => {
-	const { chat, trackEvent } = useOdieAssistantContext();
+	const { chat, trackEvent, currentUser } = useOdieAssistantContext();
 	const chatboxMessagesRef = useRef< HTMLDivElement | null >( null );
 	const { ref: bottomRef, entry: lastMessageElement, inView } = useInView( { threshold: 0 } );
 	const [ stickToBottom, setStickToBottom ] = useState( true );
@@ -86,6 +86,7 @@ export const OdieAssistant: React.FC = () => {
 							<ForwardedChatMessage
 								message={ message }
 								key={ index }
+								currentUser={ currentUser }
 								scrollToBottom={ scrollToBottom }
 								ref={ chat.messages.length - 1 === index ? bottomRef : undefined }
 							/>

packages/odie-client/src/types/index.ts

@@ -6,6 +6,13 @@ export type Source = {
 	heading: string;
 };
 
+export type CurrentUser = {
+	display_name: string;
+	avatar_URL?: string;
+	email?: string;
+	id?: number;
+};
+
 type Feature =
 	| 'login'
 	| 'logout'