@automattic/jetpack-ai-client 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -5,6 +5,10 @@ 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.8.1] - 2024-02-27
+### Changed
+- AI Client: support audio transcription and transcription post-processing canceling. [#35923]
+
 ## [0.8.0] - 2024-02-26
 ### Added
 - Add upgrade message for free tier [#35794]
@@ -229,6 +233,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.8.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.8.0...v0.8.1
 [0.8.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.6.1...v0.7.0
 [0.6.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.6.0...v0.6.1

package/build/audio-transcription/index.d.ts

@@ -1,12 +1,9 @@
-/**
- * Types
- */
-import { CancelablePromise } from '../types.js';
 /**
  * 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.
+ * @param {AbortSignal} requestAbortSignal - The signal to abort the request.
  * @returns {Promise<string>} - The promise of a string containing the transcribed audio.
  */
-export default function transcribeAudio(audio: Blob, feature?: string): CancelablePromise<string>;
+export default function transcribeAudio(audio: Blob, feature?: string, requestAbortSignal?: AbortSignal): Promise<string>;

package/build/audio-transcription/index.js

@@ -13,11 +13,10 @@ const debug = debugFactory('jetpack-ai-client:audio-transcription');
  *
  * @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.
+ * @param {AbortSignal} requestAbortSignal - The signal to abort the request.
  * @returns {Promise<string>} - The promise of a string containing the transcribed audio.
  */
-export default async function transcribeAudio(audio, feature
-// @ts-expect-error Promises are not cancelable by default
-) {
+export default async function transcribeAudio(audio, feature, requestAbortSignal) {
     debug('Transcribing audio: %o. Feature: %o', audio, feature);
     // Get a token to use the transcription service
     let token = '';
@@ -40,6 +39,7 @@ export default async function transcribeAudio(audio, feature
             method: 'POST',
             body: formData,
             headers,
+            signal: requestAbortSignal ?? undefined,
         });
         debug('Transcription response: %o', response);
         return response.text;

package/build/hooks/use-audio-transcription/index.d.ts

@@ -1,7 +1,3 @@
-/**
- * Types
- */
-import type { CancelablePromise } from '../../types.js';
 /**
  * The response from the audio transcription hook.
  */
@@ -9,7 +5,8 @@ export type UseAudioTranscriptionReturn = {
     transcriptionResult: string;
     isTranscribingAudio: boolean;
     transcriptionError: string;
-    transcribeAudio: (audio: Blob) => CancelablePromise;
+    transcribeAudio: (audio: Blob) => void;
+    cancelTranscription: () => void;
 };
 /**
  * The props for the audio transcription hook.

package/build/hooks/use-audio-transcription/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useState, useRef } from '@wordpress/element';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -18,6 +18,7 @@ export default function useAudioTranscription({ feature, onReady, onError, }) {
     const [transcriptionResult, setTranscriptionResult] = useState('');
     const [transcriptionError, setTranscriptionError] = useState('');
     const [isTranscribingAudio, setIsTranscribingAudio] = useState(false);
+    const abortController = useRef(null);
     const handleAudioTranscription = useCallback((audio) => {
         debug('Transcribing audio');
         /**
@@ -26,31 +27,44 @@ export default function useAudioTranscription({ feature, onReady, onError, }) {
         setTranscriptionResult('');
         setTranscriptionError('');
         setIsTranscribingAudio(true);
+        /*
+         * Create an AbortController to cancel the transcription.
+         */
+        const controller = new AbortController();
+        abortController.current = controller;
         /**
          * Call the audio transcription library.
          */
-        const promise = transcribeAudio(audio, feature)
+        transcribeAudio(audio, feature, controller.signal)
             .then(transcriptionText => {
-            if (promise.canceled) {
-                return;
-            }
             setTranscriptionResult(transcriptionText);
             onReady?.(transcriptionText);
         })
             .catch(error => {
-            if (promise.canceled) {
-                return;
+            if (!controller.signal.aborted) {
+                setTranscriptionError(error.message);
+                onError?.(error.message);
             }
-            setTranscriptionError(error.message);
-            onError?.(error.message);
         })
             .finally(() => setIsTranscribingAudio(false));
-        return promise;
     }, [transcribeAudio, setTranscriptionResult, setTranscriptionError, setIsTranscribingAudio]);
+    const handleAudioTranscriptionCancel = useCallback(() => {
+        /*
+         * Cancel the transcription.
+         */
+        abortController.current?.abort();
+        /*
+         * Reset the transcription result and error.
+         */
+        setTranscriptionResult('');
+        setTranscriptionError('');
+        setIsTranscribingAudio(false);
+    }, [abortController, setTranscriptionResult, setTranscriptionError, setIsTranscribingAudio]);
     return {
         transcriptionResult,
         isTranscribingAudio,
         transcriptionError,
         transcribeAudio: handleAudioTranscription,
+        cancelTranscription: handleAudioTranscriptionCancel,
     };
 }

package/build/hooks/use-transcription-post-processing/index.d.ts

@@ -11,6 +11,7 @@ export type UseTranscriptionPostProcessingReturn = {
     isProcessingTranscription: boolean;
     postProcessingError: string;
     processTranscription: (action: PostProcessingAction, transcription: string) => void;
+    cancelTranscriptionProcessing: () => void;
 };
 /**
  * The props for the transcription post-processing hook.

package/build/hooks/use-transcription-post-processing/index.js

@@ -38,7 +38,7 @@ export default function useTranscriptionPostProcessing({ feature, onReady, onErr
         setPostProcessingError(errorData.message);
         onError?.(errorData.message);
     }, [setPostProcessingError, onError]);
-    const { request } = useAiSuggestions({
+    const { request, stopSuggestion } = useAiSuggestions({
         autoRequest: false,
         onSuggestion: handleOnSuggestion,
         onDone: handleOnDone,
@@ -75,10 +75,18 @@ export default function useTranscriptionPostProcessing({ feature, onReady, onErr
         request,
         feature,
     ]);
+    const handleTranscriptionPostProcessingCancel = useCallback(() => {
+        /*
+         * Stop the suggestion streaming.
+         */
+        stopSuggestion();
+        setIsProcessingTranscription(false);
+    }, [stopSuggestion, setIsProcessingTranscription]);
     return {
         postProcessingResult,
         isProcessingTranscription,
         postProcessingError,
         processTranscription: handleTranscriptionPostProcessing,
+        cancelTranscriptionProcessing: handleTranscriptionPostProcessingCancel,
     };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.8.0",
+	"version": "0.8.1",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -39,8 +39,8 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.17",
-		"@automattic/jetpack-connection": "^0.32.3",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.2",
+		"@automattic/jetpack-connection": "^0.32.4",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.3",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.2.33",
 		"@wordpress/api-fetch": "6.48.0",

package/src/audio-transcription/index.ts

@@ -7,10 +7,6 @@ import debugFactory from 'debug';
  */
 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' );
 
@@ -29,13 +25,14 @@ type AudioTranscriptionResponse = {
  *
  * @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.
+ * @param {AbortSignal} requestAbortSignal - The signal to abort the request.
  * @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 > {
+	feature?: string,
+	requestAbortSignal?: AbortSignal
+): Promise< string > {
 	debug( 'Transcribing audio: %o. Feature: %o', audio, feature );
 
 	// Get a token to use the transcription service
@@ -63,6 +60,7 @@ export default async function transcribeAudio(
 			method: 'POST',
 			body: formData,
 			headers,
+			signal: requestAbortSignal ?? undefined,
 		} );
 
 		debug( 'Transcription response: %o', response );

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

@@ -1,16 +1,12 @@
 /**
  * External dependencies
  */
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useState, useRef } 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' );
 
@@ -21,7 +17,8 @@ export type UseAudioTranscriptionReturn = {
 	transcriptionResult: string;
 	isTranscribingAudio: boolean;
 	transcriptionError: string;
-	transcribeAudio: ( audio: Blob ) => CancelablePromise;
+	transcribeAudio: ( audio: Blob ) => void;
+	cancelTranscription: () => void;
 };
 
 /**
@@ -47,6 +44,7 @@ export default function useAudioTranscription( {
 	const [ transcriptionResult, setTranscriptionResult ] = useState< string >( '' );
 	const [ transcriptionError, setTranscriptionError ] = useState< string >( '' );
 	const [ isTranscribingAudio, setIsTranscribingAudio ] = useState( false );
+	const abortController = useRef< AbortController >( null );
 
 	const handleAudioTranscription = useCallback(
 		( audio: Blob ) => {
@@ -59,37 +57,49 @@ export default function useAudioTranscription( {
 			setTranscriptionError( '' );
 			setIsTranscribingAudio( true );
 
+			/*
+			 * Create an AbortController to cancel the transcription.
+			 */
+			const controller = new AbortController();
+			abortController.current = controller;
+
 			/**
 			 * Call the audio transcription library.
 			 */
-			const promise: CancelablePromise = transcribeAudio( audio, feature )
+			transcribeAudio( audio, feature, controller.signal )
 				.then( transcriptionText => {
-					if ( promise.canceled ) {
-						return;
-					}
-
 					setTranscriptionResult( transcriptionText );
 					onReady?.( transcriptionText );
 				} )
 				.catch( error => {
-					if ( promise.canceled ) {
-						return;
+					if ( ! controller.signal.aborted ) {
+						setTranscriptionError( error.message );
+						onError?.( error.message );
 					}
-
-					setTranscriptionError( error.message );
-					onError?.( error.message );
 				} )
 				.finally( () => setIsTranscribingAudio( false ) );
-
-			return promise;
 		},
 		[ transcribeAudio, setTranscriptionResult, setTranscriptionError, setIsTranscribingAudio ]
 	);
 
+	const handleAudioTranscriptionCancel = useCallback( () => {
+		/*
+		 * Cancel the transcription.
+		 */
+		abortController.current?.abort();
+		/*
+		 * Reset the transcription result and error.
+		 */
+		setTranscriptionResult( '' );
+		setTranscriptionError( '' );
+		setIsTranscribingAudio( false );
+	}, [ abortController, setTranscriptionResult, setTranscriptionError, setIsTranscribingAudio ] );
+
 	return {
 		transcriptionResult,
 		isTranscribingAudio,
 		transcriptionError,
 		transcribeAudio: handleAudioTranscription,
+		cancelTranscription: handleAudioTranscriptionCancel,
 	};
 }

package/src/hooks/use-transcription-post-processing/index.ts

@@ -25,6 +25,7 @@ export type UseTranscriptionPostProcessingReturn = {
 	isProcessingTranscription: boolean;
 	postProcessingError: string;
 	processTranscription: ( action: PostProcessingAction, transcription: string ) => void;
+	cancelTranscriptionProcessing: () => void;
 };
 
 /**
@@ -81,7 +82,7 @@ export default function useTranscriptionPostProcessing( {
 		[ setPostProcessingError, onError ]
 	);
 
-	const { request } = useAiSuggestions( {
+	const { request, stopSuggestion } = useAiSuggestions( {
 		autoRequest: false,
 		onSuggestion: handleOnSuggestion,
 		onDone: handleOnDone,
@@ -126,10 +127,19 @@ export default function useTranscriptionPostProcessing( {
 		]
 	);
 
+	const handleTranscriptionPostProcessingCancel = useCallback( () => {
+		/*
+		 * Stop the suggestion streaming.
+		 */
+		stopSuggestion();
+		setIsProcessingTranscription( false );
+	}, [ stopSuggestion, setIsProcessingTranscription ] );
+
 	return {
 		postProcessingResult,
 		isProcessingTranscription,
 		postProcessingError,
 		processTranscription: handleTranscriptionPostProcessing,
+		cancelTranscriptionProcessing: handleTranscriptionPostProcessingCancel,
 	};
 }