@automattic/jetpack-ai-client 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -5,6 +5,30 @@ 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.5] - 2023-08-28
+### Added
+- AI Client: add mic icon [#32665]
+
+### Changed
+- AI Assistant: Change messages to turn content optional and start supporting a context property. [#32495]
+- AI Extension: Add showClearButton prop to AIControl component and fix names [#32682]
+- AI Extension: Specify input background color [#32628]
+- Updated package dependencies. [#32605]
+
+## [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 +92,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.1.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.1.4...v0.1.5
+[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.5",
 	"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,8 +32,9 @@
 		".": "./index.ts"
 	},
 	"dependencies": {
-		"@automattic/jetpack-connection": "workspace:*",
-		"@automattic/jetpack-shared-extension-utils": "^0.11.1",
+		"@automattic/jetpack-base-styles": "^0.6.6",
+		"@automattic/jetpack-connection": "^0.29.8",
+		"@automattic/jetpack-shared-extension-utils": "^0.11.3",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@wordpress/api-fetch": "6.35.0",
 		"@wordpress/block-editor": "12.6.0",

package/src/components/ai-control/Readme.md

@@ -7,9 +7,10 @@
 - `placeholder` (**string**) (Optional): Placeholder text for the input field. Default value is `''`.
 - `showAccept` (**boolean**) (Optional): Determines if the accept button is shown. Default value is `false`.
 - `acceptLabel` (**string**) (Optional): Label text for the accept button. Default value is `'Accept'`.
-- `showButtonsLabel` (**boolean**) (Optional): Determines if button labels are shown. Default value is `true`.
-- `isOpaque` (**boolean**) (Optional): Controls the opacity of the component. Default value is `false`.
+- `showButtonLabels` (**boolean**) (Optional): Determines if button labels are shown. Default value is `true`.
+- `isTransparent` (**boolean**) (Optional): Controls the opacity of the component. Default value is `false`.
 - `state` (**RequestingStateProp**) (Optional): Determines the state of the component. Default value is `'init'`.
+- `showClearButton` (**boolean**) (Optional): Determines if the clear button is shown when the input has a value. Default value is `true`.
 - `onChange` (**Function**) (Optional): Handler for input change. Default action is no operation.
 - `onSend` (**Function**) (Optional): Handler to send a request. Default action is no operation.
 - `onStop` (**Function**) (Optional): Handler to stop a request. Default action is no operation.

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
  */
@@ -25,51 +26,61 @@ const noop = () => {};
 /**
  * AI Control component.
  *
- * @param {object} props - component props
- * @param {boolean} props.disabled - is disabled
- * @param {string} props.value - input value
- * @param {string} props.placeholder - input placeholder
- * @param {boolean} props.showAccept - show accept button
- * @param {string} props.acceptLabel - accept button label
- * @param {boolean} props.showButtonsLabel - show buttons label
- * @param {boolean} props.isOpaque - is opaque
- * @param {string} props.state - requesting state
- * @param {Function} props.onChange - input change handler
- * @param {Function} props.onSend - send request handler
- * @param {Function} props.onStop - stop request handler
- * @param {Function} props.onAccept - accept handler
+ * @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 {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
  */
-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' ),
+		showButtonLabels = true,
+		isTransparent = false,
+		state = 'init',
+		showClearButton = true,
+		onChange = noop,
+		onSend = noop,
+		onStop = noop,
+		onAccept = noop,
+	}: {
+		disabled?: boolean;
+		value: string;
+		placeholder?: string;
+		showAccept?: boolean;
+		acceptLabel?: string;
+		showButtonLabels?: boolean;
+		isTransparent?: boolean;
+		state?: RequestingStateProp;
+		showClearButton?: boolean;
+		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 );
+	const showGuideLine = ! ( loading || disabled || value?.length || isTransparent );
+
+	// Pass the ref to forwardRef.
+	useImperativeHandle( ref, () => promptUserInputRef.current );
 
 	useKeyboardShortcut(
 		'mod+enter',
@@ -95,14 +106,14 @@ export default function AIControl( {
 	);
 
 	const actionButtonClasses = classNames( 'jetpack-components-ai-control__controls-prompt_button', {
-		'has-label': showButtonsLabel,
+		'has-label': showButtonLabels,
 	} );
 
 	return (
 		<div className="jetpack-components-ai-control__container">
 			<div
 				className={ classNames( 'jetpack-components-ai-control__wrapper', {
-					'is-opaque': isOpaque,
+					'is-transparent': isTransparent,
 				} ) }
 			>
 				<AiStatusIndicator state={ state } />
@@ -118,7 +129,7 @@ export default function AIControl( {
 					/>
 				</div>
 
-				{ value?.length > 0 && (
+				{ value?.length > 0 && showClearButton && (
 					<Button
 						icon={ closeSmall }
 						className="jetpack-components-ai-control__clear"
@@ -136,7 +147,7 @@ export default function AIControl( {
 							label={ __( 'Send request', 'jetpack-ai-client' ) }
 						>
 							<Icon icon={ arrowUp } />
-							{ showButtonsLabel && __( 'Send', 'jetpack-ai-client' ) }
+							{ showButtonLabels && __( 'Send', 'jetpack-ai-client' ) }
 						</Button>
 					) : (
 						<Button
@@ -146,7 +157,7 @@ export default function AIControl( {
 							label={ __( 'Stop request', 'jetpack-ai-client' ) }
 						>
 							<Icon icon={ closeSmall } />
-							{ showButtonsLabel && __( 'Stop', 'jetpack-ai-client' ) }
+							{ showButtonLabels && __( 'Stop', 'jetpack-ai-client' ) }
 						</Button>
 					) }
 				</div>
@@ -160,7 +171,7 @@ export default function AIControl( {
 							label={ acceptLabel }
 						>
 							<Icon icon={ check } />
-							{ showButtonsLabel && acceptLabel }
+							{ showButtonLabels && acceptLabel }
 						</Button>
 					</div>
 				) }
@@ -169,3 +180,5 @@ export default function AIControl( {
 		</div>
 	);
 }
+
+export default forwardRef( AIControl );

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

@@ -52,10 +52,10 @@ const Template = args => {
 
 const DefaultArgs = {
 	loading: false,
-	isOpaque: false,
+	isTransparent: false,
 	placeholder: '',
 	requestingState: 'init',
-	showButtonsLabel: true,
+	showButtonLabels: true,
 	showAccept: false,
 	acceptLabel: 'Accept',
 	onChange: action( 'onChange' ),

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,8 +15,9 @@
 	padding: 12px 14px;
 	gap: 8px;
 	align-items: center;
+	box-sizing: border-box;
 
-	&.is-opaque {
+	&.is-transparent {
 		opacity: 0.4;
 	}
 }
@@ -26,6 +29,7 @@
 	width: 100%;
 
 	textarea.jetpack-components-ai-control__input {
+		background-color: var( --jp-white );
 		width: 100%;
 		min-height: 20px;
 		border-radius: 2px;

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,

package/src/icons/index.ts

@@ -1,3 +1,4 @@
 export { default as aiAssistantIcon } from './ai-assistant';
+export { default as micIcon } from './mic';
 export { default as origamiPlaneIcon } from './origami-plane';
 export { default as speakToneIcon } from './speak-tone';

package/src/icons/mic.tsx

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { SVG, Rect, Line, Path } from '@wordpress/components';
+import React from 'react';
+
+const mic = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/SVG">
+		<Rect x="8.75" y="2.75" width="6.5" height="11.5" rx="3.25" stroke="black" stroke-width="1.5" />
+		<Line x1="12" y1="17" x2="12" y2="21" stroke="black" stroke-width="1.5" />
+		<Path
+			d="M18 11C18 11.7879 17.8448 12.5681 17.5433 13.2961C17.2417 14.0241 16.7998 14.6855 16.2426 15.2426C15.6855 15.7998 15.0241 16.2418 14.2961 16.5433C13.5681 16.8448 12.7879 17 12 17C11.2121 17 10.4319 16.8448 9.7039 16.5433C8.97595 16.2417 8.31451 15.7998 7.75736 15.2426C7.20021 14.6855 6.75825 14.0241 6.45672 13.2961C6.15519 12.5681 6 11.7879 6 11"
+			stroke="black"
+			stroke-width="1.5"
+		/>
+	</SVG>
+);
+
+export default mic;

package/src/types.ts

@@ -18,7 +18,8 @@ export type SuggestionErrorCode =
  */
 export type PromptItemProps = {
 	role: 'system' | 'user' | 'assistant';
-	content: string;
+	content?: string;
+	context?: object;
 };
 
 export type PromptMessagesProp = Array< PromptItemProps >;