@automattic/jetpack-ai-client 0.6.1 → 0.7.0

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

@@ -11,12 +11,19 @@ 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`
+    // Recording state: `inactive`, `recording`, `paused`, `processing`, `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,
+    // and the event listener does not react to state changes
+    const isPaused = useRef(false);
+    const recordStartTimestamp = useRef(0);
+    const [duration, setDuration] = useState(0);
     // The recorded blob
     const [blob, setBlob] = useState(null);
     // Store the recorded chunks
     const recordedChunks = useRef([]).current;
+    const [error, setError] = useState(null);
     /**
      * Get the recorded blob.
      *
@@ -29,25 +36,95 @@ export default function useMediaRecording({ onDone, } = {}) {
     }
     // `start` recording handler
     const start = useCallback((timeslice) => {
+        clearData();
         if (!timeslice) {
             return mediaRecordRef?.current?.start();
         }
         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 constraints = { audio: true };
+        navigator.mediaDevices
+            .getUserMedia(constraints)
+            .then(stream => {
+            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) => {
+        stop();
+        setError(typeof err === 'string' ? err : err.message);
+        setState('error');
     }, []);
     /**
      * `start` event listener for the media recorder instance.
@@ -57,12 +134,15 @@ export default function useMediaRecording({ onDone, } = {}) {
     }
     /**
      * `stop` event listener for the media recorder instance.
+     * Happens after the last `dataavailable` event.
      *
      * @returns {void}
      */
     function onStopListener() {
-        setState('inactive');
-        onDone?.(getBlob());
+        setState('processing');
+        const lastBlob = getBlob();
+        const url = URL.createObjectURL(lastBlob);
+        onDone?.(lastBlob, url);
         // Clear the recorded chunks
         recordedChunks.length = 0;
     }
@@ -93,51 +173,37 @@ export default function useMediaRecording({ onDone, } = {}) {
         recordedChunks.push(data);
         // Create and store the Blob for the recorded chunks
         setBlob(getBlob());
+        // 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;
+            });
+        }
     }
-    // Create media recorder instance
+    // Remove listeners and clear the recorded chunks
     useEffect(() => {
-        // Check if the getUserMedia API is supported
-        if (!navigator.mediaDevices?.getUserMedia) {
-            return;
-        }
-        const constraints = { audio: true };
-        navigator.mediaDevices
-            .getUserMedia(constraints)
-            .then(stream => {
-            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;
-        });
+        reset();
         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,
+        onError,
+        controls: {
+            start,
+            pause,
+            resume,
+            stop,
+            reset,
+        },
     };
 }

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

@@ -0,0 +1,30 @@
+/**
+ * Post-processing types.
+ */
+export declare 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;

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

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import debugFactory from 'debug';
+/**
+ * Internal dependencies
+ */
+import useAiSuggestions from '../use-ai-suggestions/index.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';
+/**
+ * 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, }) {
+    const [postProcessingResult, setPostProcessingResult] = useState('');
+    const [postProcessingError, setPostProcessingError] = useState('');
+    const [isProcessingTranscription, setIsProcessingTranscription] = useState(false);
+    /**
+     * Set-up the useAiSuggestions hook.
+     */
+    const handleOnSuggestion = useCallback((suggestion) => {
+        setPostProcessingResult(suggestion);
+        onUpdate?.(suggestion);
+    }, [setPostProcessingResult, onUpdate]);
+    const handleOnDone = useCallback((result) => {
+        setPostProcessingResult(result);
+        onUpdate?.(result);
+        onReady?.(result);
+    }, [setPostProcessingResult, onUpdate, onReady]);
+    const handleOnError = useCallback((errorData) => {
+        setPostProcessingError(errorData.message);
+        onError?.(errorData.message);
+    }, [setPostProcessingError, onError]);
+    const { request } = useAiSuggestions({
+        autoRequest: false,
+        onSuggestion: handleOnSuggestion,
+        onDone: handleOnDone,
+        onError: handleOnError,
+    });
+    const handleTranscriptionPostProcessing = useCallback((action, transcription) => {
+        debug('Post-processing transcription');
+        /**
+         * Reset the transcription result and error.
+         */
+        setPostProcessingResult('');
+        setPostProcessingError('');
+        setIsProcessingTranscription(true);
+        /**
+         * Build the prompt to call the suggestion hook.
+         */
+        const messages = [
+            {
+                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/build/icons/index.d.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/build/icons/index.js

@@ -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/build/icons/mic.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * External dependencies
  */
-import { SVG, Rect, Line, Path } from '@wordpress/components';
-const mic = (_jsxs(SVG, { width: "24", height: "24", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/SVG", children: [_jsx(Rect, { x: "8.75", y: "2.75", width: "6.5", height: "11.5", rx: "3.25", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx(Line, { x1: "12", y1: "17", x2: "12", y2: "21", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx(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" })] }));
+import { SVG, Rect, Path } from '@wordpress/components';
+const mic = (_jsxs(SVG, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/SVG", children: [_jsx(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" }), _jsx(Rect, { x: "10.5", y: "8.25", width: "3", height: "4.875", rx: "1.5", fill: "#008710" }), _jsx(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" }), _jsx(Path, { 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" })] }));
 export default mic;

package/build/icons/player-pause.js

@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * External dependencies
  */
 import { SVG, Path, Rect } from '@wordpress/components';
-const playerPause = (_jsxs(SVG, { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(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" }), _jsx(Rect, { x: "17", y: "12", width: "3", height: "8", fill: "currentColor" }), _jsx(Rect, { x: "12", y: "12", width: "3", height: "8", fill: "currentColor" })] }));
+const playerPause = (_jsxs(SVG, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/SVG", children: [_jsx(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" }), _jsx(Rect, { x: "12.75", y: "9", width: "2.25", height: "6", fill: "#008710" }), _jsx(Rect, { x: "9", y: "9", width: "2.25", height: "6", fill: "#008710" })] }));
 export default playerPause;

package/build/index.d.ts

@@ -1,9 +1,12 @@
-export { default as requestJwt } from './jwt';
-export { default as SuggestionsEventSource } from './suggestions-event-source';
-export { default as askQuestion } from './ask-question';
-export { default as useAiSuggestions } from './hooks/use-ai-suggestions';
-export { default as useMediaRecording } from './hooks/use-media-recording';
-export * from './icons';
-export * from './components';
-export * from './data-flow';
-export * from './types';
+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';
+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 * from './icons/index.js';
+export * from './components/index.js';
+export * from './data-flow/index.js';
+export * from './types.js';

package/build/index.js

@@ -1,27 +1,30 @@
 /*
  * 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/build/jwt/index.js

@@ -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';
 const debug = debugFactory('jetpack-ai-client:jwt');
 const JWT_TOKEN_ID = 'jetpack-ai-jwt';
 const JWT_TOKEN_EXPIRATION_TIME = 2 * 60 * 1000; // 2 minutes

package/build/suggestions-event-source/index.d.ts

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { EventSourceMessage } from '@microsoft/fetch-event-source';
-import type { AiModelTypeProp, PromptProp } from '../types';
+import type { AiModelTypeProp, PromptProp } from '../types.js';
 type SuggestionsEventSourceConstructorArgs = {
     url?: string;
     question: PromptProp;

package/build/suggestions-event-source/index.js

@@ -6,12 +6,12 @@ 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
  */
-import { ERROR_CONTEXT_TOO_LARGE, ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_RESPONSE, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, } from '../types';
+import { ERROR_CONTEXT_TOO_LARGE, ERROR_MODERATION, ERROR_NETWORK, ERROR_QUOTA_EXCEEDED, ERROR_RESPONSE, ERROR_SERVICE_UNAVAILABLE, ERROR_UNCLEAR_PROMPT, } from '../types.js';
 const debug = debugFactory('jetpack-ai-client:suggestions-event-source');
 /**
  * SuggestionsEventSource is a wrapper around EvenTarget that emits

package/build/types.d.ts

@@ -13,8 +13,11 @@ export type PromptItemProps = {
 };
 export type PromptMessagesProp = Array<PromptItemProps>;
 export type PromptProp = PromptMessagesProp | string;
-export type { UseAiContextOptions } from './data-flow/use-ai-context';
-export type { RequestingErrorProps } from './hooks/use-ai-suggestions';
+export type { UseAiContextOptions } from './data-flow/use-ai-context.js';
+export type { RequestingErrorProps } from './hooks/use-ai-suggestions/index.js';
+export type { UseAudioTranscriptionProps, UseAudioTranscriptionReturn, } from './hooks/use-audio-transcription/index.js';
+export type { UseTranscriptionPostProcessingProps, UseTranscriptionPostProcessingReturn, PostProcessingAction, } from './hooks/use-transcription-post-processing/index.js';
+export { TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT } from './hooks/use-transcription-post-processing/index.js';
 export declare const REQUESTING_STATES: readonly ["init", "requesting", "suggesting", "done", "error"];
 export type RequestingStateProp = (typeof REQUESTING_STATES)[number];
 export declare const AI_MODEL_GPT_3_5_Turbo_16K: "gpt-3.5-turbo-16k";

package/build/types.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.6.1",
+	"version": "0.7.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": {
@@ -39,7 +39,7 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.17",
-		"@automattic/jetpack-connection": "^0.32.1",
+		"@automattic/jetpack-connection": "^0.32.2",
 		"@automattic/jetpack-shared-extension-utils": "^0.14.2",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.2.33",

package/src/api-fetch/index.ts

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

package/src/ask-question/index.ts

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

package/src/audio-transcription/index.ts

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