Merge remote-tracking branch 'origin/trunk' into update/php-requirements

projects/js-packages/ai-client/.gitattributes

@@ -2,6 +2,10 @@
 .gitattributes    export-ignore
 node_modules      export-ignore
 
+# Files to include in the mirror repo, but excluded via gitignore
+# Remember to end all directories with `/**` to properly tag every file.
+/build/**         production-include
+
 # Files to exclude from the mirror repo
 /changelog/**     production-exclude
 /.eslintrc.cjs    production-exclude

projects/js-packages/ai-client/.gitignore

@@ -1,2 +1,3 @@
 vendor/
 node_modules/
+build/

projects/js-packages/ai-client/changelog/update-ai-client-expose-compiles-files

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+AI Client: include built JavaScript code in addition to TypeScript.

projects/js-packages/ai-client/composer.json

@@ -14,6 +14,16 @@
 		]
 	},
 	"scripts": {
+		"build-development": [
+			"pnpm run build"
+		],
+		"build-production": [
+			"NODE_ENV=production pnpm run build"
+		],
+		"watch": [
+			"Composer\\Config::disableProcessTimeout",
+			"pnpm run watch"
+		],
 		"test-js": [
 			"pnpm run test"
 		]

projects/js-packages/ai-client/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.1.17-alpha",
+	"version": "0.2.0-alpha",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -15,7 +15,8 @@
 	"license": "GPL-2.0-or-later",
 	"author": "Automattic",
 	"scripts": {
-		"build": "pnpm run compile-ts",
+		"build": "pnpm run clean && pnpm run compile-ts",
+		"clean": "rm -rf build/",
 		"compile-ts": "tsc --pretty",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
 	},
@@ -29,13 +30,20 @@
 		"typescript": "5.0.4"
 	},
 	"exports": {
-		".": "./index.ts"
+		".": {
+			"jetpack:src": "./src/index.ts",
+			"types": "./build/index.d.ts",
+			"default": "./build/index.js"
+		}
 	},
+	"main": "./build/index.js",
+	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "workspace:*",
 		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@microsoft/fetch-event-source": "2.0.1",
+		"@types/react": "18.2.33",
 		"@wordpress/api-fetch": "6.42.0",
 		"@wordpress/block-editor": "12.13.0",
 		"@wordpress/components": "25.11.0",

projects/js-packages/ai-client/src/components/ai-control/index.tsx

@@ -19,30 +19,32 @@ import { GuidelineMessage } from './message';
  * Types
  */
 import type { RequestingStateProp } from '../../types';
+type AIControlProps = {
+	disabled?: boolean;
+	value: string;
+	placeholder?: string;
+	showAccept?: boolean;
+	acceptLabel?: string;
+	showButtonLabels?: boolean;
+	isTransparent?: boolean;
+	state?: RequestingStateProp;
+	showClearButton?: boolean;
+	showGuideLine?: boolean;
+	onChange?: ( newValue: string ) => void;
+	onSend?: ( currentValue: string ) => void;
+	onStop?: () => void;
+	onAccept?: () => void;
+};
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
 /**
  * AI Control component.
  *
- * @param {object} props                   - Component props
- * @param {boolean} props.disabled         - Input disabled state
- * @param {string} props.value             - The input value
- * @param {string} props.placeholder       - The input placeholder
- * @param {boolean} props.showAccept       - Whether to show the accept button
- * @param {string} props.acceptLabel       - The accept button label
- * @param {boolean} props.showButtonLabels - Whether to show the button labels
- * @param {boolean} props.isTransparent    - Whether the component has low opacity
- * @param {string} props.state             - The request state
- * @param {boolean} props.showClearButton  - Whether to show the clear button when the input has a value
- * @param {boolean} props.showGuideLine    - WHether to show the guideline message
- * @param {Function} props.onChange        - Input change handler
- * @param {Function} props.onSend          - Request send handler
- * @param {Function} props.onStop          - Request stop handler
- * @param {Function} props.onAccept        - Response accept handler
- * @param {object} ref                     - Auto injected ref from react
- * @returns {object} - AI Control component
+ * @param {AIControlProps} props       - Component props.
+ * @param {React.MutableRefObject} ref - Ref to the component.
+ * @returns {React.ReactElement}         Rendered component.
  */
 export function AIControl(
 	{
@@ -76,8 +78,8 @@ export function AIControl(
 		onStop?: () => void;
 		onAccept?: () => void;
 	},
-	ref
-) {
+	ref: React.MutableRefObject< null > // eslint-disable-line @typescript-eslint/ban-types
+): React.ReactElement {
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';
 

projects/js-packages/ai-client/src/components/ai-control/stories/index.stories.tsx

@@ -14,7 +14,12 @@ import AIControl from '../index';
  */
 import type { Meta } from '@storybook/react';
 
-export default {
+interface AIControlStoryMeta extends Meta< typeof AIControl > {
+	title?: string;
+	component?: React.ReactElement;
+}
+
+const meta: AIControlStoryMeta = {
 	title: 'JS Packages/AI Client/AI Control',
 	component: AIControl,
 	decorators: [
@@ -65,3 +70,5 @@ const DefaultArgs = {
 
 export const Default = Template.bind( {} );
 Default.args = DefaultArgs;
+
+export default meta;

projects/js-packages/ai-client/src/data-flow/context.tsx

@@ -53,7 +53,7 @@ type AiDataContextProviderProps = {
 	/*
 	 * Children
 	 */
-	children: React.ReactNode;
+	children: React.ReactElement;
 };
 
 /**
@@ -67,7 +67,7 @@ export const AiDataContext = createContext( {} as AiDataContextProps );
  * AI Data Context Provider
  *
  * @param {AiDataContextProviderProps} props - Component props.
- * @returns {React.ReactNode}                           Context provider.
+ * @returns {React.ReactElement}                           Context provider.
  * @example
  * <AiDataContextProvider value={ value }>
  * 	{ children }
@@ -76,6 +76,6 @@ export const AiDataContext = createContext( {} as AiDataContextProps );
 export const AiDataContextProvider = ( {
 	value,
 	children,
-}: AiDataContextProviderProps ): React.ReactNode => (
+}: AiDataContextProviderProps ): React.ReactElement => (
 	<AiDataContext.Provider value={ value } children={ children } />
 );

projects/js-packages/ai-client/src/data-flow/with-ai-assistant-data.tsx

@@ -3,59 +3,62 @@
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
-import React, { ReactNode } from 'react';
+import React from 'react';
 /**
  * Internal Dependencies
  */
-import { useAiSuggestions } from '../../';
+import useAiSuggestions from '../hooks/use-ai-suggestions';
 import { AiDataContextProvider } from '.';
 
 /**
  * High Order Component that provides the
  * AI Assistant Data context to the wrapped component.
  *
- * @param {ReactNode} WrappedComponent - component to wrap.
- * @returns {ReactNode}          		 Wrapped component, with the AI Assistant Data context.
+ * @param {React.ReactElement} WrappedComponent - component to wrap.
+ * @returns {React.ReactElement}          		  Wrapped component, with the AI Assistant Data context.
  */
-const withAiDataProvider = createHigherOrderComponent( ( WrappedComponent: ReactNode ) => {
-	return props => {
-		// Connect with the AI Assistant communication layer.
-		const {
-			suggestion,
-			error: requestingError,
-			requestingState,
-			request: requestSuggestion,
-			stopSuggestion,
-			eventSource,
-		} = useAiSuggestions();
-
-		// Build the context value to pass to the ai assistant data provider.
-		const dataContextValue = useMemo(
-			() => ( {
+const withAiDataProvider = createHigherOrderComponent(
+	( WrappedComponent: React.ComponentType ) => {
+		return props => {
+			// Connect with the AI Assistant communication layer.
+			const {
 				suggestion,
-				requestingError,
+				error: requestingError,
 				requestingState,
-				eventSource,
-
-				requestSuggestion,
+				request: requestSuggestion,
 				stopSuggestion,
-			} ),
-			[
-				suggestion,
-				requestingError,
-				requestingState,
 				eventSource,
-				requestSuggestion,
-				stopSuggestion,
-			]
-		);
+			} = useAiSuggestions();
+
+			// Build the context value to pass to the ai assistant data provider.
+			const dataContextValue = useMemo(
+				() => ( {
+					suggestion,
+					requestingError,
+					requestingState,
+					eventSource,
+
+					requestSuggestion,
+					stopSuggestion,
+				} ),
+				[
+					suggestion,
+					requestingError,
+					requestingState,
+					eventSource,
+					requestSuggestion,
+					stopSuggestion,
+				]
+			);
 
-		return (
-			<AiDataContextProvider value={ dataContextValue }>
-				<WrappedComponent { ...props } />
-			</AiDataContextProvider>
-		);
-	};
-}, 'withAiDataProvider' );
+			return (
+				<AiDataContextProvider value={ dataContextValue }>
+					<WrappedComponent { ...props } />
+				</AiDataContextProvider>
+			);
+		};
+	},
+	'withAiDataProvider'
+);
 
 export default withAiDataProvider;

projects/js-packages/ai-client/src/hooks/use-media-recording/stories/index.stories.tsx

@@ -69,7 +69,12 @@ const RecorderComponent = ( { timeslice } ) => {
 	);
 };
 
-export default {
+interface AIControlStoryMeta extends Meta< typeof RecorderComponent > {
+	title?: string;
+	component?: React.ReactElement;
+}
+
+const meta: AIControlStoryMeta = {
 	title: 'JS Packages/AI Client/useMediaRecording',
 	component: RecorderComponent,
 	argTypes: {
@@ -89,3 +94,5 @@ const DefaultArgs = {
 
 export const Default = Template.bind( {} );
 Default.args = DefaultArgs;
+
+export default meta;

projects/js-packages/ai-client/src/icons/stories/index.stories.tsx

@@ -13,7 +13,12 @@ import styles from './style.module.scss';
  */
 import type { Meta } from '@storybook/react';
 
-export default {
+interface AIControlStoryMeta extends Meta< typeof allIcons > {
+	title?: string;
+	component?: React.ReactElement;
+}
+
+const meta: AIControlStoryMeta = {
 	title: 'JS Packages/AI Client/Icons',
 	component: allIcons,
 	parameters: {},
@@ -44,3 +49,5 @@ const Template = args => <IconsStory { ...args } />;
 const DefaultArgs = {};
 export const Default = Template.bind( {} );
 Default.args = DefaultArgs;
+
+export default meta;