add lang support

includes/class-kadence-blocks-prebuilt-library-rest-api.php

@@ -1473,6 +1473,7 @@ public function get_new_remote_contents( $context ) {
 		$body['mission'] = ! empty( $prophecy_data['missionStatement'] ) ? $prophecy_data['missionStatement'] : '';
 		$body['tone'] = ! empty( $prophecy_data['tone'] ) ? $prophecy_data['tone'] : '';
 		$body['keywords'] = ! empty( $prophecy_data['keywords'] ) ? $prophecy_data['keywords'] : '';
+		$body['lang'] = ! empty( $prophecy_data['lang'] ) ? $prophecy_data['lang'] : '';
 		switch ( $context ) {
 			case 'about':
 				$body['prompts'] = array(
@@ -2092,6 +2093,7 @@ public function get_keyword_suggestions( WP_REST_Request $request ) {
 			'industry' => $parameters['industry'],
 			'location' => $parameters['location'],
 			'description' => $parameters['description'],
+			'lang' => ! empty( $parameters['lang'] ) ? $parameters['lang'] : '',
 			'count' => $parameters['count'],
 		);
 		$response = wp_remote_post(

src/plugins/prebuilt-library/ai-wizard/components/advanced-select/index.js

@@ -42,7 +42,7 @@ export const AdvancedSelect = forwardRef(function AdvancedSelect( props, ref ) {
 
 	function handleOutsideClick(event) {
 		event.stopPropagation();
-		if (parentRef && !parentRef.current.contains(event.target)) {
+		if (parentRef?.current && event?.target && !parentRef.current.contains(event.target)) {
 			shouldClose();
 		}
 	}

src/plugins/prebuilt-library/ai-wizard/components/photo-collection/index.js

@@ -145,7 +145,7 @@ const styles = {
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
-export function PhotoCollection({ photos, loading, collectionLink, title, description, updateCollection }) {
+export function PhotoCollection({ photos, loading, isLocal, collectionLink, title, description, updateCollection }) {
 	const photoGallery = usePhotos(photos);
     const [isDownloading, setIsDownloading] = useState( false );
     const [downloadedIDs, setDownloadedIDs] = useState( [] );
@@ -169,7 +169,7 @@ export function PhotoCollection({ photos, loading, collectionLink, title, descri
 			alt: photo.alt || photo.name,
 			url: photo?.sizes?.large?.url || photo?.sizes?.full?.url,
 			sizes: [
-				{ name: 'thumbnail', src: photo?.sizes?.thumbnail?.url }
+				{ name: 'thumbnail', src: photo?.sizes?.thumbnail?.url || photo?.sizes?.large?.url || photo?.sizes?.full?.url }
 			]
 		}));
 		updateCollection(formattedPhotos);
@@ -193,7 +193,7 @@ export function PhotoCollection({ photos, loading, collectionLink, title, descri
 	}
 	function handleDownload( open ) {
 		if ( ! isDownloading ) {
-			if ( photos?.length > 0 ) {
+			if ( ! isLocal && photos?.length > 0 ) {
 				downloadToMediaLibrary( open );
 			} else {
 				open();
@@ -220,7 +220,7 @@ export function PhotoCollection({ photos, loading, collectionLink, title, descri
 								</FlexBlock>
 								{
 									image?.sizes ? (
-										<img style={ styles.img } alt={ image.alt } src={ image.sizes[0].src } />
+										<img style={ styles.img } alt={ image.alt } src={ ( image?.sizes?.[0]?.src ? image.sizes[0].src : image?.url ) } />
 									) : (
 										<FlexBlock style={{ ...styles.square, ...styles.placeholder }} key={image.alt} />
 									)

src/plugins/prebuilt-library/ai-wizard/constants/index.js

@@ -111,6 +111,104 @@ export const ENTITY_TYPE = [
 		label: __("An Organization", "kadence-blocks"),
 	},
 ];
+export const LANG_TYPE = [
+	{
+		value: 'da-DK',
+		label: __("Danish (Denmark)", "kadence-starter-templates"),
+	},
+	{
+		value: 'nl-BE',
+		label: __("Dutch (Belgium)", "kadence-starter-templates"),
+	},
+	{
+		value: 'nl-N',
+		label: __("Dutch (Netherlands)", "kadence-starter-templates"),
+	},
+	{
+		value: 'en-AU',
+		label: __("English (Australia)", "kadence-starter-templates"),
+	},
+	{
+		value: 'en-CA',
+		label: __("English (Canada)", "kadence-starter-templates"),
+	},
+	{
+		value: 'en-IN',
+		label: __("English (India)", "kadence-starter-templates"),
+	},
+	{
+		value: 'en-NZ',
+		label: __("English (New Zealand)", "kadence-starter-templates"),
+	},
+	{
+		value: 'en-GB',
+		label: __("English (UK)", "kadence-starter-templates"),
+	},
+	{
+		value: 'en-US',
+		label: __("English (US)", "kadence-starter-templates"),
+	},
+	{
+		value: 'fr-BE',
+		label: __("French (Belgium)", "kadence-starter-templates"),
+	},
+	{
+		value: 'fr-CA',
+		label: __("French (Canada)", "kadence-starter-templates"),
+	},
+	{
+		value: 'fr-FR',
+		label: __("French (France)", "kadence-starter-templates"),
+	},
+	{
+		value: 'de-AT',
+		label: __("German (Austria)", "kadence-starter-templates"),
+	},
+	{
+		value: 'de-BE',
+		label: __("German (Belgium)", "kadence-starter-templates"),
+	},
+	{
+		value: 'de-DE',
+		label: __("German (Germany)", "kadence-starter-templates"),
+	},
+	{
+		value: 'de-CH',
+		label: __("German (Switzerland)", "kadence-starter-templates"),
+	},
+	{
+		value: 'it-IT',
+		label: __("Italian (Italy)", "kadence-starter-templates"),
+	},
+	{
+		value: 'pt-BR',
+		label: __("Portuguese (Brazil)", "kadence-starter-templates"),
+	},
+	{
+		value: 'pt-PT',
+		label: __("Portuguese (Portugal)", "kadence-starter-templates"),
+	},
+	{
+		value: 'es-AR',
+		label: __("Spanish (Argentina)", "kadence-starter-templates"),
+	},
+	{
+		value: 'es-CO',
+		label: __("Spanish (Colombia)", "kadence-starter-templates"),
+	},
+	{
+		value: 'es-419',
+		label: __("Spanish (Latin America)", "kadence-starter-templates"),
+	},
+	{
+		value: 'es-MX',
+		label: __("Spanish (Mexico)", "kadence-starter-templates"),
+	},
+	{
+		value: 'es-ES',
+		label: __("Spanish (Spain)", "kadence-starter-templates"),
+	},
+];
 
 export const ENTITY_TO_NAME = {
 	COMPANY: {

src/plugins/prebuilt-library/ai-wizard/context/kadence-ai-provider.js

@@ -35,6 +35,7 @@ const initialState = {
 	suggestedKeywords: [],
 	suggestedKeywordsState: "",
 	imageSearchQuery: "",
+	lang: "",
 };
 
 const KadenceAiContext = createContext();
@@ -51,6 +52,11 @@ function kadenceAiReducer(state, action) {
 				...state,
 				companyName: action.payload,
 			};
+		case "SET_LANG":
+			return {
+				...state,
+				lang: action.payload,
+			};
 		case "SET_ENTITY_TYPE":
 			return {
 				...state,

src/plugins/prebuilt-library/ai-wizard/pages/about-your-site.js

@@ -14,7 +14,7 @@ import { __, sprintf } from "@wordpress/i18n";
 import { Button } from "../components";
 import { missionStatementHelper } from "../utils/mission-statement-helper";
 import { convertStreamDataToJson } from "../utils/convert-stream-data-to-json";
-import { THOUGHT_STARTERS } from "../constants";
+import { LANG_TYPE, THOUGHT_STARTERS } from "../constants";
 import { Ai, Visibility, VisibilityOff } from "../components/icons";
 
 /**
@@ -101,11 +101,16 @@ export function AboutYourSite() {
 	const [aiLoading, setAiLoading] = useState(false);
 	const [ error, setError] = useState('');
 	const { state, dispatch } = useKadenceAi();
-	const { missionStatement, entityType, companyName } = state;
+	const { missionStatement, entityType, lang, companyName } = state;
 	const title = sprintf(
 		__("Tell us about your%s", "kadence-blocks"),
 		titlePartial[entityType]
 	);
+	const langObject = LANG_TYPE.filter((option) => option.value === ( lang ? lang : 'en-US' ));
+	const language = sprintf(
+		__("This should be written in %s.", "kadence-blocks"),
+		langObject?.[0]?.label ? langObject[0].label : 'your site language'
+	);
 	const { getMissionStatement } = missionStatementHelper();
 
 	useEffect(() => {
@@ -150,7 +155,7 @@ export function AboutYourSite() {
 		setAiLoading(true);
 		setError( '' );
 
-		getMissionStatement(value)
+		getMissionStatement(value, lang)
 			.then((readableStream) => {
 				const reader = readableStream.getReader();
 
@@ -188,7 +193,7 @@ export function AboutYourSite() {
 			<FlexBlock style={{ alignSelf: "center" }}>
 				<Flex justify="center" style={styles.leftContent}>
 					<FlexBlock style={styles.formWrapper} className={"stellarwp-body"}>
-						<FormSection headline={title} content={content}>
+						<FormSection headline={title} content={ lang && lang !== 'en-US' ? language + ' ' + content : content }>
 							<View style={styles.textareaWrapper}>
 								<TextareaProgress
 									hideLabelFromVision

src/plugins/prebuilt-library/ai-wizard/pages/industry-information.js

@@ -23,6 +23,7 @@ import {
 import { useKadenceAi } from '../context/kadence-ai-provider';
 import {
 	ENTITY_TYPE,
+	LANG_TYPE,
 	ENTITY_TO_NAME,
 	LOCATION_TYPES,
 	LOCATION_BUSINESS_ADDRESS,
@@ -70,9 +71,10 @@ const content = __(
 
 export function IndustryInformation() {
 	const [ currentEntityType, setCurrentEntityType ] = useState( null );
+	const [ currentLanguageType, setCurrentLanguageType ] = useState( '' );
 	const [ backgroundImage, setBackgroundImage ] = useState( 0 );
 	const { state, dispatch } = useKadenceAi();
-	const { companyName, entityType, locationInput, locationType, industry } =
+	const { companyName, entityType, locationInput, lang, locationType, industry } =
 		state;
 
 	useEffect(() => {
@@ -81,7 +83,17 @@ export function IndustryInformation() {
 			setCurrentEntityType(entityObject[0]);
 		}
 	}, [entityType]);
-
+	useEffect(() => {
+		const langObject = LANG_TYPE.filter((option) => option.value === lang);
+		if (langObject.length) {
+			setCurrentLanguageType(langObject[0]);
+		} else {
+			const english = LANG_TYPE.filter((option) => option.value === 'en-US' );
+			if (english.length) {
+				setCurrentLanguageType(english[0]);
+			}
+		}
+	}, [lang]);
 	useEffect(() => {
 		switch (locationType) {
 			case LOCATION_BUSINESS_ADDRESS:
@@ -105,7 +117,9 @@ export function IndustryInformation() {
 		}
 		dispatch({ type: 'SET_INDUSTRY', payload: industry });
 	}
-
+	function handleLangChange(langType) {
+		dispatch({ type: "SET_LANG", payload: langType.value });
+	}
 	function handleEntityTypeChange(entityType) {
 		dispatch({ type: "SET_ENTITY_TYPE", payload: entityType.value });
 	}
@@ -163,6 +177,19 @@ export function IndustryInformation() {
 					style={ styles.leftContent }
 				>
 					<FlexBlock style={ styles.formWrapper } className={ 'stellarwp-body' }>
+						<FormSection
+							headline={ <span className="has-beta-pill">{__("Your Sites's Language", "kadence-blocks")} <span className="beta-pill">Beta</span></span> }
+							content={ __("Select your preferred language for AI-generated content on your site. Note: AI content quality varies by language due to available training data; English is best supported.", "kadence-blocks") }
+						>
+							<VStack spacing={ 4 } style={{ margin: '0 auto 30px' }}>
+						 		<SelectControl
+									label={ '' }
+									value={ currentLanguageType }
+									onChange={ handleLangChange }
+									options={ LANG_TYPE }
+								/>
+							</VStack>
+						</FormSection>
 						<FormSection
 							headline={ headline }
 							content={ content }

src/plugins/prebuilt-library/ai-wizard/pages/the-details.js

@@ -74,6 +74,7 @@ export function TheDetails() {
 		suggestedKeywords,
 		suggestedKeywordsState,
 		tone,
+		lang,
 		imageSearchQuery,
 	} = state;
 	const [keywordsLengthError, setKeywordsLengthError] = useState(null);
@@ -147,6 +148,7 @@ export function TheDetails() {
 			entity_type: entityType,
 			industry,
 			location,
+			lang,
 			description: missionStatement,
 		})
 			.then((response) => {

src/plugins/prebuilt-library/ai-wizard/scss/global.scss

@@ -22,3 +22,16 @@ h1, h2, h3, h4, h5, h6, p, ul, ol {
 	margin-bottom: 24px;
 }
 
+.has-beta-pill {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+	.beta-pill {
+		padding: 4px 8px 4px 8px;
+		border-radius: 100px;
+		background: #0073E6;
+		font-size:11px;
+		font-weight:normal;
+		color: white;
+	}
+}

src/plugins/prebuilt-library/ai-wizard/utils/keywords-helper.js

@@ -14,6 +14,7 @@ export function keywordsHelper() {
 		entity_type,
 		industry,
 		location,
+		lang,
 		description,
 	}) {
 		try {
@@ -26,6 +27,7 @@ export function keywordsHelper() {
 					industry,
 					location,
 					description,
+					lang: lang ? lang : "en-US",
 					count: 10,
 				},
 			});

src/plugins/prebuilt-library/ai-wizard/utils/mission-statement-helper.js

@@ -1,7 +1,7 @@
 import { API_URL } from "../constants";
 
 export function missionStatementHelper() {
-	async function getMissionStatement(missionStatement) {
+	async function getMissionStatement(missionStatement, lang) {
 		try {
 			// Get site domain from the url.
 			const url = new URL(window.location.href);
@@ -39,6 +39,7 @@ export function missionStatementHelper() {
 					},
 					body: JSON.stringify({
 						text: missionStatement,
+						lang: lang ? lang : "en-US",
 						stream: true,
 					}),
 				}