@automattic/jetpack-ai-client 0.6.1 → 0.8.0

package/src/hooks/use-media-recording/Readme.md

@@ -23,7 +23,7 @@ The hook returns an object with the following properties and methods:
 Here's an example React component that utilizes the `useMediaRecording` hook.
 
 ```jsx
-import useMediaRecording from './useMediaRecording';
+import useMediaRecording from './useMediaRecording/index.js';
 
 const MediaRecorderComponent = () => {
 	const { start, pause, resume, stop, state } = useMediaRecording();
@@ -47,4 +47,4 @@ const MediaRecorderComponent = () => {
 		</div>
 	);
 };
-```
+```

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

@@ -2,11 +2,10 @@
  * External dependencies
  */
 import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
-
 /*
  * Types
  */
-type RecordingStateProp = 'inactive' | 'recording' | 'paused';
+export type RecordingState = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
 type UseMediaRecordingProps = {
 	onDone?: ( blob: Blob ) => void;
 };
@@ -15,7 +14,7 @@ type UseMediaRecordingReturn = {
 	/**
 	 * The current recording state
 	 */
-	state: RecordingStateProp;
+	state: RecordingState;
 
 	/**
 	 * The recorded blob
@@ -23,29 +22,56 @@ type UseMediaRecordingReturn = {
 	blob: Blob | null;
 
 	/**
-	 * The recorded blob url
+	 * The error message
 	 */
-	url: string | null;
+	error: string | null;
 
 	/**
-	 * `start` recording handler
+	 * The duration of the recorded audio
 	 */
-	start: ( timeslice?: number ) => void;
+	duration: number;
 
 	/**
-	 * `pause` recording handler
+	 * The audio analyser node
 	 */
-	pause: () => void;
+	analyser?: AnalyserNode;
 
 	/**
-	 * `resume` recording handler
+	 * The error handler
 	 */
-	resume: () => void;
+	onError: ( err: string | Error ) => void;
 
 	/**
-	 * `stop` recording handler
+	 * The processing handler
 	 */
-	stop: () => void;
+	onProcessing: () => void;
+
+	controls: {
+		/**
+		 * `start` recording handler
+		 */
+		start: ( timeslice?: number ) => void;
+
+		/**
+		 * `pause` recording handler
+		 */
+		pause: () => void;
+
+		/**
+		 * `resume` recording handler
+		 */
+		resume: () => void;
+
+		/**
+		 * `stop` recording handler
+		 */
+		stop: () => void;
+
+		/**
+		 * `reset` recording handler
+		 */
+		reset: () => void;
+	};
 };
 
 type MediaRecorderEvent = {
@@ -64,8 +90,16 @@ export default function useMediaRecording( {
 	// Reference to the media recorder instance
 	const mediaRecordRef = useRef( null );
 
-	// Recording state: `inactive`, `recording`, `paused`
-	const [ state, setState ] = useState< RecordingStateProp >( 'inactive' );
+	// Recording state: `inactive`, `recording`, `paused`, `processing`, `error`
+	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,
+	// and the event listener does not react to state changes
+	const isPaused = useRef< boolean >( false );
+
+	const recordStartTimestamp = useRef< number >( 0 );
+	const [ duration, setDuration ] = useState< number >( 0 );
 
 	// The recorded blob
 	const [ blob, setBlob ] = useState< Blob | null >( null );
@@ -73,6 +107,10 @@ export default function useMediaRecording( {
 	// Store the recorded chunks
 	const recordedChunks = useRef< Array< Blob > >( [] ).current;
 
+	const [ error, setError ] = useState< string | null >( null );
+
+	const analyser = useRef< AnalyserNode >( null );
+
 	/**
 	 * Get the recorded blob.
 	 *
@@ -86,6 +124,8 @@ export default function useMediaRecording( {
 
 	// `start` recording handler
 	const start = useCallback( ( timeslice: number ) => {
+		clearData();
+
 		if ( ! timeslice ) {
 			return mediaRecordRef?.current?.start();
 		}
@@ -93,22 +133,115 @@ export default function useMediaRecording( {
 		if ( timeslice < 100 ) {
 			timeslice = 100; // set minimum timeslice to 100ms
 		}
+
+		// Record the start time
+		recordStartTimestamp.current = Date.now();
+
 		mediaRecordRef?.current?.start( timeslice );
 	}, [] );
 
 	// `pause` recording handler
 	const pause = useCallback( () => {
+		isPaused.current = true;
 		mediaRecordRef?.current?.pause();
+
+		// Calculate the duration of the recorded audio from the start time
+		setDuration( currentDuration => currentDuration + Date.now() - recordStartTimestamp.current );
 	}, [] );
 
 	// `resume` recording handler
 	const resume = useCallback( () => {
+		isPaused.current = false;
 		mediaRecordRef?.current?.resume();
+
+		// Record the start time
+		recordStartTimestamp.current = Date.now();
 	}, [] );
 
 	// `stop` recording handler
 	const stop = useCallback( () => {
 		mediaRecordRef?.current?.stop();
+
+		if ( state === 'recording' ) {
+			// Calculate the duration of the recorded audio from the start time
+			setDuration( currentDuration => currentDuration + Date.now() - recordStartTimestamp.current );
+		}
+	}, [] );
+
+	// clears the recording state
+	const clearData = useCallback( () => {
+		recordedChunks.length = 0;
+		setBlob( null );
+		setError( null );
+		setDuration( 0 );
+		isPaused.current = false;
+		recordStartTimestamp.current = 0;
+	}, [] );
+
+	// removes the event listeners
+	const clearListeners = useCallback( () => {
+		/*
+		 * mediaRecordRef is not defined when
+		 * the getUserMedia API is not supported,
+		 * or when the user has not granted access
+		 */
+		if ( ! mediaRecordRef?.current ) {
+			return;
+		}
+
+		mediaRecordRef.current.removeEventListener( 'start', onStartListener );
+		mediaRecordRef.current.removeEventListener( 'stop', onStopListener );
+		mediaRecordRef.current.removeEventListener( 'pause', onPauseListener );
+		mediaRecordRef.current.removeEventListener( 'resume', onResumeListener );
+		mediaRecordRef.current.removeEventListener( 'dataavailable', onDataAvailableListener );
+		mediaRecordRef.current = null;
+	}, [] );
+
+	// resets the recording state, initializing the media recorder instance
+	const reset = useCallback( () => {
+		setState( 'inactive' );
+		clearData();
+		clearListeners();
+
+		// Check if the getUserMedia API is supported
+		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 );
+				mediaRecordRef.current.addEventListener( 'pause', onPauseListener );
+				mediaRecordRef.current.addEventListener( 'resume', onResumeListener );
+				mediaRecordRef.current.addEventListener( 'dataavailable', onDataAvailableListener );
+			} )
+			.catch( err => {
+				// @todo: handle error
+				throw err;
+			} );
+	}, [] );
+
+	// stops the recording and sets the error state
+	const onError = useCallback( ( err: string | Error ) => {
+		stop();
+		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' );
 	}, [] );
 
 	/**
@@ -120,12 +253,14 @@ export default function useMediaRecording( {
 
 	/**
 	 * `stop` event listener for the media recorder instance.
+	 * Happens after the last `dataavailable` event.
 	 *
 	 * @returns {void}
 	 */
 	function onStopListener(): void {
-		setState( 'inactive' );
-		onDone?.( getBlob() );
+		setState( 'processing' );
+		const lastBlob = getBlob();
+		onDone?.( lastBlob );
 
 		// Clear the recorded chunks
 		recordedChunks.length = 0;
@@ -162,58 +297,43 @@ export default function useMediaRecording( {
 
 		// Create and store the Blob for the recorded chunks
 		setBlob( getBlob() );
-	}
 
-	// Create media recorder instance
-	useEffect( () => {
-		// Check if the getUserMedia API is supported
-		if ( ! navigator.mediaDevices?.getUserMedia ) {
-			return;
+		// If the recorder was paused, it is the last data available event, so we do not update the duration
+		if ( ! isPaused.current ) {
+			setDuration( currentDuration => {
+				const now = Date.now();
+				const difference = now - recordStartTimestamp.current;
+				// Update the start time
+				recordStartTimestamp.current = now;
+				return currentDuration + difference;
+			} );
 		}
+	}
 
-		const constraints = { audio: true };
-
-		navigator.mediaDevices
-			.getUserMedia( constraints )
-			.then( stream => {
-				mediaRecordRef.current = new MediaRecorder( stream );
+	// Remove listeners and clear the recorded chunks
+	useEffect( () => {
+		reset();
 
-				mediaRecordRef.current.addEventListener( 'start', onStartListener );
-				mediaRecordRef.current.addEventListener( 'stop', onStopListener );
-				mediaRecordRef.current.addEventListener( 'pause', onPauseListener );
-				mediaRecordRef.current.addEventListener( 'resume', onResumeListener );
-				mediaRecordRef.current.addEventListener( 'dataavailable', onDataAvailableListener );
-			} )
-			.catch( err => {
-				// @todo: handle error
-				throw err;
-			} );
 		return () => {
-			/*
-			 * mediaRecordRef is not defined when
-			 * the getUserMedia API is not supported,
-			 * or when the user has not granted access
-			 */
-			if ( ! mediaRecordRef?.current ) {
-				return;
-			}
-
-			mediaRecordRef.current.removeEventListener( 'start', onStartListener );
-			mediaRecordRef.current.removeEventListener( 'stop', onStopListener );
-			mediaRecordRef.current.removeEventListener( 'pause', onPauseListener );
-			mediaRecordRef.current.removeEventListener( 'resume', onResumeListener );
-			mediaRecordRef.current.removeEventListener( 'dataavailable', onDataAvailableListener );
+			clearListeners();
 		};
 	}, [] );
 
 	return {
 		state,
 		blob,
-		url: blob ? URL.createObjectURL( blob ) : null,
-
-		start,
-		pause,
-		resume,
-		stop,
+		error,
+		duration,
+		analyser: analyser.current,
+		onError,
+		onProcessing,
+
+		controls: {
+			start,
+			pause,
+			resume,
+			stop,
+			reset,
+		},
 	};
 }

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

@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import useAiSuggestions, { RequestingErrorProps } from '../use-ai-suggestions/index.js';
+import type { PromptProp } from '../../types.js';
+
+const debug = debugFactory( 'jetpack-ai-client:use-transcription-post-processing' );
+
+/**
+ * Post-processing types.
+ */
+export const TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT = 'voice-to-content-simple-draft';
+export type PostProcessingAction = typeof TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT;
+
+/**
+ * The return value for the transcription post-processing hook.
+ */
+export type UseTranscriptionPostProcessingReturn = {
+	postProcessingResult: string;
+	isProcessingTranscription: boolean;
+	postProcessingError: string;
+	processTranscription: ( action: PostProcessingAction, transcription: string ) => void;
+};
+
+/**
+ * The props for the transcription post-processing hook.
+ */
+export type UseTranscriptionPostProcessingProps = {
+	feature: string;
+	onReady?: ( postProcessingResult: string ) => void;
+	onError?: ( error: string ) => void;
+	onUpdate?: ( currentPostProcessingResult: string ) => void;
+};
+
+/**
+ * A hook to handle transcription post-processing.
+ *
+ * @param {string} feature - The feature name that is calling the post-processing actions.
+ * @returns {UseTranscriptionPostProcessingReturn} - Object with properties to get the post-processing results.
+ */
+export default function useTranscriptionPostProcessing( {
+	feature,
+	onReady,
+	onError,
+	onUpdate,
+}: UseTranscriptionPostProcessingProps ): UseTranscriptionPostProcessingReturn {
+	const [ postProcessingResult, setPostProcessingResult ] = useState< string >( '' );
+	const [ postProcessingError, setPostProcessingError ] = useState< string >( '' );
+	const [ isProcessingTranscription, setIsProcessingTranscription ] = useState( false );
+
+	/**
+	 * Set-up the useAiSuggestions hook.
+	 */
+	const handleOnSuggestion = useCallback(
+		( suggestion: string ) => {
+			setPostProcessingResult( suggestion );
+			onUpdate?.( suggestion );
+		},
+		[ setPostProcessingResult, onUpdate ]
+	);
+
+	const handleOnDone = useCallback(
+		( result: string ) => {
+			setPostProcessingResult( result );
+			onUpdate?.( result );
+			onReady?.( result );
+		},
+		[ setPostProcessingResult, onUpdate, onReady ]
+	);
+
+	const handleOnError = useCallback(
+		( errorData: RequestingErrorProps ) => {
+			setPostProcessingError( errorData.message );
+			onError?.( errorData.message );
+		},
+		[ setPostProcessingError, onError ]
+	);
+
+	const { request } = useAiSuggestions( {
+		autoRequest: false,
+		onSuggestion: handleOnSuggestion,
+		onDone: handleOnDone,
+		onError: handleOnError,
+	} );
+
+	const handleTranscriptionPostProcessing = useCallback(
+		( action: PostProcessingAction, transcription: string ) => {
+			debug( 'Post-processing transcription' );
+
+			/**
+			 * Reset the transcription result and error.
+			 */
+			setPostProcessingResult( '' );
+			setPostProcessingError( '' );
+			setIsProcessingTranscription( true );
+
+			/**
+			 * Build the prompt to call the suggestion hook.
+			 */
+			const messages: PromptProp = [
+				{
+					role: 'jetpack-ai',
+					context: {
+						type: action,
+						content: transcription,
+					},
+				},
+			];
+
+			/**
+			 * Call the suggestion hook using the message.
+			 */
+			request( messages, { feature } );
+		},
+		[
+			setPostProcessingResult,
+			setPostProcessingError,
+			setIsProcessingTranscription,
+			request,
+			feature,
+		]
+	);
+
+	return {
+		postProcessingResult,
+		isProcessingTranscription,
+		postProcessingError,
+		processTranscription: handleTranscriptionPostProcessing,
+	};
+}

package/src/icons/index.ts

@@ -1,7 +1,7 @@
-export { default as aiAssistantIcon } from './ai-assistant';
-export { default as micIcon } from './mic';
-export { default as origamiPlaneIcon } from './origami-plane';
-export { default as playerPlayIcon } from './player-play';
-export { default as playerStopIcon } from './player-stop';
-export { default as playerPauseIcon } from './player-pause';
-export { default as speakToneIcon } from './speak-tone';
+export { default as aiAssistantIcon } from './ai-assistant.js';
+export { default as micIcon } from './mic.js';
+export { default as origamiPlaneIcon } from './origami-plane.js';
+export { default as playerPlayIcon } from './player-play.js';
+export { default as playerStopIcon } from './player-stop.js';
+export { default as playerPauseIcon } from './player-pause.js';
+export { default as speakToneIcon } from './speak-tone.js';

package/src/icons/mic.tsx

@@ -1,27 +1,25 @@
 /**
  * External dependencies
  */
-import { SVG, Rect, Line, Path } from '@wordpress/components';
+import { SVG, Rect, Path } from '@wordpress/components';
 import React from 'react';
 
 const mic = (
-	<SVG width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/SVG">
-		<Rect
-			x="8.75"
-			y="2.75"
-			width="6.5"
-			height="11.5"
-			rx="3.25"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			fill="none"
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/SVG">
+		<Path
+			d="M12 4.75C11.0479 4.75 10.1052 4.93753 9.22554 5.30187C8.34593 5.66622 7.5467 6.20025 6.87348 6.87348C6.20025 7.5467 5.66622 8.34593 5.30187 9.22554C4.93753 10.1052 4.75 11.0479 4.75 12C4.75 12.9521 4.93753 13.8948 5.30187 14.7745C5.66622 15.6541 6.20025 16.4533 6.87348 17.1265C7.5467 17.7997 8.34593 18.3338 9.22554 18.6981C10.1052 19.0625 11.0479 19.25 12 19.25C13.9228 19.25 15.7669 18.4862 17.1265 17.1265C18.4862 15.7669 19.25 13.9228 19.25 12C19.25 10.0772 18.4862 8.23312 17.1265 6.87348C15.7669 5.51384 13.9228 4.75 12 4.75ZM3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12Z"
+			fill="#008710"
+		/>
+		<Rect x="10.5" y="8.25" width="3" height="4.875" rx="1.5" fill="#008710" />
+		<Path
+			d="M15 11.25C15 11.644 14.9224 12.0341 14.7716 12.3981C14.6209 12.762 14.3999 13.0927 14.1213 13.3713C13.8427 13.6499 13.512 13.8709 13.1481 14.0216C12.7841 14.1724 12.394 14.25 12 14.25C11.606 14.25 11.2159 14.1724 10.8519 14.0216C10.488 13.8709 10.1573 13.6499 9.87868 13.3713C9.6001 13.0927 9.37913 12.762 9.22836 12.3981C9.0776 12.0341 9 11.644 9 11.25"
+			stroke="#008710"
+			strokeWidth="1.125"
+			strokeLinecap="round"
 		/>
-		<Line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" strokeWidth="1.5" fill="none" />
 		<Path
-			d="M18 11C18 11.7879 17.8448 12.5681 17.5433 13.2961C17.2417 14.0241 16.7998 14.6855 16.2426 15.2426C15.6855 15.7998 15.0241 16.2418 14.2961 16.5433C13.5681 16.8448 12.7879 17 12 17C11.2121 17 10.4319 16.8448 9.7039 16.5433C8.97595 16.2417 8.31451 15.7998 7.75736 15.2426C7.20021 14.6855 6.75825 14.0241 6.45672 13.2961C6.15519 12.5681 6 11.7879 6 11"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			fill="none"
+			d="M11.4375 15.75C11.4375 16.0607 11.6893 16.3125 12 16.3125C12.3107 16.3125 12.5625 16.0607 12.5625 15.75L11.4375 15.75ZM11.4375 14.25L11.4375 15.75L12.5625 15.75L12.5625 14.25L11.4375 14.25Z"
+			fill="#008710"
 		/>
 	</SVG>
 );

package/src/icons/player-pause.tsx

@@ -5,13 +5,13 @@ import { SVG, Path, Rect } from '@wordpress/components';
 import React from 'react';
 
 const playerPause = (
-	<SVG width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/SVG">
 		<Path
-			d="M16 6.33325C14.7306 6.33325 13.4736 6.58329 12.3007 7.06908C11.1279 7.55488 10.0623 8.26692 9.16464 9.16455C8.26701 10.0622 7.55497 11.1278 7.06917 12.3006C6.58338 13.4735 6.33334 14.7305 6.33334 15.9999C6.33334 17.2694 6.58338 18.5264 7.06917 19.6992C7.55497 20.872 8.26701 21.9377 9.16464 22.8353C10.0623 23.7329 11.1279 24.445 12.3007 24.9308C13.4736 25.4165 14.7306 25.6666 16 25.6666C18.5638 25.6666 21.0225 24.6481 22.8354 22.8353C24.6482 21.0224 25.6667 18.5637 25.6667 15.9999C25.6667 13.4362 24.6482 10.9774 22.8354 9.16455C21.0225 7.3517 18.5638 6.33325 16 6.33325ZM4.33334 15.9999C4.33334 12.9057 5.56251 9.93826 7.75043 7.75034C9.93836 5.56242 12.9058 4.33325 16 4.33325C19.0942 4.33325 22.0617 5.56242 24.2496 7.75034C26.4375 9.93826 27.6667 12.9057 27.6667 15.9999C27.6667 19.0941 26.4375 22.0616 24.2496 24.2495C22.0617 26.4374 19.0942 27.6666 16 27.6666C12.9058 27.6666 9.93836 26.4374 7.75043 24.2495C5.56251 22.0616 4.33334 19.0941 4.33334 15.9999Z"
-			fill="currentColor"
+			d="M12 4.75C11.0479 4.75 10.1052 4.93753 9.22554 5.30187C8.34593 5.66622 7.5467 6.20025 6.87348 6.87348C6.20025 7.5467 5.66622 8.34593 5.30187 9.22554C4.93753 10.1052 4.75 11.0479 4.75 12C4.75 12.9521 4.93753 13.8948 5.30187 14.7745C5.66622 15.6541 6.20025 16.4533 6.87348 17.1265C7.5467 17.7997 8.34593 18.3338 9.22554 18.6981C10.1052 19.0625 11.0479 19.25 12 19.25C13.9228 19.25 15.7669 18.4862 17.1265 17.1265C18.4862 15.7669 19.25 13.9228 19.25 12C19.25 10.0772 18.4862 8.23312 17.1265 6.87348C15.7669 5.51384 13.9228 4.75 12 4.75ZM3.25 12C3.25 9.67936 4.17187 7.45376 5.81282 5.81282C7.45376 4.17187 9.67936 3.25 12 3.25C14.3206 3.25 16.5462 4.17187 18.1872 5.81282C19.8281 7.45376 20.75 9.67936 20.75 12C20.75 14.3206 19.8281 16.5462 18.1872 18.1872C16.5462 19.8281 14.3206 20.75 12 20.75C9.67936 20.75 7.45376 19.8281 5.81282 18.1872C4.17187 16.5462 3.25 14.3206 3.25 12Z"
+			fill="#008710"
 		/>
-		<Rect x="17" y="12" width="3" height="8" fill="currentColor" />
-		<Rect x="12" y="12" width="3" height="8" fill="currentColor" />
+		<Rect x="12.75" y="9" width="2.25" height="6" fill="#008710" />
+		<Rect x="9" y="9" width="2.25" height="6" fill="#008710" />
 	</SVG>
 );
 

package/src/index.ts

@@ -1,32 +1,35 @@
 /*
  * Core library exports
  */
-export { default as requestJwt } from './jwt';
-export { default as SuggestionsEventSource } from './suggestions-event-source';
-export { default as askQuestion } from './ask-question';
+export { default as requestJwt } from './jwt/index.js';
+export { default as SuggestionsEventSource } from './suggestions-event-source/index.js';
+export { default as askQuestion } from './ask-question/index.js';
+export { default as transcribeAudio } from './audio-transcription/index.js';
 
 /*
  * Hooks
  */
-export { default as useAiSuggestions } from './hooks/use-ai-suggestions';
-export { default as useMediaRecording } from './hooks/use-media-recording';
+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';
 
 /*
  * Components: Icons
  */
-export * from './icons';
+export * from './icons/index.js';
 
 /*
  * Components
  */
-export * from './components';
+export * from './components/index.js';
 
 /*
  * Contexts
  */
-export * from './data-flow';
+export * from './data-flow/index.js';
 
 /*
  * Types
  */
-export * from './types';
+export * from './types.js';

package/src/jwt/index.ts

@@ -2,8 +2,11 @@
  * External dependencies
  */
 import { isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
-import apiFetch from '@wordpress/api-fetch';
 import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import apiFetch from '../api-fetch/index.js';
 /*
  * Types & constants
  */

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

@@ -6,8 +6,8 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import { getErrorData } from '../hooks/use-ai-suggestions';
-import requestJwt from '../jwt';
+import { getErrorData } from '../hooks/use-ai-suggestions/index.js';
+import requestJwt from '../jwt/index.js';
 /*
  * Types & constants
  */
@@ -19,13 +19,13 @@ import {
 	ERROR_RESPONSE,
 	ERROR_SERVICE_UNAVAILABLE,
 	ERROR_UNCLEAR_PROMPT,
-} from '../types';
+} from '../types.js';
 import type {
 	AiModelTypeProp,
 	PromptMessagesProp,
 	PromptProp,
 	SuggestionErrorCode,
-} from '../types';
+} from '../types.js';
 
 type SuggestionsEventSourceConstructorArgs = {
 	url?: string;