@automattic/jetpack-ai-client 0.14.2 → 0.14.3

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.14.3] - 2024-06-10
+### Changed
+- AI Featured Image: export generic image generation request function. [#37668]
+- Change codebase to use clsx instead of classnames. [#37708]
+- Updated package dependencies. [#37669]
+
 ## [0.14.2] - 2024-06-03
 ### Added
 - AI Client: Add list-related fixes on MarkdownToHTML conversion. [#37564]
@@ -333,6 +339,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.14.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.2...v0.14.3
 [0.14.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.1...v0.14.2
 [0.14.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.0...v0.14.1
 [0.14.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.13.1...v0.14.0

package/build/components/ai-control/ai-control.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -16,7 +16,7 @@ import './style.scss';
  * @returns {ReactElement}       Rendered component
  */
 export default function AIControl({ className, disabled = false, value = '', placeholder = '', isTransparent = false, state = 'init', onChange, banner = null, error = null, actions = null, message = null, promptUserInputRef = null, wrapperRef = null, }) {
-    return (_jsxs("div", { className: classNames('jetpack-components-ai-control__container-wrapper', className), ref: wrapperRef, children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: classNames('jetpack-components-ai-control__wrapper', {
+    return (_jsxs("div", { className: clsx('jetpack-components-ai-control__container-wrapper', className), ref: wrapperRef, children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: clsx('jetpack-components-ai-control__wrapper', {
                             'is-transparent': isTransparent,
                         }), children: [_jsx(AiStatusIndicator, { state: state }), _jsx("div", { className: "jetpack-components-ai-control__input-wrapper", children: _jsx(PlainText, { value: value, onChange: onChange, placeholder: placeholder, className: "jetpack-components-ai-control__input", disabled: disabled, ref: promptUserInputRef }) }), actions] }), message] })] }));
 }

package/build/components/ai-status-indicator/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * External dependencies
  */
 import { Spinner } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import './style.scss';
 /**
  * AiStatusIndicator component.
@@ -12,7 +12,7 @@ import './style.scss';
  * @returns {React.ReactElement} - rendered component.
  */
 export default function AiStatusIndicator({ state }) {
-    return (_jsx("div", { className: classNames('jetpack-ai-status-indicator__icon-wrapper', {
+    return (_jsx("div", { className: clsx('jetpack-ai-status-indicator__icon-wrapper', {
             [`is-${state}`]: true,
         }), children: _jsx(Spinner, {}) }));
 }

package/build/components/message/index.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExternalLink, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -35,7 +35,7 @@ const messageIconsMap = {
  * @returns {React.ReactElement }    Banner component.
  */
 export default function Message({ severity = MESSAGE_SEVERITY_INFO, icon = null, showSidebarIcon = false, onSidebarIconClick = () => { }, children, }) {
-    return (_jsxs("div", { className: classNames('jetpack-ai-assistant__message', `jetpack-ai-assistant__message-severity-${severity}`), children: [(messageIconsMap[severity] || icon) && (_jsx(Icon, { icon: messageIconsMap[severity] || icon })), _jsx("div", { className: "jetpack-ai-assistant__message-content", children: children }), showSidebarIcon && (_jsx(Button, { className: "jetpack-ai-assistant__message-sidebar", onClick: onSidebarIconClick, children: _jsx(Icon, { size: 20, icon: arrowRight }) }))] }));
+    return (_jsxs("div", { className: clsx('jetpack-ai-assistant__message', `jetpack-ai-assistant__message-severity-${severity}`), children: [(messageIconsMap[severity] || icon) && (_jsx(Icon, { icon: messageIconsMap[severity] || icon })), _jsx("div", { className: "jetpack-ai-assistant__message-content", children: children }), showSidebarIcon && (_jsx(Button, { className: "jetpack-ai-assistant__message-sidebar", onClick: onSidebarIconClick, children: _jsx(Icon, { size: 20, icon: arrowRight }) }))] }));
 }
 /**
  * React component to render a guideline message.

package/build/hooks/use-image-generator/index.d.ts

@@ -18,5 +18,6 @@ declare const useImageGenerator: () => {
         postContent: string;
         userPrompt?: string;
     }) => Promise<ImageGenerationResponse>;
+    generateImageWithParameters: (parameters: object) => Promise<ImageGenerationResponse>;
 };
 export default useImageGenerator;

package/build/hooks/use-image-generator/index.js

@@ -199,6 +199,7 @@ const useImageGenerator = () => {
     return {
         generateImage,
         generateImageWithStableDiffusion,
+        generateImageWithParameters: executeImageGeneration,
     };
 };
 export default useImageGenerator;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.14.2",
+	"version": "0.14.3",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -42,20 +42,20 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.25",
-		"@automattic/jetpack-connection": "^0.33.12",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.13",
+		"@automattic/jetpack-base-styles": "^0.6.26",
+		"@automattic/jetpack-connection": "^0.33.14",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.14",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.1",
-		"@wordpress/api-fetch": "6.54.0",
-		"@wordpress/block-editor": "12.25.0",
-		"@wordpress/components": "27.5.0",
-		"@wordpress/compose": "6.34.0",
-		"@wordpress/data": "9.27.0",
-		"@wordpress/element": "5.34.0",
-		"@wordpress/i18n": "4.57.0",
-		"@wordpress/icons": "9.48.0",
-		"classnames": "2.3.2",
+		"@wordpress/api-fetch": "7.0.0",
+		"@wordpress/block-editor": "13.0.0",
+		"@wordpress/components": "28.0.0",
+		"@wordpress/compose": "7.0.0",
+		"@wordpress/data": "10.0.0",
+		"@wordpress/element": "6.0.0",
+		"@wordpress/i18n": "5.0.0",
+		"@wordpress/icons": "10.0.0",
+		"clsx": "2.1.1",
 		"debug": "4.3.4",
 		"markdown-it": "14.0.0",
 		"react": "18.3.1",

package/src/components/ai-control/ai-control.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { PlainText } from '@wordpress/block-editor';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 /**
  * Internal dependencies
@@ -54,14 +54,14 @@ export default function AIControl( {
 }: AIControlProps ): ReactElement {
 	return (
 		<div
-			className={ classNames( 'jetpack-components-ai-control__container-wrapper', className ) }
+			className={ clsx( 'jetpack-components-ai-control__container-wrapper', className ) }
 			ref={ wrapperRef }
 		>
 			{ error }
 			<div className="jetpack-components-ai-control__container">
 				{ banner }
 				<div
-					className={ classNames( 'jetpack-components-ai-control__wrapper', {
+					className={ clsx( 'jetpack-components-ai-control__wrapper', {
 						'is-transparent': isTransparent,
 					} ) }
 				>

package/src/components/ai-status-indicator/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Spinner } from '@wordpress/components';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /*
  * Types
  */
@@ -26,7 +26,7 @@ export type AiStatusIndicatorProps = {
 export default function AiStatusIndicator( { state }: AiStatusIndicatorProps ): React.ReactElement {
 	return (
 		<div
-			className={ classNames( 'jetpack-ai-status-indicator__icon-wrapper', {
+			className={ clsx( 'jetpack-ai-status-indicator__icon-wrapper', {
 				[ `is-${ state }` ]: true,
 			} ) }
 		>

package/src/components/message/index.tsx

@@ -4,7 +4,7 @@
 import { ExternalLink, Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, arrowRight } from '@wordpress/icons';
-import classNames from 'classnames';
+import clsx from 'clsx';
 /**
  * Internal dependencies
  */
@@ -78,7 +78,7 @@ export default function Message( {
 }: MessageProps ): React.ReactElement {
 	return (
 		<div
-			className={ classNames(
+			className={ clsx(
 				'jetpack-ai-assistant__message',
 				`jetpack-ai-assistant__message-severity-${ severity }`
 			) }

package/src/hooks/use-image-generator/index.ts

@@ -154,9 +154,9 @@ const getStableDiffusionImageGenerationPrompt = async (
 };
 
 const useImageGenerator = () => {
-	const executeImageGeneration = async function ( parameters: {
-		[ key: string ]: string;
-	} ): Promise< ImageGenerationResponse > {
+	const executeImageGeneration = async function (
+		parameters: object
+	): Promise< ImageGenerationResponse > {
 		let token = '';
 
 		try {
@@ -259,6 +259,7 @@ const useImageGenerator = () => {
 	return {
 		generateImage,
 		generateImageWithStableDiffusion,
+		generateImageWithParameters: executeImageGeneration,
 	};
 };