Implement chatbot close button functionality (see #4).

felixarntz · Oct 5, 2024 · 17d0000 · 17d0000
1 parent 14ee7de
commit 17d0000
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 13 deletions.
diff --git a/src/chatbot/components/ChatbotApp/index.js b/src/chatbot/components/ChatbotApp/index.js
@@ -8,7 +8,7 @@ import { store as aiStore } from '@ai-services/ai-store';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 import config from '../../config';
 import MessageParser from '../MessageParser';
 import ActionProvider from '../ActionProvider';
-import { ChatIdProvider } from '../../context';
+import { ChatIdProvider, ChatbotToggleVisibilityProvider } from '../../context';
 import './style.scss';
 
 const CHAT_ID = 'wpspChatbotPrimary';
@@ -33,8 +33,18 @@ const SERVICE_ARGS = { capabilities: [ 'text_generation' ] };
  * @return {Component} The component to be rendered.
  */
 export default function ChatbotApp() {
+	const toggleButtonRef = useRef( null );
+
 	const [ isVisible, setIsVisible ] = useState( false );
-	const toggleVisibility = () => setIsVisible( ! isVisible );
+
+	const toggleVisibility = () => {
+		setIsVisible( ! isVisible );
+
+		// Focus on the toggle when the chatbot is closed.
+		if ( isVisible && toggleButtonRef.current ) {
+			toggleButtonRef.current.focus();
+		}
+	};
 
 	const { service, hasChat } = useSelect( ( select ) => {
 		return {
@@ -73,11 +83,15 @@ export default function ChatbotApp() {
 			>
 				{ isVisible && hasChat && (
 					<ChatIdProvider value={ CHAT_ID }>
-						<Chatbot
-							config={ config }
-							messageParser={ MessageParser }
-							actionProvider={ ActionProvider }
-						/>
+						<ChatbotToggleVisibilityProvider
+							value={ toggleVisibility }
+						>
+							<Chatbot
+								config={ config }
+								messageParser={ MessageParser }
+								actionProvider={ ActionProvider }
+							/>
+						</ChatbotToggleVisibilityProvider>
 					</ChatIdProvider>
 				) }
 			</div>
@@ -87,6 +101,7 @@ export default function ChatbotApp() {
 				className="chatbot-button button button-primary" // Used so that we don't need to load the heavy 'wp-components' stylesheet everywhere.
 				aria-controls="ai-services-chatbot-container"
 				aria-expanded={ isVisible }
+				ref={ toggleButtonRef }
 			>
 				{ __( 'Need help?', 'ai-services' ) }
 			</Button>

diff --git a/src/chatbot/components/ChatbotHeader/index.js b/src/chatbot/components/ChatbotHeader/index.js
@@ -12,7 +12,10 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useChatIdContext } from '../../context';
+import {
+	useChatIdContext,
+	useChatbotToggleVisibilityContext,
+} from '../../context';
 import './style.scss';
 
 /**
@@ -24,6 +27,8 @@ import './style.scss';
  */
 export default function ChatbotHeader() {
 	const chatId = useChatIdContext();
+	const toggleVisibility = useChatbotToggleVisibilityContext();
+
 	const serviceName = useSelect( ( select ) => {
 		const chatConfig = select( aiStore ).getChatConfig( chatId );
 		if ( ! chatConfig.service ) {
@@ -52,6 +57,7 @@ export default function ChatbotHeader() {
 			<button
 				className="chatbot-header-close-button"
 				aria-label={ __( 'Close chatbot', 'ai-services' ) }
+				onClick={ toggleVisibility }
 			>
 				<span className="chatbot-header-close-button__icon" />
 				<span className="screen-reader-text">

diff --git a/src/chatbot/context.js b/src/chatbot/context.js
@@ -3,10 +3,14 @@
  */
 import { createContext, useContext } from '@wordpress/element';
 
-const Context = createContext( '' );
-const { Provider } = Context;
+const ChatIdContext = createContext( '' );
+const { Provider: ChatIdProvider } = ChatIdContext;
 
-export { Provider as ChatIdProvider };
+const ChatbotToggleVisibilityContext = createContext( null );
+const { Provider: ChatbotToggleVisibilityProvider } =
+	ChatbotToggleVisibilityContext;
+
+export { ChatIdProvider, ChatbotToggleVisibilityProvider };
 
 /**
  * A hook that returns the chat ID context.
@@ -16,5 +20,16 @@ export { Provider as ChatIdProvider };
  * @return {string} The chat ID context.
  */
 export function useChatIdContext() {
-	return useContext( Context );
+	return useContext( ChatIdContext );
+}
+
+/**
+ * A hook that returns the chatbot visibility context.
+ *
+ * @since n.e.x.t
+ *
+ * @return {string} The chatbot visibility context.
+ */
+export function useChatbotToggleVisibilityContext() {
+	return useContext( ChatbotToggleVisibilityContext );
 }