@automattic/jetpack-ai-client 0.8.0 → 0.8.2

package/CHANGELOG.md

@@ -5,6 +5,24 @@ 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.2] - 2024-03-04
+### Added
+- AI Client: add audio validation hook. [#36043]
+- Voice to Content: Close audio stream on hook destruction [#36086]
+
+### Changed
+- AI Client: change loading and error state handling on media recording hook. [#36001]
+- AI Client: publish audio information on the validation success callback of the audio validation hook. [#36094]
+- Updated package dependencies. [#36095]
+- Updated package dependencies. [#36143]
+
+### Fixed
+- AI Client: fixed transcription request from P2 editor [#36081]
+
+## [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 +247,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.8.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.8.1...v0.8.2
+[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

@@ -5,7 +5,6 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import apiFetch from '../api-fetch/index.js';
 import requestJwt from '../jwt/index.js';
 const debug = debugFactory('jetpack-ai-client:audio-transcription');
 /**
@@ -13,11 +12,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 = '';
@@ -35,14 +33,19 @@ export default async function transcribeAudio(audio, feature
         const headers = {
             Authorization: `Bearer ${token}`,
         };
-        const response = await apiFetch({
-            url: `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${feature ? `?feature=${feature}` : ''}`,
+        const URL = `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${feature ? `?feature=${feature}` : ''}`;
+        return fetch(URL, {
             method: 'POST',
             body: formData,
             headers,
+            signal: requestAbortSignal ?? undefined,
+        }).then(response => {
+            debug('Transcription response: %o', response);
+            if (response.ok) {
+                return response.json().then(data => data?.text);
+            }
+            return response.json().then(data => Promise.reject(data));
         });
-        debug('Transcription response: %o', response);
-        return response.text;
     }
     catch (error) {
         debug('Transcription error response: %o', error);

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,13 +1,46 @@
 /**
  * External dependencies
  */
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useState, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
 import transcribeAudio from '../../audio-transcription/index.js';
 const debug = debugFactory('jetpack-ai-client:use-audio-transcription');
+/**
+ * Map error response to a string.
+ * @param {Error | string | AudioTranscriptionErrorResponse} error - The error response from the audio transcription service.
+ * @returns {string} the translated error message
+ */
+const mapErrorResponse = (error) => {
+    if (typeof error === 'string') {
+        return error;
+    }
+    if ('code' in error) {
+        switch (error.code) {
+            case 'error_quota_exceeded':
+                return __('You exceeded your current quota, please check your plan details.', 'jetpack-ai-client');
+            case 'jetpack_ai_missing_audio_param':
+                return __('The audio_file is required to perform a transcription.', 'jetpack-ai-client');
+            case 'jetpack_ai_service_unavailable':
+                return __('The Jetpack AI service is temporarily unavailable.', 'jetpack-ai-client');
+            case 'file_size_not_supported':
+                return __('The provided audio file is too big.', 'jetpack-ai-client');
+            case 'file_type_not_supported':
+                return __('The provided audio file type is not supported.', 'jetpack-ai-client');
+            case 'jetpack_ai_error':
+                return __('There was an error processing the transcription request.', 'jetpack-ai-client');
+            default:
+                return error.message;
+        }
+    }
+    if ('message' in error) {
+        return error.message;
+    }
+    return __('There was an error processing the transcription request.', 'jetpack-ai-client');
+};
 /**
  * A hook to handle audio transcription.
  *
@@ -18,6 +51,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 +60,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?.(mapErrorResponse(error));
             }
-            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-audio-validation/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The return value for the audio validation hook.
+ */
+export type UseAudioValidationReturn = {
+    isValidatingAudio: boolean;
+    validateAudio: (audio: Blob, successCallback: (info?: ValidatedAudioInformation) => void, errorCallback: (error: string) => void) => void;
+};
+/**
+ * The validated audio information.
+ */
+export type ValidatedAudioInformation = {
+    duration: number;
+    isFile: boolean;
+    size: number;
+};
+/**
+ * Hook to handle the validation of an audio file.
+ *
+ * @returns {UseAudioValidationReturn} - Object with the audio validation state and the function to validate the audio.
+ */
+export default function useAudioValidation(): UseAudioValidationReturn;

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

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+const MAX_AUDIO_SIZE = 25000000; // 25MB
+const MAX_AUDIO_DURATION = 25 * 60; // 25 minutes
+const ALLOWED_MEDIA_TYPES = [
+    'audio/mpeg',
+    'audio/mp3',
+    'audio/ogg',
+    'audio/flac',
+    'audio/x-flac',
+    'audio/m4a',
+    'audio/x-m4a',
+    'audio/mp4',
+    'audio/wav',
+    'audio/wave',
+    'audio/x-wav',
+    'audio/webm',
+];
+/**
+ * Hook to handle the validation of an audio file.
+ *
+ * @returns {UseAudioValidationReturn} - Object with the audio validation state and the function to validate the audio.
+ */
+export default function useAudioValidation() {
+    const [isValidatingAudio, setIsValidatingAudio] = useState(false);
+    const validateAudio = useCallback((audio, successCallback, errorCallback) => {
+        setIsValidatingAudio(true);
+        // Check if the audio file is too large
+        if (audio?.size > MAX_AUDIO_SIZE) {
+            setIsValidatingAudio(false);
+            return errorCallback(__('The audio file is too large. The maximum file size is 25MB.', 'jetpack-ai-client'));
+        }
+        // When it's a file, check the media type
+        const isFile = audio instanceof File;
+        if (isFile) {
+            if (!ALLOWED_MEDIA_TYPES.includes(audio.type)) {
+                setIsValidatingAudio(false);
+                return errorCallback(__('The audio file type is not supported. Please use a supported audio file type.', 'jetpack-ai-client'));
+            }
+        }
+        // Check the duration of the audio
+        const audioContext = new AudioContext();
+        // Map blob to an array buffer
+        audio.arrayBuffer().then(arrayBuffer => {
+            // Decode audio file data contained in an ArrayBuffer
+            audioContext.decodeAudioData(arrayBuffer, function (audioBuffer) {
+                const duration = Math.ceil(audioBuffer.duration);
+                if (duration > MAX_AUDIO_DURATION) {
+                    setIsValidatingAudio(false);
+                    return errorCallback(__('The audio file is too long. The maximum recording time is 25 minutes.', 'jetpack-ai-client'));
+                }
+                setIsValidatingAudio(false);
+                return successCallback({ duration, isFile, size: audio?.size });
+            });
+        });
+    }, [setIsValidatingAudio]);
+    return { isValidatingAudio, validateAudio };
+}

package/build/hooks/use-media-recording/index.d.ts

@@ -1,4 +1,4 @@
-export type RecordingState = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
+export type RecordingState = 'inactive' | 'recording' | 'paused' | 'error';
 type UseMediaRecordingProps = {
     onDone?: (blob: Blob) => void;
 };
@@ -27,10 +27,6 @@ type UseMediaRecordingReturn = {
      * The error handler
      */
     onError: (err: string | Error) => void;
-    /**
-     * The processing handler
-     */
-    onProcessing: () => void;
     controls: {
         /**
          * `start` recording handler

package/build/hooks/use-media-recording/index.js

@@ -11,7 +11,7 @@ import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
 export default function useMediaRecording({ onDone, } = {}) {
     // Reference to the media recorder instance
     const mediaRecordRef = useRef(null);
-    // Recording state: `inactive`, `recording`, `paused`, `processing`, `error`
+    // Recording state: `inactive`, `recording`, `paused`, `error`
     const [state, setState] = useState('inactive');
     // reference to the paused state to be used in the `onDataAvailable` event listener,
     // as the `mediaRecordRef.current.state` is already `inactive` when the recorder is stopped,
@@ -19,6 +19,7 @@ export default function useMediaRecording({ onDone, } = {}) {
     const isPaused = useRef(false);
     const recordStartTimestamp = useRef(0);
     const [duration, setDuration] = useState(0);
+    const audioStream = useRef(null);
     // The recorded blob
     const [blob, setBlob] = useState(null);
     // Store the recorded chunks
@@ -111,6 +112,7 @@ export default function useMediaRecording({ onDone, } = {}) {
         navigator.mediaDevices
             .getUserMedia(constraints)
             .then(stream => {
+            audioStream.current = stream;
             const source = audioCtx.createMediaStreamSource(stream);
             source.connect(analyser.current);
             mediaRecordRef.current = new MediaRecorder(stream);
@@ -131,10 +133,6 @@ export default function useMediaRecording({ onDone, } = {}) {
         setError(typeof err === 'string' ? err : err.message);
         setState('error');
     }, []);
-    // manually set the state to `processing` for the file upload case
-    const onProcessing = useCallback(() => {
-        setState('processing');
-    }, []);
     /**
      * `start` event listener for the media recorder instance.
      */
@@ -148,7 +146,6 @@ export default function useMediaRecording({ onDone, } = {}) {
      * @returns {void}
      */
     function onStopListener() {
-        setState('processing');
         const lastBlob = getBlob();
         onDone?.(lastBlob);
         // Clear the recorded chunks
@@ -192,10 +189,20 @@ export default function useMediaRecording({ onDone, } = {}) {
             });
         }
     }
+    /**
+     * Close the audio stream
+     */
+    function closeStream() {
+        if (audioStream.current) {
+            const tracks = audioStream.current.getTracks();
+            tracks.forEach(track => track.stop());
+        }
+    }
     // Remove listeners and clear the recorded chunks
     useEffect(() => {
         reset();
         return () => {
+            closeStream();
             clearListeners();
         };
     }, []);
@@ -206,7 +213,6 @@ export default function useMediaRecording({ onDone, } = {}) {
         duration,
         analyser: analyser.current,
         onError,
-        onProcessing,
         controls: {
             start,
             pause,

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/build/index.d.ts

@@ -6,6 +6,7 @@ export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
+export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 export * from './icons/index.js';
 export * from './components/index.js';
 export * from './data-flow/index.js';

package/build/index.js

@@ -12,6 +12,7 @@ export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
+export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 /*
  * Components: Icons
  */

package/build/types.d.ts

@@ -17,6 +17,7 @@ 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 type { UseAudioValidationReturn, ValidatedAudioInformation, } from './hooks/use-audio-validation/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];
@@ -27,6 +28,7 @@ export type { RecordingState } from './hooks/use-media-recording/index.js';
 export type CancelablePromise<T = void> = Promise<T> & {
     canceled?: boolean;
 };
+export type TranscriptionState = RecordingState | 'validating' | 'processing' | 'error';
 interface JPConnectionInitialState {
     apiNonce: string;
     siteSuffix: string;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.8.0",
+	"version": "0.8.2",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -38,19 +38,19 @@
 	"main": "./build/index.js",
 	"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-base-styles": "^0.6.18",
+		"@automattic/jetpack-connection": "^0.33.1",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.5",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@types/react": "18.2.33",
-		"@wordpress/api-fetch": "6.48.0",
-		"@wordpress/block-editor": "12.19.0",
-		"@wordpress/components": "26.0.0",
-		"@wordpress/compose": "6.28.0",
-		"@wordpress/data": "9.21.0",
-		"@wordpress/element": "5.28.0",
-		"@wordpress/i18n": "4.51.0",
-		"@wordpress/icons": "9.42.0",
+		"@types/react": "18.2.61",
+		"@wordpress/api-fetch": "6.49.0",
+		"@wordpress/block-editor": "12.20.0",
+		"@wordpress/components": "27.0.0",
+		"@wordpress/compose": "6.29.0",
+		"@wordpress/data": "9.22.0",
+		"@wordpress/element": "5.29.0",
+		"@wordpress/i18n": "4.52.0",
+		"@wordpress/icons": "9.43.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"react": "18.2.0",

package/src/audio-transcription/index.ts

@@ -5,37 +5,23 @@ 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.
+ * @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
@@ -56,18 +42,22 @@ export default async function transcribeAudio(
 			Authorization: `Bearer ${ token }`,
 		};
 
-		const response: AudioTranscriptionResponse = await apiFetch( {
-			url: `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${
-				feature ? `?feature=${ feature }` : ''
-			}`,
+		const URL = `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${
+			feature ? `?feature=${ feature }` : ''
+		}`;
+
+		return fetch( URL, {
 			method: 'POST',
 			body: formData,
 			headers,
+			signal: requestAbortSignal ?? undefined,
+		} ).then( response => {
+			debug( 'Transcription response: %o', response );
+			if ( response.ok ) {
+				return response.json().then( data => data?.text );
+			}
+			return response.json().then( data => Promise.reject( data ) );
 		} );
-
-		debug( 'Transcription response: %o', response );
-
-		return response.text;
 	} catch ( error ) {
 		debug( 'Transcription error response: %o', error );
 		return Promise.reject( error );

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

@@ -1,16 +1,13 @@
 /**
  * External dependencies
  */
-import { useCallback, useState } from '@wordpress/element';
+import { useCallback, useState, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 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 +18,8 @@ export type UseAudioTranscriptionReturn = {
 	transcriptionResult: string;
 	isTranscribingAudio: boolean;
 	transcriptionError: string;
-	transcribeAudio: ( audio: Blob ) => CancelablePromise;
+	transcribeAudio: ( audio: Blob ) => void;
+	cancelTranscription: () => void;
 };
 
 /**
@@ -33,6 +31,63 @@ export type UseAudioTranscriptionProps = {
 	onError?: ( error: string ) => void;
 };
 
+/**
+ * The error response from the audio transcription service.
+ */
+type AudioTranscriptionErrorResponse = {
+	/**
+	 * The error message.
+	 */
+	message: string;
+
+	/**
+	 * The error code.
+	 */
+	code: string;
+};
+
+/**
+ * Map error response to a string.
+ * @param {Error | string | AudioTranscriptionErrorResponse} error - The error response from the audio transcription service.
+ * @returns {string} the translated error message
+ */
+const mapErrorResponse = ( error: Error | string | AudioTranscriptionErrorResponse ): string => {
+	if ( typeof error === 'string' ) {
+		return error;
+	}
+
+	if ( 'code' in error ) {
+		switch ( error.code ) {
+			case 'error_quota_exceeded':
+				return __(
+					'You exceeded your current quota, please check your plan details.',
+					'jetpack-ai-client'
+				);
+			case 'jetpack_ai_missing_audio_param':
+				return __( 'The audio_file is required to perform a transcription.', 'jetpack-ai-client' );
+			case 'jetpack_ai_service_unavailable':
+				return __( 'The Jetpack AI service is temporarily unavailable.', 'jetpack-ai-client' );
+			case 'file_size_not_supported':
+				return __( 'The provided audio file is too big.', 'jetpack-ai-client' );
+			case 'file_type_not_supported':
+				return __( 'The provided audio file type is not supported.', 'jetpack-ai-client' );
+			case 'jetpack_ai_error':
+				return __(
+					'There was an error processing the transcription request.',
+					'jetpack-ai-client'
+				);
+			default:
+				return error.message;
+		}
+	}
+
+	if ( 'message' in error ) {
+		return error.message;
+	}
+
+	return __( 'There was an error processing the transcription request.', 'jetpack-ai-client' );
+};
+
 /**
  * A hook to handle audio transcription.
  *
@@ -47,6 +102,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 +115,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?.( mapErrorResponse( error ) );
 					}
-
-					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-audio-validation/index.ts

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const MAX_AUDIO_SIZE = 25000000; // 25MB
+const MAX_AUDIO_DURATION = 25 * 60; // 25 minutes
+const ALLOWED_MEDIA_TYPES = [
+	'audio/mpeg',
+	'audio/mp3',
+	'audio/ogg',
+	'audio/flac',
+	'audio/x-flac',
+	'audio/m4a',
+	'audio/x-m4a',
+	'audio/mp4',
+	'audio/wav',
+	'audio/wave',
+	'audio/x-wav',
+	'audio/webm',
+];
+
+/**
+ * The return value for the audio validation hook.
+ */
+export type UseAudioValidationReturn = {
+	isValidatingAudio: boolean;
+	validateAudio: (
+		audio: Blob,
+		successCallback: ( info?: ValidatedAudioInformation ) => void,
+		errorCallback: ( error: string ) => void
+	) => void;
+};
+
+/**
+ * The validated audio information.
+ */
+export type ValidatedAudioInformation = {
+	duration: number;
+	isFile: boolean;
+	size: number;
+};
+
+/**
+ * Hook to handle the validation of an audio file.
+ *
+ * @returns {UseAudioValidationReturn} - Object with the audio validation state and the function to validate the audio.
+ */
+export default function useAudioValidation(): UseAudioValidationReturn {
+	const [ isValidatingAudio, setIsValidatingAudio ] = useState< boolean >( false );
+
+	const validateAudio = useCallback(
+		(
+			audio: Blob,
+			successCallback: ( info?: ValidatedAudioInformation ) => void,
+			errorCallback: ( error: string ) => void
+		) => {
+			setIsValidatingAudio( true );
+
+			// Check if the audio file is too large
+			if ( audio?.size > MAX_AUDIO_SIZE ) {
+				setIsValidatingAudio( false );
+				return errorCallback(
+					__( 'The audio file is too large. The maximum file size is 25MB.', 'jetpack-ai-client' )
+				);
+			}
+
+			// When it's a file, check the media type
+			const isFile = audio instanceof File;
+			if ( isFile ) {
+				if ( ! ALLOWED_MEDIA_TYPES.includes( audio.type ) ) {
+					setIsValidatingAudio( false );
+					return errorCallback(
+						__(
+							'The audio file type is not supported. Please use a supported audio file type.',
+							'jetpack-ai-client'
+						)
+					);
+				}
+			}
+
+			// Check the duration of the audio
+			const audioContext = new AudioContext();
+
+			// Map blob to an array buffer
+			audio.arrayBuffer().then( arrayBuffer => {
+				// Decode audio file data contained in an ArrayBuffer
+				audioContext.decodeAudioData( arrayBuffer, function ( audioBuffer ) {
+					const duration = Math.ceil( audioBuffer.duration );
+
+					if ( duration > MAX_AUDIO_DURATION ) {
+						setIsValidatingAudio( false );
+						return errorCallback(
+							__(
+								'The audio file is too long. The maximum recording time is 25 minutes.',
+								'jetpack-ai-client'
+							)
+						);
+					}
+					setIsValidatingAudio( false );
+					return successCallback( { duration, isFile, size: audio?.size } );
+				} );
+			} );
+		},
+		[ setIsValidatingAudio ]
+	);
+
+	return { isValidatingAudio, validateAudio };
+}

package/src/hooks/use-media-recording/index.ts

@@ -5,7 +5,7 @@ import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
 /*
  * Types
  */
-export type RecordingState = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
+export type RecordingState = 'inactive' | 'recording' | 'paused' | 'error';
 type UseMediaRecordingProps = {
 	onDone?: ( blob: Blob ) => void;
 };
@@ -41,11 +41,6 @@ type UseMediaRecordingReturn = {
 	 */
 	onError: ( err: string | Error ) => void;
 
-	/**
-	 * The processing handler
-	 */
-	onProcessing: () => void;
-
 	controls: {
 		/**
 		 * `start` recording handler
@@ -90,7 +85,7 @@ export default function useMediaRecording( {
 	// Reference to the media recorder instance
 	const mediaRecordRef = useRef( null );
 
-	// Recording state: `inactive`, `recording`, `paused`, `processing`, `error`
+	// Recording state: `inactive`, `recording`, `paused`, `error`
 	const [ state, setState ] = useState< RecordingState >( 'inactive' );
 
 	// reference to the paused state to be used in the `onDataAvailable` event listener,
@@ -101,6 +96,8 @@ export default function useMediaRecording( {
 	const recordStartTimestamp = useRef< number >( 0 );
 	const [ duration, setDuration ] = useState< number >( 0 );
 
+	const audioStream = useRef< MediaStream | null >( null );
+
 	// The recorded blob
 	const [ blob, setBlob ] = useState< Blob | null >( null );
 
@@ -216,6 +213,7 @@ export default function useMediaRecording( {
 		navigator.mediaDevices
 			.getUserMedia( constraints )
 			.then( stream => {
+				audioStream.current = stream;
 				const source = audioCtx.createMediaStreamSource( stream );
 				source.connect( analyser.current );
 
@@ -239,11 +237,6 @@ export default function useMediaRecording( {
 		setState( 'error' );
 	}, [] );
 
-	// manually set the state to `processing` for the file upload case
-	const onProcessing = useCallback( () => {
-		setState( 'processing' );
-	}, [] );
-
 	/**
 	 * `start` event listener for the media recorder instance.
 	 */
@@ -258,7 +251,6 @@ export default function useMediaRecording( {
 	 * @returns {void}
 	 */
 	function onStopListener(): void {
-		setState( 'processing' );
 		const lastBlob = getBlob();
 		onDone?.( lastBlob );
 
@@ -310,11 +302,22 @@ export default function useMediaRecording( {
 		}
 	}
 
+	/**
+	 * Close the audio stream
+	 */
+	function closeStream() {
+		if ( audioStream.current ) {
+			const tracks = audioStream.current.getTracks();
+			tracks.forEach( track => track.stop() );
+		}
+	}
+
 	// Remove listeners and clear the recorded chunks
 	useEffect( () => {
 		reset();
 
 		return () => {
+			closeStream();
 			clearListeners();
 		};
 	}, [] );
@@ -326,7 +329,6 @@ export default function useMediaRecording( {
 		duration,
 		analyser: analyser.current,
 		onError,
-		onProcessing,
 
 		controls: {
 			start,

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,
 	};
 }

package/src/index.ts

@@ -13,6 +13,7 @@ export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
+export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 
 /*
  * Components: Icons

package/src/types.ts

@@ -46,6 +46,11 @@ export type {
 	UseTranscriptionPostProcessingReturn,
 	PostProcessingAction,
 } from './hooks/use-transcription-post-processing/index.js';
+export type {
+	UseAudioValidationReturn,
+	ValidatedAudioInformation,
+} from './hooks/use-audio-validation/index.js';
+
 /*
  * Hook constants
  */
@@ -88,6 +93,11 @@ export type { RecordingState } from './hooks/use-media-recording/index.js';
  */
 export type CancelablePromise< T = void > = Promise< T > & { canceled?: boolean };
 
+/*
+ * Transcription types
+ */
+export type TranscriptionState = RecordingState | 'validating' | 'processing' | 'error';
+
 // Connection initial state
 // @todo: it should be provided by the connection package
 interface JPConnectionInitialState {