chore: content generation ai block & toolbar request optimization

Codeinwp · Aug 10, 2023 · d9049e1 · d9049e1
1 parent b7077f6
commit d9049e1
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 145 deletions.
diff --git 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
@@ -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
@@ -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,14 +198,19 @@ 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 );
 			setErrorMessage( __( 'Prompt not found. Reload the page. If the error still persist the server might be down.', 'otter-blocks' ) );
 			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
@@ -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;