@automattic/jetpack-ai-client 0.1.1 → 0.1.3

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

@@ -1,23 +1,33 @@
+// AI CONTROL
+
 .jetpack-components-ai-control__container {
 	color: var( --jp-gray-80 );
 	background-color: var( --jp-white );
 	box-shadow: var( --wp--preset--color--cyan-bluish-gray ) 0px 0px 0px 1px, var( --wp--preset--color--cyan-bluish-gray ) 0px 0px 8px;
 	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	width: 100%;
 }
 
 .jetpack-components-ai-control__wrapper {
 	display: flex;
 	padding: 12px 14px;
 	gap: 8px;
+	align-items: center;
 
 	&.is-opaque {
 		opacity: 0.4;
 	}
+}
+
+.jetpack-components-ai-control__input-wrapper {
+	position: relative;
+	display: flex;
+	flex-grow: 1;
+	width: 100%;
 
 	textarea.jetpack-components-ai-control__input {
 		width: 100%;
-        min-height: 20px;
-		flex-grow: 1;
+		min-height: 20px;
 		border-radius: 2px;
 		padding: 6px 8px;
 
@@ -49,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;
@@ -71,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;
@@ -85,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 ) );
@@ -104,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/components/ai-status-indicator/Readme.md

@@ -0,0 +1,11 @@
+### AiStatusIndicator
+
+#### Properties
+
+- `state` (**RequestingStateProp**) (Optional): Determines the appearance of the icon.
+- `size` (**AiStatusIndicatorIconSize** 24 | 32 | 48 | 64 pixels) (Optional): Defines the size of the icon. Default value is `24`.
+
+#### Example Usage
+```jsx
+<AiStatusIndicator state="requesting" size={ 32 } />
+```

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

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/components';
+import classNames from 'classnames';
+/*
+ * Internal dependencies
+ */
+import { aiAssistantIcon } from '../../icons';
+/*
+ * Types
+ */
+import type { RequestingStateProp } from '../../types';
+export type AiStatusIndicatorIconSize = 24 | 32 | 48 | 64;
+import type React from 'react';
+
+import './style.scss';
+
+export type AiStatusIndicatorProps = {
+	state?: RequestingStateProp;
+	size?: AiStatusIndicatorIconSize;
+};
+
+/**
+ * AiStatusIndicator component.
+ *
+ * @param {AiStatusIndicatorProps} props - component props.
+ * @returns {React.ReactElement} - rendered component.
+ */
+export default function AiStatusIndicator( {
+	state,
+	size = 24,
+}: AiStatusIndicatorProps ): React.ReactElement {
+	return (
+		<div
+			className={ classNames( 'jetpack-ai-status-indicator__icon-wrapper', {
+				[ `is-${ state }` ]: true,
+			} ) }
+		>
+			<Icon icon={ aiAssistantIcon } size={ size } />
+		</div>
+	);
+}

package/src/components/ai-status-indicator/stories/index.mdx

@@ -0,0 +1,25 @@
+import { Meta, Story, Canvas } from '@storybook/blocks';
+import AiStatusIndicator from '../index';
+import * as AiStatusIndicatorStory from './index.stories';
+
+<Meta of={AiStatusIndicatorStory} />
+
+# AiStatusIndicator
+
+## Requesting states
+
+### Init
+<Story id="js-packages-ai-client-aistatusindicator--init" />
+
+### Requesting
+<Story id="js-packages-ai-client-aistatusindicator--requesting" />
+
+### Suggesting
+<Story id="js-packages-ai-client-aistatusindicator--suggesting" />
+
+### Done
+<Story id="js-packages-ai-client-aistatusindicator--done" />
+
+### Error
+<Story id="js-packages-ai-client-aistatusindicator--error" />
+

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

@@ -0,0 +1,84 @@
+/*
+ * External Dependencies
+ */
+import React from 'react';
+/*
+ * Internal Dependencies
+ */
+import AiStatusIndicator, { AiStatusIndicatorProps } from '..';
+import { REQUESTING_STATES } from '../../../types';
+
+type AiStatusIndicatoryStoryProps = AiStatusIndicatorProps & {
+	icon: string;
+	children?: React.ReactNode;
+};
+
+export default {
+	title: 'JS Packages/AI Client/AiStatusIndicator',
+	component: AiStatusIndicator,
+	argTypes: {
+		state: {
+			control: {
+				type: 'select',
+			},
+			options: REQUESTING_STATES,
+		},
+		size: {
+			control: {
+				type: 'select',
+			},
+			options: [ 24, 32, 48, 64 ],
+		},
+
+		action: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+};
+
+const DefaultTemplate = ( args: AiStatusIndicatoryStoryProps ) => {
+	const props: AiStatusIndicatorProps = {
+		state: args.state,
+		size: args.size,
+	};
+
+	return <AiStatusIndicator { ...props } />;
+};
+
+export const _default = DefaultTemplate.bind( {} );
+_default.args = {
+	state: 'init',
+	size: 24,
+};
+
+export const Init = DefaultTemplate.bind( {} );
+Init.args = {
+	state: 'init',
+	size: 48,
+};
+
+export const Requesting = DefaultTemplate.bind( {} );
+Requesting.args = {
+	state: 'requesting',
+	size: 48,
+};
+
+export const Suggesting = DefaultTemplate.bind( {} );
+Suggesting.args = {
+	state: 'suggesting',
+	size: 48,
+};
+
+export const Error = DefaultTemplate.bind( {} );
+Error.args = {
+	state: 'error',
+	size: 48,
+};
+
+export const Done = DefaultTemplate.bind( {} );
+Done.args = {
+	state: 'done',
+	size: 48,
+};

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

@@ -0,0 +1,50 @@
+.jetpack-ai-status-indicator__icon-wrapper {
+	color: var( --jp-green-60 );
+	height: 24px;
+
+	&.is-init {
+		color: var( --jp-green-60 );
+	}
+
+	&.is-requesting {
+		color: var( --jp-green-40 );
+		animation: fade 800ms linear infinite;
+	}
+
+	&.is-suggesting {
+		color: var( --jp-green-30 );
+		.ai-assistant-icon > path {
+			animation: fadingSpark 300ms ease-in-out alternate infinite;
+	
+			&.spark-first {
+				animation-delay: 0.2s;
+			}
+			
+			&.spark-second {
+				animation-delay: 0.6s;
+			}
+		}
+	}
+
+	&.is-done {
+		color: var( --jp-green-40 );
+	}
+
+	&.is-error {
+		color: var( --jp-yellow-30 );
+	}
+}
+
+
+@keyframes fadingSpark {
+	to {
+		opacity: 0.3;
+	}
+}
+
+@keyframes fade {
+	0% { opacity: 1; }
+	50% { opacity: 0.4; }
+	100% { opacity: 1; }
+  }
+  

package/src/data-flow/Readme.md

@@ -1,6 +1,8 @@
 
 # AI Assistant Data Flow
 
+Data Flow is a seamless and robust implementation designed to manage the state and functionality of an AI Assistant within a React application. By leveraging a React context, Higher Order Components (HOCs), and custom hooks, this implementation streamlines the interaction with the AI, handles suggestions, manages error states, and efficiently controls request functionality.
+
 ```jsx
 import { withAiAssistantData, useAiContext } from '@automattic/jetpack-ai-client';
 

package/src/data-flow/context.tsx

@@ -7,8 +7,10 @@ import React from 'react';
  * Types & Constants
  */
 import SuggestionsEventSource from '../suggestions-event-source';
-import type { RequestingStateProp, RequestingErrorProps } from '../hooks/use-ai-suggestions';
+import type { AskQuestionOptionsArgProps } from '../ask-question';
+import type { RequestingErrorProps } from '../hooks/use-ai-suggestions';
 import type { PromptProp } from '../types';
+import type { RequestingStateProp } from '../types';
 
 export type AiDataContextProps = {
 	/*
@@ -29,7 +31,7 @@ export type AiDataContextProps = {
 	/*
 	 * Request suggestion function
 	 */
-	requestSuggestion: ( prompt: PromptProp ) => void;
+	requestSuggestion: ( prompt: PromptProp, options?: AskQuestionOptionsArgProps ) => void;
 
 	/*
 	 * The Suggestions Event Source instance

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

@@ -5,6 +5,7 @@ import { useCallback, useContext, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { ERROR_RESPONSE, RequestingErrorProps } from '../types';
 import { AiDataContext } from '.';
 /**
  * Types & constants
@@ -12,7 +13,7 @@ import { AiDataContext } from '.';
 import type { AiDataContextProps } from './context';
 import type { AskQuestionOptionsArgProps } from '../ask-question';
 
-type useAiContextOptions = {
+export type UseAiContextOptions = {
 	/*
 	 * Ask question options.
 	 */
@@ -27,6 +28,11 @@ type useAiContextOptions = {
 	 * onSuggestion callback.
 	 */
 	onSuggestion?: ( suggestion: string ) => void;
+
+	/*
+	 * onError callback.
+	 */
+	onError?: ( error: RequestingErrorProps ) => void;
 };
 
 /**
@@ -34,13 +40,14 @@ type useAiContextOptions = {
  * the AI Assistant data (from context),
  * and to subscribe to the request events (onDone, onSuggestion).
  *
- * @param {useAiContextOptions} options - the hook options.
+ * @param {UseAiContextOptions} options - the hook options.
  * @returns {AiDataContextProps}          the AI Assistant data context.
  */
 export default function useAiContext( {
 	onDone,
 	onSuggestion,
-}: useAiContextOptions = {} ): AiDataContextProps {
+	onError,
+}: UseAiContextOptions = {} ): AiDataContextProps {
 	const context = useContext( AiDataContext );
 	const { eventSource } = context;
 
@@ -49,6 +56,9 @@ export default function useAiContext( {
 		( event: CustomEvent ) => onSuggestion?.( event?.detail ),
 		[ onSuggestion ]
 	);
+	const error = useCallback( ( event: CustomEvent ) => {
+		onError?.( event?.detail );
+	}, [] );
 
 	useEffect( () => {
 		if ( ! eventSource ) {
@@ -63,9 +73,14 @@ export default function useAiContext( {
 			eventSource.addEventListener( 'suggestion', suggestion );
 		}
 
+		if ( onError ) {
+			eventSource.addEventListener( ERROR_RESPONSE, error );
+		}
+
 		return () => {
 			eventSource.removeEventListener( 'done', done );
 			eventSource.removeEventListener( 'suggestion', suggestion );
+			eventSource.removeEventListener( ERROR_RESPONSE, error );
 		};
 	}, [ eventSource ] );
 

package/src/hooks/use-ai-suggestions/Readme.md

@@ -35,7 +35,7 @@ An object with the following properties:
 - `error: RequestingErrorProps | undefined`: An error object if an error occurs.
 - `requestingState: RequestingStateProp`: The state of the request.
 - `eventSource: SuggestionsEventSource | undefined`: The event source of the request.
-- `request: ( prompt: Array< PromptItemProps > ) => Promise< void >`: The request handler.
+- `request: ( prompt: Array< PromptItemProps >, options: AskQuestionOptionsArgProps ) => Promise< void >`: The request handler.
 
 ### `PromptItemProps`
 

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

@@ -21,6 +21,7 @@ import {
 import type { AskQuestionOptionsArgProps } from '../../ask-question';
 import type SuggestionsEventSource from '../../suggestions-event-source';
 import type { PromptProp, SuggestionErrorCode } from '../../types';
+import type { RequestingStateProp } from '../../types';
 
 export type RequestingErrorProps = {
 	/*
@@ -71,8 +72,6 @@ type useAiSuggestionsOptions = {
 	onError?: ( error: RequestingErrorProps ) => void;
 };
 
-export type RequestingStateProp = 'init' | 'requesting' | 'suggesting' | 'done' | 'error';
-
 type useAiSuggestionsProps = {
 	/*
 	 * The suggestion.
@@ -97,7 +96,7 @@ type useAiSuggestionsProps = {
 	/*
 	 * The request handler.
 	 */
-	request: ( prompt: PromptProp ) => Promise< void >;
+	request: ( prompt: PromptProp, options?: AskQuestionOptionsArgProps ) => Promise< void >;
 };
 
 const debug = debugFactory( 'jetpack-ai-client:use-suggestion' );
@@ -108,7 +107,7 @@ const debug = debugFactory( 'jetpack-ai-client:use-suggestion' );
  * @param {SuggestionErrorCode} errorCode - The error code.
  * @returns {RequestingErrorProps}          The error data.
  */
-function getErrorData( errorCode: SuggestionErrorCode ): RequestingErrorProps {
+export function getErrorData( errorCode: SuggestionErrorCode ): RequestingErrorProps {
 	switch ( errorCode ) {
 		case ERROR_QUOTA_EXCEEDED:
 			return {
@@ -235,15 +234,20 @@ export default function useAiSuggestions( {
 
 	const handleModerationError = useCallback( () => handleError( ERROR_MODERATION ), [] );
 
-	const handleNetwotkError = useCallback( () => handleError( ERROR_NETWORK ), [] );
+	const handleNetworkError = useCallback( () => handleError( ERROR_NETWORK ), [] );
 
 	/**
 	 * Request handler.
 	 *
+	 * @param {PromptProp} promptArg               - The messages array of the prompt.
+	 * @param {AskQuestionOptionsArgProps} options - The options for the askQuestion request. Uses the hook's askQuestionOptions by default.
 	 * @returns {Promise<void>} The promise.
 	 */
 	const request = useCallback(
-		async ( promptArg: PromptProp ) => {
+		async (
+			promptArg: PromptProp,
+			options: AskQuestionOptionsArgProps = { ...askQuestionOptions }
+		) => {
 			if ( Array.isArray( promptArg ) && promptArg?.length ) {
 				promptArg.forEach( ( { role, content: promptContent }, i ) =>
 					debug( '(%s/%s) %o\n%s', i + 1, promptArg.length, `[${ role }]`, promptContent )
@@ -256,7 +260,7 @@ export default function useAiSuggestions( {
 			setRequestingState( 'requesting' );
 
 			try {
-				eventSourceRef.current = await askQuestion( promptArg, askQuestionOptions );
+				eventSourceRef.current = await askQuestion( promptArg, options );
 
 				if ( ! eventSourceRef?.current ) {
 					return;
@@ -274,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 ) {
@@ -288,7 +292,7 @@ export default function useAiSuggestions( {
 			handleUnclearPromptError,
 			handleServiceUnavailableError,
 			handleModerationError,
-			handleNetwotkError,
+			handleNetworkError,
 			handleSuggestion,
 		]
 	);
@@ -302,7 +306,7 @@ export default function useAiSuggestions( {
 
 		// Trigger the request.
 		if ( autoRequest ) {
-			request( prompt );
+			request( prompt, askQuestionOptions );
 		}
 
 		return () => {
@@ -323,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,6 +3,11 @@
  */
 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
  */
@@ -10,15 +15,16 @@ import {
 	ERROR_MODERATION,
 	ERROR_NETWORK,
 	ERROR_QUOTA_EXCEEDED,
+	ERROR_RESPONSE,
 	ERROR_SERVICE_UNAVAILABLE,
 	ERROR_UNCLEAR_PROMPT,
 } from '../types';
-import type { PromptMessagesProp, PromptProp } from '../types';
+import type { PromptMessagesProp, PromptProp, SuggestionErrorCode } from '../types';
 
 type SuggestionsEventSourceConstructorArgs = {
 	url?: string;
 	question: PromptProp;
-	token: string;
+	token?: string;
 	options?: {
 		postId?: number;
 		feature?: 'ai-assistant-experimental' | string | undefined;
@@ -79,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;
@@ -150,6 +168,9 @@ export default class SuggestionsEventSource extends EventTarget {
 				if ( response.ok ) {
 					return;
 				}
+
+				let errorCode: SuggestionErrorCode;
+
 				if (
 					response.status >= 400 &&
 					response.status <= 500 &&
@@ -163,6 +184,7 @@ export default class SuggestionsEventSource extends EventTarget {
 				 * service unavailable
 				 */
 				if ( response.status === 503 ) {
+					errorCode = ERROR_SERVICE_UNAVAILABLE;
 					this.dispatchEvent( new CustomEvent( ERROR_SERVICE_UNAVAILABLE ) );
 				}
 
@@ -171,6 +193,7 @@ export default class SuggestionsEventSource extends EventTarget {
 				 * you exceeded your current quota please check your plan and billing details
 				 */
 				if ( response.status === 429 ) {
+					errorCode = ERROR_QUOTA_EXCEEDED;
 					this.dispatchEvent( new CustomEvent( ERROR_QUOTA_EXCEEDED ) );
 				}
 
@@ -179,9 +202,17 @@ export default class SuggestionsEventSource extends EventTarget {
 				 * request flagged by moderation system
 				 */
 				if ( response.status === 422 ) {
+					errorCode = ERROR_MODERATION;
 					this.dispatchEvent( new CustomEvent( ERROR_MODERATION ) );
 				}
 
+				// Always dispatch a global ERROR_RESPONSE event
+				this.dispatchEvent(
+					new CustomEvent( ERROR_RESPONSE, {
+						detail: getErrorData( errorCode ),
+					} )
+				);
+
 				throw new Error();
 			},
 
@@ -204,6 +235,11 @@ export default class SuggestionsEventSource extends EventTarget {
 		if ( replacedMessage.startsWith( 'JETPACK_AI_ERROR' ) ) {
 			// The unclear prompt marker was found, so we dispatch an error event
 			this.dispatchEvent( new CustomEvent( ERROR_UNCLEAR_PROMPT ) );
+			this.dispatchEvent(
+				new CustomEvent( ERROR_RESPONSE, {
+					detail: getErrorData( ERROR_UNCLEAR_PROMPT ),
+				} )
+			);
 		} else if ( 'JETPACK_AI_ERROR'.startsWith( replacedMessage ) ) {
 			// Partial unclear prompt marker was found, so we wait for more data and print a debug message without dispatching an event
 			debug( this.fullMessage );
@@ -276,6 +312,11 @@ export default class SuggestionsEventSource extends EventTarget {
 	processConnectionError( response ) {
 		debug( 'Connection error: %o', response );
 		this.dispatchEvent( new CustomEvent( ERROR_NETWORK, { detail: response } ) );
+		this.dispatchEvent(
+			new CustomEvent( ERROR_RESPONSE, {
+				detail: getErrorData( ERROR_NETWORK ),
+			} )
+		);
 	}
 
 	processErrorEvent( e ) {
@@ -283,5 +324,10 @@ export default class SuggestionsEventSource extends EventTarget {
 
 		// Dispatch a generic network error event
 		this.dispatchEvent( new CustomEvent( ERROR_NETWORK, { detail: e } ) );
+		this.dispatchEvent(
+			new CustomEvent( ERROR_RESPONSE, {
+				detail: getErrorData( ERROR_NETWORK ),
+			} )
+		);
 	}
 }