Scaffold chatbot UI.

includes/Chatbot/Chatbot.php

@@ -95,8 +95,10 @@ public function add_hooks(): void {
 
 		if ( is_admin() ) {
 			add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_assets' ) );
+			add_action( 'admin_footer', array( $this, 'render_app_root' ) );
 		} else {
 			add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_assets' ) );
+			add_action( 'wp_footer', array( $this, 'render_app_root' ) );
 		}
 
 		add_filter(
@@ -132,13 +134,22 @@ public function register_assets(): void {
 				'strategy' => 'defer',
 			)
 		);
+		$this->style_registry->register(
+			'react_chatbot_kit',
+			array(
+				'src'          => $this->plugin_env->url( 'build/chatbot/index.css' ),
+				'path'         => $this->plugin_env->path( 'build/chatbot/index.css' ),
+				'manifest'     => $this->plugin_env->path( 'build/chatbot/index.asset.php' ),
+				'dependencies' => array(),
+			)
+		);
 		$this->style_registry->register(
 			'wpsp_chatbot',
 			array(
 				'src'          => $this->plugin_env->url( 'build/chatbot/style-index.css' ),
 				'path'         => $this->plugin_env->path( 'build/chatbot/style-index.css' ),
 				'manifest'     => $this->plugin_env->path( 'build/chatbot/index.asset.php' ),
-				'dependencies' => array(),
+				'dependencies' => array( 'react_chatbot_kit', 'wp-components' ),
 			)
 		);
 	}
@@ -153,6 +164,17 @@ public function enqueue_assets(): void {
 		$this->style_registry->enqueue( 'wpsp_chatbot' );
 	}
 
+	/**
+	 * Renders the chatbot app root.
+	 *
+	 * @since n.e.x.t
+	 */
+	public function render_app_root(): void {
+		?>
+		<div id="wp-starter-plugin-chatbot-root" class="chatbot-root"></div>
+		<?php
+	}
+
 	/**
 	 * Filters the model parameters for the REST API.
 	 *

package.json

@@ -12,7 +12,8 @@
     "@wordpress/icons": "^10.5.0",
     "@wordpress/interface": "^6.4.0",
     "clsx": "^2.1.1",
-    "prop-types": "^15.8.1"
+    "prop-types": "^15.8.1",
+    "react-chatbot-kit": "^2.2.2"
   },
   "scripts": {
     "build": "wp-scripts build",

src/chatbot/components/ActionProvider/index.js

@@ -0,0 +1,28 @@
+import { Children, cloneElement } from '@wordpress/element';
+
+/**
+ * Utility component for the chatbot.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Object}   props                      Component props.
+ * @param {Function} props.createChatBotMessage Function to create a chat message.
+ * @param {Function} props.setState             Function to set the state of the component.
+ * @param {Element}  props.children             The children of the component.
+ * @return {Component} The component to be rendered.
+ */
+export default function ActionProvider( {
+	createChatBotMessage,
+	setState,
+	children,
+} ) {
+	return (
+		<div>
+			{ Children.map( children, ( child ) => {
+				return cloneElement( child, {
+					actions: {},
+				} );
+			} ) }
+		</div>
+	);
+}

src/chatbot/components/ChatbotApp/index.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import Chatbot from 'react-chatbot-kit';
+import 'react-chatbot-kit/build/main.css';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import config from '../../config';
+import MessageParser from '../MessageParser';
+import ActionProvider from '../ActionProvider';
+import './style.scss';
+
+/**
+ * Renders the chatbot.
+ *
+ * @since n.e.x.t
+ *
+ * @return {Component} The component to be rendered.
+ */
+export default function ChatbotApp() {
+	const [ isVisible, setIsVisible ] = useState( false );
+	const toggleVisibility = () => setIsVisible( ! isVisible );
+
+	return (
+		<>
+			{ isVisible && (
+				<div
+					id="wp-starter-plugin-chatbot-container"
+					className="chatbot-container"
+				>
+					<Chatbot
+						config={ config }
+						messageParser={ MessageParser }
+						actionProvider={ ActionProvider }
+					/>
+				</div>
+			) }
+			<Button
+				variant="primary"
+				onClick={ toggleVisibility }
+				className="chatbot-button"
+				aria-controls="wp-starter-plugin-chatbot-container"
+				aria-expanded={ isVisible }
+			>
+				{ __( 'Need help?', 'wp-starter-plugin' ) }
+			</Button>
+		</>
+	);
+}

src/chatbot/components/ChatbotApp/style.scss

@@ -0,0 +1,15 @@
+.chatbot-container {
+	position: fixed;
+	bottom: 2rem;
+	right: 2rem;
+	z-index: 1000;
+	border-radius: 5px;
+	margin-bottom: 3rem;
+}
+
+.chatbot-button {
+	position: fixed;
+	bottom: 2rem;
+	right: 2rem;
+	z-index: 100;
+}

src/chatbot/components/MessageParser/index.js

@@ -0,0 +1,28 @@
+import { Children, cloneElement } from '@wordpress/element';
+
+/**
+ * Utility component for the chatbot.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Object}  props          Component props.
+ * @param {Element} props.children The children of the component.
+ * @param {Object}  props.actions  Actions to be passed to the children.
+ * @return {Component} The component to be rendered.
+ */
+export default function MessageParser( { children, actions } ) {
+	const parse = ( message ) => {
+		console.log( message ); // eslint-disable-line no-console
+	};
+
+	return (
+		<div>
+			{ Children.map( children, ( child ) => {
+				return cloneElement( child, {
+					parse,
+					actions: {},
+				} );
+			} ) }
+		</div>
+	);
+}

src/chatbot/config.js

@@ -0,0 +1,7 @@
+import { createChatBotMessage } from 'react-chatbot-kit';
+
+const config = {
+	initialMessages: [ createChatBotMessage( `Hello world` ) ],
+};
+
+export default config;

src/chatbot/index.js

@@ -3,9 +3,44 @@
  */
 import { store as aiStore } from '@wp-starter-plugin/ai-store';
 
+/**
+ * WordPress dependencies
+ */
+import domReady from '@wordpress/dom-ready';
+import { createRoot, render } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-import './style.scss';
+import ChatbotApp from './components/ChatbotApp';
+
+/**
+ * Mounts the given component into the DOM.
+ *
+ * @since n.e.x.t
+ *
+ * @param {Component} Component    The component to be mounted.
+ * @param {Element}   renderTarget The target element to render the component into.
+ */
+function mountApp( Component, renderTarget ) {
+	if ( createRoot ) {
+		const root = createRoot( renderTarget );
+		root.render( Component );
+	} else {
+		render( Component, renderTarget );
+	}
+}
+
+// Initialize the app once the DOM is ready.
+domReady( () => {
+	const renderTarget = document.getElementById(
+		'wp-starter-plugin-chatbot-root'
+	);
+	if ( ! renderTarget ) {
+		return;
+	}
+
+	console.log( 'Chatbot loaded, using store:', aiStore.name ); // eslint-disable-line no-console
 
-console.log( 'Chatbot loaded, using store:', aiStore.name ); // eslint-disable-line no-console
+	mountApp( <ChatbotApp />, renderTarget );
+} );