@automattic/jetpack-ai-client 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -5,6 +5,15 @@ 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.0] - 2024-02-26
+### Added
+- Add upgrade message for free tier [#35794]
+
+### Changed
+- Updated package dependencies. [#35793]
+- Voice to Content: Add audio analyser to media recording hook [#35877]
+- Voice to Content: Make transcriptions cancelable and add onProcess callback [#35737]
+
 ## [0.7.0] - 2024-02-19
 ### Added
 - AI Client: add support for audio transcriptions. [#35691]
@@ -220,6 +229,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.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
 [0.6.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.5.1...v0.6.0

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

@@ -1,3 +1,7 @@
+/**
+ * Types
+ */
+import { CancelablePromise } from '../types.js';
 /**
  * A function that takes an audio blob and transcribes it.
  *
@@ -5,4 +9,4 @@
  * @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 function transcribeAudio(audio: Blob, feature?: string): Promise<string>;
+export default function transcribeAudio(audio: Blob, feature?: string): CancelablePromise<string>;

package/build/audio-transcription/index.js

@@ -15,7 +15,9 @@ const debug = debugFactory('jetpack-ai-client:audio-transcription');
  * @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, feature) {
+export default async function transcribeAudio(audio, feature
+// @ts-expect-error Promises are not cancelable by default
+) {
     debug('Transcribing audio: %o. Feature: %o', audio, feature);
     // Get a token to use the transcription service
     let token = '';

package/build/components/ai-control/index.d.ts

@@ -7,6 +7,7 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types.js';
+import type { ReactElement } from 'react';
 type AiControlProps = {
     disabled?: boolean;
     value: string;
@@ -17,23 +18,23 @@ 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;
 };
 /**
  * AI Control component.
  *
  * @param {AiControlProps} props       - Component props.
  * @param {React.MutableRefObject} ref - Ref to the component.
- * @returns {React.ReactElement}         Rendered component.
+ * @returns {ReactElement}         Rendered component.
  */
-export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, bannerComponent, errorComponent, }: AiControlProps, ref: React.MutableRefObject<null>): React.ReactElement;
+export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, bannerComponent, errorComponent, }: AiControlProps, ref: React.MutableRefObject<null>): ReactElement;
 declare const _default: React.ForwardRefExoticComponent<AiControlProps & React.RefAttributes<null>>;
 export default _default;

package/build/components/ai-control/index.js

@@ -5,10 +5,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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
@@ -23,10 +24,9 @@ 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({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, onDiscard = null, showRemove = false, bannerComponent = null, errorComponent = null, }, ref // eslint-disable-line @typescript-eslint/ban-types
-) {
+export function AIControl({ disabled = false, value = '', placeholder = '', showAccept = false, acceptLabel = __('Accept', 'jetpack-ai-client'), showButtonLabels = true, isTransparent = false, state = 'init', showGuideLine = false, customFooter = null, onChange = noop, onSend = noop, onStop = noop, onAccept = noop, onDiscard = null, showRemove = false, bannerComponent = null, errorComponent = null, }, ref) {
     const promptUserInputRef = useRef(null);
     const loading = state === 'requesting' || state === 'suggesting';
     const [editRequest, setEditRequest] = React.useState(false);

package/build/components/ai-control/message.d.ts

@@ -27,4 +27,14 @@ export default function Message({ severity, icon, children, }: MessageProps): Re
  * @returns {React.ReactElement } - Message component.
  */
 export declare function GuidelineMessage(): React.ReactElement;
+/**
+ * React component to render a upgrade message.
+ *
+ * @param {number} requestsRemaining - Number of requests remaining.
+ * @returns {React.ReactElement } - Message component.
+ */
+export declare function UpgradeMessage({ requestsRemaining, onUpgradeClick, }: {
+    requestsRemaining: number;
+    onUpgradeClick: () => void;
+}): React.ReactElement;
 export {};

package/build/components/ai-control/message.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * 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, info, cancelCircleFilled as error, check as success, } from '@wordpress/icons';
 import './style.scss';
 export const MESSAGE_SEVERITY_WARNING = 'warning';
@@ -42,3 +42,16 @@ export function GuidelineMessage() {
             link: _jsx(ExternalLink, { href: "https://automattic.com/ai-guidelines" }),
         }) }));
 }
+/**
+ * React component to render a upgrade message.
+ *
+ * @param {number} requestsRemaining - Number of requests remaining.
+ * @returns {React.ReactElement } - Message component.
+ */
+export function UpgradeMessage({ requestsRemaining, onUpgradeClick, }) {
+    return (_jsx(Message, { severity: MESSAGE_SEVERITY_INFO, children: 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: _jsx(Button, { variant: "link", onClick: onUpgradeClick }),
+        }) }));
+}

package/build/components/index.d.ts

@@ -1,4 +1,4 @@
 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, default as FooterMessage } from './ai-control/message.js';
+export { GuidelineMessage, UpgradeMessage, default as FooterMessage, } from './ai-control/message.js';

package/build/components/index.js

@@ -1,4 +1,4 @@
 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, default as FooterMessage } from './ai-control/message.js';
+export { GuidelineMessage, UpgradeMessage, default as FooterMessage, } from './ai-control/message.js';

package/build/data-flow/context.d.ts

@@ -1,3 +1,6 @@
+/**
+ * External dependencies
+ */
 import React from 'react';
 /**
  * Types & Constants
@@ -24,7 +27,7 @@ type AiDataContextProviderProps = {
  *
  * @returns {AiDataContextProps} Context.
  */
-export declare const AiDataContext: React.Context<AiDataContextProps>;
+export declare const AiDataContext: React.Context<object | AiDataContextProps>;
 /**
  * AI Data Context Provider
  *

package/build/data-flow/context.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * External dependencies
  */
-import { createContext } from '@wordpress/element';
+import { createContext } from 'react';
 /**
  * AI Data Context
  *

package/build/data-flow/use-ai-context.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCallback, useContext, useEffect } from '@wordpress/element';
+import { useCallback, useContext, useEffect } from 'react';
 /**
  * Internal dependencies
  */

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

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

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

@@ -29,16 +29,23 @@ export default function useAudioTranscription({ feature, onReady, onError, }) {
         /**
          * Call the audio transcription library.
          */
-        transcribeAudio(audio, feature)
+        const promise = 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,

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

@@ -1,20 +1,16 @@
-type RecordingStateProp = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
+export type RecordingState = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
 type UseMediaRecordingProps = {
-    onDone?: (blob: Blob, url: string) => void;
+    onDone?: (blob: Blob) => void;
 };
 type UseMediaRecordingReturn = {
     /**
      * The current recording state
      */
-    state: RecordingStateProp;
+    state: RecordingState;
     /**
      * The recorded blob
      */
     blob: Blob | null;
-    /**
-     * The recorded blob url
-     */
-    url: string | null;
     /**
      * The error message
      */
@@ -23,10 +19,18 @@ type UseMediaRecordingReturn = {
      * The duration of the recorded audio
      */
     duration: number;
+    /**
+     * The audio analyser node
+     */
+    analyser?: AnalyserNode;
     /**
      * 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

@@ -24,6 +24,7 @@ export default function useMediaRecording({ onDone, } = {}) {
     // Store the recorded chunks
     const recordedChunks = useRef([]).current;
     const [error, setError] = useState(null);
+    const analyser = useRef(null);
     /**
      * Get the recorded blob.
      *
@@ -104,10 +105,14 @@ export default function useMediaRecording({ onDone, } = {}) {
         if (!navigator.mediaDevices?.getUserMedia) {
             return;
         }
+        const audioCtx = new AudioContext();
+        analyser.current = audioCtx.createAnalyser();
         const constraints = { audio: true };
         navigator.mediaDevices
             .getUserMedia(constraints)
             .then(stream => {
+            const source = audioCtx.createMediaStreamSource(stream);
+            source.connect(analyser.current);
             mediaRecordRef.current = new MediaRecorder(stream);
             mediaRecordRef.current.addEventListener('start', onStartListener);
             mediaRecordRef.current.addEventListener('stop', onStopListener);
@@ -126,6 +131,10 @@ 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.
      */
@@ -141,8 +150,7 @@ export default function useMediaRecording({ onDone, } = {}) {
     function onStopListener() {
         setState('processing');
         const lastBlob = getBlob();
-        const url = URL.createObjectURL(lastBlob);
-        onDone?.(lastBlob, url);
+        onDone?.(lastBlob);
         // Clear the recorded chunks
         recordedChunks.length = 0;
     }
@@ -194,10 +202,11 @@ export default function useMediaRecording({ onDone, } = {}) {
     return {
         state,
         blob,
-        url: blob ? URL.createObjectURL(blob) : null,
         error,
         duration,
+        analyser: analyser.current,
         onError,
+        onProcessing,
         controls: {
             start,
             pause,

package/build/types.d.ts

@@ -23,6 +23,10 @@ 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/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.7.0",
+	"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.2",
+		"@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/audio-transcription/index.ts

@@ -7,6 +7,10 @@ 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' );
 
@@ -27,7 +31,11 @@ type AudioTranscriptionResponse = {
  * @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 ): Promise< string > {
+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

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

@@ -4,16 +4,11 @@
 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
@@ -25,6 +20,7 @@ import { GuidelineMessage } from './message.js';
  * 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/index.ts

@@ -1,4 +1,8 @@
 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, default as FooterMessage } from './ai-control/message.js';
+export {
+	GuidelineMessage,
+	UpgradeMessage,
+	default as FooterMessage,
+} from './ai-control/message.js';

package/src/data-flow/context.tsx

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { createContext } from '@wordpress/element';
-import React from 'react';
+import React, { createContext } from 'react';
 /**
  * Types & Constants
  */
@@ -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/use-ai-context.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCallback, useContext, useEffect } from '@wordpress/element';
+import { useCallback, useContext, useEffect } from 'react';
 /**
  * Internal dependencies
  */
@@ -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/hooks/use-audio-transcription/index.ts

@@ -7,6 +7,10 @@ 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' );
 
@@ -17,7 +21,7 @@ export type UseAudioTranscriptionReturn = {
 	transcriptionResult: string;
 	isTranscribingAudio: boolean;
 	transcriptionError: string;
-	transcribeAudio: ( audio: Blob ) => void;
+	transcribeAudio: ( audio: Blob ) => CancelablePromise;
 };
 
 /**
@@ -58,16 +62,26 @@ export default function useAudioTranscription( {
 			/**
 			 * Call the audio transcription library.
 			 */
-			transcribeAudio( audio, feature )
+			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 ]
 	);

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

@@ -5,27 +5,22 @@ import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
 /*
  * Types
  */
-type RecordingStateProp = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
+export type RecordingState = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
 type UseMediaRecordingProps = {
-	onDone?: ( blob: Blob, url: string ) => void;
+	onDone?: ( blob: Blob ) => void;
 };
 
 type UseMediaRecordingReturn = {
 	/**
 	 * The current recording state
 	 */
-	state: RecordingStateProp;
+	state: RecordingState;
 
 	/**
 	 * The recorded blob
 	 */
 	blob: Blob | null;
 
-	/**
-	 * The recorded blob url
-	 */
-	url: string | null;
-
 	/**
 	 * The error message
 	 */
@@ -36,11 +31,21 @@ type UseMediaRecordingReturn = {
 	 */
 	duration: number;
 
+	/**
+	 * The audio analyser node
+	 */
+	analyser?: AnalyserNode;
+
 	/**
 	 * The error handler
 	 */
 	onError: ( err: string | Error ) => void;
 
+	/**
+	 * The processing handler
+	 */
+	onProcessing: () => void;
+
 	controls: {
 		/**
 		 * `start` recording handler
@@ -86,7 +91,7 @@ export default function useMediaRecording( {
 	const mediaRecordRef = useRef( null );
 
 	// Recording state: `inactive`, `recording`, `paused`, `processing`, `error`
-	const [ state, setState ] = useState< RecordingStateProp >( 'inactive' );
+	const [ state, setState ] = useState< RecordingState >( '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,
@@ -104,6 +109,8 @@ export default function useMediaRecording( {
 
 	const [ error, setError ] = useState< string | null >( null );
 
+	const analyser = useRef< AnalyserNode >( null );
+
 	/**
 	 * Get the recorded blob.
 	 *
@@ -201,13 +208,18 @@ export default function useMediaRecording( {
 			return;
 		}
 
+		const audioCtx = new AudioContext();
+		analyser.current = audioCtx.createAnalyser();
+
 		const constraints = { audio: true };
 
 		navigator.mediaDevices
 			.getUserMedia( constraints )
 			.then( stream => {
-				mediaRecordRef.current = new MediaRecorder( stream );
+				const source = audioCtx.createMediaStreamSource( stream );
+				source.connect( analyser.current );
 
+				mediaRecordRef.current = new MediaRecorder( stream );
 				mediaRecordRef.current.addEventListener( 'start', onStartListener );
 				mediaRecordRef.current.addEventListener( 'stop', onStopListener );
 				mediaRecordRef.current.addEventListener( 'pause', onPauseListener );
@@ -227,6 +239,11 @@ 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.
 	 */
@@ -243,8 +260,7 @@ export default function useMediaRecording( {
 	function onStopListener(): void {
 		setState( 'processing' );
 		const lastBlob = getBlob();
-		const url = URL.createObjectURL( lastBlob );
-		onDone?.( lastBlob, url );
+		onDone?.( lastBlob );
 
 		// Clear the recorded chunks
 		recordedChunks.length = 0;
@@ -306,10 +322,11 @@ export default function useMediaRecording( {
 	return {
 		state,
 		blob,
-		url: blob ? URL.createObjectURL( blob ) : null,
 		error,
 		duration,
+		analyser: analyser.current,
 		onError,
+		onProcessing,
 
 		controls: {
 			start,

package/src/types.ts

@@ -78,6 +78,16 @@ export const AI_MODEL_GPT_4 = 'gpt-4' as const;
 
 export type AiModelTypeProp = typeof AI_MODEL_GPT_3_5_Turbo_16K | typeof AI_MODEL_GPT_4;
 
+/*
+ * Media recording types
+ */
+export type { RecordingState } from './hooks/use-media-recording/index.js';
+
+/*
+ * Utility types
+ */
+export type CancelablePromise< T = void > = Promise< T > & { canceled?: boolean };
+
 // Connection initial state
 // @todo: it should be provided by the connection package
 interface JPConnectionInitialState {