From d9049e140263e97cef863ad4d8d9b6600a70e187 Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Thu, 10 Aug 2023 13:24:59 +0300
Subject: [PATCH] chore: content generation ai block & toolbar request
 optimization

---
 src/blocks/blocks/content-generator/edit.js  | 150 ++++++++++++-------
 src/blocks/blocks/content-generator/index.js |  10 ++
 src/blocks/components/prompt/index.tsx       |  10 +-
 src/blocks/plugins/ai-content/editor.scss    |   5 +-
 src/blocks/plugins/ai-content/index.tsx      | 144 +++++++-----------
 5 files changed, 174 insertions(+), 145 deletions(-)

diff --git a/src/blocks/blocks/content-generator/edit.js b/src/blocks/blocks/content-generator/edit.js
index 6bfc4d5ca..10e4db606 100644
--- a/src/blocks/blocks/content-generator/edit.js
+++ b/src/blocks/blocks/content-generator/edit.js
@@ -23,7 +23,7 @@ import {
 	useState
 } from '@wordpress/element';
 
-import { createBlock, createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
+import { createBlock, rawHandler } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -68,7 +68,8 @@ const ContentGenerator = ({
 		selectBlock,
 		moveBlockToPosition,
 		insertBlocks,
-		replaceBlock
+		replaceBlock,
+		replaceBlocks
 	} = useDispatch( 'core/block-editor' );
 
 	/**
@@ -85,6 +86,14 @@ const ContentGenerator = ({
 
 			replaceInnerBlocks( clientId, [ form ]);
 		}
+
+		if ( 'textTransformation' === attributes.promptID ) {
+			const blocks = rawHandler({
+				HTML: result
+			});
+
+			replaceInnerBlocks( clientId, blocks );
+		}
 	};
 
 	const { hasInnerBlocks, containerId, getBlocks, getBlock, getBlockOrder, getBlockRootClientId } = useSelect(
@@ -106,21 +115,29 @@ const ContentGenerator = ({
 		[ clientId ]
 	);
 
-	const transformToContainerBlock = () => {
-		const container = getBlock( containerId );
+	/**
+	 * Replace the block with the blocks generated from the prompt response
+	 */
+	const selfReplaceWithContent = () => {
+		const blocks = getBlocks( clientId );
 
-		replaceBlock( clientId, container );
+		replaceBlocks( clientId, blocks );
 	};
 
-	const insertNewBlockFromContainer = () => {
-		const containerBlock = getBlock( containerId );
-		const copy = createBlock(
-			containerBlock.name,
-			containerBlock.attributes,
-			containerBlock.innerBlocks?.map( block => {
-				return createBlock( block.name, block.attributes, block.innerBlocks );
-			})
-		);
+	/**
+	 * Insert the blocks generated from the prompt response below the current block
+	 */
+	const insertContentIntoPage = () => {
+		const blocks = getBlocks( clientId );
+		const copy = blocks.map( blockRoot => {
+			return createBlock(
+				blockRoot.name,
+				blockRoot.attributes,
+				blockRoot.innerBlocks?.map( block => {
+					return createBlock( block.name, block.attributes, block.innerBlocks );
+				})
+			);
+		});
 
 		insertBlockBelow( clientId, copy );
 	};
@@ -144,21 +161,45 @@ const ContentGenerator = ({
 
 	const PRESETS = {
 		form: {
-			title: __( 'AI Form generator (Beta)', 'otter-blocks' ),
+			title: __( 'AI Form generator', 'otter-blocks' ),
 			placeholder: __( 'Start describing what form you need...', 'otter-blocks' ),
 			actions: ( props ) => {
 				return (
 					<Fragment>
 						<Button
 							variant="primary"
-							onClick={transformToContainerBlock}
+							onClick={selfReplaceWithContent}
 							disabled={'loading' === props.status}
 						>
 							{__( 'Replace', 'otter-blocks' )}
 						</Button>
 						<Button
 							variant="secondary"
-							onClick={insertNewBlockFromContainer}
+							onClick={insertContentIntoPage}
+							disabled={'loading' === props.status}
+						>
+							{__( 'Insert below', 'otter-blocks' )}
+						</Button>
+					</Fragment>
+				);
+			}
+		},
+		textTransformation: {
+			title: __( 'AI Content generator', 'otter-blocks' ),
+			placeholder: __( 'Start describing what content you need...', 'otter-blocks' ),
+			actions: ( props ) => {
+				return (
+					<Fragment>
+						<Button
+							variant="primary"
+							onClick={selfReplaceWithContent}
+							disabled={'loading' === props.status}
+						>
+							{__( 'Replace', 'otter-blocks' )}
+						</Button>
+						<Button
+							variant="secondary"
+							onClick={insertContentIntoPage}
 							disabled={'loading' === props.status}
 						>
 							{__( 'Insert below', 'otter-blocks' )}
@@ -169,44 +210,6 @@ const ContentGenerator = ({
 		}
 	};
 
-
-	// INFO: those are function for changing the content of an existing block.
-	// const [ showDropdown, setShowDropdown ] = useState( false );
-	// const [ containerClientId, setContainerClientId ] = useState( '' );
-	//
-	// const canReplaceBlock = useSelect( select => {
-	// 	const { getBlocks } = select( 'core/block-editor' );
-	//
-	// 	return ( getBlocks?.() ?? []).some( block => block.clientId === attributes.blockToReplace );
-	// }, [ clientId, attributes.blockToReplace ]);
-	//
-	// const replaceTargetBlock = () => {
-	//
-	// 	const blocksToAdd = getBlocks?.( containerId )?.map( block => {
-	// 		return createBlock( block.name, block.attributes, block.innerBlocks );
-	// 	}) ?? [];
-	//
-	// 	if ( ! blocksToAdd.length ) {
-	// 		return;
-	// 	}
-	//
-	// 	replaceInnerBlocks( attributes.blockToReplace, blocksToAdd );
-	// };
-	//
-	// const appendToTargetBlock = () => {
-	// 	const blocksToAdd = getBlocks?.( containerId )?.map( block => {
-	// 		return createBlock( block.name, block.attributes, block.innerBlocks );
-	// 	}) ?? [];
-	//
-	// 	const targetBlock = getBlock( attributes.blockToReplace );
-	//
-	// 	if ( ! blocksToAdd.length ) {
-	// 		return;
-	// 	}
-	//
-	// 	insertBlocks( blocksToAdd, targetBlock.innerBlocks?.length ?? 0, attributes.blockToReplace );
-	// };
-
 	return (
 		<Fragment>
 			<Inspector
@@ -256,3 +259,40 @@ const ContentGenerator = ({
 };
 
 export default ContentGenerator;
+
+// INFO: those are function for changing the content of an existing block.
+// const [ showDropdown, setShowDropdown ] = useState( false );
+// const [ containerClientId, setContainerClientId ] = useState( '' );
+//
+// const canReplaceBlock = useSelect( select => {
+// 	const { getBlocks } = select( 'core/block-editor' );
+//
+// 	return ( getBlocks?.() ?? []).some( block => block.clientId === attributes.blockToReplace );
+// }, [ clientId, attributes.blockToReplace ]);
+//
+// const replaceTargetBlock = () => {
+//
+// 	const blocksToAdd = getBlocks?.( containerId )?.map( block => {
+// 		return createBlock( block.name, block.attributes, block.innerBlocks );
+// 	}) ?? [];
+//
+// 	if ( ! blocksToAdd.length ) {
+// 		return;
+// 	}
+//
+// 	replaceInnerBlocks( attributes.blockToReplace, blocksToAdd );
+// };
+//
+// const appendToTargetBlock = () => {
+// 	const blocksToAdd = getBlocks?.( containerId )?.map( block => {
+// 		return createBlock( block.name, block.attributes, block.innerBlocks );
+// 	}) ?? [];
+//
+// 	const targetBlock = getBlock( attributes.blockToReplace );
+//
+// 	if ( ! blocksToAdd.length ) {
+// 		return;
+// 	}
+//
+// 	insertBlocks( blocksToAdd, targetBlock.innerBlocks?.length ?? 0, attributes.blockToReplace );
+// };
diff --git a/src/blocks/blocks/content-generator/index.js b/src/blocks/blocks/content-generator/index.js
index 28165b945..36d6a3f2a 100644
--- a/src/blocks/blocks/content-generator/index.js
+++ b/src/blocks/blocks/content-generator/index.js
@@ -35,6 +35,16 @@ registerBlockType( name, {
 			attributes: {
 				promptID: 'form'
 			}
+		},
+		{
+			name: 'themeisle-blocks/content-generator-content',
+			description: __( 'Generate new content with OpenAI.', 'otter-blocks' ),
+			icon: formAiGeneration,
+			title: __( 'AI Content Generator', 'otter-blocks' ),
+			scope: [ 'block' ],
+			attributes: {
+				promptID: 'textTransformation'
+			}
 		}
 	]
 });
diff --git a/src/blocks/components/prompt/index.tsx b/src/blocks/components/prompt/index.tsx
index b3dac39c4..0edd99a3c 100644
--- a/src/blocks/components/prompt/index.tsx
+++ b/src/blocks/components/prompt/index.tsx
@@ -15,6 +15,7 @@ import { Fragment, useEffect, useState } from '@wordpress/element';
 import useSettings from '../../helpers/use-settings';
 import {
 	PromptsData,
+	injectActionIntoPrompt,
 	retrieveEmbeddedPrompt,
 	sendPromptToOpenAI, sendPromptToOpenAIWithRegenerate
 } from '../../helpers/prompt';
@@ -197,7 +198,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 
 	function onPromptSubmit( regenerate = false ) {
 
-		const embeddedPrompt = embeddedPrompts?.find( ( prompt ) => prompt.otter_name === promptID );
+		let embeddedPrompt = embeddedPrompts?.find( ( prompt ) => prompt.otter_name === promptID );
 
 		if ( ! embeddedPrompt ) {
 			setShowError( true );
@@ -205,6 +206,11 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 			return;
 		}
 
+		// TODO: refactor this into a more reusable way
+		if ( 'textTransformation' === promptID ) {
+			embeddedPrompt = injectActionIntoPrompt( embeddedPrompt, 'otter_action_prompt' );
+		}
+
 		if ( ! apiKey ) {
 			setShowError( true );
 			setErrorMessage( __( 'API Key not found. Please add your API Key in the settings page.', 'otter-blocks' ) );
@@ -223,7 +229,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 				return;
 			}
 
-			const result = data?.choices?.[0]?.message?.function_call?.arguments;
+			const result = data?.choices?.[0]?.message?.function_call?.arguments ?? data?.choices?.[0]?.message?.content;
 
 			setGenerationStatus( 'loaded' );
 
diff --git a/src/blocks/plugins/ai-content/editor.scss b/src/blocks/plugins/ai-content/editor.scss
index ead2918b8..4e3e0e663 100644
--- a/src/blocks/plugins/ai-content/editor.scss
+++ b/src/blocks/plugins/ai-content/editor.scss
@@ -1,6 +1,9 @@
+.o-menu-item-alignment {
+    padding-left: 8px;
+}
+
 .o-menu-item-header {
     font-family: monospace;
-    padding-left: 8px;
     font-size: 13px;
     color: #828282;
     text-transform: uppercase;
diff --git a/src/blocks/plugins/ai-content/index.tsx b/src/blocks/plugins/ai-content/index.tsx
index c1caefc19..b4406d495 100644
--- a/src/blocks/plugins/ai-content/index.tsx
+++ b/src/blocks/plugins/ai-content/index.tsx
@@ -5,8 +5,13 @@ import { __ } from '@wordpress/i18n';
 
 // @ts-ignore
 import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem, DropdownMenu, MenuGroup, MenuItem, Toolbar, Spinner, ExternalLink
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+	Toolbar,
+	Spinner,
+	ExternalLink,
+	Disabled
 } from '@wordpress/components';
 
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -19,13 +24,12 @@ import {
 } from '@wordpress/hooks';
 
 import { useDispatch, useSelect } from '@wordpress/data';
-import { rawHandler, serialize } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import { rawHandler } from '@wordpress/blocks';
+import { BlockControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies.
  */
-import { BlockControls } from '@wordpress/block-editor';
 import { aiGeneration } from '../../helpers/icons';
 import './editor.scss';
 import { PromptsData, injectActionIntoPrompt, retrieveEmbeddedPrompt, sendPromptToOpenAI } from '../../helpers/prompt';
@@ -72,7 +76,6 @@ let embeddedPromptsCache: PromptsData|null = null;
 
 const withConditions = createHigherOrderComponent( BlockEdit => {
 	return props => {
-		const [ embeddedPrompts, setEmbeddedPrompts ] = useState<PromptsData|null>( null );
 		const [ getOption, updateOption, status ] = useSettings();
 		const [ apiKey, setApiKey ] = useState<string | null>( null );
 		const [ isProcessing, setIsProcessing ] = useState<Record<string, boolean>>({});
@@ -95,23 +98,6 @@ const withConditions = createHigherOrderComponent( BlockEdit => {
 			};
 		}, []);
 
-
-		useEffect( () => {
-
-			// TODO: retrieve the prompts from the server ONCE and cache them.
-			const getEmbeddedPrompt = async() => {
-				retrieveEmbeddedPrompt( 'textTransformation' ).then( ( promptServer ) => {
-					setEmbeddedPrompts( promptServer.prompts );
-					embeddedPromptsCache = promptServer.prompts;
-				});
-			};
-
-			if ( ! embeddedPromptsCache ) {
-				console.count( 'getEmbeddedPrompt' ); // TODO: remove after prototyping
-				getEmbeddedPrompt();
-			}
-		}, []);
-
 		useEffect( () => {
 			if ( 'loading' === status ) {
 				return;
@@ -142,13 +128,18 @@ const withConditions = createHigherOrderComponent( BlockEdit => {
 			setDisplayError( undefined );
 		}, [ displayError ]);
 
-		const generateContent = ( content: string, actionKey: string, callback: Function = () =>{}) => {
+		const generateContent = async( content: string, actionKey: string, callback: Function = () =>{}) => {
 
 			if ( ! content ) {
 				setDisplayError( __( 'No content detected in selected block.', 'otter-blocks' ) );
 				return;
 			}
 
+			if ( ! embeddedPromptsCache ) {
+				const response = await retrieveEmbeddedPrompt( 'textTransformation' );
+				embeddedPromptsCache = response?.prompts ?? [];
+			}
+
 			const embeddedPrompt = embeddedPromptsCache?.find( ( prompt ) => 'textTransformation' === prompt.otter_name );
 
 			if ( ! embeddedPrompt ) {
@@ -206,6 +197,21 @@ const withConditions = createHigherOrderComponent( BlockEdit => {
 			});
 		};
 
+		const ActionMenuItem = ( args: { actionKey: string, children: React.ReactNode, callback: Function }) => {
+			return (
+				<Disabled isDisabled={Object.values( isProcessing ).some( x => x )}>
+					<MenuItem
+						onClick={ () => {
+							generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), args.actionKey, () => args.callback?.( args.actionKey ) );
+						}}
+					>
+						{ args.children }
+						{ isProcessing?.[args.actionKey] && <Spinner /> }
+					</MenuItem>
+				</Disabled>
+			);
+		};
+
 		return (
 			<Fragment>
 				<BlockEdit { ...props } />
@@ -222,85 +228,49 @@ const withConditions = createHigherOrderComponent( BlockEdit => {
 										({ onClose }) => (
 											<Fragment>
 												<MenuGroup>
-													<span className="o-menu-item-header">{__( 'Writing', 'otter-blocks' )}</span>
-													<MenuItem onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_generate_title', onClose );
-													} }>
+													<span className="o-menu-item-header o-menu-item-alignment">{__( 'Writing', 'otter-blocks' )}</span>
+													<ActionMenuItem actionKey='otter_action_generate_title' callback={onClose}>
 														{ __( 'Generate a heading', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_generate_title'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_continue_writing', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_continue_writing' callback={onClose}>
 														{ __( 'Continue writing', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_continue_writing'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_summarize', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_summarize' callback={onClose}>
 														{ __( 'Summarize it', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_summarize'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_make_shorter', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_make_shorter' callback={onClose}>
 														{ __( 'Make it shorter', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_make_shorter'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_make_longer', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_make_longer' callback={onClose}>
 														{ __( 'Make it longer', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_make_longer'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_make_descriptive', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_make_longer' callback={onClose}>
 														{ __( 'Make it more descriptive', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_make_descriptive'] && <Spinner /> }
-													</MenuItem>
+													</ActionMenuItem>
 												</MenuGroup>
 												<MenuGroup>
-													<span className="o-menu-item-header">{__( 'Tone', 'otter-blocks' )}</span>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_tone_professional', onClose );
-													} }>
+													<span className="o-menu-item-header o-menu-item-alignment">{__( 'Tone', 'otter-blocks' )}</span>
+													<ActionMenuItem actionKey='otter_action_tone_professional' callback={onClose}>
 														{ __( 'Professional', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_tone_professional'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_tone_friendly', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_tone_friendly' callback={onClose}>
 														{ __( 'Friendly', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_tone_friendly'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_tone_humorous', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_tone_humorous' callback={onClose}>
 														{ __( 'Humorous', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_tone_humorous'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_tone_confident', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_tone_confident' callback={onClose}>
 														{ __( 'Confident', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_tone_confident'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_tone_persuasive', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_tone_persuasive' callback={onClose}>
 														{ __( 'Persuasive', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_tone_persuasive'] && <Spinner /> }
-													</MenuItem>
-													<MenuItem  onClick={ () => {
-														generateContent( extractContent( isMultipleSelection ? selectedBlocks : props ), 'otter_action_tone_casual', onClose );
-													} }>
+													</ActionMenuItem>
+													<ActionMenuItem actionKey='otter_action_tone_casual' callback={onClose}>
 														{ __( 'Casual', 'otter-blocks' ) }
-														{ isProcessing?.['otter_action_tone_casual'] && <Spinner /> }
-													</MenuItem>
+													</ActionMenuItem>
 												</MenuGroup>
 												<MenuGroup>
-													<ExternalLink href="https://docs.themeisle.com/collection/1563-otter---page-builder-blocks-extensions" target="_blank" rel="noopener noreferrer">
+													<ExternalLink className='o-menu-item-alignment' href="https://docs.themeisle.com/collection/1563-otter---page-builder-blocks-extensions" target="_blank" rel="noopener noreferrer">
 														{
 															__( 'Go to docs', 'otter-blocks' ) // TODO: Add link to docs & CSS styling
 														}