@automattic/jetpack-ai-client 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -5,15 +5,29 @@ 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.3] - 2023-08-09
+### Added
+- AI Client: Introduce disabled prop in AI Control. [#32326]
+- AI Control: Add guideline message. [#32358]
+
+### Changed
+- AI Client: handle token fetching errors by dispatching an event from the SuggestionsEventSource class. [#32350]
+- AI Client: tweak layout and styles to make AI Control mobile friendly. [#32362]
+- AI Control: clean up props. [#32360]
+- Updated package dependencies. [#32166]
+
+### Fixed
+- AI Client: fix TS type definition issue [#32330]
+
 ## [0.1.2] - 2023-08-07
 ### Added
-- AI Assistant: add options parameter to request function on useAiSuggestions hook [#32198]
+- AI Assistant: Add options parameter to request function on useAiSuggestions hook [#32198]
 - AI Client: add @wordpress/compose dependency [#32228]
-- AI Client: add clear button in AI Control component [#32274]
-- AI Client: add keyboard shortcut to AIControl [#32239]
+- AI Client: Add clear button in AI Control component [#32274]
+- AI Client: Add keyboard shortcut to AIControl [#32239]
 - AI Client: add onError() response support [#32223]
-- AI Client: export types [#32209]
-- AI Client: start supporting request options on requestSuggestion callback. [#32303]
+- AI Client: Export types [#32209]
+- AI Client: Start supporting request options on requestSuggestion callback. [#32303]
 - AI Control: introduce AiStatusIndicator component [#32258]
 
 ### Changed
@@ -54,5 +68,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[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/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.1.2",
+	"version": "0.1.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": {
@@ -33,16 +33,16 @@
 	},
 	"dependencies": {
 		"@automattic/jetpack-connection": "workspace:*",
-		"@automattic/jetpack-shared-extension-utils": "^0.11.0",
+		"@automattic/jetpack-shared-extension-utils": "^0.11.1",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@wordpress/api-fetch": "6.34.0",
-		"@wordpress/block-editor": "12.5.0",
-		"@wordpress/components": "25.3.0",
-		"@wordpress/compose": "6.14.0",
-		"@wordpress/data": "9.7.0",
-		"@wordpress/element": "5.14.0",
-		"@wordpress/i18n": "4.37.0",
-		"@wordpress/icons": "9.28.0",
+		"@wordpress/api-fetch": "6.35.0",
+		"@wordpress/block-editor": "12.6.0",
+		"@wordpress/components": "25.4.0",
+		"@wordpress/compose": "6.15.0",
+		"@wordpress/data": "9.8.0",
+		"@wordpress/element": "5.15.0",
+		"@wordpress/i18n": "4.38.0",
+		"@wordpress/icons": "9.29.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"react": "18.2.0",

package/src/ask-question/index.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import debugFactory from 'debug';
-import requestJwt from '../jwt';
 import SuggestionsEventSource from '../suggestions-event-source';
 /*
  * Types & constants
@@ -62,11 +61,8 @@ export default async function askQuestion(
 ): Promise< SuggestionsEventSource > {
 	debug( 'Asking question: %o. options: %o', question, { postId, fromCache, feature, functions } );
 
-	const { token } = await requestJwt();
-
 	return new SuggestionsEventSource( {
 		question,
-		token,
 		options: { postId, feature, fromCache, functions },
 	} );
 }

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

@@ -2,14 +2,14 @@
 
 #### Properties
 
-- `loading` (**boolean**) (Optional): Determines the loading state. Default value is `false`.
+- `disabled` (**boolean**) (Optional): Disables the ai control. Default value is `false`.
 - `value` (**string**): Current input value. Default value is `''`.
 - `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`.
-- `requestingState` (**RequestingStateProp**) (Optional): Determines the state of the request. Default value is `'init'`.
+- `state` (**RequestingStateProp**) (Optional): Determines the state of the component. Default value is `'init'`.
 - `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

@@ -13,6 +13,7 @@ import classNames from 'classnames';
  */
 import './style.scss';
 import AiStatusIndicator from '../ai-status-indicator';
+import { GuidelineMessage } from './message';
 /**
  * Types
  */
@@ -25,48 +26,50 @@ const noop = () => {};
  * AI Control component.
  *
  * @param {object} props - component props
- * @param {boolean} props.loading - loading state
+ * @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 {string} props.requestingState - requesting state
  * @returns {object} - AI Control component
  */
 export default function AIControl( {
-	loading = false,
+	disabled = false,
 	value = '',
 	placeholder = '',
 	showAccept = false,
 	acceptLabel = __( 'Accept', 'jetpack-ai-client' ),
 	showButtonsLabel = true,
 	isOpaque = false,
-	requestingState = 'init',
+	state = 'init',
 	onChange = noop,
 	onSend = noop,
 	onStop = noop,
 	onAccept = noop,
 }: {
-	loading?: boolean;
+	disabled?: boolean;
 	value: string;
 	placeholder?: string;
 	showAccept?: boolean;
 	acceptLabel?: string;
 	showButtonsLabel?: boolean;
 	isOpaque?: boolean;
-	requestingState?: RequestingStateProp;
+	state?: RequestingStateProp;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
 	onStop?: () => void;
 	onAccept?: () => void;
 } ) {
 	const promptUserInputRef = useRef( null );
+	const loading = state === 'requesting' || state === 'suggesting';
+	const showGuideLine = ! ( loading || disabled || value?.length || isOpaque );
 
 	useKeyboardShortcut(
 		'mod+enter',
@@ -91,6 +94,10 @@ export default function AIControl( {
 		}
 	);
 
+	const actionButtonClasses = classNames( 'jetpack-components-ai-control__controls-prompt_button', {
+		'has-label': showButtonsLabel,
+	} );
+
 	return (
 		<div className="jetpack-components-ai-control__container">
 			<div
@@ -98,7 +105,7 @@ export default function AIControl( {
 					'is-opaque': isOpaque,
 				} ) }
 			>
-				<AiStatusIndicator state={ requestingState } />
+				<AiStatusIndicator state={ state } />
 
 				<div className="jetpack-components-ai-control__input-wrapper">
 					<PlainText
@@ -106,60 +113,59 @@ export default function AIControl( {
 						onChange={ onChange }
 						placeholder={ placeholder }
 						className="jetpack-components-ai-control__input"
-						disabled={ loading }
+						disabled={ loading || disabled }
 						ref={ promptUserInputRef }
 					/>
+				</div>
+
+				{ value?.length > 0 && (
+					<Button
+						icon={ closeSmall }
+						className="jetpack-components-ai-control__clear"
+						onClick={ () => onChange( '' ) }
+					/>
+				) }
 
-					{ value?.length > 0 && (
-						<Icon
-							icon={ closeSmall }
-							className="jetpack-components-ai-control__clear"
-							onClick={ () => onChange( '' ) }
-						/>
+				<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
+					{ ! loading ? (
+						<Button
+							className={ actionButtonClasses }
+							onClick={ () => onSend( value ) }
+							isSmall={ true }
+							disabled={ ! value?.length || disabled }
+							label={ __( 'Send request', 'jetpack-ai-client' ) }
+						>
+							<Icon icon={ arrowUp } />
+							{ showButtonsLabel && __( 'Send', 'jetpack-ai-client' ) }
+						</Button>
+					) : (
+						<Button
+							className={ actionButtonClasses }
+							onClick={ onStop }
+							isSmall={ true }
+							label={ __( 'Stop request', 'jetpack-ai-client' ) }
+						>
+							<Icon icon={ closeSmall } />
+							{ showButtonsLabel && __( 'Stop', 'jetpack-ai-client' ) }
+						</Button>
 					) }
 				</div>
 
-				<div className="jetpack-components-ai-control__controls">
+				{ showAccept && (
 					<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-						{ ! loading ? (
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								onClick={ () => onSend( value ) }
-								isSmall={ true }
-								disabled={ ! value?.length }
-								label={ __( 'Send request', 'jetpack-ai-client' ) }
-							>
-								<Icon icon={ arrowUp } />
-								{ showButtonsLabel && __( 'Send', 'jetpack-ai-client' ) }
-							</Button>
-						) : (
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								onClick={ onStop }
-								isSmall={ true }
-								label={ __( 'Stop request', 'jetpack-ai-client' ) }
-							>
-								<Icon icon={ closeSmall } />
-								{ showButtonsLabel && __( 'Stop', 'jetpack-ai-client' ) }
-							</Button>
-						) }
+						<Button
+							className={ actionButtonClasses }
+							onClick={ onAccept }
+							isSmall={ true }
+							label={ acceptLabel }
+						>
+							<Icon icon={ check } />
+							{ showButtonsLabel && acceptLabel }
+						</Button>
 					</div>
-
-					{ showAccept && (
-						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-							<Button
-								className="jetpack-components-ai-control__controls-prompt_button"
-								onClick={ onAccept }
-								isSmall={ true }
-								label={ acceptLabel }
-							>
-								<Icon icon={ check } />
-								{ acceptLabel }
-							</Button>
-						</div>
-					) }
-				</div>
+				) }
 			</div>
+			{ showGuideLine && <GuidelineMessage /> }
 		</div>
 	);
 }

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

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import { ExternalLink } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Icon,
+	warning,
+	info,
+	cancelCircleFilled as error,
+	check as success,
+} from '@wordpress/icons';
+/**
+ * Types
+ */
+import type React from 'react';
+
+import './style.scss';
+
+export const MESSAGE_SEVERITY_WARNING = 'warning';
+export const MESSAGE_SEVERITY_ERROR = 'error';
+export const MESSAGE_SEVERITY_SUCCESS = 'success';
+export const MESSAGE_SEVERITY_INFO = 'info';
+
+const messageSeverityTypes = [
+	MESSAGE_SEVERITY_WARNING,
+	MESSAGE_SEVERITY_ERROR,
+	MESSAGE_SEVERITY_SUCCESS,
+	MESSAGE_SEVERITY_INFO,
+] as const;
+
+export type MessageSeverityProp = ( typeof messageSeverityTypes )[ number ] | null;
+
+export type MessageProps = {
+	icon?: React.ReactNode;
+	children: React.ReactNode;
+	severity: MessageSeverityProp;
+};
+
+const messageIconsMap = {
+	[ MESSAGE_SEVERITY_WARNING ]: warning,
+	[ MESSAGE_SEVERITY_ERROR ]: error,
+	[ MESSAGE_SEVERITY_SUCCESS ]: success,
+	[ MESSAGE_SEVERITY_INFO ]: info,
+};
+
+/**
+ * React component to render a block message.
+ *
+ * @param {MessageProps} props - Component props.
+ * @returns {React.ReactElement }    Banner component.
+ */
+export default function Message( {
+	severity = null,
+	icon = null,
+	children,
+}: MessageProps ): React.ReactElement {
+	return (
+		<div className="jetpack-ai-assistant__message">
+			{ ( severity || icon ) && <Icon icon={ messageIconsMap[ severity ] || icon } /> }
+			<div className="jetpack-ai-assistant__message-content">{ children }</div>
+		</div>
+	);
+}
+
+/**
+ * React component to render a guideline message.
+ *
+ * @returns {React.ReactElement } - Message component.
+ */
+export function GuidelineMessage(): React.ReactElement {
+	return (
+		<Message severity={ MESSAGE_SEVERITY_INFO }>
+			{ createInterpolateElement(
+				__(
+					'AI-generated content could be inaccurate or biased. <link>Learn more</link>',
+					'jetpack-ai-client'
+				),
+				{
+					link: <ExternalLink href="https://automattic.com/ai-guidelines" />,
+				}
+			) }
+		</Message>
+	);
+}

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

@@ -1,3 +1,5 @@
+// AI CONTROL
+
 .jetpack-components-ai-control__container {
 	color: var( --jp-gray-80 );
 	background-color: var( --jp-white );
@@ -23,26 +25,11 @@
 	flex-grow: 1;
 	width: 100%;
 
-	.jetpack-components-ai-control__clear {
-		position: absolute;
-		right: 8px;
-		top: calc( 50% - 12px );
-		border-radius: 50%;
-		background-color: black;
-		opacity: 0.2;
-		fill: white;
-		cursor: pointer;
-
-		&:hover {
-			opacity: 0.4;
-		}
-	}
-
 	textarea.jetpack-components-ai-control__input {
 		width: 100%;
 		min-height: 20px;
 		border-radius: 2px;
-		padding: 6px 38px 6px 8px;
+		padding: 6px 8px;
 
 		resize: none !important;
 		border: none;
@@ -72,6 +59,21 @@
 	}
 }
 
+.jetpack-components-ai-control__clear.components-button.has-icon {
+	width: 24px;
+	min-width: 24px;
+	height: 24px;
+	padding: 0;
+	border-radius: 50%;
+	background-color: black;
+	opacity: 0.2;
+	color: white;
+
+	&:hover {
+		opacity: 0.4;
+	}
+}
+
 .jetpack-components-ai-controlton__icon {
 	flex-shrink: 0;
 	display: flex;
@@ -94,11 +96,6 @@
 	}
 }
 
-.jetpack-components-ai-control__controls {
-	display: flex;
-	align-items: center;
-}
-
 .jetpack-components-ai-control__controls-prompt_button_wrapper {
 	text-transform: uppercase;
 	font-size: 11px;
@@ -108,16 +105,16 @@
 	white-space: nowrap;
 	display: flex;
 	align-items: center;
+
+	.components-button.is-small:not(.has-label) {
+		padding: 0;
+	}
 }
 
 .jetpack-components-ai-control__controls-prompt_button {
 	color: var( --jp-gray-80 );
 	text-transform: uppercase;
 
-	> SVG {
-		margin-right: 4px;
-	}
-
 	&:hover,
 	&:active {
 		color: var( --wp-components-color-accent, var( --wp-admin-theme-color ) );
@@ -127,4 +124,30 @@
 		opacity: 0.6;
 		cursor: not-allowed;
 	}
-}
+}
+
+// MESSAGE
+
+.jetpack-ai-assistant__message {
+	display: flex;
+    line-height: 28px;
+    font-size: 12px;
+    align-self: center;
+    align-items: center;
+    background-color: var( --jp-white-off );
+    padding: 0 12px;
+
+    > svg {
+        fill: var( --jp-gray-40 );
+    }
+
+    .jetpack-ai-assistant__message-content {
+        flex-grow: 2;
+        margin: 0 8px;
+        color: var( --jp-gray-70 );
+
+        .components-external-link {
+            color: var( --jp-gray-50 );
+        }
+    }
+}

package/src/data-flow/use-ai-context.ts

@@ -5,7 +5,7 @@ import { useCallback, useContext, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { ERROR_RESPONSE } from '../types';
+import { ERROR_RESPONSE, RequestingErrorProps } from '../types';
 import { AiDataContext } from '.';
 /**
  * Types & constants
@@ -32,7 +32,7 @@ export type UseAiContextOptions = {
 	/*
 	 * onError callback.
 	 */
-	onError?: ( error: Error ) => void;
+	onError?: ( error: RequestingErrorProps ) => void;
 };
 
 /**

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

@@ -234,7 +234,7 @@ export default function useAiSuggestions( {
 
 	const handleModerationError = useCallback( () => handleError( ERROR_MODERATION ), [] );
 
-	const handleNetwotkError = useCallback( () => handleError( ERROR_NETWORK ), [] );
+	const handleNetworkError = useCallback( () => handleError( ERROR_NETWORK ), [] );
 
 	/**
 	 * Request handler.
@@ -278,7 +278,7 @@ export default function useAiSuggestions( {
 				eventSource.addEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
 				eventSource.addEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
 				eventSource.addEventListener( ERROR_MODERATION, handleModerationError );
-				eventSource.addEventListener( ERROR_NETWORK, handleNetwotkError );
+				eventSource.addEventListener( ERROR_NETWORK, handleNetworkError );
 
 				eventSource.addEventListener( 'done', handleDone );
 			} catch ( e ) {
@@ -292,7 +292,7 @@ export default function useAiSuggestions( {
 			handleUnclearPromptError,
 			handleServiceUnavailableError,
 			handleModerationError,
-			handleNetwotkError,
+			handleNetworkError,
 			handleSuggestion,
 		]
 	);
@@ -327,7 +327,7 @@ export default function useAiSuggestions( {
 			eventSource.removeEventListener( ERROR_UNCLEAR_PROMPT, handleUnclearPromptError );
 			eventSource.removeEventListener( ERROR_SERVICE_UNAVAILABLE, handleServiceUnavailableError );
 			eventSource.removeEventListener( ERROR_MODERATION, handleModerationError );
-			eventSource.removeEventListener( ERROR_NETWORK, handleNetwotkError );
+			eventSource.removeEventListener( ERROR_NETWORK, handleNetworkError );
 
 			eventSource.removeEventListener( 'done', handleDone );
 		};

package/src/suggestions-event-source/index.ts

@@ -3,10 +3,14 @@
  */
 import { EventSourceMessage, fetchEventSource } from '@microsoft/fetch-event-source';
 import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import { getErrorData } from '../hooks/use-ai-suggestions';
+import requestJwt from '../jwt';
 /*
  * Types & constants
  */
-import { getErrorData } from '../hooks/use-ai-suggestions';
 import {
 	ERROR_MODERATION,
 	ERROR_NETWORK,
@@ -20,7 +24,7 @@ import type { PromptMessagesProp, PromptProp, SuggestionErrorCode } from '../typ
 type SuggestionsEventSourceConstructorArgs = {
 	url?: string;
 	question: PromptProp;
-	token: string;
+	token?: string;
 	options?: {
 		postId?: number;
 		feature?: 'ai-assistant-experimental' | string | undefined;
@@ -81,6 +85,18 @@ export default class SuggestionsEventSource extends EventTarget {
 		token,
 		options = {},
 	}: SuggestionsEventSourceConstructorArgs ) {
+		// If the token is not provided, try to get one
+		if ( ! token ) {
+			try {
+				debug( 'Token was not provided, requesting one...' );
+				token = ( await requestJwt() ).token;
+			} catch ( err ) {
+				this.processErrorEvent( err );
+
+				return;
+			}
+		}
+
 		const bodyData: {
 			post_id?: number;
 			messages?: PromptMessagesProp;