@automattic/jetpack-ai-client 0.6.1 → 0.8.0

package/build/types.d.ts

@@ -13,13 +13,20 @@ export type PromptItemProps = {
 };
 export type PromptMessagesProp = Array<PromptItemProps>;
 export type PromptProp = PromptMessagesProp | string;
-export type { UseAiContextOptions } from './data-flow/use-ai-context';
-export type { RequestingErrorProps } from './hooks/use-ai-suggestions';
+export type { UseAiContextOptions } from './data-flow/use-ai-context.js';
+export type { RequestingErrorProps } from './hooks/use-ai-suggestions/index.js';
+export type { UseAudioTranscriptionProps, UseAudioTranscriptionReturn, } from './hooks/use-audio-transcription/index.js';
+export type { UseTranscriptionPostProcessingProps, UseTranscriptionPostProcessingReturn, PostProcessingAction, } from './hooks/use-transcription-post-processing/index.js';
+export { TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT } from './hooks/use-transcription-post-processing/index.js';
 export declare const REQUESTING_STATES: readonly ["init", "requesting", "suggesting", "done", "error"];
 export type RequestingStateProp = (typeof REQUESTING_STATES)[number];
 export declare const AI_MODEL_GPT_3_5_Turbo_16K: "gpt-3.5-turbo-16k";
 export declare const AI_MODEL_GPT_4: "gpt-4";
 export type AiModelTypeProp = typeof AI_MODEL_GPT_3_5_Turbo_16K | typeof AI_MODEL_GPT_4;
+export type { RecordingState } from './hooks/use-media-recording/index.js';
+export type CancelablePromise<T = void> = Promise<T> & {
+    canceled?: boolean;
+};
 interface JPConnectionInitialState {
     apiNonce: string;
     siteSuffix: string;

package/build/types.js

@@ -5,6 +5,10 @@ export const ERROR_CONTEXT_TOO_LARGE = 'error_context_too_large';
 export const ERROR_NETWORK = 'error_network';
 export const ERROR_UNCLEAR_PROMPT = 'error_unclear_prompt';
 export const ERROR_RESPONSE = 'error_response';
+/*
+ * Hook constants
+ */
+export { TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT } from './hooks/use-transcription-post-processing/index.js';
 /*
  * Requests types
  */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.6.1",
+	"version": "0.8.0",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -22,9 +22,9 @@
 	},
 	"type": "module",
 	"devDependencies": {
-		"@storybook/addon-actions": "7.6.5",
-		"@storybook/blocks": "7.6.5",
-		"@storybook/react": "7.6.5",
+		"@storybook/addon-actions": "7.6.17",
+		"@storybook/blocks": "7.6.17",
+		"@storybook/react": "7.6.17",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
 		"typescript": "5.0.4"
@@ -39,7 +39,7 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.17",
-		"@automattic/jetpack-connection": "^0.32.1",
+		"@automattic/jetpack-connection": "^0.32.3",
 		"@automattic/jetpack-shared-extension-utils": "^0.14.2",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.2.33",

package/src/api-fetch/index.ts

@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import apiFetchMod from '@wordpress/api-fetch';
+
+// @wordpress/api-fetch (as of 6.47.0) declares itself in such a way that tsc and node see the function at apiFetchMod.default
+// while some other environments (including code running inside WordPress itself) see it at apiFetch.
+// See https://arethetypeswrong.github.io/?p=@wordpress/api-fetch@6.47.0
+// This is a helper to simplify the usage of the api-fetch module on the ai-client package.
+type ApiFetchType = typeof apiFetchMod.default;
+const apiFetch: ApiFetchType = ( apiFetchMod.default ?? apiFetchMod ) as ApiFetchType;
+
+export default apiFetch;

package/src/ask-question/index.ts

@@ -2,11 +2,11 @@
  * External dependencies
  */
 import debugFactory from 'debug';
-import SuggestionsEventSource from '../suggestions-event-source';
+import SuggestionsEventSource from '../suggestions-event-source/index.js';
 /*
  * Types & constants
  */
-import type { AiModelTypeProp, PromptProp } from '../types';
+import type { AiModelTypeProp, PromptProp } from '../types.js';
 
 export type AskQuestionOptionsArgProps = {
 	/*

package/src/audio-transcription/index.ts

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import apiFetch from '../api-fetch/index.js';
+import requestJwt from '../jwt/index.js';
+/**
+ * Types
+ */
+import { CancelablePromise } from '../types.js';
+
+const debug = debugFactory( 'jetpack-ai-client:audio-transcription' );
+
+/**
+ * The response from the audio transcription service.
+ */
+type AudioTranscriptionResponse = {
+	/**
+	 * The transcribed text.
+	 */
+	text: string;
+};
+
+/**
+ * A function that takes an audio blob and transcribes it.
+ *
+ * @param {Blob} audio - The audio to be transcribed, from a recording or from a file.
+ * @param {string} feature - The feature name that is calling the transcription.
+ * @returns {Promise<string>} - The promise of a string containing the transcribed audio.
+ */
+export default async function transcribeAudio(
+	audio: Blob,
+	feature?: string
+	// @ts-expect-error Promises are not cancelable by default
+): CancelablePromise< string > {
+	debug( 'Transcribing audio: %o. Feature: %o', audio, feature );
+
+	// Get a token to use the transcription service
+	let token = '';
+	try {
+		token = ( await requestJwt() ).token;
+	} catch ( error ) {
+		debug( 'Error getting token: %o', error );
+		return Promise.reject( error );
+	}
+
+	// Build a FormData object to hold the audio file
+	const formData = new FormData();
+	formData.append( 'audio_file', audio );
+
+	try {
+		const headers = {
+			Authorization: `Bearer ${ token }`,
+		};
+
+		const response: AudioTranscriptionResponse = await apiFetch( {
+			url: `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${
+				feature ? `?feature=${ feature }` : ''
+			}`,
+			method: 'POST',
+			body: formData,
+			headers,
+		} );
+
+		debug( 'Transcription response: %o', response );
+
+		return response.text;
+	} catch ( error ) {
+		debug( 'Transcription error response: %o', error );
+		return Promise.reject( error );
+	}
+}

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

@@ -4,27 +4,23 @@
 import { PlainText } from '@wordpress/block-editor';
 import { Button, ButtonGroup } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
-import {
-	forwardRef,
-	useImperativeHandle,
-	useRef,
-	useEffect,
-	useCallback,
-} from '@wordpress/element';
+import { useImperativeHandle, useRef, useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall, check, arrowUp, trash, reusableBlock } from '@wordpress/icons';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 import React from 'react';
 /**
  * Internal dependencies
  */
 import './style.scss';
-import AiStatusIndicator from '../ai-status-indicator';
-import { GuidelineMessage } from './message';
+import AiStatusIndicator from '../ai-status-indicator/index.js';
+import { GuidelineMessage } from './message.js';
 /**
  * Types
  */
-import type { RequestingStateProp } from '../../types';
+import type { RequestingStateProp } from '../../types.js';
+import type { ReactElement } from 'react';
 type AiControlProps = {
 	disabled?: boolean;
 	value: string;
@@ -35,15 +31,15 @@ type AiControlProps = {
 	isTransparent?: boolean;
 	state?: RequestingStateProp;
 	showGuideLine?: boolean;
-	customFooter?: React.ReactElement;
+	customFooter?: ReactElement;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
 	onStop?: () => void;
 	onAccept?: () => void;
 	onDiscard?: () => void;
 	showRemove?: boolean;
-	bannerComponent?: React.ReactElement;
-	errorComponent?: React.ReactElement;
+	bannerComponent?: ReactElement;
+	errorComponent?: ReactElement;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -54,7 +50,7 @@ const noop = () => {};
  *
  * @param {AiControlProps} props       - Component props.
  * @param {React.MutableRefObject} ref - Ref to the component.
- * @returns {React.ReactElement}         Rendered component.
+ * @returns {ReactElement}         Rendered component.
  */
 export function AIControl(
 	{
@@ -77,8 +73,8 @@ export function AIControl(
 		bannerComponent = null,
 		errorComponent = null,
 	}: AiControlProps,
-	ref: React.MutableRefObject< null > // eslint-disable-line @typescript-eslint/ban-types
-): React.ReactElement {
+	ref: React.MutableRefObject< null >
+): ReactElement {
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';
 	const [ editRequest, setEditRequest ] = React.useState( false );

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

@@ -1,9 +1,9 @@
 /**
  * External dependencies
  */
-import { ExternalLink } from '@wordpress/components';
+import { ExternalLink, Button } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Icon,
 	warning,
@@ -84,3 +84,35 @@ export function GuidelineMessage(): React.ReactElement {
 		</Message>
 	);
 }
+
+/**
+ * React component to render a upgrade message.
+ *
+ * @param {number} requestsRemaining - Number of requests remaining.
+ * @returns {React.ReactElement } - Message component.
+ */
+export function UpgradeMessage( {
+	requestsRemaining,
+	onUpgradeClick,
+}: {
+	requestsRemaining: number;
+	onUpgradeClick: () => void;
+} ): React.ReactElement {
+	return (
+		<Message severity={ MESSAGE_SEVERITY_INFO }>
+			{ createInterpolateElement(
+				sprintf(
+					// translators: %1$d: number of requests remaining
+					__(
+						'You have %1$d free requests remaining. <link>Upgrade</link> and avoid interruptions',
+						'jetpack-ai-client'
+					),
+					requestsRemaining
+				),
+				{
+					link: <Button variant="link" onClick={ onUpgradeClick } />,
+				}
+			) }
+		</Message>
+	);
+}

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

@@ -124,5 +124,11 @@
 		.components-external-link {
 			color: var( --jp-gray-50 );
 		}
+
+		// Force padding 0 in link buttons, since default Gutenberg version in WordPress doesn't use iframe and
+		// Buttons receive styles from edit-post-visual-editor.
+		.components-button.is-link {
+			padding: 0;
+		}
 	}
 }

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

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 /*
  * Types
  */
-import type { RequestingStateProp } from '../../types';
+import type { RequestingStateProp } from '../../types.js';
 export type AiStatusIndicatorIconSize = 24 | 32 | 48 | 64;
 import type React from 'react';
 

package/src/components/audio-duration-display/index.tsx

@@ -1,18 +1,15 @@
-/*
- * External dependencies
- */
-import { useState, useEffect } from '@wordpress/element';
 /*
  * Internal dependencies
  */
-import { formatTime, getDuration } from './lib/media';
+import { formatTime } from './lib/media.js';
 /*
  * Types
  */
 import type React from 'react';
 
 type AudioDurationDisplayProps = {
-	url: string;
+	duration: number;
+	className?: string | null;
 };
 
 /**
@@ -22,16 +19,8 @@ type AudioDurationDisplayProps = {
  * @returns {React.ReactElement}              Rendered component.
  */
 export default function AudioDurationDisplay( {
-	url,
+	duration,
+	className,
 }: AudioDurationDisplayProps ): React.ReactElement {
-	const [ duration, setDuration ] = useState( 0 );
-	useEffect( () => {
-		if ( ! url ) {
-			return;
-		}
-
-		getDuration( url ).then( setDuration );
-	}, [ url ] );
-
-	return <span>{ formatTime( duration, { addDecimalPart: false } ) }</span>;
+	return <span className={ className }>{ formatTime( duration, { addDecimalPart: false } ) }</span>;
 }

package/src/components/audio-duration-display/lib/media.ts

@@ -1,67 +1,44 @@
-/**
- * Function to get duration of audio file
- *
- * @param {string} url - The url of the audio file
- * @returns {Promise<number>} The duration of the audio file
- * @see https://stackoverflow.com/questions/21522036/html-audio-tag-duration-always-infinity
- */
-export function getDuration( url: string ): Promise< number > {
-	return new Promise( next => {
-		const tmpAudioInstance = new Audio( url );
-		tmpAudioInstance.addEventListener(
-			'durationchange',
-			function () {
-				if ( this.duration === Infinity ) {
-					return;
-				}
-
-				const duration = this.duration;
-				tmpAudioInstance.remove(); // remove instance from memory
-				next( duration );
-			},
-			false
-		);
-
-		tmpAudioInstance.load();
-		tmpAudioInstance.currentTime = 24 * 60 * 60; // Fake big time
-		tmpAudioInstance.volume = 0;
-		tmpAudioInstance.play(); // This will call `durationchange` event
-	} );
-}
-
 type FormatTimeOptions = {
 	/**
 	 * Whether to add the decimal part to the formatted time.
-	 *
 	 */
 	addDecimalPart?: boolean;
+
+	/**
+	 * Whether to show the minutes part of the formatted time even when it's 0.
+	 */
+	showMinutes?: boolean;
+
+	/**
+	 * Whether to show the hours part of the formatted time even when it's 0.
+	 */
+	showHours?: boolean;
 };
 
 /**
  * Formats the given time in milliseconds into a string with the format HH:MM:SS.DD,
  * adding hours and minutes only when needed.
  *
- * @param {number} time               - The time in seconds to format.
+ * @param {number} time               - The time in milliseconds to format.
  * @param {FormatTimeOptions} options - The arguments.
  * @returns {string}                    The formatted time string.
  * @example
- * const formattedTime1 = formatTime( 1234567 );                       // Returns "20:34.56"
- * const formattedTime2 = formatTime( 45123 );                         // Returns "45.12"
- * const formattedTime3 = formatTime( 64, { addDecimalPart: false } ); // Returns "01:04"
+ * const formattedTime1 = formatTime( 1234567, { addDecimalPart: true } ); // Returns "20:34.56"
+ * const formattedTime2 = formatTime( 45123 );                             // Returns "00.45"
+ * const formattedTime3 = formatTime( 1200, { showHours: true } );         // Returns "00:00:01"
  */
 export function formatTime(
 	time: number,
-	{ addDecimalPart = true }: FormatTimeOptions = {}
+	{ addDecimalPart = false, showMinutes = true, showHours = false }: FormatTimeOptions = {}
 ): string {
-	time = time * 1000;
 	const hours = Math.floor( time / 3600000 );
 	const minutes = Math.floor( time / 60000 ) % 60;
 	const seconds = Math.floor( time / 1000 ) % 60;
 	const deciseconds = Math.floor( time / 10 ) % 100;
 
 	const parts = [
-		hours > 0 ? hours.toString().padStart( 2, '0' ) + ':' : '',
-		hours > 0 || minutes > 0 ? minutes.toString().padStart( 2, '0' ) + ':' : '',
+		hours > 0 || showHours ? hours.toString().padStart( 2, '0' ) + ':' : '',
+		hours > 0 || minutes > 0 || showMinutes ? minutes.toString().padStart( 2, '0' ) + ':' : '',
 		seconds.toString().padStart( 2, '0' ),
 	];
 

package/src/components/index.ts

@@ -1,4 +1,8 @@
-export { default as AIControl } from './ai-control';
-export { default as AiStatusIndicator } from './ai-status-indicator';
-export { default as AudioDurationDisplay } from './audio-duration-display';
-export { GuidelineMessage, default as FooterMessage } from './ai-control/message';
+export { default as AIControl } from './ai-control/index.js';
+export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
+export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
+export {
+	GuidelineMessage,
+	UpgradeMessage,
+	default as FooterMessage,
+} from './ai-control/message.js';

package/src/data-flow/context.tsx

@@ -1,16 +1,15 @@
 /**
  * External dependencies
  */
-import { createContext } from '@wordpress/element';
-import React from 'react';
+import React, { createContext } from 'react';
 /**
  * Types & Constants
  */
-import SuggestionsEventSource from '../suggestions-event-source';
-import type { AskQuestionOptionsArgProps } from '../ask-question';
-import type { RequestingErrorProps } from '../hooks/use-ai-suggestions';
-import type { PromptProp } from '../types';
-import type { RequestingStateProp } from '../types';
+import SuggestionsEventSource from '../suggestions-event-source/index.js';
+import type { AskQuestionOptionsArgProps } from '../ask-question/index.js';
+import type { RequestingErrorProps } from '../hooks/use-ai-suggestions/index.js';
+import type { PromptProp } from '../types.js';
+import type { RequestingStateProp } from '../types.js';
 
 export type AiDataContextProps = {
 	/*
@@ -61,7 +60,7 @@ type AiDataContextProviderProps = {
  *
  * @returns {AiDataContextProps} Context.
  */
-export const AiDataContext = createContext( {} as AiDataContextProps );
+export const AiDataContext = createContext< AiDataContextProps | object >( {} );
 
 /**
  * AI Data Context Provider

package/src/data-flow/index.ts

@@ -1,3 +1,3 @@
-export { AiDataContext, AiDataContextProvider } from './context';
-export { default as withAiDataProvider } from './with-ai-assistant-data';
-export { default as useAiContext } from './use-ai-context';
+export { AiDataContext, AiDataContextProvider } from './context.js';
+export { default as withAiDataProvider } from './with-ai-assistant-data.js';
+export { default as useAiContext } from './use-ai-context.js';

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

@@ -1,17 +1,17 @@
 /**
  * External dependencies
  */
-import { useCallback, useContext, useEffect } from '@wordpress/element';
+import { useCallback, useContext, useEffect } from 'react';
 /**
  * Internal dependencies
  */
-import { ERROR_RESPONSE, RequestingErrorProps } from '../types';
-import { AiDataContext } from '.';
+import { ERROR_RESPONSE, RequestingErrorProps } from '../types.js';
+import { AiDataContext } from './index.js';
 /**
  * Types & constants
  */
-import type { AiDataContextProps } from './context';
-import type { AskQuestionOptionsArgProps } from '../ask-question';
+import type { AiDataContextProps } from './context.js';
+import type { AskQuestionOptionsArgProps } from '../ask-question/index.js';
 
 export type UseAiContextOptions = {
 	/*
@@ -48,7 +48,7 @@ export default function useAiContext( {
 	onSuggestion,
 	onError,
 }: UseAiContextOptions = {} ): AiDataContextProps {
-	const context = useContext( AiDataContext );
+	const context = useContext( AiDataContext ) as AiDataContextProps;
 	const { eventSource } = context;
 
 	const done = useCallback( ( event: CustomEvent ) => onDone?.( event?.detail ), [ onDone ] );

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

@@ -7,8 +7,8 @@ import React from 'react';
 /**
  * Internal Dependencies
  */
-import useAiSuggestions from '../hooks/use-ai-suggestions';
-import { AiDataContextProvider } from '.';
+import useAiSuggestions from '../hooks/use-ai-suggestions/index.js';
+import { AiDataContextProvider } from './index.js';
 
 /**
  * High Order Component that provides the

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

@@ -7,21 +7,21 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import askQuestion from '../../ask-question';
+import askQuestion from '../../ask-question/index.js';
 import {
 	ERROR_MODERATION,
 	ERROR_NETWORK,
 	ERROR_QUOTA_EXCEEDED,
 	ERROR_SERVICE_UNAVAILABLE,
 	ERROR_UNCLEAR_PROMPT,
-} from '../../types';
+} from '../../types.js';
 /**
  * Types & constants
  */
-import type { AskQuestionOptionsArgProps } from '../../ask-question';
-import type SuggestionsEventSource from '../../suggestions-event-source';
-import type { PromptProp, SuggestionErrorCode } from '../../types';
-import type { RequestingStateProp } from '../../types';
+import type { AskQuestionOptionsArgProps } from '../../ask-question/index.js';
+import type SuggestionsEventSource from '../../suggestions-event-source/index.js';
+import type { PromptProp, SuggestionErrorCode } from '../../types.js';
+import type { RequestingStateProp } from '../../types.js';
 
 export type RequestingErrorProps = {
 	/*

package/src/hooks/use-audio-transcription/index.ts

@@ -0,0 +1,95 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import transcribeAudio from '../../audio-transcription/index.js';
+/**
+ * Types
+ */
+import type { CancelablePromise } from '../../types.js';
+
+const debug = debugFactory( 'jetpack-ai-client:use-audio-transcription' );
+
+/**
+ * The response from the audio transcription hook.
+ */
+export type UseAudioTranscriptionReturn = {
+	transcriptionResult: string;
+	isTranscribingAudio: boolean;
+	transcriptionError: string;
+	transcribeAudio: ( audio: Blob ) => CancelablePromise;
+};
+
+/**
+ * The props for the audio transcription hook.
+ */
+export type UseAudioTranscriptionProps = {
+	feature: string;
+	onReady?: ( transcription: string ) => void;
+	onError?: ( error: string ) => void;
+};
+
+/**
+ * A hook to handle audio transcription.
+ *
+ * @param {string} feature - The feature name that is calling the transcription.
+ * @returns {UseAudioTranscriptionReturn} - Object with properties to get the transcription data.
+ */
+export default function useAudioTranscription( {
+	feature,
+	onReady,
+	onError,
+}: UseAudioTranscriptionProps ): UseAudioTranscriptionReturn {
+	const [ transcriptionResult, setTranscriptionResult ] = useState< string >( '' );
+	const [ transcriptionError, setTranscriptionError ] = useState< string >( '' );
+	const [ isTranscribingAudio, setIsTranscribingAudio ] = useState( false );
+
+	const handleAudioTranscription = useCallback(
+		( audio: Blob ) => {
+			debug( 'Transcribing audio' );
+
+			/**
+			 * Reset the transcription result and error.
+			 */
+			setTranscriptionResult( '' );
+			setTranscriptionError( '' );
+			setIsTranscribingAudio( true );
+
+			/**
+			 * Call the audio transcription library.
+			 */
+			const promise: CancelablePromise = transcribeAudio( audio, feature )
+				.then( transcriptionText => {
+					if ( promise.canceled ) {
+						return;
+					}
+
+					setTranscriptionResult( transcriptionText );
+					onReady?.( transcriptionText );
+				} )
+				.catch( error => {
+					if ( promise.canceled ) {
+						return;
+					}
+
+					setTranscriptionError( error.message );
+					onError?.( error.message );
+				} )
+				.finally( () => setIsTranscribingAudio( false ) );
+
+			return promise;
+		},
+		[ transcribeAudio, setTranscriptionResult, setTranscriptionError, setIsTranscribingAudio ]
+	);
+
+	return {
+		transcriptionResult,
+		isTranscribingAudio,
+		transcriptionError,
+		transcribeAudio: handleAudioTranscription,
+	};
+}