Help Center: Add Clear Conversation option to Help Center chat header (…

…#96012)

* Add Clear Conversation option to Help Center chat header

* Refactor chat interaction management to use new clear chat related hooks

* Fix chat state update to include current support interaction condition

* HelpCenter: fix chat resetting

---------

Co-authored-by: heavyweight <kpapazov@gmail.com>

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

@@ -1,4 +1,8 @@
+/* eslint-disable no-restricted-imports */
 import config from '@automattic/calypso-config';
+import { Gridicon } from '@automattic/components';
+import { EllipsisMenu } from '@automattic/odie-client';
+import { useManageSupportInteraction } from '@automattic/odie-client/src/data';
 import { CardHeader, Button, Flex } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useMemo, useCallback } from '@wordpress/element';
@@ -14,7 +18,10 @@ import {
 import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import { Route, Routes, useLocation, useSearchParams, useNavigate } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+import PopoverMenuItem from 'calypso/components/popover-menu/item';
 import { usePostByUrl } from '../hooks';
+import { useResetSupportInteraction } from '../hooks/use-reset-support-interaction';
 import { DragIcon } from '../icons';
 import { HELP_CENTER_STORE } from '../stores';
 import { BackButton } from './back-button';
@@ -66,15 +73,45 @@ 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(),
+		} );
+	};
+
+	return (
+		<EllipsisMenu
+			popoverClassName="help-center help-center__container-header-menu"
+			position="bottom"
+		>
+			<PopoverMenuItem
+				onClick={ clearChat }
+				className="help-center help-center__container-header-menu-item"
+			>
+				<Gridicon icon="comment" />
+				{ __( 'Clear Conversation' ) }
+			</PopoverMenuItem>
+		</EllipsisMenu>
+	);
+};
+
 const Content = ( { onMinimize }: { onMinimize?: () => void } ) => {
 	const { __ } = useI18n();
 	const navigate = useNavigate();
 	const { pathname, key } = useLocation();
 
+	const shouldUseHelpCenterExperience = config.isEnabled( 'help-center-experience' );
+	const shouldDisplayClearChatButton =
+		shouldUseHelpCenterExperience && pathname.startsWith( '/odie' );
 	const shouldDisplayChatHistoryButton =
-		config.isEnabled( 'help-center-experience' ) &&
-		pathname !== '/chat-history' &&
-		pathname !== '/odie';
+		shouldUseHelpCenterExperience && pathname !== '/chat-history' && pathname !== '/odie';
 
 	const isHelpCenterHome = key === 'default';
 
@@ -102,6 +139,7 @@ const Content = ( { onMinimize }: { onMinimize?: () => void } ) => {
 			<span id="header-text" role="presentation" className="help-center-header__text">
 				{ headerText }
 			</span>
+			{ shouldDisplayClearChatButton && <ChatEllipsisMenu /> }
 			{ shouldDisplayChatHistoryButton && (
 				<Button
 					className="help-center-header__chat-history"

packages/odie-client/src/hooks/use-get-combined-chat.ts

@@ -66,9 +66,11 @@ export const useGetCombinedChat = ( shouldUseHelpCenterExperience: boolean | und
 					}
 				} );
 			}
-		} else {
+		} else if ( currentSupportInteraction ) {
 			setMainChatState( ( prevChat ) => ( {
-				...prevChat,
+				...( prevChat.supportInteractionId !== currentSupportInteraction!.uuid
+					? emptyChat
+					: prevChat ),
 				supportInteractionId: currentSupportInteraction!.uuid,
 				status: 'loaded',
 			} ) );