@automattic/jetpack-ai-client 0.1.0 → 0.1.1

package/src/icons/speak-tone.tsx

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+import React from 'react';
+
+const speakTone = (
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M12.5 10C12.5 11.3807 11.3807 12.5 10 12.5C8.61929 12.5 7.5 11.3807 7.5 10C7.5 8.61929 8.61929 7.5 10 7.5C11.3807 7.5 12.5 8.61929 12.5 10ZM14 10C14 12.2091 12.2091 14 10 14C7.79086 14 6 12.2091 6 10C6 7.79086 7.79086 6 10 6C12.2091 6 14 7.79086 14 10ZM16.75 21V19C16.75 17.4812 15.5188 16.25 14 16.25L6 16.25C4.48122 16.25 3.25 17.4812 3.25 19V21H4.75L4.75 19C4.75 18.3096 5.30964 17.75 6 17.75L14 17.75C14.6904 17.75 15.25 18.3096 15.25 19V21H16.75Z"
+			fill="currentColor"
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.976 16.3599C21.2507 14.5642 22.0001 12.3695 22.0001 9.99969C22.0001 7.63128 21.2515 5.43769 19.9782 3.64258L18.754 4.50967C19.8537 6.05996 20.5001 7.95434 20.5001 9.99969C20.5001 12.0464 19.8528 13.9419 18.7519 15.4928L19.976 16.3599ZM17.3357 14.4897C18.2357 13.222 18.7648 11.6727 18.7648 9.99969C18.7648 8.32808 18.2365 6.77984 17.3379 5.51279L16.1137 6.37988C16.8387 7.4021 17.2648 8.65114 17.2648 9.99969C17.2648 11.3496 16.8378 12.5998 16.1116 13.6226L17.3357 14.4897Z"
+			fill="currentColor"
+		/>
+	</SVG>
+);
+
+export default speakTone;

package/src/icons/stories/index.stories.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/components';
+import React from 'react';
+/**
+ * Internal dependencies
+ */
+import * as allIcons from '../index';
+import styles from './style.module.scss';
+/**
+ * Types
+ */
+import type { Meta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/AI Client/Icons',
+	component: allIcons,
+	parameters: {},
+} as Meta< typeof allIcons >;
+
+/**
+ * Icons story components.
+ *
+ * @returns {object} - story component
+ */
+function IconsStory() {
+	return (
+		<div className={ styles[ 'icons-container' ] }>
+			{ Object.entries( allIcons ).map( ( [ name, icon ] ) => {
+				return (
+					<div key={ name } className={ styles[ 'icon-container' ] }>
+						<Icon icon={ icon } size={ 32 } />
+						<div className={ styles[ 'icon-name' ] }>{ name }</div>
+					</div>
+				);
+			} ) }
+		</div>
+	);
+}
+
+const Template = args => <IconsStory { ...args } />;
+
+const DefaultArgs = {};
+export const Default = Template.bind( {} );
+Default.args = DefaultArgs;

package/src/icons/stories/style.module.scss

@@ -0,0 +1,21 @@
+.icons-container {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 20px;
+	flex-direction: column;
+}
+
+.icon-container {
+	padding: 10px;
+	box-shadow: 0 0 1px inset rgba(0, 0, 0 , 0.5 );
+	background-color: white;
+	border-radius: 5px;
+	margin: 2px;
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.icon-name {
+	font-size: 14px;
+}

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

@@ -6,19 +6,32 @@ import debugFactory from 'debug';
 /*
  * Types & constants
  */
-import type { PromptItemProps } from '../types';
+import {
+	ERROR_MODERATION,
+	ERROR_NETWORK,
+	ERROR_QUOTA_EXCEEDED,
+	ERROR_SERVICE_UNAVAILABLE,
+	ERROR_UNCLEAR_PROMPT,
+} from '../types';
+import type { PromptMessagesProp, PromptProp } from '../types';
 
 type SuggestionsEventSourceConstructorArgs = {
 	url?: string;
-	question: string | PromptItemProps[];
+	question: PromptProp;
 	token: string;
 	options?: {
 		postId?: number;
 		feature?: 'ai-assistant-experimental' | string | undefined;
 		fromCache?: boolean;
+		functions?: Array< object >;
 	};
 };
 
+type FunctionCallProps = {
+	name?: string;
+	arguments?: string;
+};
+
 const debug = debugFactory( 'jetpack-ai-client:suggestions-event-source' );
 
 /**
@@ -41,12 +54,17 @@ const debug = debugFactory( 'jetpack-ai-client:suggestions-event-source' );
  */
 export default class SuggestionsEventSource extends EventTarget {
 	fullMessage: string;
+	fullFunctionCall: FunctionCallProps;
 	isPromptClear: boolean;
 	controller: AbortController;
 
 	constructor( data: SuggestionsEventSourceConstructorArgs ) {
 		super();
 		this.fullMessage = '';
+		this.fullFunctionCall = {
+			name: '',
+			arguments: '',
+		};
 		this.isPromptClear = false;
 
 		// The AbortController is used to close the fetchEventSource connection
@@ -61,7 +79,18 @@ export default class SuggestionsEventSource extends EventTarget {
 		token,
 		options = {},
 	}: SuggestionsEventSourceConstructorArgs ) {
-		const bodyData = { post_id: options?.postId, messages: [], question: '', feature: '' };
+		const bodyData: {
+			post_id?: number;
+			messages?: PromptMessagesProp;
+			question?: PromptProp;
+			feature?: string;
+			functions?: Array< object >;
+		} = {};
+
+		// Populate body data with post id
+		if ( options?.postId ) {
+			bodyData.post_id = options.postId;
+		}
 
 		// If the url is not provided, we use the default one
 		if ( ! url ) {
@@ -76,7 +105,7 @@ export default class SuggestionsEventSource extends EventTarget {
 			debug( 'URL not provided, using default: %o', url );
 		}
 
-		// question can be a string or an array of PromptItemProps
+		// question can be a string or an array of PromptMessagesProp
 		if ( Array.isArray( question ) ) {
 			bodyData.messages = question;
 		} else {
@@ -89,6 +118,12 @@ export default class SuggestionsEventSource extends EventTarget {
 			bodyData.feature = options.feature;
 		}
 
+		// Propagate the functions option
+		if ( options?.functions?.length ) {
+			debug( 'Functions: %o', options.functions );
+			bodyData.functions = options.functions;
+		}
+
 		await fetchEventSource( url, {
 			openWhenHidden: true,
 			method: 'POST',
@@ -128,7 +163,7 @@ export default class SuggestionsEventSource extends EventTarget {
 				 * service unavailable
 				 */
 				if ( response.status === 503 ) {
-					this.dispatchEvent( new CustomEvent( 'error_service_unavailable' ) );
+					this.dispatchEvent( new CustomEvent( ERROR_SERVICE_UNAVAILABLE ) );
 				}
 
 				/*
@@ -136,7 +171,7 @@ export default class SuggestionsEventSource extends EventTarget {
 				 * you exceeded your current quota please check your plan and billing details
 				 */
 				if ( response.status === 429 ) {
-					this.dispatchEvent( new CustomEvent( 'error_quota_exceeded' ) );
+					this.dispatchEvent( new CustomEvent( ERROR_QUOTA_EXCEEDED ) );
 				}
 
 				/*
@@ -144,7 +179,7 @@ export default class SuggestionsEventSource extends EventTarget {
 				 * request flagged by moderation system
 				 */
 				if ( response.status === 422 ) {
-					this.dispatchEvent( new CustomEvent( 'error_moderation' ) );
+					this.dispatchEvent( new CustomEvent( ERROR_MODERATION ) );
 				}
 
 				throw new Error();
@@ -168,7 +203,7 @@ export default class SuggestionsEventSource extends EventTarget {
 		const replacedMessage = this.fullMessage.replace( /__|(\*\*)/g, '' );
 		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_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 );
@@ -184,14 +219,31 @@ export default class SuggestionsEventSource extends EventTarget {
 
 	processEvent( e: EventSourceMessage ) {
 		if ( e.data === '[DONE]' ) {
-			// Dispatch an event with the full content
-			this.dispatchEvent( new CustomEvent( 'done', { detail: this.fullMessage } ) );
-			debug( 'Done: %o', this.fullMessage );
+			if ( this.fullMessage.length ) {
+				// Dispatch an event with the full content
+				this.dispatchEvent( new CustomEvent( 'done', { detail: this.fullMessage } ) );
+				debug( 'Done: %o', this.fullMessage );
+				return;
+			}
+
+			if ( this.fullFunctionCall.name.length ) {
+				this.dispatchEvent( new CustomEvent( 'function_done', { detail: this.fullFunctionCall } ) );
+				debug( 'Done: %o', this.fullFunctionCall );
+				return;
+			}
+		}
+
+		let data;
+		try {
+			data = JSON.parse( e.data );
+		} catch ( err ) {
+			debug( 'Error parsing JSON', e, err );
 			return;
 		}
+		const { delta } = data?.choices?.[ 0 ] ?? { delta: { content: null, function_call: null } };
+		const chunk = delta.content;
+		const functionCallChunk = delta.function_call;
 
-		const data = JSON.parse( e.data );
-		const chunk = data.choices[ 0 ].delta.content;
 		if ( chunk ) {
 			this.fullMessage += chunk;
 			this.checkForUnclearPrompt();
@@ -200,20 +252,36 @@ export default class SuggestionsEventSource extends EventTarget {
 				// Dispatch an event with the chunk
 				this.dispatchEvent( new CustomEvent( 'chunk', { detail: chunk } ) );
 				// Dispatch an event with the full message
+				debug( 'suggestion: %o', this.fullMessage );
 				this.dispatchEvent( new CustomEvent( 'suggestion', { detail: this.fullMessage } ) );
 			}
 		}
+
+		if ( functionCallChunk ) {
+			if ( functionCallChunk.name != null ) {
+				this.fullFunctionCall.name += functionCallChunk.name;
+			}
+
+			if ( functionCallChunk.arguments != null ) {
+				this.fullFunctionCall.arguments += functionCallChunk.arguments;
+			}
+
+			// Dispatch an event with the function call
+			this.dispatchEvent(
+				new CustomEvent( 'functionCallChunk', { detail: this.fullFunctionCall } )
+			);
+		}
 	}
 
 	processConnectionError( response ) {
 		debug( 'Connection error: %o', response );
-		this.dispatchEvent( new CustomEvent( 'error_network', { detail: response } ) );
+		this.dispatchEvent( new CustomEvent( ERROR_NETWORK, { detail: response } ) );
 	}
 
 	processErrorEvent( e ) {
 		debug( 'onerror: %o', e );
 
 		// Dispatch a generic network error event
-		this.dispatchEvent( new CustomEvent( 'error_network', { detail: e } ) );
+		this.dispatchEvent( new CustomEvent( ERROR_NETWORK, { detail: e } ) );
 	}
 }

package/src/types.ts

@@ -1,4 +1,24 @@
+export const ERROR_SERVICE_UNAVAILABLE = 'error_service_unavailable' as const;
+export const ERROR_QUOTA_EXCEEDED = 'error_quota_exceeded' as const;
+export const ERROR_MODERATION = 'error_moderation' as const;
+export const ERROR_NETWORK = 'error_network' as const;
+export const ERROR_UNCLEAR_PROMPT = 'error_unclear_prompt' as const;
+
+export type SuggestionErrorCode =
+	| typeof ERROR_SERVICE_UNAVAILABLE
+	| typeof ERROR_QUOTA_EXCEEDED
+	| typeof ERROR_MODERATION
+	| typeof ERROR_NETWORK
+	| typeof ERROR_UNCLEAR_PROMPT;
+
+/*
+ * Prompt types
+ */
 export type PromptItemProps = {
 	role: 'system' | 'user' | 'assistant';
 	content: string;
 };
+
+export type PromptMessagesProp = Array< PromptItemProps >;
+
+export type PromptProp = PromptMessagesProp | string;

package/src/index.js

@@ -1,26 +0,0 @@
-import apiFetch from '@wordpress/api-fetch';
-
-/**
- * Fetches images from Jetpack AI
- *
- * It's up to the consumer to catch errors
- *
- * @param {*} prompt  - The prompt to send to Jetpack AI
- * @param {*} postId - The post ID where the completion is being requested
- * @returns {Promise<Array<string>>} The images
- */
-export function requestImages( prompt, postId ) {
-	return apiFetch( {
-		path: '/wpcom/v2/jetpack-ai/images/generations',
-		method: 'POST',
-		data: {
-			prompt,
-			post_id: postId,
-		},
-	} ).then( res => {
-		const images = res.data.map( image => {
-			return 'data:image/png;base64,' + image.b64_json;
-		} );
-		return images;
-	} );
-}