chore: use AI Block as buffer

Codeinwp · Aug 16, 2023 · 014d4d5 · 014d4d5
1 parent 749b39f
commit 014d4d5
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 9 deletions.
diff --git a/src/blocks/blocks/content-generator/block.json b/src/blocks/blocks/content-generator/block.json
@@ -15,6 +15,10 @@
 	"attributes": {
 		"promptID": {
 			"type": "string"
+		},
+		"resultHistory": {
+			"type": "array",
+			"default": []
 		}
 	}
 }
diff --git a/src/blocks/blocks/content-generator/edit.js b/src/blocks/blocks/content-generator/edit.js
@@ -242,6 +242,7 @@ const ContentGenerator = ({
 							actionButtons={PRESETS?.[attributes.promptID]?.actions}
 							onClose={() => removeBlock( clientId )}
 							promptPlaceholder={PRESETS?.[attributes.promptID]?.placeholder}
+							resultHistory={attributes.resultHistory}
 						>
 							{
 								hasInnerBlocks ? (

diff --git a/src/blocks/blocks/content-generator/types.d.ts b/src/blocks/blocks/content-generator/types.d.ts
@@ -2,6 +2,7 @@ import { BlockProps, InspectorProps } from '../../helpers/blocks';
 
 type Attributes = {
 	promptID: string;
+	resultHistory: {result: string, meta: { usedToken: number, prompt: string }}[]
 }
 
 export type ContentGeneratorAttrs = Partial<Attributes>

diff --git a/src/blocks/components/prompt/index.tsx b/src/blocks/components/prompt/index.tsx
@@ -33,6 +33,7 @@ type PromptPlaceholderProps = {
 	mainActionLabel?: string
 	onPreview?: ( result: string ) => void
 	actionButtons?: ( props: {status?: string}) => ReactNode
+	resultHistory?: {result: string, meta: { usedToken: number, prompt: string }}[]
 };
 
 export const openAiAPIKeyName = 'themeisle_open_ai_api_key';
@@ -127,7 +128,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 	const [ embeddedPrompts, setEmbeddedPrompts ] = useState<PromptsData>([]);
 	const [ result, setResult ] = useState<string | undefined>( undefined );
 
-	const [ resultHistory, setResultHistory ] = useState<{result: string, meta: { usedToken: number, prompt: string }}[]>([]);
+	const [ resultHistory, setResultHistory ] = useState<{result: string, meta: { usedToken: number, prompt: string }}[]>( props.resultHistory ?? []);
 	const [ resultHistoryIndex, setResultHistoryIndex ] = useState<number>( 0 );
 
 	const [ showResultArea, setShowResultArea ] = useState<boolean>( false );
@@ -178,9 +179,6 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 	}, [ resultHistory ]);
 
 	useEffect( () => {
-		if ( ! result ) {
-			return;
-		}
 
 		if ( 0 > resultHistoryIndex ) {
 			return;
@@ -190,7 +188,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 			return;
 		}
 
-		setResult( resultHistory[ resultHistoryIndex ].result );
+		setResult( resultHistory?.[ resultHistoryIndex ].result );
 		setTokenUsageDescription( __( 'Used tokens: ', 'otter-blocks' ) + resultHistory[ resultHistoryIndex ].meta.usedToken );
 		props.onPreview?.( resultHistory[ resultHistoryIndex ].result );
 
@@ -340,7 +338,7 @@ const PromptPlaceholder = ( props: PromptPlaceholderProps ) => {
 	return (
 		<div>
 			{
-				showResultArea ? (
+				( 0 < resultHistory?.length ) ? (
 					<PromptBlockEditor
 						title={ props.title }
 						currentResultIndex={ resultHistoryIndex + 1 }

diff --git a/src/blocks/plugins/ai-content/index.tsx b/src/blocks/plugins/ai-content/index.tsx
@@ -23,8 +23,8 @@ import {
 	applyFilters
 } from '@wordpress/hooks';
 
-import { useDispatch, useSelect } from '@wordpress/data';
-import { rawHandler } from '@wordpress/blocks';
+import { useDispatch, useSelect, dispatch } from '@wordpress/data';
+import { rawHandler, createBlock } from '@wordpress/blocks';
 import { BlockControls } from '@wordpress/block-editor';
 
 /**
@@ -188,7 +188,22 @@ const withConditions = createHigherOrderComponent( BlockEdit => {
 
 				const clientId = ! isMultipleSelection ? props.clientId : selectedBlocks.pop().clientId;
 
-				insertBlockBelow( props.clientId, newBlocks );
+				const aiBlock = createBlock(
+					'themeisle-blocks/content-generator',
+					{
+						promptID: 'textTransformation',
+						resultHistory: [{
+							result: response?.choices?.[0]?.message.content ?? '',
+							meta: {
+								usedToken: response?.usage.total_tokens,
+								prompt: ''
+							}
+						}]
+					},
+					newBlocks
+				);
+
+				insertBlockBelow( props.clientId, aiBlock );
 
 				setIsProcessing( prevState => ({ ...prevState, [ actionKey ]: false }) );
 				callback?.();