@automattic/jetpack-ai-client 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -5,6 +5,20 @@ 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.1.4] - 2023-08-14
+### Added
+- AI Client: Add border-box in AIControl. [#32419]
+- AI Client: Export AiStatusIndicator. [#32397]
+- AI Client: Import base styles in the AI status indicator component. [#32396]
+- AI Control: Forward ref to consumer. [#32400]
+- AI Control: Import jetpack-base-styles. [#32376]
+
+### Changed
+- AI Client: Expose stopSuggestion function on useAiSuggestions hook so the consumer can stop a suggestion in the middle. [#32382]
+
+### Removed
+- AI Client: Remove redundant switch case [#32405]
+
 ## [0.1.3] - 2023-08-09
 ### Added
 - AI Client: Introduce disabled prop in AI Control. [#32326]
@@ -68,6 +82,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.1.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.3...v0.1.4
 [0.1.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.2...v0.1.3
 [0.1.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.1...v0.1.2
 [0.1.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.0...v0.1.1

package/index.ts

@@ -18,7 +18,7 @@ export * from './src/icons';
 /*
  * Components
  */
-export { default as AIControl } from './src/components/ai-control';
+export * from './src/components';
 
 /*
  * Contexts

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -32,6 +32,7 @@
 		".": "./index.ts"
 	},
 	"dependencies": {
+		"@automattic/jetpack-base-styles": "^0.6.5",
 		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "^0.11.1",
 		"@microsoft/fetch-event-source": "2.0.1",

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

@@ -4,10 +4,11 @@
 import { PlainText } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
-import { useRef } from '@wordpress/element';
+import { forwardRef, useImperativeHandle, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall, check, arrowUp } from '@wordpress/icons';
 import classNames from 'classnames';
+import React from 'react';
 /**
  * Internal dependencies
  */
@@ -38,39 +39,46 @@ const noop = () => {};
  * @param {Function} props.onSend - send request handler
  * @param {Function} props.onStop - stop request handler
  * @param {Function} props.onAccept - accept handler
+ * @param {object} ref - Auto injected ref from react
  * @returns {object} - AI Control component
  */
-export default function AIControl( {
-	disabled = false,
-	value = '',
-	placeholder = '',
-	showAccept = false,
-	acceptLabel = __( 'Accept', 'jetpack-ai-client' ),
-	showButtonsLabel = true,
-	isOpaque = false,
-	state = 'init',
-	onChange = noop,
-	onSend = noop,
-	onStop = noop,
-	onAccept = noop,
-}: {
-	disabled?: boolean;
-	value: string;
-	placeholder?: string;
-	showAccept?: boolean;
-	acceptLabel?: string;
-	showButtonsLabel?: boolean;
-	isOpaque?: boolean;
-	state?: RequestingStateProp;
-	onChange?: ( newValue: string ) => void;
-	onSend?: ( currentValue: string ) => void;
-	onStop?: () => void;
-	onAccept?: () => void;
-} ) {
+export function AIControl(
+	{
+		disabled = false,
+		value = '',
+		placeholder = '',
+		showAccept = false,
+		acceptLabel = __( 'Accept', 'jetpack-ai-client' ),
+		showButtonsLabel = true,
+		isOpaque = false,
+		state = 'init',
+		onChange = noop,
+		onSend = noop,
+		onStop = noop,
+		onAccept = noop,
+	}: {
+		disabled?: boolean;
+		value: string;
+		placeholder?: string;
+		showAccept?: boolean;
+		acceptLabel?: string;
+		showButtonsLabel?: boolean;
+		isOpaque?: boolean;
+		state?: RequestingStateProp;
+		onChange?: ( newValue: string ) => void;
+		onSend?: ( currentValue: string ) => void;
+		onStop?: () => void;
+		onAccept?: () => void;
+	},
+	ref
+) {
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';
 	const showGuideLine = ! ( loading || disabled || value?.length || isOpaque );
 
+	// Pass the ref to forwardRef.
+	useImperativeHandle( ref, () => promptUserInputRef.current );
+
 	useKeyboardShortcut(
 		'mod+enter',
 		() => {
@@ -169,3 +177,5 @@ export default function AIControl( {
 		</div>
 	);
 }
+
+export default forwardRef( AIControl );

package/src/components/ai-control/style.scss

@@ -1,3 +1,5 @@
+@import '@automattic/jetpack-base-styles/root-variables';
+
 // AI CONTROL
 
 .jetpack-components-ai-control__container {
@@ -13,6 +15,7 @@
 	padding: 12px 14px;
 	gap: 8px;
 	align-items: center;
+	box-sizing: border-box;
 
 	&.is-opaque {
 		opacity: 0.4;

package/src/components/ai-status-indicator/style.scss

@@ -1,3 +1,5 @@
+@import '@automattic/jetpack-base-styles/style';
+
 .jetpack-ai-status-indicator__icon-wrapper {
 	color: var( --jp-green-60 );
 	height: 24px;

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as AIControl } from './ai-control';
+export { default as AiStatusIndicator } from './ai-status-indicator';

package/src/data-flow/context.tsx

@@ -33,6 +33,11 @@ export type AiDataContextProps = {
 	 */
 	requestSuggestion: ( prompt: PromptProp, options?: AskQuestionOptionsArgProps ) => void;
 
+	/*
+	 * Stop suggestion function
+	 */
+	stopSuggestion: () => void;
+
 	/*
 	 * The Suggestions Event Source instance
 	 */

package/src/data-flow/with-ai-assistant-data.tsx

@@ -25,6 +25,7 @@ const withAiDataProvider = createHigherOrderComponent( ( WrappedComponent: React
 			error: requestingError,
 			requestingState,
 			request: requestSuggestion,
+			stopSuggestion,
 			eventSource,
 		} = useAiSuggestions();
 
@@ -37,8 +38,16 @@ const withAiDataProvider = createHigherOrderComponent( ( WrappedComponent: React
 				eventSource,
 
 				requestSuggestion,
+				stopSuggestion,
 			} ),
-			[ suggestion, requestingError, requestingState, eventSource, requestSuggestion ]
+			[
+				suggestion,
+				requestingError,
+				requestingState,
+				eventSource,
+				requestSuggestion,
+				stopSuggestion,
+			]
 		);
 
 		return (

package/src/hooks/use-ai-suggestions/index.ts

@@ -97,6 +97,11 @@ type useAiSuggestionsProps = {
 	 * The request handler.
 	 */
 	request: ( prompt: PromptProp, options?: AskQuestionOptionsArgProps ) => Promise< void >;
+
+	/*
+	 * The handler to stop a suggestion.
+	 */
+	stopSuggestion: () => void;
 };
 
 const debug = debugFactory( 'jetpack-ai-client:use-suggestion' );
@@ -140,14 +145,6 @@ export function getErrorData( errorCode: SuggestionErrorCode ): RequestingErrorP
 				severity: 'info',
 			};
 		case ERROR_NETWORK:
-			return {
-				code: ERROR_NETWORK,
-				message: __(
-					'It was not possible to process your request. Mind trying again?',
-					'jetpack-ai-client'
-				),
-				severity: 'info',
-			};
 		default:
 			return {
 				code: ERROR_NETWORK,
@@ -297,6 +294,46 @@ export default function useAiSuggestions( {
 		]
 	);
 
+	/**
+	 * Stop suggestion handler.
+	 *
+	 * @returns {void}
+	 */
+	const stopSuggestion = useCallback( () => {
+		if ( ! eventSourceRef?.current ) {
+			return;
+		}
+
+		// Alias
+		const eventSource = eventSourceRef?.current;
+
+		// Close the connection.
+		eventSource.close();
+
+		// Clean up the event listeners.
+		eventSource.removeEventListener( 'suggestion', handleSuggestion );
+
+		eventSource.removeEventListener( ERROR_QUOTA_EXCEEDED, handleErrorQuotaExceededError );
+		eventSource.removeEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
+		eventSource.removeEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
+		eventSource.removeEventListener( ERROR_MODERATION, handleModerationError );
+		eventSource.removeEventListener( ERROR_NETWORK, handleNetworkError );
+
+		eventSource.removeEventListener( 'done', handleDone );
+
+		// Set requesting state to done since the suggestion stopped.
+		setRequestingState( 'done' );
+	}, [
+		eventSourceRef,
+		handleSuggestion,
+		handleErrorQuotaExceededError,
+		handleUnclearPromptError,
+		handleServiceUnavailableError,
+		handleModerationError,
+		handleNetworkError,
+		handleDone,
+	] );
+
 	// Request suggestions automatically when ready.
 	useEffect( () => {
 		// Check if there is a prompt to request.
@@ -310,38 +347,10 @@ export default function useAiSuggestions( {
 		}
 
 		return () => {
-			if ( ! eventSourceRef?.current ) {
-				return;
-			}
-
-			// Alias
-			const eventSource = eventSourceRef.current;
-
-			// Close the connection.
-			eventSource.close();
-
-			// Clean up the event listeners.
-			eventSource.removeEventListener( 'suggestion', handleSuggestion );
-
-			eventSource.removeEventListener( ERROR_QUOTA_EXCEEDED, handleErrorQuotaExceededError );
-			eventSource.removeEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
-			eventSource.removeEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
-			eventSource.removeEventListener( ERROR_MODERATION, handleModerationError );
-			eventSource.removeEventListener( ERROR_NETWORK, handleNetworkError );
-
-			eventSource.removeEventListener( 'done', handleDone );
+			// Stop the suggestion if the component unmounts.
+			stopSuggestion();
 		};
-	}, [
-		autoRequest,
-		handleDone,
-		handleErrorQuotaExceededError,
-		handleModerationError,
-		handleServiceUnavailableError,
-		handleSuggestion,
-		handleUnclearPromptError,
-		prompt,
-		request,
-	] );
+	}, [ autoRequest, prompt, request, stopSuggestion ] );
 
 	return {
 		// Data
@@ -349,8 +358,9 @@ export default function useAiSuggestions( {
 		error,
 		requestingState,
 
-		// Request handler
+		// Request/stop handlers
 		request,
+		stopSuggestion,
 
 		// SuggestionsEventSource
 		eventSource: eventSourceRef.current,