diff --git a/packages/odie-client/src/components/message/direct-escalation-link.tsx b/packages/odie-client/src/components/message/direct-escalation-link.tsx
index 0af70b4c9f36e..c69447899afdc 100644
--- a/packages/odie-client/src/components/message/direct-escalation-link.tsx
+++ b/packages/odie-client/src/components/message/direct-escalation-link.tsx
@@ -2,9 +2,12 @@ import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';
import { useOdieAssistantContext } from '../../context';
+import { useCreateZendeskConversation } from '../../query/use-create-zendesk-conversation';
export const DirectEscalationLink = ( { messageId }: { messageId: number | undefined } ) => {
- const { trackEvent, isUserEligibleForPaidSupport } = useOdieAssistantContext();
+ const newConversation = useCreateZendeskConversation();
+ const { shouldUseHelpCenterExperience, trackEvent, isUserEligibleForPaidSupport } =
+ useOdieAssistantContext();
const navigate = useNavigate();
const handleClick = useCallback( () => {
trackEvent( 'chat_message_direct_escalation_link_click', {
@@ -13,7 +16,11 @@ export const DirectEscalationLink = ( { messageId }: { messageId: number | undef
} );
if ( isUserEligibleForPaidSupport ) {
- navigate( '/contact-options' );
+ if ( shouldUseHelpCenterExperience ) {
+ newConversation();
+ } else {
+ navigate( '/contact-options' );
+ }
} else {
navigate( '/contact-form?mode=FORUM' );
}
diff --git a/packages/odie-client/src/components/message/user-message.tsx b/packages/odie-client/src/components/message/user-message.tsx
index ea923c2019c00..afb5f2ebeb0d1 100644
--- a/packages/odie-client/src/components/message/user-message.tsx
+++ b/packages/odie-client/src/components/message/user-message.tsx
@@ -22,6 +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 hasFeedback = !! message?.rating_value;
const isBot = message.role === 'bot';
const isPositiveFeedback =
@@ -46,23 +47,29 @@ export const UserMessage = ( {
>
{ isRequestingHumanSupport ? displayMessage : message.content }
- { showExtraContactOptions &&
- ( shouldUseHelpCenterExperience ?