From 6e85c69445c8fb9fd04ffe86cbe4ecfb990e9c89 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 15 Nov 2024 12:24:24 +0100 Subject: [PATCH 01/20] Open Zendesk with link --- .../help-center/src/hooks/use-action-hooks.ts | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/help-center/src/hooks/use-action-hooks.ts b/packages/help-center/src/hooks/use-action-hooks.ts index f9fe65bedc2c9a..066c68c55a115e 100644 --- a/packages/help-center/src/hooks/use-action-hooks.ts +++ b/packages/help-center/src/hooks/use-action-hooks.ts @@ -1,6 +1,10 @@ import { localizeUrl } from '@automattic/i18n-utils'; +import { useManageSupportInteraction } from '@automattic/odie-client/src/data/use-manage-support-interaction'; +import { useCreateZendeskConversation } from '@automattic/odie-client/src/hooks'; import { useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; +import { v4 as uuidv4 } from 'uuid'; +import { useResetSupportInteraction } from './use-reset-support-interaction'; /** * Add your conditions here to open the Help Center automatically when they're met. @@ -8,6 +12,9 @@ import { useEffect } from '@wordpress/element'; export const useActionHooks = () => { const { setShowHelpCenter, setShowSupportDoc, setNavigateToRoute } = useDispatch( 'automattic/help-center' ); + const resetSupportInteraction = useResetSupportInteraction(); + const { startNewInteraction } = useManageSupportInteraction(); + const newConversation = useCreateZendeskConversation( true ); const queryParams = new URLSearchParams( window.location.search ); const actionHooks = [ @@ -49,6 +56,24 @@ export const useActionHooks = () => { setShowHelpCenter( true ); }, }, + /** + * Open to Chat with Happiness Engineer. + */ + { + condition() { + return queryParams.get( 'help-center' ) === 'happiness-engineer'; + }, + async action() { + await resetSupportInteraction(); + await startNewInteraction( { + event_source: 'help-center', + event_external_id: uuidv4(), + } ); + setNavigateToRoute( '/odie' ); + await newConversation(); + setShowHelpCenter( true ); + }, + }, ]; useEffect( () => { From 859e69ee4bf77096d8de6ba6491ad32c3f2d8a22 Mon Sep 17 00:00:00 2001 From: Tony Arcangelini Date: Mon, 2 Dec 2024 13:40:19 +0100 Subject: [PATCH 02/20] Update chat thread --- .../components/help-center-feedback-form.tsx | 7 -- .../src/components/help-center-header.tsx | 7 -- .../help-center/src/hooks/use-action-hooks.ts | 12 +- .../hooks/use-reset-support-interaction.ts | 11 +- .../src/data/use-get-zendesk-conversation.ts | 12 +- .../hooks/use-create-zendesk-conversation.ts | 6 +- .../src/hooks/use-get-combined-chat.ts | 119 +++++++++++------- 7 files changed, 97 insertions(+), 77 deletions(-) diff --git a/packages/help-center/src/components/help-center-feedback-form.tsx b/packages/help-center/src/components/help-center-feedback-form.tsx index 99365bdc6edb5e..804578c7c91f50 100644 --- a/packages/help-center/src/components/help-center-feedback-form.tsx +++ b/packages/help-center/src/components/help-center-feedback-form.tsx @@ -2,12 +2,10 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; import { getPlan } from '@automattic/calypso-products'; import { HelpCenterSite } from '@automattic/data-stores'; import { GetSupport } from '@automattic/odie-client/src/components/message/get-support'; -import { useManageSupportInteraction } from '@automattic/odie-client/src/data'; import { useI18n } from '@wordpress/react-i18n'; import { addQueryArgs } from '@wordpress/url'; import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { v4 as uuidv4 } from 'uuid'; import { useHelpCenterContext } from '../contexts/HelpCenterContext'; import { useSupportStatus } from '../data/use-support-status'; import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction'; @@ -41,7 +39,6 @@ const HelpCenterFeedbackForm = ( { const plan = getPlan( productSlug ); const productId = plan?.getProductId(); const resetSupportInteraction = useResetSupportInteraction(); - const { startNewInteraction } = useManageSupportInteraction(); const handleFeedbackClick = ( value: number ) => { setStartedFeedback( true ); @@ -110,10 +107,6 @@ const HelpCenterFeedbackForm = ( { generateContactOnClickEvent( 'chat', 'calypso_helpcenter_feedback_contact_support' ); if ( isUserEligibleForPaidSupport ) { await resetSupportInteraction(); - startNewInteraction( { - event_source: 'help-center', - event_external_id: uuidv4(), - } ); navigate( '/odie' ); } }; diff --git a/packages/help-center/src/components/help-center-header.tsx b/packages/help-center/src/components/help-center-header.tsx index c787b7594cdfb8..8526697269a699 100644 --- a/packages/help-center/src/components/help-center-header.tsx +++ b/packages/help-center/src/components/help-center-header.tsx @@ -2,7 +2,6 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; import { Gridicon } from '@automattic/components'; import { EllipsisMenu } from '@automattic/odie-client'; -import { useManageSupportInteraction } from '@automattic/odie-client/src/data'; import { clearHelpCenterZendeskConversationStarted } from '@automattic/odie-client/src/utils/storage-utils'; import { CardHeader, Button, Flex } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; @@ -11,7 +10,6 @@ import { closeSmall, chevronUp, lineSolid, commentContent, page, Icon } from '@w import { useI18n } from '@wordpress/react-i18n'; import clsx from 'clsx'; import { Route, Routes, useLocation, useSearchParams } from 'react-router-dom'; -import { v4 as uuidv4 } from 'uuid'; import { useHelpCenterContext } from '../contexts/HelpCenterContext'; import { usePostByUrl } from '../hooks'; import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction'; @@ -69,14 +67,9 @@ const SupportModeTitle = () => { const ChatEllipsisMenu = () => { const { __ } = useI18n(); const resetSupportInteraction = useResetSupportInteraction(); - const { startNewInteraction } = useManageSupportInteraction(); const clearChat = async () => { await resetSupportInteraction(); - startNewInteraction( { - event_source: 'help-center', - event_external_id: uuidv4(), - } ); clearHelpCenterZendeskConversationStarted(); recordTracksEvent( 'calypso_inlinehelp_clear_conversation' ); }; diff --git a/packages/help-center/src/hooks/use-action-hooks.ts b/packages/help-center/src/hooks/use-action-hooks.ts index 066c68c55a115e..272a58d125f69a 100644 --- a/packages/help-center/src/hooks/use-action-hooks.ts +++ b/packages/help-center/src/hooks/use-action-hooks.ts @@ -1,9 +1,7 @@ import { localizeUrl } from '@automattic/i18n-utils'; -import { useManageSupportInteraction } from '@automattic/odie-client/src/data/use-manage-support-interaction'; import { useCreateZendeskConversation } from '@automattic/odie-client/src/hooks'; import { useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import { v4 as uuidv4 } from 'uuid'; import { useResetSupportInteraction } from './use-reset-support-interaction'; /** @@ -13,8 +11,7 @@ export const useActionHooks = () => { const { setShowHelpCenter, setShowSupportDoc, setNavigateToRoute } = useDispatch( 'automattic/help-center' ); const resetSupportInteraction = useResetSupportInteraction(); - const { startNewInteraction } = useManageSupportInteraction(); - const newConversation = useCreateZendeskConversation( true ); + const newConversation = useCreateZendeskConversation(); const queryParams = new URLSearchParams( window.location.search ); const actionHooks = [ @@ -33,6 +30,7 @@ export const useActionHooks = () => { ); }, }, + /** * Open Help Center. */ @@ -44,6 +42,7 @@ export const useActionHooks = () => { setShowHelpCenter( true ); }, }, + /** * Open to Wapuu chat. */ @@ -56,6 +55,7 @@ export const useActionHooks = () => { setShowHelpCenter( true ); }, }, + /** * Open to Chat with Happiness Engineer. */ @@ -65,10 +65,6 @@ export const useActionHooks = () => { }, async action() { await resetSupportInteraction(); - await startNewInteraction( { - event_source: 'help-center', - event_external_id: uuidv4(), - } ); setNavigateToRoute( '/odie' ); await newConversation(); setShowHelpCenter( true ); diff --git a/packages/help-center/src/hooks/use-reset-support-interaction.ts b/packages/help-center/src/hooks/use-reset-support-interaction.ts index a781e3f1f8e46d..391362aa812c11 100644 --- a/packages/help-center/src/hooks/use-reset-support-interaction.ts +++ b/packages/help-center/src/hooks/use-reset-support-interaction.ts @@ -2,7 +2,8 @@ import { HelpCenterSelect } from '@automattic/data-stores'; import { HELP_CENTER_STORE } from '@automattic/help-center/src/stores'; import { useManageSupportInteraction } from '@automattic/odie-client/src/data'; import { useQueryClient } from '@tanstack/react-query'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; +import { v4 as uuidv4 } from 'uuid'; export const useResetSupportInteraction = () => { const { currentSupportInteraction } = useSelect( ( select ) => { @@ -11,8 +12,7 @@ export const useResetSupportInteraction = () => { currentSupportInteraction: store.getCurrentSupportInteraction(), }; }, [] ); - const { setCurrentSupportInteraction } = useDispatch( HELP_CENTER_STORE ); - const { resolveInteraction } = useManageSupportInteraction(); + const { startNewInteraction, resolveInteraction } = useManageSupportInteraction(); const queryClient = useQueryClient(); const reset = async () => { @@ -21,7 +21,10 @@ export const useResetSupportInteraction = () => { await queryClient.invalidateQueries( { queryKey: [ 'support-interactions', 'get-interactions', 'help-center' ], } ); - setCurrentSupportInteraction( null ); + startNewInteraction( { + event_source: 'help-center', + event_external_id: uuidv4(), + } ); } }; diff --git a/packages/odie-client/src/data/use-get-zendesk-conversation.ts b/packages/odie-client/src/data/use-get-zendesk-conversation.ts index 42f2efa2f38173..b201d75ba287b1 100644 --- a/packages/odie-client/src/data/use-get-zendesk-conversation.ts +++ b/packages/odie-client/src/data/use-get-zendesk-conversation.ts @@ -22,19 +22,21 @@ export const getZendeskConversation = ( { chatId, conversationId, }: { - chatId: number | string | null | undefined; - conversationId?: string | null | undefined; + chatId?: number | string | null; + conversationId?: string; } ) => { - if ( ! chatId ) { + if ( ! chatId && ! conversationId ) { return null; } const conversation = Smooch.getConversations().find( ( conversation ) => { if ( conversationId ) { return conversation.id === conversationId; + } else if ( chatId ) { + return Number( conversation.metadata[ 'odieChatId' ] ) === Number( chatId ); } - return Number( conversation.metadata[ 'odieChatId' ] ) === Number( chatId ); + return false; } ); if ( ! conversation ) { @@ -42,7 +44,7 @@ export const getZendeskConversation = ( { } // We need to ensure that more than one message is loaded - return Smooch.getConversationById( conversation.id ) + return Smooch.getConversationById( conversation.id || conversationId ) .then( ( conversation ) => { Smooch.markAllAsRead( conversation.id ); return parseResponse( conversation ); diff --git a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts index d17a772764cc71..77a4d147cc179b 100644 --- a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts +++ b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts @@ -28,7 +28,7 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { const { addEventToInteraction } = useManageSupportInteraction(); const chatId = chat.odieId; const createConversation = async () => { - if ( ! chatId || isSubmittingZendeskUserFields || chat.conversationId ) { + if ( isSubmittingZendeskUserFields || chat.conversationId ) { return; } @@ -44,15 +44,15 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { await submitUserFields( { messaging_initial_message: '', messaging_site_id: selectedSiteId || null, - messaging_ai_chat_id: chatId, + messaging_ai_chat_id: chatId || undefined, messaging_url: selectedSiteURL || null, } ); const conversation = await Smooch.createConversation( { metadata: { - odieChatId: chatId, createdAt: Date.now(), supportInteractionId: currentSupportInteraction!.uuid, + ...( chatId ? { odieChatId: chatId } : {} ), }, } ); setHelpCenterZendeskConversationStarted(); diff --git a/packages/odie-client/src/hooks/use-get-combined-chat.ts b/packages/odie-client/src/hooks/use-get-combined-chat.ts index d88b4d9294beca..df80dc3d32fc2a 100644 --- a/packages/odie-client/src/hooks/use-get-combined-chat.ts +++ b/packages/odie-client/src/hooks/use-get-combined-chat.ts @@ -5,7 +5,7 @@ import { useState, useEffect } from '@wordpress/element'; import { getOdieTransferMessageConstant } from '../constants'; import { emptyChat } from '../context'; import { getZendeskConversation, useOdieChat } from '../data'; -import type { Chat, Message } from '../types'; +import type { Chat, ChatStatus, Message } from '../types'; /** * This combines the ODIE chat with the ZENDESK conversation. @@ -15,45 +15,83 @@ export const useGetCombinedChat = ( canConnectToZendesk: boolean, shouldUseHelpCenterExperience: boolean | undefined ) => { - const { currentSupportInteraction, isChatLoaded } = useSelect( ( select ) => { - const store = select( HELP_CENTER_STORE ) as HelpCenterSelect; - return { - currentSupportInteraction: store.getCurrentSupportInteraction(), - isChatLoaded: store.getIsChatLoaded(), - }; - }, [] ); + const { currentSupportInteraction, conversationId, odieId, isChatLoaded } = useSelect( + ( select ) => { + const store = select( HELP_CENTER_STORE ) as HelpCenterSelect; + const currentSupportInteraction = store.getCurrentSupportInteraction(); - const [ mainChatState, setMainChatState ] = useState< Chat >( emptyChat ); + // Get the current odie chat ID + const odieId = + currentSupportInteraction?.events.find( ( event ) => event.event_source === 'odie' ) + ?.event_external_id ?? null; - // Get the current odie chat - const odieId = - currentSupportInteraction?.events.find( ( event ) => event.event_source === 'odie' ) - ?.event_external_id ?? null; + // Get the current Zendesk conversation ID + const conversationId = + currentSupportInteraction?.events.find( ( event ) => event.event_source === 'zendesk' ) + ?.event_external_id ?? null; - // Get the current Zendesk conversation ID - const conversationId = - currentSupportInteraction?.events.find( ( event ) => event.event_source === 'zendesk' ) - ?.event_external_id ?? null; + return { + currentSupportInteraction, + conversationId, + odieId, + isChatLoaded: store.getIsChatLoaded(), + }; + }, + [] + ); + const [ mainChatState, setMainChatState ] = useState< Chat >( emptyChat ); const { data: odieChat, isLoading: isOdieChatLoading } = useOdieChat( Number( odieId ) ); useEffect( () => { - if ( odieId && ( ! conversationId || ! shouldUseHelpCenterExperience ) ) { - if ( odieChat ) { - setMainChatState( { - ...odieChat, - provider: 'odie', - conversationId: null, - supportInteractionId: currentSupportInteraction!.uuid, - status: 'loaded', + if ( ! odieId && ! conversationId ) { + return; + } + + /** + * Odie only chat + */ + if ( + ! isOdieChatLoading && + odieChat && + ( ! shouldUseHelpCenterExperience || ! conversationId ) + ) { + setMainChatState( { + ...odieChat, + provider: 'odie', + conversationId: null, + supportInteractionId: currentSupportInteraction!.uuid, + status: 'loaded', + } ); + } + + if ( conversationId && canConnectToZendesk && isChatLoaded ) { + /** + * Zendesk only chat + */ + if ( ! odieId ) { + getZendeskConversation( { conversationId } )?.then( ( conversation ) => { + if ( conversation ) { + setMainChatState( { + odieId: null, + wpcomUserId: null, + supportInteractionId: currentSupportInteraction!.uuid, + conversationId: conversation.id, + messages: conversation.messages, + provider: 'zendesk', + status: ( currentSupportInteraction?.status === 'closed' + ? 'closed' + : 'loaded' ) as ChatStatus, + } ); + } } ); } - } else if ( odieId && conversationId && shouldUseHelpCenterExperience && canConnectToZendesk ) { - if ( odieChat && isChatLoaded ) { - getZendeskConversation( { - chatId: odieChat.odieId, - conversationId: conversationId.toString(), - } )?.then( ( conversation ) => { + + /** + * Unified chat + */ + if ( ! isOdieChatLoading && odieChat ) { + getZendeskConversation( { conversationId } )?.then( ( conversation ) => { if ( conversation ) { setMainChatState( { ...odieChat, @@ -65,28 +103,23 @@ export const useGetCombinedChat = ( ...( conversation.messages as Message[] ), ], provider: 'zendesk', - status: currentSupportInteraction?.status === 'closed' ? 'closed' : 'loaded', + status: ( currentSupportInteraction?.status === 'closed' + ? 'closed' + : 'loaded' ) as ChatStatus, } ); } } ); } - } else if ( currentSupportInteraction ) { - setMainChatState( ( prevChat ) => ( { - ...( prevChat.supportInteractionId !== currentSupportInteraction!.uuid - ? emptyChat - : prevChat ), - supportInteractionId: currentSupportInteraction!.uuid, - status: 'loaded', - } ) ); } }, [ - isOdieChatLoading, + canConnectToZendesk, + shouldUseHelpCenterExperience, isChatLoaded, + isOdieChatLoading, + odieId, odieChat, conversationId, - odieId, currentSupportInteraction, - shouldUseHelpCenterExperience, ] ); return { mainChatState, setMainChatState }; From 12e45fd51a37507feabba755fc440d23c78a92b0 Mon Sep 17 00:00:00 2001 From: Tony Arcangelini Date: Mon, 2 Dec 2024 16:54:20 +0100 Subject: [PATCH 03/20] Sort of works... small bug causing refresh --- .../help-center/src/hooks/use-action-hooks.ts | 10 +--- .../hooks/use-reset-support-interaction.ts | 8 +-- .../components/message/messages-container.tsx | 54 +++++++++++++++---- .../src/hooks/use-get-combined-chat.ts | 10 +++- .../src/utils/zendesk-message-converter.ts | 2 +- 5 files changed, 58 insertions(+), 26 deletions(-) diff --git a/packages/help-center/src/hooks/use-action-hooks.ts b/packages/help-center/src/hooks/use-action-hooks.ts index 272a58d125f69a..1e252bfce90095 100644 --- a/packages/help-center/src/hooks/use-action-hooks.ts +++ b/packages/help-center/src/hooks/use-action-hooks.ts @@ -1,8 +1,6 @@ import { localizeUrl } from '@automattic/i18n-utils'; -import { useCreateZendeskConversation } from '@automattic/odie-client/src/hooks'; import { useDispatch } from '@wordpress/data'; import { useEffect } from '@wordpress/element'; -import { useResetSupportInteraction } from './use-reset-support-interaction'; /** * Add your conditions here to open the Help Center automatically when they're met. @@ -10,8 +8,6 @@ import { useResetSupportInteraction } from './use-reset-support-interaction'; export const useActionHooks = () => { const { setShowHelpCenter, setShowSupportDoc, setNavigateToRoute } = useDispatch( 'automattic/help-center' ); - const resetSupportInteraction = useResetSupportInteraction(); - const newConversation = useCreateZendeskConversation(); const queryParams = new URLSearchParams( window.location.search ); const actionHooks = [ @@ -63,10 +59,8 @@ export const useActionHooks = () => { condition() { return queryParams.get( 'help-center' ) === 'happiness-engineer'; }, - async action() { - await resetSupportInteraction(); - setNavigateToRoute( '/odie' ); - await newConversation(); + action() { + setNavigateToRoute( '/odie?provider=zendesk' ); setShowHelpCenter( true ); }, }, diff --git a/packages/help-center/src/hooks/use-reset-support-interaction.ts b/packages/help-center/src/hooks/use-reset-support-interaction.ts index 391362aa812c11..49a506e460fd6d 100644 --- a/packages/help-center/src/hooks/use-reset-support-interaction.ts +++ b/packages/help-center/src/hooks/use-reset-support-interaction.ts @@ -15,18 +15,18 @@ export const useResetSupportInteraction = () => { const { startNewInteraction, resolveInteraction } = useManageSupportInteraction(); const queryClient = useQueryClient(); - const reset = async () => { + return async () => { if ( currentSupportInteraction ) { resolveInteraction( { interactionId: currentSupportInteraction.uuid } ); + await queryClient.invalidateQueries( { queryKey: [ 'support-interactions', 'get-interactions', 'help-center' ], } ); - startNewInteraction( { + + await startNewInteraction( { event_source: 'help-center', event_external_id: uuidv4(), } ); } }; - - return reset; }; diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx index db97142a193e93..4ff93eea39a469 100644 --- a/packages/odie-client/src/components/message/messages-container.tsx +++ b/packages/odie-client/src/components/message/messages-container.tsx @@ -1,9 +1,15 @@ +import { useResetSupportInteraction } from '@automattic/help-center/src/hooks/use-reset-support-interaction'; import { getShortDateString } from '@automattic/i18n-utils'; import { Spinner } from '@wordpress/components'; import { useEffect, useRef, useState } from 'react'; +import { useSearchParams } from 'react-router-dom'; import { ThumbsDown } from '../../assets/thumbs-down'; import { useOdieAssistantContext } from '../../context'; -import { useAutoScroll, useZendeskMessageListener } from '../../hooks'; +import { + useAutoScroll, + useCreateZendeskConversation, + useZendeskMessageListener, +} from '../../hooks'; import { getOdieInitialMessage } from '../../utils'; import { DislikeFeedbackMessage } from './dislike-feedback-message'; import { JumpToRecent } from './jump-to-recent'; @@ -18,6 +24,7 @@ const DislikeThumb = () => { ); }; + const LoadingChatSpinner = () => { return (
@@ -38,14 +45,37 @@ interface ChatMessagesProps { } export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { - const { chat, shouldUseHelpCenterExperience, botNameSlug } = useOdieAssistantContext(); + const { chat, shouldUseHelpCenterExperience, botNameSlug, isChatLoaded } = + useOdieAssistantContext(); + const createZendeskConversation = useCreateZendeskConversation(); + const resetSupportInteraction = useResetSupportInteraction(); + const [ searchParams ] = useSearchParams(); + const isForwardingToZendesk = + searchParams.get( 'provider' ) === 'zendesk' && chat.provider !== 'zendesk'; const [ chatMessagesLoaded, setChatLoaded ] = useState( false ); const messagesContainerRef = useRef< HTMLDivElement >( null ); useZendeskMessageListener(); useAutoScroll( messagesContainerRef ); + + useEffect( () => { + ( chat?.status === 'loaded' || chat?.status === 'closed' ) && + setChatLoaded( ! isForwardingToZendesk ); + }, [ chat, isForwardingToZendesk ] ); + + /** + * Handle the case where we are forwarding to Zendesk. + */ useEffect( () => { - ( chat?.status === 'loaded' || chat?.status === 'closed' ) && setChatLoaded( true ); - }, [ chat ] ); + if ( isForwardingToZendesk && ! chat.conversationId ) { + resetSupportInteraction().then( () => { + if ( isChatLoaded ) { + createZendeskConversation().then( () => { + setChatLoaded( true ); + } ); + } + } ); + } + }, [ isForwardingToZendesk, isChatLoaded ] ); const shouldLoadChat: boolean = ! shouldUseHelpCenterExperience || ( shouldUseHelpCenterExperience && chatMessagesLoaded ); @@ -63,13 +93,15 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { ) : ( <> - + { ( chat.odieId || chat.provider === 'odie' ) && ( + + ) } { chat.messages.map( ( message, index ) => ( { - if ( ! odieId && ! conversationId ) { - return; + if ( ! odieId && ! conversationId && currentSupportInteraction ) { + setMainChatState( ( prevChat ) => ( { + ...( prevChat.supportInteractionId !== currentSupportInteraction!.uuid + ? emptyChat + : prevChat ), + supportInteractionId: currentSupportInteraction!.uuid, + status: 'loaded', + } ) ); } /** diff --git a/packages/odie-client/src/utils/zendesk-message-converter.ts b/packages/odie-client/src/utils/zendesk-message-converter.ts index 7f1b9905e7f6cf..ac2e72109adc83 100644 --- a/packages/odie-client/src/utils/zendesk-message-converter.ts +++ b/packages/odie-client/src/utils/zendesk-message-converter.ts @@ -59,7 +59,7 @@ export const zendeskMessageConverter: ( message: ZendeskMessage ) => Message = ( let type = message.type as MessageType; let feedbackUrl; - if ( message.source.type === 'zd:surveys' && message?.actions?.length ) { + if ( message?.source?.type === 'zd:surveys' && message?.actions?.length ) { type = 'conversation-feedback'; feedbackUrl = message?.actions[ 0 ].uri; } From e594703115c274befc3ed8ff801b4766d9bf7935 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Wed, 15 Jan 2025 14:49:15 +0100 Subject: [PATCH 04/20] add missing isChatLoaded --- .../odie-client/src/components/message/messages-container.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx index 5eca03b5d5f51d..554750f0f3089c 100644 --- a/packages/odie-client/src/components/message/messages-container.tsx +++ b/packages/odie-client/src/components/message/messages-container.tsx @@ -1,3 +1,4 @@ +import { useResetSupportInteraction } from '@automattic/help-center/src/hooks/use-reset-support-interaction'; import { getShortDateString } from '@automattic/i18n-utils'; import { Spinner } from '@wordpress/components'; import { useEffect, useRef, useState } from 'react'; @@ -44,7 +45,7 @@ interface ChatMessagesProps { } export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { - const { chat, botNameSlug } = useOdieAssistantContext(); + const { chat, botNameSlug, isChatLoaded } = useOdieAssistantContext(); const createZendeskConversation = useCreateZendeskConversation(); const resetSupportInteraction = useResetSupportInteraction(); const [ searchParams ] = useSearchParams(); From 729f0fc9b89c1502ea7dc2c2f58875714692acad Mon Sep 17 00:00:00 2001 From: heavyweight Date: Wed, 15 Jan 2025 15:18:52 +0100 Subject: [PATCH 05/20] minor fixes --- .../odie-client/src/data/use-get-zendesk-conversation.ts | 5 +++-- packages/odie-client/src/hooks/use-get-combined-chat.ts | 2 -- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/odie-client/src/data/use-get-zendesk-conversation.ts b/packages/odie-client/src/data/use-get-zendesk-conversation.ts index 4db82e3dfbf54f..3e9ca681876216 100644 --- a/packages/odie-client/src/data/use-get-zendesk-conversation.ts +++ b/packages/odie-client/src/data/use-get-zendesk-conversation.ts @@ -1,3 +1,4 @@ +import { useCallback } from 'react'; import Smooch from 'smooch'; import { zendeskMessageConverter } from '../utils'; import { useGetUnreadConversations } from './use-get-unread-conversations'; @@ -27,7 +28,7 @@ export const useGetZendeskConversation = () => { chatId, conversationId, }: { - chatId: number | string | null | undefined; + chatId?: number | string | null | undefined; conversationId?: string | null | undefined; } ) => { if ( ! chatId && ! conversationId ) { @@ -49,7 +50,7 @@ export const useGetZendeskConversation = () => { } // We need to ensure that more than one message is loaded - return Smooch.getConversationById( conversation.id || conversationId ) + return Smooch.getConversationById( conversation.id || conversationId! ) .then( ( conversation ) => { Smooch.markAllAsRead( conversation.id ); getUnreadNotifications(); diff --git a/packages/odie-client/src/hooks/use-get-combined-chat.ts b/packages/odie-client/src/hooks/use-get-combined-chat.ts index c5aca25d477ab3..9e7071088797c6 100644 --- a/packages/odie-client/src/hooks/use-get-combined-chat.ts +++ b/packages/odie-client/src/hooks/use-get-combined-chat.ts @@ -5,8 +5,6 @@ import { useState, useEffect } from '@wordpress/element'; import { ODIE_TRANSFER_MESSAGE } from '../constants'; import { emptyChat } from '../context'; import { useGetZendeskConversation, useOdieChat } from '../data'; -import type { Chat, Message } from '../types'; -import { getZendeskConversation, useOdieChat } from '../data'; import type { Chat, ChatStatus, Message } from '../types'; /** From eb97113980b70ef3a514eb4221172d773966b8b9 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Wed, 15 Jan 2025 15:32:30 +0100 Subject: [PATCH 06/20] minimize hook changes --- .../src/hooks/use-get-combined-chat.ts | 105 ++++++------------ packages/odie-client/src/types.ts | 7 +- 2 files changed, 39 insertions(+), 73 deletions(-) diff --git a/packages/odie-client/src/hooks/use-get-combined-chat.ts b/packages/odie-client/src/hooks/use-get-combined-chat.ts index 9e7071088797c6..3d129e9d98c02f 100644 --- a/packages/odie-client/src/hooks/use-get-combined-chat.ts +++ b/packages/odie-client/src/hooks/use-get-combined-chat.ts @@ -5,57 +5,37 @@ import { useState, useEffect } from '@wordpress/element'; import { ODIE_TRANSFER_MESSAGE } from '../constants'; import { emptyChat } from '../context'; import { useGetZendeskConversation, useOdieChat } from '../data'; -import type { Chat, ChatStatus, Message } from '../types'; +import type { Chat, Message } from '../types'; /** * This combines the ODIE chat with the ZENDESK conversation. * @returns The combined chat. */ export const useGetCombinedChat = ( canConnectToZendesk: boolean ) => { - const { currentSupportInteraction, conversationId, odieId, isChatLoaded } = useSelect( - ( select ) => { - const store = select( HELP_CENTER_STORE ) as HelpCenterSelect; - const currentSupportInteraction = store.getCurrentSupportInteraction(); - - // Get the current odie chat ID - const odieId = - currentSupportInteraction?.events.find( ( event ) => event.event_source === 'odie' ) - ?.event_external_id ?? null; - - // Get the current Zendesk conversation ID - const conversationId = - currentSupportInteraction?.events.find( ( event ) => event.event_source === 'zendesk' ) - ?.event_external_id ?? null; - - return { - currentSupportInteraction, - conversationId, - odieId, - isChatLoaded: store.getIsChatLoaded(), - }; - }, - [] - ); + const { currentSupportInteraction, isChatLoaded } = useSelect( ( select ) => { + const store = select( HELP_CENTER_STORE ) as HelpCenterSelect; + return { + currentSupportInteraction: store.getCurrentSupportInteraction(), + isChatLoaded: store.getIsChatLoaded(), + }; + }, [] ); const [ mainChatState, setMainChatState ] = useState< Chat >( emptyChat ); const getZendeskConversation = useGetZendeskConversation(); + // Get the current odie chat + const odieId = + currentSupportInteraction?.events.find( ( event ) => event.event_source === 'odie' ) + ?.event_external_id ?? null; + + // Get the current Zendesk conversation ID + const conversationId = + currentSupportInteraction?.events.find( ( event ) => event.event_source === 'zendesk' ) + ?.event_external_id ?? null; + const { data: odieChat, isLoading: isOdieChatLoading } = useOdieChat( Number( odieId ) ); useEffect( () => { - if ( ! odieId && ! conversationId && currentSupportInteraction ) { - setMainChatState( ( prevChat ) => ( { - ...( prevChat.supportInteractionId !== currentSupportInteraction!.uuid - ? emptyChat - : prevChat ), - supportInteractionId: currentSupportInteraction!.uuid, - status: 'loaded', - } ) ); - } - - /** - * Odie only chat - */ - if ( ! isOdieChatLoading && odieChat && ! conversationId ) { + if ( odieId && odieChat && ! conversationId ) { setMainChatState( { ...odieChat, provider: 'odie', @@ -63,42 +43,19 @@ export const useGetCombinedChat = ( canConnectToZendesk: boolean ) => { supportInteractionId: currentSupportInteraction!.uuid, status: 'loaded', } ); - } - - if ( conversationId && canConnectToZendesk && isChatLoaded ) { - /** - * Zendesk only chat - */ - if ( ! odieId ) { - getZendeskConversation( { conversationId } )?.then( ( conversation ) => { + } else if ( conversationId && canConnectToZendesk ) { + if ( isChatLoaded ) { + getZendeskConversation( { + chatId: odieChat?.odieId, + conversationId: conversationId.toString(), + } )?.then( ( conversation ) => { if ( conversation ) { setMainChatState( { - odieId: null, - wpcomUserId: null, - supportInteractionId: currentSupportInteraction!.uuid, - conversationId: conversation.id, - messages: conversation.messages, - provider: 'zendesk', - status: ( currentSupportInteraction?.status === 'closed' - ? 'closed' - : 'loaded' ) as ChatStatus, - } ); - } - } ); - } - - /** - * Unified chat - */ - if ( ! isOdieChatLoading && odieChat ) { - getZendeskConversation( { conversationId } )?.then( ( conversation ) => { - if ( conversation ) { - setMainChatState( { - ...odieChat, + ...( odieChat ? odieChat : {} ), supportInteractionId: currentSupportInteraction!.uuid, conversationId: conversation.id, messages: [ - ...odieChat.messages, + ...( odieChat ? odieChat.messages : [] ), ...ODIE_TRANSFER_MESSAGE, ...( conversation.messages as Message[] ), ], @@ -108,6 +65,14 @@ export const useGetCombinedChat = ( canConnectToZendesk: boolean ) => { } } ); } + } else if ( currentSupportInteraction ) { + setMainChatState( ( prevChat ) => ( { + ...( prevChat.supportInteractionId !== currentSupportInteraction!.uuid + ? emptyChat + : prevChat ), + supportInteractionId: currentSupportInteraction!.uuid, + status: 'loaded', + } ) ); } }, [ isOdieChatLoading, diff --git a/packages/odie-client/src/types.ts b/packages/odie-client/src/types.ts index 4182881981a0bc..d0bda8e9bb55be 100644 --- a/packages/odie-client/src/types.ts +++ b/packages/odie-client/src/types.ts @@ -16,6 +16,7 @@ export type OdieAssistantContextInterface = { odieBroadcastClientId: string; selectedSiteId?: number | null; selectedSiteURL?: string | null; + initialMessage?: string | null; selectedConversationId?: string | null; waitAnswerToFirstMessageFromHumanSupport: boolean; setMessageLikedStatus: ( message: Message, liked: boolean ) => void; @@ -38,7 +39,7 @@ export type OdieAssistantProviderProps = { extraContactOptions?: ReactNode; selectedSiteId?: number | null; selectedSiteURL?: string | null; - selectedConversationId?: string | null; + initialMessage?: string | null; version?: string | null; children?: ReactNode; setChatStatus?: ( status: ChatStatus ) => void; @@ -160,8 +161,8 @@ export type ReturnedChat = { chat_id: number; messages: Message[]; wpcom_user_id export type OdieChat = { messages: Message[]; - odieId: number | null; - wpcomUserId: number | null; + odieId?: number | null | undefined; + wpcomUserId?: number | null | undefined; }; export type Chat = OdieChat & { From 585c0db864af26bbc2923152a4c9948003b2cdf9 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Wed, 15 Jan 2025 15:35:17 +0100 Subject: [PATCH 07/20] remove unused selectedConversationId --- packages/help-center/src/components/help-center-chat.tsx | 4 +--- packages/odie-client/src/types.ts | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/help-center/src/components/help-center-chat.tsx b/packages/help-center/src/components/help-center-chat.tsx index 419d4201022b71..eaa8e380ec04cd 100644 --- a/packages/help-center/src/components/help-center-chat.tsx +++ b/packages/help-center/src/components/help-center-chat.tsx @@ -5,7 +5,7 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; import OdieAssistantProvider, { OdieAssistant } from '@automattic/odie-client'; import { useEffect } from '@wordpress/element'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { useHelpCenterContext } from '../contexts/HelpCenterContext'; import { useShouldUseWapuu } from '../hooks'; import { ExtraContactOptions } from './help-center-extra-contact-option'; @@ -24,7 +24,6 @@ export function HelpCenterChat( { const shouldUseWapuu = useShouldUseWapuu(); const preventOdieAccess = ! shouldUseWapuu && ! isUserEligibleForPaidSupport; const { currentUser, site, canConnectToZendesk } = useHelpCenterContext(); - const { id: conversationId = null } = useParams(); useEffect( () => { if ( preventOdieAccess ) { @@ -42,7 +41,6 @@ export function HelpCenterChat( { canConnectToZendesk={ canConnectToZendesk } selectedSiteId={ site?.ID as number } selectedSiteURL={ site?.URL as string } - selectedConversationId={ conversationId } isUserEligibleForPaidSupport={ isUserEligibleForPaidSupport } extraContactOptions={ diff --git a/packages/odie-client/src/types.ts b/packages/odie-client/src/types.ts index d0bda8e9bb55be..7167d4afb94d2d 100644 --- a/packages/odie-client/src/types.ts +++ b/packages/odie-client/src/types.ts @@ -17,7 +17,6 @@ export type OdieAssistantContextInterface = { selectedSiteId?: number | null; selectedSiteURL?: string | null; initialMessage?: string | null; - selectedConversationId?: string | null; waitAnswerToFirstMessageFromHumanSupport: boolean; setMessageLikedStatus: ( message: Message, liked: boolean ) => void; setChat: ( chat: Chat | SetStateAction< Chat > ) => void; From fb1bc0b3526834d2f664840d8d764e2f91607a43 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Wed, 15 Jan 2025 16:29:12 +0100 Subject: [PATCH 08/20] Wire initial message and correct site and siteId --- .../help-center/src/components/help-center-chat.tsx | 12 +++++++++--- packages/odie-client/src/context/index.tsx | 2 ++ .../src/hooks/use-create-zendesk-conversation.ts | 3 ++- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/help-center/src/components/help-center-chat.tsx b/packages/help-center/src/components/help-center-chat.tsx index eaa8e380ec04cd..ccb0d97466eb6a 100644 --- a/packages/help-center/src/components/help-center-chat.tsx +++ b/packages/help-center/src/components/help-center-chat.tsx @@ -5,7 +5,7 @@ import { recordTracksEvent } from '@automattic/calypso-analytics'; import OdieAssistantProvider, { OdieAssistant } from '@automattic/odie-client'; import { useEffect } from '@wordpress/element'; -import { useNavigate } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { useHelpCenterContext } from '../contexts/HelpCenterContext'; import { useShouldUseWapuu } from '../hooks'; import { ExtraContactOptions } from './help-center-extra-contact-option'; @@ -24,6 +24,11 @@ export function HelpCenterChat( { const shouldUseWapuu = useShouldUseWapuu(); const preventOdieAccess = ! shouldUseWapuu && ! isUserEligibleForPaidSupport; const { currentUser, site, canConnectToZendesk } = useHelpCenterContext(); + const { search } = useLocation(); + const params = new URLSearchParams( search ); + const initialMessage = params.get( 'initialMessage' ); + const siteUrl = params.get( 'siteUrl' ); + const siteId = params.get( 'siteId' ); useEffect( () => { if ( preventOdieAccess ) { @@ -39,8 +44,9 @@ export function HelpCenterChat( { diff --git a/packages/odie-client/src/context/index.tsx b/packages/odie-client/src/context/index.tsx index 5c740340d51dde..c91642b4952209 100644 --- a/packages/odie-client/src/context/index.tsx +++ b/packages/odie-client/src/context/index.tsx @@ -65,6 +65,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( { extraContactOptions, selectedSiteId, selectedSiteURL, + initialMessage, version = null, currentUser, children, @@ -180,6 +181,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( { odieBroadcastClientId, selectedSiteId, selectedSiteURL, + initialMessage, setChatStatus, setMessageLikedStatus, setWaitAnswerToFirstMessageFromHumanSupport, diff --git a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts index fa790004435c41..fdcc0882b0e5a3 100644 --- a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts +++ b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts @@ -12,6 +12,7 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { const { selectedSiteId, selectedSiteURL, + initialMessage, setChat, setWaitAnswerToFirstMessageFromHumanSupport, chat, @@ -38,7 +39,7 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { } ) ); await submitUserFields( { - messaging_initial_message: '', + messaging_initial_message: initialMessage || undefined, messaging_site_id: selectedSiteId || null, messaging_ai_chat_id: chatId || undefined, messaging_url: selectedSiteURL || null, From e8f7aae51fd360fcdfc179a433f88c492ca90a39 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Thu, 16 Jan 2025 16:36:34 +0100 Subject: [PATCH 09/20] Don't display transfer message for direct zd chat --- packages/odie-client/src/hooks/use-get-combined-chat.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/odie-client/src/hooks/use-get-combined-chat.ts b/packages/odie-client/src/hooks/use-get-combined-chat.ts index 3d129e9d98c02f..e0b84b9599b14f 100644 --- a/packages/odie-client/src/hooks/use-get-combined-chat.ts +++ b/packages/odie-client/src/hooks/use-get-combined-chat.ts @@ -56,7 +56,7 @@ export const useGetCombinedChat = ( canConnectToZendesk: boolean ) => { conversationId: conversation.id, messages: [ ...( odieChat ? odieChat.messages : [] ), - ...ODIE_TRANSFER_MESSAGE, + ...( odieChat ? ODIE_TRANSFER_MESSAGE : [] ), ...( conversation.messages as Message[] ), ], provider: 'zendesk', From 6f3daa1bf3fc27255cfd4de2134d70ac38c86db7 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Thu, 16 Jan 2025 16:42:29 +0100 Subject: [PATCH 10/20] Wire direct zd chat for cancellations --- client/components/chat-button/index.tsx | 30 ++++++++++++------- .../cancel-purchase/support-link.jsx | 13 +++----- 2 files changed, 23 insertions(+), 20 deletions(-) diff --git a/client/components/chat-button/index.tsx b/client/components/chat-button/index.tsx index 97d6faafb24dae..7f219111dd81dd 100644 --- a/client/components/chat-button/index.tsx +++ b/client/components/chat-button/index.tsx @@ -118,17 +118,25 @@ const ChatButton: FC< Props > = ( { const handleClick = () => { if ( canConnectToZendesk ) { - openZendeskWidget( { - message: initialMessage, - siteUrl, - siteId, - onError, - onSuccess: () => { - onClick?.(); - resetStore(); - setShowHelpCenter( false ); - }, - } ); + if ( chatIntent === 'PRECANCELLATION' ) { + onClick?.(); + setShowHelpCenter( true ); + setNavigateToRoute( + `/odie?provider=zendesk&initialMessage=${ initialMessage }&siteUrl=${ siteUrl }&siteId=${ siteId }` + ); + } else { + openZendeskWidget( { + message: initialMessage, + siteUrl, + siteId, + onError, + onSuccess: () => { + onClick?.(); + resetStore(); + setShowHelpCenter( false ); + }, + } ); + } } else { setNavigateToRoute( '/contact-form?mode=CHAT' ); setShowHelpCenter( true ); diff --git a/client/me/purchases/cancel-purchase/support-link.jsx b/client/me/purchases/cancel-purchase/support-link.jsx index 69cfc8b9b65510..cb898cf7dfc8dc 100644 --- a/client/me/purchases/cancel-purchase/support-link.jsx +++ b/client/me/purchases/cancel-purchase/support-link.jsx @@ -33,15 +33,10 @@ const CancelPurchaseSupportLink = ( { purchase } ) => { const getHelp = useCallback( () => { if ( isMessagingAvailable && canConnectToZendeskMessaging ) { - openZendeskWidget( { - siteUrl: siteUrl, - siteId: siteId, - message: `${ status }: Purchase cancellation flow`, - onSuccess: () => { - resetStore(); - setShowHelpCenter( false ); - }, - } ); + setShowHelpCenter( true ); + setNavigateToRoute( + `/odie?provider=zendesk&initialMessage=Purchase cancellation flow&siteUrl=${ siteUrl }&siteId=${ siteId }` + ); } else { setNavigateToRoute( '/contact-options' ); setShowHelpCenter( true ); From 3a89434b9c1fe1e792e5adcb3d8222a4b8d1610d Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 17 Jan 2025 18:00:30 +0100 Subject: [PATCH 11/20] Change variable name and remove unused ones --- client/components/chat-button/index.tsx | 2 +- client/me/purchases/cancel-purchase/support-link.jsx | 9 +++------ packages/help-center/src/components/help-center-chat.tsx | 4 ++-- packages/odie-client/src/context/index.tsx | 4 ++-- .../src/hooks/use-create-zendesk-conversation.ts | 4 ++-- packages/odie-client/src/types.ts | 4 ++-- 6 files changed, 12 insertions(+), 15 deletions(-) diff --git a/client/components/chat-button/index.tsx b/client/components/chat-button/index.tsx index 7f219111dd81dd..44627106abc7ee 100644 --- a/client/components/chat-button/index.tsx +++ b/client/components/chat-button/index.tsx @@ -122,7 +122,7 @@ const ChatButton: FC< Props > = ( { onClick?.(); setShowHelpCenter( true ); setNavigateToRoute( - `/odie?provider=zendesk&initialMessage=${ initialMessage }&siteUrl=${ siteUrl }&siteId=${ siteId }` + `/odie?provider=zendesk&userFieldMessage=${ initialMessage }&siteUrl=${ siteUrl }&siteId=${ siteId }` ); } else { openZendeskWidget( { diff --git a/client/me/purchases/cancel-purchase/support-link.jsx b/client/me/purchases/cancel-purchase/support-link.jsx index cb898cf7dfc8dc..f2d0b55a1e9df8 100644 --- a/client/me/purchases/cancel-purchase/support-link.jsx +++ b/client/me/purchases/cancel-purchase/support-link.jsx @@ -17,15 +17,14 @@ const HELP_CENTER_STORE = HelpCenter.register(); const CancelPurchaseSupportLink = ( { purchase } ) => { const translate = useTranslate(); const { siteId, siteUrl } = purchase; - const { setShowHelpCenter, setNavigateToRoute, resetStore } = - useDataStoreDispatch( HELP_CENTER_STORE ); + const { setShowHelpCenter, setNavigateToRoute } = useDataStoreDispatch( HELP_CENTER_STORE ); const { isEligibleForChat } = useChatStatus(); const { data: canConnectToZendeskMessaging } = useCanConnectToZendeskMessaging(); const { data: isMessagingAvailable } = useZendeskMessagingAvailability( 'wpcom_messaging', isEligibleForChat ); - const { openZendeskWidget, isOpeningZendeskWidget } = useOpenZendeskMessaging( + const { isOpeningZendeskWidget } = useOpenZendeskMessaging( 'migration-error', 'zendesk_support_chat_key', isEligibleForChat @@ -35,15 +34,13 @@ const CancelPurchaseSupportLink = ( { purchase } ) => { if ( isMessagingAvailable && canConnectToZendeskMessaging ) { setShowHelpCenter( true ); setNavigateToRoute( - `/odie?provider=zendesk&initialMessage=Purchase cancellation flow&siteUrl=${ siteUrl }&siteId=${ siteId }` + `/odie?provider=zendesk&userFieldMessage=${ 'Purchase cancellation flow' }&siteUrl=${ siteUrl }&siteId=${ siteId }` ); } else { setNavigateToRoute( '/contact-options' ); setShowHelpCenter( true ); } }, [ - resetStore, - openZendeskWidget, siteId, isMessagingAvailable, siteUrl, diff --git a/packages/help-center/src/components/help-center-chat.tsx b/packages/help-center/src/components/help-center-chat.tsx index ccb0d97466eb6a..3840e6a5d66c44 100644 --- a/packages/help-center/src/components/help-center-chat.tsx +++ b/packages/help-center/src/components/help-center-chat.tsx @@ -26,7 +26,7 @@ export function HelpCenterChat( { const { currentUser, site, canConnectToZendesk } = useHelpCenterContext(); const { search } = useLocation(); const params = new URLSearchParams( search ); - const initialMessage = params.get( 'initialMessage' ); + const userFieldMessage = params.get( 'userFieldMessage' ); const siteUrl = params.get( 'siteUrl' ); const siteId = params.get( 'siteId' ); @@ -46,7 +46,7 @@ export function HelpCenterChat( { canConnectToZendesk={ canConnectToZendesk } selectedSiteId={ Number( siteId ) || ( site?.ID as number ) } selectedSiteURL={ siteUrl || ( site?.URL as string ) } - initialMessage={ initialMessage } + userFieldMessage={ userFieldMessage } isUserEligibleForPaidSupport={ isUserEligibleForPaidSupport } extraContactOptions={ diff --git a/packages/odie-client/src/context/index.tsx b/packages/odie-client/src/context/index.tsx index c91642b4952209..17112afaabcb3d 100644 --- a/packages/odie-client/src/context/index.tsx +++ b/packages/odie-client/src/context/index.tsx @@ -65,7 +65,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( { extraContactOptions, selectedSiteId, selectedSiteURL, - initialMessage, + userFieldMessage, version = null, currentUser, children, @@ -181,7 +181,7 @@ export const OdieAssistantProvider: React.FC< OdieAssistantProviderProps > = ( { odieBroadcastClientId, selectedSiteId, selectedSiteURL, - initialMessage, + userFieldMessage, setChatStatus, setMessageLikedStatus, setWaitAnswerToFirstMessageFromHumanSupport, diff --git a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts index fdcc0882b0e5a3..444abe6f720f8a 100644 --- a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts +++ b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts @@ -12,7 +12,7 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { const { selectedSiteId, selectedSiteURL, - initialMessage, + userFieldMessage, setChat, setWaitAnswerToFirstMessageFromHumanSupport, chat, @@ -39,7 +39,7 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { } ) ); await submitUserFields( { - messaging_initial_message: initialMessage || undefined, + messaging_initial_message: userFieldMessage || undefined, messaging_site_id: selectedSiteId || null, messaging_ai_chat_id: chatId || undefined, messaging_url: selectedSiteURL || null, diff --git a/packages/odie-client/src/types.ts b/packages/odie-client/src/types.ts index 7167d4afb94d2d..8827fabe92c37f 100644 --- a/packages/odie-client/src/types.ts +++ b/packages/odie-client/src/types.ts @@ -16,7 +16,7 @@ export type OdieAssistantContextInterface = { odieBroadcastClientId: string; selectedSiteId?: number | null; selectedSiteURL?: string | null; - initialMessage?: string | null; + userFieldMessage?: string | null; waitAnswerToFirstMessageFromHumanSupport: boolean; setMessageLikedStatus: ( message: Message, liked: boolean ) => void; setChat: ( chat: Chat | SetStateAction< Chat > ) => void; @@ -38,7 +38,7 @@ export type OdieAssistantProviderProps = { extraContactOptions?: ReactNode; selectedSiteId?: number | null; selectedSiteURL?: string | null; - initialMessage?: string | null; + userFieldMessage?: string | null; version?: string | null; children?: ReactNode; setChatStatus?: ( status: ChatStatus ) => void; From e0011b69402015d33d72d193b1b3683673a2d270 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 17 Jan 2025 18:59:55 +0100 Subject: [PATCH 12/20] Fix useEffect --- .../src/components/message/messages-container.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx index 554750f0f3089c..d363ef1e1cb95a 100644 --- a/packages/odie-client/src/components/message/messages-container.tsx +++ b/packages/odie-client/src/components/message/messages-container.tsx @@ -65,7 +65,12 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { * Handle the case where we are forwarding to Zendesk. */ useEffect( () => { - if ( isForwardingToZendesk && ! chat.conversationId ) { + if ( + isForwardingToZendesk && + ! chat.conversationId && + createZendeskConversation && + resetSupportInteraction + ) { resetSupportInteraction().then( () => { if ( isChatLoaded ) { createZendeskConversation().then( () => { @@ -74,7 +79,13 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { } } ); } - }, [ isForwardingToZendesk, isChatLoaded ] ); + }, [ + isForwardingToZendesk, + isChatLoaded, + createZendeskConversation, + resetSupportInteraction, + chat?.conversationId, + ] ); // Used to apply the correct styling on messages const isNextMessageFromSameSender = ( currentMessage: string, nextMessage: string ) => { From e6e8c2bd7df90592b1166f7dc0e59f14436a6561 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Fri, 17 Jan 2025 22:00:16 +0100 Subject: [PATCH 13/20] Change state variable name --- .../src/components/message/messages-container.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx index d363ef1e1cb95a..198a4b364d4ebf 100644 --- a/packages/odie-client/src/components/message/messages-container.tsx +++ b/packages/odie-client/src/components/message/messages-container.tsx @@ -51,14 +51,14 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { const [ searchParams ] = useSearchParams(); const isForwardingToZendesk = searchParams.get( 'provider' ) === 'zendesk' && chat.provider !== 'zendesk'; - const [ chatMessagesLoaded, setChatLoaded ] = useState( false ); + const [ chatMessagesLoaded, setChatMessagesLoaded ] = useState( false ); const messagesContainerRef = useRef< HTMLDivElement >( null ); useZendeskMessageListener(); useAutoScroll( messagesContainerRef ); useEffect( () => { ( chat?.status === 'loaded' || chat?.status === 'closed' ) && - setChatLoaded( ! isForwardingToZendesk ); + setChatMessagesLoaded( ! isForwardingToZendesk ); }, [ chat, isForwardingToZendesk ] ); /** @@ -74,7 +74,7 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { resetSupportInteraction().then( () => { if ( isChatLoaded ) { createZendeskConversation().then( () => { - setChatLoaded( true ); + setChatMessagesLoaded( true ); } ); } } ); From 9915273dea60539afaa90b3175f2d847fba00a53 Mon Sep 17 00:00:00 2001 From: escapemanuele Date: Sat, 18 Jan 2025 00:17:53 +0100 Subject: [PATCH 14/20] Avoid transfer --- .../components/message/messages-container.tsx | 18 +++++++----------- .../hooks/use-create-zendesk-conversation.ts | 18 +++++++++++------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx index 198a4b364d4ebf..863c9730719cfb 100644 --- a/packages/odie-client/src/components/message/messages-container.tsx +++ b/packages/odie-client/src/components/message/messages-container.tsx @@ -57,9 +57,10 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { useAutoScroll( messagesContainerRef ); useEffect( () => { - ( chat?.status === 'loaded' || chat?.status === 'closed' ) && + if ( chat?.status === 'loaded' || chat?.status === 'closed' ) { setChatMessagesLoaded( ! isForwardingToZendesk ); - }, [ chat, isForwardingToZendesk ] ); + } + }, [ chat?.status, isForwardingToZendesk ] ); /** * Handle the case where we are forwarding to Zendesk. @@ -69,23 +70,18 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { isForwardingToZendesk && ! chat.conversationId && createZendeskConversation && - resetSupportInteraction + resetSupportInteraction && + isChatLoaded ) { resetSupportInteraction().then( () => { if ( isChatLoaded ) { - createZendeskConversation().then( () => { + createZendeskConversation( true ).then( () => { setChatMessagesLoaded( true ); } ); } } ); } - }, [ - isForwardingToZendesk, - isChatLoaded, - createZendeskConversation, - resetSupportInteraction, - chat?.conversationId, - ] ); + }, [ isForwardingToZendesk, isChatLoaded, chat?.conversationId ] ); // Used to apply the correct styling on messages const isNextMessageFromSameSender = ( currentMessage: string, nextMessage: string ) => { diff --git a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts index 444abe6f720f8a..1d26e025f7d7f6 100644 --- a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts +++ b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts @@ -8,7 +8,9 @@ import { useOdieAssistantContext } from '../context'; import { useManageSupportInteraction } from '../data'; import { setHelpCenterZendeskConversationStarted } from '../utils'; -export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { +export const useCreateZendeskConversation = (): ( ( + avoidTransfer?: boolean +) => Promise< void > ) => { const { selectedSiteId, selectedSiteURL, @@ -27,16 +29,18 @@ export const useCreateZendeskConversation = (): ( () => Promise< void > ) => { useUpdateZendeskUserFields(); const { addEventToInteraction } = useManageSupportInteraction(); const chatId = chat.odieId; - const createConversation = async () => { + const createConversation = async ( avoidTransfer = false ) => { if ( isSubmittingZendeskUserFields || chat.conversationId ) { return; } - setChat( ( prevChat ) => ( { - ...prevChat, - messages: [ ...prevChat.messages, ...ODIE_TRANSFER_MESSAGE ], - status: 'transfer', - } ) ); + if ( ! avoidTransfer ) { + setChat( ( prevChat ) => ( { + ...prevChat, + messages: [ ...prevChat.messages, ...ODIE_TRANSFER_MESSAGE ], + status: 'transfer', + } ) ); + } await submitUserFields( { messaging_initial_message: userFieldMessage || undefined, From 694d292fb8e07f6f741dac7fcf10685949a05689 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Mon, 20 Jan 2025 15:37:42 +0100 Subject: [PATCH 15/20] Ensure one chat is created --- .../src/components/message/messages-container.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx index 863c9730719cfb..0d6724c6e4e334 100644 --- a/packages/odie-client/src/components/message/messages-container.tsx +++ b/packages/odie-client/src/components/message/messages-container.tsx @@ -48,7 +48,7 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { const { chat, botNameSlug, isChatLoaded } = useOdieAssistantContext(); const createZendeskConversation = useCreateZendeskConversation(); const resetSupportInteraction = useResetSupportInteraction(); - const [ searchParams ] = useSearchParams(); + const [ searchParams, setSearchParams ] = useSearchParams(); const isForwardingToZendesk = searchParams.get( 'provider' ) === 'zendesk' && chat.provider !== 'zendesk'; const [ chatMessagesLoaded, setChatMessagesLoaded ] = useState( false ); @@ -73,6 +73,9 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { resetSupportInteraction && isChatLoaded ) { + searchParams.delete( 'provider' ); + setSearchParams( searchParams ); + resetSupportInteraction().then( () => { if ( isChatLoaded ) { createZendeskConversation( true ).then( () => { From e44d55ae1f14c307cb7db1a44244d5e82b1b38be Mon Sep 17 00:00:00 2001 From: heavyweight Date: Mon, 20 Jan 2025 16:07:55 +0100 Subject: [PATCH 16/20] Default to first open interaction only if there is no interaction set --- packages/help-center/src/components/help-center-content.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/help-center/src/components/help-center-content.tsx b/packages/help-center/src/components/help-center-content.tsx index f293a455f86f1c..ea34111f915f0f 100644 --- a/packages/help-center/src/components/help-center-content.tsx +++ b/packages/help-center/src/components/help-center-content.tsx @@ -89,7 +89,7 @@ const HelpCenterContent: React.FC< { isRelative?: boolean; currentRoute?: string event_source: 'help-center', event_external_id: uuidv4(), } ); - } else if ( openSupportInteraction ) { + } else if ( openSupportInteraction && ! currentSupportInteraction ) { setCurrentSupportInteraction( openSupportInteraction[ 0 ] ); } // eslint-disable-next-line react-hooks/exhaustive-deps From 58826c79615e1b2e005d5a0590449c5d0219b1de Mon Sep 17 00:00:00 2001 From: heavyweight Date: Mon, 20 Jan 2025 17:17:57 +0100 Subject: [PATCH 17/20] Minimize re-rendering --- .../src/hooks/use-get-combined-chat.ts | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/odie-client/src/hooks/use-get-combined-chat.ts b/packages/odie-client/src/hooks/use-get-combined-chat.ts index e0b84b9599b14f..7ae08496a38f9a 100644 --- a/packages/odie-client/src/hooks/use-get-combined-chat.ts +++ b/packages/odie-client/src/hooks/use-get-combined-chat.ts @@ -12,25 +12,33 @@ import type { Chat, Message } from '../types'; * @returns The combined chat. */ export const useGetCombinedChat = ( canConnectToZendesk: boolean ) => { - const { currentSupportInteraction, isChatLoaded } = useSelect( ( select ) => { - const store = select( HELP_CENTER_STORE ) as HelpCenterSelect; - return { - currentSupportInteraction: store.getCurrentSupportInteraction(), - isChatLoaded: store.getIsChatLoaded(), - }; - }, [] ); + const { currentSupportInteraction, conversationId, odieId, isChatLoaded } = useSelect( + ( select ) => { + const store = select( HELP_CENTER_STORE ) as HelpCenterSelect; + const currentSupportInteraction = store.getCurrentSupportInteraction(); + + // Get the current odie chat ID + const odieId = + currentSupportInteraction?.events.find( ( event ) => event.event_source === 'odie' ) + ?.event_external_id ?? null; + + // Get the current Zendesk conversation ID + const conversationId = + currentSupportInteraction?.events.find( ( event ) => event.event_source === 'zendesk' ) + ?.event_external_id ?? null; + + return { + currentSupportInteraction, + conversationId, + odieId, + isChatLoaded: store.getIsChatLoaded(), + }; + }, + [] + ); const [ mainChatState, setMainChatState ] = useState< Chat >( emptyChat ); const getZendeskConversation = useGetZendeskConversation(); - // Get the current odie chat - const odieId = - currentSupportInteraction?.events.find( ( event ) => event.event_source === 'odie' ) - ?.event_external_id ?? null; - - // Get the current Zendesk conversation ID - const conversationId = - currentSupportInteraction?.events.find( ( event ) => event.event_source === 'zendesk' ) - ?.event_external_id ?? null; const { data: odieChat, isLoading: isOdieChatLoading } = useOdieChat( Number( odieId ) ); From 57e09a8ef279d82ba04a7ea6550154cfc322e9fd Mon Sep 17 00:00:00 2001 From: heavyweight Date: Tue, 21 Jan 2025 16:32:05 +0100 Subject: [PATCH 18/20] Ensure conversation is created once with the correct support interaction --- .../hooks/use-reset-support-interaction.ts | 2 +- .../components/message/messages-container.tsx | 24 ++++++++++++++----- .../data/use-manage-support-interaction.ts | 2 +- .../hooks/use-create-zendesk-conversation.ts | 10 ++++---- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/packages/help-center/src/hooks/use-reset-support-interaction.ts b/packages/help-center/src/hooks/use-reset-support-interaction.ts index 49a506e460fd6d..90db617b7e2f5a 100644 --- a/packages/help-center/src/hooks/use-reset-support-interaction.ts +++ b/packages/help-center/src/hooks/use-reset-support-interaction.ts @@ -23,7 +23,7 @@ export const useResetSupportInteraction = () => { queryKey: [ 'support-interactions', 'get-interactions', 'help-center' ], } ); - await startNewInteraction( { + return await startNewInteraction( { event_source: 'help-center', event_external_id: uuidv4(), } ); diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx index 0d6724c6e4e334..20981e53f4b0bd 100644 --- a/packages/odie-client/src/components/message/messages-container.tsx +++ b/packages/odie-client/src/components/message/messages-container.tsx @@ -51,16 +51,19 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { const [ searchParams, setSearchParams ] = useSearchParams(); const isForwardingToZendesk = searchParams.get( 'provider' ) === 'zendesk' && chat.provider !== 'zendesk'; + const [ hasForwardedToZendesk, setHasForwardedToZendesk ] = useState( false ); const [ chatMessagesLoaded, setChatMessagesLoaded ] = useState( false ); const messagesContainerRef = useRef< HTMLDivElement >( null ); useZendeskMessageListener(); useAutoScroll( messagesContainerRef ); useEffect( () => { - if ( chat?.status === 'loaded' || chat?.status === 'closed' ) { - setChatMessagesLoaded( ! isForwardingToZendesk ); + if ( isForwardingToZendesk || hasForwardedToZendesk ) { + return; } - }, [ chat?.status, isForwardingToZendesk ] ); + + ( chat?.status === 'loaded' || chat?.status === 'closed' ) && setChatMessagesLoaded( true ); + }, [ chat, isForwardingToZendesk, hasForwardedToZendesk ] ); /** * Handle the case where we are forwarding to Zendesk. @@ -68,6 +71,7 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { useEffect( () => { if ( isForwardingToZendesk && + ! hasForwardedToZendesk && ! chat.conversationId && createZendeskConversation && resetSupportInteraction && @@ -75,16 +79,24 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { ) { searchParams.delete( 'provider' ); setSearchParams( searchParams ); + setHasForwardedToZendesk( true ); - resetSupportInteraction().then( () => { + resetSupportInteraction().then( ( interaction ) => { if ( isChatLoaded ) { - createZendeskConversation( true ).then( () => { + createZendeskConversation( true, interaction?.uuid ).then( () => { setChatMessagesLoaded( true ); } ); } } ); } - }, [ isForwardingToZendesk, isChatLoaded, chat?.conversationId ] ); + }, [ + isForwardingToZendesk, + hasForwardedToZendesk, + isChatLoaded, + chat?.conversationId, + resetSupportInteraction, + createZendeskConversation, + ] ); // Used to apply the correct styling on messages const isNextMessageFromSameSender = ( currentMessage: string, nextMessage: string ) => { diff --git a/packages/odie-client/src/data/use-manage-support-interaction.ts b/packages/odie-client/src/data/use-manage-support-interaction.ts index a95bf7bcb300ad..1adbaeaab7c661 100644 --- a/packages/odie-client/src/data/use-manage-support-interaction.ts +++ b/packages/odie-client/src/data/use-manage-support-interaction.ts @@ -33,7 +33,7 @@ export const useManageSupportInteraction = () => { setCurrentSupportInteraction( newSupportInteraction ); } }, - } ).mutate; + } ).mutateAsync; /** * Add an event to a support interaction. diff --git a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts index 1d26e025f7d7f6..e4464a25faa769 100644 --- a/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts +++ b/packages/odie-client/src/hooks/use-create-zendesk-conversation.ts @@ -9,7 +9,8 @@ import { useManageSupportInteraction } from '../data'; import { setHelpCenterZendeskConversationStarted } from '../utils'; export const useCreateZendeskConversation = (): ( ( - avoidTransfer?: boolean + avoidTransfer?: boolean, + interactionId?: string ) => Promise< void > ) => { const { selectedSiteId, @@ -29,7 +30,8 @@ export const useCreateZendeskConversation = (): ( ( useUpdateZendeskUserFields(); const { addEventToInteraction } = useManageSupportInteraction(); const chatId = chat.odieId; - const createConversation = async ( avoidTransfer = false ) => { + const createConversation = async ( avoidTransfer = false, interactionId = '' ) => { + const currentInteractionID = interactionId ? interactionId : currentSupportInteraction!.uuid; if ( isSubmittingZendeskUserFields || chat.conversationId ) { return; } @@ -52,14 +54,14 @@ export const useCreateZendeskConversation = (): ( ( const conversation = await Smooch.createConversation( { metadata: { createdAt: Date.now(), - supportInteractionId: currentSupportInteraction!.uuid, + supportInteractionId: currentInteractionID, ...( chatId ? { odieChatId: chatId } : {} ), }, } ); setHelpCenterZendeskConversationStarted(); setWaitAnswerToFirstMessageFromHumanSupport( true ); addEventToInteraction( { - interactionId: currentSupportInteraction!.uuid, + interactionId: currentInteractionID, eventData: { event_source: 'zendesk', event_external_id: conversation.id }, } ); From 11313a0075deaf48859e31b088db0627d2b3c343 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Tue, 21 Jan 2025 17:46:24 +0100 Subject: [PATCH 19/20] Fix back nav for direct chats --- packages/help-center/src/components/back-button.tsx | 2 ++ .../odie-client/src/components/message/messages-container.tsx | 1 + 2 files changed, 3 insertions(+) diff --git a/packages/help-center/src/components/back-button.tsx b/packages/help-center/src/components/back-button.tsx index a72cd3a38f95bc..5094b92e214678 100644 --- a/packages/help-center/src/components/back-button.tsx +++ b/packages/help-center/src/components/back-button.tsx @@ -16,6 +16,8 @@ export const BackButton = () => { navigate( '/' ); } else if ( searchParams.get( 'query' ) ) { navigate( `/?query=${ searchParams.get( 'query' ) }` ); + } else if ( searchParams.get( 'direct-zd-chat' ) ) { + navigate( '/' ); } else { navigate( -1 ); } diff --git a/packages/odie-client/src/components/message/messages-container.tsx b/packages/odie-client/src/components/message/messages-container.tsx index 20981e53f4b0bd..3d09e309b63df6 100644 --- a/packages/odie-client/src/components/message/messages-container.tsx +++ b/packages/odie-client/src/components/message/messages-container.tsx @@ -78,6 +78,7 @@ export const MessagesContainer = ( { currentUser }: ChatMessagesProps ) => { isChatLoaded ) { searchParams.delete( 'provider' ); + searchParams.set( 'direct-zd-chat', '1' ); setSearchParams( searchParams ); setHasForwardedToZendesk( true ); From 2348a2b29dcffda124109656f8e95a6f46800b30 Mon Sep 17 00:00:00 2001 From: heavyweight Date: Tue, 21 Jan 2025 18:11:10 +0100 Subject: [PATCH 20/20] Fix jump to recent visible for direct chats --- packages/odie-client/src/components/message/jump-to-recent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/odie-client/src/components/message/jump-to-recent.tsx b/packages/odie-client/src/components/message/jump-to-recent.tsx index fa7c354eceea68..4ccbbd47739b82 100644 --- a/packages/odie-client/src/components/message/jump-to-recent.tsx +++ b/packages/odie-client/src/components/message/jump-to-recent.tsx @@ -26,7 +26,7 @@ export const JumpToRecent = ( { if ( ! containerReference.current || isMinimized || - chat.messages.length < 2 || + ! chat.messages.length || chat.status !== 'loaded' ) { return;