@elementor/editor-app-bar 4.3.0-beta2 → 4.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-app-bar",
   "description": "App Bar extension for @elementor/editor",
-  "version": "4.3.0-beta2",
+  "version": "4.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,18 +40,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-beta2",
-    "@elementor/editor-ui": "4.3.0-beta2",
-    "@elementor/http-client": "4.3.0-beta2",
-    "@elementor/editor": "4.3.0-beta2",
-    "@elementor/editor-documents": "4.3.0-beta2",
-    "@elementor/editor-mcp": "4.3.0-beta2",
-    "@elementor/editor-responsive": "4.3.0-beta2",
-    "@elementor/editor-v1-adapters": "4.3.0-beta2",
+    "@elementor/editor-current-user": "4.3.0",
+    "@elementor/editor-ui": "4.3.0",
+    "@elementor/http-client": "4.3.0",
+    "@elementor/editor": "4.3.0",
+    "@elementor/editor-documents": "4.3.0",
+    "@elementor/editor-mcp": "4.3.0",
+    "@elementor/editor-responsive": "4.3.0",
+    "@elementor/editor-v1-adapters": "4.3.0",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-beta2",
-    "@elementor/menus": "4.3.0-beta2",
-    "@elementor/events": "4.3.0-beta2",
+    "@elementor/locations": "4.3.0",
+    "@elementor/menus": "4.3.0",
+    "@elementor/events": "4.3.0",
     "@elementor/ui": "1.37.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/extensions/angie/angie-consts.ts

@@ -16,5 +16,8 @@ export const ANGIE_DESCRIPTION = __(
 
 export const AI_WIDGET_CTA_VIEWED_EVENT = 'ai_widget_cta_viewed' as const;
 export const ANGIE_TOP_BAR_PROMOTION_IMAGE_URL =
-	'https://assets.elementor.com/packages/v1/images/angie-top-bar-promotion.svg';
-export const ANGIE_TOP_BAR_DESCRIPTION = __( 'Build custom widgets using simple instructions.', 'elementor' );
+	'https://assets.elementor.com/packages/v1/images/angie-top-bar-promotion-0926.svg';
+export const ANGIE_TOP_BAR_DESCRIPTION = __(
+	'Describe what you want to build in plain language and Angie generates it in native Elementor structure, fully editable and customizable.',
+	'elementor'
+);

package/src/extensions/angie/components/angie-guide-card.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, Chip, ClickAwayListener, CloseButton, Image, Stack, Typography } from '@elementor/ui';
+import { Box, Button, ClickAwayListener, CloseButton, Image, Stack, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 type Props = {
@@ -14,23 +14,44 @@ export function AngieGuideCard( { imageUrl, description, learnMoreUrl, onInstall
 	return (
 		<ClickAwayListener onClickAway={ onClose }>
 			<Stack sx={ { width: 296 } } data-testid="e-angie-guide-card">
-				<Stack direction="row" alignItems="center" gap={ 1 } py={ 1 } px={ 2 }>
-					<Typography variant="subtitle2">{ __( 'Meet Angie', 'elementor' ) }</Typography>
-					<Chip label={ __( 'New', 'elementor' ) } size="small" color="info" variant="standard" />
+				<Box sx={ { position: 'relative', p: 1.5 } }>
+					<Image
+						src={ imageUrl }
+						alt={ __( 'Angie', 'elementor' ) }
+						sx={ {
+							width: '100%',
+							maxHeight: 200,
+							objectFit: 'cover',
+							objectPosition: 'center top',
+							borderRadius: 1,
+							display: 'block',
+						} }
+					/>
 					<CloseButton
-						edge="end"
-						sx={ { ml: 'auto' } }
+						sx={ {
+							position: 'absolute',
+							top: 15,
+							insetInlineEnd: 15,
+							color: 'common.white',
+							filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.6))',
+							'&:hover': {
+								bgcolor: 'rgba(255,255,255,0.2)',
+								color: 'common.white',
+							},
+						} }
 						slotProps={ { icon: { fontSize: 'small' } } }
 						onClick={ onClose }
 					/>
+				</Box>
+				<Stack px={ 2 } pt={ 0.5 } pb={ 0.5 }>
+					<Typography variant="subtitle2">{ __( 'Generate full pages with AI', 'elementor' ) }</Typography>
 				</Stack>
-				<Image src={ imageUrl } alt={ __( 'Angie', 'elementor' ) } sx={ { height: 150, width: '100%' } } />
-				<Stack px={ 2 } pt={ 1.5 } pb={ 1 }>
+				<Stack px={ 2 } pt={ 0.5 } pb={ 1.5 }>
 					<Typography variant="body2" color="secondary">
 						{ description }
 					</Typography>
 				</Stack>
-				<Stack direction="row" justifyContent="flex-end" gap={ 1 } pt={ 1 } pb={ 1.5 } px={ 2 }>
+				<Stack direction="row" justifyContent="flex-end" gap={ 1 } pb={ 1.5 } px={ 2 }>
 					<Button
 						variant="text"
 						size="small"
@@ -43,8 +64,8 @@ export function AngieGuideCard( { imageUrl, description, learnMoreUrl, onInstall
 						{ __( 'Learn More', 'elementor' ) }
 					</Button>
 					{ onInstall && (
-						<Button variant="contained" size="small" color="accent" onClick={ onInstall }>
-							{ __( 'Try for free', 'elementor' ) }
+						<Button variant="contained" size="small" color="primary" onClick={ onInstall }>
+							{ __( 'Build with Angie', 'elementor' ) }
 						</Button>
 					) }
 				</Stack>

package/src/extensions/angie/hooks/use-auto-show.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { ANGIE_GUIDE_TOGGLE_EVENT } from '../angie-consts';
+import { CREATE_WIDGET_EVENT } from '../angie-consts';
 
 export function useAutoShow() {
 	useEffect( () => {
@@ -9,7 +9,11 @@ export function useAutoShow() {
 		}
 
 		const id = setTimeout( () => {
-			window.dispatchEvent( new CustomEvent( ANGIE_GUIDE_TOGGLE_EVENT ) );
+			window.dispatchEvent(
+				new CustomEvent( CREATE_WIDGET_EVENT, {
+					detail: { entry_point: 'auto_show' },
+				} )
+			);
 		}, 0 );
 
 		return () => clearTimeout( id );