New: Contact Buttons v8 - Top Bar

.grunt-config/webpack.js

@@ -125,6 +125,7 @@ const entry = {
 	'admin-notifications': path.resolve( __dirname, '../modules/notifications/assets/js/admin.js' ),
 	'editor-notifications': path.resolve( __dirname, '../modules/notifications/assets/js/editor.js' ),
 	'ai-layout': path.resolve( __dirname, '../modules/ai/assets/js/editor/layout-module.js' ),
+	'ai-gutenberg': path.resolve( __dirname, '../modules/ai/assets/js/gutenberg/index.js' ),
 	'element-manager-admin': path.resolve( __dirname, '../modules/element-manager/assets/js/admin.js' ),
 	'media-hints': path.resolve( __dirname, '../assets/dev/js/admin/hints/media.js' ),
 	// Temporary solution for the AI App in the Admin.

assets/dev/js/frontend/utils/video-api/vimeo-loader.js

@@ -18,8 +18,6 @@ export default class VimeoLoader extends BaseLoader {
 	}
 
 	getAutoplayURL( videoURL ) {
-		videoURL = super.getAutoplayURL( videoURL );
-
 		// Vimeo requires the '#t=' param to be last in the URL.
 		const timeMatch = videoURL.match( /#t=[^&]*/ );
 

assets/dev/scss/editor/panel/_elements.scss

@@ -204,7 +204,7 @@
 	position: absolute;
 	width: 300px;
 	z-index: 1;
-	background-color: $editor-background;
+	background-color: var(--e-a-bg-default);
 	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
 	border-radius: 3px;
 
@@ -215,7 +215,7 @@
 		@include end(100%);
 		transform: scaleY(0.7);
 		border: 10px solid transparent;
-		border-inline-end-color: $editor-background;
+		border-inline-end-color: var(--e-a-bg-default);
 	}
 
 	&__title {
@@ -226,8 +226,8 @@
 		&-header {
 			display: flex;
 			padding: 20px 20px 0;
-			color: $editor-darkest;
-			border-block-end: 1px solid $editor-background;
+			color: var(--e-a-color-txt);
+			border-block-end: 1px solid var(--e-a-bg-default);
 			font-weight: 500;
 
 			.eicon-pro-icon {
@@ -240,7 +240,7 @@
 			.eicon-close {
 				cursor: pointer;
 				margin-inline-start: auto;
-				color: $editor-light;
+				color: var(--e-a-color-txt);
 			}
 		}
 

assets/dev/scss/editor/panel/controls/_globals.scss

@@ -81,7 +81,7 @@
 	}
 
 	&__preview-items-container {
-		max-height: 260px;
+		max-height: 400px;
 		overflow-y: auto;
 		padding: 5px 0;
 

changelog.txt

@@ -1,5 +1,9 @@
 == Changelog ==
 
+= 3.21.8 - 2024-05-26 =
+
+* Fix: Can't click on the AI consent modal checkbox
+
 = 3.21.7 - 2024-05-22 =
 
 * Fix: Unnecessary commas cause Cron Jobs to fail in various scenarios ([#25803](https://github.com/elementor/elementor/issues/25803))

core/common/modules/connect/apps/base-app.php

@@ -471,7 +471,7 @@ protected function http_request( $method, $endpoint, $args = [], $options = [] )
 			$args
 		);
 
-		if ( is_wp_error( $response ) ) {
+		if ( is_wp_error( $response ) && empty( $options['with_error_data'] ) ) {
 			// PHPCS - the variable $response does not contain a user input value.
 			wp_die( $response, [ 'back_link' => true ] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 		}

core/settings/editor-preferences/model.php

@@ -3,7 +3,9 @@
 namespace Elementor\Core\Settings\EditorPreferences;
 
 use Elementor\Controls_Manager;
+use Elementor\Core\Editor\Editor;
 use Elementor\Core\Settings\Base\Model as BaseModel;
+use Elementor\Plugin;
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly
@@ -110,21 +112,25 @@ protected function register_controls() {
 			]
 		);
 
-		$this->add_control(
-			'default_device_view',
-			[
-				'label' => esc_html__( 'Default device view', 'elementor' ),
-				'type' => Controls_Manager::SELECT,
-				'default' => 'default',
-				'options' => [
-					'default' => esc_html__( 'Default', 'elementor' ),
-					'mobile' => esc_html__( 'Mobile', 'elementor' ),
-					'tablet' => esc_html__( 'Tablet', 'elementor' ),
-					'desktop' => esc_html__( 'Desktop', 'elementor' ),
-				],
-				'description' => esc_html__( 'Choose which device to display when clicking the Responsive Mode icon.', 'elementor' ),
-			]
-		);
+		if ( ! Plugin::$instance->experiments->is_feature_active( Editor::EDITOR_V2_EXPERIMENT_NAME ) ) {
+
+			$this->add_control(
+				'default_device_view',
+				[
+					'label' => esc_html__( 'Default device view', 'elementor' ),
+					'type' => Controls_Manager::SELECT,
+					'default' => 'default',
+					'options' => [
+						'default' => esc_html__( 'Default', 'elementor' ),
+						'mobile' => esc_html__( 'Mobile', 'elementor' ),
+						'tablet' => esc_html__( 'Tablet', 'elementor' ),
+						'desktop' => esc_html__( 'Desktop', 'elementor' ),
+					],
+					'description' => esc_html__( 'Choose which device to display when clicking the Responsive Mode icon.', 'elementor' ),
+				]
+			);
+
+		}
 
 		$this->add_control(
 			'edit_buttons',

modules/ai/assets/js/editor/api/index.js

@@ -3,6 +3,8 @@ const request = ( endpoint, data = {}, immediately = false, signal ) => {
 		data.context = window.elementorAiCurrentContext;
 	}
 
+	data.editor_session_id = window.EDITOR_SESSION_ID;
+
 	return new Promise( ( resolve, reject ) => {
 		const ajaxData = elementorCommon.ajax.addRequest(
 			endpoint,
@@ -20,12 +22,14 @@ const request = ( endpoint, data = {}, immediately = false, signal ) => {
 	} );
 };
 
-export const getUserInformation = () => request( 'ai_get_user_information' );
+export const getUserInformation = ( immediately ) => request( 'ai_get_user_information', undefined, immediately );
 
 export const getRemoteConfig = () => request( 'ai_get_remote_config' );
 
 export const getCompletionText = ( payload ) => request( 'ai_get_completion_text', { payload } );
 
+export const getExcerpt = ( payload ) => request( 'ai_get_excerpt', { payload } );
+
 export const getEditText = ( payload ) => request( 'ai_get_edit_text', { payload } );
 
 export const getCustomCode = ( payload ) => request( 'ai_get_custom_code', { payload } );

modules/ai/assets/js/editor/components/prompt-error-message.js

@@ -125,7 +125,10 @@ const PromptErrorMessage = ( { error, onRetry = () => {}, actionPosition = 'defa
 };
 
 PromptErrorMessage.propTypes = {
-	error: PropTypes.string,
+	error: PropTypes.oneOfType( [
+		PropTypes.object,
+		PropTypes.string,
+	] ),
 	onRetry: PropTypes.func,
 	actionPosition: PropTypes.oneOf( [ 'default', 'bottom' ] ),
 };

modules/ai/assets/js/editor/context/requests-ids.js

@@ -17,7 +17,7 @@ export const getUniqueId = ( prefix ) => {
 	return prefix + '-' + Math.random().toString( 16 ).substr( 2, 7 );
 };
 
-window.EDITOR_SESSION_ID = window.EDITOR_SESSION_ID || getUniqueId( 'editor-session' );
+window.EDITOR_SESSION_ID = window.EDITOR_SESSION_ID || window.ElementorAiConfig?.client_session_id || getUniqueId( 'editor-session' );
 
 export function generateIds( template ) {
 	template.id = getUniqueId().toString();

modules/ai/assets/js/editor/hooks/use-excerpt-prompt.js

@@ -0,0 +1,8 @@
+import { getExcerpt } from '../api';
+import usePrompt from './use-prompt';
+
+const useExcerptPrompt = ( initialValue ) => {
+	return usePrompt( async ( payload ) => getExcerpt( payload ), initialValue );
+};
+
+export default useExcerptPrompt;

modules/ai/assets/js/editor/hooks/use-user-info.js

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { getUserInformation } from '../api';
+import PropTypes from 'prop-types';
 
-const useUserInfo = () => {
+const useUserInfo = ( immediately = false ) => {
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ isLoading, setIsLoading ] = useState( false );
 	const [ userInfo, setUserInfo ] = useState( {
@@ -21,7 +22,7 @@ const useUserInfo = () => {
 	const fetchData = async () => {
 		setIsLoading( true );
 
-		const userInfoResult = await getUserInformation();
+		const userInfoResult = await getUserInformation( immediately );
 
 		setUserInfo( ( prevState ) => ( { ...prevState, ...userInfoResult } ) );
 
@@ -48,4 +49,8 @@ const useUserInfo = () => {
 	};
 };
 
+useUserInfo.propTypes = {
+	immediately: PropTypes.bool,
+};
+
 export default useUserInfo;

modules/ai/assets/js/editor/page-content.js

@@ -3,7 +3,6 @@ import FormText from './pages/form-text';
 import Connect from './pages/connect';
 import FormCode from './pages/form-code';
 import GetStarted from './pages/get-started';
-import Loader from './components/loader';
 import useUserInfo from './hooks/use-user-info';
 import WizardDialog from './components/wizard-dialog';
 import PromptDialog from './components/prompt-dialog';
@@ -15,6 +14,8 @@ import { PromptHistoryActionProvider } from './components/prompt-history/context
 import { PromptHistoryProvider } from './components/prompt-history/context/prompt-history-context';
 import useUpgradeMessage from './hooks/use-upgrade-message';
 import UsageMessages from './components/usage-messages';
+import { Box, Typography } from '@elementor/ui';
+import Loader from './components/loader';
 
 const PageContent = (
 	{
@@ -36,7 +37,7 @@ const PageContent = (
 		hasSubscription,
 		credits,
 		usagePercentage,
-	} = useUserInfo();
+	} = ( () => additionalOptions?.useCustomInit ?? useUserInfo )()();
 	const { showBadge } = useUpgradeMessage( { usagePercentage, hasSubscription } );
 	const promptDialogStyleProps = {
 		sx: {
@@ -49,6 +50,9 @@ const PageContent = (
 				transition: 'height 300ms ease-in-out',
 				position: 'relative',
 			},
+			'& .MuiBox-root': {
+				boxSizing: 'border-box',
+			},
 		},
 		PaperProps: {
 			sx: {
@@ -74,10 +78,19 @@ const PageContent = (
 
 	if ( isLoading ) {
 		return (
+
 			<PromptDialog onClose={ onClose } { ...promptDialogStyleProps } maxWidth={ 'media' === type ? 'lg' : 'sm' }>
 				<PromptDialog.Header onClose={ onClose } />
-
 				<PromptDialog.Content dividers>
+					{ additionalOptions?.loadingTitle && ( <Box
+						style={ {
+							display: 'flex',
+							justifyContent: 'center',
+							alignItems: 'center',
+							width: '100%', // Ensure the box takes the full width
+						} }>
+						<Typography variant="body1" color="secondary">{ additionalOptions?.loadingTitle }</Typography>
+					</Box> ) }
 					<Loader />
 				</PromptDialog.Content>
 			</PromptDialog>
@@ -205,7 +218,7 @@ PageContent.propTypes = {
 	type: PropTypes.string,
 	controlType: PropTypes.string,
 	onClose: PropTypes.func.isRequired,
-	onConnect: PropTypes.func.isRequired,
+	onConnect: PropTypes.func,
 	getControlValue: PropTypes.func.isRequired,
 	setControlValue: PropTypes.func.isRequired,
 	additionalOptions: PropTypes.object,

modules/ai/assets/js/editor/pages/form-media/utils/index.js

@@ -21,3 +21,21 @@ export const getAspectRatioSizes = ( width, height ) => {
 		...IMAGE_ASPECT_RATIO[ closestRatio ],
 	};
 };
+
+export const fetchImageAsBase64 = async ( url ) => {
+	try {
+		const response = await fetch( url );
+		const blob = await response.blob();
+		const reader = new FileReader();
+
+		return new Promise( ( resolve, reject ) => {
+			reader.onloadend = () => {
+				resolve( reader.result );
+			};
+			reader.onerror = reject;
+			reader.readAsDataURL( blob );
+		} );
+	} catch ( error ) {
+		throw error;
+	}
+};

modules/ai/assets/js/editor/pages/form-media/views/in-painting/index.js

@@ -14,6 +14,7 @@ import useInPainting from './hooks/use-in-painting';
 import { useEditImage } from '../../context/edit-image-context';
 import useImageActions from '../../hooks/use-image-actions';
 import { useRequestIds } from '../../../../context/requests-ids';
+import { fetchImageAsBase64 } from '../../utils';
 
 const InPainting = () => {
 	const [ prompt, setPrompt ] = useState( '' );
@@ -30,13 +31,14 @@ const InPainting = () => {
 
 	const isLoading = isGenerating || isUploading;
 
-	const handleSubmit = ( event ) => {
+	const handleSubmit = async ( event ) => {
 		event.preventDefault();
 
 		// The fallback instruction should be hidden for the user.
 		const finalPrompt = prompt || 'Remove object and fill based on the surroundings';
 		setGenerate();
-		send( { prompt: finalPrompt, settings, image: editImage, mask } );
+		const imageBase64 = await fetchImageAsBase64( editImage.url );
+		send( { prompt: finalPrompt, settings, image: editImage, mask, image_base64: imageBase64 } );
 	};
 
 	return (

modules/ai/assets/js/editor/pages/form-media/views/out-painting/index.js

@@ -13,6 +13,7 @@ import useImageActions from '../../hooks/use-image-actions';
 import usePromptSettings, { IMAGE_RATIO, IMAGE_ZOOM } from '../../hooks/use-prompt-settings';
 import useOutPainting from './hooks/use-out-painting';
 import { useRequestIds } from '../../../../context/requests-ids';
+import { fetchImageAsBase64 } from '../../utils';
 
 const OutPainting = () => {
 	const [ imageSize, setImageSize ] = useState( { width: 0, height: 0 } );
@@ -28,10 +29,11 @@ const OutPainting = () => {
 	const generatedAspectRatio = useMemo( () => settings[ IMAGE_RATIO ], [ data?.result ] );
 	const hasGeneratedResult = !! data?.result;
 
-	const handleSubmit = ( event ) => {
+	const handleSubmit = async ( event ) => {
 		event.preventDefault();
 		setGenerate();
-		send( { settings, image: editImage, mask, size: imageSize, position } );
+		const imageBase64 = await fetchImageAsBase64( editImage.url );
+		send( { settings, image: editImage, mask, size: imageSize, position, image_base64: imageBase64 } );
 	};
 
 	return (

modules/ai/assets/js/editor/pages/form-text/index.js

@@ -1,8 +1,8 @@
-import { useState, useRef } from 'react';
+import { useRef, useState } from 'react';
 import { Box, Button, Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import { AIIcon, MessageIcon, ShrinkIcon, ExpandIcon } from '@elementor/icons';
+import { AIIcon, ExpandIcon, MessageIcon, ShrinkIcon } from '@elementor/icons';
 import Loader from '../../components/loader';
 import PromptSearch from '../../components/prompt-search';
 import Textarea from '../../components/textarea';
@@ -13,7 +13,7 @@ import GenerateButton from '../../components/generate-button';
 import PromptAction from '../../components/prompt-action';
 import PromptErrorMessage from '../../components/prompt-error-message';
 import useTextPrompt from '../../hooks/use-text-prompt';
-import { textAutocomplete, textareaAutocomplete, vocalTones, translateLanguages } from '../../actions-data';
+import { textareaAutocomplete, textAutocomplete, translateLanguages, vocalTones } from '../../actions-data';
 import {
 	ACTION_TYPES,
 	useSubscribeOnPromptHistoryAction,
@@ -64,10 +64,12 @@ const FormText = (
 ) => {
 	const initialValue = getControlValue() === additionalOptions?.defaultValue ? '' : getControlValue();
 
-	const { data, isLoading, error, setResult, reset, send, sendUsageData } = useTextPrompt( {
-		result: initialValue,
-		credits,
+	const { data, isLoading, error: txtGenErr, setResult, reset, send, sendUsageData } = useTextPrompt( {
+		result: initialValue?.result ?? initialValue,
+		credits: initialValue?.credits ?? credits,
+		responseId: initialValue?.responseId,
 	} );
+	const error = txtGenErr || additionalOptions?.initError;
 
 	const [ prompt, setPrompt ] = useState( '' );
 	const { setGenerate } = useRequestIds();
@@ -92,8 +94,7 @@ const FormText = (
 
 	const resultField = useRef( null );
 
-	const lastRun = useRef( () => {
-	} );
+	const lastRun = useRef( additionalOptions.initRetry ?? ( () => {} ) );
 
 	const autocompleteItems = 'textarea' === type ? textareaAutocomplete : textAutocomplete;